Linking backend data to frontend

frontend/app/(protected)/alerts/page.tsx

@@ -6,12 +6,28 @@ import Sidebar from '../../../components/ui/Sidebar'
 import useNavigationStore from '../../store/navigationStore'
 import DetectorList from '../../../components/alerts/DetectorList'
 import ExportMenu from '../../../components/ui/ExportMenu'
+import { useSession } from 'next-auth/react'
 
 const AlertsPage: React.FC = () => {
   const router = useRouter()
   const searchParams = useSearchParams()
   const { currentObject, setCurrentObject } = useNavigationStore()
   const [selectedDetectors, setSelectedDetectors] = useState<number[]>([])
+  const { data: session } = useSession()
+
+  type AlertItem = {
+    id: number
+    type: string
+    message: string
+    timestamp: string
+    acknowledged: boolean
+    priority: string
+    detector_id?: number
+    detector_name?: string
+    location?: string
+    object?: string
+  }
+  const [alerts, setAlerts] = useState<AlertItem[]>([])
 
   const urlObjectId = searchParams.get('objectId')
   const urlObjectTitle = searchParams.get('objectTitle')
@@ -24,6 +40,30 @@ const AlertsPage: React.FC = () => {
     }
   }, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])
 
+  useEffect(() => {
+    const loadAlerts = async () => {
+      try {
+        const params = new URLSearchParams()
+        if (currentObject.id) params.set('objectId', currentObject.id)
+        const res = await fetch(`/api/get-alerts?${params.toString()}`, { cache: 'no-store' })
+        if (!res.ok) return
+        const payload = await res.json()
+        console.log('[AlertsPage] GET /api/get-alerts', {
+          url: `/api/get-alerts?${params.toString()}`,
+          status: res.status,
+          payload,
+        })
+        const data = Array.isArray(payload?.data) ? payload.data : (payload?.data?.alerts || [])
+        console.log('[AlertsPage] parsed alerts:', data)
+        setAlerts(data as AlertItem[])
+      } catch (e) {
+        console.error('Failed to load alerts:', e)
+      }
+    }
+    loadAlerts()
+
+  }, [currentObject.id])
+
   const handleBackClick = () => {
     router.push('/dashboard')
   }
@@ -36,13 +76,39 @@ const AlertsPage: React.FC = () => {
     }
   }
 
-  const handleExport = (format: 'csv' | 'pdf') => {
-    // TODO: добавить функционал по экспорту
-    console.log(`Exporting ${selectedDetectors.length} items as ${format}`)
+  const handleExport = async (format: 'csv' | 'pdf', hours: number) => {
+    try {
+      const res = await fetch(`/api/get-reports`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(session?.accessToken ? { Authorization: `Bearer ${session.accessToken}` } : {}),
+        },
+        body: JSON.stringify({ format: format, hours }),
+        credentials: 'include',
+      })
+      if (!res.ok) {
+        const errText = await res.text()
+        throw new Error(`Export failed: ${res.status} ${errText}`)
+      }
+      const blob = await res.blob()
+      const contentDisposition = res.headers.get('Content-Disposition') || res.headers.get('content-disposition')
+      const filenameMatch = contentDisposition?.match(/filename="(.+)"/)
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').replace(/T/g, '_')
+      const filename = filenameMatch ? filenameMatch[1] : `alerts_report_${timestamp}.${format}`
+      const url = window.URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = filename
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(url)
+    } catch (error) {
+      console.error('Error:', error)
+    }
   }
 
-
-
   return (
     <div className="flex h-screen bg-[#0e111a]"> 
       <Sidebar 
@@ -77,7 +143,6 @@ const AlertsPage: React.FC = () => {
               <h1 className="text-white text-2xl font-semibold">Уведомления и тревоги</h1>
               
               <div className="flex items-center gap-4">
-                {/* Кол-во выбранных объектов */}
                 {selectedDetectors.length > 0 && (
                   <span className="text-gray-300 text-sm">
                     Выбрано: <span className="text-white font-medium">{selectedDetectors.length}</span>
@@ -93,6 +158,81 @@ const AlertsPage: React.FC = () => {
               selectedDetectors={selectedDetectors}
               onDetectorSelect={handleDetectorSelect}
             />
+
+            {/* История тревог */}
+            <div className="mt-6 bg-[#161824] rounded-[20px] p-6">
+              <div className="mb-4 flex items-center justify-between">
+                <h2 className="text-xl font-semibold text-white">История тревог</h2>
+                <span className="text-sm text-gray-400">Всего: {alerts.length}</span>
+              </div>
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b border-gray-700">
+                      <th className="text-left text-white font-medium py-3">Детектор</th>
+                      <th className="text-left text-white font-medium py-3">Статус</th>
+                      <th className="text-left text-white font-medium py-3">Сообщение</th>
+                      <th className="text-left text-white font-medium py-3">Местоположение</th>
+                      <th className="text-left text-white font-medium py-3">Приоритет</th>
+                      <th className="text-left text-white font-medium py-3">Подтверждено</th>
+                      <th className="text-left text-white font-medium py-3">Время</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {alerts.map((item) => (
+                      <tr key={item.id} className="border-b border-gray-700 hover:bg-gray-800/50 transition-colors">
+                        <td className="py-4">
+                          <div className="text-sm font-medium text-white">{item.detector_name || 'Детектор'}</div>
+                          {item.detector_id ? (
+                            <div className="text-sm text-gray-400">ID: {item.detector_id}</div>
+                          ) : null}
+                        </td>
+                        <td className="py-4">
+                          <div className="flex items-center gap-2">
+                            <div 
+                              className="w-3 h-3 rounded-full"
+                              style={{ backgroundColor: item.type === 'critical' ? '#b3261e' : item.type === 'warning' ? '#fd7c22' : '#00ff00' }}
+                            ></div>
+                            <span className="text-sm text-gray-300">
+                              {item.type === 'critical' ? 'Критический' : item.type === 'warning' ? 'Предупреждение' : 'Информация'}
+                            </span>
+                          </div>
+                        </td>
+                        <td className="py-4">
+                          <div className="text-sm text-white">{item.message}</div>
+                        </td>
+                        <td className="py-4">
+                          <div className="text-sm text-white">{item.location || '-'}</div>
+                        </td>
+                        <td className="py-4">
+                          <span 
+                            className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
+                            style={{ backgroundColor: item.priority === 'high' ? '#b3261e' : item.priority === 'medium' ? '#fd7c22' : '#00ff00' }}
+                          >
+                            {item.priority === 'high' ? 'Высокий' : item.priority === 'medium' ? 'Средний' : 'Низкий'}
+                          </span>
+                        </td>
+                        <td className="py-4">
+                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                            item.acknowledged ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                          }`}>
+                            {item.acknowledged ? 'Да' : 'Нет'}
+                          </span>
+                        </td>
+                        <td className="py-4">
+                          <div className="text-sm text-gray-300">{new Date(item.timestamp).toLocaleString('ru-RU')}</div>
+                        </td>
+                      </tr>
+                    ))}
+                    {alerts.length === 0 && (
+                      <tr>
+                        <td colSpan={7} className="py-8 text-center text-gray-400">Записей не найдено</td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
           </div>
         </div>
       </div>