+
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);