переделана логика загрузки модели, замена страницы Объекты на другой внешний вид, добавление в меню пункта Объекты

frontend/components/alerts/AlertsList.tsx

@@ -103,7 +103,6 @@ const AlertsList: React.FC<AlertsListProps> = ({ alerts, onAcknowledgeToggle, in
                 <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>
                 <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>
@@ -133,9 +132,6 @@ const AlertsList: React.FC<AlertsListProps> = ({ alerts, onAcknowledgeToggle, in
                   <td style={interRegularStyle} className="py-4 text-sm text-white">
                     {item.message}
                   </td>
-                  <td style={interRegularStyle} className="py-4 text-sm text-white">
-                    {item.location || '-'}
-                  </td>
                   <td className="py-4">
                     <span 
                       className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
@@ -194,7 +190,7 @@ const AlertsList: React.FC<AlertsListProps> = ({ alerts, onAcknowledgeToggle, in
               ))}
               {filteredAlerts.length === 0 && (
                 <tr>
-                  <td colSpan={8} className="py-8 text-center text-gray-400">
+                  <td colSpan={7} className="py-8 text-center text-gray-400">
                     Записей не найдено
                   </td>
                 </tr>

frontend/components/alerts/AlertsList.tsx — копия 2

@@ -0,0 +1,210 @@
+import React, { useState, useMemo } from 'react'
+import { useRouter } from 'next/navigation'
+import useNavigationStore from '../../app/store/navigationStore'
+import * as statusColors from '../../lib/statusColors'
+
+interface AlertItem {
+  id: number
+  type: string
+  message: string
+  timestamp: string
+  acknowledged: boolean
+  priority: string
+  detector_id?: string
+  detector_name?: string
+  location?: string
+  object?: string
+  serial_number?: string
+  floor?: number
+}
+
+interface AlertsListProps {
+  alerts: AlertItem[]
+  onAcknowledgeToggle: (alertId: number) => void
+  initialSearchTerm?: string
+}
+
+const AlertsList: React.FC<AlertsListProps> = ({ alerts, onAcknowledgeToggle, initialSearchTerm = '' }) => {
+  const router = useRouter()
+  const { navigateToSensor } = useNavigationStore()
+  const [searchTerm, setSearchTerm] = useState(initialSearchTerm)
+
+  const filteredAlerts = useMemo(() => {
+    return alerts.filter(alert => { 
+      const matchesSearch = searchTerm === '' || alert.detector_id?.toString() === searchTerm
+      return matchesSearch 
+    })
+  }, [alerts, searchTerm])
+
+  const interSemiboldStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 600 }
+  const interRegularStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 400 }
+
+  const getStatusColor = (type: string) => {
+    switch (type) {
+      case 'critical':
+        return statusColors.STATUS_COLOR_CRITICAL
+      case 'warning':
+        return statusColors.STATUS_COLOR_WARNING
+      case 'info':
+        return statusColors.STATUS_COLOR_NORMAL
+      default:
+        return statusColors.STATUS_COLOR_UNKNOWN
+    }
+  }
+  
+  const handleGoTo3D = async (alert: AlertItem, viewType: 'building' | 'floor') => {
+    // Используем доступные идентификаторы датчика
+    const sensorId = alert.serial_number || alert.detector_name || alert.detector_id
+    
+    if (!sensorId) {
+      console.warn('[AlertsList] Alert missing sensor identifier:', alert)
+      return
+    }
+    
+    const sensorSerialNumber = await navigateToSensor(
+      sensorId,
+      alert.floor || null,
+      viewType
+    )
+    
+    if (sensorSerialNumber) {
+      router.push(`/navigation?focusSensorId=${encodeURIComponent(sensorSerialNumber)}`)
+    }
+  }
+  
+  return (
+    <div className="space-y-6">
+      {/* Поиск */}
+      <div className="flex items-center justify-end gap-4 mb-6">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Поиск по ID детектора..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="bg-[#161824] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none w-64"
+          />
+          <svg className="absolute right-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+      </div>
+
+      {/* Таблица алертов */}
+      <div className="bg-[#161824] rounded-[20px] p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 style={interSemiboldStyle} className="text-xl text-white">История тревог</h2>
+          <span style={interRegularStyle} className="text-sm text-gray-400">Всего: {filteredAlerts.length}</span>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-gray-700">
+                <th 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>
+                <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>
+              {filteredAlerts.map((item) => (
+                <tr key={item.id} className="border-b border-gray-700 hover:bg-gray-800/50 transition-colors">
+                  <td style={interRegularStyle} className="py-4 text-sm text-white">
+                    <div>{item.detector_name || 'Детектор'}</div>
+                    {item.detector_id ? (
+                      <div className="text-gray-400">ID: {item.detector_id}</div>
+                    ) : null}
+                  </td>
+                  <td className="py-4">
+                    <div className="flex items-center gap-2">
+                      <div 
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: getStatusColor(item.type) }}
+                      ></div>
+                      <span style={interRegularStyle} className="text-sm text-gray-300">
+                        {item.type === 'critical' ? 'Критический' : item.type === 'warning' ? 'Предупреждение' : 'Информация'}
+                      </span>
+                    </div>
+                  </td>
+                  <td style={interRegularStyle} className="py-4 text-sm text-white">
+                    {item.message}
+                  </td>
+                  <td style={interRegularStyle} className="py-4 text-sm text-white">
+                    {item.location || '-'}
+                  </td>
+                  <td className="py-4">
+                    <span 
+                      className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
+                      style={{
+                        backgroundColor:
+                          item.priority === 'high'
+                            ? statusColors.STATUS_COLOR_CRITICAL
+                            : item.priority === 'medium'
+                              ? statusColors.STATUS_COLOR_WARNING
+                              : statusColors.STATUS_COLOR_NORMAL,
+                      }}
+                    >
+                      {item.priority === 'high' ? 'Высокий' : item.priority === 'medium' ? 'Средний' : 'Низкий'}
+                    </span>
+                  </td>
+                  <td className="py-4">
+                    <span style={interRegularStyle} className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs ${
+                      item.acknowledged ? 'bg-green-600/20 text-green-300 ring-1 ring-green-600/40' : 'bg-red-600/20 text-red-300 ring-1 ring-red-600/40'
+                    }`}>
+                      {item.acknowledged ? 'Да' : 'Нет'}
+                    </span>
+                    <button
+                      onClick={() => onAcknowledgeToggle(item.id)}
+                      style={interRegularStyle}
+                      className="ml-2 inline-flex items-center px-2 py-1 rounded text-xs bg-[#2a2e3e] text-white hover:bg-[#353a4d]"
+                    >
+                      {item.acknowledged ? 'Снять' : 'Подтвердить'}
+                    </button>
+                  </td>
+                  <td style={interRegularStyle} className="py-4 text-sm text-gray-300">
+                    {new Date(item.timestamp).toLocaleString('ru-RU')}
+                  </td>
+                  <td className="py-4">
+                    <div className="flex items-center justify-center gap-2">
+                      <button
+                        onClick={() => handleGoTo3D(item, '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(item, '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>
+              ))}
+              {filteredAlerts.length === 0 && (
+                <tr>
+                  <td colSpan={8} className="py-8 text-center text-gray-400">
+                    Записей не найдено
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AlertsList

frontend/components/alerts/DetectorList.tsx

@@ -151,28 +151,6 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
           <table className="w-full">
             <thead>
               <tr className="border-b border-gray-700">
-                <th className="text-left text-white font-medium py-3 w-12">
-                  <input
-                    type="checkbox"
-                    checked={selectedDetectors.length === currentDetectors.length && currentDetectors.length > 0}
-                    onChange={(e) => {
-                      if (e.target.checked) {
-                        currentDetectors.forEach(detector => {
-                          if (!selectedDetectors.includes(detector.detector_id)) {
-                            onDetectorSelect(detector.detector_id, true)
-                          }
-                        })
-                      } else {
-                        currentDetectors.forEach(detector => {
-                          if (selectedDetectors.includes(detector.detector_id)) {
-                            onDetectorSelect(detector.detector_id, false)
-                          }
-                        })
-                      }
-                    }}
-                    className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
-                  />
-                </th>
                 <th className="text-left text-white font-medium py-3">Детектор</th>
                 <th className="text-left text-white font-medium py-3">Статус</th>
                 <th className="text-left text-white font-medium py-3">Местоположение</th>
@@ -185,14 +163,6 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
                 
                 return (
                   <tr key={detector.detector_id} className="border-b border-gray-800">
-                    <td className="py-3">
-                      <input
-                        type="checkbox"
-                        checked={isSelected}
-                        onChange={(e) => onDetectorSelect(detector.detector_id, e.target.checked)}
-                        className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
-                      />
-                    </td>
                     <td className="py-3 text-white text-sm">{detector.name}</td>
                     <td className="py-3">
                       <div className="flex items-center gap-2">

frontend/components/alerts/DetectorList.tsx — копия 2

@@ -0,0 +1,329 @@
+'use client'
+ 
+import React, { useState, useEffect } from 'react'
+import * as statusColors from '../../lib/statusColors'
+ 
+interface Detector {
+  detector_id: number
+  name: string
+  location: string
+  status: string
+  object: string
+  floor: number
+  checked: boolean
+}
+ 
+interface RawDetector {
+  detector_id: number
+  name: string
+  object: string
+  status: string
+  type: string
+  detector_type: string
+  location: string
+  floor: number
+  notifications: Array<{
+    id: number
+    type: string
+    message: string
+    timestamp: string
+    acknowledged: boolean
+    priority: string
+  }>
+}
+ 
+interface DetectorListProps {
+  objectId?: string
+  selectedDetectors: number[]
+  onDetectorSelect: (detectorId: number, selected: boolean) => void
+  initialSearchTerm?: string
+}
+
+// Функция для генерации умного диапазона страниц
+function getPaginationRange(currentPage: number, totalPages: number): (number | string)[] {
+  if (totalPages <= 7) {
+    // Если страниц мало - показываем все
+    return Array.from({ length: totalPages }, (_, i) => i + 1)
+  }
+
+  // Всегда показываем первые 3 и последние 3
+  const start = [1, 2, 3]
+  const end = [totalPages - 2, totalPages - 1, totalPages]
+  
+  if (currentPage <= 4) {
+    // Начало: 1 2 3 4 5 ... 11 12 13
+    return [1, 2, 3, 4, 5, '...', ...end]
+  }
+  
+  if (currentPage >= totalPages - 3) {
+    // Конец: 1 2 3 ... 9 10 11 12 13
+    return [...start, '...', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages]
+  }
+  
+  // Середина: 1 2 3 ... 6 7 8 ... 11 12 13
+  return [...start, '...', currentPage - 1, currentPage, currentPage + 1, '...', ...end]
+}
+ 
+const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors, onDetectorSelect, initialSearchTerm = '' }) => {
+  const [detectors, setDetectors] = useState<Detector[]>([])
+  const [searchTerm, setSearchTerm] = useState<string>(initialSearchTerm)
+  const [currentPage, setCurrentPage] = useState(1)
+  const itemsPerPage = 20
+
+  useEffect(() => {
+    const loadDetectors = async () => {
+      try {
+        const res = await fetch('/api/get-detectors', { cache: 'no-store' })
+        if (!res.ok) return
+        const payload = await res.json()
+        const detectorsData: Record<string, RawDetector> = payload?.data?.detectors ?? {}
+        const rawArray: RawDetector[] = Object.values(detectorsData).filter(
+          (detector) => (objectId ? detector.object === objectId : true)
+        )
+        const normalized: Detector[] = rawArray.map((d) => ({
+          detector_id: d.detector_id,
+          name: d.name,
+          location: d.location,
+          status: d.status,
+          object: d.object,
+          floor: d.floor,
+          checked: false,
+        }))
+        console.log('[DetectorList] Payload:', payload) 
+        setDetectors(normalized)
+      } catch (e) {
+        console.error('Failed to load detectors:', e)
+      }
+    }
+    loadDetectors()
+  }, [objectId])
+ 
+  const filteredDetectors = detectors.filter(detector => { 
+    const matchesSearch = searchTerm === '' || detector.detector_id.toString() === searchTerm
+    
+    return matchesSearch
+  })
+
+  // Сброс на первую страницу при изменении поиска
+  useEffect(() => {
+    setCurrentPage(1)
+  }, [searchTerm])
+
+  // Пагинация
+  const totalPages = Math.ceil(filteredDetectors.length / itemsPerPage)
+  const startIndex = (currentPage - 1) * itemsPerPage
+  const endIndex = startIndex + itemsPerPage
+  const currentDetectors = filteredDetectors.slice(startIndex, endIndex)
+  const paginationRange = getPaginationRange(currentPage, totalPages)
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page)
+    // Скролл наверх таблицы
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+ 
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-3">
+        </div>
+        
+        <div className="flex items-center gap-3">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Поиск по ID детектора..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="bg-[#161824] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none w-64 text-sm font-medium"
+              style={{ fontFamily: 'Inter, sans-serif' }}
+            />
+            <svg className="absolute right-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      {/* Таблица детекторов */}
+      <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 className="text-left text-white font-medium py-3 w-12">
+                  <input
+                    type="checkbox"
+                    checked={selectedDetectors.length === currentDetectors.length && currentDetectors.length > 0}
+                    onChange={(e) => {
+                      if (e.target.checked) {
+                        currentDetectors.forEach(detector => {
+                          if (!selectedDetectors.includes(detector.detector_id)) {
+                            onDetectorSelect(detector.detector_id, true)
+                          }
+                        })
+                      } else {
+                        currentDetectors.forEach(detector => {
+                          if (selectedDetectors.includes(detector.detector_id)) {
+                            onDetectorSelect(detector.detector_id, false)
+                          }
+                        })
+                      }
+                    }}
+                    className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
+                  />
+                </th>
+                <th className="text-left text-white font-medium py-3">Детектор</th>
+                <th className="text-left text-white font-medium py-3">Статус</th>
+                <th className="text-left text-white font-medium py-3">Местоположение</th>
+                <th className="text-left text-white font-medium py-3">Проверен</th>
+              </tr>
+            </thead>
+            <tbody>
+              {currentDetectors.map((detector) => {
+                const isSelected = selectedDetectors.includes(detector.detector_id)
+                
+                return (
+                  <tr key={detector.detector_id} className="border-b border-gray-800">
+                    <td className="py-3">
+                      <input
+                        type="checkbox"
+                        checked={isSelected}
+                        onChange={(e) => onDetectorSelect(detector.detector_id, e.target.checked)}
+                        className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
+                      />
+                    </td>
+                    <td className="py-3 text-white text-sm">{detector.name}</td>
+                    <td className="py-3">
+                      <div className="flex items-center gap-2">
+                        <div 
+                          className="w-3 h-3 rounded-full"
+                          style={{ backgroundColor: detector.status }}
+                        ></div>
+                        <span className="text-sm text-gray-300">
+                          {detector.status === statusColors.STATUS_COLOR_CRITICAL
+                            ? 'Критическое'
+                            : detector.status === statusColors.STATUS_COLOR_WARNING
+                              ? 'Предупреждение'
+                              : 'Норма'}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="py-3 text-gray-400 text-sm">{detector.location}</td>
+                    <td className="py-3">
+                      {detector.checked ? (
+                        <div className="flex items-center gap-1">
+                          <svg className="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                          </svg>
+                          <span className="text-sm text-green-500">Да</span>
+                        </div>
+                      ) : (
+                        <span className="text-sm text-gray-500">Нет</span>
+                      )}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Пагинация */}
+        {totalPages > 1 && (
+          <div className="mt-6 flex flex-col items-center gap-4">
+            {/* Кнопки пагинации */}
+            <div className="flex items-center gap-2">
+              {/* Кнопка "Предыдущая" */}
+              <button
+                onClick={() => handlePageChange(currentPage - 1)}
+                disabled={currentPage === 1}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                  currentPage === 1
+                    ? 'text-gray-600 cursor-not-allowed'
+                    : 'text-gray-300 hover:text-white hover:bg-[#1E293B]'
+                }`}
+              >
+                ← Предыдущая
+              </button>
+
+              {/* Номера страниц */}
+              {paginationRange.map((page, index) => {
+                if (page === '...') {
+                  return (
+                    <span key={`ellipsis-${index}`} className="px-3 py-2 text-gray-500">
+                      ...
+                    </span>
+                  )
+                }
+
+                const pageNumber = page as number
+                const isActive = pageNumber === currentPage
+
+                return (
+                  <button
+                    key={pageNumber}
+                    onClick={() => handlePageChange(pageNumber)}
+                    className={`min-w-[40px] px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                      isActive
+                        ? 'bg-blue-500 text-white'
+                        : 'text-gray-300 hover:text-white hover:bg-[#1E293B]'
+                    }`}
+                  >
+                    {pageNumber}
+                  </button>
+                )
+              })}
+
+              {/* Кнопка "Следующая" */}
+              <button
+                onClick={() => handlePageChange(currentPage + 1)}
+                disabled={currentPage === totalPages}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                  currentPage === totalPages
+                    ? 'text-gray-600 cursor-not-allowed'
+                    : 'text-gray-300 hover:text-white hover:bg-[#1E293B]'
+                }`}
+              >
+                Следующая →
+              </button>
+            </div>
+
+            {/* Счётчик */}
+            <div className="text-sm text-gray-400">
+              Показано {startIndex + 1}-{Math.min(endIndex, filteredDetectors.length)} из {filteredDetectors.length} датчиков
+            </div>
+          </div>
+        )}
+      </div>
+      
+      {/* Статы детекторов */}
+      <div className="mt-6 grid grid-cols-4 gap-4">
+        <div className="bg-[#161824] p-4 rounded-lg">
+          <div className="text-2xl font-bold text-white">{filteredDetectors.length}</div>
+          <div className="text-sm text-gray-400">Всего</div>
+        </div>
+        <div className="bg-[#161824] p-4 rounded-lg">
+          <div className="text-2xl font-bold text-green-500">{filteredDetectors.filter(d => d.status === statusColors.STATUS_COLOR_NORMAL).length}</div>
+          <div className="text-sm text-gray-400">Норма</div>
+        </div>
+        <div className="bg-[#161824] p-4 rounded-lg">
+          <div className="text-2xl font-bold text-orange-500">{filteredDetectors.filter(d => d.status === statusColors.STATUS_COLOR_WARNING).length}</div>
+          <div className="text-sm text-gray-400">Предупреждения</div>
+        </div>
+        <div className="bg-[#161824] p-4 rounded-lg">
+          <div className="text-2xl font-bold text-red-500">{filteredDetectors.filter(d => d.status === statusColors.STATUS_COLOR_CRITICAL).length}</div>
+          <div className="text-sm text-gray-400">Критические</div>
+        </div>
+      </div>
+      
+      {filteredDetectors.length === 0 && (
+        <div className="text-center py-8">
+          <p className="text-gray-400">Детекторы не найдены</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DetectorList