Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Win Super Power - Factory Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- PDF & Charting Libraries --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="header fixed top-0 left-0 right-0 z-10 border-b"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <h1 class="text-xl font-bold text-primary flex items-center"><i class="fas fa-satellite-dish mr-2 text-accent-blue"></i>Win Super Power - Factory Dashboard</h1> | |
| <div class="flex items-center gap-4"> | |
| <button id="show-reports-modal-btn" class="btn btn-secondary text-sm"> | |
| <i class="fas fa-file-alt mr-1"></i> Reports | |
| </button> | |
| <button id="show-reset-modal-btn" class="btn btn-danger text-sm"> | |
| <i class="fas fa-redo mr-1"></i> Reset Data | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 pt-20 pb-8 opacity-0 transition-opacity duration-500"> | |
| <!-- KPI Row --> | |
| <div id="kpi-row" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"></div> | |
| <!-- Chart Row (FIXED) --> | |
| <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-6"> | |
| <div class="lg:col-span-3 dashboard-card p-6"> | |
| <h2 class="text-lg font-semibold mb-4">Production History (Last 7 Days)</h2> | |
| <!-- FIX: Added a relatively positioned container with a fixed height --> | |
| <div class="relative h-80"> | |
| <canvas id="production-history-chart"></canvas> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-2 dashboard-card p-6 flex flex-col items-center"> | |
| <h2 class="text-lg font-semibold mb-4">Inventory Status</h2> | |
| <!-- FIX: Added a relatively positioned container --> | |
| <div class="relative w-full max-w-xs h-80"> | |
| <canvas id="inventory-status-chart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Data Row --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-1"> <!-- Production Input --> | |
| <div class="dashboard-card p-6"> | |
| <h2 class="text-lg font-semibold mb-4">Production Input</h2> | |
| <div id="product-cards" class="space-y-4"></div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1"> <!-- Material Inventory --> | |
| <div class="dashboard-card p-6 flex flex-col"> | |
| <h2 class="text-lg font-semibold mb-4">Material Inventory</h2> | |
| <div id="material-cards" class="grid grid-cols-1 gap-4 overflow-y-auto pr-2 flex-grow" style="max-height: 500px;"></div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1"> <!-- Production Log --> | |
| <div class="dashboard-card p-6 flex flex-col"> | |
| <h2 class="text-lg font-semibold mb-4">Production Log</h2> | |
| <ul id="production-log-list" class="space-y-3 overflow-y-auto pr-2 flex-grow" style="max-height: 500px;"></ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Re-order List (now takes full width with a single action button) --> | |
| <div class="mt-6"> | |
| <div class="dashboard-card p-6"> | |
| <div id="reorder-header" class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Re-order List</h2> | |
| <!-- Button will be inserted here by ui.js if needed --> | |
| </div> | |
| <ul id="reorder-list" class="space-y-3 overflow-y-auto pr-2" style="max-height: 250px;"></ul> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Modals --> | |
| <div id="reset-modal" class="modal-backdrop fixed inset-0 flex items-center justify-center z-50 hidden"></div> | |
| <div id="reports-modal" class="modal-backdrop fixed inset-0 flex items-center justify-center z-50 hidden"></div> | |
| <div id="toast-container"></div> | |
| <!-- Load main.js as module --> | |
| <script src="main.js" type="module"></script> | |
| </body> | |
| </html> |