New api and zone management; highligh occlusion and highlighAll functionality; improved search in reports and alerts history + autofill; refactored alert panel

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

@@ -5,13 +5,14 @@ import { useRouter, useSearchParams } from 'next/navigation'
 import Sidebar from '../../../components/ui/Sidebar'
 import useNavigationStore from '../../store/navigationStore'
 import DetectorList from '../../../components/alerts/DetectorList'
+import AlertsList from '../../../components/alerts/AlertsList'
 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 { currentObject, setCurrentObject, selectedDetector } = useNavigationStore()
   const [selectedDetectors, setSelectedDetectors] = useState<number[]>([])
   const { data: session } = useSession()
 
@@ -22,10 +23,9 @@ const AlertsPage: React.FC = () => {
     timestamp: string
     acknowledged: boolean
     priority: string
-    detector_id?: number
+    detector_id?: string
     detector_name?: string
     location?: string
-    object?: string
   }
   const [alerts, setAlerts] = useState<AlertItem[]>([])
 
@@ -40,6 +40,13 @@ const AlertsPage: React.FC = () => {
     }
   }, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])
 
+  // Auto-select detector when it comes from navigation store
+  useEffect(() => {
+    if (selectedDetector && !selectedDetectors.includes(selectedDetector.detector_id)) {
+      setSelectedDetectors(prev => [...prev, selectedDetector.detector_id])
+    }
+  }, [selectedDetector, selectedDetectors])
+
   useEffect(() => {
     const loadAlerts = async () => {
       try {
@@ -55,7 +62,11 @@ const AlertsPage: React.FC = () => {
         })
         const data = Array.isArray(payload?.data) ? payload.data : (payload?.data?.alerts || [])
         console.log('[AlertsPage] parsed alerts:', data)
-        setAlerts(data as AlertItem[])
+        console.log('[AlertsPage] Sample alert structure:', data[0])
+        console.log('[AlertsPage] Alerts with detector_id:', data.filter((alert: any) => alert.detector_id).length)
+         
+        console.log('[AlertsPage] using transformed alerts:', data)
+        setAlerts(data)
       } catch (e) {
         console.error('Failed to load alerts:', e)
       }
@@ -177,87 +188,15 @@ const AlertsPage: React.FC = () => {
               objectId={objectId || undefined} 
               selectedDetectors={selectedDetectors}
               onDetectorSelect={handleDetectorSelect}
+              initialSearchTerm={selectedDetector?.detector_id.toString() || ''}
             />
-
             {/* История тревог */}
-            <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-600/20 text-green-300 ring-1 ring-green-600/40' : 'bg-red-600/20 text-red-300 ring-1 ring-red-600/40'
-                          }`}>
-                            {item.acknowledged ? 'Да' : 'Нет'}
-                          </span>
-                          <button
-                            onClick={() => handleAcknowledgeToggle(item.id)}
-                            className="ml-2 inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-[#2a2e3e] text-white hover:bg-[#353a4d]"
-                          >
-                            {item.acknowledged ? 'Снять' : 'Подтвердить'}
-                          </button>
-                        </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 className="mt-8">
+              <AlertsList 
+                alerts={alerts}
+                onAcknowledgeToggle={handleAcknowledgeToggle}
+                initialSearchTerm={selectedDetector?.detector_id.toString() || ''}
+              />
             </div>
           </div>
         </div>

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

@@ -107,6 +107,41 @@ const NavigationPage: React.FC = () => {
   const [detectorsError, setDetectorsError] = useState<string | null>(null)
   const [modelError, setModelError] = useState<string | null>(null)
   const [isModelReady, setIsModelReady] = useState(false)
+  const [focusedSensorId, setFocusedSensorId] = useState<string | null>(null)
+  const [highlightAllSensors, setHighlightAllSensors] = useState(false)
+
+  useEffect(() => {
+    if (selectedDetector === null && selectedAlert === null) {
+      setFocusedSensorId(null);
+    }
+  }, [selectedDetector, selectedAlert]);
+
+  // Управление выделением всех сенсоров при открытии/закрытии меню Sensors
+  useEffect(() => {
+    console.log('[NavigationPage] showSensors changed:', showSensors, 'modelReady:', isModelReady)
+    if (showSensors && isModelReady) {
+      // При открытии меню Sensors - выделяем все сенсоры (только если модель готова)
+      console.log('[NavigationPage] Setting highlightAllSensors to TRUE')
+      setHighlightAllSensors(true)
+      setFocusedSensorId(null)
+    } else if (!showSensors) {
+      // При закрытии меню Sensors - сбрасываем выделение
+      console.log('[NavigationPage] Setting highlightAllSensors to FALSE')
+      setHighlightAllSensors(false)
+    }
+  }, [showSensors, isModelReady])
+
+  // Дополнительный эффект для задержки выделения сенсоров при открытии меню
+  useEffect(() => {
+    if (showSensors && isModelReady) {
+      const timer = setTimeout(() => {
+        console.log('[NavigationPage] Delayed highlightAllSensors to TRUE')
+        setHighlightAllSensors(true)
+      }, 500) // Задержка 500мс для полной инициализации модели
+      
+      return () => clearTimeout(timer)
+    }
+  }, [showSensors, isModelReady])
   
   const urlObjectId = searchParams.get('objectId')
   const urlObjectTitle = searchParams.get('objectTitle')
@@ -133,10 +168,10 @@ const NavigationPage: React.FC = () => {
   }, [selectedModelPath]);
 
   useEffect(() => {
-    if (urlObjectId && urlObjectTitle && (!currentObject.id || currentObject.id !== urlObjectId)) {
-      setCurrentObject(urlObjectId, urlObjectTitle)
+    if (urlObjectId && (!currentObject.id || currentObject.id !== urlObjectId)) {
+      setCurrentObject(urlObjectId, urlObjectTitle ?? currentObject.title ?? undefined)
     }
-  }, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])
+  }, [urlObjectId, urlObjectTitle, currentObject.id, currentObject.title, setCurrentObject])
 
   useEffect(() => {
     const loadDetectors = async () => {
@@ -177,18 +212,28 @@ const NavigationPage: React.FC = () => {
       return
     }
 
-    if (selectedDetector?.detector_id === detector.detector_id && showDetectorMenu) {
-      setShowDetectorMenu(false)
-      setSelectedDetector(null)
+    if (selectedDetector?.serial_number === detector.serial_number && showDetectorMenu) {
+      closeDetectorMenu()
     } else {
       setSelectedDetector(detector)
       setShowDetectorMenu(true)
+      setFocusedSensorId(detector.serial_number)
+      setShowAlertMenu(false) 
+      setSelectedAlert(null)
+      // При открытии меню детектора - сбрасываем множественное выделение
+      setHighlightAllSensors(false)
     }
   }
 
   const closeDetectorMenu = () => {
     setShowDetectorMenu(false)
     setSelectedDetector(null)
+    setFocusedSensorId(null)
+    setSelectedAlert(null)
+    // При закрытии меню детектора из Sensors - выделяем все сенсоры снова
+    if (showSensors) {
+      setHighlightAllSensors(true)
+    }
   }
 
   const handleNotificationClick = (notification: NotificationType) => {
@@ -209,6 +254,12 @@ const NavigationPage: React.FC = () => {
   const closeAlertMenu = () => {
     setShowAlertMenu(false)
     setSelectedAlert(null)
+    setFocusedSensorId(null)
+    setSelectedDetector(null)
+    // При закрытии меню алерта из Sensors - выделяем все сенсоры снова
+    if (showSensors) {
+      setHighlightAllSensors(true)
+    }
   }
  
   const handleAlertClick = (alert: AlertType) => {
@@ -219,19 +270,86 @@ const NavigationPage: React.FC = () => {
     )
     
     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)
+      if (selectedAlert?.id === alert.id && showAlertMenu) {
+        closeAlertMenu()
+      } else {
+        setSelectedAlert(alert)
+        setShowAlertMenu(true)
+        setFocusedSensorId(detector.serial_number)
+        setShowDetectorMenu(false)
+        setSelectedDetector(null)
+        // При открытии меню алерта - сбрасываем множественное выделение
+        setHighlightAllSensors(false)
+        console.log('[NavigationPage] Showing AlertMenu for alert:', alert.detector_name)
+      }
     } else {
       console.warn('[NavigationPage] Could not find detector for alert:', alert.detector_id)
     }
   }
 
+  const handleSensorSelection = (serialNumber: string | null) => {
+    if (serialNumber === null) {
+      setFocusedSensorId(null);
+      closeDetectorMenu();
+      closeAlertMenu();
+      // If we're in Sensors menu and no sensor is selected, highlight all sensors
+      if (showSensors) {
+        setHighlightAllSensors(true);
+      }
+      return;
+    }
+
+    if (focusedSensorId === serialNumber) {
+      setFocusedSensorId(null);
+      closeDetectorMenu();
+      closeAlertMenu();
+      // If we're in Sensors menu and deselected the current sensor, highlight all sensors
+      if (showSensors) {
+        setHighlightAllSensors(true);
+      }
+      return;
+    }
+
+    // При выборе конкретного сенсора - сбрасываем множественное выделение
+    setHighlightAllSensors(false)
+
+    const detector = Object.values(detectorsData?.detectors || {}).find(
+      (d) => d.serial_number === serialNumber
+    );
+
+    if (detector) {
+      if (showFloorNavigation || showListOfDetectors) {
+        handleDetectorMenuClick(detector);
+      } else if (detector.notifications && detector.notifications.length > 0) {
+        const sortedNotifications = [...detector.notifications].sort((a, b) => {
+          const priorityOrder: { [key: string]: number } = { critical: 0, warning: 1, info: 2 };
+          return priorityOrder[a.priority.toLowerCase()] - priorityOrder[b.priority.toLowerCase()];
+        });
+        const notification = sortedNotifications[0];
+        const alert: AlertType = {
+          ...notification,
+          detector_id: detector.detector_id,
+          detector_name: detector.name,
+          location: detector.location,
+          object: detector.object,
+          status: detector.status,
+          type: notification.type || 'info',
+        };
+        handleAlertClick(alert);
+      } else {
+        handleDetectorMenuClick(detector);
+      }
+    } else {
+      setFocusedSensorId(null);
+      closeDetectorMenu();
+      closeAlertMenu();
+      // If we're in Sensors menu and no valid detector found, highlight all sensors
+      if (showSensors) {
+        setHighlightAllSensors(true);
+      }
+    }
+  };
+
   const getStatusText = (status: string) => {
     const s = (status || '').toLowerCase()
     switch (s) {
@@ -371,9 +489,9 @@ const NavigationPage: React.FC = () => {
               </button>
               <nav className="flex items-center gap-2 text-sm">
                 <span className="text-gray-400">Дашборд</span>
-                <span className="text-gray-600">/</span>
+                <span className="text-gray-600">{'/'}</span>
                 <span className="text-white">{objectTitle || 'Объект'}</span>
-                <span className="text-gray-600">/</span>
+                <span className="text-gray-600">{'/'}</span>
                 <span className="text-white">Навигация</span>
               </nav>
             </div>
@@ -414,7 +532,7 @@ const NavigationPage: React.FC = () => {
             </div>
           </div>
         ) : (
-              <ModelViewer 
+              <ModelViewer
                 key={selectedModelPath || 'no-model'}
                 modelPath={selectedModelPath}
                 onSelectModel={(path) => {
@@ -425,7 +543,11 @@ const NavigationPage: React.FC = () => {
                 }}
                 onModelLoaded={handleModelLoaded}
                 onError={handleModelError}
-                focusSensorId={selectedDetector?.serial_number ?? selectedAlert?.detector_id?.toString() ?? null}
+                activeMenu={showSensors ? 'sensors' : showFloorNavigation ? 'floor' : showListOfDetectors ? 'detectors' : null}
+                focusSensorId={focusedSensorId}
+                highlightAllSensors={highlightAllSensors}
+                isSensorSelectionEnabled={showSensors || showFloorNavigation || showListOfDetectors}
+                onSensorPick={handleSensorSelection}
                 renderOverlay={({ anchor }) => (
                   <>
                     {selectedAlert && showAlertMenu && anchor ? (
@@ -449,12 +571,12 @@ const NavigationPage: React.FC = () => {
                     ) : null}
                   </>
                 )}
-              />
-            )}
+                />
+              )}
+            </div>
           </div>
         </div>
-      </div>
-    </div>
+      </div> 
   )
 }
 

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

@@ -10,11 +10,27 @@ import { useRouter } from 'next/navigation'
 const transformRawToObjectData = (raw: any): ObjectData => {
   const rawId = raw?.id ?? raw?.object_id ?? raw?.uuid ?? raw?.name
   const object_id = typeof rawId === 'number' ? `object_${rawId}` : String(rawId ?? '')
+
+  //  Если объект имеет числовой идентификатор, возвращаем его в виде строки с префиксом 'object_'
+  const deriveTitle = (): string => {
+    const t = (raw?.title || '').toString().trim()
+    if (t) return t
+    const idStr = String(rawId ?? '').toString()
+    const numMatch = typeof rawId === 'number'
+      ? rawId
+      : (() => { const m = idStr.match(/\d+/); return m ? Number(m[0]) : undefined })()
+    if (typeof numMatch === 'number' && !Number.isNaN(numMatch)) {
+      return `Объект ${numMatch}`
+    }
+    // Если объект не имеет числовой идентификатор, возвращаем его строковый идентификатор
+    return idStr ? `Объект ${idStr}` : `Объект ${object_id}`
+  }
+
   return {
     object_id,
-    title: raw?.title ?? `Объект ${object_id}`,
+    title: deriveTitle(),
     description: raw?.description ?? `Описание объекта ${raw?.title ?? object_id}`,
-    image: raw?.image ?? '/images/test_image.png',
+    image: raw?.image ?? null,
     location: raw?.location ?? raw?.address ?? 'Не указано',
     floors: Number(raw?.floors ?? 0),
     area: String(raw?.area ?? ''),

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

@@ -13,7 +13,7 @@ const ReportsPage: React.FC = () => {
   const router = useRouter()
   const searchParams = useSearchParams()
   const { data: session } = useSession()
-  const { currentObject, setCurrentObject } = useNavigationStore()
+  const { currentObject, setCurrentObject, selectedDetector } = useNavigationStore()
   const [selectedDetectors, setSelectedDetectors] = useState<number[]>([])
   const [detectorsData, setDetectorsData] = useState<any>({ detectors: {} })
 
@@ -28,6 +28,13 @@ const ReportsPage: React.FC = () => {
     }
   }, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])
 
+  // Автовыбор detector id из стора
+  useEffect(() => {
+    if (selectedDetector && !selectedDetectors.includes(selectedDetector.detector_id)) {
+      setSelectedDetectors(prev => [...prev, selectedDetector.detector_id])
+    }
+  }, [selectedDetector, selectedDetectors])
+
   useEffect(() => {
     const loadDetectors = async () => {
       try {
@@ -139,15 +146,21 @@ const ReportsPage: React.FC = () => {
 
               <ExportMenu onExport={handleExport} />
             </div>
-
-            {/* Selection table to choose detectors to include in the report */}
+ 
             <div className="mb-6">
-              <DetectorList objectId={objectId || undefined} selectedDetectors={selectedDetectors} onDetectorSelect={handleDetectorSelect} />
+              <DetectorList 
+                objectId={objectId || undefined} 
+                selectedDetectors={selectedDetectors} 
+                onDetectorSelect={handleDetectorSelect}
+                initialSearchTerm={selectedDetector?.detector_id.toString() || ''}
+              />
             </div>
-
-            {/* Existing notifications-based list */}
+ 
             <div className="mt-6">
-              <ReportsList detectorsData={detectorsData} />
+              <ReportsList 
+                detectorsData={detectorsData} 
+                initialSearchTerm={selectedDetector?.detector_id.toString() || ''}
+              />
             </div>
           </div>
         </div>

frontend/app/api/get-alerts/route.ts

@@ -95,6 +95,7 @@ export async function GET(req: NextRequest) {
       const priority = severity === 'critical' ? 'high' : severity === 'warning' ? 'medium' : 'low'
       return {
         id: a.id,
+        detector_id: a.detector_id, 
         detector_name: a.name || a.detector_name,
         message: a.message,
         type,

frontend/app/api/get-reports/route.ts

@@ -45,15 +45,22 @@ export async function POST(req: NextRequest) {
       })
     }
 
-    const body = await req.json().catch(() => ({ })) as { format?: 'csv' | 'pdf', hours?: number }
+    const body = await req.json().catch(() => ({ })) as { format?: 'csv' | 'pdf', hours?: number, detector_ids?: number[] }
     const reportFormat = (body.format || '').toLowerCase()
  
     const url = new URL(req.url)
     const qpFormat = (url.searchParams.get('format') || '').toLowerCase()
     const qpHoursRaw = url.searchParams.get('hours')
+    const qpDetectorIds = url.searchParams.get('detector_ids')
     const qpHours = qpHoursRaw ? Number(qpHoursRaw) : undefined
     const finalFormat = reportFormat || qpFormat
     const finalHours = typeof body.hours === 'number' ? body.hours : (typeof qpHours === 'number' && !Number.isNaN(qpHours) ? qpHours : 168)
+    const finalDetectorIds = body.detector_ids || (qpDetectorIds ? qpDetectorIds.split(',').map(id => Number(id)) : undefined)
+
+    const requestBody: any = { report_format: finalFormat, hours: finalHours }
+    if (finalDetectorIds && finalDetectorIds.length > 0) {
+      requestBody.detector_ids = finalDetectorIds
+    }
 
     let backendRes = await fetch(`${backendUrl}/account/get-reports/`, {
       method: 'POST',
@@ -61,7 +68,7 @@ export async function POST(req: NextRequest) {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${accessToken}`,
       },
-      body: JSON.stringify({ report_format: finalFormat, hours: finalHours }),
+      body: JSON.stringify(requestBody),
     })
  
     if (!backendRes.ok && backendRes.status === 404) {

frontend/app/api/get-zones/route.ts

@@ -0,0 +1,184 @@
+import { NextResponse, NextRequest } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth'
+import { getToken } from 'next-auth/jwt'
+
+export async function GET(req: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions)
+
+    const authHeader = req.headers.get('authorization') || req.headers.get('Authorization')
+    const bearer = authHeader && authHeader.toLowerCase().startsWith('bearer ') ? authHeader.slice(7) : undefined
+
+    const secret = process.env.NEXTAUTH_SECRET
+    const token = secret ? (await getToken({ req, secret }).catch(() => null)) : null
+
+    let accessToken: string | undefined = session?.accessToken || bearer || (token as any)?.accessToken
+    const refreshToken: string | undefined = session?.refreshToken || (token as any)?.refreshToken
+
+    if (!accessToken && refreshToken) {
+      try {
+        const refreshRes = await fetch(`${process.env.BACKEND_URL}/auth/refresh/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ refresh: refreshToken }),
+        })
+        
+        if (refreshRes.ok) {
+          const refreshed = await refreshRes.json()
+          accessToken = refreshed.access
+        } else {
+          const errorText = await refreshRes.text()
+          let errorData: { error?: string; detail?: string; code?: string } = {}
+          try {
+            errorData = JSON.parse(errorText)
+          } catch {
+            errorData = { error: errorText }
+          }
+           
+          const errorMessage = (errorData.error as string) || (errorData.detail as string) || ''
+          if (typeof errorMessage === 'string' && 
+              (errorMessage.includes('Token is expired') || 
+               errorMessage.includes('expired') || 
+               errorData.code === 'token_not_valid')) {
+            console.warn('Refresh token expired, user needs to re-authenticate') 
+          } else {
+            console.error('Token refresh failed:', errorData.error || errorData.detail || 'Unknown error')
+          }
+        }
+      } catch (error) {
+        console.error('Error during token refresh:', error)
+      }
+    }
+
+    if (!accessToken) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const backendUrl = process.env.BACKEND_URL
+    if (!backendUrl) {
+      return NextResponse.json({ success: false, error: 'BACKEND_URL is not configured' }, { status: 500 })
+    }
+
+    const { searchParams } = new URL(req.url)
+    const objectId = searchParams.get('objectId')
+    if (!objectId) {
+      return NextResponse.json({ success: false, error: 'objectId query parameter is required' }, { status: 400 })
+    }
+
+    // Нормализуем objectId с фронтенда вида "object_2" к числовому идентификатору бэкенда "2"
+    const normalizedObjectId = /^object_(\d+)$/.test(objectId) ? objectId.replace(/^object_/, '') : objectId
+
+    const zonesRes = await fetch(`${backendUrl}/account/get-zones/?objectId=${encodeURIComponent(normalizedObjectId)}`, {
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accessToken}`,
+      },
+      cache: 'no-store',
+    })
+
+    const payloadText = await zonesRes.text()
+    let payload: any
+    try { payload = JSON.parse(payloadText) } catch { payload = payloadText }
+
+    // Отладка: наблюдаем статус ответа и предполагаемую длину
+    console.log(
+      '[api/get-zones] objectId=%s normalized=%s status=%d payloadType=%s length=%d',
+      objectId,
+      normalizedObjectId,
+      zonesRes.status,
+      typeof payload,
+      Array.isArray((payload as any)?.data)
+        ? (payload as any).data.length
+        : Array.isArray(payload)
+          ? payload.length
+          : 0
+    )
+
+    if (!zonesRes.ok) { 
+      if (payload && typeof payload === 'object') {
+        if (payload.code === 'token_not_valid' || 
+            (payload.detail && typeof payload.detail === 'string' && (payload.detail.includes('Token is expired') || payload.detail.includes('Given token not valid'))) ||
+            (payload.messages && Array.isArray(payload.messages) && payload.messages.some((msg: any) => 
+              msg.message && typeof msg.message === 'string' && msg.message.includes('Token is expired')
+            ))) {
+          console.warn('Access token expired, user needs to re-authenticate')
+          return NextResponse.json({ 
+            success: false, 
+            error: 'Authentication required - please log in again' 
+          }, { status: 401 })
+        }
+      }
+  
+      // Резервный путь: пробуем получить список объектов и извлечь зоны для указанного objectId
+      try {
+        const objectsRes = await fetch(`${backendUrl}/account/get-objects/`, {
+          headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${accessToken}`,
+          },
+          cache: 'no-store',
+        })
+  
+        const objectsText = await objectsRes.text()
+        let objectsPayload: any
+        try { objectsPayload = JSON.parse(objectsText) } catch { objectsPayload = objectsText }
+  
+        if (objectsRes.ok) {
+          const objectsList: any[] = Array.isArray(objectsPayload?.data) ? objectsPayload.data
+            : (Array.isArray(objectsPayload) ? objectsPayload : (Array.isArray(objectsPayload?.objects) ? objectsPayload.objects : []))
+  
+          const target = objectsList.find((o: any) => (
+            o?.id === normalizedObjectId || o?.object_id === normalizedObjectId || o?.slug === normalizedObjectId || o?.identifier === normalizedObjectId
+          ))
+  
+          const rawZones: any[] = target?.zones || target?.zone_list || target?.areas || target?.Зоны || []
+          const normalized = Array.isArray(rawZones) ? rawZones.map((z: any, idx: number) => ({
+            id: z?.id ?? z?.zone_id ?? `${normalizedObjectId}_zone_${idx}`,
+            name: z?.name ?? z?.zone_name ?? `Зона ${idx + 1}`,
+            floor: typeof z?.floor === 'number' ? z.floor : (typeof z?.level === 'number' ? z.level : 0),
+            image_path: z?.image_path ?? z?.image ?? z?.preview_image ?? null,
+            model_path: z?.model_path ?? z?.model ?? z?.modelUrl ?? null,
+            order: typeof z?.order === 'number' ? z.order : 0,
+            sensors: Array.isArray(z?.sensors) ? z.sensors : (Array.isArray(z?.detectors) ? z.detectors : []),
+          })) : []
+  
+          // Отладка: длина массива в резервном пути
+          console.log('[api/get-zones:fallback] normalized length=%d', normalized.length)
+  
+          // Возвращаем успешный ответ с нормализованными зонами (может быть пустой массив)
+          return NextResponse.json({ success: true, data: normalized }, { status: 200 })
+        }
+      } catch (fallbackErr) {
+        console.warn('Fallback get-objects failed:', fallbackErr)
+      }
+  
+      // Если дошли до сюда, возвращаем успешный ответ с пустым списком, чтобы не ломать UI
+      return NextResponse.json({ success: true, data: [] }, { status: 200 })
+    }
+  
+    // Распаковываем массив зон от бэкенда в плоский список в поле data
+    const zonesData: any[] = Array.isArray((payload as any)?.data)
+      ? (payload as any).data
+      : Array.isArray(payload)
+        ? (payload as any)
+        : Array.isArray((payload as any)?.zones)
+          ? (payload as any).zones
+          : []
+  
+    return NextResponse.json({ success: true, data: zonesData }, { status: 200 })
+    // Нормализация: при необходимости используем запасной image_path на стороне клиента
+    return NextResponse.json({ success: true, data: payload })
+  } catch (error) {
+    console.error('Error fetching zones data:', error)
+    return NextResponse.json(
+      {
+        success: false,
+        error: 'Failed to fetch zones data',
+      },
+      { status: 500 }
+    )
+  }
+}

frontend/app/store/navigationStore.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
+import type { Zone } from '@/app/types'
 
 export interface DetectorType {
   detector_id: number
@@ -55,29 +56,40 @@ export interface NavigationStore {
   navigationHistory: string[]
   currentSubmenu: string | null
   currentModelPath: string | null
-   
+  
+  // Состояния Зон
+  currentZones: Zone[]
+  zonesCache: Record<string, Zone[]>
+  zonesLoading: boolean
+  zonesError: string | null
+  
   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
   addToHistory: (path: string) => void
   goBack: () => string | null
   setCurrentModelPath: (path: string) => void
-   
+  
   setCurrentSubmenu: (submenu: string | null) => void
   clearSubmenu: () => void
-   
+  
+  // Действия с зонами
+  loadZones: (objectId: string) => Promise<void>
+  setZones: (zones: Zone[]) => void
+  clearZones: () => void
+  
   openMonitoring: () => void
   closeMonitoring: () => void
   openFloorNavigation: () => void
@@ -88,20 +100,20 @@ export interface NavigationStore {
   closeListOfDetectors: () => void
   openSensors: () => void
   closeSensors: () => void
-   
+  
   closeAllMenus: () => void
-   
+  clearSelections: () => 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
   getActiveSidebarItem: () => number
-  PREFERRED_MODEL: string
 }
 
 const useNavigationStore = create<NavigationStore>()(
@@ -114,13 +126,18 @@ const useNavigationStore = create<NavigationStore>()(
       navigationHistory: [],
       currentSubmenu: null,
       currentModelPath: null,
-       
+      
+      currentZones: [],
+      zonesCache: {},
+      zonesLoading: false,
+      zonesError: null,
+      
       showMonitoring: false,
       showFloorNavigation: false,
       showNotifications: false,
       showListOfDetectors: false,
       showSensors: false,
-       
+      
       selectedDetector: null,
       showDetectorMenu: false,
       selectedNotification: null,
@@ -128,8 +145,6 @@ const useNavigationStore = create<NavigationStore>()(
       selectedAlert: null,
       showAlertMenu: false,
 
-      PREFERRED_MODEL: 'AerBIM-Monitor_ASM-HT-Viewer_Expo2017Astana_20250910',
-       
       setCurrentObject: (id: string | undefined, title: string | undefined) => 
         set({ currentObject: { id, title } }),
       
@@ -164,18 +179,64 @@ const useNavigationStore = create<NavigationStore>()(
       
       clearSubmenu: () => 
         set({ currentSubmenu: null }),
-       
-      openMonitoring: () => set({ 
-        showMonitoring: true, 
-        showFloorNavigation: false, 
-        showNotifications: false,
-        showListOfDetectors: false,
-        currentSubmenu: 'monitoring',
-        showDetectorMenu: false,
-        selectedDetector: null,
-        showNotificationDetectorInfo: false,
-        selectedNotification: null
-      }),
+      
+      loadZones: async (objectId: string) => {
+        const cache = get().zonesCache
+        const cached = cache[objectId]
+        const hasCached = Array.isArray(cached) && cached.length > 0
+        if (hasCached) {
+          // Показываем кэшированные зоны сразу, но обновляем в фоне
+          set({ currentZones: cached, zonesLoading: true, zonesError: null })
+        } else {
+          set({ zonesLoading: true, zonesError: null })
+        }
+        try {
+          const res = await fetch(`/api/get-zones?objectId=${encodeURIComponent(objectId)}`, { cache: 'no-store' })
+          const text = await res.text()
+          let payload: string | Record<string, unknown>
+          try { payload = JSON.parse(text) } catch { payload = text }
+          if (!res.ok) throw new Error(typeof payload === 'string' ? payload : (payload?.error as string || 'Не удалось получить зоны'))
+          const zones: Zone[] = typeof payload === 'string' ? [] : 
+            Array.isArray(payload?.data) ? payload.data as Zone[] : 
+            (payload?.data && typeof payload.data === 'object' && 'zones' in payload.data ? (payload.data as { zones?: Zone[] }).zones : 
+             payload?.zones ? payload.zones as Zone[] : []) || []
+          const normalized = zones.map((z) => ({
+            ...z,
+            image_path: z.image_path ?? null,
+          }))
+          set((state) => ({
+            currentZones: normalized,
+            zonesCache: { ...state.zonesCache, [objectId]: normalized },
+            zonesLoading: false,
+            zonesError: null,
+          }))
+        } catch (e: unknown) {
+          set({ zonesLoading: false, zonesError: (e as Error)?.message || 'Ошибка при загрузке зон' })
+        }
+      },
+      
+      setZones: (zones: Zone[]) => set({ currentZones: zones }),
+      clearZones: () => set({ currentZones: [] }),
+      
+      openMonitoring: () => {
+        set({ 
+          showMonitoring: true, 
+          showFloorNavigation: false, 
+          showNotifications: false,
+          showListOfDetectors: false,
+          currentSubmenu: 'monitoring',
+          showDetectorMenu: false,
+          selectedDetector: null,
+          showNotificationDetectorInfo: false,
+          selectedNotification: null,
+          zonesError: null // Очищаем ошибку зон при открытии мониторинга
+        })
+        const objId = get().currentObject.id
+        if (objId) {
+          // Вызываем загрузку зон сразу, но обновляем в фоне
+          get().loadZones(objId)
+        }
+      },
       
       closeMonitoring: () => set({ 
         showMonitoring: false, 
@@ -254,22 +315,26 @@ const useNavigationStore = create<NavigationStore>()(
         selectedDetector: null,
         currentSubmenu: null 
       }),
-       
-      closeAllMenus: () => set({
-        showMonitoring: false,
-        showFloorNavigation: false,
-        showNotifications: false,
-        showListOfDetectors: false,
-        showSensors: false,
-        showDetectorMenu: false,
+      
+      closeAllMenus: () => {
+        set({
+          showMonitoring: false,
+          showFloorNavigation: false,
+          showNotifications: false,
+          showListOfDetectors: false,
+          showSensors: false,
+          currentSubmenu: null,
+        });
+        get().clearSelections();
+      },
+      
+      clearSelections: () => set({
         selectedDetector: null,
-        showNotificationDetectorInfo: false,
-        selectedNotification: null,
-        showAlertMenu: false,
+        showDetectorMenu: false,
         selectedAlert: null,
-        currentSubmenu: null
+        showAlertMenu: false,
       }),
-       
+
       setSelectedDetector: (detector: DetectorType | null) => set({ selectedDetector: detector }),
       setShowDetectorMenu: (show: boolean) => set({ showDetectorMenu: show }),
       setSelectedNotification: (notification: NotificationType | null) => set({ selectedNotification: notification }),

frontend/app/types.ts

@@ -1,2 +1,2 @@
-import type { ValidationRules, ValidationErrors, User, UserState } from './types/index'
-export type { ValidationRules, ValidationErrors, User, UserState }
+import type { ValidationRules, ValidationErrors, User, UserState, Zone } from './types/index'
+export type { ValidationRules, ValidationErrors, User, UserState, Zone }

frontend/app/types/index.ts

@@ -64,3 +64,18 @@ export interface TextInputProps {
   error?: string
   min?: string
 }
+
+export interface Zone {
+  id: number
+  name: string
+  floor: number
+  image_path?: string | null
+  model_path?: string | null
+  order?: number
+  sensors?: Array<{
+    id: number
+    name: string
+    serial_number: string
+    sensor_type: string
+  }>
+}

frontend/components/alerts/AlertsList.tsx

@@ -0,0 +1,145 @@
+import React, { useState, useMemo } from 'react'
+
+interface AlertItem {
+  id: number
+  type: string
+  message: string
+  timestamp: string
+  acknowledged: boolean
+  priority: string
+  detector_id?: string
+  detector_name?: string
+  location?: string
+  object?: string
+}
+
+interface AlertsListProps {
+  alerts: AlertItem[]
+  onAcknowledgeToggle: (alertId: number) => void
+  initialSearchTerm?: string
+}
+
+const AlertsList: React.FC<AlertsListProps> = ({ alerts, onAcknowledgeToggle, initialSearchTerm = '' }) => {
+  const [searchTerm, setSearchTerm] = useState(initialSearchTerm)
+
+  const filteredAlerts = useMemo(() => {
+    return alerts.filter(alert => { 
+      const matchesSearch = searchTerm === '' || alert.detector_id?.toString() === searchTerm
+      return matchesSearch 
+    })
+  }, [alerts, searchTerm])
+
+  const getStatusColor = (type: string) => {
+    switch (type) {
+      case 'critical': return '#b3261e'
+      case 'warning': return '#fd7c22'
+      case 'info': return '#00ff00'
+      default: return '#666'
+    }
+  }
+  
+  return (
+    <div className="space-y-6">
+      {/* Поиск */}
+      <div className="flex items-center justify-end gap-4 mb-6">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Поиск по ID детектора..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="bg-[#161824] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none w-64"
+          />
+          <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>
+
+      {/* Таблица алертов */}
+      <div className="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">Всего: {filteredAlerts.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>
+              {filteredAlerts.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: getStatusColor(item.type) }}
+                      ></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-600/20 text-green-300 ring-1 ring-green-600/40' : 'bg-red-600/20 text-red-300 ring-1 ring-red-600/40'
+                    }`}>
+                      {item.acknowledged ? 'Да' : 'Нет'}
+                    </span>
+                    <button
+                      onClick={() => onAcknowledgeToggle(item.id)}
+                      className="ml-2 inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-[#2a2e3e] text-white hover:bg-[#353a4d]"
+                    >
+                      {item.acknowledged ? 'Снять' : 'Подтвердить'}
+                    </button>
+                  </td>
+                  <td className="py-4">
+                    <div className="text-sm text-gray-300">{new Date(item.timestamp).toLocaleString('ru-RU')}</div>
+                  </td>
+                </tr>
+              ))}
+              {filteredAlerts.length === 0 && (
+                <tr>
+                  <td colSpan={7} className="py-8 text-center text-gray-400">
+                    Записей не найдено
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AlertsList

frontend/components/alerts/DetectorList.tsx

@@ -31,18 +31,16 @@ interface RawDetector {
   }>
 }
 
-type FilterType = 'all' | 'critical' | 'warning' | 'normal'
-
 interface DetectorListProps {
   objectId?: string
   selectedDetectors: number[]
   onDetectorSelect: (detectorId: number, selected: boolean) => void
+  initialSearchTerm?: string
 }
 
-const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors, onDetectorSelect }) => {
+const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors, onDetectorSelect, initialSearchTerm = '' }) => {
   const [detectors, setDetectors] = useState<Detector[]>([])
-  const [selectedFilter, setSelectedFilter] = useState<FilterType>('all')
-  const [searchTerm, setSearchTerm] = useState<string>('')
+  const [searchTerm, setSearchTerm] = useState<string>(initialSearchTerm)
 
   useEffect(() => {
     const loadDetectors = async () => {
@@ -72,14 +70,8 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
     loadDetectors()
   }, [objectId])
  
-  const filteredDetectors = detectors.filter(detector => {
-    const matchesSearch = detector.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         detector.location.toLowerCase().includes(searchTerm.toLowerCase())
-    
-    if (selectedFilter === 'all') return matchesSearch
-    if (selectedFilter === 'critical') return matchesSearch && detector.status === '#b3261e'
-    if (selectedFilter === 'warning') return matchesSearch && detector.status === '#fd7c22'
-    if (selectedFilter === 'normal') return matchesSearch && detector.status === '#00ff00'
+  const filteredDetectors = detectors.filter(detector => { 
+    const matchesSearch = searchTerm === '' || detector.detector_id.toString() === searchTerm
     
     return matchesSearch
   })
@@ -88,53 +80,13 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
     <div className="space-y-6">
       <div className="flex items-center justify-between gap-4">
         <div className="flex items-center gap-3">
-          <button
-            onClick={() => setSelectedFilter('all')}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              selectedFilter === 'all'
-                ? 'bg-blue-600 text-white'
-                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
-            }`}
-          >
-            Все ({detectors.length})
-          </button>
-          <button
-            onClick={() => setSelectedFilter('critical')}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              selectedFilter === 'critical'
-                ? 'bg-red-600 text-white'
-                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
-            }`}
-          >
-            Критические ({detectors.filter(d => d.status === '#b3261e').length})
-          </button>
-          <button
-            onClick={() => setSelectedFilter('warning')}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              selectedFilter === 'warning'
-                ? 'bg-orange-600 text-white'
-                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
-            }`}
-          >
-            Предупреждения ({detectors.filter(d => d.status === '#fd7c22').length})
-          </button>
-          <button
-            onClick={() => setSelectedFilter('normal')}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              selectedFilter === 'normal'
-                ? 'bg-green-600 text-white'
-                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
-            }`}
-          >
-            Норма ({detectors.filter(d => d.status === '#00ff00').length})
-          </button>
         </div>
         
         <div className="flex items-center gap-3">
           <div className="relative">
             <input
               type="text"
-              placeholder="Поиск детекторов..."
+              placeholder="Поиск по ID детектора..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               className="bg-[#161824] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none w-64"

frontend/components/dashboard/Dashboard.tsx

@@ -60,7 +60,7 @@ const Dashboard: React.FC = () => {
     loadDashboard()
   }, [objectTitle, selectedChartPeriod, selectedSensorType])
 
-  // Separate effect for table data based on table period
+  // Отдельный эффект для загрузки таблицы по выбранному периоду
   useEffect(() => {
     const loadTableData = async () => {
       try {
@@ -195,7 +195,7 @@ const Dashboard: React.FC = () => {
                      <option value="24">День</option>
                      <option value="72">3 дня</option>
                      <option value="168">Неделя</option>
-                     <option value="720">Месяц</option>
+                     <option value="720">Месяц</option> 
                    </select>
                    <svg className="w-4 h-4 absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
@@ -207,15 +207,13 @@ const Dashboard: React.FC = () => {
              {/* Карты-графики */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-[18px]">
                <ChartCard 
-                 title="Показатель" 
-                 // subtitle removed
+                 title="Показатель"  
                >
                  <AreaChart data={chartData} />
                </ChartCard>
                
                <ChartCard 
-                 title="Статистика" 
-                 // subtitle removed
+                 title="Статистика"  
                >
                  <BarChart data={chartData?.map((d: any) => ({ value: d.value }))} />
                </ChartCard>
@@ -236,7 +234,7 @@ const Dashboard: React.FC = () => {
                     <option value="24">День</option>
                     <option value="72">3 дня</option>
                     <option value="168">Неделя</option>
-                    <option value="720">Месяц</option>
+                    <option value="720">Месяц</option> 
                   </select>
                   <svg className="w-4 h-4 absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />

frontend/components/model/ModelViewer.tsx

@@ -39,8 +39,12 @@ export interface ModelViewerProps {
     }
   }) => void
   onError?: (error: string) => void 
+  activeMenu?: string | null
   focusSensorId?: string | null
   renderOverlay?: (params: { anchor: { left: number; top: number } | null; info?: { name?: string; sensorId?: string } | null }) => React.ReactNode
+  isSensorSelectionEnabled?: boolean
+  onSensorPick?: (sensorId: string | null) => void
+  highlightAllSensors?: boolean
 }
 
 const ModelViewer: React.FC<ModelViewerProps> = ({
@@ -50,6 +54,9 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
   onError,
   focusSensorId,
   renderOverlay,
+  isSensorSelectionEnabled,
+  onSensorPick,
+  highlightAllSensors,
 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const engineRef = useRef<Nullable<Engine>>(null)
@@ -61,6 +68,7 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
   const isDisposedRef = useRef(false)
   const importedMeshesRef = useRef<AbstractMesh[]>([])
   const highlightLayerRef = useRef<HighlightLayer | null>(null)
+  const highlightedMeshesRef = useRef<AbstractMesh[]>([])
   const chosenMeshRef = useRef<AbstractMesh | null>(null)
   const [overlayPos, setOverlayPos] = useState<{ left: number; top: number } | null>(null)
   const [overlayData, setOverlayData] = useState<{ name?: string; sensorId?: string } | null>(null)
@@ -214,7 +222,7 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
     if (!canvasRef.current || isInitializedRef.current) return
 
     const canvas = canvasRef.current
-    const engine = new Engine(canvas, true)
+    const engine = new Engine(canvas, true, { stencil: true })
     engineRef.current = engine
 
     engine.runRenderLoop(() => {
@@ -419,29 +427,40 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
   }, [modelPath, onError, onModelLoaded])
 
   useEffect(() => { 
+    console.log('[ModelViewer] highlightAllSensors effect triggered:', { highlightAllSensors, modelReady, sceneReady: !!sceneRef.current })
     if (!sceneRef.current || isDisposedRef.current || !modelReady) return
 
+    // Если включено выделение всех сенсоров - выделяем их все
+    if (highlightAllSensors) {
+      console.log('[ModelViewer] Calling highlightAllSensorMeshes()')
+      highlightAllSensorMeshes()
+      return
+    }
+
     const sensorId = (focusSensorId ?? '').trim()
     if (!sensorId) {
       console.log('[ModelViewer] Focus cleared (no Sensor_ID provided)')
- 
+      for (const m of highlightedMeshesRef.current) { m.renderingGroupId = 0 }
+      highlightedMeshesRef.current = []
       highlightLayerRef.current?.removeAllMeshes()
       chosenMeshRef.current = null
       setOverlayPos(null)
       setOverlayData(null)
       return
-    }
+     }
  
     const allMeshes = importedMeshesRef.current || []
      
     if (allMeshes.length === 0) {
       console.warn('[ModelViewer] No meshes available for sensor matching')
+      for (const m of highlightedMeshesRef.current) { m.renderingGroupId = 0 }
+      highlightedMeshesRef.current = []
       highlightLayerRef.current?.removeAllMeshes()
       chosenMeshRef.current = null
       setOverlayPos(null)
       setOverlayData(null)
       return
-    }
+     }
     
     const sensorMeshes = allMeshes.filter((m: any) => {
       try {
@@ -516,15 +535,26 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
 
         const hl = highlightLayerRef.current
         if (hl) {
+          // Переключаем группу рендеринга для предыдущего выделенного меша
+          for (const m of highlightedMeshesRef.current) { m.renderingGroupId = 0 }
+          highlightedMeshesRef.current = []
+        
           hl.removeAllMeshes()
           if (chosen instanceof Mesh) {
+            chosen.renderingGroupId = 1
+            highlightedMeshesRef.current.push(chosen)
             hl.addMesh(chosen, new Color3(1, 1, 0))
           } else if (chosen instanceof InstancedMesh) {
+            // Сохраняем исходный меш для инстанса
+            chosen.sourceMesh.renderingGroupId = 1
+            highlightedMeshesRef.current.push(chosen.sourceMesh)
             hl.addMesh(chosen.sourceMesh, new Color3(1, 1, 0))
           } else {
             const children = typeof (chosen as any)?.getChildMeshes === 'function' ? (chosen as any).getChildMeshes() : []
             for (const cm of children) {
               if (cm instanceof Mesh) {
+                cm.renderingGroupId = 1
+                highlightedMeshesRef.current.push(cm)
                 hl.addMesh(cm, new Color3(1, 1, 0))
               }
             }
@@ -534,18 +564,144 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
         setOverlayData({ name: chosen.name, sensorId })
       } catch (error) {
         console.error('[ModelViewer] Error focusing on sensor mesh:', error)
+        for (const m of highlightedMeshesRef.current) { m.renderingGroupId = 0 }
+        highlightedMeshesRef.current = []
+        highlightLayerRef.current?.removeAllMeshes()
+        chosenMeshRef.current = null
+        setOverlayPos(null)
+        setOverlayData(null)
+       }
+     } else {
+        for (const m of highlightedMeshesRef.current) { m.renderingGroupId = 0 }
+        highlightedMeshesRef.current = []
         highlightLayerRef.current?.removeAllMeshes()
         chosenMeshRef.current = null
         setOverlayPos(null)
         setOverlayData(null)
-      }
-    } else {
-      highlightLayerRef.current?.removeAllMeshes()
-      chosenMeshRef.current = null
-      setOverlayPos(null)
-      setOverlayData(null)
     }
-  }, [focusSensorId, modelReady])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [focusSensorId, modelReady, highlightAllSensors])
+
+  // Помощь: извлечь Sensor_ID из метаданных меша (совпадающая логика с фокусом)
+  const getSensorIdFromMesh = React.useCallback((m: AbstractMesh | null): string | null => {
+    if (!m) return null
+    try {
+      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 ?? extras?.detector_id
+      if (sid != null) return String(sid).trim()
+      const monitoringSensorInstance = extras?.bonsaiPset_ARBM_PSet_MonitoringSensor_Instance
+      if (monitoringSensorInstance && typeof monitoringSensorInstance === 'string') {
+        try {
+          const parsedInstance = JSON.parse(monitoringSensorInstance)
+          const instanceSensorId = parsedInstance?.Sensor_ID
+          if (instanceSensorId != null) return String(instanceSensorId).trim()
+        } catch (parseError) {
+          console.warn('[ModelViewer] Error parsing MonitoringSensor_Instance JSON in pick:', parseError)
+        }
+      }
+    } catch { 
+    }
+    return null
+  }, [])
+
+  // Функция для выделения всех сенсоров на модели
+  const highlightAllSensorMeshes = React.useCallback(() => {
+    console.log('[ModelViewer] highlightAllSensorMeshes called')
+    const scene = sceneRef.current
+    if (!scene || !highlightLayerRef.current) {
+      console.log('[ModelViewer] Cannot highlight - scene or highlightLayer not ready:', {
+        sceneReady: !!scene,
+        highlightLayerReady: !!highlightLayerRef.current
+      })
+      return
+    }
+
+    const allMeshes = importedMeshesRef.current || []
+    
+    // Use the same logic as getSensorIdFromMesh to identify sensor meshes
+    const sensorMeshes = allMeshes.filter((m: any) => {
+      try {
+        const sensorId = getSensorIdFromMesh(m)
+        if (sensorId) {
+          console.log(`[ModelViewer] Found sensor mesh: ${m.name} (id: ${m.id}, sensorId: ${sensorId})`)
+          return true
+        }
+        return false
+      } catch (error) {
+        console.warn('[ModelViewer] Error filtering sensor mesh:', error)
+        return false
+      }
+    })
+
+    console.log(`[ModelViewer] Found ${sensorMeshes.length} sensor meshes out of ${allMeshes.length} total meshes`)
+
+    if (sensorMeshes.length === 0) {
+      console.log('[ModelViewer] No sensor meshes found to highlight')
+      return
+    }
+
+    // Clear previous highlights
+    for (const m of highlightedMeshesRef.current) { m.renderingGroupId = 0 }
+    highlightedMeshesRef.current = []
+    highlightLayerRef.current?.removeAllMeshes()
+
+    // Highlight all sensor meshes
+    sensorMeshes.forEach((mesh: any) => {
+      try {
+        if (mesh instanceof Mesh) {
+          mesh.renderingGroupId = 1
+          highlightedMeshesRef.current.push(mesh)
+          highlightLayerRef.current?.addMesh(mesh, new Color3(1, 1, 0))
+        } else if (mesh instanceof InstancedMesh) {
+          mesh.sourceMesh.renderingGroupId = 1
+          highlightedMeshesRef.current.push(mesh.sourceMesh)
+          highlightLayerRef.current?.addMesh(mesh.sourceMesh, new Color3(1, 1, 0))
+        } else {
+          const children = typeof mesh.getChildMeshes === 'function' ? mesh.getChildMeshes() : []
+          for (const cm of children) {
+            if (cm instanceof Mesh) {
+              cm.renderingGroupId = 1
+              highlightedMeshesRef.current.push(cm)
+              highlightLayerRef.current?.addMesh(cm, new Color3(1, 1, 0))
+            }
+          }
+        }
+      } catch (error) {
+        console.warn('[ModelViewer] Error highlighting sensor mesh:', error)
+      }
+    })
+
+    console.log(`[ModelViewer] Successfully highlighted ${highlightedMeshesRef.current.length} sensor meshes`)
+  }, [getSensorIdFromMesh])
+
+  // Включение выбора на основе взаимодействия с моделью только при готовности модели и включении выбора сенсоров
+  useEffect(() => {
+    const scene = sceneRef.current
+    if (!scene || !modelReady || !isSensorSelectionEnabled) return
+
+    const pickObserver = scene.onPointerObservable.add((pointerInfo: PointerInfo) => {
+      if (pointerInfo.type !== PointerEventTypes.POINTERPICK) return
+      const pick = pointerInfo.pickInfo
+      if (!pick || !pick.hit) {
+        onSensorPick?.(null)
+        return
+      }
+
+      const pickedMesh = pick.pickedMesh
+      const sensorId = getSensorIdFromMesh(pickedMesh)
+
+      if (sensorId) {
+        onSensorPick?.(sensorId)
+      } else {
+        onSensorPick?.(null)
+      }
+    })
+
+    return () => {
+      scene.onPointerObservable.remove(pickObserver)
+    }
+  }, [modelReady, isSensorSelectionEnabled, onSensorPick, getSensorIdFromMesh])
 
   // Расчет позиции оверлея
   const computeOverlayPosition = React.useCallback((mesh: AbstractMesh | null) => {

frontend/components/model/SceneToolbar.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
 import useNavigationStore from '@/app/store/navigationStore';
+import type { Zone } from '@/app/types';
 
 interface ToolbarButton {
   icon: string;
@@ -32,7 +33,7 @@ const SceneToolbar: React.FC<SceneToolbarProps> = ({
   navMenuActive = false,
 }) => {
   const [isZoomOpen, setIsZoomOpen] = useState(false);
-  const { PREFERRED_MODEL, showMonitoring, openMonitoring, closeMonitoring } = useNavigationStore();
+  const { showMonitoring, openMonitoring, closeMonitoring, currentZones, loadZones, currentObject } = useNavigationStore();
 
   const handleToggleNavMenu = () => {
     if (showMonitoring) {
@@ -43,25 +44,46 @@ const SceneToolbar: React.FC<SceneToolbarProps> = ({
   };
 
   const handleHomeClick = async () => {
-    if (onSelectModel) {
-      try {
-        const res = await fetch('/api/big-models/list');
-        if (!res.ok) {
-          throw new Error('Failed to fetch models list');
-        }
-        const data = await res.json();
-        const items: { name: string; path: string }[] = Array.isArray(data?.models) ? data.models : [];
-        const preferredModelName = PREFERRED_MODEL.split('/').pop()?.split('.').slice(0, -1).join('.') || '';
-        const preferredModel = items.find(model => (model.path.split('/').pop()?.split('.').slice(0, -1).join('.') || '') === preferredModelName);
+    if (!onSelectModel) return;
 
-        if (preferredModel) {
-          onSelectModel(preferredModel.path);
-        } else {
-          console.error('Preferred model not found in the list');
+    try {
+      let zones: Zone[] = Array.isArray(currentZones) ? currentZones : [];
+
+      // Если зоны ещё не загружены, откройте Monitoring и загрузите зоны для текущего объекта
+      if ((!zones || zones.length === 0) && currentObject?.id) {
+        if (!showMonitoring) {
+          openMonitoring();
         }
-      } catch (error) {
-        console.error('Error fetching models list:', error);
+        await loadZones(currentObject.id);
+        zones = useNavigationStore.getState().currentZones || [];
       }
+
+      if (!Array.isArray(zones) || zones.length === 0) {
+        console.warn('No zones available to select a model from.');
+        return;
+      }
+
+      const sorted = zones.slice().sort((a: Zone, b: Zone) => {
+        const oa = typeof a.order === 'number' ? a.order : 0;
+        const ob = typeof b.order === 'number' ? b.order : 0;
+        if (oa !== ob) return oa - ob;
+        return (a.name || '').localeCompare(b.name || '');
+      });
+
+      const top = sorted[0];
+      let chosenPath: string | null = top?.model_path && String(top.model_path).trim() ? top.model_path! : null;
+      if (!chosenPath) {
+        const nextWithModel = sorted.find((z) => z.model_path && String(z.model_path).trim());
+        chosenPath = nextWithModel?.model_path ?? null;
+      }
+
+      if (chosenPath) {
+        onSelectModel(chosenPath);
+      } else {
+        console.warn('No zone has a valid model_path to open.');
+      }
+    } catch (error) {
+      console.error('Error selecting top zone model:', error);
     }
   };
 

frontend/components/navigation/AlertMenu.tsx

@@ -1,7 +1,10 @@
 'use client'
 
 import React from 'react'
-
+import { useRouter } from 'next/navigation'
+import useNavigationStore from '@/app/store/navigationStore'
+import AreaChart from '../dashboard/AreaChart'
+ 
 interface AlertType {
   id: number
   detector_id: number
@@ -26,6 +29,9 @@ interface AlertMenuProps {
 }
 
 const AlertMenu: React.FC<AlertMenuProps> = ({ alert, isOpen, onClose, getStatusText, compact = false, anchor = null }) => {
+  const router = useRouter()
+  const { setSelectedDetector, currentObject } = useNavigationStore()
+  
   if (!isOpen) return null
 
   const formatDate = (dateString: string) => {
@@ -39,16 +45,8 @@ const AlertMenu: React.FC<AlertMenuProps> = ({ alert, isOpen, onClose, getStatus
     })
   }
 
-  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) => {
+    if (typeof priority !== 'string') return 'Неизвестно';
     switch (priority.toLowerCase()) {
       case 'high': return 'Высокий'
       case 'medium': return 'Средний'
@@ -57,14 +55,141 @@ const AlertMenu: React.FC<AlertMenuProps> = ({ alert, isOpen, onClose, getStatus
     }
   }
 
+  const getStatusColorCircle = (status: string) => {
+    // Use hex colors from Alerts submenu system
+    if (status === '#b3261e') return 'bg-red-500'
+    if (status === '#fd7c22') return 'bg-orange-500'
+    if (status === '#00ff00') return 'bg-green-500'
+    
+    // Fallback for text-based status
+    switch (status?.toLowerCase()) {
+      case 'critical': return 'bg-red-500'
+      case 'warning': return 'bg-orange-500'
+      case 'normal': return 'bg-green-500'
+      default: return 'bg-gray-500'
+    }
+  }
+
+  const getTimeAgo = (timestamp: string) => {
+    const now = new Date()
+    const alertTime = new Date(timestamp)
+    const diffMs = now.getTime() - alertTime.getTime()
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+    const diffMonths = Math.floor(diffDays / 30)
+    
+    if (diffMonths > 0) {
+      return `${diffMonths} ${diffMonths === 1 ? 'месяц' : diffMonths < 5 ? 'месяца' : 'месяцев'}`
+    } else if (diffDays > 0) {
+      return `${diffDays} ${diffDays === 1 ? 'день' : diffDays < 5 ? 'дня' : 'дней'}`
+    } else {
+      const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
+      if (diffHours > 0) {
+        return `${diffHours} ${diffHours === 1 ? 'час' : diffHours < 5 ? 'часа' : 'часов'}`
+      } else {
+        const diffMinutes = Math.floor(diffMs / (1000 * 60))
+        return `${diffMinutes} ${diffMinutes === 1 ? 'минута' : diffMinutes < 5 ? 'минуты' : 'минут'}`
+      }
+    }
+  }
+
+  const handleReportsClick = () => { 
+    const currentUrl = new URL(window.location.href)
+    const objectId = currentUrl.searchParams.get('objectId') || currentObject.id
+    const objectTitle = currentUrl.searchParams.get('objectTitle') || currentObject.title
+     
+    const detectorData = { 
+      detector_id: alert.detector_id, 
+      name: alert.detector_name, 
+      serial_number: '', 
+      object: alert.object || '', 
+      status: '', 
+      type: '', 
+      detector_type: '', 
+      location: alert.location || '', 
+      floor: 0, 
+      checked: false, 
+      notifications: [] 
+    }
+    setSelectedDetector(detectorData)
+     
+    let reportsUrl = '/reports'
+    const params = new URLSearchParams()
+    
+    if (objectId) params.set('objectId', objectId)
+    if (objectTitle) params.set('objectTitle', objectTitle)
+    
+    if (params.toString()) {
+      reportsUrl += `?${params.toString()}`
+    }
+    
+    router.push(reportsUrl)
+  }
+
+  const handleHistoryClick = () => { 
+    const currentUrl = new URL(window.location.href)
+    const objectId = currentUrl.searchParams.get('objectId') || currentObject.id
+    const objectTitle = currentUrl.searchParams.get('objectTitle') || currentObject.title
+     
+    const detectorData = {
+      detector_id: alert.detector_id,
+      name: alert.detector_name,
+      serial_number: '',
+      object: alert.object || '',
+      status: '',
+      type: '',
+      detector_type: '',
+      location: alert.location || '',
+      floor: 0,
+      checked: false,
+      notifications: []
+    }
+    setSelectedDetector(detectorData)
+     
+    let alertsUrl = '/alerts'
+    const params = new URLSearchParams()
+    
+    if (objectId) params.set('objectId', objectId)
+    if (objectTitle) params.set('objectTitle', objectTitle)
+    
+    if (params.toString()) {
+      alertsUrl += `?${params.toString()}`
+    }
+    
+    router.push(alertsUrl)
+  }
+
+  // Данные для графика (мок данные)
+  const chartData: { timestamp: string; value: number }[] = [
+    { timestamp: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString(), value: 75 },
+    { timestamp: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), value: 82 },
+    { timestamp: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString(), value: 78 },
+    { timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), value: 85 },
+    { timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), value: 90 },
+    { timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), value: 88 },
+    { timestamp: new Date().toISOString(), value: 92 }
+  ]
+
   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="rounded-[10px] bg-black/80 text-white text-xs px-4 py-3 shadow-xl min-w-[420px] max-w-[454px]"> 
+          <div className="flex items-start justify-between gap-4 mb-3">
             <div className="flex-1">
-              <div className="font-semibold truncate">Датч.{alert.detector_name}</div>
-              <div className="opacity-80">{getStatusText(alert.status)}</div>
+              <div className="font-semibold truncate text-base">{alert.detector_name}</div>
+            </div>
+            <div className="flex gap-2">
+              <button onClick={handleReportsClick} className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-4 py-2 rounded-[6px] text-sm font-medium transition-colors flex items-center gap-2 flex-1">
+                <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 onClick={handleHistoryClick} className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-4 py-2 rounded-[6px] text-sm font-medium transition-colors flex items-center gap-2 flex-1">
+                <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>
             <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">
@@ -73,47 +198,40 @@ const AlertMenu: React.FC<AlertMenuProps> = ({ alert, isOpen, onClose, getStatus
             </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>
+          {/* Тело: 3 строки / 2 колонки */}
+          <div className="space-y-2 mb-6">
+            {/* Строка 1: Статус */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="text-[rgb(113,113,122)] text-xs">Статус</div>
+              <div className="flex items-center gap-1 justify-end">
+                <div className={`w-2 h-2 rounded-full ${getStatusColorCircle(alert.status)}`}></div>
+                <div className="text-white text-xs">{getStatusText(alert.status)}</div>
               </div>
             </div>
             
-            <div>
-              <div className="text-[rgb(113,113,122)] text-[11px]">Сообщение</div>
-              <div className="text-white text-xs">{alert.message}</div>
+            {/* Строка 2: Причина тревоги */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="text-[rgb(113,113,122)] text-xs">Причина тревоги</div>
+              <div className="text-white text-xs truncate">{alert.message}</div>
             </div>
             
-            <div>
-              <div className="text-[rgb(113,113,122)] text-[11px]">Местоположение</div>
-              <div className="text-white text-xs">{alert.location}</div>
+            {/* Строка 3: Временная метка */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="text-[rgb(113,113,122)] text-xs">Временная метка</div>
+              <div className="text-white text-xs text-right">{getTimeAgo(alert.timestamp)}</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 className="space-y-6">
+            <div className="text-[rgb(113,113,122)] text-xs text-center">{formatDate(alert.timestamp)}</div>
+            
+            <div className="grid grid-cols-1 gap-6 min-h-[70px]">
+            <AreaChart data={chartData} />
+            </div>
+            </div>
           </div>
-        </div>
-      </div>
+        </div> 
     )
   }
 
@@ -122,64 +240,89 @@ const AlertMenu: React.FC<AlertMenuProps> = ({ alert, isOpen, onClose, getStatus
       <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}
+            {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>
+          <button 
+            onClick={onClose}
+            className="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 className="grid grid-cols-2 gap-16 mb-12 flex-grow">
+          {/* Колонка 1 - Строка 1: Статус */}
+          <div className="space-y-2">
+            <div className="text-[rgb(113,113,122)] text-sm">Статус</div>
+            <div className="flex items-center gap-2 justify-end">
+              <div className={`w-3 h-3 rounded-full ${getStatusColorCircle(alert.status)}`}></div>
+              <span className="text-white text-sm">{getStatusText(alert.status)}</span>
+            </div>
+          </div>
+          
+          {/* Колонка 1 - Строка 2: Причина тревоги */}
+          <div className="space-y-2">
+            <div className="text-[rgb(113,113,122)] text-sm">Причина тревоги</div>
+            <div className="text-white text-sm">{alert.message}</div>
+          </div>
+          <div className="space-y-2">
+            <div className="text-[rgb(113,113,122)] text-sm">Причина тревоги</div>
+            <div className="text-white text-sm">{alert.message}</div>
+          </div>
+
+          {/* Колонка 1 - Строка 3: Временная метка */}
+          <div className="space-y-2">
+            <div className="text-[rgb(113,113,122)] text-sm">Временная метка</div>
+            <div className="text-white text-sm">{getTimeAgo(alert.timestamp)}</div>
+          </div>
+          
+          {/* Колонка 2 - Строка 1: Приоритет */}
+          <div className="space-y-2">
+            <div className="text-[rgb(113,113,122)] text-sm">Приоритет</div>
+            <div className="text-white text-sm text-right">{getPriorityText(alert.priority)}</div>
+          </div>
+          
+          {/* Колонка 2 - Строка 2: Локация */}
+          <div className="space-y-2">
+            <div className="text-[rgb(113,113,122)] text-sm">Локация</div>
+            <div className="text-white text-sm text-right">{alert.location}</div>
+          </div>
+          
+          {/* Колонка 2 - Строка 3: Объект */}
+          <div className="space-y-2">
+            <div className="text-[rgb(113,113,122)] text-sm">Объект</div>
+            <div className="text-white text-sm text-right">{alert.object}</div>
+          </div>
+          
+          {/* Колонка 2 - Строка 4: Отчет */}
+          <div className="space-y-2">
+            <div className="text-[rgb(113,113,122)] text-sm">Отчет</div>
+            <div className="text-white text-sm text-right">Доступен</div>
+          </div>
+          
+          {/* Колонка 2 - Строка 5: История */}
+          <div className="space-y-2">
+            <div className="text-[rgb(113,113,122)] text-sm">История</div>
+            <div className="text-white text-sm text-right">Просмотр</div>
           </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 className="space-y-8 flex-shrink-0">
+          {/* Строка 1: Дата/время */}
+          <div className="p-8 bg-[rgb(22,24,36)] rounded-lg">
+            <div className="text-[rgb(113,113,122)] text-base font-medium mb-4">Дата/время</div>
+            <div className="text-white text-base">{formatDate(alert.timestamp)}</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>
+          {/* Charts */}
+          <div className="grid grid-cols-1 gap-6 min-h-[300px]">
+            <div className="p-2 min-h-[30px]">
+              <AreaChart data={chartData} />
             </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>
         

frontend/components/navigation/DetectorMenu.tsx

@@ -1,7 +1,9 @@
 'use client'
 
 import React from 'react'
-
+import { useRouter } from 'next/navigation'
+import useNavigationStore from '@/app/store/navigationStore'
+ 
 interface DetectorType {
   detector_id: number
   name: string
@@ -13,7 +15,7 @@ interface DetectorType {
   detector_type: string
   location: string
   floor: number
-  notifications?: Array<{
+  notifications: Array<{
     id: number
     type: string
     message: string
@@ -22,7 +24,7 @@ interface DetectorType {
     priority: string
   }>
 }
-
+ 
 interface DetectorMenuProps {
   detector: DetectorType
   isOpen: boolean
@@ -32,10 +34,14 @@ interface DetectorMenuProps {
   anchor?: { left: number; top: number } | null
 }
 
+// Главный компонент меню детектора
+// Показывает детальную информацию о датчике с возможностью навигации к отчетам и истории
 const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose, getStatusText, compact = false, anchor = null }) => {
+  const router = useRouter()
+  const { setSelectedDetector, currentObject } = useNavigationStore()
   if (!isOpen) return null
 
-  // Получаем самую свежую временную метку из уведомлений
+  // Определение последней временной метки из уведомлений детектора
   const latestTimestamp = (() => {
     const list = detector.notifications ?? []
     if (!Array.isArray(list) || list.length === 0) return null
@@ -48,6 +54,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
     ? latestTimestamp.toLocaleString('ru-RU', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
     : 'Нет данных'
  
+  // Определение типа детектора и его отображаемого названия
   const rawDetectorTypeCode = (detector.detector_type || '').toUpperCase()
   const deriveCodeFromType = (): string => {
     const t = (detector.type || '').toLowerCase()
@@ -58,16 +65,73 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
     return ''
   }
   const effectiveDetectorTypeCode = rawDetectorTypeCode || deriveCodeFromType()
+  
+  // Карта соответствия кодов типов детекторов их русским названиям
   const detectorTypeLabelMap: Record<string, string> = {
     GA: 'Инклинометр',
     PE: 'Тензометр',
     GLE: 'Гидроуровень',
   }
   const displayDetectorTypeLabel = detectorTypeLabelMap[effectiveDetectorTypeCode] || '—'
+
+  // Обработчик клика по кнопке "Отчет" - навигация на страницу отчетов с выбранным детектором
+  const handleReportsClick = () => { 
+    const currentUrl = new URL(window.location.href)
+    const objectId = currentUrl.searchParams.get('objectId') || currentObject.id
+    const objectTitle = currentUrl.searchParams.get('objectTitle') || currentObject.title
+     
+    const detectorData = {
+      ...detector,
+      notifications: detector.notifications || []
+    }
+    setSelectedDetector(detectorData)
+     
+    let reportsUrl = '/reports'
+    const params = new URLSearchParams()
+    
+    if (objectId) params.set('objectId', objectId)
+    if (objectTitle) params.set('objectTitle', objectTitle)
+    
+    if (params.toString()) {
+      reportsUrl += `?${params.toString()}`
+    }
+    
+    router.push(reportsUrl)
+  }
+
+  // Обработчик клика по кнопке "История" - навигация на страницу истории тревог с выбранным детектором
+  const handleHistoryClick = () => { 
+    const currentUrl = new URL(window.location.href)
+    const objectId = currentUrl.searchParams.get('objectId') || currentObject.id
+    const objectTitle = currentUrl.searchParams.get('objectTitle') || currentObject.title
+     
+    const detectorData = {
+      ...detector,
+      notifications: detector.notifications || []
+    }
+    setSelectedDetector(detectorData)
+     
+    let alertsUrl = '/alerts'
+    const params = new URLSearchParams()
+    
+    if (objectId) params.set('objectId', objectId)
+    if (objectTitle) params.set('objectTitle', objectTitle)
+    
+    if (params.toString()) {
+      alertsUrl += `?${params.toString()}`
+    }
+    
+    router.push(alertsUrl)
+  }
+  
+  // Компонент секции деталей детектора
+  // Отображает информацию о датчике в компактном или полном формате
   const DetailsSection: React.FC<{ compact?: boolean }> = ({ compact = false }) => (
     <div className={compact ? 'mt-2 space-y-1' : 'space-y-0 border border-[rgb(30,31,36)] rounded-lg overflow-hidden'}>
       {compact ? (
+        // Компактный режим: 4 строки по 2 колонки с основной информацией
         <>
+          {/* Строка 1: Маркировка и тип детектора */}
           <div className="grid grid-cols-2 gap-2">
             <div>
               <div className="text-[rgb(113,113,122)] text-[11px]">Маркировка по проекту</div>
@@ -78,6 +142,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
               <div className="text-white text-xs truncate">{displayDetectorTypeLabel}</div>
             </div>
           </div>
+          {/* Строка 2: Местоположение и статус */}
           <div className="grid grid-cols-2 gap-2">
             <div>
               <div className="text-[rgb(113,113,122)] text-[11px]">Местоположение</div>
@@ -88,6 +153,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
               <div className="text-white text-xs truncate">{getStatusText(detector.status)}</div>
             </div>
           </div>
+          {/* Строка 3: Временная метка и этаж */}
           <div className="grid grid-cols-2 gap-2">
             <div>
               <div className="text-[rgb(113,113,122)] text-[11px]">Временная метка</div>
@@ -98,6 +164,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
               <div className="text-white text-xs truncate">{detector.floor}</div>
             </div>
           </div>
+          {/* Строка 4: Серийный номер */}
           <div className="grid grid-cols-2 gap-2">
             <div>
               <div className="text-[rgb(113,113,122)] text-[11px]">Серийный номер</div>
@@ -106,7 +173,9 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
           </div>
         </>
       ) : (
+        // Полный режим: 3 строки по 2 колонки с рамками между элементами
         <>
+          {/* Строка 1: Маркировка по проекту и тип детектора */}
           <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>
@@ -117,6 +186,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
               <div className="text-white text-sm">{displayDetectorTypeLabel}</div>
             </div>
           </div>
+          {/* Строка 2: Местоположение и статус */}
           <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>
@@ -127,6 +197,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
               <div className="text-white text-sm">{getStatusText(detector.status)}</div>
             </div>
           </div>
+          {/* Строка 3: Временная метка и серийный номер */}
           <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>
@@ -142,14 +213,15 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
     </div>
   )
 
+  // Компактный режим с якорной позицией (всплывающее окно)
+  // Используется для отображения информации при наведении на детектор в списке
   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="rounded-[10px] bg-black/80 text-white text-xs px-3 py-2 shadow-xl min-w-[300px] max-w-[400px]">
           <div className="flex items-start justify-between gap-3">
             <div className="flex-1">
-              <div className="font-semibold truncate">Датч.{detector.name}</div>
-              <div className="opacity-80">{getStatusText(detector.status)}</div>
+              <div className="font-semibold truncate">{detector.name}</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">
@@ -158,13 +230,13 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
             </button>
           </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">
+            <button onClick={handleReportsClick} 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">
+            <button onClick={handleHistoryClick} 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>
@@ -177,21 +249,25 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
     )
   }
 
+  // Полный режим боковой панели (основной режим)
+  // Отображается как правая панель с полной информацией о детекторе
   return (
     <div className="absolute left-[500px] top-0 bg-[#161824] border-r border-gray-700 з-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">
-            Датч.{detector.name}
+            {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">
+            <button onClick={handleReportsClick} 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">
+            <button onClick={handleHistoryClick} 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>
@@ -200,8 +276,10 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
           </div>
         </div>
 
+        {/* Секция с детальной информацией о детекторе */}
         <DetailsSection />
         
+        {/* Кнопка закрытия панели */}
         <button 
           onClick={onClose}
           className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
@@ -214,5 +292,5 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
     </div>
   )
 }
-
+ 
 export default DetectorMenu

frontend/components/navigation/FloorNavigation.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState } from 'react'
-
+ 
 interface DetectorsDataType {
   detectors: Record<string, DetectorType>
 }
@@ -35,11 +35,12 @@ interface DetectorType {
   }>
 }
 
-const FloorNavigation: React.FC<FloorNavigationProps> = ({ objectId, detectorsData, onDetectorMenuClick, onClose, is3DReady = true }) => {
+const FloorNavigation: React.FC<FloorNavigationProps> = (props) => {
+  const { objectId, detectorsData, onDetectorMenuClick, onClose, is3DReady = true } = props
   const [expandedFloors, setExpandedFloors] = useState<Set<number>>(new Set())
   const [searchTerm, setSearchTerm] = useState('')
-
-  // конвертация детекторов в array и фильтруем по objectId и тексту запроса
+ 
+  // Преобразование detectors в массив и фильтрация по objectId и поисковому запросу
   const detectorsArray = Object.values(detectorsData.detectors) as DetectorType[]
   let filteredDetectors = objectId 
     ? detectorsArray.filter(detector => detector.object === objectId)

frontend/components/navigation/Monitoring.tsx

@@ -1,6 +1,33 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import Image from 'next/image';
 import useNavigationStore from '@/app/store/navigationStore';
+import type { Zone } from '@/app/types';
+
+// Безопасный резолвер src изображения, чтобы избежать ошибок Invalid URL в next/image
+const resolveImageSrc = (src?: string | null): string => {
+  if (!src || typeof src !== 'string') return '/images/test_image.png';
+  let s = src.trim();
+  if (!s) return '/images/test_image.png';
+  s = s.replace(/\\/g, '/');
+  const lower = s.toLowerCase();
+  // Явный плейсхолдер test_image.png маппим на наш статический ресурс
+  if (lower === 'test_image.png' || lower.endsWith('/test_image.png') || lower.includes('/public/images/test_image.png')) {
+    return '/images/test_image.png';
+  }
+  // Если путь содержит public/images (даже абсолютный путь ФС), переводим в относительный путь сайта
+  if (/\/public\/images\//i.test(s)) {
+    const parts = s.split(/\/public\/images\//i);
+    const rel = parts[1] || '';
+    return `/images/${rel}`;
+  }
+  // Абсолютные URL и пути, относительные к сайту
+  if (s.startsWith('http://') || s.startsWith('https://')) return s;
+  if (s.startsWith('/')) return s;
+  // Нормализуем относительные имена ресурсов до путей сайта под /images
+  // Убираем ведущий 'public/', если он присутствует
+  s = s.replace(/^public\//i, '');
+  return s.startsWith('images/') ? `/${s}` : `/images/${s}`;
+}
 
 interface MonitoringProps {
   onClose?: () => void;
@@ -8,49 +35,25 @@ interface MonitoringProps {
 }
 
 const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
-  const [models, setModels] = useState<{ title: string; path: string }[]>([]);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const PREFERRED_MODEL = useNavigationStore((state) => state.PREFERRED_MODEL);
+  const { currentObject, currentZones, zonesLoading, zonesError, loadZones } = useNavigationStore();
 
   const handleSelectModel = useCallback((modelPath: string) => { 
     console.log(`[NavigationPage] Model selected: ${modelPath}`);
     onSelectModel?.(modelPath);
   }, [onSelectModel]);
-
+ 
   useEffect(() => {
-    const fetchModels = async () => {
-      try {
-        setLoadError(null);
-        const res = await fetch('/api/big-models/list');
-        if (!res.ok) {
-          const text = await res.text();
-          throw new Error(text || 'Failed to fetch models list');
-        }
-        const data = await res.json();
-        const items: { name: string; path: string }[] = Array.isArray(data?.models) ? data.models : [];
+    const objId = currentObject?.id;
+    if (!objId) return;
+    loadZones(objId);
+  }, [currentObject?.id, loadZones]);
 
-        const preferredModelName = PREFERRED_MODEL.split('/').pop()?.split('.').slice(0, -1).join('.') || '';
-
-        const formatted = items
-          .map((it) => ({ title: it.name, path: it.path }))
-          .sort((a, b) => {
-            const aName = a.path.split('/').pop()?.split('.').slice(0, -1).join('.') || '';
-            const bName = b.path.split('/').pop()?.split('.').slice(0, -1).join('.') || '';
-            if (aName === preferredModelName) return -1;
-            if (bName === preferredModelName) return 1;
-            return a.title.localeCompare(b.title);
-          });
-
-        setModels(formatted);
-      } catch (error) {
-        console.error('[Monitoring] Error loading models list:', error);
-        setLoadError(error instanceof Error ? error.message : String(error));
-        setModels([]);
-      }
-    };
-
-    fetchModels();
-  }, [PREFERRED_MODEL]);
+  const sortedZones: Zone[] = (currentZones || []).slice().sort((a: Zone, b: Zone) => {
+    const oa = typeof a.order === 'number' ? a.order : 0;
+    const ob = typeof b.order === 'number' ? b.order : 0;
+    if (oa !== ob) return oa - ob;
+    return (a.name || '').localeCompare(b.name || '');
+  });
 
   return (
     <div className="w-full"> 
@@ -68,85 +71,86 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
             </button>
           )}
         </div>
- 
-        {loadError && (
+        {/* UI зон */}
+        {zonesError && (
           <div className="rounded-lg bg-red-600/20 border border-red-600/40 text-red-200 text-xs px-3 py-2">
-            Ошибка загрузки списка моделей: {loadError}
+            Ошибка загрузки зон: {zonesError}
           </div>
         )}
-
-        {models.length > 0 && (
+        {zonesLoading && (
+          <div className="rounded-lg bg-gray-200 text-gray-700 text-xs px-3 py-2 border border-gray-300">
+            Загрузка зон...
+          </div>
+        )}
+        {sortedZones.length > 0 && (
           <>
-            {/* Большая панорамная карточка для приоритетной модели */}
-            {models[0] && (
+            {sortedZones[0] && (
               <button
-                key={`${models[0].path}-panorama`}
+                key={`zone-${sortedZones[0].id}-panorama`}
                 type="button"
-                onClick={() => handleSelectModel(models[0].path)}
+                onClick={() => sortedZones[0].model_path ? handleSelectModel(sortedZones[0].model_path) : null}
                 className="w-full bg-gray-300 rounded-lg h-[200px] flex items-center justify-center hover:bg-gray-400 transition-colors mb-4"
-                title={`Загрузить модель: ${models[0].title}`}
+                title={sortedZones[0].model_path ? `Открыть 3D модель зоны: ${sortedZones[0].name}` : 'Модель зоны отсутствует'}
+                disabled={!sortedZones[0].model_path}
               >
                 <div className="w-full h-full bg-gray-200 rounded flex flex-col items-center justify-center relative">
+                  {/* Всегда рендерим с разрешённой заглушкой */}
                   <Image 
-                    src="/images/test_image.png"
-                    alt={models[0].title}
+                    src={resolveImageSrc(sortedZones[0].image_path)}
+                    alt={sortedZones[0].name || 'Зона'}
                     width={200}
                     height={200}
                     className="max-w-full max-h-full object-contain opacity-50"
                     style={{ height: 'auto' }}
                     onError={(e) => {
                       const target = e.target as HTMLImageElement;
-                      target.style.display = 'none';
+                      target.src = '/images/test_image.png';
                     }}
                   />
                   <div className="absolute bottom-2 left-2 right-2 text-sm text-gray-700 bg-white/80 rounded px-3 py-1 truncate">
-                    {models[0].title}
+                    {sortedZones[0].name}
                   </div>
                 </div>
-
               </button>
             )}
-
-            {/* Сетка маленьких карточек для остальных моделей */}
-            {models.length > 1 && (
+            {sortedZones.length > 1 && (
               <div className="grid grid-cols-2 gap-3">
-                {models.slice(1).map((model, idx) => (
+                {sortedZones.slice(1).map((zone: Zone, idx: number) => (
                   <button
-                    key={`${model.path}-${idx}`}
+                    key={`zone-${zone.id}-${idx}`}
                     type="button"
-                    onClick={() => handleSelectModel(model.path)}
-                className="relative flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center hover:bg-gray-400 transition-colors"
-                title={`Загрузить модель: ${model.title}`}
-              >
+                    onClick={() => zone.model_path ? handleSelectModel(zone.model_path) : null}
+                    className="relative flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center hover:bg-gray-400 transition-colors"
+                    title={zone.model_path ? `Открыть 3D модель зоны: ${zone.name}` : 'Модель зоны отсутствует'}
+                    disabled={!zone.model_path}
+                  >
                     <div className="w-full h-full bg-gray-200 rounded flex flex-col items-center justify-center relative">
                       <Image 
-                        src="/images/test_image.png"
-                        alt={model.title}
+                        src={resolveImageSrc(zone.image_path)}
+                        alt={zone.name || 'Зона'}
                         width={120}
                         height={120}
                         className="max-w-full max-h-full object-contain opacity-50"
                         style={{ height: 'auto' }}
                         onError={(e) => {
                           const target = e.target as HTMLImageElement;
-                          target.style.display = 'none';
+                          target.src = '/images/test_image.png';
                         }}
                       />
                       <div className="absolute bottom-1 left-1 right-1 text-[10px] text-gray-700 bg-white/70 rounded px-2 py-0.5 truncate">
-                        {model.title}
+                        {zone.name}
                       </div>
                     </div>
-
                   </button>
                 ))}
               </div>
             )}
           </>
         )}
-
-        {models.length === 0 && !loadError && (
+        {sortedZones.length === 0 && !zonesError && !zonesLoading && (
           <div className="col-span-2">
             <div className="rounded-lg bg-gray-200 text-gray-700 text-xs px-3 py-2 border border-gray-300">
-              Список моделей пуст. Добавьте файлы в assets/big-models или проверьте API /api/big-models/list.
+              Зоны не найдены для выбранного объекта. Проверьте параметр objectId в API /api/get-zones.
             </div>
           </div>
         )}

frontend/components/notifications/NotificationDetectorInfo.tsx

@@ -66,6 +66,15 @@ const NotificationDetectorInfo: React.FC<NotificationDetectorInfoProps> = ({ det
       default: return 'text-gray-400'
     }
   }
+
+  const getPriorityText = (priority: string) => {
+    switch (priority.toLowerCase()) {
+      case 'high': return 'высокий'
+      case 'medium': return 'средний'
+      case 'low': return 'низкий'
+      default: return priority
+    }
+  }
  
   const latestNotification = detectorInfo.notifications && detectorInfo.notifications.length > 0 
     ? detectorInfo.notifications.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())[0]
@@ -87,7 +96,7 @@ const NotificationDetectorInfo: React.FC<NotificationDetectorInfoProps> = ({ det
       <div className="h-full overflow-auto"> 
         <div className="flex items-center justify-between mb-4">
           <h3 className="text-white text-lg font-medium">
-            Датч.{detectorInfo.name}
+            {detectorInfo.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">
@@ -102,10 +111,18 @@ const NotificationDetectorInfo: React.FC<NotificationDetectorInfoProps> = ({ det
               </svg>
               История
             </button>
+            <button 
+              onClick={onClose}
+              className="text-gray-400 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>
         
-        {/* Табличка с детекторами */}
+        {/* Табличка */}
         <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)]">
@@ -146,7 +163,7 @@ const NotificationDetectorInfo: React.FC<NotificationDetectorInfoProps> = ({ det
               <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(latestNotification.priority)}`}>
-                  {latestNotification.priority}
+                  {getPriorityText(latestNotification.priority)}
                 </div>
               </div>
             </div>
@@ -159,14 +176,6 @@ const NotificationDetectorInfo: React.FC<NotificationDetectorInfoProps> = ({ det
           )}
         </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>
   )

frontend/components/objects/ObjectCard.tsx

@@ -7,7 +7,7 @@ interface ObjectData {
   object_id: string
   title: string
   description: string
-  image: string
+  image: string | null
   location: string
   floors?: number
   area?: string
@@ -45,6 +45,41 @@ const ObjectCard: React.FC<ObjectCardProps> = ({ object, onSelect, isSelected =
     // Логика редактирования объекта
   }
 
+  // Возврат к тестовому изображению, если src отсутствует/некорректен; нормализация относительных путей
+  const resolveImageSrc = (src?: string | null): string => {
+    if (!src || typeof src !== 'string') return '/images/test_image.png'
+    let s = src.trim()
+    if (!s) return '/images/test_image.png'
+
+    // Нормализуем обратные слеши в стиле Windows
+    s = s.replace(/\\/g, '/')
+    const lower = s.toLowerCase()
+
+    // Обрабатываем явный плейсхолдер test_image.png только как заглушку
+    if (lower === 'test_image.png' || lower.endsWith('/test_image.png') || lower.includes('/public/images/test_image.png')) {
+      return '/images/test_image.png'
+    }
+
+    // Абсолютные URL
+    if (s.startsWith('http://') || s.startsWith('https://')) return s
+
+    // Пути, относительные к сайту
+    if (s.startsWith('/')) {
+      // Преобразуем /public/images/... в /images/...
+      if (/\/public\/images\//i.test(s)) {
+        return s.replace(/\/public\/images\//i, '/images/')
+      }
+      return s
+    }
+
+    // Нормализуем относительные имена ресурсов до путей сайта под /images
+    // Убираем ведущий 'public/', если он присутствует
+    s = s.replace(/^public\//i, '')
+    return s.startsWith('images/') ? `/${s}` : `/images/${s}`
+  }
+
+  const imgSrc = resolveImageSrc(object.image)
+
   return (
     <article 
       className={`flex flex-col w-full min-h-[414px] h-[414px] sm:h-auto sm:min-h-[350px] items-start gap-4 p-4 sm:p-6 relative bg-[#161824] rounded-[20px] overflow-hidden cursor-pointer transition-all duration-200 hover:bg-[#1a1d2e] ${
@@ -85,13 +120,13 @@ const ObjectCard: React.FC<ObjectCardProps> = ({ object, onSelect, isSelected =
         <Image
           className="absolute w-full h-full top-0 left-0 object-cover"
           alt={object.title}
-          src={object.image}
+          src={imgSrc}
           fill
           sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
           onError={(e) => {
             // Заглушка при ошибке загрузки изображения
             const target = e.target as HTMLImageElement
-            target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUyIiBoZWlnaHQ9IjMwMiIgdmlld0JveD0iMCAwIDQ1MiAzMDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI0NTIiIGhlaWdodD0iMzAyIiBmaWxsPSIjRjFGMUYxIi8+CjxwYXRoIGQ9Ik0yMjYgMTUxTDI0NiAxMzFMMjY2IDE1MUwyNDYgMTcxTDIyNiAxNTFaIiBmaWxsPSIjOTk5OTk5Ii8+Cjx0ZXh0IHg9IjIyNiIgeT0iMTkwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjOTk5OTk5IiBmb250LXNpemU9IjE0Ij7QntCx0YrQtdC60YI8L3RleHQ+Cjwvc3ZnPgo='
+            target.src = '/images/test_image.png'
           }}
         />
       </div>

frontend/components/reports/ReportsList.tsx

@@ -43,13 +43,12 @@ interface DetectorsDataType {
 interface ReportsListProps {
   objectId?: string;
   detectorsData: DetectorsDataType;
+  initialSearchTerm?: string;
 }
 
-const ReportsList: React.FC<ReportsListProps> = ({ detectorsData }) => {
-  const [searchTerm, setSearchTerm] = useState('');
+const ReportsList: React.FC<ReportsListProps> = ({ detectorsData, initialSearchTerm = '' }) => {
+  const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
   const [statusFilter, setStatusFilter] = useState('all');
-  const [priorityFilter] = useState('all');
-  const [acknowledgedFilter] = useState('all');
 
   const allNotifications = useMemo(() => {
     const notifications: NotificationType[] = [];
@@ -70,20 +69,12 @@ const ReportsList: React.FC<ReportsListProps> = ({ detectorsData }) => {
   }, [detectorsData]);
 
   const filteredDetectors = useMemo(() => {
-    return allNotifications.filter(notification => {
-      const matchesSearch = notification.detector_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                           notification.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                           notification.message.toLowerCase().includes(searchTerm.toLowerCase());
-      
-      const matchesStatus = statusFilter === 'all' || notification.type === statusFilter;
-      const matchesPriority = priorityFilter === 'all' || notification.priority === priorityFilter;
-      const matchesAcknowledged = acknowledgedFilter === 'all' || 
-                                 (acknowledgedFilter === 'acknowledged' && notification.acknowledged) ||
-                                 (acknowledgedFilter === 'unacknowledged' && !notification.acknowledged);
-      
-      return matchesSearch && matchesStatus && matchesPriority && matchesAcknowledged;
+    return allNotifications.filter(notification => { 
+      const matchesSearch = searchTerm === '' || notification.detector_id.toString() === searchTerm;
+
+      return matchesSearch;
     });
-  }, [allNotifications, searchTerm, statusFilter, priorityFilter, acknowledgedFilter]);
+  }, [allNotifications, searchTerm]);
 
   const getStatusColor = (type: string) => {
     switch (type) {
@@ -168,7 +159,7 @@ const ReportsList: React.FC<ReportsListProps> = ({ detectorsData }) => {
           <div className="relative">
             <input
               type="text"
-              placeholder="Поиск детекторов..."
+              placeholder="Поиск по ID детектора..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               className="bg-[#161824] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none w-64"

frontend/services/navigationService.ts

@@ -37,7 +37,7 @@ export class NavigationService {
   }
    
   navigateToRoute(route: MainRoutes) {  
-    // Убираем суб-меню перед переходом на другую страницу
+    // Убираем подменю перед переходом на другую страницу
     if (route !== MainRoutes.NAVIGATION) {
       this.navigationStore.setCurrentSubmenu(null)
     }
@@ -71,7 +71,10 @@ export class NavigationService {
  
   selectObjectAndGoToDashboard(objectId: string, objectTitle: string) {
     this.navigationStore.setCurrentObject(objectId, objectTitle)
-    this.navigateToRoute(MainRoutes.DASHBOARD)
+    // Проверяем, что подменю закрыто перед навигацией
+    this.navigationStore.setCurrentSubmenu(null)
+    const url = `${MainRoutes.DASHBOARD}?objectId=${encodeURIComponent(objectId)}&objectTitle=${encodeURIComponent(objectTitle)}`
+    this.router.push(url)
   }
 }