From 5bcad8ab452be74c1507d571f045aa23a180741d Mon Sep 17 00:00:00 2001
From: matt wilkie <maphew@gmail.com>
Date: Fri, 21 Nov 2025 14:24:14 -0700
Subject: [PATCH] feat(monitor-webui): make stats cards interactive filters

- Add click event listeners to stats cards to filter issue list
- Add hover effects and cursor pointer to stats cards
- Update filter logic to sync with stats card clicks
---
 examples/monitor-webui/web/index.html         |  8 +++---
 .../monitor-webui/web/static/css/styles.css   |  7 +++++
 examples/monitor-webui/web/static/js/app.js   | 26 +++++++++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/examples/monitor-webui/web/index.html b/examples/monitor-webui/web/index.html
index 19187f3b..bbc46fb5 100644
--- a/examples/monitor-webui/web/index.html
+++ b/examples/monitor-webui/web/index.html
@@ -29,19 +29,19 @@
         <div class="card stats-card">
             <h2>Statistics</h2>
             <div class="stats-grid" id="stats-grid">
-                <div class="stat-item">
+                <div class="stat-item" id="stat-item-total">
                     <div class="stat-value" id="stat-total">-</div>
                     <div class="stat-label">Total Issues</div>
                 </div>
-                <div class="stat-item">
+                <div class="stat-item" id="stat-item-in-progress">
                     <div class="stat-value" id="stat-in-progress">-</div>
                     <div class="stat-label">In Progress</div>
                 </div>
-                <div class="stat-item">
+                <div class="stat-item" id="stat-item-open">
                     <div class="stat-value" id="stat-open">-</div>
                     <div class="stat-label">Open</div>
                 </div>
-                <div class="stat-item">
+                <div class="stat-item" id="stat-item-closed">
                     <div class="stat-value" id="stat-closed">-</div>
                     <div class="stat-label">Closed</div>
                 </div>
diff --git a/examples/monitor-webui/web/static/css/styles.css b/examples/monitor-webui/web/static/css/styles.css
index bd92d039..e5342e61 100644
--- a/examples/monitor-webui/web/static/css/styles.css
+++ b/examples/monitor-webui/web/static/css/styles.css
@@ -107,6 +107,13 @@ h1, h2, h3, h4, h5, h6 {
     padding: 1rem;
     background: #f9f9fa;
     border-radius: 6px;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.stat-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 }
 
 .stat-value {
diff --git a/examples/monitor-webui/web/static/js/app.js b/examples/monitor-webui/web/static/js/app.js
index bfeb22a2..202d418c 100644
--- a/examples/monitor-webui/web/static/js/app.js
+++ b/examples/monitor-webui/web/static/js/app.js
@@ -299,6 +299,32 @@ document.getElementById('clear-text').addEventListener('click', function() {
     filterIssues();
 });
 
+// Stat click listeners
+function setStatusFilter(statuses) {
+    const statusSelect = document.getElementById('filter-status');
+    const options = Array.from(statusSelect.options);
+    
+    options.forEach(opt => {
+        if (statuses === 'all') {
+            opt.selected = true;
+        } else {
+            opt.selected = statuses.includes(opt.value);
+        }
+    });
+    
+    // Update toggle button text
+    const allSelected = options.every(opt => opt.selected);
+    const btn = document.getElementById('toggle-status');
+    btn.textContent = allSelected ? 'Select None' : 'Select All';
+    
+    filterIssues();
+}
+
+document.getElementById('stat-item-total').addEventListener('click', () => setStatusFilter('all'));
+document.getElementById('stat-item-open').addEventListener('click', () => setStatusFilter(['open']));
+document.getElementById('stat-item-in-progress').addEventListener('click', () => setStatusFilter(['in_progress']));
+document.getElementById('stat-item-closed').addEventListener('click', () => setStatusFilter(['closed']));
+
 // Reload button listener
 document.getElementById('reload-button').addEventListener('click', reloadData);