From 005a56517ac5223444e6e09877fecb033f7885c8 Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Fri, 7 Aug 2026 10:34:38 -0400
Subject: [PATCH] Aug 7 - Update inspection page filter bar

---
 app/templates/modern/inspections/list.html | 175 ++++++++++++---------
 1 file changed, 99 insertions(+), 76 deletions(-)

diff --git a/app/templates/modern/inspections/list.html b/app/templates/modern/inspections/list.html
index 5d47bcb..021fa71 100644
--- a/app/templates/modern/inspections/list.html
+++ b/app/templates/modern/inspections/list.html
@@ -38,87 +38,110 @@
 </div>
 
 {# ── Filters ──────────────────────────────────────────────────────────── #}
+{# Layout: fields fill two rows on the left; the actions sit in a block on the
+   right that spans both rows — Filter full-height, Clear above Export PDF.
+   Below the md breakpoint the action block wraps underneath, full width. #}
 <div class="jqc-filter-bar">
   <form method="get">
-    <div class="row g-2 align-items-end">
-      <div class="col-6 col-md-1">
-        <label class="form-label small mb-1">Inspection #</label>
-        <input type="number" name="inspection_id" class="form-control form-control-sm"
-               min="1" placeholder="ID" value="{{ inspection_id_filter }}">
+    <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">Inspection #</label>
+            <input type="number" name="inspection_id" class="form-control form-control-sm"
+                   min="1" placeholder="ID" value="{{ inspection_id_filter }}">
+          </div>
+          <div class="col-6 col-md-3">
+            <label class="form-label small mb-1">Status</label>
+            <select name="status" class="form-select form-select-sm">
+              <option value="">All Statuses</option>
+              {% for s in ['in_progress','completed','flagged'] %}
+              <option value="{{ s }}" {% if status_filter == s %}selected{% endif %}>{{ 'Submitted' if s == 'completed' else s|replace('_',' ')|title }}</option>
+              {% endfor %}
+              <option value="follow_up" {% if status_filter == 'follow_up' %}selected{% endif %}>Flagged Follow-up</option>
+              <option value="has_issues" {% if status_filter == 'has_issues' %}selected{% endif %}>Has Logged Issues</option>
+            </select>
+          </div>
+          <div class="col-12 col-md-3">
+            <label class="form-label small mb-1">Contract</label>
+            <select name="contract_id" id="insp_filter_contract" class="form-select form-select-sm">
+              <option value="">All Contracts</option>
+              {% for p in projects %}
+              <option value="{{ p.id }}" {% if contract_filter == p.id|string %}selected{% endif %}>{{ p.name }}</option>
+              {% endfor %}
+            </select>
+          </div>
+          <div class="col-12 col-md-4">
+            <label class="form-label small mb-1">Facility</label>
+            <select name="facility_id" id="insp_filter_facility" class="form-select form-select-sm">
+              <option value="">All Facilities</option>
+              {% for f in facilities %}
+              <option value="{{ f.id }}" {% if facility_filter == f.id|string %}selected{% endif %}>{{ f.name }}</option>
+              {% endfor %}
+            </select>
+          </div>
+        </div>
+
+        {# Second row. The score fields absorb the Inspector column's width when
+           the viewer is an inspector (they only ever see their own work, so the
+           dropdown is not rendered for them) — the row always totals 12. #}
+        <div class="row g-2 align-items-end mt-2">
+          {% if inspectors %}
+          <div class="col-12 col-md-4">
+            <label class="form-label small mb-1">Inspector</label>
+            <select name="inspector_id" class="form-select form-select-sm">
+              <option value="">All Inspectors</option>
+              {% for u in inspectors %}
+              <option value="{{ u.id }}" {% if inspector_filter == u.id|string %}selected{% endif %}>{{ u.display_name }}</option>
+              {% endfor %}
+            </select>
+          </div>
+          {% endif %}
+          <div class="col-6 col-md-{{ 3 if inspectors else 4 }}">
+            <label class="form-label small mb-1">Date 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 if inspectors else 4 }}">
+            <label class="form-label small mb-1">Date 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-{{ 1 if inspectors else 2 }}">
+            <label class="form-label small mb-1">Min Score</label>
+            <input type="number" name="score_min" class="form-control form-control-sm"
+                   min="0" max="100" placeholder="0" value="{{ score_min_filter }}">
+          </div>
+          <div class="col-6 col-md-{{ 1 if inspectors else 2 }}">
+            <label class="form-label small mb-1">Max Score</label>
+            <input type="number" name="score_max" class="form-control form-control-sm"
+                   min="0" max="100" placeholder="100" value="{{ score_max_filter }}">
+          </div>
+        </div>
       </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 Statuses</option>
-          {% for s in ['in_progress','completed','flagged'] %}
-          <option value="{{ s }}" {% if status_filter == s %}selected{% endif %}>{{ 'Submitted' if s == 'completed' else s|replace('_',' ')|title }}</option>
-          {% endfor %}
-          <option value="follow_up" {% if status_filter == 'follow_up' %}selected{% endif %}>Flagged Follow-up</option>
-          <option value="has_issues" {% if status_filter == 'has_issues' %}selected{% endif %}>Has Logged Issues</option>
-        </select>
-      </div>
-      <div class="col-12 col-md-3">
-        <label class="form-label small mb-1">Contract</label>
-        <select name="contract_id" id="insp_filter_contract" class="form-select form-select-sm">
-          <option value="">All Contracts</option>
-          {% for p in projects %}
-          <option value="{{ p.id }}" {% if contract_filter == p.id|string %}selected{% endif %}>{{ 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="insp_filter_facility" class="form-select form-select-sm">
-          <option value="">All Facilities</option>
-          {% for f in facilities %}
-          <option value="{{ f.id }}" {% if facility_filter == f.id|string %}selected{% endif %}>{{ f.name }}</option>
-          {% endfor %}
-        </select>
-      </div>
-      {% if inspectors %}
-      <div class="col-12 col-md-2">
-        <label class="form-label small mb-1">Inspector</label>
-        <select name="inspector_id" class="form-select form-select-sm">
-          <option value="">All Inspectors</option>
-          {% for u in inspectors %}
-          <option value="{{ u.id }}" {% if inspector_filter == u.id|string %}selected{% endif %}>{{ u.display_name }}</option>
-          {% endfor %}
-        </select>
-      </div>
-      {% endif %}
-    </div>
-    <div class="row g-2 align-items-end mt-1">
-      <div class="col-6 col-md-2">
-        <label class="form-label small mb-1">Date 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">Date 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-1">
-        <label class="form-label small mb-1">Min Score</label>
-        <input type="number" name="score_min" class="form-control form-control-sm"
-               min="0" max="100" placeholder="0" value="{{ score_min_filter }}">
-      </div>
-      <div class="col-6 col-md-1">
-        <label class="form-label small mb-1">Max Score</label>
-        <input type="number" name="score_max" class="form-control form-control-sm"
-               min="0" max="100" placeholder="100" value="{{ score_max_filter }}">
-      </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
+
+      {# ── 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>
-        <a href="{{ url_for('inspections.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
-        <a id="exportPdfBtn"
-           href="{{ url_for('inspections.export_list_pdf', **request.args) }}"
-           class="btn btn-sm btn-outline-danger">
-          <i class="bi bi-file-earmark-pdf"></i> Export PDF
-        </a>
+        <div class="d-flex flex-column gap-2 flex-grow-1 flex-md-grow-0">
+          <a href="{{ url_for('inspections.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 id="exportPdfBtn"
+             href="{{ url_for('inspections.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>