Spaces:
Running
Running
File size: 5,004 Bytes
a0e555d 6b7c4a6 a0e555d ab6d76c 6b7c4a6 5e01765 a0e555d c3677f5 a0e555d c3677f5 11172ae c3677f5 11172ae c3677f5 11172ae a0e555d c3677f5 11172ae c3677f5 6b7c4a6 7f880d1 6b7c4a6 c3677f5 6b7c4a6 7f880d1 6b7c4a6 c3677f5 6b7c4a6 7f880d1 6b7c4a6 11172ae 7f9ef03 62ee196 c3677f5 62ee196 5e01765 a0e555d 62ee196 6a31fe7 62ee196 6a31fe7 a0e555d 62ee196 6a31fe7 7f9ef03 6a31fe7 7f9ef03 a0e555d ab6d76c 7f880d1 ab6d76c 7f880d1 ab6d76c 5e01765 33261a8 62ee196 33261a8 11172ae c3677f5 2b45bb5 7f9ef03 7f880d1 2b45bb5 a0e555d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <!DOCTYPE html>
<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> |