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

frontend/components/reports/ReportsList.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import React, { useState, useMemo } from 'react';
+
+interface NotificationType {
+  id: number;
+  type: string;
+  message: string;
+  timestamp: string;
+  acknowledged: boolean;
+  priority: string;
+  detector_id: number;
+  detector_name: string;
+  location: string;
+  object: string;
+}
+
+interface DetectorType {
+  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
+  }>
+}
+
+interface DetectorsDataType {
+  detectors: Record<string, DetectorType>
+}
+
+interface ReportsListProps {
+  objectId?: string;
+  detectorsData: DetectorsDataType;
+}
+
+const ReportsList: React.FC<ReportsListProps> = ({ detectorsData }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [priorityFilter] = useState('all');
+  const [acknowledgedFilter] = useState('all');
+
+  const allNotifications = useMemo(() => {
+    const notifications: NotificationType[] = [];
+    Object.values(detectorsData.detectors).forEach(detector => {
+      if (detector.notifications && detector.notifications.length > 0) {
+        detector.notifications.forEach(notification => {
+          notifications.push({
+            ...notification,
+            detector_id: detector.detector_id,
+            detector_name: detector.name,
+            location: detector.location,
+            object: detector.object
+          });
+        });
+      }
+    });
+    return notifications;
+  }, [detectorsData]);
+
+  const filteredDetectors = useMemo(() => {
+    return allNotifications.filter(notification => {
+      const matchesSearch = notification.detector_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                           notification.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                           notification.message.toLowerCase().includes(searchTerm.toLowerCase());
+      
+      const matchesStatus = statusFilter === 'all' || notification.type === statusFilter;
+      const matchesPriority = priorityFilter === 'all' || notification.priority === priorityFilter;
+      const matchesAcknowledged = acknowledgedFilter === 'all' || 
+                                 (acknowledgedFilter === 'acknowledged' && notification.acknowledged) ||
+                                 (acknowledgedFilter === 'unacknowledged' && !notification.acknowledged);
+      
+      return matchesSearch && matchesStatus && matchesPriority && matchesAcknowledged;
+    });
+  }, [allNotifications, searchTerm, statusFilter, priorityFilter, acknowledgedFilter]);
+
+  const getStatusColor = (type: string) => {
+    switch (type) {
+      case 'critical': return '#b3261e';
+      case 'warning': return '#fd7c22';
+      case 'info': return '#00ff00';
+      default: return '#666';
+    }
+  };
+
+  const getPriorityColor = (priority: string) => {
+    switch (priority) {
+      case 'high': return '#b3261e';
+      case 'medium': return '#fd7c22';
+      case 'low': return '#00ff00';
+      default: return '#666';
+    }
+  };
+
+  const getStatusCounts = () => {
+    const counts = {
+      total: allNotifications.length,
+      critical: allNotifications.filter(d => d.type === 'critical').length,
+      warning: allNotifications.filter(d => d.type === 'warning').length,
+      info: allNotifications.filter(d => d.type === 'info').length,
+      acknowledged: allNotifications.filter(d => d.acknowledged).length,
+      unacknowledged: allNotifications.filter(d => !d.acknowledged).length
+    };
+    return counts;
+  };
+
+  const counts = getStatusCounts();
+
+  return (
+    <div className="space-y-6">
+      {/* Поиск и сортировка*/}
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setStatusFilter('all')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              statusFilter === 'all'
+                ? 'bg-blue-600 text-white'
+                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
+            }`}
+          >
+            Все ({allNotifications.length})
+          </button>
+          <button
+            onClick={() => setStatusFilter('critical')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              statusFilter === 'critical'
+                ? 'bg-red-600 text-white'
+                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
+            }`}
+          >
+            Критические ({allNotifications.filter(d => d.type === 'critical').length})
+          </button>
+          <button
+            onClick={() => setStatusFilter('warning')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              statusFilter === 'warning'
+                ? 'bg-orange-600 text-white'
+                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
+            }`}
+          >
+            Предупреждения ({allNotifications.filter(d => d.type === 'warning').length})
+          </button>
+          <button
+            onClick={() => setStatusFilter('info')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              statusFilter === 'info'
+                ? 'bg-green-600 text-white'
+                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
+            }`}
+          >
+            Информация ({allNotifications.filter(d => d.type === 'info').length})
+          </button>
+        </div>
+        
+        <div className="flex items-center gap-3">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Поиск детекторов..."
+              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>
+
+      {/* Табличка с детекторами*/}
+      <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>
+                <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>
+              {filteredDetectors.map((detector) => (
+                <tr key={detector.id} className="border-b border-gray-700 hover:bg-gray-800/50 transition-colors">
+                  <td className="py-4">
+                    <div className="text-sm font-medium text-white">{detector.detector_name}</div>
+                    <div className="text-sm text-gray-400">ID: {detector.detector_id}</div>
+                  </td>
+                  <td className="py-4">
+                    <div className="flex items-center gap-2">
+                      <div 
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: getStatusColor(detector.type) }}
+                      ></div>
+                      <span className="text-sm text-gray-300">
+                        {detector.type === 'critical' ? 'Критический' : 
+                         detector.type === 'warning' ? 'Предупреждение' : 'Информация'}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="py-4">
+                    <div className="text-sm text-white">{detector.message}</div>
+                  </td>
+                  <td className="py-4">
+                    <div className="text-sm text-white">{detector.location}</div>
+                  </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: getPriorityColor(detector.priority) }}
+                    >
+                      {detector.priority === 'high' ? 'Высокий' : 
+                       detector.priority === 'medium' ? 'Средний' : 'Низкий'}
+                    </span>
+                  </td>
+                  <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'
+                    }`}>
+                      {detector.acknowledged ? 'Да' : 'Нет'}
+                    </span>
+                  </td>
+                  <td className="py-4">
+                    <div className="text-sm text-gray-300">
+                      {new Date(detector.timestamp).toLocaleString('ru-RU')}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+              {filteredDetectors.length === 0 && (
+                <tr>
+                  <td colSpan={7} className="py-8 text-center text-gray-400">
+                    Детекторы не найдены
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+ 
+      <div className="mt-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        <div className="bg-[#161824] p-4 rounded-lg">
+          <div className="text-2xl font-bold text-white">{counts.total}</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-400">{counts.critical}</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-400">{counts.warning}</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-400">{counts.info}</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-blue-400">{counts.acknowledged}</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-yellow-400">{counts.unacknowledged}</div>
+          <div className="text-sm text-gray-400">Не подтверждено</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReportsList;