Added list of detectors and sensors sub-menus

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

@@ -7,6 +7,9 @@ import useNavigationStore from '../../store/navigationStore'
 import Monitoring from '../../../components/navigation/Monitoring'
 import FloorNavigation from '../../../components/navigation/FloorNavigation'
 import DetectorMenu from '../../../components/navigation/DetectorMenu'
+import ListOfDetectors from '../../../components/navigation/ListOfDetectors'
+import Sensors from '../../../components/navigation/Sensors'
+import AlertMenu from '../../../components/navigation/AlertMenu'
 import Notifications from '../../../components/notifications/Notifications'
 import NotificationDetectorInfo from '../../../components/notifications/NotificationDetectorInfo'
 import dynamic from 'next/dynamic'
@@ -56,6 +59,20 @@ interface NotificationType {
   priority: string
 }
 
+interface AlertType {
+  id: number
+  detector_id: number
+  detector_name: string
+  type: string
+  status: string
+  message: string
+  timestamp: string
+  location: string
+  object: string
+  acknowledged: boolean
+  priority: string
+}
+
 const NavigationPage: React.FC = () => {
   const router = useRouter()
   const searchParams = useSearchParams()
@@ -65,17 +82,25 @@ const NavigationPage: React.FC = () => {
     showMonitoring,
     showFloorNavigation, 
     showNotifications,
+    showListOfDetectors,
+    showSensors,
     selectedDetector,
     showDetectorMenu,
     selectedNotification,
     showNotificationDetectorInfo,
+    selectedAlert,
+    showAlertMenu,
     closeMonitoring,
     closeFloorNavigation,
     closeNotifications,
+    closeListOfDetectors,
+    closeSensors,
     setSelectedDetector,
     setShowDetectorMenu,
     setSelectedNotification,
-    setShowNotificationDetectorInfo
+    setShowNotificationDetectorInfo,
+    setSelectedAlert,
+    setShowAlertMenu
   } = useNavigationStore()
   
   const [detectorsData, setDetectorsData] = useState<{ detectors: Record<string, DetectorType> }>({ detectors: {} })
@@ -181,6 +206,32 @@ const NavigationPage: React.FC = () => {
     setSelectedNotification(null)
   }
 
+  const closeAlertMenu = () => {
+    setShowAlertMenu(false)
+    setSelectedAlert(null)
+  }
+ 
+  const handleAlertClick = (alert: AlertType) => {
+    console.log('[NavigationPage] Alert clicked, focusing on detector in 3D scene:', alert)
+     
+    const detector = Object.values(detectorsData.detectors).find(
+      d => d.detector_id === alert.detector_id
+    )
+    
+    if (detector) {
+      console.log('[NavigationPage] Found detector for alert:', detector)
+       
+      setSelectedAlert(alert)
+      setShowAlertMenu(true)
+       
+      setSelectedDetector(detector)
+      
+      console.log('[NavigationPage] Showing AlertMenu for alert:', alert.detector_name)
+    } else {
+      console.warn('[NavigationPage] Could not find detector for alert:', alert.detector_id)
+    }
+  }
+
   const getStatusText = (status: string) => {
     const s = (status || '').toLowerCase()
     switch (s) {
@@ -253,6 +304,40 @@ const NavigationPage: React.FC = () => {
           </div>
         )}
 
+        {showListOfDetectors && (
+          <div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
+            <div className="h-full overflow-auto p-4">
+              <ListOfDetectors 
+                objectId={objectId || undefined}
+                detectorsData={detectorsData}
+                onDetectorMenuClick={handleDetectorMenuClick}
+                onClose={closeListOfDetectors}
+                is3DReady={isModelReady && !modelError}
+              />
+              {detectorsError && (
+                <div className="mt-2 text-sm text-red-400">{detectorsError}</div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {showSensors && (
+          <div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
+            <div className="h-full overflow-auto p-4">
+              <Sensors 
+                objectId={objectId || undefined}
+                detectorsData={detectorsData}
+                onAlertClick={handleAlertClick}
+                onClose={closeSensors}
+                is3DReady={isModelReady && !modelError}
+              />
+              {detectorsError && (
+                <div className="mt-2 text-sm text-red-400">{detectorsError}</div>
+              )}
+            </div>
+          </div>
+        )}
+
         {showNotifications && showNotificationDetectorInfo && selectedNotification && (() => {
           const detectorData = Object.values(detectorsData.detectors).find(
             detector => detector.detector_id === selectedNotification.detector_id
@@ -334,18 +419,29 @@ const NavigationPage: React.FC = () => {
                 modelPath={selectedModelPath}
                 onModelLoaded={handleModelLoaded}
                 onError={handleModelError}
-                focusSensorId={selectedDetector?.serial_number ?? null}
+                focusSensorId={selectedDetector?.serial_number ?? selectedAlert?.detector_id?.toString() ?? null}
                 renderOverlay={({ anchor }) => (
-                  selectedDetector && showDetectorMenu && anchor ? (
-                    <DetectorMenu
-                      detector={selectedDetector}
-                      isOpen={true}
-                      onClose={closeDetectorMenu}
-                      getStatusText={getStatusText}
-                      compact={true}
-                      anchor={anchor}
-                    />
-                  ) : null
+                  <>
+                    {selectedAlert && showAlertMenu && anchor ? (
+                      <AlertMenu
+                        alert={selectedAlert}
+                        isOpen={true}
+                        onClose={closeAlertMenu}
+                        getStatusText={getStatusText}
+                        compact={true}
+                        anchor={anchor}
+                      />
+                    ) : selectedDetector && showDetectorMenu && anchor ? (
+                      <DetectorMenu
+                        detector={selectedDetector}
+                        isOpen={true}
+                        onClose={closeDetectorMenu}
+                        getStatusText={getStatusText}
+                        compact={true}
+                        anchor={anchor}
+                      />
+                    ) : null}
+                  </>
                 )}
               />
             )}