Merge branch 'AEB-71/navigation_and_dashboard_update_2' into 'main'

Added list of detectors and sensors sub-menus

See merge request wedeving/aerbim-www!15

backend/api/account/serializers/alert_serializers.py

@@ -22,12 +22,14 @@ class AlertSerializer(serializers.ModelSerializer):
     def get_object(self, obj) -> Optional[str]:
         zone = obj.sensor.zones.first()
         return zone.object.title if zone else None
+        
     @extend_schema_field(OpenApiTypes.STR)
     def get_metric_value(self, obj) -> str:
         if obj.metric.value is not None:
             unit = obj.sensor.signal_format.unit if obj.sensor.signal_format else ''
             return f"{obj.metric.value} {unit}".strip()
         return obj.metric.raw_value
+    
     @extend_schema_field(OpenApiTypes.STR)
     def get_detector_type(self, obj) -> str: 
         sensor_type = getattr(obj, 'sensor_type', None)

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}
+                  </>
                 )}
               />
             )}

frontend/app/store/navigationStore.ts

@@ -36,6 +36,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
+}
+
 export interface NavigationStore {
   currentObject: { id: string | undefined; title: string | undefined }
   navigationHistory: string[]
@@ -44,11 +58,15 @@ export interface NavigationStore {
   showMonitoring: boolean
   showFloorNavigation: boolean
   showNotifications: boolean
+  showListOfDetectors: boolean
+  showSensors: boolean
    
   selectedDetector: DetectorType | null
   showDetectorMenu: boolean
   selectedNotification: NotificationType | null
   showNotificationDetectorInfo: boolean
+  selectedAlert: AlertType | null
+  showAlertMenu: boolean
     
   setCurrentObject: (id: string | undefined, title: string | undefined) => void
   clearCurrentObject: () => void
@@ -64,11 +82,20 @@ export interface NavigationStore {
   closeFloorNavigation: () => void
   openNotifications: () => void
   closeNotifications: () => void
+  openListOfDetectors: () => void
+  closeListOfDetectors: () => void
+  openSensors: () => void
+  closeSensors: () => void
+  
+  // Close all menus and submenus
+  closeAllMenus: () => void
    
   setSelectedDetector: (detector: DetectorType | null) => void
   setShowDetectorMenu: (show: boolean) => void
   setSelectedNotification: (notification: NotificationType | null) => void
   setShowNotificationDetectorInfo: (show: boolean) => void
+  setSelectedAlert: (alert: AlertType | null) => void
+  setShowAlertMenu: (show: boolean) => void
    
   isOnNavigationPage: () => boolean
   getCurrentRoute: () => string | null
@@ -88,11 +115,15 @@ const useNavigationStore = create<NavigationStore>()(
       showMonitoring: false,
       showFloorNavigation: false,
       showNotifications: false,
+      showListOfDetectors: false,
+      showSensors: false,
        
       selectedDetector: null,
       showDetectorMenu: false,
       selectedNotification: null,
       showNotificationDetectorInfo: false,
+      selectedAlert: null,
+      showAlertMenu: false,
        
       setCurrentObject: (id: string | undefined, title: string | undefined) => 
         set({ currentObject: { id, title } }),
@@ -131,6 +162,7 @@ const useNavigationStore = create<NavigationStore>()(
         showMonitoring: true, 
         showFloorNavigation: false, 
         showNotifications: false,
+        showListOfDetectors: false,
         currentSubmenu: 'monitoring',
         showDetectorMenu: false,
         selectedDetector: null,
@@ -147,6 +179,7 @@ const useNavigationStore = create<NavigationStore>()(
         showFloorNavigation: true, 
         showMonitoring: false, 
         showNotifications: false,
+        showListOfDetectors: false,
         currentSubmenu: 'floors',
         showNotificationDetectorInfo: false,
         selectedNotification: null
@@ -163,6 +196,7 @@ const useNavigationStore = create<NavigationStore>()(
         showNotifications: true, 
         showMonitoring: false, 
         showFloorNavigation: false,
+        showListOfDetectors: false,
         currentSubmenu: 'notifications',
         showDetectorMenu: false,
         selectedDetector: null
@@ -175,10 +209,67 @@ const useNavigationStore = create<NavigationStore>()(
         currentSubmenu: null 
       }),
       
+      openListOfDetectors: () => set({ 
+        showListOfDetectors: true, 
+        showMonitoring: false, 
+        showFloorNavigation: false,
+        showNotifications: false,
+        currentSubmenu: 'detectors',
+        showDetectorMenu: false,
+        selectedDetector: null,
+        showNotificationDetectorInfo: false,
+        selectedNotification: null
+      }),
+      
+      closeListOfDetectors: () => set({ 
+        showListOfDetectors: false, 
+        showDetectorMenu: false,
+        selectedDetector: null,
+        currentSubmenu: null 
+      }),
+      
+      openSensors: () => set({ 
+        showSensors: true, 
+        showMonitoring: false, 
+        showFloorNavigation: false,
+        showNotifications: false,
+        showListOfDetectors: false,
+        currentSubmenu: 'sensors',
+        showDetectorMenu: false,
+        selectedDetector: null,
+        showNotificationDetectorInfo: false,
+        selectedNotification: null
+      }),
+      
+      closeSensors: () => set({ 
+        showSensors: false, 
+        showDetectorMenu: false,
+        selectedDetector: null,
+        currentSubmenu: null 
+      }),
+      
+      // Close all menus and submenus
+      closeAllMenus: () => set({
+        showMonitoring: false,
+        showFloorNavigation: false,
+        showNotifications: false,
+        showListOfDetectors: false,
+        showSensors: false,
+        showDetectorMenu: false,
+        selectedDetector: null,
+        showNotificationDetectorInfo: false,
+        selectedNotification: null,
+        showAlertMenu: false,
+        selectedAlert: null,
+        currentSubmenu: null
+      }),
+       
       setSelectedDetector: (detector: DetectorType | null) => set({ selectedDetector: detector }),
       setShowDetectorMenu: (show: boolean) => set({ showDetectorMenu: show }),
       setSelectedNotification: (notification: NotificationType | null) => set({ selectedNotification: notification }),
       setShowNotificationDetectorInfo: (show: boolean) => set({ showNotificationDetectorInfo: show }),
+      setSelectedAlert: (alert: AlertType | null) => set({ selectedAlert: alert }),
+      setShowAlertMenu: (show: boolean) => set({ showAlertMenu: show }),
  
       isOnNavigationPage: () => {
         const { navigationHistory } = get()
@@ -192,10 +283,12 @@ const useNavigationStore = create<NavigationStore>()(
       },
       
       getActiveSidebarItem: () => {
-        const { showMonitoring, showFloorNavigation, showNotifications } = get()
+        const { showMonitoring, showFloorNavigation, showNotifications, showListOfDetectors, showSensors } = get()
         if (showMonitoring) return 3 // Зоны Мониторинга
         if (showFloorNavigation) return 4 // Навигация по этажам
         if (showNotifications) return 5 // Уведомления
+        if (showListOfDetectors) return 7 // Список датчиков
+        if (showSensors) return 8 // Сенсоры
         return 2 // Навигация (базовая)
       }
     }),

frontend/components/model/ModelViewer.tsx

@@ -319,7 +319,7 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
         const meta: any = (m as any)?.metadata
         const extras: any = meta?.gltf?.extras ?? meta?.extras ?? (m as any)?.extras
          
-        const sid = extras?.Sensor_ID ?? extras?.sensor_id ?? extras?.SERIAL_NUMBER ?? extras?.serial_number
+        const sid = extras?.Sensor_ID ?? extras?.sensor_id ?? extras?.SERIAL_NUMBER ?? extras?.serial_number ?? extras?.detector_id
         if (sid != null) {
           return String(sid).trim() === sensorId
         }

frontend/components/navigation/AlertMenu.tsx

@@ -0,0 +1,199 @@
+'use client'
+
+import React from 'react'
+
+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
+}
+
+interface AlertMenuProps {
+  alert: AlertType
+  isOpen: boolean
+  onClose: () => void
+  getStatusText: (status: string) => string
+  compact?: boolean
+  anchor?: { left: number; top: number } | null
+}
+
+const AlertMenu: React.FC<AlertMenuProps> = ({ alert, isOpen, onClose, getStatusText, compact = false, anchor = null }) => {
+  if (!isOpen) return null
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    return date.toLocaleString('ru-RU', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  const getPriorityColor = (priority: string) => {
+    switch (priority.toLowerCase()) {
+      case 'high': return 'text-red-400'
+      case 'medium': return 'text-orange-400'
+      case 'low': return 'text-green-400'
+      default: return 'text-gray-400'
+    }
+  }
+
+  const getPriorityText = (priority: string) => {
+    switch (priority.toLowerCase()) {
+      case 'high': return 'Высокий'
+      case 'medium': return 'Средний'
+      case 'low': return 'Низкий'
+      default: return priority
+    }
+  }
+
+  if (compact && anchor) {
+    return (
+      <div className="absolute z-40" style={{ left: anchor.left, top: anchor.top }}>
+        <div className="rounded-[10px] bg-black/80 text-white text-xs px-3 py-2 shadow-xl min-w-[240px] max-w-[300px]">
+          <div className="flex items-start justify-between gap-3">
+            <div className="flex-1">
+              <div className="font-semibold truncate">Датч.{alert.detector_name}</div>
+              <div className="opacity-80">{getStatusText(alert.status)}</div>
+            </div>
+            <button onClick={onClose} className="text-gray-300 hover:text-white transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div className="mt-2 space-y-1">
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <div className="text-[rgb(113,113,122)] text-[11px]">Приоритет</div>
+                <div className={`text-xs font-medium ${getPriorityColor(alert.priority)}`}>
+                  {getPriorityText(alert.priority)}
+                </div>
+              </div>
+              <div>
+                <div className="text-[rgb(113,113,122)] text-[11px]">Время</div>
+                <div className="text-white text-xs truncate">{formatDate(alert.timestamp)}</div>
+              </div>
+            </div>
+            
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Сообщение</div>
+              <div className="text-white text-xs">{alert.message}</div>
+            </div>
+            
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Местоположение</div>
+              <div className="text-white text-xs">{alert.location}</div>
+            </div>
+          </div>
+          
+          <div className="mt-2 grid grid-cols-2 gap-2">
+            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-2 py-1 rounded-[8px] text-xs font-medium transition-colors flex items-center gap-1">
+              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              Отчет
+            </button>
+            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-2 py-1 rounded-[8px] text-xs font-medium transition-colors flex items-center gap-1">
+              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              История
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="absolute left-[500px] top-0 bg-[#161824] border-r border-gray-700 z-30 w-[454px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
+      <div className="h-full overflow-auto p-5">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-white text-lg font-medium">
+            Датч.{alert.detector_name}
+          </h3>
+          <div className="flex items-center gap-2">
+            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              Отчет
+            </button>
+            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              История
+            </button>
+          </div>
+        </div>
+        
+        {/* Табличка с информацией об алерте */}
+        <div className="space-y-0 border border-[rgb(30,31,36)] rounded-lg overflow-hidden">
+          <div className="flex">
+            <div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Маркировка по проекту</div>
+              <div className="text-white text-sm">{alert.detector_name}</div>
+            </div>
+            <div className="flex-1 p-4">
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Приоритет</div>
+              <div className={`text-sm font-medium ${getPriorityColor(alert.priority)}`}>
+                {getPriorityText(alert.priority)}
+              </div>
+            </div>
+          </div>
+          
+          <div className="flex border-t border-[rgb(30,31,36)]">
+            <div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Местоположение</div>
+              <div className="text-white text-sm">{alert.location}</div>
+            </div>
+            <div className="flex-1 p-4">
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Статус</div>
+              <div className="text-white text-sm">{getStatusText(alert.status)}</div>
+            </div>
+          </div>
+          
+          <div className="flex border-t border-[rgb(30,31,36)]">
+            <div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Время события</div>
+              <div className="text-white text-sm">{formatDate(alert.timestamp)}</div>
+            </div>
+            <div className="flex-1 p-4">
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Тип алерта</div>
+              <div className="text-white text-sm">{alert.type}</div>
+            </div>
+          </div>
+          
+          <div className="border-t border-[rgb(30,31,36)] p-4">
+            <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Сообщение</div>
+            <div className="text-white text-sm">{alert.message}</div>
+          </div>
+        </div>
+        
+        <button 
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default AlertMenu

frontend/components/navigation/ListOfDetectors.tsx

@@ -0,0 +1,171 @@
+'use client'
+
+import React, { useState } from 'react'
+
+interface DetectorsDataType {
+  detectors: Record<string, DetectorType>
+}
+
+interface ListOfDetectorsProps {
+  objectId?: string
+  detectorsData: DetectorsDataType
+  onDetectorMenuClick: (detector: DetectorType) => void
+  onClose?: () => void
+  is3DReady?: boolean
+}
+
+interface DetectorType {
+  detector_id: number
+  name: string
+  serial_number: string
+  object: string
+  status: string
+  checked: boolean
+  type: string
+  detector_type: string
+  location: string
+  floor: number
+  notifications: Array<{
+    id: number
+    type: string
+    message: string
+    timestamp: string
+    acknowledged: boolean
+    priority: string
+  }>
+}
+
+const ListOfDetectors: React.FC<ListOfDetectorsProps> = ({ objectId, detectorsData, onDetectorMenuClick, onClose, is3DReady = true }) => {
+  const [searchTerm, setSearchTerm] = useState('')
+
+  // конвертация детекторов в array и фильтруем по objectId и тексту запроса
+  const detectorsArray = Object.values(detectorsData.detectors) as DetectorType[]
+  let filteredDetectors = objectId 
+    ? detectorsArray.filter(detector => detector.object === objectId)
+    : detectorsArray
+  
+  // Фильтр-поиск
+  if (searchTerm) {
+    filteredDetectors = filteredDetectors.filter(detector => 
+      detector.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      detector.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      detector.serial_number.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+  }
+
+  // Сортировка детекторов по имени
+  const sortedDetectors = filteredDetectors.sort((a, b) => a.name.localeCompare(b.name))
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case '#b3261e': return 'bg-red-500'
+      case '#fd7c22': return 'bg-orange-500'
+      case '#00ff00': return 'bg-green-500'
+      default: return 'bg-gray-500'
+    }
+  }
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case '#b3261e': return 'Критический'
+      case '#fd7c22': return 'Предупреждение'
+      case '#00ff00': return 'Норма'
+      default: return 'Неизвестно'
+    }
+  }
+
+  const handleDetectorMenuClick = (detector: DetectorType) => {
+    // Проверяем валидность данных детектора перед передачей
+    if (!detector || !detector.detector_id || !detector.serial_number) {
+      console.warn('[ListOfDetectors] Invalid detector data, skipping menu click:', detector)
+      return
+    }
+    
+    onDetectorMenuClick(detector)
+  }
+
+  return (
+    <div className="w-full max-w-2xl"> 
+      <div className="bg-[rgb(22,24,36)] rounded-[12px] p-4 space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-white text-2xl font-semibold">Список датчиков</h2>
+          {onClose && (
+            <button 
+              onClick={onClose}
+              className="text-white hover:text-gray-300 transition-colors"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+         
+        <div className="flex items-center gap-3">
+          <div className="flex-1 relative">
+            <input
+              type="text"
+              placeholder="Поиск детекторов..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full bg-[rgb(27,30,40)] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none"
+            />
+            <svg className="absolute right-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </div>
+          <div className="text-gray-400 text-sm">
+            {sortedDetectors.length} детекторов
+          </div>
+        </div>
+ 
+        <div className="space-y-2 h-full overflow-y-auto">
+          {sortedDetectors.length === 0 ? (
+            <div className="text-gray-400 text-center py-8">
+              Детекторы не найдены
+            </div>
+          ) : (
+            sortedDetectors.map(detector => (
+              <div 
+                key={detector.detector_id} 
+                className="bg-[rgb(53,58,70)] rounded-md p-3 flex items-center justify-between"
+              >
+                <div className="flex-1">
+                  <div className="text-white text-sm font-medium">{detector.name}</div>
+                  <div className="text-gray-400 text-xs">{detector.location}</div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className={`w-3 h-3 rounded-full ${getStatusColor(detector.status)}`}></div>
+                  <span className="text-xs text-gray-300">{getStatusText(detector.status)}</span>
+                  {detector.checked && (
+                    <svg className="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                  )} 
+                  <button
+                    onClick={() => {
+                      if (is3DReady) {
+                        handleDetectorMenuClick(detector)
+                      } else {
+                        console.warn('[ListOfDetectors] 3D model not ready, skipping detector focus')
+                      }
+                    }}
+                    className="w-6 h-6 bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] rounded-full flex items-center justify-center transition-colors relative"
+                    title={is3DReady ? "Показать детектор на 3D модели" : "3D модель недоступна"}
+                  >
+                    <div className="w-2 h-2 bg-white rounded-full"></div>
+                    {!is3DReady && (
+                      <div className="absolute -top-1 -right-1 w-3 h-3 bg-amber-500 rounded-full text-[8px] flex items-center justify-center text-black font-bold">!</div>
+                    )}
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ListOfDetectors

frontend/components/navigation/Monitoring.tsx

@@ -8,7 +8,6 @@ interface MonitoringProps {
 }
 
 const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
-  const [objectImageError, setObjectImageError] = useState(false);
   const [models, setModels] = useState<{ title: string; path: string }[]>([]);
   const [loadError, setLoadError] = useState<string | null>(null);
 

frontend/components/navigation/Sensors.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import React, { useState } from 'react'
+
+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
+}
+
+interface DetectorType {
+  detector_id: number
+  name: string
+  serial_number: string
+  object: string
+  status: string
+  type: string
+  detector_type: string
+  location: string
+  floor: number
+  checked: boolean
+  notifications: Array<{
+    id: number
+    type: string
+    message: string
+    timestamp: string
+    acknowledged: boolean
+    priority: string
+  }>
+}
+
+interface DetectorsDataType {
+  detectors: Record<string, DetectorType>
+}
+
+interface SensorsProps {
+  objectId?: string
+  detectorsData: DetectorsDataType
+  onAlertClick: (alert: AlertType) => void
+  onClose?: () => void
+  is3DReady?: boolean
+}
+
+const Sensors: React.FC<SensorsProps> = ({ objectId, detectorsData, onAlertClick, onClose, is3DReady = true }) => {
+  const [searchTerm, setSearchTerm] = useState('')
+
+  // Получаем все уведомления (как в компоненте Notifications)
+  const alerts = React.useMemo(() => {
+    const notifications: AlertType[] = [];
+    Object.values(detectorsData.detectors).forEach(detector => {
+      if (detector.notifications && detector.notifications.length > 0) {
+        detector.notifications.forEach(notification => {
+          notifications.push({
+            ...notification,
+            detector_id: detector.detector_id,
+            detector_name: detector.name,
+            location: detector.location,
+            object: detector.object,
+            status: detector.status
+          });
+        });
+      }
+    });
+
+    // Фильтруем по objectId
+    const filteredAlerts = objectId 
+      ? notifications.filter(alert => alert.object && alert.object.toString() === objectId.toString())
+      : notifications
+
+    // Дополнительная фильтрация по поиску
+    const finalAlerts = filteredAlerts.filter(alert => {
+      return searchTerm === '' || 
+        (alert.detector_name && alert.detector_name.toLowerCase().includes(searchTerm.toLowerCase())) ||
+        (alert.message && alert.message.toLowerCase().includes(searchTerm.toLowerCase())) ||
+        (alert.location && alert.location.toLowerCase().includes(searchTerm.toLowerCase()))
+    })
+
+    // Сортируем по timestamp (новые сверху)
+    return finalAlerts.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+  }, [detectorsData, objectId, searchTerm])
+
+  const getStatusColor = (type: string) => {
+    switch (type.toLowerCase()) {
+      case 'critical': return 'bg-red-500'
+      case 'warning': return 'bg-orange-500'
+      case 'info': return 'bg-green-500'
+      default: return 'bg-gray-500'
+    }
+  }
+
+
+
+  return (
+    <div className="w-full max-w-2xl"> 
+      <div className="bg-[rgb(22,24,36)] rounded-[12px] p-4 space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-white text-2xl font-semibold">Сенсоры - Уведомления</h2>
+          <button
+            onClick={onClose}
+            className="text-white hover:text-gray-300 transition-colors"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+         
+        <div className="flex items-center gap-3">
+          <div className="flex-1 relative">
+            <input
+              type="text"
+              placeholder="Поиск уведомлений..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full bg-[rgb(27,30,40)] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none"
+            />
+            <svg className="absolute right-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </div>
+          <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-4 py-2 rounded-lg transition-colors flex items-center gap-2">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
+            </svg>
+            Фильтр
+          </button>
+        </div>
+
+        <div className="space-y-2">
+          {alerts.length === 0 ? (
+            <div className="flex items-center justify-center h-32">
+              <p className="text-gray-400">Уведомления не найдены</p>
+            </div>
+          ) : (
+            alerts.map(alert => (
+              <div 
+                key={alert.id} 
+                className="bg-[rgb(53,58,70)] rounded-md p-3 flex items-center justify-between hover:bg-[rgb(63,68,80)] transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <div className={`w-3 h-3 rounded-full ${getStatusColor(alert.type)}`}></div>
+                  <div>
+                    <div className="text-white text-sm font-medium">{alert.detector_name}</div>
+                    <div className="text-gray-400 text-xs">{alert.message}</div>
+                  </div>
+                </div>
+                <button
+                      onClick={() => {
+                        if (is3DReady) {
+                          onAlertClick(alert)
+                        } else {
+                          console.warn('[Sensors] 3D model not ready, skipping alert focus')
+                        }
+                      }}
+                      className="w-6 h-6 bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] rounded-full flex items-center justify-center transition-colors relative"
+                      title={is3DReady ? "Показать оповещение на 3D модели" : "3D модель недоступна"}
+                    >
+                      <div className="w-2 h-2 bg-white rounded-full"></div>
+                      {!is3DReady && (
+                        <div className="absolute -top-1 -right-1 w-3 h-3 bg-amber-500 rounded-full text-[8px] flex items-center justify-center text-black font-bold">!</div>
+                      )}
+                    </button>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Sensors

frontend/components/ui/Sidebar.tsx

@@ -185,12 +185,19 @@ const Sidebar: React.FC<SidebarProps> = ({
     openMonitoring,
     openFloorNavigation, 
     openNotifications,
+    openListOfDetectors,
+    openSensors,
     closeMonitoring,
     closeFloorNavigation,
     closeNotifications,
+    closeListOfDetectors,
+    closeSensors,
+    closeAllMenus,
     showMonitoring,
     showFloorNavigation,
-    showNotifications
+    showNotifications,
+    showListOfDetectors,
+    showSensors
   } = useNavigationStore()
 
   useEffect(() => {
@@ -222,10 +229,14 @@ const Sidebar: React.FC<SidebarProps> = ({
       case 3: // Monitoring
         if (pathname !== '/navigation') { 
           router.push('/navigation')
-          setTimeout(() => openMonitoring(), 100)
+          setTimeout(() => {
+            closeAllMenus()
+            openMonitoring()
+          }, 100)
         } else if (showMonitoring) { 
           closeMonitoring()
         } else {
+          closeAllMenus()
           openMonitoring()
         }
         handled = true
@@ -233,10 +244,14 @@ const Sidebar: React.FC<SidebarProps> = ({
       case 4: // Floor Navigation  
         if (pathname !== '/navigation') { 
           router.push('/navigation')
-          setTimeout(() => openFloorNavigation(), 100)
+          setTimeout(() => {
+            closeAllMenus()
+            openFloorNavigation()
+          }, 100)
         } else if (showFloorNavigation) { 
           closeFloorNavigation()
         } else {
+          closeAllMenus()
           openFloorNavigation()
         }
         handled = true
@@ -244,14 +259,48 @@ const Sidebar: React.FC<SidebarProps> = ({
       case 5: // Notifications
         if (pathname !== '/navigation') { 
           router.push('/navigation')
-          setTimeout(() => openNotifications(), 100)
+          setTimeout(() => {
+            closeAllMenus()
+            openNotifications()
+          }, 100)
         } else if (showNotifications) { 
           closeNotifications()
         } else {
+          closeAllMenus()
           openNotifications()
         }
         handled = true
         break
+      case 6: // Sensors
+        if (pathname !== '/navigation') { 
+          router.push('/navigation')
+          setTimeout(() => {
+            closeAllMenus()
+            openSensors()
+          }, 100)
+        } else if (showSensors) { 
+          closeSensors()
+        } else {
+          closeAllMenus()
+          openSensors()
+        }
+        handled = true
+        break
+      case 7: // List of Detectors
+        if (pathname !== '/navigation') { 
+          router.push('/navigation')
+          setTimeout(() => {
+            closeAllMenus()
+            openListOfDetectors()
+          }, 100)
+        } else if (showListOfDetectors) { 
+          closeListOfDetectors()
+        } else {
+          closeAllMenus()
+          openListOfDetectors()
+        }
+        handled = true
+        break
       default:
         // Для остального используем routes
         if (navigationService) {
@@ -330,6 +379,8 @@ const Sidebar: React.FC<SidebarProps> = ({
                                closeMonitoring()
                                closeFloorNavigation()
                                closeNotifications()
+                               closeListOfDetectors()
+                               closeSensors()
                              }
                              toggleNavigationSubMenu()
                          }}
@@ -344,6 +395,8 @@ const Sidebar: React.FC<SidebarProps> = ({
                               closeMonitoring()
                               closeFloorNavigation()
                               closeNotifications()
+                              closeListOfDetectors()
+                              closeSensors()
                             }
                             toggleNavigationSubMenu()
                           }
@@ -408,6 +461,8 @@ const Sidebar: React.FC<SidebarProps> = ({
                  closeMonitoring()
                  closeFloorNavigation()
                  closeNotifications()
+                 closeListOfDetectors()
+                 closeSensors()
                }
                // Убираем сайд-бар
                toggleSidebar()