Spaces:

Karmashek
/

ver1

Running

App Files Files Community

Karmashek commited on May 15, 2025

Commit

41e5b0b

verified ·

1 Parent(s): bf607ed

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +929 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ver1
-emoji: 🦀
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ver1
+emoji: 🐳
+colorFrom: blue
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,929 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+import { useState, useEffect, useRef } from 'react';
+export default function App() {
+  // State for active tab and sidebar
+  const [activeTab, setActiveTab] = useState('dashboard');
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [equipmentList, setEquipmentList] = useState([
+    {
+      id: 1,
+      name: "Токарный станок CNC-2000",
+      type: "Станок",
+      serial: "CNC2000-001",
+      inventory: "INV-1001",
+      status: "active",
+      lastMaintenance: "2023-05-15",
+      nextMaintenance: "2023-06-15",
+      maintenanceInterval: 30,
+      description: "Токарный станок с ЧПУ, производитель XYZ Corp."
+    },
+    {
+      id: 2,
+      name: "Конвейерная линия A-12",
+      type: "Конвейер",
+      serial: "CONV-A12-045",
+      inventory: "INV-1042",
+      status: "active",
+      lastMaintenance: "2023-05-20",
+      nextMaintenance: "2023-06-20",
+      maintenanceInterval: 30,
+      description: "Конвейерная линия для сборки продукции"
+    },
+    {
+      id: 3,
+      name: "Воздушный компрессор V-50",
+      type: "Компрессор",
+      serial: "COMP-V50-112",
+      inventory: "INV-1078",
+      status: "maintenance",
+      lastMaintenance: "2023-04-10",
+      nextMaintenance: "2023-06-10",
+      maintenanceInterval: 60,
+      description: "Промышленный воздушный компрессор"
+    }
+  ]);
+  const [users, setUsers] = useState([
+    { id: 1, name: "Иван Петров", role: "admin", email: "ivan@example.com" },
+    { id: 2, name: "Петр Смирнов", role: "engineer", email: "petr@example.com" },
+    { id: 3, name: "Анна Иванова", role: "viewer", email: "anna@example.com" }
+  ]);
+  const [maintenanceEvents, setMaintenanceEvents] = useState([
+    { equipmentId: 1, date: "2023-06-15", status: "planned", responsible: "Иван Петров" },
+    { equipmentId: 2, date: "2023-06-20", status: "planned", responsible: "Петр Смирнов" },
+    { equipmentId: 3, date: "2023-06-10", status: "overdue", responsible: "Анна Иванова" }
+  ]);
+  const [newEquipment, setNewEquipment] = useState({
+    name: '',
+    type: '',
+    serial: '',
+    inventory: '',
+    commissionDate: '',
+    maintenanceInterval: 30,
+    description: ''
+  });
+  const [editEquipment, setEditEquipment] = useState(null);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  // Refs for form validation
+  const formRef = useRef(null);
+  const editFormRef = useRef(null);
+  // Format date to DD.MM.YYYY
+  const formatDate = (dateString) => {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = date.getFullYear();
+    return `${day}.${month}.${year}`;
+  };
+  // Calculate next maintenance date
+  const calculateNextMaintenanceDate = (commissionDate, intervalDays) => {
+    if (!commissionDate) return '';
+    const intervalMs = parseInt(intervalDays) * 24 * 60 * 60 * 1000;
+    const nextDate = new Date(new Date(commissionDate).getTime() + intervalMs);
+    return nextDate.toISOString().split('T')[0];
+  };
+  // Handle add equipment modal
+  const openAddModal = () => {
+    setNewEquipment({
+      name: '',
+      type: '',
+      serial: '',
+      inventory: '',
+      commissionDate: '',
+      maintenanceInterval: 30,
+      description: ''
+    });
+    setShowAddModal(true);
+  };
+  const closeAddModal = () => {
+    setShowAddModal(false);
+    setNewEquipment({
+      name: '',
+      type: '',
+      serial: '',
+      inventory: '',
+      commissionDate: '',
+      maintenanceInterval: 30,
+      description: ''
+    });
+  };
+  // Save new equipment
+  const saveEquipment = () => {
+    // Validate form
+    let isValid = true;
+    const inputs = formRef.current.querySelectorAll('[required]');
+    inputs.forEach(input => {
+      if (!input.value.trim()) {
+        input.classList.add('border-red-500');
+        isValid = false;
+      } else {
+        input.classList.remove('border-red-500');
+      }
+    });
+    if (!isValid) {
+      alert('Пожалуйста, заполните все обязательные по��я');
+      return;
+    }
+    const newEq = {
+      ...newEquipment,
+      id: equipmentList.length + 1,
+      status: 'active'
+    };
+    setEquipmentList([...equipmentList, newEq]);
+    closeAddModal();
+    alert('Оборудование добавлено успешно!');
+  };
+  // Open edit modal
+  const openEditModal = (id) => {
+    const equipment = equipmentList.find(eq => eq.id === id);
+    if (equipment) {
+      setEditEquipment({...equipment});
+      setShowEditModal(true);
+    }
+  };
+  const closeEditModal = () => {
+    setShowEditModal(false);
+    setEditEquipment(null);
+  };
+  // Update equipment
+  const updateEquipment = () => {
+    // Validate form
+    let isValid = true;
+    const inputs = editFormRef.current.querySelectorAll('[required]');
+    inputs.forEach(input => {
+      if (!input.value.trim()) {
+        input.classList.add('border-red-500');
+        isValid = false;
+      } else {
+        input.classList.remove('border-red-500');
+      }
+    });
+    if (!isValid) {
+      alert('Пожалуйста, заполните все обязательные поля');
+      return;
+    }
+    setEquipmentList(equipmentList.map(eq =>
+      eq.id === editEquipment.id ? {...editEquipment} : eq
+    ));
+    closeEditModal();
+    alert('Изменения сохранены!');
+  };
+  // Delete equipment
+  const deleteEquipment = (id) => {
+    if (window.confirm('Вы уверены, что хотите удалить это оборудование?')) {
+      setEquipmentList(equipmentList.filter(eq => eq.id !== id));
+      alert('Оборудование удалено!');
+    }
+  };
+  // Dashboard stats
+  const dashboardStats = [
+    { title: "Всего оборудования", value: equipmentList.length, icon: "tools", color: "blue" },
+    { title: "Выполнено ТО", value: equipmentList.filter(eq => eq.lastMaintenance).length, icon: "check-circle", color: "green" },
+    { title: "Просрочено ТО", value: equipmentList.filter(eq =>
+      new Date(eq.nextMaintenance) < new Date()
+    ).length, icon: "exclamation-triangle", color: "yellow" },
+    { title: "Текущие ремонты", value: equipmentList.filter(eq => eq.status === "repair").length, icon: "wrench", color: "red" }
+  ];
+  // Render dashboard content
+  const renderDashboard = () => (
+    <div className="p-6">
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+        {dashboardStats.map((stat, index) => (
+          <div key={index} className="bg-white rounded-lg shadow p-6">
+            <div className="flex items-center">
+              <div className={`p-3 rounded-full bg-${stat.color}-100 text-${stat.color}-600 mr-4`}>
+                <i className={`fas fa-${stat.icon} text-xl`}></i>
+              </div>
+              <div>
+                <p className="text-sm text-gray-500">{stat.title}</p>
+                <h3 className="text-2xl font-bold">{stat.value}</h3>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* Equipment List */}
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="p-4 border-b flex justify-between items-center">
+          <h2 className="text-lg font-semibold">Оборудование</h2>
+          <button
+            onClick={openAddModal}
+            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"
+          >
+            <i className="fas fa-plus mr-2"></i> Добавить
+          </button>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Название</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Тип</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Последнее ТО</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {equipmentList.map((eq) => (
+                <tr key={eq.id}>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{eq.id}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{eq.name}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{eq.type}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <span className={`px-2 py-1 rounded-full text-xs font-semibold ${
+                      eq.status === 'active' ? 'bg-green-100 text-green-800' :
+                      eq.status === 'maintenance' ? 'bg-yellow-100 text-yellow-800' :
+                      'bg-red-100 text-red-800'
+                    }`}>
+                      {eq.status === 'active' ? 'Активно' :
+                       eq.status === 'maintenance' ? 'ТО' : 'Ремонт'}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {formatDate(eq.lastMaintenance)}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <button
+                      onClick={() => openEditModal(eq.id)}
+                      className="text-blue-600 hover:text-blue-900 mr-3"
+                    >
+                      <i className="fas fa-edit"></i>
+                    </button>
+                    <button
+                      onClick={() => deleteEquipment(eq.id)}
+                      className="text-red-600 hover:text-red-900"
+                    >
+                      <i className="fas fa-trash"></i>
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+  // Render schedule content
+  const renderSchedule = () => (
+    <div className="p-6">
+      <h2 className="text-2xl font-bold mb-6">График ТО</h2>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Calendar */}
+        <div className="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
+          <div className="p-4 border-b">
+            <h3 className="text-lg font-semibold">Календарь ТО</h3>
+          </div>
+          <div className="p-4">
+            <div className="flex justify-between items-center mb-4">
+              <h4 className="font-medium">Июнь 2023</h4>
+              <div className="flex space-x-2">
+                <button className="p-2 rounded-full hover:bg-gray-100">
+                  <i className="fas fa-chevron-left"></i>
+                </button>
+                <button className="p-2 rounded-full hover:bg-gray-100">
+                  <i className="fas fa-chevron-right"></i>
+                </button>
+              </div>
+            </div>
+            <div className="grid grid-cols-7 gap-1 mb-2">
+              {['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'].map(day => (
+                <div key={day} className="text-center text-xs font-medium text-gray-500">
+                  {day}
+                </div>
+              ))}
+            </div>
+            <div className="grid grid-cols-7 gap-1">
+              {[...Array(35)].map((_, i) => {
+                const day = i - 4; // Start from day -4 to simulate a real calendar
+                const hasEvent = maintenanceEvents.some(event =>
+                  new Date(event.date).getDate() === day &&
+                  new Date(event.date).getMonth() === 5 // June is month 5 in JS
+                );
+                return (
+                  <div
+                    key={i}
+                    className={`h-10 flex items-center justify-center border rounded cursor-pointer calendar-day ${
+                      hasEvent ? 'has-event bg-blue-50' : ''
+                    }`}
+                  >
+                    {day > 0 && day <= 30 ? day : ''}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+        {/* Upcoming Maintenance */}
+        <div className="bg-white rounded-lg shadow overflow-hidden">
+          <div className="p-4 border-b">
+            <h3 className="text-lg font-semibold">Предстоящие ТО</h3>
+          </div>
+          <div className="p-4">
+            <ul className="space-y-3">
+              {maintenanceEvents
+                .filter(event => event.status === 'planned')
+                .slice(0, 5)
+                .map((event, index) => {
+                  const equipment = equipmentList.find(eq => eq.id === event.equipmentId);
+                  const daysLeft = Math.ceil(
+                    (new Date(event.date) - new Date()) / (1000 * 60 * 60 * 24)
+                  );
+                  return (
+                    <li key={index} className="p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
+                      <div className="flex justify-between items-start">
+                        <div>
+                          <h4 className="font-medium">{equipment?.name || 'Неизвестное оборудование'}</h4>
+                          <p className="text-sm text-gray-500">{equipment?.type || ''}</p>
+                        </div>
+                        <span className="text-sm">
+                          {daysLeft < 0 ? (
+                            <span className="text-red-500">Просрочено на {Math.abs(daysLeft)} дн.</span>
+                          ) : daysLeft === 0 ? (
+                            <span className="text-yellow-600">Сегодня</span>
+                          ) : (
+                            `Через ${daysLeft} дн.`
+                          )}
+                        </span>
+                      </div>
+                      <div className="mt-2 flex justify-between items-center">
+                        <span className="text-sm">{formatDate(event.date)}</span>
+                        <span className="text-sm">{event.responsible}</span>
+                      </div>
+                    </li>
+                  );
+                })
+              }
+              {maintenanceEvents.filter(event => event.status === 'planned').length === 0 && (
+                <p className="text-gray-500 text-center py-4">Нет предстоящих ТО</p>
+              )}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+  // Render equipment content
+  const renderEquipment = () => (
+    <div className="p-6">
+      <h2 className="text-2xl font-bold mb-6">Оборудование</h2>
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="p-4 border-b flex justify-between items-center">
+          <h3 className="text-lg font-semibold">Список оборудования</h3>
+          <button
+            onClick={openAddModal}
+            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"
+          >
+            <i className="fas fa-plus mr-2"></i> Добавить
+          </button>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Название</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Тип</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Последнее ТО</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {equipmentList.map((eq) => (
+                <tr key={eq.id}>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{eq.id}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{eq.name}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{eq.type}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <span className={`px-2 py-1 rounded-full text-xs font-semibold ${
+                      eq.status === 'active' ? 'bg-green-100 text-green-800' :
+                      eq.status === 'maintenance' ? 'bg-yellow-100 text-yellow-800' :
+                      'bg-red-100 text-red-800'
+                    }`}>
+                      {eq.status === 'active' ? 'Активно' :
+                       eq.status === 'maintenance' ? 'ТО' : 'Ремонт'}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {formatDate(eq.lastMaintenance)}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <button
+                      onClick={() => openEditModal(eq.id)}
+                      className="text-blue-600 hover:text-blue-900 mr-3"
+                    >
+                      <i className="fas fa-edit"></i>
+                    </button>
+                    <button
+                      onClick={() => deleteEquipment(eq.id)}
+                      className="text-red-600 hover:text-red-900"
+                    >
+                      <i className="fas fa-trash"></i>
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+  // Render users content
+  const renderUsers = () => (
+    <div className="p-6">
+      <h2 className="text-2xl font-bold mb-6">Пользов��тели</h2>
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="p-4 border-b">
+          <h3 className="text-lg font-semibold">Список пользователей</h3>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Имя</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Роль</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {users.map((user) => (
+                <tr key={user.id}>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{user.name}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.email}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <span className={`px-2 py-1 rounded-full text-xs font-semibold ${
+                      user.role === 'admin' ? 'bg-purple-100 text-purple-800' :
+                      user.role === 'engineer' ? 'bg-blue-100 text-blue-800' :
+                      'bg-gray-100 text-gray-800'
+                    }`}>
+                      {user.role === 'admin' ? 'Администратор' :
+                       user.role === 'engineer' ? 'Инженер' : 'Просмотр'}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <button className="text-blue-600 hover:text-blue-900 mr-3">
+                      <i className="fas fa-edit"></i>
+                    </button>
+                    <button className="text-red-600 hover:text-red-900">
+                      <i className="fas fa-trash"></i>
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+  return (
+    <div className="flex h-screen overflow-hidden bg-gray-50">
+      {/* Sidebar */}
+      <div className={`sidebar bg-blue-800 text-white ${
+        isSidebarCollapsed ? 'collapsed w-16' : 'w-64'
+      } transition-all duration-300 flex flex-col`}>
+        <div className="p-4 flex items-center justify-between border-b border-blue-700">
+          <div className="flex items-center">
+            <i className="fas fa-cogs text-2xl mr-3"></i>
+            {!isSidebarCollapsed && <span className="sidebar-text text-xl font-bold">MES System</span>}
+          </div>
+          <button
+            onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
+            className="text-white hover:text-blue-200"
+          >
+            <i className="fas fa-bars"></i>
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          <nav className="p-4">
+            <div className="mb-6">
+              <p className="sidebar-text uppercase text-xs font-semibold text-blue-300 mb-2">Основное</p>
+              <button
+                onClick={() => setActiveTab('dashboard')}
+                className={`flex items-center py-2 px-3 rounded-lg w-full text-left ${
+                  activeTab === 'dashboard'
+                    ? 'bg-blue-700 text-white'
+                    : 'hover:bg-blue-700 text-white'
+                } mb-2`}
+              >
+                <i className="fas fa-tachometer-alt mr-3"></i>
+                {!isSidebarCollapsed && <span>Главная</span>}
+              </button>
+              <button
+                onClick={() => setActiveTab('schedule')}
+                className={`flex items-center py-2 px-3 rounded-lg w-full text-left ${
+                  activeTab === 'schedule'
+                    ? 'bg-blue-700 text-white'
+                    : 'hover:bg-blue-700 text-white'
+                } mb-2`}
+              >
+                <i className="fas fa-calendar-alt mr-3"></i>
+                {!isSidebarCollapsed && (
+                  <>
+                    <span>График ТО</span>
+                    <span className="ml-auto bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">3</span>
+                  </>
+                )}
+              </button>
+              <button
+                onClick={() => setActiveTab('equipment')}
+                className={`flex items-center py-2 px-3 rounded-lg w-full text-left ${
+                  activeTab === 'equipment'
+                    ? 'bg-blue-700 text-white'
+                    : 'hover:bg-blue-700 text-white'
+                } mb-2`}
+              >
+                <i className="fas fa-tools mr-3"></i>
+                {!isSidebarCollapsed && <span>Оборудование</span>}
+              </button>
+            </div>
+            <div className="mb-6">
+              <p className="sidebar-text uppercase text-xs font-semibold text-blue-300 mb-2">Учет</p>
+              <button
+                className="flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2 w-full text-left"
+              >
+                <i className="fas fa-wrench mr-3"></i>
+                {!isSidebarCollapsed && <span>Ремонтные работы</span>}
+              </button>
+              <button
+                className="flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2 w-full text-left"
+              >
+                <i className="fas fa-clipboard-check mr-3"></i>
+                {!isSidebarCollapsed && <span>Техническое обслуживание</span>}
+              </button>
+              <button
+                className="flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2 w-full text-left"
+              >
+                <i className="fas fa-chart-line mr-3"></i>
+                {!isSidebarCollapsed && <span>Отчеты</span>}
+              </button>
+            </div>
+            <div className="mb-6">
+              <p className="sidebar-text uppercase text-xs font-semibold text-blue-300 mb-2">Настройки</p>
+              <button
+                className="flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2 w-full text-left"
+              >
+                <i className="fas fa-bell mr-3"></i>
+                {!isSidebarCollapsed && <span>Оповещения</span>}
+              </button>
+              <button
+                onClick={() => setActiveTab('users')}
+                className={`flex items-center py-2 px-3 rounded-lg w-full text-left ${
+                  activeTab === 'users'
+                    ? 'bg-blue-700 text-white'
+                    : 'hover:bg-blue-700 text-white'
+                } mb-2`}
+              >
+                <i className="fas fa-users-cog mr-3"></i>
+                {!isSidebarCollapsed && <span>Пользователи</span>}
+              </button>
+            </div>
+          </nav>
+        </div>
+        <div className="p-4 border-t border-blue-700">
+          <div className="flex items-center">
+            <img
+              src="https://randomuser.me/api/portraits/men/32.jpg "
+              alt="User"
+              className="w-10 h-10 rounded-full mr-3"
+            />
+            {!isSidebarCollapsed && (
+              <div className="sidebar-text">
+                <p className="font-medium">Иван Петров</p>
+                <p className="text-xs text-blue-300">Администратор</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {/* Main Content */}
+      <div className="main-content flex-1 overflow-auto">
+        {/* Header */}
+        <header className="bg-white shadow-sm py-4 px-6 flex items-center justify-between">
+          <h1 className="text-2xl font-bold text-gray-800">
+            {activeTab === 'dashboard' && 'Главная панель'}
+            {activeTab === 'schedule' && 'График ТО'}
+            {activeTab === 'equipment' && 'Оборудование'}
+            {activeTab === 'users' && 'Пользователи'}
+          </h1>
+          <div className="flex items-center space-x-4">
+            <div className="relative">
+              <button className="p-2 rounded-full hover:bg-gray-100 relative">
+                <i className="fas fa-bell text-gray-600"></i>
+                <span className="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">5</span>
+              </button>
+            </div>
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="Поиск..."
+                className="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+              <i className="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+            </div>
+          </div>
+        </header>
+        {/* Content based on active tab */}
+        <div className="p-6">
+          {activeTab === 'dashboard' && renderDashboard()}
+          {activeTab === 'schedule' && renderSchedule()}
+          {activeTab === 'equipment' && renderEquipment()}
+          {activeTab === 'users' && renderUsers()}
+        </div>
+      </div>
+      {/* Add Equipment Modal */}
+      {showAddModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl">
+            <div className="p-4 border-b flex justify-between items-center">
+              <h3 className="text-lg font-semibold">Добавить новое оборудование</h3>
+              <button
+                onClick={closeAddModal}
+                className="text-gray-500 hover:text-gray-700"
+              >
+                <i className="fas fa-times"></i>
+              </button>
+            </div>
+            <div className="p-6">
+              <form ref={formRef}>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Название оборудования</label>
+                    <input
+                      type="text"
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      value={newEquipment.name}
+                      onChange={(e) => setNewEquipment({...newEquipment, name: e.target.value})}
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Тип оборудования</label>
+                    <select
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      value={newEquipment.type}
+                      onChange={(e) => setNewEquipment({...newEquipment, type: e.target.value})}
+                    >
+                      <option value="">Выберите тип</option>
+                      <option>Станок</option>
+                      <option>Конвейер</option>
+                      <option>Компрессор</option>
+                      <option>Генератор</option>
+                      <option>Насос</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Серийный номер</label>
+                    <input
+                      type="text"
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      value={newEquipment.serial}
+                      onChange={(e) => setNewEquipment({...newEquipment, serial: e.target.value})}
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Инвентарный номер</label>
+                    <input
+                      type="text"
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      value={newEquipment.inventory}
+                      onChange={(e) => setNewEquipment({...newEquipment, inventory: e.target.value})}
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Дата ввода в эксплуатацию</label>
+                    <input
+                      type="date"
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      value={newEquipment.commissionDate}
+                      onChange={(e) => setNewEquipment({...newEquipment, commissionDate: e.target.value})}
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Периодичность ТО (дни)</label>
+                    <input
+                      type="number"
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      min="1"
+                      value={newEquipment.maintenanceInterval}
+                      onChange={(e) => setNewEquipment({...newEquipment, maintenanceInterval: e.target.value})}
+                    />
+                  </div>
+                  <div className="md:col-span-2">
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Описание</label>
+                    <textarea
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      rows="3"
+                      value={newEquipment.description}
+                      onChange={(e) => setNewEquipment({...newEquipment, description: e.target.value})}
+                    ></textarea>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div className="p-4 border-t flex justify-end space-x-3">
+              <button
+                onClick={closeAddModal}
+                className="px-4 py-2 border rounded-lg hover:bg-gray-50"
+              >
+                Отмена
+              </button>
+              <button
+                onClick={saveEquipment}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+              >
+                Сохранить
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+      {/* Edit Equipment Modal */}
+      {showEditModal && editEquipment && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl">
+            <div className="p-4 border-b flex justify-between items-center">
+              <h3 className="text-lg font-semibold">Редактировать оборудование</h3>
+              <button
+                onClick={closeEditModal}
+                className="text-gray-500 hover:text-gray-700"
+              >
+                <i className="fas fa-times"></i>
+              </button>
+            </div>
+            <div className="p-6">
+              <form ref={editFormRef}>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Название оборудования</label>
+                    <input
+                      type="text"
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      value={editEquipment.name}
+                      onChange={(e) => setEditEquipment({...editEquipment, name: e.target.value})}
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Тип оборудования</label>
+                    <select
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      value={editEquipment.type}
+                      onChange={(e) => setEditEquipment({...editEquipment, type: e.target.value})}
+                    >
+                      <option value="">Выберите тип</option>
+                      <option>Станок</option>
+                      <option>Конвейер</option>
+                      <option>Компрессор</option>
+                      <option>Генератор</option>
+                      <option>Насос</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Серийный номер</label>
+                    <input
+                      type="text"
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      value={editEquipment.serial}
+                      onChange={(e) => setEditEquipment({...editEquipment, serial: e.target.value})}
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Инвентарный номер</label>
+                    <input
+                      type="text"
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      value={editEquipment.inventory}
+                      onChange={(e) => setEditEquipment({...editEquipment, inventory: e.target.value})}
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Дата ввода в эксплуатацию</label>
+                    <input
+                      type="date"
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      value={editEquipment.commissionDate}
+                      onChange={(e) => setEditEquipment({...editEquipment, commissionDate: e.target.value})}
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Периодичность ТО (дни)</label>
+                    <input
+                      type="number"
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      required
+                      min="1"
+                      value={editEquipment.maintenanceInterval}
+                      onChange={(e) => setEditEquipment({...editEquipment, maintenanceInterval: e.target.value})}
+                    />
+                  </div>
+                  <div className="md:col-span-2">
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Описание</label>
+                    <textarea
+                      className="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      rows="3"
+                      value={editEquipment.description}
+                      onChange={(e) => setEditEquipment({...editEquipment, description: e.target.value})}
+                    ></textarea>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div className="p-4 border-t flex justify-end space-x-3">
+              <button
+                onClick={closeEditModal}
+                className="px-4 py-2 border rounded-lg hover:bg-gray-50"
+              >
+                Отмена
+              </button>
+              <button
+                onClick={updateEquipment}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+              >
+                Сохранить изменения
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

prompts.txt ADDED Viewed

File without changes