snapshot: preserve dashboard filters and realtime search

backend/workflows/static/workflows/css/requests_dashboard.css

@@ -425,18 +425,37 @@
 
     .search-form {
       display: grid;
-      gap: 12px;
+      gap: 10px;
+    }
+
+    .filter-grid {
+      display: grid;
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      gap: 8px;
+    }
+
+    .filter-field {
+      display: grid;
+      gap: 4px;
+    }
+
+    .filter-field label {
+      font-size: 11px;
+      font-weight: 800;
+      color: #294465;
     }
 
     .search-box {
       position: relative;
     }
 
-    .search-box input {
+    .search-box input,
+    .filter-field select,
+    .filter-field input[type="date"] {
       width: 100%;
       border: 1px solid var(--line-strong);
-      border-radius: 16px;
-      padding: 14px 16px;
+      border-radius: 14px;
+      padding: 11px 13px;
       font: inherit;
       font-weight: 600;
       color: var(--ink);
@@ -444,7 +463,9 @@
       box-shadow: inset 0 1px 0 rgba(255,255,255,0.98);
     }
 
-    .search-box input:focus {
+    .search-box input:focus,
+    .filter-field select:focus,
+    .filter-field input[type="date"]:focus {
       outline: none;
       border-color: rgba(0, 0, 120, 0.3);
       box-shadow: 0 0 0 4px rgba(0, 0, 120, 0.08);
@@ -488,7 +509,7 @@
     }
 
     .table-controls {
-      padding: 14px 18px 14px;
+      padding: 12px 18px 12px;
       border-bottom: 1px solid var(--line);
       background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.96));
     }
@@ -496,16 +517,16 @@
     .table-controls-grid {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
-      gap: 14px;
+      gap: 10px;
       align-items: stretch;
     }
 
     .control-stack {
       display: grid;
-      gap: 12px;
-      padding: 14px;
+      gap: 10px;
+      padding: 12px;
       border: 1px solid rgba(217, 227, 238, 0.95);
-      border-radius: 18px;
+      border-radius: 16px;
       background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,251,255,0.95));
       box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
     }
@@ -848,6 +869,10 @@
       .table-controls-grid {
         grid-template-columns: 1fr;
       }
+
+      .filter-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
     }
 
     @media (max-width: 760px) {
@@ -860,4 +885,5 @@
       .topbar { flex-direction: column; }
       .quick-actions { justify-content: flex-start; }
       .table-wrap { padding-left: 12px; padding-right: 12px; }
+      .filter-grid { grid-template-columns: 1fr; }
     }

backend/workflows/static/workflows/js/requests_dashboard.js

@@ -1,4 +1,34 @@
 (function () {
+      const filterForm = document.querySelector('.search-form');
+      if (filterForm) {
+        const searchInput = filterForm.querySelector('input[name="q"]');
+        const immediateFields = Array.from(
+          filterForm.querySelectorAll('select[name], input[type="date"][name]')
+        );
+        let debounceTimer = null;
+
+        const submitFilters = function () {
+          if (debounceTimer) {
+            window.clearTimeout(debounceTimer);
+            debounceTimer = null;
+          }
+          filterForm.requestSubmit();
+        };
+
+        if (searchInput) {
+          searchInput.addEventListener('input', function () {
+            if (debounceTimer) {
+              window.clearTimeout(debounceTimer);
+            }
+            debounceTimer = window.setTimeout(submitFilters, 280);
+          });
+        }
+
+        immediateFields.forEach(function (field) {
+          field.addEventListener('change', submitFilters);
+        });
+      }
+
       const selectAll = document.getElementById('select-all');
       const rowChecks = Array.from(document.querySelectorAll('.row-select'));
       const selectedCount = document.getElementById('selected-count');