Linking backend data to frontend

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

@@ -1,18 +1,21 @@
 'use client'
 
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import Sidebar from '../../../components/ui/Sidebar'
 import useNavigationStore from '../../store/navigationStore'
 import ReportsList from '../../../components/reports/ReportsList'
 import ExportMenu from '../../../components/ui/ExportMenu'
-import detectorsData from '../../../data/detectors.json'
-import axios from 'axios'
+import { useSession } from 'next-auth/react'
+import DetectorList from '../../../components/alerts/DetectorList'
 
 const ReportsPage: React.FC = () => {
   const router = useRouter()
   const searchParams = useSearchParams()
+  const { data: session } = useSession()
   const { currentObject, setCurrentObject } = useNavigationStore()
+  const [selectedDetectors, setSelectedDetectors] = useState<number[]>([])
+  const [detectorsData, setDetectorsData] = useState<any>({ detectors: {} })
 
   const urlObjectId = searchParams.get('objectId')
   const urlObjectTitle = searchParams.get('objectTitle')
@@ -25,36 +28,70 @@ const ReportsPage: React.FC = () => {
     }
   }, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])
 
+  useEffect(() => {
+    const loadDetectors = async () => {
+      try {
+        const params = new URLSearchParams()
+        if (currentObject.id) params.set('objectId', currentObject.id)
+        const res = await fetch(`/api/get-detectors?${params.toString()}`, { cache: 'no-store' })
+        if (!res.ok) return
+        const payload = await res.json()
+        const data = payload?.data || { detectors: {} }
+        console.log('[ReportsPage] GET /api/get-detectors', {
+          url: `/api/get-detectors?${params.toString()}`,
+          status: res.status,
+          payload,
+          parsed: data,
+        })
+        setDetectorsData(data)
+      } catch (e) {
+        console.error('Failed to load detectors data:', e)
+      }
+    }
+    loadDetectors()
+    
+  }, [currentObject.id])
+
   const handleBackClick = () => {
     router.push('/dashboard')
   }
 
-  const handleExport = async (format: 'csv' | 'pdf') => {
-    try {
-      const response = await axios.post(
-        `${process.env.NEXT_PUBLIC_API_URL}/account/get-reports/`,
-        { report_format: format },
-        {
-          responseType: 'blob',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
-      )
+  const handleDetectorSelect = (detectorId: number, selected: boolean) => {
+    if (selected) {
+      setSelectedDetectors(prev => [...prev, detectorId])
+    } else {
+      setSelectedDetectors(prev => prev.filter(id => id !== detectorId))
+    }
+  }
 
-      const contentDisposition = response.headers['content-disposition']
+  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()
+        console.error('[ReportsPage] POST /api/get-reports failed', { status: res.status, body: errText })
+        throw new Error(`Export failed: ${res.status} ${errText}`)
+      }
+      console.log('[ReportsPage] POST /api/get-reports success', { status: res.status, headers: Object.fromEntries(res.headers.entries()) })
+      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(new Blob([response.data]))
+      const filename = filenameMatch ? filenameMatch[1] : `detectors_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) {
@@ -63,12 +100,12 @@ const ReportsPage: React.FC = () => {
   }
 
   return (
-    <div className="flex h-screen bg-[#0e111a]">
-      <Sidebar
-        activeItem={9} // Reports
+    <div className="flex h-screen bg-[#0e111a]"> 
+      <Sidebar 
+        activeItem={9} // Отчёты 
       />
-
-      <div className="flex flex-1 flex-col">
+      
+      <div className="flex-1 flex flex-col">
         <header className="border-b border-gray-700 bg-[#161824] px-6 py-4">
           <div className="flex items-center gap-4">
             <button
@@ -103,7 +140,15 @@ const ReportsPage: React.FC = () => {
               <ExportMenu onExport={handleExport} />
             </div>
 
-            <ReportsList objectId={objectId || undefined} detectorsData={detectorsData} />
+            {/* Selection table to choose detectors to include in the report */}
+            <div className="mb-6">
+              <DetectorList objectId={objectId || undefined} selectedDetectors={selectedDetectors} onDetectorSelect={handleDetectorSelect} />
+            </div>
+
+            {/* Existing notifications-based list */}
+            <div className="mt-6">
+              <ReportsList detectorsData={detectorsData} />
+            </div>
           </div>
         </div>
       </div>