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

AEB-71: Added 3D navigation in monitoring zones

See merge request wedeving/aerbim-www!13

frontend/components/alerts/DetectorList.tsx

@@ -18,6 +18,7 @@ interface RawDetector {
   object: string
   status: string
   type: string
+  detector_type: string
   location: string
   floor: number
   notifications: Array<{

frontend/components/dashboard/AreaChart.tsx

@@ -22,15 +22,7 @@ const AreaChart: React.FC<AreaChartProps> = ({ className = '', data }) => {
 
   const safeData = (Array.isArray(data) && data.length > 0)
     ? data
-    : [
-        { value: 5 },
-        { value: 3 },
-        { value: 7 },
-        { value: 2 },
-        { value: 6 },
-        { value: 4 },
-        { value: 8 }
-      ]
+    : Array.from({ length: 7 }, () => ({ value: 0 }))
 
   const maxVal = Math.max(...safeData.map(d => d.value || 0), 1)
   const stepX = safeData.length > 1 ? width / (safeData.length - 1) : width

frontend/components/dashboard/BarChart.tsx

@@ -14,24 +14,9 @@ interface BarChartProps {
 }
 
 const BarChart: React.FC<BarChartProps> = ({ className = '', data }) => {
-  const defaultData = [
-    { value: 80, color: 'rgb(42, 157, 144)' },
-    { value: 65, color: 'rgb(42, 157, 144)' },
-    { value: 90, color: 'rgb(42, 157, 144)' },
-    { value: 45, color: 'rgb(42, 157, 144)' },
-    { value: 75, color: 'rgb(42, 157, 144)' },
-    { value: 55, color: 'rgb(42, 157, 144)' },
-    { value: 85, color: 'rgb(42, 157, 144)' },
-    { value: 70, color: 'rgb(42, 157, 144)' },
-    { value: 60, color: 'rgb(42, 157, 144)' },
-    { value: 95, color: 'rgb(42, 157, 144)' },
-    { value: 40, color: 'rgb(42, 157, 144)' },
-    { value: 80, color: 'rgb(42, 157, 144)' }
-  ]
-
   const barData = (Array.isArray(data) && data.length > 0)
     ? data.map(d => ({ value: d.value, color: d.color || 'rgb(42, 157, 144)' }))
-    : defaultData
+    : Array.from({ length: 12 }, () => ({ value: 0, color: 'rgb(42, 157, 144)' }))
 
   const maxVal = Math.max(...barData.map(b => b.value || 0), 1)
 

frontend/components/dashboard/Dashboard.tsx

@@ -7,28 +7,49 @@ import useNavigationStore from '../../app/store/navigationStore'
 import ChartCard from './ChartCard'
 import AreaChart from './AreaChart'
 import BarChart from './BarChart'
-import DetectorChart from './DetectorChart'
-
+ 
 const Dashboard: React.FC = () => {
   const router = useRouter()
   const { currentObject, setCurrentSubmenu, closeMonitoring, closeFloorNavigation, closeNotifications } = useNavigationStore()
-  const objectId = currentObject?.id
   const objectTitle = currentObject?.title
 
   const [dashboardAlerts, setDashboardAlerts] = useState<any[]>([])
   const [chartData, setChartData] = 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 res = await fetch('/api/get-dashboard', { cache: 'no-store' })
+        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 })
-        const tableData = payload?.data?.table_data ?? []
-        const arr = (Array.isArray(tableData) ? tableData : [])
-          .filter((a: any) => (objectTitle ? a.object === objectTitle : true))
-        setDashboardAlerts(arr as any[])
+        
+        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 : []
         setChartData(cd as any[])
@@ -37,14 +58,52 @@ const Dashboard: React.FC = () => {
       }
     }
     loadDashboard()
-  }, [objectTitle])
+  }, [objectTitle, selectedChartPeriod, selectedSensorType])
+
+  // Separate effect for table data based on table period
+  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 = dashboardAlerts.reduce((acc: { critical: number; warning: number; normal: number }, a: any) => {
+  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++
@@ -58,6 +117,18 @@ const Dashboard: React.FC = () => {
     setCurrentSubmenu(null)
     router.push('/navigation')
   }
+
+  const handleSensorTypeChange = (sensorType: string) => {
+    setSelectedSensorType(sensorType)
+  }
+
+  const handleChartPeriodChange = (period: string) => {
+    setSelectedChartPeriod(period)
+  }
+
+  const handleTablePeriodChange = (period: string) => {
+    setSelectedTablePeriod(period)
+  }
  
   return (
     <div className="flex h-screen bg-[#0e111a]"> 
@@ -87,17 +158,25 @@ const Dashboard: React.FC = () => {
          
         <div className="flex-1 p-6 overflow-auto"> 
            <div className="mb-6">
-             <h1 className="text-white text-2xl font-semibold mb-6">Объект {objectId?.replace('object_', '')}</h1>
+             <h1 className="text-white text-2xl font-semibold mb-6">{objectTitle || 'Объект'}</h1>
               
              <div className="flex items-center gap-3 mb-6">
-               <button 
-                 className="flex items-center gap-6 rounded-[10px] px-4 py-[18px] bg-[rgb(22,24,36)] text-white"
-               >
-                 <span className="text-sm font-medium">Датчики : все</span>
-                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+               <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>
-               </button>
+               </div>
                
                <div className="flex items-center gap-3 ml-auto">
                  <button 
@@ -107,12 +186,20 @@ const Dashboard: React.FC = () => {
                    <span className="text-sm font-medium">Навигация</span>
                  </button>
                  
-                 <div className="flex items-center gap-2 bg-[rgb(22,24,36)] rounded-lg px-3 py-2">
-                   <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+                 <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>
-                   <span className="text-white text-sm font-medium">Период</span>
-                   <div className="w-2 h-2 bg-white rounded-full"></div>
                  </div>
                </div>
              </div>
@@ -121,14 +208,14 @@ const Dashboard: React.FC = () => {
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-[18px]">
                <ChartCard 
                  title="Показатель" 
-                 subtitle="За последние 6 месяцев"
+                 // subtitle removed
                >
                  <AreaChart data={chartData} />
                </ChartCard>
                
                <ChartCard 
                  title="Статистика" 
-                 subtitle="Данные за период"
+                 // subtitle removed
                >
                  <BarChart data={chartData?.map((d: any) => ({ value: d.value }))} />
                </ChartCard>
@@ -140,12 +227,18 @@ const Dashboard: React.FC = () => {
             <div>
               <div className="flex items-center justify-between mb-6">
                 <h2 className="text-white text-2xl font-semibold">Тренды</h2>
-                <div className="bg-[#161824] rounded-lg px-3 py-2 flex items-center gap-2">
-                  <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path fillRule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clipRule="evenodd" />
-                  </svg>
-                  <span className="text-white text-sm font-medium">Месяц</span>
-                  <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                <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>
@@ -165,7 +258,7 @@ const Dashboard: React.FC = () => {
                       </tr>
                     </thead>
                     <tbody>
-                      {dashboardAlerts.map((alert: any) => (
+                      {filteredAlerts.map((alert: any) => (
                         <tr key={alert.id} className="border-b border-gray-800">
                           <td className="py-3 text-white text-sm">{alert.name}</td>
                           <td className="py-3 text-gray-300 text-sm">{alert.message}</td>
@@ -191,7 +284,7 @@ const Dashboard: React.FC = () => {
                 {/* Статы */}
                  <div className="mt-6 grid grid-cols-4 gap-4">
                    <div className="text-center">
-                     <div className="text-2xl font-bold text-white">{dashboardAlerts.length}</div>
+                     <div className="text-2xl font-bold text-white">{filteredAlerts.length}</div>
                      <div className="text-sm text-gray-400">Всего</div>
                    </div>
                    <div className="text-center">
@@ -208,37 +301,6 @@ const Dashboard: React.FC = () => {
                    </div>
                  </div>
                </div>
-               
-               {/* Графики с аналитикой */}
-                 <div className="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-[18px]">
-                  <ChartCard 
-                    title="Тренды детекторов" 
-                    subtitle="За последний месяц"
-                  >
-                    <DetectorChart type="line" data={chartData?.map((d: any) => ({ value: d.value }))} />
-                  </ChartCard>
-                  
-                  <ChartCard 
-                    title="Статистика по месяцам" 
-                    subtitle="Активность детекторов"
-                  >
-                    <DetectorChart type="bar" data={chartData?.map((d: any) => ({ value: d.value }))} />
-                  </ChartCard>
-                  
-                  <ChartCard 
-                    title="Анализ производительности" 
-                    subtitle="Эффективность работы"
-                  >
-                    <DetectorChart type="line" data={chartData?.map((d: any) => ({ value: d.value }))} />
-                  </ChartCard>
-                  
-                  <ChartCard 
-                    title="Сводка по статусам" 
-                    subtitle="Распределение состояний"
-                  >
-                    <DetectorChart type="bar" data={chartData?.map((d: any) => ({ value: d.value }))} />
-                  </ChartCard>
-                </div>
              </div>
            </div>
         </div>

frontend/components/model/ModelViewer.tsx

@@ -248,8 +248,7 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
     }
  
     const allMeshes = importedMeshesRef.current || []
-    
-    // Safeguard: Check if we have any meshes at all
+     
     if (allMeshes.length === 0) {
       console.warn('[ModelViewer] No meshes available for sensor matching')
       highlightLayerRef.current?.removeAllMeshes()
@@ -378,15 +377,15 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
     <div className="w-full h-screen relative bg-gray-900 overflow-hidden">
       {!modelPath ? (
         <div className="h-full flex items-center justify-center">
-          <div className="text-center p-8 bg-[#161824] rounded-lg border border-gray-700 max-w-md">
-            <div className="text-amber-400 text-lg font-semibold mb-4">
-              3D модель недоступна
+          <div className="text-center p-8 bg-[#161824] rounded-lg border border-gray-700 max-w-md shadow-xl">
+            <div className="text-amber-400 text-lg font-semibold mb-2">
+              3D модель не выбрана
             </div>
             <div className="text-gray-300 mb-4">
-              Путь к 3D модели не задан
+              Выберите модель в панели «Зоны мониторинга», чтобы начать просмотр
             </div>
             <div className="text-sm text-gray-400">
-              Обратитесь к администратору для настройки модели
+              Если список пуст, добавьте файлы в каталог assets/big-models или проверьте API
             </div>
           </div>
         </div>

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>

frontend/components/navigation/FloorNavigation.tsx

@@ -22,6 +22,7 @@ interface DetectorType {
   status: string
   checked: boolean
   type: string
+  detector_type: string
   location: string
   floor: number
   notifications: Array<{

frontend/components/navigation/Monitoring.tsx

@@ -1,13 +1,51 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 
 interface MonitoringProps {
   objectId?: string;
   onClose?: () => void;
+  onSelectModel?: (modelPath: string) => void;
 }
 
-const Monitoring: React.FC<MonitoringProps> = ({ onClose }) => {
+const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
   const [objectImageError, setObjectImageError] = useState(false);
+  const [models, setModels] = useState<{ title: string; path: string }[]>([]);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  // Загружаем список доступных моделей из assets/big-models через API
+  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 preferred = 'AerBIM-Monitor_ASM-HT-Viewer_Expo2017Astana_20250910';
+        const formatted = items
+          .map((it) => ({ title: it.name, path: it.path }))
+          .sort((a, b) => {
+            const ap = a.path.includes(preferred) ? -1 : 0;
+            const bp = b.path.includes(preferred) ? -1 : 0;
+            if (ap !== bp) return ap - bp;
+            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();
+  }, []);
 
   return (
     <div className="w-full"> 
@@ -51,25 +89,48 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose }) => {
           </div>
         </div>
  
+        {loadError && (
+          <div className="rounded-lg bg-red-600/20 border border-red-600/40 text-red-200 text-xs px-3 py-2">
+            Ошибка загрузки списка моделей: {loadError}
+          </div>
+        )}
+
         <div className="grid grid-cols-2 gap-3">
-          {[1, 2, 3, 4, 5, 6].map((zone) => (
-            <div key={zone} className="flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center">
-              <div className="w-full h-full bg-gray-200 rounded flex items-center justify-center">
-                <Image 
-                  src="/images/test_image.png"
-                  alt={`Зона ${zone}`}
-                  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';
-                  }}
-                />
+          {models.length > 0 ? (
+            models.map((model, idx) => (
+              <button
+                key={`${model.path}-${idx}`}
+                type="button"
+                onClick={() => onSelectModel?.(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}`}
+              >
+                <div className="w-full h-full bg-gray-200 rounded flex items-center justify-center">
+                  <Image 
+                    src="/images/test_image.png"
+                    alt={model.title}
+                    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';
+                    }}
+                  />
+                </div>
+                <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}
+                </div>
+              </button>
+            ))
+          ) : (
+            <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.
               </div>
             </div>
-          ))}
+          )}
         </div>
       </div>
     </div>

frontend/components/notifications/NotificationDetectorInfo.tsx

@@ -8,6 +8,7 @@ interface DetectorInfoType {
   object: string
   status: string
   type: string
+  detector_type: string
   location: string
   floor: number
   checked: boolean

frontend/components/notifications/Notifications.tsx

@@ -24,6 +24,7 @@ interface DetectorType {
   object: string
   status: string
   type: string
+  detector_type: string
   location: string
   floor: number
   checked: boolean

frontend/components/reports/ReportsList.tsx

@@ -22,6 +22,7 @@ interface DetectorType {
   object: string
   status: string
   type: string
+  detector_type: string
   location: string
   floor: number
   checked: boolean
@@ -231,8 +232,8 @@ const ReportsList: React.FC<ReportsListProps> = ({ detectorsData }) => {
                   <td className="py-4">
                     <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                       detector.acknowledged 
-                        ? 'bg-green-100 text-green-800' 
-                        : 'bg-red-100 text-red-800'
+                        ? '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'
                     }`}>
                       {detector.acknowledged ? 'Да' : 'Нет'}
                     </span>

frontend/components/ui/Sidebar.tsx

@@ -456,7 +456,7 @@ const Sidebar: React.FC<SidebarProps> = ({
           </div>
 
           <button
-            className="relative w-4 h-4 aspect-[1] p-1 rounded hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200"
+            className="!relative !w-8 !h-8 p-1.5 rounded-lg bg-gray-800/60 border border-gray-600/40 shadow-lg hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200"
             aria-label="Logout"
             title="Выйти"
             type="button"