From 8cb7267e2954c1e36b6e347756f636cee0213277 Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Fri, 7 Aug 2026 10:40:09 -0400
Subject: [PATCH] Aug 7 - Update issue page filter bar

---
 app/templates/modern/issues/list.html | 201 +++++++++++++++-----------
 1 file changed, 113 insertions(+), 88 deletions(-)

diff --git a/app/templates/modern/issues/list.html b/app/templates/modern/issues/list.html
index 8dc2ace..db624d1 100644
--- a/app/templates/modern/issues/list.html
+++ b/app/templates/modern/issues/list.html
@@ -32,95 +32,120 @@
 </div>
 
 {# ── Filters ──────────────────────────────────────────────────────────── #}
+{# Same layout as the modern inspections list: fields fill two rows on the left,
+   actions in a block on the right spanning both — Filter full-height, Clear
+   above Export PDF. Contract and Facility stay adjacent because they cascade
+   (rule 61). Below md the action block wraps underneath, full width. #}
 <div class="jqc-filter-bar">
-  <form method="get" class="row g-2 align-items-end">
-    <div class="col-6 col-md-1">
-      <label class="form-label small mb-1">Issue #</label>
-      <input type="number" name="issue_id" class="form-control form-control-sm"
-             min="1" placeholder="ID" value="{{ issue_id_filter }}">
-    </div>
-    <div class="col-6 col-md-2">
-      <label class="form-label small mb-1">Severity</label>
-      <select name="severity" class="form-select form-select-sm">
-        <option value="">All</option>
-        {% for s in ['critical','high','medium','low'] %}
-        <option value="{{ s }}" {{ 'selected' if severity_filter == s }}>{{ s|title }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div class="col-6 col-md-2">
-      <label class="form-label small mb-1">Status</label>
-      <select name="status" class="form-select form-select-sm">
-        <option value="">All</option>
-        {% for s in ['open','in_progress','pending_verification','resolved'] %}
-        <option value="{{ s }}" {{ 'selected' if status_filter == s }}>{{ s|replace('_',' ')|title }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div class="col-6 col-md-2">
-      <label class="form-label small mb-1">SLA</label>
-      <select name="sla" class="form-select form-select-sm">
-        <option value="">All</option>
-        <option value="breached" {{ 'selected' if sla_filter == 'breached' }}>Breached</option>
-        <option value="at_risk"  {{ 'selected' if sla_filter == 'at_risk' }}>At Risk</option>
-        <option value="ok"       {{ 'selected' if sla_filter == 'ok' }}>OK</option>
-      </select>
-    </div>
-    <div class="col-12 col-md-2">
-      <label class="form-label small mb-1">Contract</label>
-      <select name="contract_id" id="filter_contract_id" class="form-select form-select-sm">
-        <option value="">All Contracts</option>
-        {% for p in projects %}
-        <option value="{{ p.id }}" {{ 'selected' if contract_filter == p.id|string }}>{{ p.name }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div class="col-12 col-md-2">
-      <label class="form-label small mb-1">Facility</label>
-      <select name="facility_id" id="filter_facility_id" class="form-select form-select-sm">
-        <option value="">All Facilities</option>
-        {% for f in facilities %}
-        <option value="{{ f.id }}" {{ 'selected' if facility_filter == f.id|string }}>{{ f.name }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div class="col-6 col-md-2">
-      <label class="form-label small mb-1">Reported From</label>
-      <input type="date" name="date_from" class="form-control form-control-sm"
-             value="{{ date_from_filter }}">
-    </div>
-    <div class="col-6 col-md-2">
-      <label class="form-label small mb-1">Reported To</label>
-      <input type="date" name="date_to" class="form-control form-control-sm"
-             value="{{ date_to_filter }}">
-    </div>
-    <div class="col-12 col-md-2">
-      <label class="form-label small mb-1">Reporter</label>
-      <select name="reporter_id" class="form-select form-select-sm">
-        <option value="">All Reporters</option>
-        {% for u in reporters %}
-        <option value="{{ u.id }}" {{ 'selected' if reporter_filter == u.id|string }}>{{ u.display_name }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div class="col-12 col-md-2">
-      <label class="form-label small mb-1">Handled By</label>
-      <select name="handler_type" class="form-select form-select-sm">
-        <option value="">All Handlers</option>
-        <option value="internal" {{ 'selected' if handler_filter == 'internal' }}>Janitorial Staff</option>
-        <option value="facility" {{ 'selected' if handler_filter == 'facility' }}>Facility Staff</option>
-        <option value="vendor"   {{ 'selected' if handler_filter == 'vendor' }}>External Vendor</option>
-      </select>
-    </div>
-    <div class="col-12 col-md-auto d-flex align-items-end gap-2 flex-wrap">
-      <button type="submit" class="btn btn-sm btn-primary px-3">
-        <i class="bi bi-funnel"></i> Filter
-      </button>
-      <a href="{{ url_for('issues.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
-      <a href="{{ url_for('issues.export_list_pdf', **request.args) }}"
-         class="btn btn-sm btn-outline-danger">
-        <i class="bi bi-file-earmark-pdf"></i> Export PDF
-      </a>
+  <form method="get">
+    <div class="d-flex flex-wrap gap-3 align-items-stretch">
+
+      {# ── Fields ──────────────────────────────────────────────────────── #}
+      <div class="flex-grow-1" style="min-width:min(100%, 620px);">
+        <div class="row g-2 align-items-end">
+          <div class="col-6 col-md-2">
+            <label class="form-label small mb-1">Issue #</label>
+            <input type="number" name="issue_id" class="form-control form-control-sm"
+                   min="1" placeholder="ID" value="{{ issue_id_filter }}">
+          </div>
+          <div class="col-6 col-md-2">
+            <label class="form-label small mb-1">Severity</label>
+            <select name="severity" class="form-select form-select-sm">
+              <option value="">All</option>
+              {% for s in ['critical','high','medium','low'] %}
+              <option value="{{ s }}" {{ 'selected' if severity_filter == s }}>{{ s|title }}</option>
+              {% endfor %}
+            </select>
+          </div>
+          <div class="col-6 col-md-2">
+            <label class="form-label small mb-1">Status</label>
+            <select name="status" class="form-select form-select-sm">
+              <option value="">All</option>
+              {% for s in ['open','in_progress','pending_verification','resolved'] %}
+              <option value="{{ s }}" {{ 'selected' if status_filter == s }}>{{ s|replace('_',' ')|title }}</option>
+              {% endfor %}
+            </select>
+          </div>
+          <div class="col-12 col-md-3">
+            <label class="form-label small mb-1">Contract</label>
+            <select name="contract_id" id="filter_contract_id" class="form-select form-select-sm">
+              <option value="">All Contracts</option>
+              {% for p in projects %}
+              <option value="{{ p.id }}" {{ 'selected' if contract_filter == p.id|string }}>{{ p.name }}</option>
+              {% endfor %}
+            </select>
+          </div>
+          <div class="col-12 col-md-3">
+            <label class="form-label small mb-1">Facility</label>
+            <select name="facility_id" id="filter_facility_id" class="form-select form-select-sm">
+              <option value="">All Facilities</option>
+              {% for f in facilities %}
+              <option value="{{ f.id }}" {{ 'selected' if facility_filter == f.id|string }}>{{ f.name }}</option>
+              {% endfor %}
+            </select>
+          </div>
+        </div>
+
+        <div class="row g-2 align-items-end mt-2">
+          <div class="col-6 col-md-2">
+            <label class="form-label small mb-1">SLA</label>
+            <select name="sla" class="form-select form-select-sm">
+              <option value="">All</option>
+              <option value="breached" {{ 'selected' if sla_filter == 'breached' }}>Breached</option>
+              <option value="at_risk"  {{ 'selected' if sla_filter == 'at_risk' }}>At Risk</option>
+              <option value="ok"       {{ 'selected' if sla_filter == 'ok' }}>OK</option>
+            </select>
+          </div>
+          <div class="col-6 col-md-3">
+            <label class="form-label small mb-1">Reported From</label>
+            <input type="date" name="date_from" class="form-control form-control-sm"
+                   value="{{ date_from_filter }}">
+          </div>
+          <div class="col-6 col-md-3">
+            <label class="form-label small mb-1">Reported To</label>
+            <input type="date" name="date_to" class="form-control form-control-sm"
+                   value="{{ date_to_filter }}">
+          </div>
+          <div class="col-6 col-md-2">
+            <label class="form-label small mb-1">Reporter</label>
+            <select name="reporter_id" class="form-select form-select-sm">
+              <option value="">All Reporters</option>
+              {% for u in reporters %}
+              <option value="{{ u.id }}" {{ 'selected' if reporter_filter == u.id|string }}>{{ u.display_name }}</option>
+              {% endfor %}
+            </select>
+          </div>
+          <div class="col-12 col-md-2">
+            <label class="form-label small mb-1">Handled By</label>
+            <select name="handler_type" class="form-select form-select-sm">
+              <option value="">All Handlers</option>
+              <option value="internal" {{ 'selected' if handler_filter == 'internal' }}>Janitorial Staff</option>
+              <option value="facility" {{ 'selected' if handler_filter == 'facility' }}>Facility Staff</option>
+              <option value="vendor"   {{ 'selected' if handler_filter == 'vendor' }}>External Vendor</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {# ── Actions — spans both field rows ─────────────────────────────── #}
+      <div class="d-flex gap-2 align-items-stretch flex-grow-1 flex-md-grow-0">
+        <button type="submit"
+                class="btn btn-primary d-flex align-items-center justify-content-center flex-grow-1 flex-md-grow-0"
+                style="min-width:112px;">
+          <span><i class="bi bi-funnel"></i> Filter</span>
+        </button>
+        <div class="d-flex flex-column gap-2 flex-grow-1 flex-md-grow-0">
+          <a href="{{ url_for('issues.index') }}"
+             class="btn btn-sm btn-outline-secondary d-flex align-items-center justify-content-center flex-grow-1"
+             style="min-width:124px;">Clear</a>
+          <a href="{{ url_for('issues.export_list_pdf', **request.args) }}"
+             class="btn btn-sm btn-outline-danger d-flex align-items-center justify-content-center flex-grow-1 text-nowrap"
+             style="min-width:124px;">
+            <span><i class="bi bi-file-earmark-pdf"></i> Export PDF</span>
+          </a>
+        </div>
+      </div>
+
     </div>
   </form>
 </div>