Merge Live Position + Fleet Intelligence into one map
fleetnow.rahamafresh.com

0Context

Confirmed decisions

1Key facts that shape the build

No new backend logic needed. The four existing endpoints cover the whole merged UX:

Time presets already supported in dashboard_api_rev.py:252 _preset_to_range: today | 7d (="1 week") | 30d (="1 month") | custom.

One backend change only — CORS. dashboard_api_rev.py:53 _ALLOWED_ORIGINS (env DASHBOARD_CORS_ORIGINS) must include https://fleetnow.rahamafresh.com, otherwise the browser blocks every fetch.

Both SPAs already share: MapLibre GL JS 4.7.1, Carto Voyager basemap (Mapbox dark-v11 scaffolded but inactive), the same CSS design tokens, the same COST_CENTRE_PALETTE + colorForCostCentre() hash, the same SEQ_PALETTE/seqColor(), the Fireside HQ POI, the EAT clock, and escapeHtml. The merge is mostly composition + re-theme, not new algorithms.

2Deliverable

A single self-contained fleetnow.html (one file, inline CSS/JS, MapLibre from unpkg) — matching the existing single-file-SPA pattern so it drops straight into a rustfs bucket behind an nginx proxy. Keep it in the repo for source control, e.g. frontend/fleetnow.html (new frontend/ dir; the existing two live only in rustfs, so this also starts versioning the SPA source).

Layout (per the user's spec; palette only from the image)

No left panel. The map is full-bleed under the top bar; everything else floats over it as cards — filters bottom-right (always), trip list bottom-left (trips mode only).

┌───────────────────────────────────────────────────────────────────┐
│ TOP BAR — metrics for current mode + [● Live] pill + EAT clock      │
├───────────────────────────────────────────────────────────────────┤
│  MAP (full-bleed, centred on East Africa)                          │
│                                                                     │
│  ┌───────────────────┐                   ┌──────────────────────┐  │
│  │ TRIP LIST          │                   │ FILTERS (bottom-right)│ │
│  │ (trips mode only,  │                   │  • Number plate      │  │
│  │  bottom-left)      │                   │  • Cost centre       │  │
│  │  ◀ Live            │                   │  • Time: Today▾      │  │
│  │  #1 KDK 829A · 8km │                   │    (Today/1wk/1mo/   │  │
│  │  #2 KDK 829A · 3km │                   │     Custom)          │  │
│  └───────────────────┘                   └──────────────────────┘  │
└───────────────────────────────────────────────────────────────────┘

• Top bar swaps with mode:
  • Live: Vehicles · Moving · Parked · Offline 24h+ · Median kmh + last-batch staleness chip (reuse live SPA's applyFilters summary recompute).
  • Trips: Trips · Distance · Driving h · Idle h · Vehicles · Drivers + the date-range / "first trip → last trip" bookend context (reuse trips SPA's renderResult summary block).
• Live marker + hover popup — preserve existing look & feel LOCKED Keep the deployed live-map design: a rounded pin filled with the cost-centre colour containing a white direction chevron rotated to heading, with the last-4-of-plate in a small dark pill below the pin (e.g. 690F, 453Y). The hover popup keeps its exact field set + order: plate (bold) + MOVING · NN KMH badge, driver, costcentre · city, reverse-geocoded address, heading NNN° · gps signal N, NN km on the clock, last fix Ns ago · timestamp, source <mc_type> · <device_kind>, and the action button. Only re-map colour tokens onto the warm theme (status green → --live teal, button blue → --accent amber); structure/feel unchanged. (Ref screenshot 2026-06-05.)
• Selecting a single vehicle (both paths):
  • Map-click: click a live dot → reuse the live SPA's showPopup; add a "Show trips" button (same pattern as its existing "Show last 1 h trail" button) → enters Trips mode for that vehicle at the selected period.
  • Plate dropdown: pick the plate in the bottom-right filter card → same result.
• Floating filter card (bottom-right, always visible): Number plate (single/multi select), Cost centre, Time period (default Today). Applying a cost-centre/period (no plate) → fleet-wide Trips mode; picking a plate → that vehicle's Trips. Reuse loadFilters, fillVehicleSelect/VEHICLE_META auto-fill, periodToRange (labels: Today / 1 week / 1 month / Custom).
• Floating trip list (bottom-left, trips mode only): a back affordance (◀ Live) at its head + the seq-coloured trip list (reuse renderTripList); clicking a row fits + animates the route (reuse animateTrip). Hidden in Live mode.
• The live "Tracked Fleet" side-list (renderVehicleList) is dropped — with no left panel, live vehicle selection is map-dot + plate-dropdown only.

State model (the merge core)

One mode variable: 'live' | 'trips'.

• Boot → mode='live'. Start the 15 s poll (startPolling), map centred on East Africa (center:[37.5,-3.0], zoom:5.2 so Kenya + Uganda + Mombasa + Kampala all fit). Render live layers (live-body circles, live-arrow symbols, live-label text — copied verbatim).
• Enter trips (vehicle row click, or filter "apply"): stopPolling(), hide/remove the live source+layers (or toggle visibility:none), POST /webhook/fleet-dashboard with the selection, draw trip-lines + trip-starts/trip-ends (copied verbatim), populate the left trip list, swap the top bar to trip KPIs, light up the [● Live] pill as a clickable "return" control.
• Return to live (Live pill / clear selection): cancel any animation (clearAnim), remove trip layers, restore live layers, startPolling() again.

Keep live and trip layers as separate sources/layers toggled by visibility rather than a shared source — it mirrors how each SPA already manages its own source and avoids id collisions.

Palette re-skin (full)

Replace the CSS :root tokens. Derived from the reference image (warm dark ops console):

Keep the categorical COST_CENTRE_PALETTE and SEQ_PALETTE distinct/high-contrast for legibility (don't collapse them into the warm ramp) — but reorder so the first slots lead with the brand amber/teal. Re-tone marker outlines, popups, chips, buttons, and the HQ POI to the new tokens. "Moving/active" state colour → --live teal; arrows stay white-on-halo.

3Backend change

In dashboard_api_rev.py:53, add https://fleetnow.rahamafresh.com to the DASHBOARD_CORS_ORIGINS default list (durable, for when the service is folded into Coolify), AND set it live on the running standalone bridge container's env. Per the deploy notes, that container is not Coolify-managed:

# on twala host (user runs SSH — IP-whitelisted):
#   update DASHBOARD_CORS_ORIGINS to include fleetnow, then:
docker restart dashboard_api

4Deployment (user runs the SSH/host steps — sandbox IP isn't whitelisted)

Mirror the existing liveposition/fleetintelligence wiring (single index.html object in rustfs + nginx reverse-proxy + Traefik route on the coolify net + DNS):

1. Create rustfs bucket fleetnow; upload fleetnow.html as index.html (boto3 against https://s3.rahamafresh.com, path-style — same method already used to repoint the other two).
2. Add fleetnow-proxy nginx config (clone ~/fleetintelligence-proxy/nginx.conf, point at rustfs-...:9000/fleetnow/index.html); attach Traefik labels for https://fleetnow.rahamafresh.com (entrypoints http/https, certresolver letsencrypt, traefik.docker.network=coolify).
3. Ensure DNS fleetnow.rahamafresh.com → 31.97.44.246 (LE will issue on first hit).
4. Apply the CORS change above + docker restart dashboard_api.

In the SPA, set const API_BASE = 'https://fleetapi.rahamafresh.com'; (rename from the legacy N8N_BASE for clarity).

5Verification (end to end)

1. Local smoke: open fleetnow.html from disk (or python -m http.server). Live dots load (CORS will block until fleetnow origin is allow-listed — for local dev, temporarily add http://localhost:* to DASHBOARD_CORS_ORIGINS, or test against a curl-proxied copy).
2. API contracts unchanged (curl, already-allowed origin):

   curl https://fleetapi.rahamafresh.com/webhook/live-positions
   # → {summary, geojson} with features
   
   curl -X POST https://fleetapi.rahamafresh.com/webhook/fleet-dashboard \
     -H 'Content-Type: application/x-www-form-urlencoded' \
     -d 'vehicle_numbers=KCA 542Q&period=30d'
   # → trips for one vehicle (~232 trips for that plate per fix history)

3. Mode switch: land on Live (dots + arrows + cost-centre colours + polling). Click a vehicle → map switches to that vehicle's trips for "Today", top bar shows trip KPIs, Live pill appears. Click a trip row → route animates. Click Live → returns to live snapshot, polling resumes.
4. Fleet-wide filters: pick a cost centre + "1 week", apply → all matching trips draw; clear → back to Live.
5. Post-deploy: load https://fleetnow.rahamafresh.com in a browser — no CORS errors in console; existing liveposition + fleetintelligence still load (regression check).

6Critical files

7Phased implementation roadmap

Each phase is a reviewable checkpoint. The order de-risks the hard part (the live⇄trips mode switch) by getting each half working in isolation first. Phases 0–5 are local; Phase 6 is the only one touching prod and is run by you (host is IP-whitelisted). No production push until you confirm.