Refactor of TRACON Summary section

Author: jivebiscuit

README.md

@@ -50,7 +50,10 @@ Then open [http://localhost:3000](http://localhost:3000).
 - `components/tfms-projection-map.js`
 - `app/tools/tfms/styles.css`
 - `lib/tfms/compute.js`
+- `lib/tfms/tracon-volumes.js`
 - `data/tfms-sectors.json`
+- `data/tfms-tracon-volumes.json`
+- `data/tfms-tracon-airports.json`
 - `data/tfms-airport-queue-boxes.json`
 - `data/tfms-event-splits.json` (currently hidden from UI, retained for future events)
 
@@ -119,9 +122,13 @@ Default sort priority:
 
 Current cards/modules:
 - Specialty Summary (`Now`, `+10`, `+20`, `+30`)
-- Online Positions (ZHU enroute + TRACON)
+- Online Positions (ZHU enroute controllers)
+- TRACON Summary
+  - Core cards: `I90`, `AUS`, `SAT`, `MSY`
+  - Core metrics: total airborne, arrivals, departures, overflights
+  - Airport subcards: queue count, average queue minutes, `TWR Online/Offline`
+  - Remaining TRACONs: online shown as compact cards; offline consolidated into `TRACONs Offline (N)` hover list
 - Enhanced Projection Map
-- Departure Queue (`KIAH`, `KHOU`, `KAUS`, `KSAT`, `KMSY`)
 
 Event split summary:
 - Logic/data retained
@@ -131,6 +138,10 @@ Queue boxes:
 - Config supports `bounds`, `geojson`, or `areas`
 - Multiple entries for the same ICAO are merged into one card
 
+TRACON airport mapping:
+- `data/tfms-tracon-airports.json` defines airport membership for TRACON-based arrival/departure/overflight classification
+- Codes are normalized against internal airport handling in `data/tfms-internal-airports.json`
+
 Projection/summary inclusion logic:
 - Flight must pass ZHU relevance checks (in ZHU, near perimeter inbound, or inbound to tracked internal airports)
 - Baseline minimum groundspeed filter: `>= 20 kts`

app/tools/tfms/styles.css

@@ -171,54 +171,184 @@
   background: color-mix(in srgb, #ef4444 14%, transparent);
 }
 
-.tfms-queue-grid {
+.tfms-tracon-core-grid {
   display: grid;
-  gap: 0.6rem;
-  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
 }
 
-.tfms-queue-card {
+.tfms-tracon-core-column {
+  display: grid;
+  gap: 0.62rem;
+  align-content: start;
+}
+
+.tfms-tracon-core-card {
   border: 1px solid var(--surface-border);
-  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
   border-radius: 0.7rem;
-  padding: 0.55rem 0.65rem;
+  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
+  padding: 0.56rem 0.68rem;
+  box-shadow: 0 0 0 1px color-mix(in srgb, white 7%, transparent);
+}
+
+.tfms-tracon-core-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tfms-tracon-core-header .tfms-tracon-kpi-id {
+  width: auto;
+  flex: 0 0 auto;
+  text-align: left;
+}
+
+.tfms-tracon-core-airborne-header-value {
+  flex: 1 1 auto;
+  text-align: center;
+  line-height: 1;
+}
+
+.tfms-tracon-core-stat-list {
+  margin-top: 0.34rem;
+  display: grid;
+  gap: 0.16rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
 }
 
-.tfms-queue-green {
-  border-color: color-mix(in srgb, #16a34a 48%, var(--surface-border));
+.tfms-tracon-core-stat-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
 }
 
-.tfms-queue-yellow {
-  border-color: color-mix(in srgb, #f59e0b 48%, var(--surface-border));
+.tfms-tracon-core-stat-row > span:first-child {
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.tfms-tracon-core-stat-row > span:last-child {
+  font-weight: 700;
+  text-align: right;
+}
+
+.tfms-tracon-core-metrics-inline {
+  margin-top: 0.22rem;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.tfms-tracon-core-metric-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.22rem;
+}
+
+.tfms-tracon-core-metric-cell > span:first-child {
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  line-height: 1;
 }
 
-.tfms-queue-red {
-  border-color: color-mix(in srgb, #ef4444 48%, var(--surface-border));
+.tfms-tracon-core-metric-cell > span:last-child {
+  color: var(--main);
+  font-weight: 700;
+  text-align: left;
+  line-height: 1;
+}
+
+.tfms-tracon-core-metric-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.95;
+}
+
+.tfms-tracon-core-metric-cell:nth-child(2) > span {
+  text-align: center;
+}
+
+.tfms-tracon-core-metric-cell:nth-child(3) > span {
+  text-align: right;
+}
+
+.tfms-tracon-core-metric-cell:nth-child(2) {
+  justify-content: center;
+}
+
+.tfms-tracon-core-metric-cell:nth-child(3) {
+  justify-content: flex-end;
+}
+
+.tfms-tracon-airport-card {
+  border: 1px solid color-mix(in srgb, var(--surface-border) 94%, black);
+  border-radius: 0.55rem;
+  padding: 0.3rem 0.4rem;
+  background: color-mix(in srgb, var(--surface-soft) 66%, transparent);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+.tfms-tracon-airport-stack {
+  display: grid;
+  gap: 0.32rem;
+}
+
+.tfms-tracon-airport-stack-two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.tfms-tracon-airport-card-title {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  color: var(--main);
+}
+
+.tfms-tracon-airport-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.35rem;
 }
 
-.tfms-queue-trend {
+.tfms-tracon-airport-card-header .tfms-core-status-pill {
+  padding: 0.06rem 0.32rem;
+  font-size: 0.52rem;
+}
+
+.tfms-tracon-airport-card .tfms-tracon-core-stat-row {
+  margin-top: 0.22rem;
+}
+
+.tfms-core-status-pill {
   border: 1px solid var(--surface-border);
   border-radius: 9999px;
-  padding: 0.08rem 0.45rem;
-  font-size: 0.62rem;
+  padding: 0.08rem 0.42rem;
+  font-size: 0.58rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
+  white-space: nowrap;
 }
 
-.tfms-queue-trend-up {
-  color: #ef4444;
-  border-color: color-mix(in srgb, #ef4444 55%, var(--surface-border));
-  background: color-mix(in srgb, #ef4444 18%, var(--surface-soft));
-}
-
-.tfms-queue-trend-down {
+.tfms-core-status-pill-online {
   color: #16a34a;
   border-color: color-mix(in srgb, #16a34a 55%, var(--surface-border));
   background: color-mix(in srgb, #16a34a 18%, var(--surface-soft));
 }
 
-.tfms-queue-trend-flat {
+.tfms-core-status-pill-offline {
   color: var(--muted);
   border-color: var(--surface-border);
   background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
@@ -288,6 +418,119 @@
   transform: translateY(0);
 }
 
+.tfms-tracon-kpi-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.tfms-tracon-kpi-card {
+  flex: 0 0 auto;
+  width: 8.35rem;
+  border: 1px solid var(--surface-border);
+  border-radius: 0.65rem;
+  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
+  padding: 0.38rem 0.48rem;
+}
+
+.tfms-tracon-kpi-inline {
+  padding-top: 0.34rem;
+  padding-bottom: 0.34rem;
+}
+
+.tfms-tracon-kpi-inline-row {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.tfms-tracon-kpi-inline-row-airborne .tfms-tracon-kpi-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.tfms-tracon-kpi-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.tfms-tracon-kpi-inline-row-airborne .tfms-tracon-kpi-id {
+  width: auto;
+  flex: 0 0 auto;
+  text-align: left;
+}
+
+.tfms-tracon-kpi-inline-row-airborne .tfms-tracon-kpi-count {
+  margin-left: auto;
+  width: auto;
+  min-width: 1.5ch;
+  flex: 0 0 auto;
+  text-align: right;
+}
+
+.tfms-tracon-kpi-id {
+  width: 2.45rem;
+  flex: 0 0 2.45rem;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.tfms-tracon-kpi-center {
+  width: 1.55rem;
+  flex: 0 0 1.55rem;
+  text-align: center;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.tfms-tracon-kpi-count {
+  width: 1.55rem;
+}
+
+.tfms-tracon-kpi-online {
+  border-color: color-mix(in srgb, #16a34a 46%, var(--surface-border));
+}
+
+.tfms-tracon-kpi-offline {
+  border-color: var(--surface-border);
+}
+
+.tfms-tracon-kpi-offline-summary {
+  width: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.34rem 0.62rem;
+  color: var(--muted);
+  font-size: 0.66rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.tfms-tracon-kpi-status {
+  margin-left: auto;
+  flex: 0 0 auto;
+  border: 1px solid var(--surface-border);
+  border-radius: 9999px;
+  padding: 0.04rem 0.26rem;
+  font-size: 0.51rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.tfms-tracon-kpi-dot {
+  flex: 0 0 auto;
+}
+
 :root[data-theme="dark"] .tfms-tracon-chip-online {
   border-color: color-mix(in srgb, var(--accent) 60%, var(--surface-border));
   background: color-mix(in srgb, var(--accent) 20%, var(--surface-soft));