Upload 21 files

.env

@@ -0,0 +1,2 @@
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.env

Dockerfile

@@ -0,0 +1,18 @@
+# Используем официальный образ Node.js
+FROM node:20-alpine
+
+# Устанавливаем рабочую директорию
+WORKDIR /usr/src/app
+
+# Копируем package.json и устанавливаем зависимости
+COPY package*.json ./
+RUN npm install
+
+# Копируем исходные файлы
+COPY . .
+
+# Экспортируем порт
+EXPOSE 3000
+
+# Запускаем приложение
+CMD ["npm", "start"]

dist/assets/browser-BRznvupi.js

@@ -0,0 +1 @@
+import{g as e}from"./index-B-0vcdVA.js";var o=function(){throw new Error("ws does not work in the browser. Browser clients must use the native WebSocket object")};const r=e(o),s=Object.freeze(Object.defineProperty({__proto__:null,default:r},Symbol.toStringTag,{value:"Module"}));export{s as b};

dist/assets/index-B-2Hy4_l.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-16{margin-left:4rem}.ml-64{margin-left:16rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.flex{display:flex}.table{display:table}.grid{display:grid}.h-5{height:1.25rem}.h-64{height:16rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-16{width:4rem}.w-5{width:1.25rem}.w-64{width:16rem}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(229 231 235 / var(--tw-divide-opacity, 1))}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.border-yellow-500{--tw-border-opacity: 1;border-color:rgb(234 179 8 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-blue-700{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.bg-blue-800{--tw-bg-opacity: 1;background-color:rgb(30 64 175 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.bg-red-100{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-yellow-100{--tw-bg-opacity: 1;background-color:rgb(254 249 195 / var(--tw-bg-opacity, 1))}.bg-opacity-70{--tw-bg-opacity: .7}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-2{padding-bottom:.5rem}.text-left{text-align:left}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-800{--tw-text-opacity: 1;color:rgb(22 101 52 / var(--tw-text-opacity, 1))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.text-red-800{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-800{--tw-text-opacity: 1;color:rgb(133 77 14 / var(--tw-text-opacity, 1))}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0;min-width:320px;min-height:100vh}.notification-badge{position:absolute;top:0;right:0;font-size:.625rem;line-height:1.25rem;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;border-radius:9999px}.has-event:hover{background-color:#bfdbfe!important}.hover\:bg-blue-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-red-600:hover{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.hover\:text-blue-200:hover{--tw-text-opacity: 1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.hover\:text-blue-800:hover{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.hover\:text-red-800:hover{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity, 1))}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

dist/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>MES System</title>
+  <script type="module" crossorigin src="/assets/index-B-0vcdVA.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-B-2Hy4_l.css">
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

index.html

@@ -1,29 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
-
+<html lang="ru">
 <head>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="style.css" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>MES System</title>
 </head>
-
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
-
-    <script src="index.js" type="module"></script>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
 </body>
-
 </html>

index.js

@@ -1,76 +1,3 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.4.1';
+// run `node index.js` in the terminal
 
-// Reference the elements that we will need
-const status = document.getElementById('status');
-const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
-const example = document.getElementById('example');
-
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
-
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
-
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
-});
-
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
-
-    const reader = new FileReader();
-
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
-
-    reader.readAsDataURL(file);
-});
-
-
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
-
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
-}
-
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
-
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
-
-    // Draw the box
-    const boxElement = document.createElement('div');
-    boxElement.className = 'bounding-box';
-    Object.assign(boxElement.style, {
-        borderColor: color,
-        left: 100 * xmin + '%',
-        top: 100 * ymin + '%',
-        width: 100 * (xmax - xmin) + '%',
-        height: 100 * (ymax - ymin) + '%',
-    })
-
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
-
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
-}
+console.log(`Hello Node.js v${process.versions.node}!`);

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "mes-frontend",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@supabase/supabase-js": "^2.39.3",
+    "chart.js": "^4.4.1",
+    "react-chartjs-2": "^5.2.0",
+    "sweetalert2": "^11.10.4",
+    "xlsx": "^0.18.5",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.0.12"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/index.html

@@ -0,0 +1,545 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>MES System</title>
+  <script src="https://cdn.tailwindcss.com "></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css "/>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js "></script>
+  <script src="https://cdn.jsdelivr.net/npm/sweetalert2 @11"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js "></script>
+  <style>
+    .notification-badge {
+      position: absolute;
+      top: 0; right: 0;
+      font-size: 0.625rem; line-height: 1.25rem;
+      width: 1.25rem; height: 1.25rem;
+      display: flex; align-items: center; justify-content: center;
+      border-radius: 9999px;
+    }
+    .has-event:hover { background-color: #BFDBFE !important; }
+  </style>
+</head>
+<body class="bg-gray-100 text-gray-900">
+
+<!-- Login Modal -->
+<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+  <div class="bg-white rounded-lg shadow-lg w-full max-w-md p-6">
+    <h3 class="text-xl font-bold mb-4">Вход в систему</h3>
+    <form id="loginForm" class="space-y-4">
+      <input type="text" placeholder="Имя пользователя" required class="w-full px-4 py-2 border rounded-lg">
+      <input type="password" placeholder="Пароль" required class="w-full px-4 py-2 border rounded-lg">
+      <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg">Войти</button>
+    </form>
+  </div>
+</div>
+
+<!-- Sidebar -->
+<div id="sidebar" class="fixed top-0 left-0 h-full bg-blue-800 text-white w-64 p-4 hidden">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-xl font-bold">MES System</h1>
+    <button onclick="toggleSidebar()" class="text-white hover:text-blue-200"><i class="fas fa-bars"></i></button>
+  </div>
+
+  <nav>
+    <ul class="space-y-2">
+      <li><button onclick="showTab('dashboard')" class="tab-btn active w-full text-left px-4 py-2 rounded-lg bg-blue-700"><i class="fas fa-tachometer-alt mr-2"></i> Главная</button></li>
+      <li><button onclick="showTab('schedule')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-calendar-alt mr-2"></i> График ТО</button></li>
+      <li><button onclick="showTab('equipment')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-tools mr-2"></i> Оборудование</button></li>
+      <li><button onclick="showTab('repairs')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-wrench mr-2"></i> Ремонт</button></li>
+      <li><button onclick="showTab('maintenance')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-clipboard-check mr-2"></i> Техобслуживание</button></li>
+      <li><button onclick="showTab('reports')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-chart-line mr-2"></i> Отчеты</button></li>
+      <li><button onclick="showTab('users')" class="tab-btn w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700"><i class="fas fa-users-cog mr-2"></i> Пользователи</button></li>
+    </ul>
+  </nav>
+</div>
+
+<!-- Main Content -->
+<div id="mainContent" class="ml-64 p-6 min-h-screen hidden">
+  <!-- Header -->
+  <header class="bg-white shadow-sm p-4 rounded-lg mb-6 flex justify-between items-center">
+    <h1 id="page-title" class="text-2xl font-semibold">Главная панель</h1>
+    <div class="flex space-x-4">
+      <button class="p-2 rounded-full hover:bg-gray-100 relative">
+        <i class="fas fa-bell text-gray-600"></i>
+        <span class="notification-badge bg-red-500 text-white">3</span>
+      </button>
+      <div class="relative">
+        <input type="text" id="searchInput" oninput="filterEquipment()" placeholder="Поиск..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+      </div>
+    </div>
+  </header>
+
+  <!-- Tabs -->
+  <div id="content" class="bg-white rounded-lg shadow p-6">
+    
+    <!-- Dashboard Tab -->
+    <div id="dashboard" class="tab-content active">
+      <h2 class="text-2xl font-bold mb-6">Главная панель</h2>
+      
+      <!-- Stats Cards -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
+          <h4 class="font-medium text-gray-500">Всего оборудования</h4>
+          <p id="total-equipment" class="text-2xl font-bold">0</p>
+        </div>
+        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
+          <h4 class="font-medium text-gray-500">Выполнено ТО</h4>
+          <p id="completed-maintenance" class="text-2xl font-bold">0</p>
+        </div>
+        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500">
+          <h4 class="font-medium text-gray-500">Просрочено ТО</h4>
+          <p id="overdue-maintenance" class="text-2xl font-bold">0</p>
+        </div>
+        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-red-500">
+          <h4 class="font-medium text-gray-500">Текущие ремонты</h4>
+          <p id="current-repairs" class="text-2xl font-bold">0</p>
+        </div>
+      </div>
+
+      <!-- Equipment Table -->
+      <div class="bg-white rounded-lg shadow overflow-hidden">
+        <div class="p-4 border-b flex justify-between items-center">
+          <h2 class="text-lg font-semibold">Оборудование</h2>
+          <a href="#equipment" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">Перейти к оборудованию</a>
+        </div>
+        <div class="overflow-x-auto">
+          <table id="dashboard-table" class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">ID</th>
+                <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Название</th>
+                <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Статус</th>
+                <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Последнее ТО</th>
+              </tr>
+            </thead>
+            <tbody id="dashboard-body" class="bg-white divide-y divide-gray-200"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Equipment Tab -->
+    <div id="equipment" class="tab-content hidden">
+      <div class="mb-4 flex justify-between items-center">
+        <h2 class="text-2xl font-bold">Оборудование</h2>
+        <button onclick="openAddEquipmentModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
+          <i class="fas fa-plus mr-2"></i> Добавить оборудование
+        </button>
+      </div>
+
+      <div class="mb-4 flex space-x-4">
+        <select id="statusFilter" onchange="filterEquipment()" class="border rounded-lg px-4 py-2">
+          <option value="">Все статусы</option>
+          <option value="active">Активно</option>
+          <option value="maintenance">ТО</option>
+          <option value="repair">Ремонт</option>
+        </select>
+        <select id="typeFilter" onchange="filterEquipment()" class="border rounded-lg px-4 py-2">
+          <option value="">Все типы</option>
+          <option>Станок</option>
+          <option>Конвейер</option>
+          <option>Компрессор</option>
+          <option>Генератор</option>
+          <option>Насос</option>
+        </select>
+        <input type="text" id="inventoryFilter" oninput="filterEquipment()" placeholder="Инвентарный номер" class="border rounded-lg px-4 py-2 w-1/4">
+        <div class="flex items-center space-x-2">
+          <input type="date" id="dateFrom" oninput="filterEquipment()" class="border rounded-lg px-4 py-2">
+          <span>-</span>
+          <input type="date" id="dateTo" oninput="filterEquipment()" class="border rounded-lg px-4 py-2">
+        </div>
+      </div>
+
+      <div class="bg-white rounded-lg shadow overflow-hidden">
+        <div class="overflow-x-auto">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">ID</th>
+                <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Название</th>
+                <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Тип</th>
+                <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Статус</th>
+                <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Ответственный</th>
+                <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Действия</th>
+              </tr>
+            </thead>
+            <tbody id="equipment-list" class="bg-white divide-y divide-gray-200"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Schedule Tab -->
+    <div id="schedule" class="tab-content hidden">
+      <h2 class="text-2xl font-bold mb-6">График ТО</h2>
+      <div class="bg-white rounded-lg shadow p-6">
+        <h3 class="text-lg font-semibold mb-4">Календарь ТО</h3>
+        <div class="grid grid-cols-7 gap-1 mb-2">
+          <div class="text-center text-sm font-medium text-gray-500">Пн</div>
+          <div class="text-center text-sm font-medium text-gray-500">Вт</div>
+          <div class="text-center text-sm font-medium text-gray-500">Ср</div>
+          <div class="text-center text-sm font-medium text-gray-500">Чт</div>
+          <div class="text-center text-sm font-medium text-gray-500">Пт</div>
+          <div class="text-center text-sm font-medium text-gray-500">Сб</div>
+          <div class="text-center text-sm font-medium text-gray-500">Вс</div>
+        </div>
+        <div id="calendar" class="grid grid-cols-7 gap-1 h-64 overflow-y-auto"></div>
+      </div>
+    </div>
+
+    <!-- Maintenance Tab -->
+    <div id="maintenance" class="tab-content hidden">
+      <h2 class="text-2xl font-bold mb-6">Техническое обслуживание</h2>
+      <div class="bg-white rounded-lg shadow p-6">
+        <h3 class="text-lg font-semibold mb-4">Задачи технического обслуживания</h3>
+        <div class="space-y-4" id="maintenanceTasks"></div>
+      </div>
+    </div>
+
+    <!-- Reports Tab -->
+    <div id="reports" class="tab-content hidden">
+      <h2 class="text-2xl font-bold mb-6">Отчеты</h2>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="bg-white rounded-lg shadow p-6">
+          <h3 class="text-lg font-semibold mb-4">Статистика ТО по месяцам</h3>
+          <canvas id="maintenanceChart" width="400" height="250"></canvas>
+        </div>
+        <div class="bg-white rounded-lg shadow p-6">
+          <h3 class="text-lg font-semibold mb-4">Статус оборудования</h3>
+          <canvas id="equipmentStatusChart" width="400" height="250"></canvas>
+        </div>
+      </div>
+    </div>
+
+    <!-- Users Tab -->
+    <div id="users" class="tab-content hidden">
+      <h2 class="text-2xl font-bold mb-6">Пользователи</h2>
+      <div class="bg-white rounded-lg shadow p-6">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Имя</th>
+              <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Email</th>
+              <th class="px-6 py-3 text-left text-xs uppercase tracking-wider">Роль</th>
+            </tr>
+          </thead>
+          <tbody id="user-list" class="bg-white divide-y divide-gray-200"></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Add Equipment Modal -->
+<div id="addEquipmentModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+  <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl">
+    <div class="p-4 border-b flex justify-between items-center">
+      <h3 class="text-lg font-semibold">Добавить новое оборудование</h3>
+      <button onclick="closeAddEquipmentModal()" class="text-gray-500 hover:text-gray-700">&times;</button>
+    </div>
+    <form id="equipmentForm" class="p-6 space-y-4">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Название оборудования</label>
+          <input type="text" name="name" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500">
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Тип оборудования</label>
+          <select name="type" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500">
+            <option value="">Выберите тип</option>
+            <option>Станок</option>
+            <option>Конвейер</option>
+            <option>Компрессор</option>
+            <option>Генератор</option>
+            <option>Насос</option>
+          </select>
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Серийный номер</label>
+          <input type="text" name="serial" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500">
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Инвентарный номер</label>
+          <input type="text" name="inventory" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500">
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Дата ввода в эксплуатацию</label>
+          <input type="date" name="commissionDate" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500">
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Периодичность ТО (дни)</label>
+          <input type="number" name="interval" required min="1" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500">
+        </div>
+        <div class="md:col-span-2">
+          <label class="block text-sm font-medium text-gray-700 mb-1">О��исание</label>
+          <textarea name="description" rows="3" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500"></textarea>
+        </div>
+      </div>
+      <div class="mt-4 flex justify-end space-x-2">
+        <button type="button" onclick="closeAddEquipmentModal()" class="border px-4 py-2 rounded hover:bg-gray-100">Отмена</button>
+        <button type="submit" onclick="saveEquipment(event)" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Сохранить</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<script>
+  // Load data from localStorage or use defaultconst equipmentData = JSON.parse(localStorage.getItem("equipment")) || [{id: 1,name: "5-ти осевой фрезерный центр Nmill 1400",type: "Станок",serial: "CNC2000-001",inventory: "INV-1001",status: "active",lastMaintenance: "",nextMaintenance: "2023-06-15",maintenanceInterval: 30,description: "5-ти осевой фрезерный центр"},{id: 2,name: "3-х осевой фрезерный центр Mikron HPM 600HD",type: "Станок",serial: "CONV-A12-045",inventory: "INV-1042",status: "active",lastMaintenance: "",nextMaintenance: "2023-06-20",maintenanceInterval: 30,description: "3-х осевой фрезерный центр"}];let maintenanceEvents = JSON.parse(localStorage.getItem("maintenanceEvents")) || [{equipmentId: 1,date: "2023-06-15",status: "planned",responsible: "Иванов А.П."},{equipmentId: 2,date: "2023-06-20",status: "planned",responsible: "Петров И.С."}];let repairEvents = JSON.parse(localStorage.getItem("repairEvents")) || [];let currentEditingEquipmentId = null;let currentEditingRepairId = null;function saveToLocalStorage() {localStorage.setItem("equipment", JSON.stringify(equipmentData));localStorage.setItem("maintenanceEvents", JSON.stringify(maintenanceEvents));localStorage.setItem("repairEvents", JSON.stringify(repairEvents));}
+
+  function formatDate(dateStr) {
+    if (!dateStr) return "";
+    const d = new Date(dateStr);
+    return `${d.getDate()}.${d.getMonth()+1}.${d.getFullYear()}`;
+  }
+
+  function calculateNextMaintenanceDate(commissionDate, intervalDays) {
+    if (!commissionDate) return '';
+    const nextDate = new Date(new Date(commissionDate).getTime() + parseInt(intervalDays)*24*60*60*1000);
+    return nextDate.toISOString().split('T')[0];
+  }
+
+  function toggleSidebar() {
+    const sidebar = document.getElementById("sidebar");
+    const isCollapsed = sidebar.classList.contains("collapsed");
+    sidebar.classList.toggle("collapsed", !isCollapsed);
+    document.querySelector(".ml-64").classList.toggle("ml-16", !isCollapsed);
+  }
+
+  function showTab(tabId) {
+    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+    document.getElementById(tabId).classList.remove('hidden');
+    document.getElementById('page-title').innerText = tabId === 'dashboard' ? 'Главная панель' : tabId === 'schedule' ? 'График ТО' : tabId.charAt(0).toUpperCase() + tabId.slice(1);
+
+    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('bg-blue-700'));
+    event.target.classList.add('bg-blue-700');
+  }
+
+  function openAddEquipmentModal() {
+    document.getElementById("addEquipmentModal").classList.remove("hidden");
+  }
+
+  function closeAddEquipmentModal() {
+    document.getElementById("addEquipmentModal").classList.add("hidden");
+    document.getElementById("equipmentForm").reset();
+  }
+
+  function saveEquipment(event) {
+    event.preventDefault();
+    const form = document.getElementById("equipmentForm");
+    const formData = new FormData(form);
+    const name = formData.get("name");
+    const type = formData.get("type");
+    const serial = formData.get("serial");
+    const inventory = formData.get("inventory");
+    const commissionDate = formData.get("commissionDate");
+    const interval = formData.get("interval");
+    const description = formData.get("description");
+
+    if (!name || !type || !serial || !inventory || !commissionDate || !interval) {
+      Swal.fire({ title: 'Ошибка', text: 'Заполните все обязательные поля', icon: 'error' });
+      return;
+    }
+
+    const newEq = {
+      id: Math.max(...equipmentData.map(e => e.id)) + 1,
+      name, type, serial, inventory, status: "active",
+      lastMaintenance: "",
+      nextMaintenance: calculateNextMaintenanceDate(commissionDate, interval),
+      maintenanceInterval: interval,
+      description
+    };
+
+    equipmentData.push(newEq);
+    closeAddEquipmentModal();
+    renderAll();
+    Swal.fire({ title: 'Успешно', text: 'Оборудование добавлено', icon: 'success' });
+  }
+
+  function editEquipment(id) {
+    const equipment = equipmentData.find(eq => eq.id === id);
+    currentEditingEquipmentId = id;
+    document.getElementById("editName").value = equipment.name;
+    document.getElementById("editType").value = equipment.type;
+    document.getElementById("editSerial").value = equipment.serial;
+    document.getElementById("editInventory").value = equipment.inventory;
+    document.getElementById("editCommissionDate").value = equipment.commissionDate;
+    document.getElementById("editMaintenanceInterval").value = equipment.maintenanceInterval;
+    document.getElementById("editDescription").value = equipment.description;
+    document.getElementById("editEquipmentModal").classList.remove("hidden");
+  }
+
+  function deleteEquipment(id) {
+    Swal.fire({
+      title: 'Подтвердите удаление',
+      text: 'Вы уверены, что хотите удалить это оборудование?',
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonText: 'Да, удалить',
+      cancelButtonText: 'Отмена'
+    }).then(result => {
+      if (result.isConfirmed) {
+        equipmentData = equipmentData.filter(eq => eq.id !== id);
+        renderAll();
+        Swal.fire('Удалено!', 'Оборудование успешно удалено.', 'success');
+      }
+    });
+  }
+
+  function generateCalendar() {
+    const calendar = document.getElementById("calendar");
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = today.getMonth();
+    const firstDay = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;
+    calendar.innerHTML = '';
+
+    for (let i = 0; i < 42; i++) {
+      const day = i - adjustedFirstDay + 1;
+      const cell = document.createElement("div");
+      if (day > 0 && day <= daysInMonth) {
+        const dateStr = `${year}-${String(month+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
+        cell.textContent = day;
+        cell.className = "h-10 flex items-center justify-center border rounded cursor-pointer";
+        if (maintenanceEvents.some(ev => ev.date === dateStr)) {
+          cell.style.backgroundColor = "#BFDBFE";
+        }
+        cell.onclick = () => showDayEvents(day);
+      } else {
+        cell.textContent = "";
+      }
+      calendar.appendChild(cell);
+    }
+  }
+
+  function showDayEvents(day) {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = today.getMonth();
+    const dateStr = `${year}-${String(month+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
+    const events = maintenanceEvents.filter(ev => ev.date === dateStr);
+    let html = `<h3 class="font-bold mb-2">${day} ${getMonthName(month)} ${year}</h3>`;
+    html += '<div class="space-y-2">';
+    events.forEach(event => {
+      const equipment = equipmentData.find(e => e.id === event.equipmentId);
+      html += `<div class="p-2 border rounded">${equipment?.name || 'Неизвестное оборудование'}<br><small>${event.responsible}</small></div>`;
+    });
+    html += '</div>';
+    if (events.length === 0) {
+      html = `<h3 class="font-bold mb-2">${day} ${getMonthName(month)} ${year}</h3><p>Нет запланированных работы</p>`;
+    }
+    Swal.fire({ html, icon: 'info', showConfirmButton: false, width: '500px' });
+  }
+
+  function getMonthName(monthIndex) {
+    const months = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июл','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'];
+    return months[monthIndex];
+  }
+
+  function updateDashboardStats() {
+    document.getElementById("total-equipment").textContent = equipmentData.length;
+    document.getElementById("completed-maintenance").textContent = equipmentData.filter(e => e.lastMaintenance).length;
+    document.getElementById("overdue-maintenance").textContent = equipmentData.filter(e => new Date(e.nextMaintenance) < new Date()).length;
+    document.getElementById("current-repairs").textContent = equipmentData.filter(e => e.status === "repair").length;
+  }
+
+  function renderEquipmentTable() {
+    const tbody = document.getElementById("equipment-list");
+    const dashboardTbody = document.getElementById("dashboard-body");
+    tbody.innerHTML = '';
+    dashboardTbody.innerHTML = '';
+
+    const filterStatus = document.getElementById("statusFilter")?.value || '';
+    const filterType = document.getElementById("typeFilter")?.value || '';
+    const filterInventory = document.getElementById("inventoryFilter")?.value.toLowerCase() || '';
+    const filterId = document.getElementById("idFilter")?.value || '';
+    const filterDateFrom = document.getElementById("dateFrom")?.value;
+    const filterDateTo = document.getElementById("dateTo")?.value;
+
+    equipmentData.filter(eq => {
+      return (
+        (!filterStatus || eq.status === filterStatus) &&
+        (!filterType || eq.type === filterType) &&
+        (!filterInventory || eq.inventory.toLowerCase().includes(filterInventory)) &&
+        (!filterId || eq.id.toString().includes(filterId)) &&
+        (!filterDateFrom || new Date(eq.nextMaintenance) >= new Date(filterDateFrom)) &&
+        (!filterDateTo || new Date(eq.nextMaintenance) <= new Date(filterDateTo))
+      );
+    }).forEach(eq => {
+      const row = document.createElement("tr");
+      row.innerHTML = `
+        <td class="px-6 py-4">${eq.id}</td>
+        <td class="px-6 py-4">${eq.name}</td>
+        <td class="px-6 py-4">${eq.type}</td>
+        <td class="px-6 py-4">
+          <span class="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 class="px-6 py-4">
+          <button onclick="editEquipment(${eq.id})" class="text-blue-600 hover:text-blue-800 mr-3"><i class="fas fa-edit"></i></button>
+          <button onclick="deleteEquipment(${eq.id})" class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
+        </td>
+      `;
+      tbody.appendChild(row);
+
+      const dashRow = document.createElement("tr");
+      dashRow.innerHTML = `
+        <td class="px-6 py-4">${eq.id}</td>
+        <td class="px-6 py-4">${eq.name}</td>
+        <td class="px-6 py-4">
+          <span class="px-2 py-1 rounded-full text-xs font-semibold ${eq.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}">
+            ${eq.status === 'active' ? 'Активно' : 'ТО'}
+          </span>
+        </td>
+        <td class="px-6 py-4">${formatDate(eq.lastMaintenance)}</td>
+      `;
+      dashboardTbody.appendChild(dashRow);
+    });
+  }
+
+  function exportFilteredToExcel() {
+    const wb = XLSX.utils.table_to_book(document.getElementById("equipment-table"));
+    XLSX.writeFile(wb, "filtered-equipment.xlsx");
+  }
+
+  function logout() {
+    localStorage.removeItem("loggedInUser");
+    location.reload();
+  }
+
+  function renderAll() {
+    renderEquipmentTable();
+    updateDashboardStats();
+    generateCalendar();
+  }
+
+  function initApp() {
+    const loggedInUser = localStorage.getItem("loggedInUser");
+    if (!loggedInUser) {
+      document.getElementById("loginModal").classList.remove("hidden");
+    } else {
+      document.getElementById("loginModal").remove();
+      document.getElementById("mainContent").classList.remove("hidden");
+      document.getElementById("sidebar").classList.remove("hidden");
+      renderAll();
+    }
+  }
+
+  document.getElementById("loginForm")?.addEventListener("submit", function(e) {
+    e.preventDefault();
+    const username = this[0].value;
+    const password = this[1].value;
+    if (username && password) {
+      localStorage.setItem("loggedInUser", "admin");
+      document.getElementById("loginModal").classList.add("hidden");
+      renderAll();
+    }
+  });
+
+  window.onload = initApp;
+</script>

src/App.jsx

@@ -0,0 +1,251 @@
+import React, { useState, useEffect } from 'react';
+import { createClient } from '@supabase/supabase-js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTachometerAlt, faCalendarAlt, faTools, faWrench, faClipboardCheck, faChartLine, faUsersCog, faBell, faBars } from '@fortawesome/free-solid-svg-icons';
+import Swal from 'sweetalert2';
+import Dashboard from './components/Dashboard';
+import Equipment from './components/Equipment';
+
+// Initialize Supabase client
+const supabase = createClient(
+  import.meta.env.VITE_SUPABASE_URL,
+  import.meta.env.VITE_SUPABASE_ANON_KEY
+);
+
+function App() {
+  const [currentTab, setCurrentTab] = useState('dashboard');
+  const [equipment, setEquipment] = useState([]);
+  const [maintenanceEvents, setMaintenanceEvents] = useState([]);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+  useEffect(() => {
+    const checkUser = async () => {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (user) {
+        setIsLoggedIn(true);
+        loadData();
+      }
+    };
+    checkUser();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      const [equipmentResult, eventsResult] = await Promise.all([
+        supabase.from('equipment').select('*').order('created_at', { ascending: false }),
+        supabase.from('maintenance_events').select('*').order('date', { ascending: false })
+      ]);
+
+      if (equipmentResult.error) throw equipmentResult.error;
+      if (eventsResult.error) throw eventsResult.error;
+
+      setEquipment(equipmentResult.data || []);
+      setMaintenanceEvents(eventsResult.data || []);
+    } catch (error) {
+      console.error('Error loading data:', error);
+      Swal.fire({
+        title: 'Ошибка',
+        text: 'Не удалось загрузить данные',
+        icon: 'error'
+      });
+    }
+  };
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const email = formData.get('email');
+    const password = formData.get('password');
+
+    try {
+      const { error } = await supabase.auth.signInWithPassword({
+        email,
+        password
+      });
+
+      if (error) throw error;
+
+      setIsLoggedIn(true);
+      loadData();
+    } catch (error) {
+      Swal.fire({
+        title: 'Ошибка входа',
+        text: error.message,
+        icon: 'error'
+      });
+    }
+  };
+
+  const handleLogout = async () => {
+    await supabase.auth.signOut();
+    setIsLoggedIn(false);
+  };
+
+  const handleAddEquipment = async (formData) => {
+    try {
+      const { error } = await supabase.from('equipment').insert([{
+        name: formData.get('name'),
+        type: formData.get('type'),
+        serial: formData.get('serial'),
+        inventory: formData.get('inventory'),
+        commission_date: formData.get('commissionDate'),
+        maintenance_interval: parseInt(formData.get('interval')),
+        description: formData.get('description'),
+        status: 'active'
+      }]);
+
+      if (error) throw error;
+
+      loadData();
+      Swal.fire({
+        title: 'Успешно',
+        text: 'Оборудование добавлено',
+        icon: 'success'
+      });
+    } catch (error) {
+      Swal.fire({
+        title: 'Ошибка',
+        text: error.message,
+        icon: 'error'
+      });
+    }
+  };
+
+  if (!isLoggedIn) {
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center">
+        <div className="bg-white rounded-lg shadow-lg w-full max-w-md p-6">
+          <h3 className="text-xl font-bold mb-4">Вход в систему</h3>
+          <form onSubmit={handleLogin} className="space-y-4">
+            <input
+              type="email"
+              name="email"
+              placeholder="Email"
+              required
+              className="w-full px-4 py-2 border rounded-lg"
+            />
+            <input
+              type="password"
+              name="password"
+              placeholder="Пароль"
+              required
+              className="w-full px-4 py-2 border rounded-lg"
+            />
+            <button
+              type="submit"
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg"
+            >
+              Войти
+            </button>
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen bg-gray-100">
+      {/* Sidebar */}
+      <div className={`fixed top-0 left-0 h-full bg-blue-800 text-white ${sidebarCollapsed ? 'w-16' : 'w-64'} p-4 transition-all duration-300`}>
+        <div className="flex items-center justify-between mb-6">
+          {!sidebarCollapsed && <h1 className="text-xl font-bold">MES System</h1>}
+          <button onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="text-white hover:text-blue-200">
+            <FontAwesomeIcon icon={faBars} />
+          </button>
+        </div>
+
+        <nav>
+          <ul className="space-y-2">
+            {[
+              { id: 'dashboard', icon: faTachometerAlt, label: 'Главная' },
+              { id: 'schedule', icon: faCalendarAlt, label: 'График ТО' },
+              { id: 'equipment', icon: faTools, label: 'Оборудование' },
+              { id: 'maintenance', icon: faClipboardCheck, label: 'Техобслуживание' },
+              { id: 'reports', icon: faChartLine, label: 'Отчеты' },
+              { id: 'users', icon: faUsersCog, label: 'Пользователи' }
+            ].map(item => (
+              <li key={item.id}>
+                <button
+                  onClick={() => setCurrentTab(item.id)}
+                  className={`w-full text-left px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center ${currentTab === item.id ? 'bg-blue-700' : ''}`}
+                >
+                  <FontAwesomeIcon icon={item.icon} className="mr-2" />
+                  {!sidebarCollapsed && item.label}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+
+      {/* Main Content */}
+      <div className={`flex-1 ${sidebarCollapsed ? 'ml-16' : 'ml-64'} p-6 transition-all duration-300`}>
+        {/* Header */}
+        <header className="bg-white shadow-sm p-4 rounded-lg mb-6 flex justify-between items-center">
+          <h1 className="text-2xl font-semibold">
+            {currentTab === 'dashboard' ? 'Главная панель' :
+             currentTab === 'schedule' ? 'График ТО' :
+             currentTab === 'equipment' ? 'Оборудование' :
+             currentTab === 'maintenance' ? 'Техобслуживание' :
+             currentTab === 'reports' ? 'Отчеты' : 'Пользователи'}
+          </h1>
+          <div className="flex space-x-4">
+            <button className="p-2 rounded-full hover:bg-gray-100 relative">
+              <FontAwesomeIcon icon={faBell} className="text-gray-600" />
+              <span className="absolute top-0 right-0 bg-red-500 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">3</span>
+            </button>
+            <button
+              onClick={handleLogout}
+              className="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600"
+            >
+              Выход
+            </button>
+          </div>
+        </header>
+
+        {/* Content based on current tab */}
+        <div className="bg-white rounded-lg shadow p-6">
+          {currentTab === 'dashboard' && (
+            <Dashboard equipment={equipment} maintenanceEvents={maintenanceEvents} />
+          )}
+          {currentTab === 'equipment' && (
+            <Equipment
+              equipment={equipment}
+              onAdd={handleAddEquipment}
+              onEdit={(item) => {
+                // Handle edit
+              }}
+              onDelete={async (id) => {
+                try {
+                  const { error } = await supabase
+                    .from('equipment')
+                    .delete()
+                    .eq('id', id);
+                  
+                  if (error) throw error;
+                  
+                  loadData();
+                  Swal.fire({
+                    title: 'Успешно',
+                    text: 'Оборудование удалено',
+                    icon: 'success'
+                  });
+                } catch (error) {
+                  Swal.fire({
+                    title: 'Ошибка',
+                    text: error.message,
+                    icon: 'error'
+                  });
+                }
+              }}
+            />
+          )}
+          {/* Add other tab components here */}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;

src/components/Dashboard.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Line, Pie } from 'react-chartjs-2';
+import 'chart.js/auto';
+
+function Dashboard({ equipment, maintenanceEvents }) {
+  const stats = {
+    total: equipment?.length || 0,
+    active: equipment?.filter(e => e.status === 'active').length || 0,
+    maintenance: equipment?.filter(e => e.status === 'maintenance').length || 0,
+    repair: equipment?.filter(e => e.status === 'repair').length || 0
+  };
+
+  const chartData = {
+    labels: ['Активно', 'ТО', 'Ремонт'],
+    datasets: [{
+      data: [stats.active, stats.maintenance, stats.repair],
+      backgroundColor: ['#10B981', '#F59E0B', '#EF4444'],
+      borderWidth: 0
+    }]
+  };
+
+  const chartOptions = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'bottom',
+      }
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
+          <h4 className="font-medium text-gray-500">Всего оборудования</h4>
+          <p className="text-2xl font-bold">{stats.total}</p>
+        </div>
+        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
+          <h4 className="font-medium text-gray-500">Активно</h4>
+          <p className="text-2xl font-bold">{stats.active}</p>
+        </div>
+        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500">
+          <h4 className="font-medium text-gray-500">На ТО</h4>
+          <p className="text-2xl font-bold">{stats.maintenance}</p>
+        </div>
+        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-red-500">
+          <h4 className="font-medium text-gray-500">В ремонте</h4>
+          <p className="text-2xl font-bold">{stats.repair}</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-lg font-semibold mb-4">Статус оборудования</h3>
+          <div className="h-64">
+            <Pie data={chartData} options={chartOptions} />
+          </div>
+        </div>
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-lg font-semibold mb-4">Последние события</h3>
+          <div className="space-y-4">
+            {maintenanceEvents?.slice(0, 5).map(event => (
+              <div key={event.id} className="flex items-center justify-between border-b pb-2">
+                <div>
+                  <p className="font-medium">{equipment?.find(e => e.id === event.equipment_id)?.name}</p>
+                  <p className="text-sm text-gray-500">{new Date(event.date).toLocaleDateString()}</p>
+                </div>
+                <span className={`px-2 py-1 rounded-full text-xs font-semibold ${
+                  event.status === 'completed' ? 'bg-green-100 text-green-800' :
+                  event.status === 'planned' ? 'bg-blue-100 text-blue-800' :
+                  'bg-yellow-100 text-yellow-800'
+                }`}>
+                  {event.status}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Dashboard;

src/components/Equipment.jsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEdit, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons';
+import Swal from 'sweetalert2';
+
+function Equipment({ equipment, onAdd, onEdit, onDelete }) {
+  const [filters, setFilters] = useState({
+    status: '',
+    type: '',
+    search: ''
+  });
+
+  const filteredEquipment = equipment.filter(item => {
+    return (
+      (!filters.status || item.status === filters.status) &&
+      (!filters.type || item.type === filters.type) &&
+      (!filters.search || 
+        item.name.toLowerCase().includes(filters.search.toLowerCase()) ||
+        item.serial.toLowerCase().includes(filters.search.toLowerCase()) ||
+        item.inventory.toLowerCase().includes(filters.search.toLowerCase())
+      )
+    );
+  });
+
+  const handleDelete = (id) => {
+    Swal.fire({
+      title: 'Подтверждение',
+      text: 'Вы уверены, что хотите удалить это оборудование?',
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonText: 'Да, удалить',
+      cancelButtonText: 'Отмена'
+    }).then((result) => {
+      if (result.isConfirmed) {
+        onDelete(id);
+      }
+    });
+  };
+
+  return (
+    <div>
+      <div className="mb-4 flex justify-between items-center">
+        <h2 className="text-2xl font-bold">Оборудование</h2>
+        <button
+          onClick={onAdd}
+          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"
+        >
+          <FontAwesomeIcon icon={faPlus} className="mr-2" />
+          Добавить оборудование
+        </button>
+      </div>
+
+      <div className="mb-4 flex space-x-4">
+        <select
+          value={filters.status}
+          onChange={(e) => setFilters({ ...filters, status: e.target.value })}
+          className="border rounded-lg px-4 py-2"
+        >
+          <option value="">Все статусы</option>
+          <option value="active">Активно</option>
+          <option value="maintenance">ТО</option>
+          <option value="repair">Ремонт</option>
+        </select>
+
+        <select
+          value={filters.type}
+          onChange={(e) => setFilters({ ...filters, type: e.target.value })}
+          className="border rounded-lg px-4 py-2"
+        >
+          <option value="">Все типы</option>
+          <option value="Станок">Станок</option>
+          <option value="Конвейер">Конвейер</option>
+          <option value="Компрессор">Компрессор</option>
+          <option value="Генератор">Генератор</option>
+          <option value="Насос">Насос</option>
+        </select>
+
+        <input
+          type="text"
+          value={filters.search}
+          onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+          placeholder="Поиск..."
+          className="border rounded-lg px-4 py-2 flex-1"
+        />
+      </div>
+
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <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">Тип</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">
+            {filteredEquipment.map((item) => (
+              <tr key={item.id}>
+                <td className="px-6 py-4 whitespace-nowrap">{item.name}</td>
+                <td className="px-6 py-4 whitespace-nowrap">{item.type}</td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <span className={`px-2 py-1 rounded-full text-xs font-semibold ${
+                    item.status === 'active' ? 'bg-green-100 text-green-800' :
+                    item.status === 'maintenance' ? 'bg-yellow-100 text-yellow-800' :
+                    'bg-red-100 text-red-800'
+                  }`}>
+                    {item.status === 'active' ? 'Активно' :
+                     item.status === 'maintenance' ? 'ТО' : 'Ремонт'}
+                  </span>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">{item.inventory}</td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <button
+                    onClick={() => onEdit(item)}
+                    className="text-blue-600 hover:text-blue-800 mr-3"
+                  >
+                    <FontAwesomeIcon icon={faEdit} />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(item.id)}
+                    className="text-red-600 hover:text-red-800"
+                  >
+                    <FontAwesomeIcon icon={faTrash} />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default Equipment;

src/index.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+.notification-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 0.625rem;
+  line-height: 1.25rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+}
+
+.has-event:hover {
+  background-color: #BFDBFE !important;
+}

src/main.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement
+} from 'chart.js';
+import App from './App';
+import './index.css';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement
+);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

supabase/migrations/20250518080628_heavy_mountain.sql

@@ -0,0 +1,105 @@
+/*
+  # Initial MES System Schema
+
+  1. New Tables
+    - `equipment`
+      - `id` (uuid, primary key)
+      - `name` (text)
+      - `type` (text)
+      - `serial` (text)
+      - `inventory` (text)
+      - `commission_date` (date)
+      - `maintenance_interval` (integer)
+      - `description` (text)
+      - `status` (text)
+      - `created_at` (timestamptz)
+      - `updated_at` (timestamptz)
+
+    - `maintenance_events`
+      - `id` (uuid, primary key)
+      - `equipment_id` (uuid, foreign key)
+      - `date` (date)
+      - `status` (text)
+      - `responsible` (uuid, foreign key)
+      - `notes` (text)
+      - `created_at` (timestamptz)
+
+  2. Security
+    - Enable RLS on all tables
+    - Add policies for authenticated users
+*/
+
+-- Create equipment table
+CREATE TABLE IF NOT EXISTS equipment (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  name text NOT NULL,
+  type text NOT NULL,
+  serial text NOT NULL,
+  inventory text NOT NULL,
+  commission_date date NOT NULL,
+  maintenance_interval integer NOT NULL,
+  description text,
+  status text NOT NULL DEFAULT 'active',
+  created_at timestamptz DEFAULT now(),
+  updated_at timestamptz DEFAULT now()
+);
+
+-- Create maintenance_events table
+CREATE TABLE IF NOT EXISTS maintenance_events (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  equipment_id uuid REFERENCES equipment(id) ON DELETE CASCADE,
+  date date NOT NULL,
+  status text NOT NULL,
+  responsible uuid REFERENCES auth.users(id),
+  notes text,
+  created_at timestamptz DEFAULT now()
+);
+
+-- Enable RLS
+ALTER TABLE equipment ENABLE ROW LEVEL SECURITY;
+ALTER TABLE maintenance_events ENABLE ROW LEVEL SECURITY;
+
+-- Create policies
+CREATE POLICY "Allow authenticated users to read equipment"
+  ON equipment
+  FOR SELECT
+  TO authenticated
+  USING (true);
+
+CREATE POLICY "Allow authenticated users to insert equipment"
+  ON equipment
+  FOR INSERT
+  TO authenticated
+  WITH CHECK (true);
+
+CREATE POLICY "Allow authenticated users to update equipment"
+  ON equipment
+  FOR UPDATE
+  TO authenticated
+  USING (true);
+
+CREATE POLICY "Allow authenticated users to read maintenance events"
+  ON maintenance_events
+  FOR SELECT
+  TO authenticated
+  USING (true);
+
+CREATE POLICY "Allow authenticated users to insert maintenance events"
+  ON maintenance_events
+  FOR INSERT
+  TO authenticated
+  WITH CHECK (true);
+
+-- Create updated_at trigger
+CREATE OR REPLACE FUNCTION update_updated_at()
+RETURNS TRIGGER AS $$
+BEGIN
+  NEW.updated_at = now();
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE TRIGGER update_equipment_updated_at
+  BEFORE UPDATE ON equipment
+  FOR EACH ROW
+  EXECUTE FUNCTION update_updated_at();

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  envDir: './',
+  envPrefix: 'VITE_'
+})