From 737f8c3d311345f798c2cea123f0fd1b503aeb8e Mon Sep 17 00:00:00 2001
From: david kiania <kianiadee@davids-MacBook-Air.local>
Date: Tue, 16 Jun 2026 12:37:50 +0300
Subject: [PATCH] feat(tickets): centre filters with tiles; show only ISP
 vehicles

- Vertically centre the cluster/status/window filters against the metric tiles
  in the INC overview row.
- Overlay only ISP cost-centre vehicles (the teams handling INC); other cost
  centres are filtered out. Layer count + labels updated to "ISP vehicles".

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

diff --git a/src/index.html b/src/index.html
index 266f5ab..d62b892 100644
--- a/src/index.html
+++ b/src/index.html
@@ -223,7 +223,7 @@
   .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-row { display: flex; align-items: center; 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; }
@@ -424,7 +424,7 @@
     </div>
 
     <div class="card span12">
-      <h2>Live INC map <span class="count">open (SLA-coloured) · closed overlay · vehicles</span></h2>
+      <h2>Live INC map <span class="count">open (SLA-coloured) · closed overlay · ISP vehicles</span></h2>
       <div class="map-wrap">
         <div id="tk-map"></div>
         <div id="tk-layers" class="map-ctl collapsed">
@@ -1161,11 +1161,12 @@ async function loadLive() {
     const seen = new Set();
     for (const f of feats) {
       const p = f.properties || {}; if (!p.imei) continue;
+      // INC tickets are handled by ISP teams — only overlay ISP cost-centre vehicles.
+      if ((p.cost_centre || '').trim().toLowerCase() !== 'isp') continue;
       seen.add(p.imei); upsertVeh(p, f.geometry.coordinates);
     }
     for (const [imei, m] of tkMarkers) if (!seen.has(imei)) { m.remove(); tkMarkers.delete(imei); }
-    const s = j.summary || {};
-    vehCount = s.vehicle_count ?? feats.length;
+    vehCount = seen.size;
     buildIncLayers();
   } catch (e) { console.warn('live', e); }
 }
@@ -1237,7 +1238,7 @@ function buildIncLayers() {
   const rows = [
     { id: 'open',     label: 'Open INC',   color: SLA_COLORS.breached, n: m.open_now ?? 0 },
     { id: 'closed',   label: 'Closed INC', color: CLOSED_COLOR,        n: m.closed_in_window ?? 0 },
-    { id: 'vehicles', label: 'Vehicles',   color: '#E8954A',           n: vehCount },
+    { id: 'vehicles', label: 'ISP vehicles', color: '#E8954A',         n: vehCount },
   ];
   let html = rows.map((r) =>
     `<label class="layers-row"><input type="checkbox" data-lyr="${r.id}"${tkLayerState[r.id] ? ' checked' : ''}>