Переделана навигация к датчикам, добавлена работа поиска тултипов на модели, добавлен функционал перехода из дашборда и истории тревог к датчику с тревогой на 3д модели

frontend/components/dashboard/Dashboard.tsx

@@ -12,7 +12,7 @@ import { aggregateChartDataByDays } from '../../lib/chartDataAggregator'
  
 const Dashboard: React.FC = () => {
   const router = useRouter()
-  const { currentObject, setCurrentSubmenu, closeMonitoring, closeFloorNavigation, closeNotifications } = useNavigationStore()
+  const { currentObject, setCurrentSubmenu, closeMonitoring, closeFloorNavigation, closeNotifications, navigateToSensor } = useNavigationStore()
   const objectTitle = currentObject?.title
 
   const [dashboardAlerts, setDashboardAlerts] = useState<any[]>([])
@@ -119,6 +119,27 @@ const Dashboard: React.FC = () => {
     setCurrentSubmenu(null)
     router.push('/navigation')
   }
+  
+  const handleGoTo3D = async (alert: any, viewType: 'building' | 'floor') => {
+    // Используем alert.name как идентификатор датчика (например, "GA-11")
+    const sensorId = alert.serial_number || alert.name
+    
+    if (!sensorId) {
+      console.warn('[Dashboard] Alert missing sensor identifier:', alert)
+      return
+    }
+    
+    const sensorSerialNumber = await navigateToSensor(
+      sensorId,
+      alert.floor || null,
+      viewType
+    )
+    
+    if (sensorSerialNumber) {
+      // Переходим на страницу навигации с параметром focusSensorId
+      router.push(`/navigation?focusSensorId=${encodeURIComponent(sensorSerialNumber)}`)
+    }
+  }
 
   const handleSensorTypeChange = (sensorType: string) => {
     setSelectedSensorType(sensorType)
@@ -266,6 +287,7 @@ const Dashboard: React.FC = () => {
                         <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Серьезность</th>
                         <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Дата</th>
                         <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Решен</th>
+                        <th style={interSemiboldStyle} className="text-center text-white text-sm py-3">3D Вид</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -287,6 +309,28 @@ const Dashboard: React.FC = () => {
                             )
                             }
                           </td>
+                          <td className="py-3">
+                            <div className="flex items-center justify-center gap-2">
+                              <button
+                                onClick={() => handleGoTo3D(alert, 'building')}
+                                className="p-1.5 rounded hover:bg-blue-600/20 transition-colors group"
+                                title="Показать на общей модели"
+                              >
+                                <img src="/icons/Building3D.png" alt="Здание" className="w-5 h-5 opacity-70 group-hover:opacity-100" />
+                              </button>
+                              <button
+                                onClick={() => handleGoTo3D(alert, 'floor')}
+                                className="p-1.5 rounded hover:bg-blue-600/20 transition-colors group"
+                                title="Показать на этаже"
+                              >
+                                <img 
+                                  src="/icons/Floor3D.png" 
+                                  alt="Этаж" 
+                                  className="w-5 h-5 opacity-70 group-hover:opacity-100" 
+                                />
+                              </button>
+                            </div>
+                          </td>
                         </tr>
                       ))}
                     </tbody>

frontend/components/dashboard/Dashboard.tsx — копия 2

@@ -0,0 +1,324 @@
+'use client'
+
+import React, { useEffect, useState, useMemo } from 'react'
+import { useRouter } from 'next/navigation'
+import Sidebar from '../ui/Sidebar'
+import AnimatedBackground from '../ui/AnimatedBackground'
+import useNavigationStore from '../../app/store/navigationStore'
+import ChartCard from './ChartCard'
+import AreaChart from './AreaChart'
+import BarChart from './BarChart'
+import { aggregateChartDataByDays } from '../../lib/chartDataAggregator'
+ 
+const Dashboard: React.FC = () => {
+  const router = useRouter()
+  const { currentObject, setCurrentSubmenu, closeMonitoring, closeFloorNavigation, closeNotifications } = useNavigationStore()
+  const objectTitle = currentObject?.title
+
+  const [dashboardAlerts, setDashboardAlerts] = useState<any[]>([])
+  const [rawChartData, setRawChartData] = useState<{ timestamp: string; value: number }[]>([])
+  const [sensorTypes] = useState<Array<{code: string, name: string}>>([
+    { code: '', name: 'Все датчики' },
+    { code: 'GA', name: 'Инклинометр' },
+    { code: 'PE', name: 'Танзометр' },
+    { code: 'GLE', name: 'Гидроуровень' }
+  ])
+  const [selectedSensorType, setSelectedSensorType] = useState<string>('')
+  const [selectedChartPeriod, setSelectedChartPeriod] = useState<string>('168')
+  const [selectedTablePeriod, setSelectedTablePeriod] = useState<string>('168')  
+
+  useEffect(() => {
+    const loadDashboard = async () => {
+      try {
+        const params = new URLSearchParams()
+        params.append('time_period', selectedChartPeriod)
+        
+        const res = await fetch(`/api/get-dashboard?${params.toString()}`, { cache: 'no-store' })
+        if (!res.ok) return
+        const payload = await res.json()
+        console.log('[Dashboard] GET /api/get-dashboard', { status: res.status, payload })
+        
+        let tableData = payload?.data?.table_data ?? []
+        tableData = Array.isArray(tableData) ? tableData : []
+ 
+        if (objectTitle) {
+          tableData = tableData.filter((a: any) => a.object === objectTitle)
+        }
+         
+        if (selectedSensorType && selectedSensorType !== '') {
+          tableData = tableData.filter((a: any) => { 
+            return a.detector_type?.toLowerCase() === selectedSensorType.toLowerCase()
+          })
+        }
+        
+        setDashboardAlerts(tableData as any[])
+
+        const cd = Array.isArray(payload?.data?.chart_data) ? payload.data.chart_data : []
+        setRawChartData(cd as any[])
+      } catch (e) {
+        console.error('Failed to load dashboard:', e)
+      }
+    }
+    loadDashboard()
+  }, [objectTitle, selectedChartPeriod, selectedSensorType])
+
+  // Отдельный эффект для загрузки таблицы по выбранному периоду
+  useEffect(() => {
+    const loadTableData = async () => {
+      try {
+        const params = new URLSearchParams()
+        params.append('time_period', selectedTablePeriod)
+        
+        const res = await fetch(`/api/get-dashboard?${params.toString()}`, { cache: 'no-store' })
+        if (!res.ok) return
+        const payload = await res.json()
+        console.log('[Dashboard] GET /api/get-dashboard (table)', { status: res.status, payload })
+        
+        let tableData = payload?.data?.table_data ?? []
+        tableData = Array.isArray(tableData) ? tableData : []
+ 
+        if (objectTitle) {
+          tableData = tableData.filter((a: any) => a.object === objectTitle)
+        }
+         
+        if (selectedSensorType && selectedSensorType !== '') {
+          tableData = tableData.filter((a: any) => { 
+            return a.detector_type?.toLowerCase() === selectedSensorType.toLowerCase()
+          })
+        }
+        
+        setDashboardAlerts(tableData as any[])
+      } catch (e) {
+        console.error('Failed to load table data:', e)
+      }
+    }
+    loadTableData()
+  }, [objectTitle, selectedTablePeriod, selectedSensorType])
+
+  const handleBackClick = () => {
+    router.push('/objects')
+  }
+   
+  const filteredAlerts = dashboardAlerts.filter((alert: any) => {
+    if (selectedSensorType === '') return true
+    return alert.detector_type?.toLowerCase() === selectedSensorType.toLowerCase()
+  })
+
+  // Статусы
+  const statusCounts = filteredAlerts.reduce((acc: { critical: number; warning: number; normal: number }, a: any) => {
+    if (a.severity === 'critical') acc.critical++
+    else if (a.severity === 'warning') acc.warning++
+    else acc.normal++
+    return acc
+  }, { critical: 0, warning: 0, normal: 0 })
+  
+  const handleNavigationClick = () => { 
+    closeMonitoring()
+    closeFloorNavigation()
+    closeNotifications()
+    setCurrentSubmenu(null)
+    router.push('/navigation')
+  }
+
+  const handleSensorTypeChange = (sensorType: string) => {
+    setSelectedSensorType(sensorType)
+  }
+
+  const handleChartPeriodChange = (period: string) => {
+    setSelectedChartPeriod(period)
+  }
+
+  const handleTablePeriodChange = (period: string) => {
+    setSelectedTablePeriod(period)
+  }
+
+  // Агрегируем данные графика в зависимости от периода
+  const chartData = useMemo(() => {
+    return aggregateChartDataByDays(rawChartData, selectedChartPeriod)
+  }, [rawChartData, selectedChartPeriod])
+
+  const interSemiboldStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 600 }
+  const interRegularStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 400 }
+ 
+  return (
+    <div className="relative flex h-screen bg-[#0e111a] overflow-hidden"> 
+      <AnimatedBackground />
+      <div className="relative z-20">
+        <Sidebar 
+          activeItem={1} // Dashboard  
+        />
+      </div>
+       
+      <div className="relative z-10 flex-1 flex flex-col"> 
+        <header className="bg-[#161824] border-b border-gray-700 px-6 py-4">
+          <div className="flex items-center gap-4">
+            <button 
+              onClick={handleBackClick}
+              className="text-gray-400 hover:text-white transition-colors"
+              aria-label="Назад к объектам"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </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-white">{objectTitle || 'Объект'}</span>
+            </nav>
+          </div>
+        </header>
+         
+        <div className="flex-1 p-6 overflow-auto"> 
+           <div className="mb-6">
+             <h1 style={interSemiboldStyle} className="text-white text-2xl mb-6">{objectTitle || 'Объект'}</h1>
+              
+             <div className="flex items-center gap-3 mb-6">
+               <div className="relative">
+                 <select 
+                   value={selectedSensorType}
+                   onChange={(e) => handleSensorTypeChange(e.target.value)}
+                   className="flex items-center gap-6 rounded-[10px] px-4 py-[18px] bg-[rgb(22,24,36)] text-white appearance-none pr-8"
+                 >
+                   {sensorTypes.map((type) => (
+                     <option key={type.code} value={type.code}>
+                       {type.name}
+                     </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" />
+                 </svg>
+               </div>
+               
+               <div className="flex items-center gap-3 ml-auto">
+                 <button 
+                   onClick={handleNavigationClick}
+                   className="rounded-[10px] px-4 py-[18px] bg-gray-600 text-gray-300 hover:bg-[rgb(22,24,36)] hover:text-white transition-colors"
+                 >
+                   <span className="text-sm font-medium">Навигация</span>
+                 </button>
+                 
+                 <div className="relative">
+                   <select 
+                     value={selectedChartPeriod}
+                     onChange={(e) => handleChartPeriodChange(e.target.value)}
+                     className="flex items-center gap-2 bg-[rgb(22,24,36)] rounded-lg px-3 py-2 text-white appearance-none pr-8"
+                   >
+                     <option value="24">День</option>
+                     <option value="72">3 дня</option>
+                     <option value="168">Неделя</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" />
+                   </svg>
+                 </div>
+               </div>
+             </div>
+             
+             {/* Карты-графики */}
+             <div className="grid grid-cols-1 lg:grid-cols-2 gap-[18px]">
+               <ChartCard 
+                 title="Показатель"  
+               >
+                 <AreaChart data={chartData} />
+               </ChartCard>
+               
+               <ChartCard 
+                 title="Статистика"  
+               >
+                 <BarChart data={chartData?.map((d: any) => ({ value: d.value, label: d.label }))} />
+               </ChartCard>
+             </div>
+           </div>
+          
+          {/* Список детекторов */}
+          <div>
+            <div>
+              <div className="flex items-center justify-between mb-6">
+                <h2 style={interSemiboldStyle} className="text-white text-2xl">Тренды</h2>
+                <div className="relative">
+                  <select 
+                    value={selectedTablePeriod}
+                    onChange={(e) => handleTablePeriodChange(e.target.value)}
+                    className="bg-[#161824] rounded-lg px-3 py-2 flex items-center gap-2 text-white appearance-none pr-8"
+                  >
+                    <option value="24">День</option>
+                    <option value="72">3 дня</option>
+                    <option value="168">Неделя</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" />
+                  </svg>
+                </div>
+              </div>
+              
+              {/* Таблица */}
+              <div className="bg-[#161824] rounded-[20px] p-6">
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead>
+                      <tr className="border-b border-gray-700">
+                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Детектор</th>
+                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Сообщение</th>
+                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Серьезность</th>
+                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Дата</th>
+                        <th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Решен</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {filteredAlerts.map((alert: any) => (
+                        <tr key={alert.id} className="border-b border-gray-800">
+                          <td style={interRegularStyle} className="py-3 text-white text-sm">{alert.name}</td>
+                          <td style={interRegularStyle} className="py-3 text-gray-300 text-sm">{alert.message}</td>
+                          <td className="py-3">
+                            <span style={interRegularStyle} className={`text-sm ${alert.severity === 'critical' ? 'text-red-500' : alert.severity === 'warning' ? 'text-orange-500' : 'text-green-500'}`}>
+                              {alert.severity === 'critical' ? 'Критическое' : alert.severity === 'warning' ? 'Предупреждение' : 'Норма'}
+                            </span>
+                          </td>
+                          <td style={interRegularStyle} className="py-3 text-gray-400 text-sm">{new Date(alert.created_at).toLocaleString()}</td>
+                          <td className="py-3">
+                            {alert.resolved ? (
+                              <span style={interRegularStyle} className="text-sm text-green-500">Да</span>
+                            ) : (
+                              <span style={interRegularStyle} className="text-sm text-gray-500">Нет</span>
+                            )
+                            }
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              
+              {/* Статистика */}
+              <div className="mt-6 grid grid-cols-4 gap-4">
+                <div className="text-center">
+                  <div style={interSemiboldStyle} className="text-2xl text-white">{filteredAlerts.length}</div>
+                  <div style={interRegularStyle} className="text-sm text-gray-400">Всего</div>
+                </div>
+                <div className="text-center">
+                  <div style={interSemiboldStyle} className="text-2xl text-green-500">{statusCounts.normal}</div>
+                  <div style={interRegularStyle} className="text-sm text-gray-400">Норма</div>
+                </div>
+                <div className="text-center">
+                  <div style={interSemiboldStyle} className="text-2xl text-orange-500">{statusCounts.warning}</div>
+                  <div style={interRegularStyle} className="text-sm text-gray-400">Предупреждения</div>
+                </div>
+                <div className="text-center">
+                  <div style={interSemiboldStyle} className="text-2xl text-red-500">{statusCounts.critical}</div>
+                  <div style={interRegularStyle} className="text-sm text-gray-400">Критические</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Dashboard