AEB-71: Added 3D navigation in monitoring zones

frontend/components/navigation/DetectorMenu.tsx

@@ -10,8 +10,17 @@ interface DetectorType {
   status: string
   checked: boolean
   type: string
+  detector_type: string
   location: string
   floor: number
+  notifications?: Array<{
+    id: number
+    type: string
+    message: string
+    timestamp: string
+    acknowledged: boolean
+    priority: string
+  }>
 }
 
 interface DetectorMenuProps {
@@ -26,6 +35,35 @@ interface DetectorMenuProps {
 const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose, getStatusText, compact = false, anchor = null }) => {
   if (!isOpen) return null
 
+  // Получаем самую свежую временную метку из уведомлений
+  const latestTimestamp = (() => {
+    const list = detector.notifications ?? []
+    if (!Array.isArray(list) || list.length === 0) return null
+    const dates = list.map(n => new Date(n.timestamp)).filter(d => !isNaN(d.getTime()))
+    if (dates.length === 0) return null
+    dates.sort((a, b) => b.getTime() - a.getTime())
+    return dates[0]
+  })()
+  const formattedTimestamp = latestTimestamp
+    ? 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()
+    if (!t) return ''
+    if (t.includes('инклинометр')) return 'GA'
+    if (t.includes('тензометр')) return 'PE'
+    if (t.includes('гидроуров')) return 'GLE'
+    return ''
+  }
+  const effectiveDetectorTypeCode = rawDetectorTypeCode || deriveCodeFromType()
+  const detectorTypeLabelMap: Record<string, string> = {
+    GA: 'Инклинометр',
+    PE: 'Тензометр',
+    GLE: 'Гидроуровень',
+  }
+  const displayDetectorTypeLabel = detectorTypeLabelMap[effectiveDetectorTypeCode] || '—'
   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 ? (
@@ -37,7 +75,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
             </div>
             <div>
               <div className="text-[rgb(113,113,122)] text-[11px]">Тип детектора</div>
-              <div className="text-white text-xs truncate">{detector.type}</div>
+              <div className="text-white text-xs truncate">{displayDetectorTypeLabel}</div>
             </div>
           </div>
           <div className="grid grid-cols-2 gap-2">
@@ -53,13 +91,19 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
           <div className="grid grid-cols-2 gap-2">
             <div>
               <div className="text-[rgb(113,113,122)] text-[11px]">Временная метка</div>
-              <div className="text-white text-xs truncate">Сегодня, 14:30</div>
+              <div className="text-white text-xs truncate">{formattedTimestamp}</div>
             </div>
             <div>
               <div className="text-[rgb(113,113,122)] text-[11px]">Этаж</div>
               <div className="text-white text-xs truncate">{detector.floor}</div>
             </div>
           </div>
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Серийный номер</div>
+              <div className="text-white text-xs truncate">{detector.serial_number}</div>
+            </div>
+          </div>
         </>
       ) : (
         <>
@@ -70,7 +114,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
             </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">{detector.type}</div>
+              <div className="text-white text-sm">{displayDetectorTypeLabel}</div>
             </div>
           </div>
           <div className="flex border-t border-[rgb(30,31,36)]">
@@ -86,10 +130,11 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
           <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">Сегодня, 14:30</div>
+              <div className="text-white text-sm">{formattedTimestamp}</div>
             </div>
             <div className="flex-1 p-4">
-              <div className="text-white text-sm text-right">Вчера</div>
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Серийный номер</div>
+              <div className="text-white text-sm">{detector.serial_number}</div>
             </div>
           </div>
         </>
@@ -121,7 +166,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
             </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" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4л3 3м6-3а9 9 0 11-18 0 9 9 0 0118 0з" />
               </svg>
               История
             </button>
@@ -133,7 +178,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
   }
 
   return (
-    <div className="absolute left-[500px] top-0 bg-[#161824] border-r border-gray-700 z-30 w-[454px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
+    <div className="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">
@@ -142,13 +187,13 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
           <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" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6м2 5H7а2 2 0 01-2-2V5а2 2 0 012-2h5.586а1 1 0 01.707.293л5.414 5.414а1 1 0 01.293.707V19а2 2 0 01-2 2з" />
               </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" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4л3 3м6-3а9 9 0 11-18 0 9 9 0 0118 0з" />
               </svg>
               История
             </button>
@@ -162,7 +207,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, 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" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6л12 12" />
           </svg>
         </button>
       </div>