FleetNow

A single-file map console that merges live vehicle positions and historical trips into one view for the Fireside Communications / Tracksolid fleet.

• Land on the live fleet — markers carry the department (cost-centre) colour, a heading arrow, the plate tail, and a hover popup (status, driver, reverse-geocoded address, heading, odometer, last fix, source). Markers scale with the zoom level. Shape encodes recency so stakeholders read activity at a glance:
  • ● circle (full colour + heading arrow) — moving right now
  • ■ smaller square (pastel colour, no arrow) — active within the last 24h, now stopped
  • grey ● — offline (no fix in 24h)
• Filters (bottom-right card) apply to the live map instantly:
  • Number plate — multi-select, sorted A→Z; picking a vehicle auto-fills its cost centre + city.
  • Cost centre and Assigned city — narrow the live fleet (and the KPI bar recomputes to match).
  • Time (Today / 1 week / 1 month / Custom) — applies to trips, not live.
• Drill into history: click a vehicle's dot → Show trips, or set plate / cost centre / city + period and hit Show trips for a fleet-wide pull. The map switches to seq-coloured trip routes with start/end markers and a click-to-animate replay; the ● Live pill returns to the live snapshot.

Live: https://fleetnow.rahamafresh.com

Architecture

The whole app is one self-contained index.html (inline CSS + JS; MapLibre GL JS loaded from a CDN). It has no build step and no local assets. It reads from the existing dashboard read-API — it does not talk to the database directly.

index.html      → the entire SPA
Dockerfile      → bakes index.html into an nginx:alpine image (port 80)
nginx.conf      → static serve + /healthz + no-cache on index.html

Backend it depends on

const API_BASE = 'https://fleetapi.rahamafresh.com'; (top of the <script> in index.html). That service (dashboard_api_rev.py in the tracksolid repo) exposes:

Endpoint	Use
GET /webhook/live-positions	live snapshot {summary, geojson}
GET /webhook/live-positions/track?vehicle_number=&hours=	1 h trail
GET /webhook/fleet-dashboard	filter options (plates, cost centres)
POST /webhook/fleet-dashboard	trips for a selection {summary, geojson}

CORS: the API must allow the https://fleetnow.rahamafresh.com origin (DASHBOARD_CORS_ORIGINS). It is in the code default; make sure the deployed dashboard_api container's env includes it, then restart that container.

Deploy (Coolify, git-based)

1. In Coolify, create a new Application from this git repo (https://repo.rahamafresh.com/kianiadee/fleetnow.git), branch main, build pack Dockerfile.
2. Set the port to 80.
3. Add the domain fleetnow.rahamafresh.com (HTTPS / Let's Encrypt). Coolify wires Traefik on the coolify network automatically.
4. Point DNS fleetnow.rahamafresh.com → the VPS (31.97.44.246) if not already.
5. Deploy. Every push to main redeploys; index.html is served no-cache so changes appear immediately.

Local preview

docker build -t fleetnow . && docker run --rm -p 8080:80 fleetnow
# open http://localhost:8080

Loading from localhost will be CORS-blocked by the live API unless that origin is allow-listed. For pure UI work, run a same-origin proxy that forwards /webhook/* to fleetapi.rahamafresh.com.