Spaces:
Running
Running
File size: 6,458 Bytes
a0e555d 6b7c4a6 a0e555d ab6d76c 6b7c4a6 5e01765 a0e555d edcf950 a0e555d c3677f5 a0e555d c3677f5 11172ae 0c9f258 11172ae a0e555d 0c9f258 08cb293 0c9f258 08cb293 11172ae c3677f5 0c9f258 6b7c4a6 c3677f5 6b7c4a6 7f880d1 6b7c4a6 c3677f5 6b7c4a6 7f880d1 6b7c4a6 11172ae 7f9ef03 08cb293 c3677f5 62ee196 5e01765 a0e555d 08cb293 6a31fe7 62ee196 6a31fe7 a0e555d 08cb293 6a31fe7 7f9ef03 6a31fe7 7f9ef03 a0e555d edcf950 ab6d76c 7f880d1 ab6d76c 5e01765 33261a8 62ee196 33261a8 edcf950 08cb293 edcf950 11172ae c3677f5 edcf950 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 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<!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="flex flex-col 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">
<div id="user-info" class="text-sm text-secondary hidden">
Logged in as: <span id="user-email" class="font-semibold text-primary"></span>
</div>
<button id="logout-btn" class="btn btn-secondary text-sm hidden">Logout</button>
<button id="show-reports-modal-btn" class="btn btn-secondary text-sm hidden">
<i class="fas fa-file-alt mr-1"></i> Reports
</button>
</div>
</div>
</header>
<!-- Login Screen -->
<div id="login-screen" class="fixed inset-0 bg-bg-dark flex items-center justify-center z-50">
<div class="dashboard-card p-8 w-full max-w-sm">
<h2 class="text-2xl font-bold text-center mb-6">Login</h2>
<form id="login-form">
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-secondary mb-1">Email</label>
<input type="email" id="email" class="input-field w-full" required>
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-secondary mb-1">Password</label>
<input type="password" id="password" class="input-field w-full" required>
</div>
<button type="submit" class="btn btn-primary w-full">Sign In</button>
</form>
</div>
</div>
<!-- NEW: Loader element -->
<div id="loader" class="fixed inset-0 bg-bg-dark flex-col items-center justify-center z-40 hidden">
<div class="loader-spinner"></div>
<p class="text-secondary mt-4">Loading Factory Data...</p>
</div>
<!-- Main Content (Initially Hidden) -->
<main id="main-content" class="container mx-auto px-4 pt-20 pb-8 opacity-0 transition-opacity duration-500 hidden">
<!-- All content remains the same -->
<!-- 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 -->
<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>
<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>
<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">
<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">
<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">
<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 -->
<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>
</div>
<ul id="reorder-list" class="space-y-3 overflow-y-auto pr-2" style="max-height: 250px;"></ul>
</div>
</div>
</main>
<!-- Footer -->
<footer id="footer" class="py-4 hidden">
<div class="container mx-auto px-4 flex justify-center">
<button id="show-reset-modal-btn" class="btn btn-danger text-sm">
<i class="fas fa-redo mr-1"></i> Reset All Data
</button>
</div>
</footer>
<!-- 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="custom-po-modal" class="modal-backdrop fixed inset-0 flex items-center justify-center z-50 hidden"></div>
<div id="toast-container"></div>
<script src="main.js" type="module"></script>
</body>
</html> |