Разработка интерфейса фронт

frontend/components/dashboard/AreaChart.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import React from 'react'
+
+interface ChartDataPoint {
+  value: number
+  label?: string
+  timestamp?: string
+}
+
+interface AreaChartProps {
+  className?: string
+  data?: ChartDataPoint[]
+}
+
+const AreaChart: React.FC<AreaChartProps> = ({ className = '' }) => {
+  return (
+    <div className={`w-full h-full ${className}`}>
+      <svg className="w-full h-full" viewBox="0 0 635 200">
+        <defs>
+          <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="rgb(42, 157, 144)" stopOpacity="0.3" />
+            <stop offset="100%" stopColor="rgb(42, 157, 144)" stopOpacity="0" />
+          </linearGradient>
+        </defs> 
+        <path
+          d="M0,180 L100,120 L200,140 L300,80 L400,60 L500,100 L635,90 L635,200 L0,200 Z"
+          fill="url(#areaGradient)"
+        /> 
+        <path
+          d="M0,180 L100,120 L200,140 L300,80 L400,60 L500,100 L635,90"
+          stroke="rgb(42, 157, 144)"
+          strokeWidth="2"
+          fill="none"
+        /> 
+        <circle cx="0" cy="180" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="100" cy="120" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="200" cy="140" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="300" cy="80" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="400" cy="60" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="500" cy="100" r="3" fill="rgb(42, 157, 144)" />
+        <circle cx="635" cy="90" r="3" fill="rgb(42, 157, 144)" />
+      </svg>
+    </div>
+  )
+}
+
+export default AreaChart

frontend/components/dashboard/BarChart.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import React from 'react'
+
+interface ChartDataPoint {
+  value: number
+  label?: string
+  color?: string
+}
+
+interface BarChartProps {
+  className?: string
+  data?: ChartDataPoint[]
+}
+
+const BarChart: React.FC<BarChartProps> = ({ className = '' }) => {
+  const barData = [
+    { 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)' }
+  ]
+
+  return (
+    <div className={`w-full h-full ${className}`}>
+      <svg className="w-full h-full" viewBox="0 0 635 200">
+        <g>
+          {barData.map((bar, index) => {
+            const barWidth = 40
+            const barSpacing = 12
+            const x = index * (barWidth + barSpacing) + 20
+            const barHeight = (bar.value / 100) * 160
+            const y = 180 - barHeight
+            
+            return (
+              <rect
+                key={index}
+                x={x}
+                y={y}
+                width={barWidth}
+                height={barHeight}
+                fill={bar.color}
+                rx="4"
+                ry="4"
+              />
+            )
+          })}
+        </g>
+      </svg>
+    </div>
+  )
+}
+
+export default BarChart

frontend/components/dashboard/ChartCard.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import React from 'react'
+
+interface ChartCardProps {
+  title: string
+  subtitle?: string
+  children: React.ReactNode
+  className?: string
+}
+
+const ChartCard: React.FC<ChartCardProps> = ({ 
+  title, 
+  subtitle, 
+  children, 
+  className = '' 
+}) => {
+  return (
+    <div className={`bg-[#161824] rounded-[20px] p-6 ${className}`}>
+      <div className="flex items-start justify-between mb-6">
+        <div>
+          <h3 className="text-white text-base font-semibold mb-1">{title}</h3>
+          {subtitle && (
+            <p className="text-[#71717a] text-sm">{subtitle}</p>
+          )}
+        </div>
+        <div className="w-4 h-4">
+          <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+          </svg>
+        </div>
+      </div>
+      
+      <div className="h-[200px]">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default ChartCard

frontend/components/dashboard/Dashboard.tsx

@@ -0,0 +1,263 @@
+'use client'
+
+import React from 'react'
+import { useRouter } from 'next/navigation'
+import Sidebar from '../ui/Sidebar'
+import useNavigationStore from '../../app/store/navigationStore'
+import ChartCard from './ChartCard'
+import AreaChart from './AreaChart'
+import BarChart from './BarChart'
+import DetectorChart from './DetectorChart'
+import detectorsData from '../../data/detectors.json'
+ 
+const Dashboard: React.FC = () => {
+  const router = useRouter()
+  const { currentObject, setCurrentSubmenu, closeMonitoring, closeFloorNavigation, closeNotifications } = useNavigationStore()
+  const objectId = currentObject?.id
+  const objectTitle = currentObject?.title
+
+  const handleBackClick = () => {
+    router.push('/objects')
+  }
+  
+  interface DetectorData {
+    detector_id: number
+    name: string
+    object: string
+    status: string
+    type: string
+    location: string
+    floor: number
+    checked?: boolean
+    notifications: Array<{
+      id: number
+      type: string
+      message: string
+      timestamp: string
+      acknowledged: boolean
+      priority: string
+    }>
+  }
+
+  const detectorsArray = Object.values(detectorsData.detectors).filter(
+    (detector: DetectorData) => objectId ? detector.object === objectId : true
+  )
+
+  // Статусы
+  const statusCounts = detectorsArray.reduce((acc: { critical: number; warning: number; normal: number }, detector: DetectorData) => {
+    if (detector.status === '#b3261e') acc.critical++
+    else if (detector.status === '#fd7c22') acc.warning++
+    else if (detector.status === '#00ff00') acc.normal++
+    return acc
+  }, { critical: 0, warning: 0, normal: 0 })
+  
+  const handleNavigationClick = () => {
+    // Close all submenus before navigating
+    closeMonitoring()
+    closeFloorNavigation()
+    closeNotifications()
+    setCurrentSubmenu(null)
+    router.push('/navigation')
+  }
+
+  // No custom sidebar handling needed - using unified navigation service
+
+  return (
+    <div className="flex h-screen bg-[#0e111a]"> 
+      <Sidebar 
+        activeItem={1} // Dashboard  
+      />
+       
+      <div className="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 className="text-white text-2xl font-semibold mb-6">Объект {objectId?.replace('object_', '')}</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">
+                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                 </svg>
+               </button>
+               
+               <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="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" />
+                   </svg>
+                   <span className="text-white text-sm font-medium">Период</span>
+                   <div className="w-2 h-2 bg-white rounded-full"></div>
+                 </div>
+               </div>
+             </div>
+             
+             {/* Карты-графики */}
+             <div className="grid grid-cols-1 lg:grid-cols-2 gap-[18px]">
+               <ChartCard 
+                 title="Показатель" 
+                 subtitle="За последние 6 месяцев"
+               >
+                 <AreaChart />
+               </ChartCard>
+               
+               <ChartCard 
+                 title="Статистика" 
+                 subtitle="Данные за период"
+               >
+                 <BarChart />
+               </ChartCard>
+             </div>
+           </div>
+          
+          {/* Список детекторов */}
+          <div>
+            <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">
+                    <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 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>
+                      {detectorsArray.map((detector: DetectorData) => (
+                        <tr key={detector.detector_id} className="border-b border-gray-800">
+                          <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 === '#b3261e' ? 'Критическое' : 
+                                 detector.status === '#fd7c22' ? 'Предупреждение' : 'Норма'}
+                              </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>
+                
+                {/* Статы */}
+                 <div className="mt-6 grid grid-cols-4 gap-4">
+                   <div className="text-center">
+                     <div className="text-2xl font-bold text-white">{detectorsArray.length}</div>
+                     <div className="text-sm text-gray-400">Всего</div>
+                   </div>
+                   <div className="text-center">
+                     <div className="text-2xl font-bold text-green-500">{statusCounts.normal}</div>
+                     <div className="text-sm text-gray-400">Норма</div>
+                   </div>
+                   <div className="text-center">
+                     <div className="text-2xl font-bold text-orange-500">{statusCounts.warning}</div>
+                     <div className="text-sm text-gray-400">Предупреждения</div>
+                   </div>
+                   <div className="text-center">
+                     <div className="text-2xl font-bold text-red-500">{statusCounts.critical}</div>
+                     <div className="text-sm text-gray-400">Критические</div>
+                   </div>
+                 </div>
+               </div>
+               
+               {/* Графики с аналитикой */}
+                 <div className="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-[18px]">
+                  <ChartCard 
+                    title="Тренды детекторов" 
+                    subtitle="За последний месяц"
+                  >
+                    <DetectorChart type="line" />
+                  </ChartCard>
+                  
+                  <ChartCard 
+                    title="Статистика по месяцам" 
+                    subtitle="Активность детекторов"
+                  >
+                    <DetectorChart type="bar" />
+                  </ChartCard>
+                  
+                  <ChartCard 
+                    title="Анализ производительности" 
+                    subtitle="Эффективность работы"
+                  >
+                    <DetectorChart type="line" />
+                  </ChartCard>
+                  
+                  <ChartCard 
+                    title="Сводка по статусам" 
+                    subtitle="Распределение состояний"
+                  >
+                    <DetectorChart type="bar" />
+                  </ChartCard>
+                </div>
+             </div>
+           </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Dashboard

frontend/components/dashboard/DetectorChart.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import React from 'react'
+
+interface DetectorDataPoint {
+  value: number
+  label?: string
+  timestamp?: string
+  status?: string
+}
+
+interface DetectorChartProps {
+  className?: string
+  data?: DetectorDataPoint[]
+  type?: 'line' | 'bar'
+}
+
+const DetectorChart: React.FC<DetectorChartProps> = ({ 
+  className = '', 
+  type = 'line' 
+}) => {
+  if (type === 'bar') {
+    const barData = [
+      { value: 85, label: 'Янв' },
+      { value: 70, label: 'Фев' },
+      { value: 90, label: 'Мар' },
+      { value: 65, label: 'Апр' },
+      { value: 80, label: 'Май' },
+      { value: 95, label: 'Июн' }
+    ]
+
+    return (
+      <div className={`w-full h-full ${className}`}>
+        <svg className="w-full h-full" viewBox="0 0 400 200">
+          <g>
+            {barData.map((bar, index) => {
+              const barWidth = 50
+              const barSpacing = 15
+              const x = index * (barWidth + barSpacing) + 20
+              const barHeight = (bar.value / 100) * 150
+              const y = 160 - barHeight
+              
+              return (
+                <g key={index}>
+                  <rect
+                    x={x}
+                    y={y}
+                    width={barWidth}
+                    height={barHeight}
+                    fill="rgb(42, 157, 144)"
+                    rx="4"
+                    ry="4"
+                  />
+                  <text
+                    x={x + barWidth / 2}
+                    y={180}
+                    textAnchor="middle"
+                    fill="#71717a"
+                    fontSize="12"
+                  >
+                    {bar.label}
+                  </text>
+                </g>
+              )
+            })}
+          </g>
+        </svg>
+      </div>
+    )
+  }
+ 
+  return (
+    <div className={`w-full h-full ${className}`}>
+      <svg className="w-full h-full" viewBox="0 0 400 200">
+        <defs>
+          <linearGradient id="detectorGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="rgb(231, 110, 80)" stopOpacity="0.3" />
+            <stop offset="100%" stopColor="rgb(231, 110, 80)" stopOpacity="0" />
+          </linearGradient>
+        </defs> 
+        <path
+          d="M20,150 L80,120 L140,100 L200,80 L260,90 L320,70 L380,60 L380,180 L20,180 Z"
+          fill="url(#detectorGradient)"
+        /> 
+        <path
+          d="M20,150 L80,120 L140,100 L200,80 L260,90 L320,70 L380,60"
+          stroke="rgb(231, 110, 80)"
+          strokeWidth="2"
+          fill="none"
+        /> 
+        <circle cx="20" cy="150" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="80" cy="120" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="140" cy="100" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="200" cy="80" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="260" cy="90" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="320" cy="70" r="3" fill="rgb(231, 110, 80)" />
+        <circle cx="380" cy="60" r="3" fill="rgb(231, 110, 80)" />
+      </svg>
+    </div>
+  )
+}
+
+export default DetectorChart