Update index.html

index.html

@@ -7,7 +7,7 @@
     <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">
-    <!-- NEW: Chart.js Library -->
+    <!-- Chart.js Library -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="style.css">
 </head>
@@ -16,18 +16,25 @@
     <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10">
         <div class="container mx-auto px-4 py-3 flex justify-between items-center">
             <h1 class="text-xl font-bold text-gray-800 flex items-center"><i class="fas fa-satellite-dish mr-2 text-blue-500"></i>Win Super Power - Factory Dashboard</h1>
-            <button id="show-reset-modal-btn" class="px-3 py-1 text-sm border border-gray-300 rounded text-gray-600 hover:text-red-500 hover:border-red-300 transition-colors"><i class="fas fa-redo mr-1"></i> Reset Data</button>
+            <div class="flex items-center gap-4">
+                <button id="show-reports-modal-btn" class="px-3 py-1 text-sm border border-blue-400 rounded text-blue-600 bg-blue-50 hover:bg-blue-100 transition-colors">
+                    <i class="fas fa-file-alt mr-1"></i> Reports
+                </button>
+                <button id="show-reset-modal-btn" class="px-3 py-1 text-sm border border-gray-300 rounded text-gray-600 hover:text-red-500 hover:border-red-300 transition-colors">
+                    <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">
-        <!-- NEW: KPI Row -->
+        <!-- KPI Row -->
         <div id="kpi-row" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
             <!-- KPI Cards will be rendered here by ui.js -->
         </div>
 
-        <!-- NEW: Chart Row -->
+        <!-- Chart Row -->
         <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-6">
             <div class="lg:col-span-3 bg-white rounded-lg shadow-md p-6">
                 <h2 class="text-lg font-semibold mb-4">Production History (Last 7 Days)</h2>
@@ -41,7 +48,7 @@
             </div>
         </div>
 
-        <!-- Top Row -->
+        <!-- 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="bg-white rounded-lg shadow-md p-6">
@@ -52,13 +59,13 @@
             <div class="lg:col-span-1"> <!-- Material Inventory -->
                 <div class="bg-white rounded-lg shadow-md p-6">
                     <h2 class="text-lg font-semibold mb-4">Material Inventory</h2>
-                    <div id="material-cards" class="grid grid-cols-1 gap-4 h-[500px] overflow-y-auto pr-2"></div>
+                    <div id="material-cards" class="grid grid-cols-1 gap-4 overflow-y-auto pr-2" style="max-height: 500px;"></div>
                 </div>
             </div>
             <div class="lg:col-span-1"> <!-- Production Log -->
                  <div class="bg-white rounded-lg shadow-md p-6">
                     <h2 class="text-lg font-semibold mb-4">Production Log</h2>
-                    <ul id="production-log-list" class="space-y-3 h-[500px] overflow-y-auto pr-2"></ul>
+                    <ul id="production-log-list" class="space-y-3 overflow-y-auto pr-2" style="max-height: 500px;"></ul>
                 </div>
             </div>
         </div>
@@ -79,21 +86,11 @@
         </div>
     </main>
 
-    <!-- Reset Confirmation Modal -->
-    <div id="reset-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4 shadow-xl">
-            <h3 class="text-lg font-semibold mb-2">Confirm Reset</h3>
-            <p class="text-gray-600 mb-4">Are you sure you want to reset all inventory data? This action cannot be undone.</p>
-            <div class="flex justify-end space-x-2">
-                <button id="cancel-reset-btn" class="px-4 py-2 text-sm bg-gray-200 rounded hover:bg-gray-300">Cancel</button>
-                <button id="confirm-reset-btn" class="px-4 py-2 text-sm bg-red-500 text-white rounded hover:bg-red-600">Reset Data</button>
-            </div>
-        </div>
-    </div>
+    <!-- Modals -->
+    <div id="reset-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"></div>
+    <div id="reports-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"></div>
     
-    <!-- Toast Container -->
     <div id="toast-container"></div>
-    
     <script src="main.js" type="module" defer></script>
 </body>
 </html>