know make every one like tasks and machines not empty you the drilling companys add what need to be - Follow Up Deployment

index.html

@@ -22,23 +22,6 @@
                 }
             }
         }
-
-    // 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');
@@ -276,8 +259,12 @@
             </header>
 
             <!-- Dashboard -->
-            <main class="p-6">
-                <!-- Page Title and Quick Actions -->
+            <main class="p-6">=========== SECTIONS ================== -->
+                <!-- Machines Section -->
+                <section id="machinesSection" class="dashboard-page hidden">
+=======
+                <!-- ================== SECTIONS ================== -->
+Page Title and Quick Actions -->
                 <div class="mb-8">
                     <div class="flex justify-between items-center">
                         <div>
@@ -1279,75 +1266,184 @@
 
     <!-- JavaScript -->
     <script>
-        // Toggle sidebar
-        document.getElementById('toggleSidebar').addEventListener('click', function() {
-            const sidebar = document.querySelector('.sidebar');
-            sidebar.classList.toggle('w-20');
-            sidebar.classList.toggle('md:w-64');
-            
-            // Toggle hidden elements
-            document.querySelectorAll('.hidden.md\\:block').forEach(el => {
-                el.classList.toggle('md:hidden');
-            });
-        });
+        // Wait for DOM to be fully loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            // Section navigation
+            const pages = document.querySelectorAll('.dashboard-page');
+            const navBtns = document.querySelectorAll('.nav-link');
 
-        // Toggle sound
-        document.getElementById('soundToggle').addEventListener('click', function() {
-            const icon = this.querySelector('i');
-            if (icon.classList.contains('fa-volume-up')) {
-                icon.classList.replace('fa-volume-up', 'fa-volume-mute');
-                this.classList.add('bg-red-100', 'text-red-600');
-                this.classList.remove('bg-gray-100', 'text-gray-600');
-            } else {
-                icon.classList.replace('fa-volume-mute', 'fa-volume-up');
-                this.classList.remove('bg-red-100', 'text-red-600');
-                this.classList.add('bg-gray-100', 'text-gray-600');
+            function showSection(id) {
+                pages.forEach(p => p.classList.add('hidden'));
+                const targetSection = document.getElementById(id + 'Section');
+                if (targetSection) {
+                    targetSection.classList.remove('hidden');
+                }
+                
+                // Update active state
+                navBtns.forEach(b => {
+                    b.classList.remove('bg-primary-100', 'text-primary', 'dark:bg-gray-700', 'dark:text-white');
+                    b.classList.add('text-gray-700', 'hover:bg-gray-100', 'dark:text-gray-300', 'dark:hover:bg-gray-700');
+                });
+                
+                // Find and activate the current nav button
+                const activeBtn = document.querySelector(`.nav-link[data-section="${id}"]`);
+                if (activeBtn) {
+                    activeBtn.classList.remove('text-gray-700', 'hover:bg-gray-100', 'dark:text-gray-300', 'dark:hover:bg-gray-700');
+                    activeBtn.classList.add('bg-primary-100', 'text-primary', 'dark:bg-gray-700', 'dark:text-white');
+                }
             }
-        });
 
-        // Notification panel
-        document.getElementById('notificationButton').addEventListener('click', function() {
-            const panel = document.getElementById('notificationPanel');
-            panel.classList.toggle('hidden');
-            panel.classList.toggle('opacity-0');
-            panel.classList.toggle('scale-95');
-            
-            if (!panel.classList.contains('hidden')) {
+            // Set default section to dashboard
+            showSection('dashboard');
+
+            navBtns.forEach(btn => {
+                btn.addEventListener('click', e => {
+                    e.preventDefault();
+                    const section = btn.dataset.section;
+                    showSection(section);
+                });
+            });
+
+            // Toggle sidebar
+            document.getElementById('toggleSidebar').addEventListener('click', function() {
+                const sidebar = document.querySelector('.sidebar');
+                sidebar.classList.toggle('w-20');
+                sidebar.classList.toggle('md:w-64');
+                
+                // Toggle hidden elements
+                document.querySelectorAll('.hidden.md\\:block').forEach(el => {
+                    el.classList.toggle('md:hidden');
+                });
+            });
+
+            // Toggle sound
+            document.getElementById('soundToggle').addEventListener('click', function() {
+                const icon = this.querySelector('i');
+                if (icon.classList.contains('fa-volume-up')) {
+                    icon.classList.replace('fa-volume-up', 'fa-volume-mute');
+                    this.classList.add('bg-red-100', 'text-red-600');
+                    this.classList.remove('bg-gray-100', 'text-gray-600');
+                } else {
+                    icon.classList.replace('fa-volume-mute', 'fa-volume-up');
+                    this.classList.remove('bg-red-100', 'text-red-600');
+                    this.classList.add('bg-gray-100', 'text-gray-600');
+                }
+            });
+
+            // Language selector
+            document.getElementById('languageSelect').addEventListener('change', function() {
+                const selectedLanguage = this.options[this.selectedIndex].text;
+                alert(`Language changed to: ${selectedLanguage}`);
+                // In a real app, you would implement actual language switching here
+                // This could involve updating text content throughout the app
+            });
+
+            // Notification panel
+            document.getElementById('notificationButton').addEventListener('click', function() {
+                const panel = document.getElementById('notificationPanel');
+                panel.classList.toggle('hidden');
+                panel.classList.toggle('opacity-0');
+                panel.classList.toggle('scale-95');
+                
+                if (!panel.classList.contains('hidden')) {
+                    setTimeout(() => {
+                        panel.classList.remove('opacity-0');
+                        panel.classList.remove('scale-95');
+                    }, 10);
+                }
+            });
+
+            // Settings modal
+            document.getElementById('settingsButton').addEventListener('click', function() {
+                const modal = document.getElementById('settingsModal');
+                modal.classList.remove('hidden');
                 setTimeout(() => {
-                    panel.classList.remove('opacity-0');
-                    panel.classList.remove('scale-95');
+                    modal.querySelector('.transform').classList.remove('scale-95');
+                    modal.querySelector('.transform').classList.remove('opacity-0');
                 }, 10);
-            }
-        });
+            });
 
-        // Settings modal
-        document.getElementById('settingsButton').addEventListener('click', function() {
-            const modal = document.getElementById('settingsModal');
-            modal.classList.remove('hidden');
-            setTimeout(() => {
-                modal.querySelector('.transform').classList.remove('scale-95');
-                modal.querySelector('.transform').classList.remove('opacity-0');
-            }, 10);
-        });
+            document.getElementById('closeSettings').addEventListener('click', function() {
+                const modal = document.getElementById('settingsModal');
+                modal.querySelector('.transform').classList.add('scale-95');
+                modal.querySelector('.transform').classList.add('opacity-0');
+                setTimeout(() => {
+                    modal.classList.add('hidden');
+                }, 300);
+            });
 
-        document.getElementById('closeSettings').addEventListener('click', function() {
-            const modal = document.getElementById('settingsModal');
-            modal.querySelector('.transform').classList.add('scale-95');
-            modal.querySelector('.transform').classList.add('opacity-0');
-            setTimeout(() => {
-                modal.classList.add('hidden');
-            }, 300);
-        });
+            // Close modal when clicking outside
+            document.getElementById('settingsModal').addEventListener('click', function(e) {
+                if (e.target === this) {
+                    document.getElementById('closeSettings').click();
+                }
+            });
 
-        // Close modal when clicking outside
-        document.getElementById('settingsModal').addEventListener('click', function(e) {
-            if (e.target === this) {
-                document.getElementById('closeSettings').click();
-            }
-        });
+            // Add machine button
+            document.getElementById('addMachineBtn')?.addEventListener('click', function() {
+                alert('Add machine functionality would open here');
+            });
+
+            // All "New Task" buttons
+            document.querySelectorAll('button:has(.fa-plus)').forEach(btn => {
+                if (btn.textContent.includes('New Task')) {
+                    btn.addEventListener('click', function() {
+                        alert('New task creation would open here');
+                    });
+                }
+            });
+
+            // View details buttons
+            document.querySelectorAll('button:has(.fa-eye)').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    alert('View details functionality would open here');
+                });
+            });
+
+            // Export buttons
+            document.querySelectorAll('button:has(.fa-file-export), button:has(.fa-download)').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    alert('Export functionality would run here');
+                });
+            });
+
+            // Quick action buttons
+            document.querySelectorAll('.flex-wrap.gap-3 button').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const action = this.textContent.trim();
+                    alert(`${action} functionality would run here`);
+                });
+            });
+
+            // Chat send button
+            document.querySelector('.bg-primary.text-white.w-8.h-8.rounded-full')?.addEventListener('click', function() {
+                const input = document.querySelector('input[placeholder="Type your message..."]');
+                if (input.value.trim()) {
+                    alert(`Message sent: ${input.value}`);
+                    input.value = '';
+                }
+            });
+
+            // Add event listeners for all action buttons that might be missing them
+            document.querySelectorAll('button').forEach(btn => {
+                if (!btn.hasAttribute('data-listener-added')) {
+                    btn.setAttribute('data-listener-added', 'true');
+                    btn.addEventListener('click', function(e) {
+                        // Prevent default for all buttons to avoid unexpected behavior
+                        e.preventDefault();
+                        
+                        // Handle specific button types
+                        if (this.classList.contains('bg-primary') && this.querySelector('.fa-plus')) {
+                            alert('Add new item functionality');
+                        } else if (this.querySelector('.fa-cog')) {
+                            alert('Settings functionality');
+                        } else if (this.querySelector('.fa-sign-out-alt')) {
+                            alert('Logout functionality');
+                        }
+                    });
+                }
+            });
 
-        // Charts initialization
-        document.addEventListener('DOMContentLoaded', function() {
             // Production chart
             const productionCtx = document.getElementById('productionChart').getContext('2d');
             new Chart(productionCtx, {
@@ -1409,18 +1505,18 @@
                 ctx.fillRect(30, 50, 5, 5);
                 ctx.fillRect(60, 60, 5, 5);
             }
-        });
 
-        // Dark mode toggle (example functionality)
-        function toggleDarkMode() {
-            document.documentElement.classList.toggle('dark');
-            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
-        }
+            // Dark mode toggle (example functionality)
+            function toggleDarkMode() {
+                document.documentElement.classList.toggle('dark');
+                localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+            }
 
-        // Check for saved dark mode preference
-        if (localStorage.getItem('darkMode') === 'true') {
-            document.documentElement.classList.add('dark');
-        }
+            // Check for saved dark mode preference
+            if (localStorage.getItem('darkMode') === 'true') {
+                document.documentElement.classList.add('dark');
+            }
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wajdi22/buuu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>