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 = () => (
{/* Stats Cards */}
{dashboardStats.map((stat, index) => (

{stat.title}

{stat.value}

))}
{/* Equipment List */}

Оборудование

{equipmentList.map((eq) => ( ))}
ID Название Тип Статус Последнее ТО Действия
{eq.id} {eq.name} {eq.type} {eq.status === 'active' ? 'Активно' : eq.status === 'maintenance' ? 'ТО' : 'Ремонт'} {formatDate(eq.lastMaintenance)}
); // Render schedule content const renderSchedule = () => (

График ТО

{/* Calendar */}

Календарь ТО

Июнь 2023

{['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'].map(day => (
{day}
))}
{[...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 (
{day > 0 && day <= 30 ? day : ''}
); })}
{/* Upcoming Maintenance */}

Предстоящие ТО

    {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 (

  • {equipment?.name || 'Неизвестное оборудование'}

    {equipment?.type || ''}

    {daysLeft < 0 ? ( Просрочено на {Math.abs(daysLeft)} дн. ) : daysLeft === 0 ? ( Сегодня ) : ( `Через ${daysLeft} дн.` )}
    {formatDate(event.date)} {event.responsible}
    • ); }) } {maintenanceEvents.filter(event => event.status === 'planned').length === 0 && (

    Нет предстоящих ТО

    )}
); // Render equipment content const renderEquipment = () => (

Оборудование

Список оборудования

{equipmentList.map((eq) => ( ))}
ID Название Тип Статус Последнее ТО Действия
{eq.id} {eq.name} {eq.type} {eq.status === 'active' ? 'Активно' : eq.status === 'maintenance' ? 'ТО' : 'Ремонт'} {formatDate(eq.lastMaintenance)}
); // Render users content const renderUsers = () => (

Пользователи

Список пользователей

{users.map((user) => ( ))}
Имя Email Роль Действия
{user.name} {user.email} {user.role === 'admin' ? 'Администратор' : user.role === 'engineer' ? 'Инженер' : 'Просмотр'}
); return (
{/* Sidebar */}
{!isSidebarCollapsed && MES System}
User {!isSidebarCollapsed && (

Иван Петров

Администратор

)}
{/* Main Content */}
{/* Header */}

{activeTab === 'dashboard' && 'Главная панель'} {activeTab === 'schedule' && 'График ТО'} {activeTab === 'equipment' && 'Оборудование'} {activeTab === 'users' && 'Пользователи'}

{/* Content based on active tab */}
{activeTab === 'dashboard' && renderDashboard()} {activeTab === 'schedule' && renderSchedule()} {activeTab === 'equipment' && renderEquipment()} {activeTab === 'users' && renderUsers()}
{/* Add Equipment Modal */} {showAddModal && (

Добавить новое оборудование

setNewEquipment({...newEquipment, name: e.target.value})} />
setNewEquipment({...newEquipment, serial: e.target.value})} />
setNewEquipment({...newEquipment, inventory: e.target.value})} />
setNewEquipment({...newEquipment, commissionDate: e.target.value})} />
setNewEquipment({...newEquipment, maintenanceInterval: e.target.value})} />
)} {/* Edit Equipment Modal */} {showEditModal && editEquipment && (

Редактировать оборудование

setEditEquipment({...editEquipment, name: e.target.value})} />
setEditEquipment({...editEquipment, serial: e.target.value})} />
setEditEquipment({...editEquipment, inventory: e.target.value})} />
setEditEquipment({...editEquipment, commissionDate: e.target.value})} />
setEditEquipment({...editEquipment, maintenanceInterval: e.target.value})} />
)}
); }