From f3b76b7b62c05ae69ce5ad9065ca1c031fd2f7fd Mon Sep 17 00:00:00 2001
From: Mike Swanson <mike@azcomputerguru.com>
Date: Sun, 28 Dec 2025 18:44:34 -0700
Subject: [PATCH] Add clickable Online/Offline filters in sidebar

---
 server/static/dashboard.html | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/server/static/dashboard.html b/server/static/dashboard.html
index 982ab83..edc824b 100644
--- a/server/static/dashboard.html
+++ b/server/static/dashboard.html
@@ -642,6 +642,18 @@
         // Load connected machines (Access tab)
         let machines = [];
         let selectedMachine = null;
+        let currentFilter = 'all'; // 'all', 'online', 'offline'
+
+        // Setup filter click handlers
+        document.querySelectorAll('.sidebar-item[data-filter]').forEach(item => {
+            item.addEventListener('click', () => {
+                currentFilter = item.dataset.filter;
+                // Update active state
+                document.querySelectorAll('.sidebar-item[data-filter]').forEach(i => i.classList.remove('active'));
+                item.classList.add('active');
+                renderMachinesList();
+            });
+        });
 
         async function loadMachines() {
             try {
@@ -664,12 +676,23 @@
         function renderMachinesList() {
             const container = document.getElementById("machinesList");
 
-            if (machines.length === 0) {
-                container.innerHTML = '<div class="empty-state"><h3>No machines</h3><p>Install the agent on a machine to see it here</p></div>';
+            // Filter machines based on current filter
+            let filteredMachines = machines;
+            if (currentFilter === 'online') {
+                filteredMachines = machines.filter(m => m.is_online);
+            } else if (currentFilter === 'offline') {
+                filteredMachines = machines.filter(m => !m.is_online);
+            }
+
+            if (filteredMachines.length === 0) {
+                const msg = currentFilter === 'all' ? 'Install the agent on a machine to see it here' :
+                           currentFilter === 'online' ? 'No machines are currently online' :
+                           'No machines are currently offline';
+                container.innerHTML = '<div class="empty-state"><h3>No machines</h3><p>' + msg + '</p></div>';
                 return;
             }
 
-            container.innerHTML = '<div style="padding: 12px;">' + machines.map(m => {
+            container.innerHTML = '<div style="padding: 12px;">' + filteredMachines.map(m => {
                 const started = new Date(m.started_at).toLocaleString();
                 const isSelected = selectedMachine?.id === m.id;
                 const statusColor = m.is_online ? 'hsl(142, 76%, 50%)' : 'hsl(0, 0%, 50%)';