From 930a6461166dcce574c7b419dedb474037587532 Mon Sep 17 00:00:00 2001
From: david kiania <kianiadee@davids-MacBook-Air.local>
Date: Tue, 16 Jun 2026 12:29:32 +0300
Subject: [PATCH] refactor(tickets): move cluster/status/window filters beside
 the KPIs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fold the filter controls into the INC overview card, right-aligned next to the
metric tiles, and remove the standalone filter bar — better visual balance
(fills the previously empty right side of the overview row).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/index.html | 61 +++++++++++++++++++++++++++++---------------------
 1 file changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/index.html b/src/index.html
index c72dfe8..266f5ab 100644
--- a/src/index.html
+++ b/src/index.html
@@ -222,6 +222,12 @@
   .sla-ok       { color: var(--live); }
   .sla-unknown  { color: var(--muted); }
 
+  /* INC overview row: metric tiles (left) + filters (right) on one balanced row */
+  .tk-overview-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
+  .tk-overview-metrics { min-width: 0; }
+  .tk-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-left: auto; }
+  .tk-filters .ff select, .tk-filters .ff input { min-width: 130px; }
+
   /* Live vehicle DOM marker (ported from FleetNow) */
   .veh-marker { cursor: pointer; will-change: transform; }
   .veh-inner { position: relative; width: 32px; height: 32px; transform: scale(var(--veh-scale, 1)); transform-origin: center center; }
@@ -384,34 +390,37 @@
   </section>
 
   <section class="view" id="view-tickets">
-  <div class="filterbar">
-    <div class="ff">
-      <label for="tk-cluster">Cluster</label>
-      <select id="tk-cluster"><option value="">All clusters</option></select>
-    </div>
-    <div class="ff">
-      <label for="tk-status">Status</label>
-      <select id="tk-status"><option value="">All statuses</option></select>
-    </div>
-    <div class="ff">
-      <label for="tk-window">Window</label>
-      <select id="tk-window">
-        <option value="today" selected>Today</option>
-        <option value="week">This week</option>
-        <option value="month">This month</option>
-        <option value="custom">Custom range</option>
-      </select>
-    </div>
-    <div class="ff custom" id="tk-ff-start"><label for="tk-start">Start</label><input type="date" id="tk-start"></div>
-    <div class="ff custom" id="tk-ff-end"><label for="tk-end">End</label><input type="date" id="tk-end"></div>
-    <button class="btn" id="tk-apply" type="button">Apply</button>
-    <button class="btn ghost" id="tk-refresh" type="button" title="Reload">↻</button>
-  </div>
-
   <main id="tk-main">
     <div class="card span12">
-      <h2>INC overview <span class="count" id="tk-fresh"></span></h2>
-      <div class="metric-row" id="tk-metrics"><div class="empty">Loading…</div></div>
+      <div class="tk-overview-row">
+        <div class="tk-overview-metrics">
+          <h2>INC overview <span class="count" id="tk-fresh"></span></h2>
+          <div class="metric-row" id="tk-metrics"><div class="empty">Loading…</div></div>
+        </div>
+        <div class="tk-filters">
+          <div class="ff">
+            <label for="tk-cluster">Cluster</label>
+            <select id="tk-cluster"><option value="">All clusters</option></select>
+          </div>
+          <div class="ff">
+            <label for="tk-status">Status</label>
+            <select id="tk-status"><option value="">All statuses</option></select>
+          </div>
+          <div class="ff">
+            <label for="tk-window">Window</label>
+            <select id="tk-window">
+              <option value="today" selected>Today</option>
+              <option value="week">This week</option>
+              <option value="month">This month</option>
+              <option value="custom">Custom range</option>
+            </select>
+          </div>
+          <div class="ff custom" id="tk-ff-start"><label for="tk-start">Start</label><input type="date" id="tk-start"></div>
+          <div class="ff custom" id="tk-ff-end"><label for="tk-end">End</label><input type="date" id="tk-end"></div>
+          <button class="btn" id="tk-apply" type="button">Apply</button>
+          <button class="btn ghost" id="tk-refresh" type="button" title="Reload">↻</button>
+        </div>
+      </div>
     </div>
 
     <div class="card span12">