Изменения в логике получения данных по датчикам из бэкенда, изменение тултипа сенсора для исправления получения данных на реальные

frontend/components/model/ModelViewer.tsx

@@ -968,4 +968,4 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
   )
 }
 
-export default ModelViewer
+export default React.memo(ModelViewer)

frontend/components/model/ModelViewer.tsx — копия 3

@@ -20,6 +20,7 @@ import {
   PointerEventTypes,
   PointerInfo,
   Matrix,
+  Ray,
 } from '@babylonjs/core'
 import '@babylonjs/loaders'
  
@@ -68,6 +69,8 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
   onSensorPick,
   highlightAllSensors,
   sensorStatusMap,
+  showStats = false,
+  onToggleStats,
 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const engineRef = useRef<Nullable<Engine>>(null)
@@ -340,7 +343,8 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
 
     let engine: Engine
     try {
-      engine = new Engine(canvas, true, { stencil: true })
+      // Оптимизация: используем FXAA вместо MSAA для снижения нагрузки на GPU
+      engine = new Engine(canvas, false, { stencil: true }) // false = отключаем MSAA
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : String(error)
       const message = `WebGL недоступен: ${errorMessage}`
@@ -362,6 +366,9 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
     sceneRef.current = scene
 
     scene.clearColor = new Color4(0.1, 0.1, 0.15, 1)
+    
+    // Оптимизация: включаем FXAA (более легковесное сглаживание)
+    scene.imageProcessingConfiguration.fxaaEnabled = true
 
     const camera = new ArcRotateCamera('camera', 0, Math.PI / 3, 20, Vector3.Zero(), scene)
     camera.attachControl(canvas, true)
@@ -689,16 +696,65 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
         const maxDimension = Math.max(size.x, size.y, size.z)
         const targetRadius = Math.max(camera.lowerRadiusLimit ?? 2, maxDimension * 1.5)
 
+        // Простое позиционирование камеры - всегда поворачиваемся к датчику
+        console.log('[ModelViewer] Calculating camera direction to sensor')
+        
+        // Вычисляем направление от текущей позиции камеры к датчику
+        const directionToSensor = center.subtract(camera.position).normalize()
+        
+        // Преобразуем в сферические координаты
+        // alpha - горизонтальный угол (вокруг оси Y)
+        let targetAlpha = Math.atan2(directionToSensor.x, directionToSensor.z)
+        
+        // beta - вертикальный угол (от вертикали)
+        // Используем оптимальный угол 60° для обзора
+        let targetBeta = Math.PI / 3 // 60°
+        
+        console.log('[ModelViewer] Calculated camera direction:', { 
+          alpha: (targetAlpha * 180 / Math.PI).toFixed(1) + '°', 
+          beta: (targetBeta * 180 / Math.PI).toFixed(1) + '°',
+          sensorPosition: { x: center.x.toFixed(2), y: center.y.toFixed(2), z: center.z.toFixed(2) },
+          cameraPosition: { x: camera.position.x.toFixed(2), y: camera.position.y.toFixed(2), z: camera.position.z.toFixed(2) }
+        })
+        
+        // Нормализуем alpha в диапазон [-PI, PI]
+        while (targetAlpha > Math.PI) targetAlpha -= 2 * Math.PI
+        while (targetAlpha < -Math.PI) targetAlpha += 2 * Math.PI
+        
+        // Ограничиваем beta в разумных пределах
+        targetBeta = Math.max(0.1, Math.min(Math.PI - 0.1, targetBeta))
+
         scene.stopAnimation(camera)
 
+        // Логирование перед анимацией
+        console.log('[ModelViewer] Starting camera animation:', {
+          sensorId,
+          from: {
+            target: { x: camera.target.x.toFixed(2), y: camera.target.y.toFixed(2), z: camera.target.z.toFixed(2) },
+            radius: camera.radius.toFixed(2),
+            alpha: (camera.alpha * 180 / Math.PI).toFixed(1) + '°',
+            beta: (camera.beta * 180 / Math.PI).toFixed(1) + '°'
+          },
+          to: {
+            target: { x: center.x.toFixed(2), y: center.y.toFixed(2), z: center.z.toFixed(2) },
+            radius: targetRadius.toFixed(2),
+            alpha: (targetAlpha * 180 / Math.PI).toFixed(1) + '°',
+            beta: (targetBeta * 180 / Math.PI).toFixed(1) + '°'
+          },
+          alphaChange: ((targetAlpha - camera.alpha) * 180 / Math.PI).toFixed(1) + '°',
+          betaChange: ((targetBeta - camera.beta) * 180 / Math.PI).toFixed(1) + '°'
+        })
+
         const ease = new CubicEase()
         ease.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT)
         const frameRate = 60
-        const durationMs = 600
+        const durationMs = 800
         const totalFrames = Math.round((durationMs / 1000) * frameRate)
 
         Animation.CreateAndStartAnimation('camTarget', camera, 'target', frameRate, totalFrames, camera.target.clone(), center.clone(), Animation.ANIMATIONLOOPMODE_CONSTANT, ease)
         Animation.CreateAndStartAnimation('camRadius', camera, 'radius', frameRate, totalFrames, camera.radius, targetRadius, Animation.ANIMATIONLOOPMODE_CONSTANT, ease)
+        Animation.CreateAndStartAnimation('camAlpha', camera, 'alpha', frameRate, totalFrames, camera.alpha, targetAlpha, Animation.ANIMATIONLOOPMODE_CONSTANT, ease)
+        Animation.CreateAndStartAnimation('camBeta', camera, 'beta', frameRate, totalFrames, camera.beta, targetBeta, Animation.ANIMATIONLOOPMODE_CONSTANT, ease)
 
         applyHighlightToMeshes(
           highlightLayerRef.current,
@@ -866,6 +922,7 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
             onToggleSensorHighlights={useNavigationStore.getState().toggleSensorHighlights}
             sensorHighlightsActive={useNavigationStore.getState().showSensorHighlights}
           />
+
         </>
       )}
       {/* UPDATED: Interactive overlay circles with hover effects */}

frontend/components/model/ModelViewer.tsx — копия 4

@@ -56,8 +56,6 @@ export interface ModelViewerProps {
   onSensorPick?: (sensorId: string | null) => void
   highlightAllSensors?: boolean
   sensorStatusMap?: Record<string, string>
-  showStats?: boolean
-  onToggleStats?: () => void
 }
 
 const ModelViewer: React.FC<ModelViewerProps> = ({
@@ -923,49 +921,8 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
             panActive={panActive}
             onToggleSensorHighlights={useNavigationStore.getState().toggleSensorHighlights}
             sensorHighlightsActive={useNavigationStore.getState().showSensorHighlights}
-            onToggleStats={onToggleStats}
-            statsActive={showStats}
           />
-          {/* Блок статистики датчиков */}
-          {showStats && sensorStatusMap && (
-            <div className="absolute top-24 left-8 z-[60] pointer-events-none">
-              <div className="bg-[#161824] rounded-[15px] border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.3)] py-3 px-4">
-                <div className="flex flex-col gap-2 text-gray-300">
-                  {/* Всего датчиков */}
-                  <div className="flex items-center justify-between gap-4">
-                    <span className="text-xs">Всего:</span>
-                    <span className="text-sm font-semibold">{Object.keys(sensorStatusMap).length}</span>
-                  </div>
-                  
-                  <div className="h-px bg-white/10"></div>
-                  
-                  {/* Нормальный */}
-                  <div className="flex items-center justify-between gap-4">
-                    <span className="text-xs">Норма:</span>
-                    <span className="text-sm font-semibold">
-                      {Object.values(sensorStatusMap).filter(s => s === '#4ade80' || s.toLowerCase() === 'normal').length}
-                    </span>
-                  </div>
-                  
-                  {/* Предупреждение */}
-                  <div className="flex items-center justify-between gap-4">
-                    <span className="text-xs">Предупр.:</span>
-                    <span className="text-sm font-semibold">
-                      {Object.values(sensorStatusMap).filter(s => s === '#fb923c' || s.toLowerCase() === 'warning').length}
-                    </span>
-                  </div>
-                  
-                  {/* Критический */}
-                  <div className="flex items-center justify-between gap-4">
-                    <span className="text-xs">Критич.:</span>
-                    <span className="text-sm font-semibold">
-                      {Object.values(sensorStatusMap).filter(s => s === '#ef4444' || s.toLowerCase() === 'critical').length}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
+
         </>
       )}
       {/* UPDATED: Interactive overlay circles with hover effects */}

frontend/components/navigation/DetectorMenu.tsx

@@ -55,13 +55,69 @@ 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' })
     : 'Нет данных'
 
-  // Данные для графика за последние 3 дня (мок данные)
-  const chartData: { timestamp: string; value: number }[] = [
-    { timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), value: 75 },
-    { timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), value: 82 },
-    { timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), value: 78 },
-    { timestamp: new Date().toISOString(), value: 85 },
-  ]
+  // Данные для графика за последний месяц из реальных notifications
+  const chartData = React.useMemo(() => {
+    const notifications = detector.notifications ?? []
+    const DAYS_COUNT = 30 // Последний месяц
+    
+    if (notifications.length === 0) {
+      // Если нет уведомлений, возвращаем пустой график
+      return Array.from({ length: DAYS_COUNT }, (_, i) => ({
+        timestamp: new Date(Date.now() - (DAYS_COUNT - 1 - i) * 24 * 60 * 60 * 1000).toISOString(),
+        critical: 0,
+        warning: 0,
+      }))
+    }
+
+    // Группируем уведомления по дням за последний месяц
+    const now = new Date()
+    const monthAgo = new Date(now.getTime() - DAYS_COUNT * 24 * 60 * 60 * 1000)
+    
+    // Создаём карту: дата -> { critical: count, warning: count }
+    const dayMap: Record<string, { critical: number; warning: number }> = {}
+    
+    // Инициализируем все дни нулями
+    for (let i = 0; i < DAYS_COUNT; i++) {
+      const date = new Date(monthAgo.getTime() + i * 24 * 60 * 60 * 1000)
+      const dateKey = date.toISOString().split('T')[0]
+      dayMap[dateKey] = { critical: 0, warning: 0 }
+    }
+    
+    // Подсчитываем уведомления по дням
+    notifications.forEach(notification => {
+      // Детальное логирование для GLE-1
+      if (detector.serial_number === 'GLE-1') {
+        console.log('[DetectorMenu] Full notification object for GLE-1:', JSON.stringify(notification, null, 2))
+      }
+      
+      const notifDate = new Date(notification.timestamp)
+      if (notifDate >= monthAgo && notifDate <= now) {
+        const dateKey = notifDate.toISOString().split('T')[0]
+        if (dayMap[dateKey]) {
+          const notifType = String(notification.type || '').toLowerCase()
+          
+          if (notifType === 'critical') {
+            dayMap[dateKey].critical++
+          } else if (notifType === 'warning') {
+            dayMap[dateKey].warning++
+          } else {
+            // Если тип не распознан, логируем
+            console.warn('[DetectorMenu] Unknown notification type:', notification.type, 'Full notification:', JSON.stringify(notification, null, 2))
+          }
+        }
+      }
+    })
+    
+    // Преобразуем в массив для графика
+    return Object.keys(dayMap)
+      .sort()
+      .map(dateKey => ({
+        timestamp: dateKey,
+        label: new Date(dateKey).toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' }),
+        critical: dayMap[dateKey].critical,
+        warning: dayMap[dateKey].warning,
+      }))
+  }, [detector.notifications])
  
   // Определение типа детектора и его отображаемого названия
   const rawDetectorTypeCode = (detector.detector_type || '').toUpperCase()
@@ -262,9 +318,9 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
           </div>
           <DetailsSection compact={true} />
           
-          {/* График за последние 3 дня */}
+          {/* График за последний месяц */}
           <div className="mt-3">
-            <div className="text-[rgb(113,113,122)] text-[11px] mb-2">График за 3 дня</div>
+            <div className="text-[rgb(113,113,122)] text-[11px] mb-2">График за месяц</div>
             <div className="min-h-[100px]">
               <AreaChart data={chartData} />
             </div>
@@ -304,9 +360,9 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
         {/* Секция с детальной информацией о детекторе */}
         <DetailsSection />
         
-        {/* График за последние 3 дня */}
+        {/* График за последний месяц */}
         <div className="mt-6">
-          <h4 className="text-white text-base font-medium mb-4">График за последние 3 дня</h4>
+          <h4 className="text-white text-base font-medium mb-4">График за последний месяц</h4>
           <div className="min-h-[200px] bg-[rgb(22,24,36)] rounded-lg p-4">
             <AreaChart data={chartData} />
           </div>

frontend/components/navigation/DetectorMenu.tsx — копия 3

@@ -0,0 +1,329 @@
+'use client'
+
+import React from 'react'
+import { useRouter } from 'next/navigation'
+import useNavigationStore from '@/app/store/navigationStore'
+import AreaChart from '../dashboard/AreaChart'
+ 
+interface DetectorType {
+  detector_id: number
+  name: string
+  serial_number: string
+  object: string
+  status: string
+  checked: boolean
+  type: string
+  detector_type: string
+  location: string
+  floor: number
+  notifications: Array<{
+    id: number
+    type: string
+    message: string
+    timestamp: string
+    acknowledged: boolean
+    priority: string
+  }>
+}
+ 
+interface DetectorMenuProps {
+  detector: DetectorType
+  isOpen: boolean
+  onClose: () => void
+  getStatusText: (status: string) => string
+  compact?: boolean
+  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
+    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' })
+    : 'Нет данных'
+
+  // Данные для графика за последние 3 дня (мок данные)
+  const chartData: { timestamp: string; value: number }[] = [
+    { timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), value: 75 },
+    { timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), value: 82 },
+    { timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), value: 78 },
+    { timestamp: new Date().toISOString(), value: 85 },
+  ]
+ 
+  // Определение типа детектора и его отображаемого названия
+  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 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>
+              <div className="text-white text-xs truncate">{detector.name}</div>
+            </div>
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Тип детектора</div>
+              <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>
+              <div className="text-white text-xs truncate">{detector.location}</div>
+            </div>
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Статус</div>
+              <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>
+              <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>
+          {/* Строка 4: Серийный номер */}
+          <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>
+        </>
+      ) : (
+        // Полный режим: 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>
+              <div className="text-white text-sm">{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-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>
+              <div className="text-white text-sm">{detector.location}</div>
+            </div>
+            <div className="flex-1 p-4">
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Статус</div>
+              <div className="text-white text-sm">{getStatusText(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>
+              <div className="text-white text-sm">{formattedTimestamp}</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">{detector.serial_number}</div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+
+  // Компактный режим с якорной позицией (всплывающее окно)
+  // Используется для отображения информации при наведении на детектор в списке
+  if (compact && anchor) {
+    // Проверяем границы экрана и корректируем позицию
+    const tooltipHeight = 450 // Примерная высота толтипа с графиком
+    const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 800
+    const bottomOverflow = anchor.top + tooltipHeight - viewportHeight
+    
+    // Если толтип выходит за нижнюю границу, сдвигаем вверх
+    const adjustedTop = bottomOverflow > 0 ? anchor.top - bottomOverflow - 20 : anchor.top
+    
+    return (
+      <div className="absolute z-40" style={{ left: anchor.left, top: adjustedTop }}>
+        <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>
+            <button onClick={onClose} className="text-gray-300 hover:text-white transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div className="mt-2 grid grid-cols-2 gap-2">
+            <button onClick={handleReportsClick} className="bg-[#3193f5] hover:bg-[#2563eb] 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 onClick={handleHistoryClick} className="bg-[#3193f5] hover:bg-[#2563eb] 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>
+          <DetailsSection compact={true} />
+          
+          {/* График за последние 3 дня */}
+          <div className="mt-3">
+            <div className="text-[rgb(113,113,122)] text-[11px] mb-2">График за 3 дня</div>
+            <div className="min-h-[100px]">
+              <AreaChart data={chartData} />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Полный режим боковой панели (основной режим)
+  // Отображается как правая панель с полной информацией о детекторе
+  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}
+          </h3>
+          {/* Кнопки действий: Отчет и История */}
+          <div className="flex items-center gap-2">
+            <button onClick={handleReportsClick} className="bg-[#3193f5] hover:bg-[#2563eb] 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 onClick={handleHistoryClick} className="bg-[#3193f5] hover:bg-[#2563eb] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              История
+            </button>
+          </div>
+        </div>
+
+        {/* Секция с детальной информацией о детекторе */}
+        <DetailsSection />
+        
+        {/* График за последние 3 дня */}
+        <div className="mt-6">
+          <h4 className="text-white text-base font-medium mb-4">График за последние 3 дня</h4>
+          <div className="min-h-[200px] bg-[rgb(22,24,36)] rounded-lg p-4">
+            <AreaChart data={chartData} />
+          </div>
+        </div>
+        
+        {/* Кнопка закрытия панели */}
+        <button 
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6л12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}
+ 
+export default DetectorMenu

frontend/components/navigation/DetectorMenu.tsx — копия 4

@@ -0,0 +1,329 @@
+'use client'
+
+import React from 'react'
+import { useRouter } from 'next/navigation'
+import useNavigationStore from '@/app/store/navigationStore'
+import AreaChart from '../dashboard/AreaChart'
+ 
+interface DetectorType {
+  detector_id: number
+  name: string
+  serial_number: string
+  object: string
+  status: string
+  checked: boolean
+  type: string
+  detector_type: string
+  location: string
+  floor: number
+  notifications: Array<{
+    id: number
+    type: string
+    message: string
+    timestamp: string
+    acknowledged: boolean
+    priority: string
+  }>
+}
+ 
+interface DetectorMenuProps {
+  detector: DetectorType
+  isOpen: boolean
+  onClose: () => void
+  getStatusText: (status: string) => string
+  compact?: boolean
+  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
+    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' })
+    : 'Нет данных'
+
+  // Данные для графика за последние 3 дня (мок данные)
+  const chartData = [
+    { timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), critical: 75, warning: 0 },
+    { timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), critical: 82, warning: 0 },
+    { timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), critical: 78, warning: 0 },
+    { timestamp: new Date().toISOString(), critical: 85, warning: 0 },
+  ]
+ 
+  // Определение типа детектора и его отображаемого названия
+  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 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>
+              <div className="text-white text-xs truncate">{detector.name}</div>
+            </div>
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Тип детектора</div>
+              <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>
+              <div className="text-white text-xs truncate">{detector.location}</div>
+            </div>
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Статус</div>
+              <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>
+              <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>
+          {/* Строка 4: Серийный номер */}
+          <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>
+        </>
+      ) : (
+        // Полный режим: 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>
+              <div className="text-white text-sm">{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-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>
+              <div className="text-white text-sm">{detector.location}</div>
+            </div>
+            <div className="flex-1 p-4">
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Статус</div>
+              <div className="text-white text-sm">{getStatusText(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>
+              <div className="text-white text-sm">{formattedTimestamp}</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">{detector.serial_number}</div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+
+  // Компактный режим с якорной позицией (всплывающее окно)
+  // Используется для отображения информации при наведении на детектор в списке
+  if (compact && anchor) {
+    // Проверяем границы экрана и корректируем позицию
+    const tooltipHeight = 450 // Примерная высота толтипа с графиком
+    const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 800
+    const bottomOverflow = anchor.top + tooltipHeight - viewportHeight
+    
+    // Если толтип выходит за нижнюю границу, сдвигаем вверх
+    const adjustedTop = bottomOverflow > 0 ? anchor.top - bottomOverflow - 20 : anchor.top
+    
+    return (
+      <div className="absolute z-40" style={{ left: anchor.left, top: adjustedTop }}>
+        <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>
+            <button onClick={onClose} className="text-gray-300 hover:text-white transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div className="mt-2 grid grid-cols-2 gap-2">
+            <button onClick={handleReportsClick} className="bg-[#3193f5] hover:bg-[#2563eb] 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 onClick={handleHistoryClick} className="bg-[#3193f5] hover:bg-[#2563eb] 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>
+          <DetailsSection compact={true} />
+          
+          {/* График за последние 3 дня */}
+          <div className="mt-3">
+            <div className="text-[rgb(113,113,122)] text-[11px] mb-2">График за 3 дня</div>
+            <div className="min-h-[100px]">
+              <AreaChart data={chartData} />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Полный режим боковой панели (основной режим)
+  // Отображается как правая панель с полной информацией о детекторе
+  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}
+          </h3>
+          {/* Кнопки действий: Отчет и История */}
+          <div className="flex items-center gap-2">
+            <button onClick={handleReportsClick} className="bg-[#3193f5] hover:bg-[#2563eb] 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 onClick={handleHistoryClick} className="bg-[#3193f5] hover:bg-[#2563eb] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              История
+            </button>
+          </div>
+        </div>
+
+        {/* Секция с детальной информацией о детекторе */}
+        <DetailsSection />
+        
+        {/* График за последние 3 дня */}
+        <div className="mt-6">
+          <h4 className="text-white text-base font-medium mb-4">График за последние 3 дня</h4>
+          <div className="min-h-[200px] bg-[rgb(22,24,36)] rounded-lg p-4">
+            <AreaChart data={chartData} />
+          </div>
+        </div>
+        
+        {/* Кнопка закрытия панели */}
+        <button 
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6л12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}
+ 
+export default DetectorMenu

frontend/components/navigation/DetectorMenu.tsx — копия 5

@@ -0,0 +1,381 @@
+'use client'
+
+import React from 'react'
+import { useRouter } from 'next/navigation'
+import useNavigationStore from '@/app/store/navigationStore'
+import AreaChart from '../dashboard/AreaChart'
+ 
+interface DetectorType {
+  detector_id: number
+  name: string
+  serial_number: string
+  object: string
+  status: string
+  checked: boolean
+  type: string
+  detector_type: string
+  location: string
+  floor: number
+  notifications: Array<{
+    id: number
+    type: string
+    message: string
+    timestamp: string
+    acknowledged: boolean
+    priority: string
+  }>
+}
+ 
+interface DetectorMenuProps {
+  detector: DetectorType
+  isOpen: boolean
+  onClose: () => void
+  getStatusText: (status: string) => string
+  compact?: boolean
+  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
+    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' })
+    : 'Нет данных'
+
+  // Данные для графика за последний месяц из реальных notifications
+  const chartData = React.useMemo(() => {
+    const notifications = detector.notifications ?? []
+    const DAYS_COUNT = 30 // Последний месяц
+    
+    if (notifications.length === 0) {
+      // Если нет уведомлений, возвращаем пустой график
+      return Array.from({ length: DAYS_COUNT }, (_, i) => ({
+        timestamp: new Date(Date.now() - (DAYS_COUNT - 1 - i) * 24 * 60 * 60 * 1000).toISOString(),
+        critical: 0,
+        warning: 0,
+      }))
+    }
+
+    // Группируем уведомления по дням за последний месяц
+    const now = new Date()
+    const monthAgo = new Date(now.getTime() - DAYS_COUNT * 24 * 60 * 60 * 1000)
+    
+    // Создаём карту: дата -> { critical: count, warning: count }
+    const dayMap: Record<string, { critical: number; warning: number }> = {}
+    
+    // Инициализируем все дни нулями
+    for (let i = 0; i < DAYS_COUNT; i++) {
+      const date = new Date(monthAgo.getTime() + i * 24 * 60 * 60 * 1000)
+      const dateKey = date.toISOString().split('T')[0]
+      dayMap[dateKey] = { critical: 0, warning: 0 }
+    }
+    
+    // Подсчитываем уведомления по дням
+    notifications.forEach(notification => {
+      const notifDate = new Date(notification.timestamp)
+      if (notifDate >= monthAgo && notifDate <= now) {
+        const dateKey = notifDate.toISOString().split('T')[0]
+        if (dayMap[dateKey]) {
+          const notifType = String(notification.type || '').toLowerCase()
+          console.log('[DetectorMenu] Notification type:', notifType, 'for sensor:', detector.serial_number)
+          
+          if (notifType === 'critical') {
+            dayMap[dateKey].critical++
+          } else if (notifType === 'warning') {
+            dayMap[dateKey].warning++
+          } else {
+            // Если тип не распознан, логируем
+            console.warn('[DetectorMenu] Unknown notification type:', notification.type, 'notification:', notification)
+          }
+        }
+      }
+    })
+    
+    // Преобразуем в массив для графика
+    return Object.keys(dayMap)
+      .sort()
+      .map(dateKey => ({
+        timestamp: dateKey,
+        label: new Date(dateKey).toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' }),
+        critical: dayMap[dateKey].critical,
+        warning: dayMap[dateKey].warning,
+      }))
+  }, [detector.notifications])
+ 
+  // Определение типа детектора и его отображаемого названия
+  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 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>
+              <div className="text-white text-xs truncate">{detector.name}</div>
+            </div>
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Тип детектора</div>
+              <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>
+              <div className="text-white text-xs truncate">{detector.location}</div>
+            </div>
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Статус</div>
+              <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>
+              <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>
+          {/* Строка 4: Серийный номер */}
+          <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>
+        </>
+      ) : (
+        // Полный режим: 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>
+              <div className="text-white text-sm">{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-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>
+              <div className="text-white text-sm">{detector.location}</div>
+            </div>
+            <div className="flex-1 p-4">
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Статус</div>
+              <div className="text-white text-sm">{getStatusText(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>
+              <div className="text-white text-sm">{formattedTimestamp}</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">{detector.serial_number}</div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+
+  // Компактный режим с якорной позицией (всплывающее окно)
+  // Используется для отображения информации при наведении на детектор в списке
+  if (compact && anchor) {
+    // Проверяем границы экрана и корректируем позицию
+    const tooltipHeight = 450 // Примерная высота толтипа с графиком
+    const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 800
+    const bottomOverflow = anchor.top + tooltipHeight - viewportHeight
+    
+    // Если толтип выходит за нижнюю границу, сдвигаем вверх
+    const adjustedTop = bottomOverflow > 0 ? anchor.top - bottomOverflow - 20 : anchor.top
+    
+    return (
+      <div className="absolute z-40" style={{ left: anchor.left, top: adjustedTop }}>
+        <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>
+            <button onClick={onClose} className="text-gray-300 hover:text-white transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div className="mt-2 grid grid-cols-2 gap-2">
+            <button onClick={handleReportsClick} className="bg-[#3193f5] hover:bg-[#2563eb] 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 onClick={handleHistoryClick} className="bg-[#3193f5] hover:bg-[#2563eb] 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>
+          <DetailsSection compact={true} />
+          
+          {/* График за последний месяц */}
+          <div className="mt-3">
+            <div className="text-[rgb(113,113,122)] text-[11px] mb-2">График за месяц</div>
+            <div className="min-h-[100px]">
+              <AreaChart data={chartData} />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Полный режим боковой панели (основной режим)
+  // Отображается как правая панель с полной информацией о детекторе
+  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}
+          </h3>
+          {/* Кнопки действий: Отчет и История */}
+          <div className="flex items-center gap-2">
+            <button onClick={handleReportsClick} className="bg-[#3193f5] hover:bg-[#2563eb] 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 onClick={handleHistoryClick} className="bg-[#3193f5] hover:bg-[#2563eb] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              История
+            </button>
+          </div>
+        </div>
+
+        {/* Секция с детальной информацией о детекторе */}
+        <DetailsSection />
+        
+        {/* График за последний месяц */}
+        <div className="mt-6">
+          <h4 className="text-white text-base font-medium mb-4">График за последний месяц</h4>
+          <div className="min-h-[200px] bg-[rgb(22,24,36)] rounded-lg p-4">
+            <AreaChart data={chartData} />
+          </div>
+        </div>
+        
+        {/* Кнопка закрытия панели */}
+        <button 
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6л12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}
+ 
+export default DetectorMenu