https://mgx.dev/chat/3bf8fb2f4e8741fc85fad457effd3686 - Follow Up Deployment

index.html

@@ -22,6 +22,23 @@
                 }
             }
         }
+
+    // Section navigation
+    const pages   = document.querySelectorAll('.dashboard-page');
+    const navBtns = document.querySelectorAll('.nav-link');
+
+    function showSection(id){
+        pages.forEach(p => p.classList.add('hidden'));
+        document.getElementById(id)?.classList.remove('hidden');
+    }
+
+    navBtns.forEach(btn => {
+        btn.addEventListener('click', e => {
+            e.preventDefault();
+            const section = btn.dataset.section;
+            showSection(section + 'Section');
+        });
+    });
     </script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@@ -162,27 +179,27 @@
 
             <!-- Navigation -->
             <nav class="px-2 md:px-4">
-                <a href="/dashboard" class="nav-link flex items-center py-3 px-4 rounded-xl bg-primary-100 dark:bg-gray-700 text-primary dark:text-white mb-2" data-section="dashboard">
+                <a href="#" class="nav-link flex items-center py-3 px-4 rounded-xl bg-primary-100 dark:bg-gray-700 text-primary dark:text-white mb-2" data-section="dashboard">
                     <i class="fas fa-tachometer-alt text-lg"></i>
                     <span class="ml-4 hidden md:block">Dashboard</span>
                 </a>
-                <a href="/tasks" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="tasks">
+                <a href="javascript:void(0)" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="tasks">
                     <i class="fas fa-tasks text-lg"></i>
                     <span class="ml-4 hidden md:block">Tasks</span>
                 </a>
-                <a href="/machines" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="machines">
+                <a href="javascript:void(0)" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="machines">
                     <i class="fas fa-hard-hat text-lg"></i>
                     <span class="ml-4 hidden md:block">Machines</span>
                 </a>
-                <a href="/inventory" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="inventory">
+                <a href="javascript:void(0)" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="inventory">
                     <i class="fas fa-warehouse text-lg"></i>
                     <span class="ml-4 hidden md:block">Inventory</span>
                 </a>
-                <a href="/analytics" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="analytics">
+                <a href="javascript:void(0)" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="analytics">
                     <i class="fas fa-chart-line text-lg"></i>
                     <span class="ml-4 hidden md:block">Analytics</span>
                 </a>
-                <a href="/admin" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="admin">
+                <a href="javascript:void(0)" class="nav-link flex items-center py-3 px-4 rounded-xl text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 mb-2" data-section="admin">
                     <i class="fas fa-users-cog text-lg"></i>
                     <span class="ml-4 hidden md:block">Admin</span>
                 </a>
@@ -856,6 +873,178 @@
                         </div>
                     </div>
                 </div>
+                <!-- ================== SECTIONS ================== -->
+                <!-- Machines Section -->
+                <section id="machinesSection" class="dashboard-page hidden">
+                    <div class="flex justify-between items-center mb-6">
+                        <h1 class="text-2xl md:text-3xl font-bold dark:text-white">Machines</h1>
+                        <button id="addMachineBtn" class="flex items-center bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition">
+                            <i class="fas fa-plus mr-2"></i> Add Machine
+                        </button>
+                    </div>
+
+                    <!-- quick stats -->
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">Total Machines</h3>
+                            <p class="text-3xl font-bold dark:text-white">42</p>
+                        </div>
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">Operational</h3>
+                            <p class="text-3xl font-bold dark:text-white">38</p>
+                        </div>
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">Under Maintenance</h3>
+                            <p class="text-3xl font-bold dark:text-white">4</p>
+                        </div>
+                    </div>
+
+                    <!-- placeholder for table or cards -->
+                    <div class="card dark:bg-gray-800 bg-white p-6">
+                        <p class="text-center text-gray-500 dark:text-gray-400 py-10">Machine list / table will be rendered here.</p>
+                    </div>
+                </section>
+
+                <!-- Tasks Section -->
+                <section id="tasksSection" class="dashboard-page hidden">
+                    <div class="flex justify-between items-center mb-6">
+                        <h1 class="text-2xl md:text-3xl font-bold dark:text-white">Tasks</h1>
+                        <button class="flex items-center bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition">
+                            <i class="fas fa-plus mr-2"></i> New Task
+                        </button>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">Pending</h3>
+                            <p class="text-3xl font-bold dark:text-white">24</p>
+                        </div>
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">In Progress</h3>
+                            <p class="text-3xl font-bold dark:text-white">67</p>
+                        </div>
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">Completed Today</h3>
+                            <p class="text-3xl font-bold dark:text-white">13</p>
+                        </div>
+                    </div>
+
+                    <div class="card dark:bg-gray-800 bg-white p-6">
+                        <div class="overflow-x-auto">
+                            <table class="w-full text-sm">
+                                <thead>
+                                    <tr class="border-b dark:border-gray-700">
+                                        <th class="text-left py-3 px-2 font-medium dark:text-gray-300">Task ID</th>
+                                        <th class="text-left py-3 px-2 font-medium dark:text-gray-300">Description</th>
+                                        <th class="text-left py-3 px-2 font-medium dark:text-gray-300">Assigned To</th>
+                                        <th class="text-left py-3 px-2 font-medium dark:text-gray-300">Priority</th>
+                                        <th class="text-left py-3 px-2 font-medium dark:text-gray-300">Status</th>
+                                        <th class="text-left py-3 px-2 font-medium dark:text-gray-300">Due Date</th>
+                                        <th class="text-left py-3 px-2 font-medium dark:text-gray-300">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="divide-y dark:divide-gray-700">
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-001</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Hydraulic system inspection</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Sarah Williams</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">High</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">In Progress</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-15</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-002</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Engine oil change - MD24</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Michael Chen</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">Medium</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">Pending</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-16</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-003</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Belt replacement on B18</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Alex Johnson</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">Low</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">Completed</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-12</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-004</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Coolant flush for HD35</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Sarah Williams</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">Medium</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">Pending</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-17</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-005</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Replace air filter on B18</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Michael Chen</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">Low</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">Pending</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-18</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-006</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Track tension adjustment</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Alex Johnson</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">Medium</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">In Progress</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-19</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-007</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Brake pad inspection MD24</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Sarah Williams</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">High</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">Pending</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-20</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-008</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Hydraulic hose replacement</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Michael Chen</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">High</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">In Progress</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-21</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-009</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Battery replacement HD35</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Alex Johnson</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">Medium</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">Pending</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-22</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-010</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Fuel filter change B18</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Sarah Williams</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">Low</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">Pending</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-23</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-011</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Transmission fluid check</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Michael Chen</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">Medium</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">Pending</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-24</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                    <tr><td class="py-3 px-2 text-gray-900 dark:text-gray-100">#TSK-012</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Loader arm pins greasing</td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">Alex Johnson</td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">Low</span></td><td class="py-3 px-2"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">Completed</span></td><td class="py-3 px-2 text-gray-900 dark:text-gray-100">2024-01-11</td><td class="py-3 px-2"><button class="text-primary hover:underline text-xs">View</button></td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Inventory Section -->
+                <section id="inventorySection" class="dashboard-page hidden">
+                    <div class="flex justify-between items-center mb-6">
+                        <h1 class="text-2xl md:text-3xl font-bold dark:text-white">Inventory</h1>
+                        <button class="flex items-center bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition">
+                            <i class="fas fa-plus mr-2"></i> Add Item
+                        </button>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">Total Items</h3>
+                            <p class="text-3xl font-bold dark:text-white">1,245</p>
+                        </div>
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">Low Stock Items</h3>
+                            <p class="text-3xl font-bold dark:text-white">37</p>
+                        </div>
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">Value ($)</h3>
+                            <p class="text-3xl font-bold dark:text-white">$ 432 k</p>
+                        </div>
+                    </div>
+
+                    <div class="card dark:bg-gray-800 bg-white p-6">
+                        <p class="text-center text-gray-500 dark:text-gray-400 py-10">Inventory table / search will be rendered here.</p>
+                    </div>
+                </section>
+
+                <!-- Analytics Section -->
+                <section id="analyticsSection" class="dashboard-page hidden">
+                    <div class="flex justify-between items-center mb-6">
+                        <h1 class="text-2xl md:text-3xl font-bold dark:text-white">Analytics</h1>
+                        <button class="flex items-center bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition">
+                            <i class="fas fa-download mr-2"></i> Export Report
+                        </button>
+                    </div>
+
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-lg font-semibold dark:text-white mb-4">Utilization Over Time</h3>
+                            <div class="h-64 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                                <span class="text-gray-500 dark:text-gray-400">Chart placeholder</span>
+                            </div>
+                        </div>
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-lg font-semibold dark:text-white mb-4">Maintenance Cost Trends</h3>
+                            <div class="h-64 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                                <span class="text-gray-500 dark:text-gray-400">Chart placeholder</span>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Admin Section -->
+                <section id="adminSection" class="dashboard-page hidden">
+                    <div class="flex justify-between items-center mb-6">
+                        <h1 class="text-2xl md:text-3xl font-bold dark:text-white">Admin</h1>
+                        <button class="flex items-center bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition">
+                            <i class="fas fa-user-plus mr-2"></i> Invite User
+                        </button>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">Users</h3>
+                            <p class="text-3xl font-bold dark:text-white">18</p>
+                        </div>
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">Active Sessions</h3>
+                            <p class="text-3xl font-bold dark:text-white">7</p>
+                        </div>
+                        <div class="card dark:bg-gray-800 bg-white p-6">
+                            <h3 class="text-gray-500 dark:text-gray-400 mb-1">Pending Invites</h3>
+                            <p class="text-3xl font-bold dark:text-white">2</p>
+                        </div>
+                    </div>
+
+                    <div class="card dark:bg-gray-800 bg-white p-6">
+                        <p class="text-center text-gray-500 dark:text-gray-400 py-10">User management table will be rendered here.</p>
+                    </div>
+                </section>
+
             </main>
         </div>
         
@@ -1038,7 +1227,7 @@
                             </div>
                             <label class="relative inline-flex items-center cursor-pointer">
                                 <input type="checkbox" class="sr-only peer" checked>
-                                <div class="极 11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                             </label>
                         </div>
                     </div>