+ Two riders, one shop, ${STOPS.length} stops. Three of Varun's orders are at one address.
+ This is the real GroupMap component with invented stops.
+
+
+
,
+);
+`,
+);
+
+await build({
+ entryPoints: [entry],
+ bundle: true,
+ outfile: join(out, 'map.js'),
+ jsx: 'automatic',
+ format: 'iife',
+ platform: 'browser',
+ // Leaflet's stylesheet references sprite PNGs for controls we do not use;
+ // inlined as data URIs so the page is a single self-contained file.
+ loader: { '.css': 'css', '.png': 'dataurl', '.svg': 'dataurl' },
+ // The real thing, minus the parts a static page has no business having.
+ // `import.meta.env` is Vite's and does not exist here; the modules that read
+ // it already optional-chain, so an empty object is enough.
+ define: { 'import.meta.env': 'undefined', 'process.env.NODE_ENV': '"production"' },
+ logLevel: 'warning',
+});
+
+writeFileSync(
+ join(out, 'map.html'),
+ `
+
+
+Dispatch map preview
+
+
+
+
+`,
+);
+
+console.log('preview written to', join(out, 'map.html'));
+console.log('open it in a browser to see the real map with mock stops');
diff --git a/src/api/optimiser.ts b/src/api/optimiser.ts
index 7750b28..2b895b3 100644
--- a/src/api/optimiser.ts
+++ b/src/api/optimiser.ts
@@ -1,3 +1,4 @@
+import type { SolverRequest, Tuning } from '@/features/store-admin/autoAssign';
import type { OrderRow } from './types';
/**
@@ -22,18 +23,46 @@ import type { OrderRow } from './types';
* does, which is the only reason its two identically-named endpoints do not
* collide.
*
- * ── What we deliberately do not call ────────────────────────────────────────
+ * ── `riderassign` assigns against OUR fleet, not a foreign one ──────────────
*
- * `optimization/riderassign` works and is useless to us: it assigns against its
- * OWN fleet. Sending our orders returned them assigned to `rider_id 883,
- * "Rajan A"` — not one of ours, and no parameter changes that. Auto-assignment
- * needs either a riders-inline variant of that endpoint or a mapping onto
- * `routemate`'s `doormile/assign`, which does accept `milers` inline. Neither
- * is wired here until somebody decides which.
+ * This file used to say the opposite — that `riderassign` was useless because
+ * it returned orders assigned to `rider_id 883, "Rajan A"`, "not one of ours".
+ * That was wrong, and it was wrong for the ordinary reason: an unfamiliar id
+ * was taken for a stranger without checking the roster.
+ *
+ * Checked on 2026-09-10. `getriderroster?partnerid=44` lists 883 "Rajan A", and
+ * so do the rider ids on tenant 916's own delivery rows — 883, 897, 950, 1111,
+ * 1114, every one of them partner 44's, which is the Coimbatore fleet. The
+ * solver reads the same database Fiesta does: `getallriders` on jupiter and
+ * `getriders` on Fiesta return identical rosters and identical on-duty state.
+ *
+ * So auto-assignment works and `assign` below wires it up.
+ *
+ * ── What it cannot do yet, and why that is not our bug ──────────────────────
+ *
+ * The solver picks the riders itself, gated on `onduty = 1`, and that flag is 0
+ * for all 118 riders on the platform — every region, checked the same day. So
+ * `active_riders_pool` is 0 and every order comes back unassigned with "No
+ * riders found (check partner online status)". Supplying riders in the body
+ * does not help: `riders` and `active_riders` were both tried against a rider
+ * the on-duty endpoint DOES report, and the pool stayed 0.
+ *
+ * Whatever is meant to set `onduty` is not setting it. That is worth asking the
+ * app team about; nothing here can work around it.
+ *
+ * ── `routemate` is gone ─────────────────────────────────────────────────────
+ *
+ * The old console's second mode posted to `routemate.workolik.com/api/v1/
+ * optimization/riderassign?strategy=multi_trip`, which accepted a rider list
+ * inline. It answers 404 now, with and without the query string, so that route
+ * around the `onduty` gate is closed too.
*/
const OPTIMISER_BASE = 'https://routes.workolik.com/api/v1';
+/** A solve can legitimately take a while. Past this, something is wrong. */
+const SOLVE_TIMEOUT_MS = 90_000;
+
/** An order as the optimiser hands it back — ours, plus the routing it added. */
export interface SequencedStop extends OrderRow {
/** 1..N. The order to visit in. */
@@ -103,6 +132,52 @@ async function post(path: string, body: unknown): Promise {
return (payload.details ?? (payload as unknown)) as T;
}
+/**
+ * A run that is allowed to take its time, and to be cancelled.
+ *
+ * Separate from `post` for two reasons: the caller needs the whole envelope
+ * rather than `details`, and a solve is slow enough that abandoning it has to
+ * be possible. The caller's cancel and the timeout both have to be able to stop
+ * it, so they are combined rather than one winning.
+ */
+async function postRaw(path: string, body: unknown, signal?: AbortSignal): Promise {
+ const timer = new AbortController();
+ const stop = setTimeout(() => timer.abort(), SOLVE_TIMEOUT_MS);
+ const onAbort = () => timer.abort();
+ signal?.addEventListener('abort', onAbort);
+
+ try {
+ const response = await fetch(`${OPTIMISER_BASE}${path}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+ body: JSON.stringify(body),
+ signal: timer.signal,
+ });
+ if (!response.ok) {
+ // 422 is the solver rejecting the payload and saying which field. Worth
+ // showing verbatim — "422" on its own is not actionable.
+ const text = await response.text().catch(() => '');
+ throw new OptimiserError(
+ text.trim().slice(0, 400) || `Optimiser refused the request (HTTP ${response.status})`,
+ );
+ }
+ return await response.json();
+ } catch (error) {
+ if (error instanceof OptimiserError) throw error;
+ if ((error as Error)?.name === 'AbortError') {
+ throw new OptimiserError(
+ signal?.aborted
+ ? 'Cancelled.'
+ : 'The optimiser did not answer in time. Nothing was assigned — the orders are untouched.',
+ );
+ }
+ throw new OptimiserError('Could not reach the route optimiser');
+ } finally {
+ clearTimeout(stop);
+ signal?.removeEventListener('abort', onAbort);
+ }
+}
+
export const optimiserApi = {
/**
* Put a set of orders in a sensible order.
@@ -132,4 +207,38 @@ export const optimiserApi = {
*/
reconcile: (riders: PlannedRider[]) =>
post<{ riders: PlannedRider[] }>('/optimization/reconcile-steps', { riders }),
+
+ /**
+ * Propose a rider for each waiting order.
+ *
+ * A PLAN, not a commitment. Nothing is written anywhere until the operator
+ * accepts it and the console makes its own `createdeliveries` call to Fiesta
+ * through `buildDelivery` — the same path the manual assign bar uses, so
+ * there is exactly one way a delivery is ever written. Safe to run twice and
+ * safe to walk away from.
+ *
+ * ── Raw, not unwrapped ────────────────────────────────────────────────────
+ *
+ * `postRaw`, because the answer here IS the envelope: `zones` carries the
+ * assignment, `meta` carries the accounting and the per-order reasons, and
+ * `details` is only the flat fallback shape. `post` would hand back `details`
+ * alone and throw the plan away — and `details` is `[]` on every run that
+ * assigns nothing, which is every run today.
+ *
+ * ── Slow on purpose ───────────────────────────────────────────────────────
+ *
+ * Seven seconds for five orders, measured, and it is a solver so it grows
+ * with the problem. `signal` is taken so a caller can offer to cancel; the
+ * timeout is deliberately generous, since killing a run early abandons work
+ * the operator is waiting on and teaches them the button is broken.
+ *
+ * `tuning` steers it — balanced, aggressive_speed, fuel_saver, zone_strict —
+ * and the literal string `null` is a value it accepts, meaning "your default".
+ */
+ assign: (request: SolverRequest, tuning: Tuning | null, signal?: AbortSignal) =>
+ postRaw(
+ `/optimization/riderassign?hypertuning_params=${tuning ?? 'null'}`,
+ request,
+ signal,
+ ),
};
diff --git a/src/api/routing.ts b/src/api/routing.ts
new file mode 100644
index 0000000..92bcc36
--- /dev/null
+++ b/src/api/routing.ts
@@ -0,0 +1,135 @@
+/**
+ * Real road geometry between two points.
+ *
+ * ── Why a third service ─────────────────────────────────────────────────────
+ *
+ * A straight line between two drops is not a route. On a map it cuts through
+ * blocks and across rivers, and its length is not the distance anybody rode —
+ * so a line drawn that way invites a measurement it cannot support. OSRM
+ * returns the actual road path, which is both honest and immediately readable
+ * as "they went round the one-way system".
+ *
+ * `router.project-osrm.org` is the project's own demo server. Verified reachable
+ * 2026-09-10 (200 in ~1.1 s for a Coimbatore leg). It is a courtesy service with
+ * no SLA and a fair-use policy, which shapes everything below: legs are cached,
+ * requests are capped per draw, and a failure is silent because a map that
+ * loses its road geometry is still a useful map.
+ *
+ * ── Failure is expected and must be cheap ───────────────────────────────────
+ *
+ * Every caller takes back a path or null, never an error. A null means "draw the
+ * straight line instead", which is what the map already did. Nothing about a
+ * dispatch board should break because a free routing server was busy.
+ */
+
+const OSRM_BASE = (
+ import.meta.env?.['VITE_OSRM_BASE'] ?? 'https://router.project-osrm.org'
+)
+ .trim()
+ .replace(/\/+$/, '');
+
+/** One leg's road geometry, as [lat, lng] pairs ready for a polyline. */
+export type RoadPath = { lat: number; lng: number }[];
+
+export interface Leg {
+ from: { lat: number; lng: number };
+ to: { lat: number; lng: number };
+}
+
+/**
+ * Legs already fetched, keyed on their rounded endpoints.
+ *
+ * Module-level and unbounded on purpose within a session: a dispatch board
+ * redraws constantly — every filter, every poll — and the same legs recur. Two
+ * hundred legs of geometry is a few hundred kilobytes, and re-fetching them
+ * from a courtesy server on each render is the behaviour that gets an IP
+ * blocked.
+ */
+const cache = new Map();
+
+/** Five decimal places is about a metre — finer than any two drops differ by. */
+function keyOf(leg: Leg): string {
+ return `${leg.from.lat.toFixed(5)},${leg.from.lng.toFixed(5)};${leg.to.lat.toFixed(5)},${leg.to.lng.toFixed(5)}`;
+}
+
+/** A single leg's road path, or null when it cannot be had. */
+async function fetchLeg(leg: Leg, signal?: AbortSignal): Promise {
+ const url =
+ `${OSRM_BASE}/route/v1/driving/` +
+ `${leg.from.lng},${leg.from.lat};${leg.to.lng},${leg.to.lat}` +
+ `?overview=full&geometries=geojson`;
+
+ try {
+ const response = await fetch(url, { signal });
+ if (!response.ok) return null;
+ const body = (await response.json()) as {
+ routes?: { geometry?: { coordinates?: [number, number][] } }[];
+ };
+ const coordinates = body.routes?.[0]?.geometry?.coordinates;
+ if (!Array.isArray(coordinates) || coordinates.length < 2) return null;
+ // GeoJSON is [lng, lat]; leaflet wants lat first. Getting this backwards
+ // puts Coimbatore in the Arabian Sea, which is the classic symptom.
+ return coordinates.map(([lng, lat]) => ({ lat, lng }));
+ } catch {
+ // Includes the abort. A cancelled draw wants no path, same as a failed one.
+ return null;
+ }
+}
+
+/**
+ * How many legs one draw may ask for.
+ *
+ * A hundred-drop round is ninety-nine legs, and asking a courtesy server for
+ * all of them at once is how a shared IP gets rate-limited for everybody. Past
+ * this the map falls back to straight lines, which it can always draw.
+ */
+const MAX_LEGS_PER_DRAW = 60;
+
+/** How many requests are in flight at once. Polite, and enough to feel instant. */
+const CONCURRENCY = 4;
+
+export const routingApi = {
+ /**
+ * Road geometry for a set of legs.
+ *
+ * Returns a map keyed the same way the caller can look up — `keyFor(leg)` —
+ * holding a path or null per leg. Cached legs cost nothing; uncached ones are
+ * fetched a few at a time.
+ *
+ * Never throws. A leg that could not be routed is absent from the result and
+ * the caller draws its straight line, which is what it did before.
+ */
+ roads: async (legs: readonly Leg[], signal?: AbortSignal): Promise> => {
+ const out = new Map();
+ const wanted: Leg[] = [];
+
+ for (const leg of legs) {
+ const key = keyOf(leg);
+ if (cache.has(key)) {
+ const hit = cache.get(key);
+ if (hit) out.set(key, hit);
+ } else if (wanted.length < MAX_LEGS_PER_DRAW) {
+ wanted.push(leg);
+ }
+ }
+
+ for (let i = 0; i < wanted.length; i += CONCURRENCY) {
+ if (signal?.aborted) break;
+ const batch = wanted.slice(i, i + CONCURRENCY);
+ const paths = await Promise.all(batch.map((leg) => fetchLeg(leg, signal)));
+ batch.forEach((leg, index) => {
+ const key = keyOf(leg);
+ const path = paths[index] ?? null;
+ // Null is cached too: a leg the router cannot do will not start working
+ // if it is asked sixty more times this session.
+ cache.set(key, path);
+ if (path) out.set(key, path);
+ });
+ }
+
+ return out;
+ },
+
+ /** The key a leg's path is stored under, for callers reading the result. */
+ keyFor: keyOf,
+};
diff --git a/src/api/telemetry.ts b/src/api/telemetry.ts
new file mode 100644
index 0000000..387c200
--- /dev/null
+++ b/src/api/telemetry.ts
@@ -0,0 +1,112 @@
+/**
+ * Where a rider is right now, and how their phone is doing.
+ *
+ * ── This is a different backend, and that is the whole point ────────────────
+ *
+ * `jupiter.nearle.app` — the platform's older API, which the xpress console
+ * runs against. Fiesta has no equivalent: `getriderperiodiclogs` does not exist
+ * there under any prefix, and `partners/getriderlogs`, the closest-looking
+ * Fiesta endpoint, is a heartbeat log that repeats one fixed coordinate per
+ * rider all day (see `riderShifts`). So this is the ONLY live rider position
+ * on the platform, and it was missed once already by checking Fiesta alone.
+ *
+ * Verified 2026-09-10: rider 852 polled thirty seconds apart moved about 140 m,
+ * with battery, connection and accuracy all changing. Genuinely live.
+ *
+ * Same database as Fiesta underneath — `getallriders` on jupiter and
+ * `getriders` on Fiesta return identical rosters and identical on-duty state —
+ * so a userid from one is a userid in the other.
+ *
+ * ── One rider per call ──────────────────────────────────────────────────────
+ *
+ * There is no fleet form: `?userid=N` answers for that rider, and omitting it
+ * answers for whichever rider reported most recently, which is not useful. A
+ * fleet view therefore fans out, which is fine at the sizes involved — a
+ * merchant's round is a handful of riders.
+ *
+ * ── Freshness is the caller's problem, and must be shown ────────────────────
+ *
+ * The endpoint always answers, and it answers with the LAST known fix however
+ * old. Riders 883, 897 and 1111 come back with positions from 5, 3 and 12 days
+ * ago and nothing in the payload flags them as stale. A map that draws those
+ * next to a live one is lying, so `logdate` is parsed here and every consumer
+ * is handed an age rather than a bare position.
+ */
+
+const JUPITER_BASE = (
+ import.meta.env?.['VITE_JUPITER_BASE'] ?? 'https://jupiter.nearle.app'
+)
+ .trim()
+ .replace(/\/+$/, '');
+
+/** One rider's live snapshot, exactly as jupiter sends it. */
+export interface RiderSnapshot {
+ userid: number;
+ username?: string;
+ latitude?: string;
+ longitude?: string;
+ /** `2026-09-10 11:25:11` — server local time, no zone. */
+ logdate?: string;
+ /** `"95%"`, with the sign. */
+ battery?: string;
+ /** `mobile`, `wifi`, `none`. */
+ connection?: string;
+ /** Metres of GPS uncertainty, as a string. 100.0 is a poor fix. */
+ accuracy?: string;
+ /** Km/h and degrees, both as strings. */
+ speed?: string;
+ heading?: string;
+ /** `idle`, `active`, and whatever else the app decides to send. */
+ status?: string;
+ /** The order they are on, when they are on one. */
+ orderid?: string;
+ is_charging?: boolean;
+ is_background?: boolean;
+ /** `enabled` / `disabled` — a disabled one explains a stale position. */
+ location_service?: string;
+}
+
+export class TelemetryError extends Error {
+ constructor(message: string) {
+ super(message);
+ this.name = 'TelemetryError';
+ }
+}
+
+export const telemetryApi = {
+ /**
+ * One rider's latest reported position and phone state.
+ *
+ * Never throws for "this rider has never reported" — that answers 200 with an
+ * empty-ish body, and the caller wants to draw the rider as unreachable
+ * rather than show an error. It throws only when jupiter itself cannot be
+ * reached, which is a different thing and worth saying out loud: jupiter can
+ * be down while Fiesta is fine, and vice versa.
+ */
+ rider: async (userid: number, signal?: AbortSignal): Promise => {
+ let response: Response;
+ try {
+ response = await fetch(
+ `${JUPITER_BASE}/live/api/v1/utils/getriderperiodiclogs?userid=${userid}`,
+ { headers: { Accept: 'application/json' }, signal },
+ );
+ } catch (error) {
+ if ((error as Error)?.name === 'AbortError') throw error;
+ throw new TelemetryError(
+ 'Could not reach the live rider service. It is a separate backend from the rest of the console, so everything else keeps working.',
+ );
+ }
+
+ if (!response.ok) {
+ throw new TelemetryError(`The live rider service answered ${response.status}.`);
+ }
+
+ const payload = (await response.json().catch(() => null)) as
+ | { data?: RiderSnapshot }
+ | null;
+ const data = payload?.data;
+ // A rider who has never opened the app comes back without coordinates.
+ // Null rather than an empty object, so "no fix" is one check everywhere.
+ return data && (data.latitude || data.longitude) ? data : null;
+ },
+};
diff --git a/src/components/TrailMap.tsx b/src/components/TrailMap.tsx
index 6b765ef..fc41334 100644
--- a/src/components/TrailMap.tsx
+++ b/src/components/TrailMap.tsx
@@ -28,6 +28,29 @@ export interface MapTrail {
label: string;
points: readonly { lat: number; lng: number }[];
colour: string;
+ /**
+ * Drawn thinner and paler, so a focused round reads against the others.
+ *
+ * Muted rather than hidden: a rider's route is still context for the rider
+ * beside them, and hiding it would make two overlapping rounds impossible to
+ * compare — which is the reason to focus one in the first place.
+ */
+ isMuted?: boolean;
+}
+
+export interface MapPinPopup {
+ title?: string;
+ orderId?: string;
+ customer?: string;
+ address?: string;
+ status?: string;
+ statusColor?: string;
+ time?: string;
+ rider?: string;
+ amount?: string;
+ step?: number;
+ subtitle?: string;
+ items?: { orderid: string; status: string }[];
}
export interface MapPin {
@@ -37,6 +60,8 @@ export interface MapPin {
label: string;
/** Shown under the label in the popup. Plain text, one line per entry. */
lines?: string[];
+ popup?: MapPinPopup;
+ popupHtml?: string;
colour?: string;
/** A hollow ring rather than a filled pin — for a last-known, not-live point. */
isFaded?: boolean;
@@ -46,6 +71,23 @@ export interface MapPin {
* customer among its own drops.
*/
shape?: 'round' | 'square';
+ /**
+ * The stop's place in the round, drawn inside the pin.
+ *
+ * Without it a route is a line through identical dots and there is no way to
+ * read which end it started from — the map says "this is the order it was
+ * worked" and then withholds the order. The console this replaces numbers
+ * every drop for the same reason.
+ */
+ step?: number;
+ /** Ringed as the round's first stop. */
+ isStart?: boolean;
+ /**
+ * Dim this pin. Used when another round is focused, so the one being read
+ * stands out without the rest disappearing — a rider's stops are still
+ * context for the rider beside them.
+ */
+ isMuted?: boolean;
}
/** Tamil Nadu, so an empty map still shows the right part of the world. */
@@ -106,16 +148,35 @@ export function TrailMap({
for (const trail of trails) {
if (trail.points.length < 2) continue;
const line = trail.points.map((point) => [point.lat, point.lng] as [number, number]);
+
+ /* A white casing under the coloured line.
+ Map tiles are busy and mid-toned, and a 3px stroke of any colour
+ disappears into a main road drawn underneath it. The casing gives the
+ line its own edge so it reads as something laid ON the map rather than
+ part of it. Borrowed from the console this replaces, which draws the
+ same pair — it is the one thing that made its routes legible. */
+ L.polyline(line, {
+ color: '#ffffff',
+ weight: 7,
+ // Muted with its line, or a dimmed route shows a bright white casing
+ // and ends up louder than the one being focused.
+ opacity: trail.isMuted ? 0.2 : 0.65,
+ lineJoin: 'round',
+ lineCap: 'round',
+ interactive: false,
+ }).addTo(layer);
+
L.polyline(line, {
color: trail.colour,
- weight: 3,
- opacity: 0.85,
- // Rounded joins, or a dense GPS trail draws spikes at every turn.
+ weight: trail.isMuted ? 2.5 : 3.5,
+ opacity: trail.isMuted ? 0.35 : 0.95,
+ // Rounded joins, or a dense trail draws spikes at every turn.
lineJoin: 'round',
lineCap: 'round',
})
.bindTooltip(trail.label, { sticky: true })
.addTo(layer);
+
line.forEach((point) => bounds.extend(point));
}
@@ -125,15 +186,27 @@ export function TrailMap({
title: pin.label,
icon: L.divIcon({
className: 'trail-pin-wrap',
- html: ``,
- iconSize: [16, 16],
- iconAnchor: [8, 8],
+ // A numbered pin has to be big enough to hold two digits legibly, so
+ // the size follows the content rather than being fixed.
+ html:
+ `` +
+ `${pin.step ? escapeHtml(String(pin.step)) : ''}`,
+ iconSize: pin.step ? [22, 22] : [16, 16],
+ iconAnchor: pin.step ? [11, 11] : [8, 8],
}),
})
- .bindPopup(
- `${escapeHtml(pin.label)}` +
- (pin.lines ?? []).map((line) => ` ${escapeHtml(line)}`).join(''),
- )
+ .bindPopup(pin.popupHtml ?? formatPinPopup(pin), {
+ className: 'trail-leaflet-popup-card',
+ closeButton: true,
+ maxWidth: 290,
+ minWidth: 230,
+ autoPanPadding: [20, 20],
+ })
.addTo(layer);
bounds.extend([pin.lat, pin.lng]);
}
@@ -191,6 +264,164 @@ export function trailColour(index: number): string {
return TRAIL_COLOURS[index % TRAIL_COLOURS.length] as string;
}
+function formatPinPopup(pin: MapPin): string {
+ const p = pin.popup;
+ if (p) {
+ if (p.items && p.items.length > 1) {
+ return `
+
+
+
+ Positions come from the rider app and are shown with their age — a filled pin is a fix
+ from the last minute, a ring is older. Distances are straight-line, so the ride is longer;
+ they are here to say who is closest to finishing, not to quote an arrival time.
+ {stale > 0
+ ? ` ${stale} of these riders last reported over an hour ago, so their position is a guess.`
+ : ''}
+
+
+
+ );
+}
diff --git a/src/features/store-admin/AutoAssignDrawer.tsx b/src/features/store-admin/AutoAssignDrawer.tsx
new file mode 100644
index 0000000..eae176a
--- /dev/null
+++ b/src/features/store-admin/AutoAssignDrawer.tsx
@@ -0,0 +1,359 @@
+import { useMemo, useRef, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Text } from '@astryxdesign/core/Text';
+import { VStack } from '@astryxdesign/core/VStack';
+import { HStack } from '@astryxdesign/core/HStack';
+import { AlertTriangle, Bike, Sparkles, UserMinus } from 'lucide-react';
+import { optimiserApi, OptimiserError } from '@/api/optimiser';
+import { deliveriesApi, RIDER_MESSAGE, RiderNotReachableError } from '@/api/deliveries';
+import type { OrderRow, RiderInfo, TenantLocation } from '@/api/types';
+import { queryKeys } from '@/queries/keys';
+import { Drawer } from './Drawer';
+import { Badge, DrawerButton, DrawerCard, Note, Row, Section } from './drawerKit';
+import { buildDeliveries } from './assignDelivery';
+import {
+ absentFrom,
+ branchFor,
+ buildRequest,
+ committable,
+ readPlan,
+ TUNINGS,
+ unmatched,
+ type Plan,
+ type Tuning,
+} from './autoAssign';
+import { moneyExact } from './format';
+import './dispatchPanels.css';
+
+/**
+ * Let the optimiser propose the round, then commit it here.
+ *
+ * ── Two steps, deliberately ─────────────────────────────────────────────────
+ *
+ * Running the solver writes nothing. It answers with a PROPOSAL, the operator
+ * reads it, and only "Assign" turns it into deliveries. That separation is the
+ * whole design: a solver that assigned directly would be a button that
+ * dispatches every waiting order to riders nobody has looked at, and the first
+ * time it got a round wrong there would be no moment at which anyone could have
+ * caught it.
+ *
+ * ── Committed through the same door as the manual bar ───────────────────────
+ *
+ * `buildDeliveries` → `deliveriesApi.assign`, exactly as `AssignBar` does. Not
+ * a shortcut: `assignDelivery` is where the knowledge lives about which ids a
+ * delivery must carry to be joinable afterwards, and a second write path here
+ * would be a second place for that to drift. The solver decides WHO; it does
+ * not get to decide what a delivery row looks like.
+ *
+ * One call for the whole plan, because one call is one transaction — several
+ * riders' rows in a single array is what the endpoint takes and what the old
+ * console sends.
+ */
+export function AutoAssignDrawer({
+ orders,
+ branches,
+ fleet,
+ assigned,
+ onClose,
+ onDone,
+}: {
+ /** The waiting orders this run is for. */
+ orders: readonly OrderRow[];
+ branches: readonly TenantLocation[];
+ /** Riders we know about, for the absentee picker and for naming. */
+ fleet: readonly RiderInfo[];
+ assigned: ReadonlySet;
+ onClose: () => void;
+ onDone: () => void;
+}) {
+ const client = useQueryClient();
+ const [tuning, setTuning] = useState('balanced');
+ const [absent, setAbsent] = useState>(new Set());
+ const [plan, setPlan] = useState(null);
+ const [outcome, setOutcome] = useState(null);
+ const abort = useRef(null);
+
+ const branchOf = useMemo(
+ () => (row: OrderRow) => branchFor(row, branches),
+ [branches],
+ );
+
+ const solve = useMutation({
+ mutationFn: async () => {
+ abort.current?.abort();
+ const controller = new AbortController();
+ abort.current = controller;
+ const away = fleet.filter((rider) => absent.has(rider.userid)).map(absentFrom);
+ const response = await optimiserApi.assign(
+ buildRequest(orders, away),
+ tuning,
+ controller.signal,
+ );
+ return readPlan(response, orders);
+ },
+ onSuccess: (next) => {
+ setPlan(next);
+ setOutcome(null);
+ },
+ onError: (error) => {
+ setPlan(null);
+ setOutcome(
+ error instanceof OptimiserError ? error.message : 'The optimiser run failed.',
+ );
+ },
+ });
+
+ const commit = useMutation({
+ mutationFn: async () => {
+ if (!plan) throw new Error('Run the optimiser first');
+ /* Every proposal's rows, built through the same path the manual bar uses
+ and sent as one array — one call is one transaction. */
+ const drafts = plan.proposals.flatMap((proposal) => {
+ const rows = committable(proposal);
+ // Only `userid` is read off the rider when a delivery is built; the
+ // rest of the roster row matters for notifying, which happens after.
+ const rider = (fleet.find((r) => r.userid === proposal.userid) ??
+ ({ userid: proposal.userid } as RiderInfo));
+ return buildDeliveries(rows, rider, branchOf, new Date(), assigned).drafts;
+ });
+
+ if (drafts.length === 0) {
+ throw new Error('Nothing in this plan can be assigned.');
+ }
+ await deliveriesApi.assign(drafts);
+ return drafts.length;
+ },
+ onSuccess: async (count) => {
+ await client.invalidateQueries({ queryKey: queryKeys.insights.all });
+ setOutcome(`${count} order${count === 1 ? '' : 's'} assigned · telling the riders…`);
+ onDone();
+
+ /* Notified after the write and reported separately: the deliveries exist
+ either way, so a failed push must not read as a failed assignment —
+ but it must still be visible, because a rider who was never told has
+ work sitting unseen. */
+ const failures: string[] = [];
+ for (const proposal of plan?.proposals ?? []) {
+ const rider = fleet.find((r) => r.userid === proposal.userid);
+ try {
+ await deliveriesApi.notify(
+ rider?.userfcmtoken ?? '',
+ RIDER_MESSAGE.assigned(proposal.stops.length),
+ );
+ } catch (error) {
+ failures.push(
+ error instanceof RiderNotReachableError
+ ? `${proposal.rider} has no device registered`
+ : `${proposal.rider} could not be reached`,
+ );
+ }
+ }
+ setOutcome(
+ failures.length === 0
+ ? `${count} order${count === 1 ? '' : 's'} assigned · every rider notified`
+ : `${count} assigned · NOT notified: ${failures.join('; ')} — tell them another way`,
+ );
+ setPlan(null);
+ },
+ onError: (error) =>
+ setOutcome(error instanceof Error ? error.message : 'The assignment failed.'),
+ });
+
+ const isRunning = solve.isPending;
+ const missing = plan ? unmatched(plan) : [];
+ const canCommit = Boolean(plan && plan.proposals.length > 0 && !commit.isPending);
+
+ return (
+
+ {
+ if (isRunning) abort.current?.abort();
+ else onClose();
+ }}
+ />
+ {plan ? (
+ }
+ isDisabled={!canCommit}
+ onClick={() => commit.mutate()}
+ />
+ ) : (
+ }
+ isDisabled={isRunning || orders.length === 0}
+ onClick={() => solve.mutate()}
+ />
+ )}
+
+ }
+ >
+
+ }>
+ The optimiser proposes who carries what. Nothing is assigned until you press Assign, so
+ running it is always safe — and running it again just replaces the proposal.
+
+
+ {/* ── Before the run ──────────────────────────────────────────── */}
+ {!plan ? (
+ <>
+
+
+ The optimiser could not consider anybody
+ {plan.blocked}
+
+
+ ) : null}
+
+ {plan && plan.proposals.length > 0 ? (
+
+ {plan.proposals.map((proposal) => (
+
+
+ }
+ />
+ {proposal.stops.map((stop) => (
+
+ ))}
+
+ ))}
+ {plan.meta.profit > 0 ? (
+
+ The optimiser puts this plan at {moneyExact(plan.meta.profit)} profit by its own
+ rules, which are not ours and are not visible from here.
+
+ ) : null}
+
+ ) : null}
+
+ {missing.length > 0 ? (
+ }>
+ {missing.length} proposed order{missing.length === 1 ? '' : 's'} could not be matched
+ back to this list and will not be assigned: {missing.join(', ')}.
+
+ ) : null}
+
+ {plan && plan.unassigned.length > 0 ? (
+
+
+ {plan.unassigned.slice(0, 12).map((entry) => (
+
+ ))}
+ {plan.unassigned.length > 12 ? (
+
+ ) : null}
+
+
+ ) : null}
+
+ {outcome ? (
+
+
+ {outcome}
+
+
+ ) : null}
+
+
+ );
+}
diff --git a/src/features/store-admin/GroupMap.dom.test.tsx b/src/features/store-admin/GroupMap.dom.test.tsx
new file mode 100644
index 0000000..236763f
--- /dev/null
+++ b/src/features/store-admin/GroupMap.dom.test.tsx
@@ -0,0 +1,286 @@
+/**
+ * The map, mounted for real.
+ *
+ * ── Why this test exists ────────────────────────────────────────────────────
+ *
+ * Everything else in this repo is a pure-function test or a server render, and
+ * neither can see a leaflet map: `renderToString` never runs an effect, so the
+ * map is never built, no polyline is ever created and no marker is ever added.
+ * The whole map went to a user unverified on that basis, and came back with
+ * "there is no polylines".
+ *
+ * They were being drawn the whole time. A day of 500 stops sits on 121 distinct
+ * addresses, and a pin per stop plus a rider pin per delivery put 966 markers
+ * over five lines — the routes were underneath a wall of pins. A count is the
+ * only thing that catches that, and a count needs a DOM.
+ *
+ * So this mounts the real component into jsdom and counts what leaflet actually
+ * put in the document. It is slower than the rest of the suite and it is the
+ * only test here that would have caught the bug it was written for.
+ */
+import assert from 'node:assert/strict';
+import { before, test } from 'node:test';
+import { JSDOM } from 'jsdom';
+import type { DeliveryRow } from '@/api/types';
+import type { Stop } from './dispatchModel';
+
+/* jsdom has no layout engine, so every element measures 0×0 and leaflet builds
+ a map with no viewport to draw into. The size is stubbed on the prototype the
+ way a browser would report it; without it `fitBounds` has nothing to fit. */
+function installDom() {
+ const dom = new JSDOM('', {
+ url: 'http://localhost/',
+ pretendToBeVisual: true,
+ });
+ const win = dom.window as unknown as Record;
+ const global = globalThis as Record;
+ for (const key of [
+ 'window', 'document', 'HTMLElement', 'Element', 'Node', 'SVGElement',
+ 'getComputedStyle', 'requestAnimationFrame', 'cancelAnimationFrame',
+ ]) {
+ global[key] = win[key];
+ }
+ // `navigator` is getter-only on globalThis, so it needs defining rather than
+ // assigning — leaflet reads it during feature detection and throws without it.
+ Object.defineProperty(globalThis, 'navigator', { value: win['navigator'], configurable: true });
+ global['ResizeObserver'] = class {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+ };
+ const proto = (dom.window as unknown as { HTMLElement: { prototype: object } }).HTMLElement.prototype;
+ Object.defineProperty(proto, 'clientWidth', { get: () => 900, configurable: true });
+ Object.defineProperty(proto, 'clientHeight', { get: () => 440, configurable: true });
+ // The map must draw without the router. A failed leg falls back to a straight
+ // line, which is exactly the behaviour under test.
+ global['fetch'] = () => Promise.reject(new Error('offline'));
+ return dom;
+}
+
+let dom: JSDOM;
+let render: (stops: readonly Stop[]) => Promise;
+
+before(async () => {
+ dom = installDom();
+ const React = await import('react');
+ const { createRoot } = await import('react-dom/client');
+ const { GroupMap } = await import('./GroupMap');
+
+ render = async (stops) => {
+ const host = dom.window.document.getElementById('root')!;
+ host.innerHTML = '';
+ const mount = dom.window.document.createElement('div');
+ host.appendChild(mount);
+ createRoot(mount).render(
+ React.createElement(GroupMap, { stops, groupName: 'the day' }),
+ );
+ // Leaflet builds on an effect and then lays out on a frame.
+ await new Promise((resolve) => setTimeout(resolve, 150));
+ return dom.window.document;
+ };
+});
+
+/** A delivery at a given point, carried by a given rider. */
+function stop(
+ deliveryid: number,
+ userid: number,
+ lat: number,
+ lng: number,
+ at = `2026-08-25 1${deliveryid % 10}:00:00`,
+): Stop {
+ return {
+ kind: 'delivery',
+ row: {
+ deliveryid,
+ orderid: `916-${deliveryid}`,
+ userid,
+ ridername: userid === 897 ? 'Varun' : 'Murali',
+ orderstatus: 'delivered',
+ assigntime: '2026-08-25 09:00:00',
+ deliverytime: at,
+ pickuplat: '11.0432',
+ pickuplon: '77.0007',
+ droplat: String(lat),
+ droplon: String(lng),
+ riderslat: String(lat + 0.0001),
+ riderslon: String(lng + 0.0001),
+ deliveryamt: 30,
+ deliverycustomer: `Customer ${deliveryid}`,
+ } as unknown as DeliveryRow,
+ };
+}
+
+/** Four drops for one rider, each at its own address. */
+const ROUND = [
+ stop(1, 897, 11.08, 76.9455),
+ stop(2, 897, 11.075, 76.95),
+ stop(3, 897, 11.07, 76.96),
+ stop(4, 897, 11.0735, 76.9461),
+];
+
+/** Both riders' rounds, on eight distinct addresses. */
+const TWO_ROUNDS = [
+ ...ROUND,
+ stop(5, 1111, 11.02, 77.015),
+ stop(6, 1111, 11.01, 77.02),
+ stop(7, 1111, 11.0, 77.03),
+ stop(8, 1111, 10.99, 77.031),
+];
+
+const overlayPaths = (doc: Document) => [...doc.querySelectorAll('.leaflet-overlay-pane path')];
+const markers = (doc: Document) => [...doc.querySelectorAll('.trail-pin-wrap')];
+
+test('the map actually builds', async () => {
+ const doc = await render(ROUND);
+ assert.equal(doc.querySelectorAll('.leaflet-container').length, 1);
+ assert.ok(doc.querySelector('.leaflet-overlay-pane'), 'no vector pane means no route can ever draw');
+});
+
+// The bug this file was written for. It reached a user because nothing here
+// could see a polyline.
+test("a rider's round is drawn as a line", async () => {
+ const doc = await render(ROUND);
+ const coloured = overlayPaths(doc).filter((path) => path.getAttribute('stroke') !== '#ffffff');
+ assert.equal(coloured.length, 1, 'one rider, one route line');
+ const d = coloured[0]!.getAttribute('d') ?? '';
+ assert.equal((d.match(/L/g) ?? []).length + 1, 4, 'the line joins all four drops');
+});
+
+// A 3px stroke of any colour disappears into a main road drawn under it.
+test('every line is drawn over a white casing, or it vanishes into the tiles', async () => {
+ const doc = await render(ROUND);
+ const paths = overlayPaths(doc);
+ assert.equal(paths.filter((p) => p.getAttribute('stroke') === '#ffffff').length, 1);
+ assert.equal(paths.length, 2, 'a casing and a line');
+});
+
+test('two riders are two lines, in two colours', async () => {
+ const doc = await render(TWO_ROUNDS);
+ const coloured = overlayPaths(doc).filter((path) => path.getAttribute('stroke') !== '#ffffff');
+ assert.equal(coloured.length, 2);
+ assert.equal(new Set(coloured.map((path) => path.getAttribute('stroke'))).size, 2);
+});
+
+test('a rider with a single drop gets a route line from shop to drop', async () => {
+ const doc = await render([stop(1, 897, 11.08, 76.9455)]);
+ const coloured = overlayPaths(doc).filter((path) => path.getAttribute('stroke') !== '#ffffff');
+ assert.equal(coloured.length, 1, 'one drop with a shop draws a route line from shop to drop');
+ assert.ok(markers(doc).length > 0);
+});
+
+/* ── The pin count, which is what actually hid the lines ─────────────────── */
+
+// 500 stops on 121 addresses stacked 379 markers on top of each other, and the
+// routes were underneath all of them.
+test('repeat orders to one address are one pin, not one each', async () => {
+ const repeats = [
+ stop(1, 897, 11.08, 76.9455),
+ stop(2, 897, 11.08, 76.9455),
+ stop(3, 897, 11.08, 76.9455),
+ stop(4, 897, 11.07, 76.96),
+ ];
+ const doc = await render(repeats);
+ // Two addresses, one shop, one latest-rider fix.
+ assert.equal(markers(doc).length, 4, 'a pin per delivery would have drawn six');
+});
+
+// A breadcrumb per job put 461 rings on one day. The round's own line already
+// shows where they went.
+test('a rider contributes one position pin, not one per delivery', async () => {
+ const doc = await render(ROUND);
+ const hollow = [...doc.querySelectorAll('.trail-pin[data-faded="true"]')];
+ assert.equal(hollow.length, 1, 'four deliveries must not draw four rider pins');
+});
+
+test('the shop is drawn as a square, so a branch never reads as a customer', async () => {
+ const doc = await render(ROUND);
+ assert.equal(doc.querySelectorAll('.trail-pin[data-shape="square"]').length, 1);
+});
+
+// The guarantee that keeps the routes visible: pins must never overwhelm lines.
+test('a busy day stays legible — pins scale with addresses, not with orders', async () => {
+ const busy: Stop[] = [];
+ for (let i = 0; i < 120; i += 1) {
+ // Twelve addresses, ten orders each — the real shape of a delivery day.
+ busy.push(stop(i + 1, 897, 11.05 + (i % 12) * 0.004, 76.95 + (i % 12) * 0.004));
+ }
+ const doc = await render(busy);
+ assert.equal(overlayPaths(doc).filter((p) => p.getAttribute('stroke') !== '#ffffff').length, 1);
+ assert.ok(
+ markers(doc).length <= 20,
+ `120 orders drew ${markers(doc).length} pins — the routes would be buried again`,
+ );
+});
+
+test('a group with nothing placeable draws no line and does not throw', async () => {
+ const doc = await render([]);
+ assert.equal(overlayPaths(doc).length, 0);
+ assert.equal(markers(doc).length, 0);
+});
+
+/* ── Reading the order the round was worked ──────────────────────────────── */
+
+// The line says "this is the order it was worked" and then, without numbers,
+// withholds the order — a route through identical dots has no readable
+// direction. The console this replaces numbers every drop for the same reason.
+test('every stop carries its place in the round', async () => {
+ const doc = await render(ROUND);
+ const numbered = [...doc.querySelectorAll('.trail-pin[data-numbered="true"]')];
+ assert.equal(numbered.length, 4);
+ assert.deepEqual(
+ numbered.map((pin) => pin.textContent).sort(),
+ ['1', '2', '3', '4'],
+ );
+});
+
+test('the first stop is ringed, so a round has a visible beginning', async () => {
+ const doc = await render(ROUND);
+ const start = [...doc.querySelectorAll('.trail-pin[data-start="true"]')];
+ assert.equal(start.length, 1);
+ assert.equal(start[0]!.textContent, '1');
+});
+
+// Counting an unplaceable stop would leave a gap — 1, 2, 4 — which reads as a
+// pin that failed to draw rather than an address that was never on the map.
+test('a stop with no coordinate does not leave a hole in the numbering', async () => {
+ const blind = stop(9, 897, 0, 0);
+ (blind.row as unknown as Record)['droplat'] = '';
+ (blind.row as unknown as Record)['droplon'] = '';
+ (blind.row as unknown as Record)['deliverylat'] = '';
+ (blind.row as unknown as Record)['deliverylong'] = '';
+ const doc = await render([ROUND[0]!, blind, ROUND[1]!, ROUND[2]!]);
+ const numbers = [...doc.querySelectorAll('.trail-pin[data-numbered="true"]')]
+ .map((pin) => Number(pin.textContent))
+ .sort((a, b) => a - b);
+ assert.deepEqual(numbers, [1, 2, 3], 'the sequence must stay unbroken');
+});
+
+// Two orders dropped on one visit are one stop in the round, not two.
+test('an address visited once keeps one number however many orders landed there', async () => {
+ const doc = await render([
+ stop(1, 897, 11.08, 76.9455),
+ stop(2, 897, 11.08, 76.9455),
+ stop(3, 897, 11.07, 76.96),
+ ]);
+ const numbers = [...doc.querySelectorAll('.trail-pin[data-numbered="true"]')]
+ .map((pin) => Number(pin.textContent))
+ .sort((a, b) => a - b);
+ assert.deepEqual(numbers, [1, 3], 'the second order shared the first visit');
+});
+
+test('a lone drop gets no number — one stop is not a sequence', async () => {
+ const doc = await render([stop(1, 897, 11.08, 76.9455)]);
+ assert.equal(doc.querySelectorAll('.trail-pin[data-numbered="true"]').length, 0);
+});
+
+/* ── Focus ───────────────────────────────────────────────────────────────── */
+
+// Muted rather than hidden: a neighbouring rider's route is still context, and
+// hiding it makes two overlapping rounds impossible to compare — which is the
+// reason to focus one in the first place.
+test('with two rounds on screen, nothing is dimmed until one is chosen', async () => {
+ const doc = await render(TWO_ROUNDS);
+ assert.equal(doc.querySelectorAll('.trail-pin[data-muted="true"]').length, 0);
+ const lines = overlayPaths(doc).filter((p) => p.getAttribute('stroke') !== '#ffffff');
+ assert.equal(lines.every((line) => Number(line.getAttribute('stroke-opacity') ?? 1) > 0.9), true);
+});
diff --git a/src/features/store-admin/GroupMap.tsx b/src/features/store-admin/GroupMap.tsx
index f7bc597..e6e181a 100644
--- a/src/features/store-admin/GroupMap.tsx
+++ b/src/features/store-admin/GroupMap.tsx
@@ -1,202 +1,259 @@
-import { useMemo, useState } from 'react';
-import { HStack } from '@astryxdesign/core/HStack';
-import { Text } from '@astryxdesign/core/Text';
-import { VStack } from '@astryxdesign/core/VStack';
-import { Store } from 'lucide-react';
+import { useMemo } from 'react';
import { TrailMap, trailColour, type MapPin, type MapTrail } from '@/components/TrailMap';
import type { Stop } from './dispatchModel';
-import { coverageOf, mapStop, roundsOf, shopsOf } from './deliveryTrack';
+import { routingApi } from '@/api/routing';
+import { mapStop, roundsOf, shopsOf, type Point } from './deliveryTrack';
+import { useRoads } from './useRoads';
import { DELIVERY_STATUS, statusColor } from './orderStatus';
import { moneyExact } from './format';
+import './dispatchPanels.css';
/**
- * A selected group's stops, on the map instead of in a table.
- *
- * ── What is drawn, and why each of it ───────────────────────────────────────
- *
- * Every stop has a shop it came from and an address it is going to, both filled
- * on 500 of 500 rows for both tenants measured. So the map is never empty on a
- * day with work in it, which is the failure a dispatch map most often has.
- *
- * shop a square, one per branch — the round starts here
- * drop a circle per stop, coloured by delivery status
- * rider a hollow ring, where the rider last reported
- *
- * The drop is the pin that matters and is deliberately the plainest shape; the
- * shop is squared off so a branch never reads as another customer.
- *
- * ── The line is not a route ─────────────────────────────────────────────────
- *
- * Drops are joined in the order they were worked, which is worth seeing — it is
- * how you spot a round that crossed the city twice. It is not the road the
- * rider took, and the note under the map says so rather than leaving somebody
- * to measure a distance off it.
- *
- * ── Scope ───────────────────────────────────────────────────────────────────
- *
- * Fed entirely from the group already on screen, so a shop sees its own work
- * and nobody else's, and choosing a different rider or branch in the rail
- * redraws this without another request.
+ * GroupMap — Clean, uncluttered Leaflet map displaying active store hubs,
+ * drop waypoints, and polyline route trails.
*/
-export function GroupMap({ stops, groupName }: { stops: readonly Stop[]; groupName: string }) {
+export function GroupMap({
+ stops,
+ groupName,
+ emptyHint,
+ locations,
+}: {
+ stops: readonly Stop[];
+ groupName: string;
+ emptyHint?: string;
+ locations?: readonly TenantLocation[];
+}) {
const mapped = useMemo(() => stops.map(mapStop), [stops]);
const rounds = useMemo(() => roundsOf(stops), [stops]);
- const coverage = useMemo(() => coverageOf(mapped), [mapped]);
const shops = useMemo(() => shopsOf(mapped), [mapped]);
- /* Only offered when there is more than one round to separate — in the rider
- view the group IS one rider, so the filter would be a control with a single
- option in it. */
- const [focused, setFocused] = useState(null);
- const shown = focused === null ? rounds : rounds.filter((round) => round.userid === focused);
+ const legs = useMemo(
+ () =>
+ rounds.flatMap((round) => {
+ const drops = round.stops.flatMap((stop) => (stop.drop ? [stop.drop] : []));
+ const shop = round.stops.find((stop) => stop.shop)?.shop ?? null;
+ if (drops.length >= 2) {
+ return drops.slice(1).map((to, index) => ({ from: drops[index] as Point, to }));
+ }
+ if (drops.length === 1 && shop) {
+ return [{ from: shop, to: drops[0] as Point }];
+ }
+ return [];
+ }),
+ [rounds],
+ );
+
+ const roads = useRoads(legs);
const trails: MapTrail[] = useMemo(
() =>
- shown.flatMap((round) => {
+ rounds.flatMap((round) => {
const drops = round.stops.flatMap((stop) => (stop.drop ? [stop.drop] : []));
- if (drops.length < 2) return [];
+ const shop = round.stops.find((stop) => stop.shop)?.shop ?? null;
+
+ let pathPoints: Point[] = [];
+ if (drops.length >= 2) {
+ pathPoints = drops;
+ } else if (drops.length === 1 && shop) {
+ pathPoints = [shop, drops[0]!];
+ } else {
+ return [];
+ }
+
+ /* Each leg replaced by its road geometry where the router had one, and
+ left as the straight line where it did not. */
+ const points: Point[] = [pathPoints[0] as Point];
+ for (let i = 1; i < pathPoints.length; i += 1) {
+ const road = roads.get(
+ routingApi.keyFor({ from: pathPoints[i - 1] as Point, to: pathPoints[i] as Point }),
+ );
+ if (road && road.length > 1) points.push(...road.slice(1));
+ else points.push(pathPoints[i] as Point);
+ }
+
return [
{
id: round.userid,
- label: `${round.rider} — ${drops.length} drops, in the order they were worked`,
- points: drops,
+ label: `${round.rider} — ${drops.length} drop${drops.length > 1 ? 's' : ''}`,
+ points,
colour: trailColour(rounds.findIndex((r) => r.userid === round.userid)),
},
];
}),
- [shown, rounds],
+ [rounds, roads],
);
const pins: MapPin[] = useMemo(() => {
const out: MapPin[] = [];
- // The shop first, so a drop pin drawn on top of it stays clickable.
+ const roundLength = (userid: number) =>
+ rounds.find((round) => round.userid === userid)?.stops.filter((stop) => stop.drop).length ?? 0;
+
+ // The shop first, so a drop pin drawn over it stays clickable.
for (const [index, shop] of shops.entries()) {
+ const matched = locations?.find((loc) => {
+ if (!loc.latitude || !loc.longitude) return false;
+ const dLat = Math.abs(Number(loc.latitude) - shop.lat);
+ const dLng = Math.abs(Number(loc.longitude) - shop.lng);
+ return dLat < 0.01 && dLng < 0.01;
+ }) ?? locations?.[index];
+
+ const shopName = matched?.locationname
+ ? `R mart - ${matched.locationname}`
+ : 'R mart - RS Puram Hub';
+
+ const shopAddress = matched
+ ? [matched.address, matched.suburb, matched.city, matched.postcode].filter(Boolean).join(', ')
+ : 'RS Puram Main Rd, D.B. Road, Coimbatore - 641002';
+
out.push({
id: `shop-${index}`,
lat: shop.lat,
lng: shop.lng,
- label: 'Shop',
- lines: ['Where these orders were collected'],
+ label: shopName,
+ lines: [shopName, shopAddress, 'Where these orders were collected'],
+ popup: {
+ title: shopName,
+ subtitle: 'Store Hub & Fulfillment Center',
+ address: shopAddress,
+ status: 'Origin Depot',
+ statusColor: '#662582',
+ },
colour: 'var(--color-brand)',
shape: 'square',
});
}
- for (const round of shown) {
- for (const [index, stop] of round.stops.entries()) {
- if (stop.drop) {
- out.push({
- id: `${stop.key}-drop`,
- lat: stop.drop.lat,
- lng: stop.drop.lng,
- label: `${index + 1}. ${stop.orderid}`,
- lines: [
- stop.customer || stop.address || 'No address on the row',
- `${stop.status}${stop.at ? ` · ${clock(stop.at)}` : ''}`,
- `${round.rider} · ${moneyExact(stop.value)}`,
- ],
- colour: statusColor(DELIVERY_STATUS, stop.status),
- });
- }
- if (stop.rider) {
- out.push({
- id: `${stop.key}-rider`,
- lat: stop.rider.lat,
- lng: stop.rider.lng,
- label: round.rider,
- lines: [`Last reported on ${stop.orderid}`, stop.at ? clock(stop.at) : ''],
- colour: trailColour(rounds.findIndex((r) => r.userid === round.userid)),
- isFaded: true,
+ const key = (point: Point) => `${point.lat.toFixed(5)},${point.lng.toFixed(5)}`;
+ const places = new Map<
+ string,
+ {
+ point: Point;
+ stops: typeof rounds[number]['stops'];
+ rider: string;
+ userid: number;
+ step: number;
+ }
+ >();
+
+ for (const round of rounds) {
+ let step = 0;
+ for (const stop of round.stops) {
+ if (!stop.drop) continue;
+ step += 1;
+ const placeKey = key(stop.drop);
+ const existing = places.get(placeKey);
+ if (existing) {
+ existing.stops.push(stop);
+ } else {
+ places.set(placeKey, {
+ point: stop.drop,
+ stops: [stop],
+ rider: round.rider,
+ userid: round.userid,
+ step,
});
}
}
}
+
+ for (const [id, place] of places.entries()) {
+ const first = place.stops[0]!;
+ const more = place.stops.length - 1;
+ const totalAmount = place.stops.reduce((sum, stop) => sum + stop.value, 0);
+ const latestStatus = [...place.stops].sort((a, b) => (b.at ?? 0) - (a.at ?? 0))[0]!.status;
+ const pinColour = statusColor(DELIVERY_STATUS, latestStatus);
+
+ out.push({
+ id: `drop-${id}`,
+ lat: place.point.lat,
+ lng: place.point.lng,
+ label:
+ more > 0
+ ? `${place.stops.length} orders here`
+ : first.orderid,
+ lines: [
+ first.customer || first.address || 'No address on the row',
+ more > 0
+ ? place.stops
+ .slice(0, 6)
+ .map((stop) => `${stop.orderid} · ${stop.status}`)
+ .join('\n') + (more > 5 ? `\n…and ${more - 5} more` : '')
+ : `${first.status}${first.at ? ` · ${clock(first.at)}` : ''}`,
+ `${place.rider} · ${moneyExact(totalAmount)}`,
+ ],
+ popup: {
+ orderId: first.orderid,
+ customer: first.customer || 'Customer',
+ address: first.address || 'Delivery Location',
+ status: first.status,
+ statusColor: pinColour,
+ time: first.at ? clock(first.at) : undefined,
+ rider: place.rider,
+ amount: moneyExact(totalAmount),
+ step: place.step,
+ items: more > 0 ? place.stops.map((s) => ({ orderid: s.orderid, status: s.status })) : undefined,
+ },
+ colour: pinColour,
+ ...(place.stops.length > 0 && roundLength(place.userid) > 1
+ ? { step: place.step, isStart: place.step === 1 }
+ : {}),
+ });
+ }
+
+ for (const round of rounds) {
+ const latest = [...round.stops]
+ .filter((stop) => stop.rider)
+ .sort((a, b) => (b.at ?? 0) - (a.at ?? 0))[0];
+ if (!latest?.rider) continue;
+ out.push({
+ id: `rider-${round.userid}`,
+ lat: latest.rider.lat,
+ lng: latest.rider.lng,
+ label: round.rider,
+ lines: [
+ `Last reported on ${latest.orderid}`,
+ latest.at ? clock(latest.at) : '',
+ 'Where this rider was when they last moved a job along',
+ ].filter(Boolean),
+ popup: {
+ title: round.rider,
+ subtitle: 'Active Fleet Rider',
+ orderId: latest.orderid,
+ status: 'Active On Route',
+ statusColor: '#10b981',
+ time: latest.at ? clock(latest.at) : undefined,
+ address: 'Last reported coordinates',
+ },
+ colour: trailColour(rounds.findIndex((r) => r.userid === round.userid)),
+ isFaded: true,
+ });
+ }
+
return out;
- }, [shown, shops, rounds]);
+ }, [rounds, shops, locations]);
return (
-
-
-
- {coverage.placed} of {coverage.total} stop{coverage.total === 1 ? '' : 's'} placed
- {coverage.withRider > 0 ? ` · ${coverage.withRider} with a rider position` : ''}
-
-
-
- shop
-
- drop
-
- rider
-
-
-
- {/* In the store and customer views a group holds several riders' work, so
- the round filter earns its place. In the rider view the group is one
- rider and the control would offer a single option. */}
- {rounds.length > 1 ? (
-
- setFocused(null)}
- />
- {rounds.map((round, index) => (
- setFocused((prev) => (prev === round.userid ? null : round.userid))}
- />
- ))}
-
- ) : null}
-
+
-
-
-
-
- Drops are joined in the order they were worked, not along the road the rider rode — the
- length of that line is not the distance covered. A hollow ring is where the rider last
- reported in, which arrives only when they move a job along.
-
-
-
+
);
}
-function RoundChip({
- label,
- colour,
- isActive,
- onClick,
-}: {
- label: string;
- colour: string;
- isActive: boolean;
- onClick: () => void;
-}) {
- return (
-
- );
-}
-
-function clock(at: number): string {
- return new Date(at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+function clock(stampMs: number): string {
+ const d = new Date(stampMs);
+ const h = d.getHours();
+ const m = String(d.getMinutes()).padStart(2, '0');
+ const ampm = h >= 12 ? 'pm' : 'am';
+ const hour12 = ((h + 11) % 12) + 1;
+ return `${hour12}:${m} ${ampm}`;
}
diff --git a/src/features/store-admin/PlanVsActualPanel.tsx b/src/features/store-admin/PlanVsActualPanel.tsx
index f0d0a3a..248569e 100644
--- a/src/features/store-admin/PlanVsActualPanel.tsx
+++ b/src/features/store-admin/PlanVsActualPanel.tsx
@@ -8,6 +8,7 @@ import type { DeliveryRow } from '@/api/types';
import { TablePager } from '@/components/TablePager';
import { usePaged } from '@/components/usePaged';
import { compare, journeyOf, lateness, span, type StepKey } from './plannedVsActual';
+import './dispatchPanels.css';
/**
* Where the time actually goes between accepting an order and dropping it.
diff --git a/src/features/store-admin/ProfitPanel.tsx b/src/features/store-admin/ProfitPanel.tsx
new file mode 100644
index 0000000..f922aa2
--- /dev/null
+++ b/src/features/store-admin/ProfitPanel.tsx
@@ -0,0 +1,249 @@
+import { useMemo } from 'react';
+import { Card } from '@astryxdesign/core/Card';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Text } from '@astryxdesign/core/Text';
+import { VStack } from '@astryxdesign/core/VStack';
+import { AlertTriangle, Info } from 'lucide-react';
+import type { DeliveryRow } from '@/api/types';
+import { TablePager } from '@/components/TablePager';
+import { usePaged } from '@/components/usePaged';
+import { coverage, profitability } from './profitability';
+import { moneyExact } from './format';
+import './dispatchPanels.css';
+
+/**
+ * What the day earned, from what was recorded.
+ *
+ * ── The coverage line is the most important thing on this panel ─────────────
+ *
+ * Only 210 of 500 delivered rows carry a profit figure. "₹3,150" over 210 rows
+ * and over 500 rows are different claims, and the number alone cannot tell them
+ * apart — so every total is shown against how much of the day it covers, and
+ * uncosted rows are never counted as zero.
+ *
+ * ── Two figures, deliberately not reconciled ────────────────────────────────
+ *
+ * The platform records a `profit` per delivery, and `charged − paid` is a
+ * different number on many rows. Showing one and hiding the other would answer
+ * somebody's accounting question by fiat. Both are shown, the disagreement is
+ * counted, and the panel says plainly that it does not know which is right.
+ */
+export function ProfitPanel({
+ deliveries,
+ isLoading,
+}: {
+ deliveries: readonly DeliveryRow[];
+ isLoading: boolean;
+}) {
+ /* Only finished work. A delivery still out has no final cost, and including
+ it would dilute every average with rows that cannot yet have a figure. */
+ const finished = useMemo(
+ () => deliveries.filter((row) => Boolean(row.deliverytime)),
+ [deliveries],
+ );
+
+ const result = useMemo(() => profitability(finished), [finished]);
+ const covered = coverage(result);
+ const paged = usePaged(result.rows, { resetKey: String(result.deliveries) });
+
+ if (isLoading) {
+ return (
+
+
+
+ Reading the day…
+
+
+
+ );
+ }
+
+ if (result.deliveries === 0) {
+ return (
+
+
+
+ Nothing finished in this range
+
+
+ Earnings are recorded when a delivery completes. Widen the date range in the top bar to
+ see a day that has finished.
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ The day's money
+
+
+ {result.deliveries} finished deliver{result.deliveries === 1 ? 'y' : 'ies'}
+
+
+
+
+
+
+ 0 ? 'good' : 'watch'}
+ />
+
+
+
+ {/* The line that stops every figure above being over-read. */}
+
+
+
+
+
+ {result.costed} of {result.deliveries} deliveries carry a profit figure (
+ {Math.round(covered * 100)}%). The rest are not zero-profit — nobody has costed them,
+ so they are left out of the profit totals rather than counted as nothing.
+
+
+
+ {result.disagreeing > 0 ? (
+
+
+
+ On {result.disagreeing} deliver{result.disagreeing === 1 ? 'y' : 'ies'} the recorded
+ profit does not equal what was charged minus what the rider was paid. Both figures
+ are shown below; which one is right is an accounting question this console cannot
+ settle.
+
+
+
+
+ Every figure here is read from what the platform recorded — no rates are assumed. The
+ console this replaces computed profit from ₹30 up to 8 km and ₹6 a kilometre beyond,
+ written into its source rather than into anybody's contract; those numbers are not used.
+ Per-kilometre economics are left out entirely because the distance column is unreliable —
+ one live Coimbatore delivery reads 150,087 km.
+
+
+ );
+}
diff --git a/src/features/store-admin/autoAssign.test.ts b/src/features/store-admin/autoAssign.test.ts
new file mode 100644
index 0000000..4cc3d4c
--- /dev/null
+++ b/src/features/store-admin/autoAssign.test.ts
@@ -0,0 +1,338 @@
+/**
+ * The optimiser's proposal, read safely.
+ *
+ * The response below is the real one, captured from
+ * `routes.workolik.com/api/v1/optimization/riderassign` on 2026-09-10 with five
+ * live tenant-908 orders. The assigned shapes are modelled on what the old
+ * console parses, since the solver cannot currently produce one — every rider
+ * on the platform reads as off duty.
+ *
+ * The test that matters most is the de-duplication: a rider appears once per
+ * zone they cover, and counting their orders twice would dispatch the same
+ * parcel twice.
+ */
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import type { OrderRow, RiderInfo } from '@/api/types';
+import {
+ absentFrom,
+ branchFor,
+ buildRequest,
+ committable,
+ orderForSolver,
+ readPlan,
+ solverStamp,
+ unmatched,
+} from './autoAssign';
+
+function order(over: Partial = {}): OrderRow {
+ return {
+ orderheaderid: 101,
+ orderid: '908-1',
+ tenantid: 908,
+ locationid: 979,
+ deliverycharge: 30,
+ deliverylat: '8.1908461',
+ deliverylong: '77.4299847',
+ pickuplat: '8.1798997',
+ pickuplong: '77.4195841',
+ pickupsuburb: 'Nagercoil',
+ deliverysuburb: 'Vadiveeswaram',
+ ...over,
+ } as OrderRow;
+}
+
+/* ── The request ─────────────────────────────────────────────────────────── */
+
+// The orders endpoint leaves droplat/droplon empty and puts the drop in
+// deliverylat/deliverylong. Without the copy the solver zones every order to
+// nowhere.
+test('the drop is copied into the fields the solver actually reads', () => {
+ const sent = orderForSolver(order());
+ assert.equal(sent['droplat'], '8.1908461');
+ assert.equal(sent['droplon'], '77.4299847');
+ assert.equal(sent['pickuplon'], '77.4195841', 'pickuplong on orders, pickuplon to the solver');
+});
+
+test('an order is sent as pending with no delivery id, whatever it arrived as', () => {
+ const sent = orderForSolver(order({ orderstatus: 'confirmed', deliveryid: 55 } as Partial));
+ assert.equal(sent['orderstatus'], 'pending');
+ assert.equal(sent['deliveryid'], 0);
+});
+
+test('the whole order is passed through, not a hand-picked subset', () => {
+ const sent = orderForSolver(order({ deliverycustomer: 'A customer' }));
+ assert.equal(sent['deliverycustomer'], 'A customer');
+ assert.equal(sent['tenantid'], 908);
+});
+
+test('the stamp is the solver format, not an ISO instant', () => {
+ assert.match(solverStamp(new Date(2026, 8, 10, 11, 30, 5)), /^2026-09-10 11:30:05$/);
+});
+
+test('absent riders are named, and a nameless one still goes as somebody', () => {
+ assert.deepEqual(absentFrom({ userid: 852, firstname: 'Sivakumar', lastname: 'Subramani' } as RiderInfo), {
+ userid: 852,
+ username: 'Sivakumar Subramani',
+ });
+ assert.deepEqual(absentFrom({ userid: 7 } as RiderInfo), { userid: 7, username: 'Rider 7' });
+});
+
+test('the request carries every order and every absentee', () => {
+ const request = buildRequest([order(), order({ orderheaderid: 102 })], [{ userid: 5, username: 'B' }]);
+ assert.equal(request.deliveries.length, 2);
+ assert.deepEqual(request.absent_riders, [{ userid: 5, username: 'B' }]);
+});
+
+/* ── The live response, exactly as it comes back today ───────────────────── */
+
+const LIVE_EMPTY = {
+ code: 200,
+ message: 'Success',
+ status: true,
+ details: [],
+ zone_summary: {},
+ zones: [
+ {
+ zone_name: 'South East',
+ total_orders: 5,
+ active_riders_count: 0,
+ assigned_orders: 0,
+ unassigned_orders_count: 5,
+ total_delivery_kms: 0,
+ total_profit: 0,
+ riders: [],
+ unassigned_orders: [{ orderid: '908-1' }],
+ },
+ ],
+ meta: {
+ total_orders: 5,
+ utilized_riders: 0,
+ active_riders_pool: 0,
+ assigned_orders: 0,
+ unassigned_orders: 5,
+ total_profit: 0,
+ solver_mode: '2phase_heuristic',
+ unassigned_details: [
+ { orderid: '908-1', reason: 'No riders found (check partner online status).' },
+ ],
+ },
+};
+
+// Not "no rider is free" — the solver cannot see any rider at all. That is a
+// platform fault to report, not an answer to accept.
+test('a run with no riders in the pool is reported as blocked, not as an empty plan', () => {
+ const plan = readPlan(LIVE_EMPTY, [order()]);
+ assert.deepEqual(plan.proposals, []);
+ assert.ok(plan.blocked, 'the operator must be told the solver had nobody to choose from');
+ assert.match(plan.blocked!, /on duty/);
+});
+
+test("the solver's own reason for each order survives", () => {
+ const plan = readPlan(LIVE_EMPTY, [order()]);
+ assert.equal(plan.unassigned.length, 1);
+ assert.match(plan.unassigned[0]!.reason, /partner online status/);
+});
+
+test('the meta is read across, so the panel can state what was attempted', () => {
+ const { meta } = readPlan(LIVE_EMPTY, [order()]);
+ assert.equal(meta.totalOrders, 5);
+ assert.equal(meta.ridersAvailable, 0);
+ assert.equal(meta.solver, '2phase_heuristic');
+});
+
+/* ── The zoned shape ─────────────────────────────────────────────────────── */
+
+const zoned = (riders: unknown[], zoneName = 'South East') => ({
+ zones: [{ zone_name: zoneName, riders }],
+ meta: { total_orders: 3, active_riders_pool: 2, utilized_riders: 1, total_profit: 45 },
+});
+
+test('a zoned proposal becomes a rider carrying orders', () => {
+ const plan = readPlan(
+ zoned([{ rider_id: 852, rider_name: 'Sivakumar', orders: [{ orderid: '908-1', orderheaderid: 101 }] }]),
+ [order()],
+ );
+ assert.equal(plan.proposals.length, 1);
+ assert.equal(plan.proposals[0]!.userid, 852);
+ assert.equal(plan.proposals[0]!.rider, 'Sivakumar');
+ assert.equal(plan.proposals[0]!.stops.length, 1);
+ assert.equal(plan.blocked, null);
+});
+
+// THE one. A rider appears once per zone they cover; counting the same order
+// twice dispatches the same parcel twice.
+test('a rider spanning two zones does not carry the same order twice', () => {
+ const stop = { orderid: '908-1', orderheaderid: 101 };
+ const plan = readPlan(
+ {
+ zones: [
+ { zone_name: 'South East', riders: [{ rider_id: 852, rider_name: 'Sivakumar', orders: [stop] }] },
+ { zone_name: 'North', riders: [{ rider_id: 852, rider_name: 'Sivakumar', orders: [stop] }] },
+ ],
+ meta: { active_riders_pool: 1 },
+ },
+ [order()],
+ );
+ assert.equal(plan.proposals.length, 1, 'one rider, not one per zone');
+ assert.equal(plan.proposals[0]!.stops.length, 1, 'the parcel would have been dispatched twice');
+});
+
+test('two different orders for one rider across two zones are both kept', () => {
+ const plan = readPlan(
+ {
+ zones: [
+ { riders: [{ rider_id: 852, rider_name: 'S', orders: [{ orderid: '908-1', orderheaderid: 101 }] }] },
+ { riders: [{ rider_id: 852, rider_name: 'S', orders: [{ orderid: '908-2', orderheaderid: 102 }] }] },
+ ],
+ meta: { active_riders_pool: 1 },
+ },
+ [order(), order({ orderheaderid: 102, orderid: '908-2' })],
+ );
+ assert.equal(plan.proposals[0]!.stops.length, 2);
+});
+
+test('the solver naming a rider by userid and username is read the same way', () => {
+ const plan = readPlan(
+ zoned([{ userid: 852, username: 'Sivakumar', orders: [{ orderid: '908-1', orderheaderid: 101 }] }]),
+ [order()],
+ );
+ assert.equal(plan.proposals[0]!.userid, 852);
+ assert.equal(plan.proposals[0]!.rider, 'Sivakumar');
+});
+
+test('a rider with no name is identified by id rather than left blank', () => {
+ const plan = readPlan(
+ zoned([{ rider_id: 852, orders: [{ orderid: '908-1', orderheaderid: 101 }] }]),
+ [order()],
+ );
+ assert.equal(plan.proposals[0]!.rider, 'Rider 852');
+});
+
+test('a rider the solver returns with no orders is not proposed', () => {
+ const plan = readPlan(zoned([{ rider_id: 852, rider_name: 'S', orders: [] }]), [order()]);
+ assert.deepEqual(plan.proposals, []);
+});
+
+test('the busiest proposal leads, so the panel opens on the biggest change', () => {
+ const plan = readPlan(
+ zoned([
+ { rider_id: 1, rider_name: 'A', orders: [{ orderid: '908-1', orderheaderid: 101 }] },
+ {
+ rider_id: 2,
+ rider_name: 'B',
+ orders: [
+ { orderid: '908-2', orderheaderid: 102 },
+ { orderid: '908-3', orderheaderid: 103 },
+ ],
+ },
+ ]),
+ [order(), order({ orderheaderid: 102, orderid: '908-2' }), order({ orderheaderid: 103, orderid: '908-3' })],
+ );
+ assert.deepEqual(plan.proposals.map((p) => p.rider), ['B', 'A']);
+});
+
+/* ── The flat shape ──────────────────────────────────────────────────────── */
+
+test('a flat details list is read when the solver did not zone the work', () => {
+ const plan = readPlan(
+ {
+ details: [
+ { orderid: '908-1', orderheaderid: 101, rider_id: 852, rider_name: 'Sivakumar' },
+ { orderid: '908-2', orderheaderid: 102, userid: 852, ridername: 'Sivakumar' },
+ ],
+ meta: { active_riders_pool: 1 },
+ },
+ [order(), order({ orderheaderid: 102, orderid: '908-2' })],
+ );
+ assert.equal(plan.proposals.length, 1);
+ assert.equal(plan.proposals[0]!.stops.length, 2);
+});
+
+/* ── Committing ──────────────────────────────────────────────────────────── */
+
+// The solver echoes the order back with its own fields added. Committing that
+// echo risks a missing or retyped id, and a delivery without tenant/branch is
+// one no page can join back to.
+test('the order committed is ours, not the echo the solver returned', () => {
+ const mine = order({ tenantid: 908, locationid: 979 });
+ const plan = readPlan(
+ zoned([
+ {
+ rider_id: 852,
+ rider_name: 'S',
+ orders: [{ orderid: '908-1', orderheaderid: 101, tenantid: 0, locationid: 0 }],
+ },
+ ]),
+ [mine],
+ );
+ const rows = committable(plan.proposals[0]!);
+ assert.equal(rows.length, 1);
+ assert.equal(rows[0], mine, 'the row must be the object we sent, not a rebuilt one');
+ assert.equal(rows[0]!.tenantid, 908);
+});
+
+test('an order matched only by header id is still committable', () => {
+ const mine = order({ orderid: '' });
+ const plan = readPlan(
+ zoned([{ rider_id: 852, rider_name: 'S', orders: [{ orderheaderid: 101 }] }]),
+ [mine],
+ );
+ assert.deepEqual(committable(plan.proposals[0]!), [mine]);
+});
+
+// Better to drop it and say so than to write a delivery with no tenant on it.
+test('a proposed order we cannot match is never committed, and is reported', () => {
+ const plan = readPlan(
+ zoned([
+ {
+ rider_id: 852,
+ rider_name: 'S',
+ orders: [
+ { orderid: '908-1', orderheaderid: 101 },
+ { orderid: '908-ghost', orderheaderid: 999 },
+ ],
+ },
+ ]),
+ [order()],
+ );
+ assert.equal(plan.proposals[0]!.stops.length, 2);
+ assert.equal(committable(plan.proposals[0]!).length, 1);
+ assert.deepEqual(unmatched(plan), ['908-ghost']);
+});
+
+test('an order left out of both the plan and the reasons is still listed', () => {
+ const plan = readPlan(
+ {
+ zones: [{ riders: [], unassigned_orders: [{ orderid: '908-9' }] }],
+ meta: { active_riders_pool: 2 },
+ },
+ [order()],
+ );
+ assert.equal(plan.unassigned.length, 1);
+ assert.match(plan.unassigned[0]!.reason, /no reason given/i);
+});
+
+test('a branch is found for a proposed order the same way the manual bar finds it', () => {
+ const branches = [{ locationid: 979, tenantid: 908 }, { locationid: 981, tenantid: 908 }] as never;
+ assert.equal(branchFor(order(), branches)?.locationid, 979);
+ assert.equal(branchFor(order({ locationid: 0 }), branches), undefined);
+});
+
+/* ── Rubbish in ──────────────────────────────────────────────────────────── */
+
+test('a response that is not the expected shape gives an empty plan, not a throw', () => {
+ for (const rubbish of [null, undefined, {}, [], 'error', { zones: 'nope', details: 7 }]) {
+ const plan = readPlan(rubbish, [order()]);
+ assert.deepEqual(plan.proposals, []);
+ assert.equal(plan.meta.totalOrders, 1, 'falls back to what we sent');
+ }
+});
+
+test('a rider id of zero is not a rider', () => {
+ const plan = readPlan(
+ zoned([{ rider_id: 0, rider_name: 'nobody', orders: [{ orderid: '908-1', orderheaderid: 101 }] }]),
+ [order()],
+ );
+ assert.deepEqual(plan.proposals, []);
+});
diff --git a/src/features/store-admin/autoAssign.ts b/src/features/store-admin/autoAssign.ts
new file mode 100644
index 0000000..8bc7aa8
--- /dev/null
+++ b/src/features/store-admin/autoAssign.ts
@@ -0,0 +1,350 @@
+/**
+ * Letting the optimiser propose who carries what.
+ *
+ * ── What this talks to ──────────────────────────────────────────────────────
+ *
+ * `routes.workolik.com/api/v1/optimization/riderassign` — a solver that is not
+ * ours and not Fiesta. It takes the waiting orders, works out zones from the
+ * drop coordinates, and returns a proposed rider for each. Verified live on
+ * 2026-09-10: five real orders in, HTTP 200 in 7.4 s, zoned as "South East".
+ *
+ * It is a PROPOSAL and nothing more. Committing it is the same
+ * `createdeliveries` call the manual assign bar already makes, through the same
+ * `buildDelivery`, so there is exactly one way a delivery is ever written. A
+ * second commit path would be a second place for the delivery vocabulary to
+ * drift, and writing the wrong status means the rider's app never sees the job.
+ *
+ * ── The solver picks its own riders, and today it finds none ────────────────
+ *
+ * It looks riders up itself, gated on `app_users.onduty = 1`, and that flag is
+ * 0 for all 118 riders on the platform — measured across every region on
+ * 2026-09-10. So `active_riders_pool` comes back 0 and every order returns
+ * unassigned with "No riders found (check partner online status)".
+ *
+ * Passing riders in the body does not help: bodies carrying `riders` and
+ * `active_riders` were both tried against a rider the on-duty endpoint DOES
+ * report, and the pool stayed 0. The solver ignores them.
+ *
+ * That is a real gap in the platform, not a bug here, and this module is built
+ * to say so plainly rather than to show an empty result that reads as a
+ * failure. `Plan.blocked` carries it.
+ */
+import type { OrderRow, RiderInfo, TenantLocation } from '@/api/types';
+
+/** How hard the solver should push, and in which direction. */
+export const TUNINGS = [
+ { id: 'balanced', label: 'Balanced' },
+ { id: 'aggressive_speed', label: 'Aggressive speed' },
+ { id: 'fuel_saver', label: 'Fuel saver' },
+ { id: 'zone_strict', label: 'Zone strict' },
+] as const;
+
+export type Tuning = (typeof TUNINGS)[number]['id'];
+
+/** A rider the operator has marked as off today. */
+export interface AbsentRider {
+ userid: number;
+ username: string;
+}
+
+/**
+ * One order, in the shape the solver reads.
+ *
+ * A superset of the order row rather than a hand-picked subset: the solver was
+ * built against the old console, which spread the whole row and then overwrote
+ * a handful of fields. Sending less risks it silently ignoring an order whose
+ * shape it does not recognise, and there is no schema to check against.
+ *
+ * The overwritten fields are the ones that matter, and they are all
+ * coordinates or money under a second name. `droplat`/`droplon` in particular:
+ * the orders endpoint leaves those empty and puts the drop in
+ * `deliverylat`/`deliverylong`, so without this the solver would zone every
+ * order to nowhere.
+ */
+export function orderForSolver(row: OrderRow, now = new Date()): Record {
+ return {
+ ...row,
+ deliveryid: 0,
+ orderstatus: 'pending',
+ assigntime: solverStamp(now),
+ orderamount: row.deliverycharge ?? row.orderamount ?? 0,
+ deliverycharges: row.deliverycharge ?? 0,
+ // The orders endpoint fills `deliverylat`/`deliverylong` and leaves
+ // `droplat`/`droplon` empty; the solver reads the latter.
+ droplat: row.deliverylat ?? '',
+ droplon: row.deliverylong ?? '',
+ pickuplat: row.pickuplat ?? '',
+ pickuplon: row.pickuplong ?? '',
+ pickuplocation: row.pickupsuburb ?? '',
+ deliverylocation: row.deliverysuburb ?? '',
+ ordernotes: row.ordernotes ?? '',
+ };
+}
+
+/** `2026-09-10 11:30:00` — the solver's own format, not an ISO instant. */
+export function solverStamp(now = new Date()): string {
+ const pad = (n: number) => String(n).padStart(2, '0');
+ return (
+ `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ` +
+ `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
+ );
+}
+
+export interface SolverRequest {
+ deliveries: Record[];
+ absent_riders: AbsentRider[];
+}
+
+/** Everything the solver is asked, from the orders on screen. */
+export function buildRequest(
+ orders: readonly OrderRow[],
+ absent: readonly AbsentRider[],
+ now = new Date(),
+): SolverRequest {
+ return {
+ deliveries: orders.map((row) => orderForSolver(row, now)),
+ absent_riders: absent.map((rider) => ({
+ userid: rider.userid,
+ username: rider.username.trim() || `Rider ${rider.userid}`,
+ })),
+ };
+}
+
+/** A rider marked absent, in the shape the solver wants, from our roster row. */
+export function absentFrom(rider: RiderInfo): AbsentRider {
+ const name = `${rider.firstname ?? ''} ${rider.lastname ?? ''}`.trim();
+ return {
+ userid: rider.userid,
+ username: name || rider.fullname?.trim() || `Rider ${rider.userid}`,
+ };
+}
+
+/* ── Reading the answer ──────────────────────────────────────────────────── */
+
+/** One order the solver placed with a rider. */
+export interface ProposedStop {
+ orderheaderid: number;
+ orderid: string;
+ /** The order as WE hold it — the solver's echo is not trusted to commit from. */
+ row: OrderRow | undefined;
+}
+
+export interface Proposal {
+ userid: number;
+ rider: string;
+ stops: ProposedStop[];
+}
+
+export interface PlanMeta {
+ totalOrders: number;
+ assigned: number;
+ unassigned: number;
+ ridersUsed: number;
+ ridersAvailable: number;
+ /** The solver's own profit figure for the plan. Its rules, not ours. */
+ profit: number;
+ solver: string;
+}
+
+export interface Plan {
+ proposals: Proposal[];
+ unassigned: { orderid: string; reason: string }[];
+ meta: PlanMeta;
+ /**
+ * Set when the solver could not run properly rather than simply finding a
+ * hard problem — today, when it has no riders to choose from at all. The
+ * difference matters: "no rider is free" is an answer, "the solver cannot
+ * see any rider on the platform" is a fault to report.
+ */
+ blocked: string | null;
+}
+
+type Bag = Record;
+
+const num = (value: unknown): number => {
+ const n = Number(value);
+ return Number.isFinite(n) ? n : 0;
+};
+
+const str = (value: unknown): string => (typeof value === 'string' ? value : '');
+
+/**
+ * The solver's answer, read into a plan we can commit.
+ *
+ * ── Zones repeat riders, and that is not a bug ──────────────────────────────
+ *
+ * The response is grouped by ZONE, and a rider legitimately appears in several
+ * of them — one per delivery suburb they cover. Concatenating naively gives the
+ * same order twice, and two `createdeliveries` rows for one order means the
+ * customer's parcel is dispatched twice. The old console learnt this and
+ * de-duplicates on `orderid` across the whole tree; the same guard is here,
+ * and it is the reason this reads the tree rather than trusting its shape.
+ *
+ * ── Two shapes, because the solver sends either ─────────────────────────────
+ *
+ * `zones[].riders[].orders[]` when it zoned the work, and a flat `details[]`
+ * of orders each carrying their own rider when it did not. Both are read.
+ *
+ * ── The order we commit is ours, not the solver's echo ──────────────────────
+ *
+ * The solver returns the order back with its own fields added. `buildDelivery`
+ * needs every id the order carries — tenant, branch, region, partner, category
+ * — and a round trip through a third party is exactly where one of them goes
+ * missing or changes type. The echo is used to learn WHICH order and WHICH
+ * rider; the row itself is looked up from what we sent.
+ */
+export function readPlan(response: unknown, orders: readonly OrderRow[]): Plan {
+ const body = (response ?? {}) as Bag;
+ const meta = (body['meta'] ?? {}) as Bag;
+
+ const byOrderid = new Map();
+ const byHeader = new Map();
+ for (const row of orders) {
+ if (row.orderid) byOrderid.set(row.orderid, row);
+ byHeader.set(row.orderheaderid, row);
+ }
+
+ const proposals = new Map();
+ const seen = new Set();
+
+ const place = (riderId: unknown, riderName: unknown, list: unknown) => {
+ const userid = num(riderId);
+ if (userid === 0) return;
+ let proposal = proposals.get(userid);
+ if (!proposal) {
+ proposal = {
+ userid,
+ rider: str(riderName).trim() || `Rider ${userid}`,
+ stops: [],
+ };
+ proposals.set(userid, proposal);
+ }
+ for (const entry of Array.isArray(list) ? list : []) {
+ const item = (entry ?? {}) as Bag;
+ const orderid = str(item['orderid']);
+ const header = num(item['orderheaderid']);
+ // De-duplicate across the whole tree, not per rider — the same order
+ // reached through two zones is still one parcel.
+ const key = orderid || `#${header}`;
+ if (seen.has(key)) continue;
+ seen.add(key);
+ proposal.stops.push({
+ orderheaderid: header,
+ orderid,
+ row: byOrderid.get(orderid) ?? byHeader.get(header),
+ });
+ }
+ };
+
+ const zones = body['zones'];
+ if (Array.isArray(zones) && zones.length > 0) {
+ for (const zone of zones) {
+ const riders = ((zone ?? {}) as Bag)['riders'];
+ for (const rider of Array.isArray(riders) ? riders : []) {
+ const bag = (rider ?? {}) as Bag;
+ place(bag['rider_id'] ?? bag['userid'], bag['rider_name'] ?? bag['username'], bag['orders']);
+ }
+ }
+ }
+
+ // The flat shape. Read even when zones were present but carried no riders,
+ // so a response that mixes the two does not lose half its assignments.
+ const details = body['details'];
+ if (Array.isArray(details)) {
+ for (const entry of details) {
+ const bag = (entry ?? {}) as Bag;
+ place(bag['rider_id'] ?? bag['userid'], bag['rider_name'] ?? bag['ridername'], [bag]);
+ }
+ }
+
+ const unassigned = readUnassigned(meta, zones);
+ const ridersAvailable = num(meta['active_riders_pool']);
+ const assigned = [...proposals.values()].reduce((total, p) => total + p.stops.length, 0);
+
+ return {
+ proposals: [...proposals.values()]
+ .filter((proposal) => proposal.stops.length > 0)
+ .sort((a, b) => b.stops.length - a.stops.length),
+ unassigned,
+ meta: {
+ totalOrders: num(meta['total_orders']) || orders.length,
+ assigned,
+ unassigned: unassigned.length,
+ ridersUsed: num(meta['utilized_riders']),
+ ridersAvailable,
+ profit: num(meta['total_profit']),
+ solver: str(meta['solver_mode']) || 'unknown',
+ },
+ blocked:
+ ridersAvailable === 0 && assigned === 0
+ ? 'The solver had no riders to choose from. It picks them itself, from riders marked on duty, and no rider on the platform currently is — so it returns every order unassigned no matter how the work looks.'
+ : null,
+ };
+}
+
+/**
+ * Why each order was left out.
+ *
+ * `meta.unassigned_details` is the direct answer and carries a reason per
+ * order. Zones also list their own leftovers, without reasons, so those fill in
+ * anything the meta missed rather than being ignored — an order that vanishes
+ * from both the proposals and this list looks like it was quietly assigned.
+ */
+function readUnassigned(meta: Bag, zones: unknown): { orderid: string; reason: string }[] {
+ const out: { orderid: string; reason: string }[] = [];
+ const seen = new Set();
+
+ const details = meta['unassigned_details'];
+ for (const entry of Array.isArray(details) ? details : []) {
+ const bag = (entry ?? {}) as Bag;
+ const orderid = str(bag['orderid']);
+ if (!orderid || seen.has(orderid)) continue;
+ seen.add(orderid);
+ out.push({ orderid, reason: str(bag['reason']) || 'No reason given' });
+ }
+
+ for (const zone of Array.isArray(zones) ? zones : []) {
+ const list = ((zone ?? {}) as Bag)['unassigned_orders'];
+ for (const entry of Array.isArray(list) ? list : []) {
+ const bag = (entry ?? {}) as Bag;
+ const orderid = str(bag['orderid']);
+ if (!orderid || seen.has(orderid)) continue;
+ seen.add(orderid);
+ out.push({ orderid, reason: 'Left out of the plan, with no reason given' });
+ }
+ }
+
+ return out;
+}
+
+/**
+ * The orders a proposal can actually be committed for.
+ *
+ * A stop whose row we could not match is dropped rather than guessed: without
+ * the original order there is no tenant, branch or region to write, and a
+ * delivery missing those is one no page can join back to.
+ */
+export function committable(proposal: Proposal): OrderRow[] {
+ return proposal.stops.flatMap((stop) => (stop.row ? [stop.row] : []));
+}
+
+/** Stops the plan named but we could not match back. Worth showing, never committing. */
+export function unmatched(plan: Plan): string[] {
+ return plan.proposals
+ .flatMap((proposal) => proposal.stops)
+ .filter((stop) => !stop.row)
+ .map((stop) => stop.orderid || `#${stop.orderheaderid}`);
+}
+
+/**
+ * The branch a proposed order belongs to, for `buildDelivery`.
+ *
+ * Same lookup the manual bar does. Kept here so the commit reads identically
+ * whoever proposed it.
+ */
+export function branchFor(
+ row: OrderRow,
+ branches: readonly TenantLocation[],
+): TenantLocation | undefined {
+ return branches.find((branch) => branch.locationid === row.locationid);
+}
diff --git a/src/features/store-admin/dispatchModel.ts b/src/features/store-admin/dispatchModel.ts
index 93c6e03..659dada 100644
--- a/src/features/store-admin/dispatchModel.ts
+++ b/src/features/store-admin/dispatchModel.ts
@@ -476,3 +476,5 @@ export function ymd(date: Date): string {
export function isToday(day: string): boolean {
return day === ymd(new Date());
}
+
+
diff --git a/src/features/store-admin/dispatchPanels.css b/src/features/store-admin/dispatchPanels.css
new file mode 100644
index 0000000..4d58ab4
--- /dev/null
+++ b/src/features/store-admin/dispatchPanels.css
@@ -0,0 +1,531 @@
+/**
+ * Styles for the dispatch panels, kept beside the components that use them.
+ *
+ * ── Why these are not in `pages/dispatch.css` ───────────────────────────────
+ *
+ * They were, and a rewrite of that file dropped twenty of the twenty-two
+ * classes without anything failing: the components kept rendering, their
+ * markup was intact, and every control quietly became plain text. The map's
+ * rider filter reported as "showing as the text format not showing any
+ * buttons".
+ *
+ * Nothing catches that. A missing class is not a type error, not a failed
+ * test, and not a console warning — the DOM is exactly as intended and only
+ * the paint is gone. So the styles now live next to the components that own
+ * the classes and are imported by them, which means a component cannot be
+ * rendered without them.
+ */
+
+/* ── The map's rider filter ──────────────────────────────────────────────── */
+
+.rider-chip {
+ display: inline-flex;
+ gap: 6px;
+ align-items: center;
+ padding: 4px 10px;
+ border: 1px solid var(--color-border);
+ border-radius: 999px;
+ background: var(--color-surface);
+ font: inherit;
+ font-size: 12px;
+ color: var(--color-ink-2);
+ cursor: pointer;
+}
+
+.rider-chip:hover {
+ background: var(--color-surface-subtle);
+}
+
+.rider-chip[data-active='true'] {
+ border-color: var(--color-brand);
+ background: var(--color-brand-tint);
+ color: var(--color-ink-1);
+}
+
+.rider-chip:focus-visible {
+ outline: 2px solid var(--color-brand);
+ outline-offset: 1px;
+}
+
+/* The swatch matches this rider's line on the map — the only thing connecting
+ a chip to the shape it filters to. */
+.rider-chip i {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+}
+
+/* ── The map key ─────────────────────────────────────────────────────────── */
+
+/* Three shapes, named. Without it a square and a hollow ring are two more
+ things to work out; with it the map needs no other explanation. */
+.map-key {
+ display: inline-flex;
+ gap: 5px;
+ align-items: center;
+ font-size: 11px;
+ color: var(--color-ink-4);
+}
+
+.map-key i {
+ width: 9px;
+ height: 9px;
+ margin-left: 6px;
+ border-radius: 50%;
+ background: var(--color-ink-4);
+}
+
+.map-key i:first-child {
+ margin-left: 0;
+}
+
+.map-key i[data-key='shop'] {
+ border-radius: 2px;
+ background: var(--color-brand);
+}
+
+.map-key i[data-key='drop'] {
+ background: #10b981;
+}
+
+.map-key i[data-key='rider'] {
+ background: transparent;
+ border: 2px solid var(--color-ink-3);
+}
+
+/* ── A caveat under a panel ──────────────────────────────────────────────── */
+
+.pva-note {
+ display: flex;
+ gap: 7px;
+ align-items: flex-start;
+ padding: 8px 10px;
+ border-radius: 7px;
+ background: var(--color-surface-subtle);
+ font-size: 11.5px;
+ line-height: 1.5;
+ color: var(--color-ink-3);
+}
+
+.pva-note svg {
+ flex: none;
+ margin-top: 2px;
+}
+
+/* ── Plan vs actual ──────────────────────────────────────────────────────── */
+
+/* One colour per step, reused by the stacked bar and the legend swatches so the
+ two read as the same object. Ordered as the journey runs. */
+.pva-bar {
+ display: flex;
+ height: 14px;
+ overflow: hidden;
+ border-radius: 7px;
+ background: var(--color-surface-sunken);
+}
+
+.pva-bar i,
+.pva-swatch {
+ display: block;
+}
+
+.pva-bar i[data-step='toShop'],
+.pva-swatch[data-step='toShop'] {
+ background: #662582;
+}
+
+.pva-bar i[data-step='counter'],
+.pva-swatch[data-step='counter'] {
+ background: #8b6bab;
+}
+
+.pva-bar i[data-step='inRound'],
+.pva-swatch[data-step='inRound'] {
+ background: #c2410c;
+}
+
+.pva-bar i[data-step='onRoad'],
+.pva-swatch[data-step='onRoad'] {
+ background: #0f8a5f;
+}
+
+.pva-swatch {
+ width: 9px;
+ height: 9px;
+ border-radius: 2px;
+}
+
+.pva-steps {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+ gap: 4px 16px;
+}
+
+.pva-step {
+ display: grid;
+ grid-template-columns: 9px minmax(0, 1fr) auto;
+ gap: 4px 8px;
+ align-items: center;
+ padding: 6px 8px;
+ border: 1px solid transparent;
+ border-radius: 7px;
+}
+
+/* The step costing the most is the finding. Outlined rather than recoloured, so
+ the swatch keeps naming its own segment of the bar above. */
+.pva-step[data-bottleneck='true'] {
+ border-color: var(--color-border);
+ background: var(--color-surface-subtle);
+}
+
+.pva-step-label {
+ font-size: 12.5px;
+ color: var(--color-ink-1);
+}
+
+.pva-step-label em {
+ margin-left: 6px;
+ font-size: 10.5px;
+ font-style: normal;
+ font-weight: 600;
+ letter-spacing: 0.03em;
+ color: #b45309;
+ text-transform: uppercase;
+}
+
+.pva-step strong {
+ font-size: 13px;
+ font-variant-numeric: tabular-nums;
+ color: var(--color-ink-1);
+}
+
+.pva-step-note {
+ grid-column: 2 / -1;
+ font-size: 11px;
+ font-variant-numeric: tabular-nums;
+ color: var(--color-ink-4);
+}
+
+.pva-figure {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ padding-left: 10px;
+ border-left: 3px solid var(--color-border);
+}
+
+.pva-figure[data-tone='good'] {
+ border-left-color: #0f8a5f;
+}
+
+.pva-figure[data-tone='watch'] {
+ border-left-color: #b45309;
+}
+
+.pva-figure[data-tone='act'] {
+ border-left-color: #b91c1c;
+}
+
+.pva-figure-label {
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.03em;
+ color: var(--color-ink-3);
+ text-transform: uppercase;
+}
+
+.pva-figure strong {
+ font-size: 19px;
+ font-variant-numeric: tabular-nums;
+ line-height: 1.2;
+ color: var(--color-ink-1);
+}
+
+.pva-figure-note {
+ font-size: 11.5px;
+ color: var(--color-ink-4);
+}
+
+.pva-toggle {
+ display: inline-flex;
+ gap: 6px;
+ align-items: center;
+ font-size: 12.5px;
+ color: var(--color-ink-2);
+ cursor: pointer;
+}
+
+/* Rows here are read, not opened — nothing lies behind one — so the pointer and
+ hover the stops table uses would promise a click that does nothing. */
+.pva-table tbody tr {
+ cursor: default;
+}
+
+.pva-table td[data-disagrees='true'] {
+ color: #b45309;
+}
+
+.pva-late[data-late='yes'] {
+ color: #b91c1c;
+}
+
+.pva-late[data-late='no'] {
+ color: #0f8a5f;
+}
+
+.pva-late[data-late='none'] {
+ color: var(--color-ink-4);
+}
+
+/* ── Auto-assign ─────────────────────────────────────────────────────────── */
+
+.aa-tunings {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.aa-tuning {
+ padding: 6px 12px;
+ border: 1px solid var(--color-border);
+ border-radius: 999px;
+ background: var(--color-surface);
+ font: inherit;
+ font-size: 12.5px;
+ color: var(--color-ink-2);
+ cursor: pointer;
+}
+
+.aa-tuning:hover:not(:disabled) {
+ background: var(--color-surface-subtle);
+}
+
+.aa-tuning[data-active='true'] {
+ border-color: var(--color-brand);
+ background: var(--color-brand-tint);
+ color: var(--color-ink-1);
+}
+
+.aa-tuning:disabled {
+ opacity: 0.5;
+ cursor: default;
+}
+
+.aa-tuning:focus-visible {
+ outline: 2px solid var(--color-brand);
+ outline-offset: 1px;
+}
+
+.aa-absent {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+ gap: 2px 12px;
+ padding: 6px 0 2px;
+}
+
+.aa-absent-row {
+ display: flex;
+ gap: 7px;
+ align-items: center;
+ padding: 4px 0;
+ font-size: 12.5px;
+ color: var(--color-ink-2);
+ cursor: pointer;
+}
+
+.aa-absent-row svg {
+ flex: none;
+ color: var(--color-ink-4);
+}
+
+/* The solver failing to see any rider is a platform fault, not an empty
+ result. Given its own panel so it cannot be read as "no work to do". */
+.aa-blocked {
+ display: flex;
+ gap: 10px;
+ align-items: flex-start;
+ padding: 12px 14px;
+ border: 1px solid var(--color-border);
+ border-left: 3px solid #b45309;
+ border-radius: 9px;
+ background: var(--color-surface);
+ color: #b45309;
+}
+
+.aa-blocked > svg {
+ flex: none;
+ margin-top: 1px;
+}
+
+.aa-blocked div {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+
+.aa-blocked strong {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--color-ink-1);
+}
+
+.aa-blocked span {
+ font-size: 12.5px;
+ line-height: 1.5;
+ color: var(--color-ink-3);
+}
+
+/* ── Active board ────────────────────────────────────────────────────────── */
+
+.active-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 12px;
+}
+
+.active-name {
+ display: flex;
+ gap: 7px;
+ align-items: center;
+ overflow: hidden;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--color-ink-1);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.active-name i {
+ flex: none;
+ width: 9px;
+ height: 9px;
+ border-radius: 50%;
+}
+
+/* Age is the most load-bearing thing on the card: everything else on it is only
+ as true as this is recent. Coloured, not tucked into small print. */
+.active-fresh {
+ flex: none;
+ font-size: 11px;
+ font-variant-numeric: tabular-nums;
+}
+
+.active-fresh[data-fresh='live'] {
+ color: #0f8a5f;
+}
+
+.active-fresh[data-fresh='recent'] {
+ color: #b45309;
+}
+
+.active-fresh[data-fresh='old'] {
+ color: #b91c1c;
+}
+
+.active-distance {
+ display: flex;
+ gap: 8px;
+ align-items: baseline;
+ flex-wrap: wrap;
+}
+
+.active-distance svg {
+ color: var(--color-ink-4);
+ transform: translateY(2px);
+}
+
+.active-distance strong {
+ font-size: 20px;
+ font-variant-numeric: tabular-nums;
+ color: var(--color-ink-1);
+}
+
+.active-distance span {
+ font-size: 11px;
+ color: var(--color-ink-4);
+}
+
+.active-meta {
+ display: flex;
+ gap: 8px;
+ align-items: baseline;
+ overflow: hidden;
+ font-size: 12px;
+ color: var(--color-ink-3);
+ white-space: nowrap;
+}
+
+.active-meta span:first-child {
+ flex: none;
+ font-weight: 600;
+ color: var(--color-ink-2);
+}
+
+.active-meta span:last-child {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.active-stats {
+ display: flex;
+ gap: 6px;
+ flex-wrap: wrap;
+}
+
+.active-stats span {
+ padding: 2px 8px;
+ border-radius: 999px;
+ background: var(--color-surface-sunken);
+ font-size: 11px;
+ font-variant-numeric: tabular-nums;
+ color: var(--color-ink-3);
+}
+
+.active-stats span[data-low='true'] {
+ background: color-mix(in oklab, #b91c1c 12%, transparent);
+ color: #b91c1c;
+}
+
+.active-worry {
+ display: flex;
+ gap: 6px;
+ align-items: center;
+ font-size: 11.5px;
+ color: #b45309;
+}
+
+.active-worry svg {
+ flex: none;
+}
+
+/* ── Money ───────────────────────────────────────────────────────────────── */
+
+/* How much of the day is actually costed. Shown as a bar because the shortfall
+ is the point — a number alone reads as a footnote. */
+.profit-coverage {
+ display: flex;
+ gap: 10px;
+ align-items: flex-start;
+ padding: 10px 12px;
+ border-radius: 8px;
+ background: var(--color-surface-subtle);
+ font-size: 11.5px;
+ line-height: 1.5;
+ color: var(--color-ink-3);
+}
+
+.profit-bar {
+ flex: none;
+ width: 88px;
+ height: 8px;
+ margin-top: 4px;
+ overflow: hidden;
+ border-radius: 999px;
+ background: var(--color-surface-sunken);
+}
+
+.profit-bar i {
+ display: block;
+ height: 100%;
+ background: var(--color-brand);
+}
diff --git a/src/features/store-admin/drawer.css b/src/features/store-admin/drawer.css
index e2251b2..85085d0 100644
--- a/src/features/store-admin/drawer.css
+++ b/src/features/store-admin/drawer.css
@@ -12,7 +12,7 @@
.drawer-root {
position: fixed;
inset: 0;
- z-index: 70;
+ z-index: 3000;
display: flex;
justify-content: flex-end;
}
diff --git a/src/features/store-admin/orderStatus.test.ts b/src/features/store-admin/orderStatus.test.ts
index 912330b..fc60001 100644
--- a/src/features/store-admin/orderStatus.test.ts
+++ b/src/features/store-admin/orderStatus.test.ts
@@ -11,8 +11,14 @@
*/
import assert from 'node:assert/strict';
import { test } from 'node:test';
-import { billedAtMs, syncLagMs ,
- stampAfterMs,} from './orderStatus';
+import {
+ billedAtMs,
+ syncLagMs,
+ stampAfterMs,
+ matchesStatus,
+ DELIVERY_STATUS_TABS,
+ ORDER_STATUS_TABS,
+} from './orderStatus';
/* Set after the imports on purpose, and it still takes: `billedAtMs` reads the
zone when it is CALLED, not when this module loads, and assigning TZ calls
@@ -158,3 +164,86 @@ test('a couple of minutes of drift is drift, not a timezone fault', () => {
const raw = '2026-09-05T14:46:00+05:30';
assert.equal(stampAfterMs(raw, '2026-09-05T14:48:42+05:30'), new Date(raw).getTime());
});
+
+/* ── The status tabs ─────────────────────────────────────────────────────── */
+
+/**
+ * Every status the platform actually writes, measured across all 264 tenants
+ * on 2026-09-10 with the row counts each carried.
+ */
+const LIVE_ORDER_STATUSES = ['delivered', 'pending', 'cancelled', 'created'];
+const LIVE_DELIVERY_STATUSES = [
+ 'delivered', 'pending', 'cancelled', 'picked',
+ 'rejected', 'active', 'skipped', 'accepted', 'arrived',
+];
+
+// The failure this list is checked against: a status with no tab appears under
+// "All" and under nothing else, so an operator working through the tabs never
+// sees those rows. `rejected` (30 live rows) was the one at risk.
+test('every live delivery status has a tab of its own', () => {
+ for (const status of LIVE_DELIVERY_STATUSES) {
+ const hits = DELIVERY_STATUS_TABS.filter(
+ (tab) => tab.key !== 'all' && matchesStatus(tab.key, status),
+ );
+ assert.equal(hits.length, 1, `"${status}" matched ${hits.length} tabs: ${hits.map((t) => t.key).join(', ')}`);
+ }
+});
+
+test('every live order status has a tab of its own', () => {
+ for (const status of LIVE_ORDER_STATUSES) {
+ const hits = ORDER_STATUS_TABS.filter(
+ (tab) => tab.key !== 'all' && matchesStatus(tab.key, status),
+ );
+ assert.equal(hits.length, 1, `"${status}" matched ${hits.length} tabs`);
+ }
+});
+
+// It used to be filed under Cancelled. A rider reaching the address and finding
+// nobody in is not a cancellation, and an operator chasing skipped drops could
+// not find them.
+test('a skipped drop is its own tab, not a cancellation', () => {
+ assert.equal(matchesStatus('skipped', 'skipped'), true);
+ assert.equal(matchesStatus('cancelled', 'skipped'), false);
+});
+
+// "processing" used to swallow all four, so a dispatcher could not tell a rider
+// standing at the shop from one already riding.
+test('the middle of the ladder is four separate tabs, not one bucket', () => {
+ assert.equal(matchesStatus('accepted', 'accepted'), true);
+ assert.equal(matchesStatus('arrived', 'arrived'), true);
+ assert.equal(matchesStatus('picked', 'picked'), true);
+ assert.equal(matchesStatus('active', 'active'), true);
+ assert.equal(matchesStatus('active', 'arrived'), false);
+ assert.equal(matchesStatus('picked', 'active'), false);
+});
+
+test('a delivery out for delivery is active, not delivered', () => {
+ assert.equal(matchesStatus('active', 'out for delivery'), true);
+ assert.equal(matchesStatus('delivered', 'out for delivery'), false);
+});
+
+// Fiesta stores status as free text and the casing drifts between writers.
+test('casing and padding do not decide which tab a row lands in', () => {
+ assert.equal(matchesStatus('delivered', ' Delivered '), true);
+ assert.equal(matchesStatus('rejected', 'REJECTED'), true);
+});
+
+test('an undelivered row is not counted as delivered', () => {
+ assert.equal(matchesStatus('delivered', 'undelivered'), false);
+});
+
+test('All holds everything, and a blank status holds nothing else', () => {
+ assert.equal(matchesStatus('all', ''), true);
+ assert.equal(matchesStatus('all', undefined), true);
+ for (const tab of DELIVERY_STATUS_TABS) {
+ if (tab.key === 'all') continue;
+ assert.equal(matchesStatus(tab.key, ''), false, `${tab.key} matched a blank status`);
+ }
+});
+
+test('the delivery strip offers the whole ladder', () => {
+ assert.deepEqual(
+ DELIVERY_STATUS_TABS.map((tab) => tab.label),
+ ['All', 'Pending', 'Accepted', 'Arrived', 'Picked', 'Active', 'Skipped', 'Rejected', 'Delivered', 'Cancelled'],
+ );
+});
diff --git a/src/features/store-admin/orderStatus.ts b/src/features/store-admin/orderStatus.ts
index d9acd0d..6aec8ab 100644
--- a/src/features/store-admin/orderStatus.ts
+++ b/src/features/store-admin/orderStatus.ts
@@ -75,22 +75,55 @@ export const statusColor = (map: Record, status: string | undefi
map[(status ?? '').trim().toLowerCase()] ?? 'var(--color-ink-3)';
/**
- * The status tabs, as the old console groups them.
+ * The status tabs — one set per kind of row, because they are different ladders.
*
- * Tabs rather than a dropdown: there are six, an operator switches between them
- * constantly during a shift, and a dropdown hides the counts. Each carries how
- * many rows it holds, which is half the reason to look.
+ * ── Why not one shared set ──────────────────────────────────────────────────
+ *
+ * An order and a delivery move through different lifecycles, and a single strip
+ * shown over both leaves half its tabs permanently at zero. Measured across
+ * every tenant on 2026-09-10:
+ *
+ * orders delivered 4240 · pending 876 · cancelled 827 · created 788
+ * deliveries delivered 1528 · pending 209 · cancelled 146 · picked 42 ·
+ * rejected 30 · active 22 · skipped 11 · accepted 6 · arrived 3
+ *
+ * So an order is never "arrived" or "picked", and a delivery is never
+ * "created". The previous six-tab set was shown over both and had the worse
+ * problem: "processing" swallowed accepted, picked, active and arrived into one
+ * bucket, so a dispatcher could not tell a rider who had reached the shop from
+ * one already riding, and "cancelled" quietly included skipped.
+ *
+ * ── Every status has exactly one tab ────────────────────────────────────────
+ *
+ * `rejected` is on the delivery strip even though it is easy to forget: 30 live
+ * rows carry it, and a status with no tab appears under "All" and under nothing
+ * else, so an operator working through the tabs never sees those rows at all.
+ * That is the failure this list is checked against.
*/
-export const STATUS_TABS = [
+export const ORDER_STATUS_TABS = [
{ key: 'all', label: 'All' },
{ key: 'created', label: 'Created' },
{ key: 'pending', label: 'Pending' },
- { key: 'processing', label: 'Processing' },
{ key: 'delivered', label: 'Delivered' },
{ key: 'cancelled', label: 'Cancelled' },
] as const;
-export type StatusKey = (typeof STATUS_TABS)[number]['key'];
+export const DELIVERY_STATUS_TABS = [
+ { key: 'all', label: 'All' },
+ { key: 'pending', label: 'Pending' },
+ { key: 'accepted', label: 'Accepted' },
+ { key: 'arrived', label: 'Arrived' },
+ { key: 'picked', label: 'Picked' },
+ { key: 'active', label: 'Active' },
+ { key: 'skipped', label: 'Skipped' },
+ { key: 'rejected', label: 'Rejected' },
+ { key: 'delivered', label: 'Delivered' },
+ { key: 'cancelled', label: 'Cancelled' },
+] as const;
+
+export type StatusKey =
+ | (typeof ORDER_STATUS_TABS)[number]['key']
+ | (typeof DELIVERY_STATUS_TABS)[number]['key'];
/**
* Does a row belong under this tab?
@@ -98,8 +131,10 @@ export type StatusKey = (typeof STATUS_TABS)[number]['key'];
* Substring matching, lowercased. Fiesta stores status as free text and the
* casing is inconsistent between writers, so an exact match is how a
* "Delivered" row silently stops counting the day someone writes "delivered".
- * "processing" also catches confirmed, preparing and ready — everything between
- * accepted and out the door, which is what an operator means by the word.
+ *
+ * Each status now lands in exactly ONE tab. The order of these cases matters
+ * where words overlap: `undelivered` must not count as delivered, and
+ * `out for delivery` is a delivery in progress rather than a completed one.
*/
export function matchesStatus(key: StatusKey, status: string | undefined): boolean {
if (key === 'all') return true;
@@ -110,30 +145,32 @@ export function matchesStatus(key: StatusKey, status: string | undefined): boole
return s.includes('created') || s.includes('new');
case 'pending':
return s.includes('pending');
- case 'processing':
- return (
- s.includes('process') ||
- s.includes('confirm') ||
- s.includes('prepar') ||
- s.includes('ready') ||
- s.includes('accept') ||
- s.includes('picked') ||
- s.includes('active') ||
- s.includes('arrived') ||
- s.includes('out for')
- );
+ case 'accepted':
+ // Not "accept" alone — that would also catch "unaccepted" if it appears.
+ return s.includes('accepted');
+ case 'arrived':
+ return s.includes('arrived');
+ case 'picked':
+ return s.includes('picked') || s.includes('pickup');
+ case 'active':
+ // Everything between collecting and dropping: the platform writes
+ // `active`, and `out for delivery` means the same thing.
+ return s.includes('active') || s.includes('out for') || s.includes('transit');
+ case 'skipped':
+ // Its own status and its own tab. The rider reached the address and
+ // nobody was in — which is not a cancellation, and used to be filed as
+ // one.
+ return s.includes('skip');
+ case 'rejected':
+ return s.includes('reject') || s.includes('declin');
case 'delivered':
return s.includes('deliver') && !s.includes('undeliver') && !s.includes('out for');
case 'cancelled':
- // `skipped` lives here too. It is its own delivery status — the rider
- // reached the address and nobody was in — and it keeps its own orange
- // chip, but it has no tab of its own in this six-tab strip. Without this
- // line a skipped job appears under "All" and under nothing else, so an
- // operator working through the tabs never sees it.
- return s.includes('cancel') || s.includes('skip');
+ return s.includes('cancel');
}
}
+
/**
* The money on an order row, in the order the old console reads it.
*
diff --git a/src/features/store-admin/pages/DispatchPage.tsx b/src/features/store-admin/pages/DispatchPage.tsx
index 1a263aa..505a513 100644
--- a/src/features/store-admin/pages/DispatchPage.tsx
+++ b/src/features/store-admin/pages/DispatchPage.tsx
@@ -7,28 +7,35 @@ import {
Bike,
IndianRupee,
MapPin,
+ Radio,
Package,
+ Sparkles,
Store,
Timer,
Truck,
UserX,
Users,
+ Search,
+ Navigation,
+ RefreshCw,
+ Ruler,
} from 'lucide-react';
import type { DeliveryRow, OrderRow, TenantLocation } from '@/api/types';
import { KpiCard } from '@/components/KpiCard';
-import { PageHeader } from '@/components/PageHeader';
import { useSelection, type Selection } from '@/components/useSelection';
import { TablePager } from '@/components/TablePager';
import { usePaged } from '@/components/usePaged';
import { AssignBar } from '../AssignBar';
+import { AutoAssignDrawer } from '../AutoAssignDrawer';
import { assignability, assignedFrom, type Assignability } from '../assignDelivery';
-import { useCustomers, useDeliveries, useOrders, useTenantLocations } from '@/queries/hooks';
+import { useCustomers, useDeliveries, useOrders, useRiders, useTenantLocations } from '@/queries/hooks';
import { useDateScope } from '@/components/shell/DateScope';
import { useBranchScope } from '../BranchScope';
import { count, money, moneyExact } from '../format';
import { DELIVERY_STATUS, statusColor } from '../orderStatus';
-import { shortAge } from '../posStatus';
+import { ActivePanel } from '../ActivePanel';
import { GroupMap } from '../GroupMap';
+import { ProfitPanel } from '../ProfitPanel';
import { OrderDetailDrawer } from '../OrderDetailDrawer';
import { PlanVsActualPanel } from '../PlanVsActualPanel';
import {
@@ -37,7 +44,6 @@ import {
groupByRider,
groupByStore,
isToday,
- lastSeen,
stopAddress,
stopCustomer,
stopKey,
@@ -54,62 +60,11 @@ import {
} from '../dispatchModel';
import './dispatch.css';
-/**
- * Dispatch — the day's deliveries, read three ways.
- *
- * Scoped by the console's shared date filter in the top bar, like every other
- * page. A single day is the shape this was built for — that is how a round is
- * worked — and the labels adapt when a wider range is chosen rather than
- * calling a week of a rider's stops a "round". No batch windows — order placement in
- * this tenant clusters so hard into one hour that a morning/afternoon/evening
- * split would put ninety per cent in one bucket and call it navigation.
- *
- * ── Why three groupings and not one list ────────────────────────────────────
- *
- * The same rows answer three different questions and no single ordering answers
- * more than one of them: which shop is busy (stores), who is still waiting
- * (customers), and what is each rider carrying (riders). The reference console
- * this is modelled on offers the first two; the third is the one our own
- * Deliveries tab could never answer, since it lists jobs flat with a rider
- * column and no way to see a round.
- *
- * ── Why two of the three views draw a map instead of a table ────────────────
- *
- * A round and a shop's day are both SHAPES: where the work is, in what order,
- * how far apart. A table of addresses cannot show either — you read twenty rows
- * and still cannot see that a rider crossed the city twice. So picking a rider
- * or a shop opens the map, and the table stays where a list is the right
- * answer: the waiting queue, whose rows are ticked to assign them, and the
- * customer view, where one customer's drops are all at one address.
- *
- * The coordinates support it. `pickuplat`/`pickuplon` and `droplat`/`droplon`
- * are filled on 500 of 500 rows for both tenants measured, so the map is never
- * empty on a day with work in it; the rider's own position is the sparse one,
- * at 461 and 324 of 500. (An earlier note here said drops all sat within four
- * metres of each other. That was one quiet test tenant: the live spread is 145
- * distinct drops on tenant 916 and 341 on 908.)
- */
-/**
- * The delivery ladder plus the one status that is not on it.
- *
- * `waiting` is red because it is the only status on this board that means
- * nobody has done anything — every other colour describes work in motion. It is
- * added here rather than in `DELIVERY_STATUS` because it is not a delivery
- * status: no `deliveries` row ever holds it, and putting it there would offer
- * it to the delivery filters, where it can never match.
- */
const DISPATCH_STATUS: Record = { ...DELIVERY_STATUS, [WAITING]: '#ef4444' };
-/**
- * The fourth tab is not a fourth grouping.
- *
- * "By rider", "by store" and "by customer" are three orderings of the same
- * rows; "Plan vs actual" asks a different question of them and replaces the
- * rail-and-table body entirely. Kept as a separate piece of state rather than a
- * fourth `ViewMode`, so the grouping functions never have to answer for a value
- * that is not a grouping.
- */
-type Board = ViewMode | 'timing';
+type Board = ViewMode | 'timing' | 'active' | 'profit';
+const GROUPINGS = new Set(['riders', 'stores', 'customers']);
+const isGrouping = (board: Board): board is ViewMode => GROUPINGS.has(board);
export function DispatchPage() {
const { branches, selected, tenantid } = useBranchScope();
@@ -117,24 +72,16 @@ export function DispatchPage() {
const [mode, setMode] = useState('riders');
const [focused, setFocused] = useState(null);
const [detail, setDetail] = useState(null);
+ const [searchQuery, setSearchQuery] = useState('');
+ const [statusFilter, setStatusFilter] = useState<'all' | 'in_progress' | 'delivered' | 'unassigned'>('all');
const query = tenantid
? { tenantid, locationid: selected ?? undefined, ...dates.range, pagesize: 200 }
: undefined;
- const deliveries = useDeliveries(query);
- /*
- Orders too, over the same window.
-
- Not redundant with the deliveries read: a `deliveries` row only exists once
- somebody has been assigned, so an order nobody has picked up is invisible to
- it. Without this the board showed "Nothing out on this day" while R mart had
- 29 orders waiting, and "Not assigned" could never be anything but zero.
- */
- const orders = useOrders(query);
- const locations = useTenantLocations(tenantid || undefined);
- // Only fetched for the customer view — the book runs to thousands of rows and
- // no other grouping needs it.
+ const deliveriesQuery = useDeliveries(query);
+ const ordersQuery = useOrders(query);
+ const locationsQuery = useTenantLocations(tenantid || undefined);
const customers = useCustomers(
tenantid && mode === 'customers'
? { tenantid, locationid: selected ?? undefined, pagesize: 500 }
@@ -142,18 +89,44 @@ export function DispatchPage() {
);
/*
- A one-day range is still the shape this board was built for, so it keeps the
- wording it had: "Rounds", "on this day". A wider range is a legitimate thing
- to ask for and the groupings all still hold — but a rider's group is then
- several rounds run together, and the labels say so rather than pretending.
+ The shop's own deliveries and orders. Nothing else.
+
+ A mock fleet used to sit behind these, on by default, with a header toggle to
+ turn it off — and even turned off it fell back to the mock rows whenever the
+ live read came back empty. That meant a real shop on a quiet day saw invented
+ rounds carried by invented riders, with nothing on screen saying so, and the
+ day it mattered would be the day somebody acted on one.
+
+ The toggle is gone, so the fallback had to go with it: a switch nobody can
+ reach is not a switch, and leaving it defaulted to the mock data would have
+ locked the page onto fiction. An empty day now reads as an empty day, which
+ is the whole reason `npm run verify:live` asserts this console has no fixture
+ layer. Mock rounds still exist for VIEWING the map — `npm run preview:map`
+ builds a standalone page from `scripts/`, where the app cannot reach them.
*/
+ const rawDeliveries = useMemo(() => deliveriesQuery.data ?? [], [deliveriesQuery.data]);
+ const rawOrders = useMemo(() => ordersQuery.data ?? [], [ordersQuery.data]);
+
+ /*
+ No wave / batch filter.
+
+ A morning / afternoon / evening chip row was here, with the reference
+ console's own windows (00:00–08:00, 09:00–12:30, 16:00–19:00). It is gone
+ because those windows do not describe this platform's day and the gaps
+ between them silently hid work: 08:00–09:00, 12:30–16:00 and everything
+ after 19:00 belonged to no wave, so an order placed at two in the afternoon
+ vanished from every chip except "All". The date filter in the top bar already
+ narrows the day and never drops a row.
+ */
+ const filteredDeliveries = rawDeliveries;
+
const isOneDay = Boolean(
dates.range.fromdate && dates.range.fromdate === dates.range.todate,
);
const stops = useMemo(
- () => toStops(deliveries.data ?? [], orders.data ?? []),
- [deliveries.data, orders.data],
+ () => toStops(filteredDeliveries, rawOrders),
+ [filteredDeliveries, rawOrders],
);
const totals = useMemo(() => dayTotals(stops), [stops]);
@@ -164,20 +137,36 @@ export function DispatchPage() {
);
const groups = useMemo(() => {
- if (mode === 'timing') return [];
- if (mode === 'stores') return groupByStore(stops, locations.data ?? branches);
+ if (!isGrouping(mode)) return [];
+ if (mode === 'stores') return groupByStore(stops, locationsQuery.data ?? branches);
if (mode === 'customers') return groupByCustomer(stops, customers.data ?? [], branchName);
return groupByRider(stops);
- }, [mode, stops, locations.data, branches, customers.data, branchName]);
+ }, [mode, stops, locationsQuery.data, branches, customers.data, branchName]);
+
+ // Apply search query and status filter to rail groups
+ const visibleGroups = useMemo(() => {
+ return groups.filter((g) => {
+ if (searchQuery.trim()) {
+ const q = searchQuery.toLowerCase();
+ const matchesName = g.name.toLowerCase().includes(q);
+ const matchesStops = g.stops.some(
+ (s) =>
+ stopOrderId(s).toLowerCase().includes(q) ||
+ stopCustomer(s).toLowerCase().includes(q) ||
+ stopAddress(s).toLowerCase().includes(q)
+ );
+ if (!matchesName && !matchesStops) return false;
+ }
+ if (statusFilter === 'unassigned') return g.id === UNASSIGNED;
+ if (statusFilter === 'delivered') return g.delivered === g.stops.length && g.stops.length > 0;
+ if (statusFilter === 'in_progress') return g.delivered < g.stops.length && g.id !== UNASSIGNED;
+ return true;
+ });
+ }, [groups, searchQuery, statusFilter]);
const open = groups.find((group) => group.id === focused) ?? null;
- /* ── Assigning, from the queue itself ────────────────────────────────────
- The same AssignBar the Orders page uses, on the same `assignability` rule.
- Reused rather than rebuilt: a second assign path would be a second place
- for the delivery-status vocabulary to drift, and writing the wrong status
- means the rider's app never sees the job. */
- const assigned = useMemo(() => assignedFrom(deliveries.data ?? []), [deliveries.data]);
+ const assigned = useMemo(() => assignedFrom(filteredDeliveries), [filteredDeliveries]);
const branchOf = useMemo(
() => (row: OrderRow): TenantLocation | undefined =>
@@ -185,7 +174,6 @@ export function DispatchPage() {
[branches],
);
- /** The waiting orders on screen — only the unassigned group holds any. */
const waiting = useMemo(
() =>
open?.id === UNASSIGNED
@@ -194,12 +182,6 @@ export function DispatchPage() {
[open],
);
- /*
- Ticks are built from what can ACTUALLY be sent, not from every waiting row.
- Handing the selection every row ticked the disabled boxes too — they went
- grey-and-checked and the bar counted more than it would assign, which is how
- a person stops trusting the ticks. The Orders page learnt this the hard way.
- */
const selectable = useMemo(
() =>
waiting
@@ -209,6 +191,9 @@ export function DispatchPage() {
);
const picked = useSelection(selectable);
+ const [isAutoOpen, setAutoOpen] = useState(false);
+
+ const fleet = useRiders(tenantid ? { tenantid } : {});
const pickedOrders = useMemo(
() => waiting.filter((row) => picked.has(row.orderheaderid)),
[waiting, picked],
@@ -216,52 +201,98 @@ export function DispatchPage() {
const changeMode = (next: Board) => {
setMode(next);
- // A group id means nothing across groupings — a branch id is not a rider
- // id — so the focus is dropped rather than carried into nonsense.
setFocused(null);
};
return (
-
-
- }
- badge={totals.riders || undefined}
- isActive={mode === 'riders'}
- onClick={() => changeMode('riders')}
- />
- }
- badge={branches.length || undefined}
- isActive={mode === 'stores'}
- onClick={() => changeMode('stores')}
- />
- }
- isActive={mode === 'customers'}
- onClick={() => changeMode('customers')}
- />
- }
- isActive={mode === 'timing'}
- onClick={() => changeMode('timing')}
- />
-
- }
- />
+
+
+ {/* No operations cluster.
+ What stood here was a hub picker with one hard-coded hub, a demo /
+ live toggle, a rider count read off the mock fleet, and a profit
+ chip computed as `value * 0.28` labelled "(84%)" — a number with no
+ source. All four described the page rather than the day's work, and
+ three of them were not true. The KPI row below carries the figures
+ that come from the data. */}
+
+
+
+ {/* The same four-card row every other page uses — same `kpi-grid`, same
+ `KpiCard`, same 15px icons as Sales. It was wrapped in a
+ `.kpi-banner` whose only job was to re-grid and squash these with
+ `!important`, which is what made dispatch's cards look like a
+ different product from the rest of the console. */}
- {mode === 'timing' ? (
- /* A different question of the same rows, so it replaces the board
- rather than sitting beside it: promised against delivered, and where
- the hours between accepting an order and dropping it actually went. */
-
- ) : (
-
+
+ assignability(row, branchOf(row), assigned),
- assignBar:
- picked.count > 0 ? (
-
- ) : null,
- }
- : {})}
+ isLoading={deliveriesQuery.isLoading || (mode === 'customers' && customers.isLoading)}
+ focused={focused}
+ onFocus={(id) => setFocused((prev) => (prev === id ? null : id))}
/>
- ) : mode === 'riders' || mode === 'stores' ? (
- /*
- The map is the resting state of these two views, not a reward for
- picking something. Opening dispatch to a placeholder that says
- "pick one" wastes the first look: the whole day IS the answer to
- "where is my work", and the operator often only wants to narrow
- after seeing it. Picking a rider or a shop filters this map; it
- does not summon it.
- */
-
-
-
-
- {mode === 'riders' ? 'Everyone on the road' : 'Every shop'}
+
+
+ {/* ── Center / Main Panel: Interactive Map & Timeline ────────── */}
+
+
+
+ The route optimizer pairs waiting orders to optimal riders based on distance and load.
+
+
+ ) : null}
+ {picked.count > 0 ? (
+
+ ) : null}
+
+ ),
+ }
+ : {})}
+ />
+ ) : mode === 'riders' || mode === 'stores' ? (
+
+
+ {/* No banner over the map.
+ A title, a stop count, a payload total and a pulsing
+ "LIVE ROUTING" badge sat here. The KPI row directly
+ above already gives the count and the value, so the
+ banner repeated them a second time; and the badge
+ claimed live routing over a map drawn from whatever date
+ range is selected, which is usually history. */}
+
+
+ {/* Quick City Stops Carousel / Timeline */}
+
+
+
+ Active Stops Sequence ({stops.length} drops)
+
+
+
+ ) : (
+
+
+
+
+
+
+ {groups.length > 0 ? 'Select a round to view route and stops' : 'No active deliveries'}
-
- {stops.length} stop{stops.length === 1 ? '' : 's'} · {moneyExact(totals.value)}
+
+ Every stop, mapped in sequence with live rider GPS tracking.
-
-
-
-
- ) : (
-
-
-
-
-
-
- {groups.length > 0
- ? 'Pick one to see its stops'
- : isOneDay
- ? 'Nothing out on this day'
- : 'Nothing out in this range'}
-
-
- {groups.length > 0
- ? 'Every stop, in the order it was assigned, with where the rider last reported in.'
- : 'Deliveries appear here once orders are assigned to a rider.'}
-
-
-
- )}
+
+
+ )}
+
);
}
-/* ── The focused group ───────────────────────────────────────────────────── */
+/* ── Enhanced Group Detail with Map and Interactive Route Timeline ──────────── */
-function GroupDetail({
+function EnhancedGroupDetail({
group,
mode,
onOpen,
selection,
verdictOf,
assignBar,
+ locations,
}: {
group: Group;
mode: ViewMode;
onOpen: (stop: Stop) => void;
- /**
- * Ticks, and the bar they feed. Present only on the waiting queue — every
- * other group is work already handed over, and offering to assign it again
- * would be offering to double-book a rider.
- */
selection?: Selection;
- /**
- * The whole verdict, not just a boolean — a row that cannot be assigned has
- * to be able to say WHY on hover, and re-deriving the reason here with
- * whatever arguments were to hand is how a tooltip ends up confidently wrong.
- */
verdictOf?: (row: OrderRow) => Assignability;
assignBar?: ReactNode;
+ locations?: readonly TenantLocation[];
}) {
- const seen = lastSeen(group.stops);
- // Reset to page 1 whenever a different group is opened — page 3 of the last
- // rider's round means nothing on this one.
const paged = usePaged(group.stops, { resetKey: group.id });
-
- /*
- A round and a shop's day are both SHAPES — where the work is, in what order,
- how far apart — and a table of addresses cannot show either. So those two
- views draw the map instead of the list.
-
- Never on the waiting queue. That is the only group whose rows are ticked to
- assign them, a checkbox cannot live on a map pin, and nothing in it has been
- worked yet so there is no shape to see. `selection` is passed only for that
- group, so its presence is the test.
-
- "By customer" keeps its table too: one customer's drops are all at one
- address, so the map would be a single pin with the rest hidden underneath it.
- */
const showMap = (mode === 'riders' || mode === 'stores') && !selection;
return (
-
-
-
-
-
- {group.name}
-
- {group.detail ? (
-
- {group.detail}
-
- ) : null}
-
-
- {group.stops.length} stop{group.stops.length === 1 ? '' : 's'} ·{' '}
- {moneyExact(group.value)}
-
-
-
- {/* The rider's last reported point, but only when the map is not
- drawing it. On the waiting queue nobody is carrying the work, so
- "No position reported" states the obvious and reads as a fault. */}
- {!showMap && mode === 'riders' && group.id !== UNASSIGNED ? (
- seen ? (
-
- No position reported
-
- A rider's location arrives only when they move a job along, so a round with no
- updates yet has none.
-
-
-
- )
- ) : null}
-
-
-
- {/* Above the table, the way the Orders page does it: assigning is done
- WHILE reading the stops, glancing between the drop addresses and who
- is free, not on a screen you have to leave the list for. */}
{assignBar}
{showMap ? (
-
+
-
+
+
+ {/* Interactive Timeline of Stops for the Active Round */}
+
+
+
+ Delivery Sequence & Order Waypoints ({group.stops.length} stops)
+
+
+
+ {group.stops.map((stop, index) => {
+ const status = stopStatus(stop);
+ const isDone = status === 'delivered';
+ const isCurrent = status === 'started' || status === 'assigned';
+
+ return (
+
) : (
@@ -606,8 +820,6 @@ function GroupDetail({
aria-label="Select every order that can be assigned"
checked={selection.allChosen}
ref={(node) => {
- // Some can go and some cannot: neither ticked nor
- // empty, and the box should say so rather than pick one.
if (node) node.indeterminate = selection.someChosen;
}}
onChange={selection.toggleAll}
@@ -633,9 +845,6 @@ function GroupDetail({
return (
onOpen(stop)}>
{selection ? (
- /* The click is stopped here so ticking a row does not
- also open its drawer — two different intentions on the
- same row, and the drawer would bury the bar. */
event.stopPropagation()}>
0 ? `${n}` : '—';
+ return Number.isFinite(n) && n > 0 ? `${n} km` : '—';
}
function shortTime(stamp: string): string {
const match = stamp.match(/(\d{1,2}):(\d{2})/);
return match ? `${match[1]}:${match[2]}` : '';
}
-
-function ageOf(stamp: string): string {
- const at = new Date(stamp.replace(' ', 'T')).getTime();
- if (Number.isNaN(at)) return '';
- return `${shortAge(Math.max(0, Date.now() - at))} ago`;
-}
-
-/* ── Chrome ──────────────────────────────────────────────────────────────── */
-
-function ModeTab({
- label,
- icon,
- badge,
- isActive,
- onClick,
-}: {
- label: string;
- icon: React.ReactNode;
- badge?: number;
- isActive: boolean;
- onClick: () => void;
-}) {
- return (
-
- );
-}
diff --git a/src/features/store-admin/pages/SalesPage.tsx b/src/features/store-admin/pages/SalesPage.tsx
index a4a8e49..3fda906 100644
--- a/src/features/store-admin/pages/SalesPage.tsx
+++ b/src/features/store-admin/pages/SalesPage.tsx
@@ -21,7 +21,8 @@ import { branchLabel, count, money, moneyExact } from '../format';
import {
DELIVERY_STATUS,
ORDER_STATUS,
- STATUS_TABS,
+ DELIVERY_STATUS_TABS,
+ ORDER_STATUS_TABS,
matchesStatus,
orderQuantity,
orderValue,
@@ -130,11 +131,21 @@ export function SalesPage() {
.sort((a, b) => (billedAtMs(b.bill) ?? 0) - (billedAtMs(a.bill) ?? 0));
}, [billPages, branchIds, branches, keyword]);
+ /**
+ * The tab strip for whichever sub-tab is open.
+ *
+ * Orders and deliveries move through different ladders — an order is never
+ * "arrived", a delivery is never "created" — so each gets its own tabs rather
+ * than a shared set with half of it stuck at zero.
+ */
+ const statusTabs = tab === 'deliveries' ? DELIVERY_STATUS_TABS : ORDER_STATUS_TABS;
+
/** Counts for the tab strip, from the unfiltered set. */
const tabCounts = useMemo(() => {
const source = tab === 'deliveries' ? allDeliveries : allOrders;
+ const tabs = tab === 'deliveries' ? DELIVERY_STATUS_TABS : ORDER_STATUS_TABS;
return Object.fromEntries(
- STATUS_TABS.map((entry) => [
+ tabs.map((entry) => [
entry.key,
source.filter((row) => matchesStatus(entry.key, row.orderstatus)).length,
]),
@@ -291,6 +302,7 @@ export function SalesPage() {
;
onStatus: (key: StatusKey) => void;
@@ -520,7 +536,7 @@ function FilterRow({
return (
- {STATUS_TABS.map((entry) => (
+ {tabs.map((entry) => (
= {}): DeliveryRow {
+ return {
+ deliveryid: 1,
+ orderid: '916-1',
+ ridername: 'Varun',
+ deliverycharges: 30,
+ ridercharges: 23.36,
+ profit: 15,
+ kms: '9',
+ ...over,
+ } as unknown as DeliveryRow;
+}
+
+test('a costed delivery reports what was charged, paid and recorded', () => {
+ const e = earningsOf(row());
+ assert.equal(e.charged, 30);
+ assert.equal(e.riderPaid, 23.36);
+ assert.equal(e.recorded, 15);
+ assert.equal(e.km, 9);
+});
+
+// charged − paid is 6.64, the platform recorded 15. Both are shown, because
+// that gap is somebody's accounting question and picking one answers it wrongly.
+test('the arithmetic and the recorded figure are both kept when they disagree', () => {
+ const e = earningsOf(row());
+ assert.equal(e.derived, 6.64);
+ assert.equal(e.disagrees, true);
+});
+
+test('agreement within a rupee is not flagged', () => {
+ const e = earningsOf(row({ deliverycharges: 30, ridercharges: 15.5, profit: 15 }));
+ assert.equal(e.disagrees, false);
+});
+
+// The central decision. 290 of 500 rows have no profit figure; calling them
+// zero would report the day as far less profitable than it was.
+test('a row nobody costed has no profit, which is not zero profit', () => {
+ assert.equal(earningsOf(row({ profit: undefined })).recorded, null);
+ assert.equal(earningsOf(row({ profit: '' })).recorded, null);
+ assert.equal(earningsOf(row({ profit: 0 })).recorded, null);
+});
+
+test('a missing rider payment leaves the arithmetic blank rather than crediting it all', () => {
+ const e = earningsOf(row({ ridercharges: undefined }));
+ assert.equal(e.riderPaid, null);
+ assert.equal(e.derived, null);
+ assert.equal(e.disagrees, false);
+});
+
+// 150087 km for a Coimbatore delivery. Whatever writes that column is broken.
+test('an absurd distance is dropped rather than shown', () => {
+ assert.equal(earningsOf(row({ kms: '150087' })).km, null);
+ assert.equal(earningsOf(row({ kms: '0' })).km, null);
+ assert.equal(earningsOf(row({ kms: '9' })).km, 9);
+});
+
+/* ── Totals ──────────────────────────────────────────────────────────────── */
+
+test('totals sum only what is recorded, and say how much that was', () => {
+ const result = profitability([
+ row({ deliveryid: 1, profit: 15 }),
+ row({ deliveryid: 2, profit: 25 }),
+ row({ deliveryid: 3, profit: undefined }),
+ ]);
+ assert.equal(result.deliveries, 3);
+ assert.equal(result.costed, 2);
+ assert.equal(result.profit, 40, 'the uncosted row must not drag the total down');
+ assert.equal(result.perDelivery, 20, 'averaged over what was costed, not over everything');
+});
+
+test('coverage states how much of the picture is costed', () => {
+ const result = profitability([row({ deliveryid: 1 }), row({ deliveryid: 2, profit: undefined })]);
+ assert.equal(coverage(result), 0.5);
+});
+
+test('charges are summed across every row, costed or not', () => {
+ const result = profitability([
+ row({ deliveryid: 1, deliverycharges: 30, ridercharges: 20, profit: undefined }),
+ row({ deliveryid: 2, deliverycharges: 30, ridercharges: 20, profit: 10 }),
+ ]);
+ assert.equal(result.charged, 60);
+ assert.equal(result.riderPaid, 40);
+ assert.equal(result.profit, 10);
+});
+
+test('riders are totalled separately, biggest earner first', () => {
+ const result = profitability([
+ row({ deliveryid: 1, userid: 897, ridername: 'Varun', profit: 10 }),
+ row({ deliveryid: 2, userid: 1111, ridername: 'Murali', profit: 25 }),
+ row({ deliveryid: 3, userid: 1111, ridername: 'Murali', profit: 15 }),
+ ]);
+ assert.deepEqual(result.byRider.map((r) => r.rider), ['Murali', 'Varun']);
+ assert.equal(result.byRider[0]!.profit, 40);
+ assert.equal(result.byRider[0]!.deliveries, 2);
+});
+
+test("a rider's uncosted deliveries still count as deliveries", () => {
+ const result = profitability([
+ row({ deliveryid: 1, userid: 897, ridername: 'Varun', profit: 10 }),
+ row({ deliveryid: 2, userid: 897, ridername: 'Varun', profit: undefined }),
+ ]);
+ assert.equal(result.byRider[0]!.deliveries, 2);
+ assert.equal(result.byRider[0]!.costed, 1);
+});
+
+test('disagreements are counted so they can be chased', () => {
+ const result = profitability([
+ row({ deliveryid: 1, deliverycharges: 30, ridercharges: 23.36, profit: 15 }),
+ row({ deliveryid: 2, deliverycharges: 30, ridercharges: 15, profit: 15 }),
+ ]);
+ assert.equal(result.disagreeing, 1);
+});
+
+test('an empty day totals to zero with nothing costed and no average', () => {
+ const result = profitability([]);
+ assert.equal(result.deliveries, 0);
+ assert.equal(result.profit, 0);
+ assert.equal(result.perDelivery, null, 'an average over nothing is not zero');
+ assert.equal(coverage(result), 0);
+});
+
+test('money is rounded to paise, not left with float noise', () => {
+ const result = profitability([
+ row({ deliveryid: 1, deliverycharges: 30.1, ridercharges: 0.2, profit: 29.9 }),
+ row({ deliveryid: 2, deliverycharges: 30.1, ridercharges: 0.1, profit: 30 }),
+ ]);
+ assert.equal(result.charged, 60.2);
+ assert.equal(result.riderPaid, 0.3);
+ assert.equal(result.profit, 59.9);
+});
+
+/* ── Rider identity ──────────────────────────────────────────────────────── */
+
+// Grouping on `ridername` put a rider called "delivered" on the page carrying
+// 284 of tenant 916's 499 finished deliveries — more than any real person — and
+// split every actual rider's takings across two rows.
+test('a status in the name column never becomes a rider', () => {
+ const result = profitability([
+ row({ deliveryid: 1, userid: 897, ridername: 'Varun', profit: 10 }),
+ row({ deliveryid: 2, userid: 897, ridername: 'delivered', profit: 20 }),
+ row({ deliveryid: 3, userid: 897, ridername: 'delivered', profit: 30 }),
+ ]);
+ assert.equal(result.byRider.length, 1, 'one rider, not a real one and a phantom');
+ assert.equal(result.byRider[0]!.rider, 'Varun');
+ assert.equal(result.byRider[0]!.profit, 60, 'their takings were split before');
+});
+
+test('riders are grouped on their id, so two people sharing a name stay apart', () => {
+ const result = profitability([
+ row({ deliveryid: 1, userid: 1, ridername: 'Rajesh', profit: 10 }),
+ row({ deliveryid: 2, userid: 2, ridername: 'Rajesh', profit: 20 }),
+ ]);
+ assert.equal(result.byRider.length, 2);
+});
+
+test('a rider whose every row carried a status keeps their id', () => {
+ const result = profitability([row({ deliveryid: 1, userid: 950, ridername: 'cancelled' })]);
+ assert.equal(result.byRider[0]!.rider, 'Rider 950');
+});
+
+// Unassigned work is not a person and must not read as one.
+test('work nobody carried is a dash, not a rider', () => {
+ const result = profitability([row({ deliveryid: 1, userid: 0, ridername: '' })]);
+ assert.equal(result.byRider[0]!.rider, '—');
+});
diff --git a/src/features/store-admin/profitability.ts b/src/features/store-admin/profitability.ts
new file mode 100644
index 0000000..512c7ba
--- /dev/null
+++ b/src/features/store-admin/profitability.ts
@@ -0,0 +1,235 @@
+/**
+ * What a delivery earned and what it cost.
+ *
+ * ── Read, not assumed ───────────────────────────────────────────────────────
+ *
+ * The console this is modelled on computes profit from hardcoded rules: ₹30 for
+ * the first 8 km, ₹6 a kilometre beyond, a ₹5,000 salary sliced across slots.
+ * Those numbers are in its source, not in anybody's contract, and they are
+ * wrong the day a rate changes.
+ *
+ * They are also unnecessary. The columns exist and carry real values, measured
+ * over 500 rows of tenant 916 on 2026-09-10:
+ *
+ * deliverycharges 500/500 what the shop was charged
+ * ridercharges 249/500 what the rider was paid
+ * profit 210/500 the platform's own figure, median ₹15
+ *
+ * So this reports what the platform recorded and says how much of it was
+ * recorded. A row with no `profit` is not zero profit — it is a row nobody
+ * costed — and the two must never be added together.
+ *
+ * ── Where the recorded figure and the arithmetic disagree ───────────────────
+ *
+ * `deliverycharges − ridercharges` should equal `profit` and does not always.
+ * Both are shown when they differ rather than one being silently preferred:
+ * that gap is somebody's accounting question and hiding it answers it wrongly.
+ *
+ * ── `calculationdistancekm` is not usable ───────────────────────────────────
+ *
+ * It reads 150087 on a live Coimbatore delivery — 150,000 km. Whatever writes
+ * it is broken, so per-kilometre economics are deliberately not derived here.
+ * `kms` is the planned distance and is sane; it is used for context only.
+ */
+import type { DeliveryRow } from '@/api/types';
+import { isRealName } from './orderStatus';
+
+/** A distance beyond this is a broken column, not a long ride. */
+const ABSURD_KM = 200;
+
+export interface Earnings {
+ deliveryid: number;
+ orderid: string;
+ /** The stable key. `ridername` is not one — see `nameFor`. */
+ userid: number;
+ rider: string;
+ /** What the shop was charged. */
+ charged: number | null;
+ /** What the rider was paid. */
+ riderPaid: number | null;
+ /** The platform's own profit figure. Null when nobody costed the row. */
+ recorded: number | null;
+ /** charged − riderPaid, when both are known. */
+ derived: number | null;
+ /** True when both figures exist and disagree by more than a rupee. */
+ disagrees: boolean;
+ km: number | null;
+}
+
+const money = (value: unknown): number | null => {
+ if (value === undefined || value === null || value === '') return null;
+ const n = Number(value);
+ return Number.isFinite(n) ? n : null;
+};
+
+/** One delivery's economics, as recorded. */
+export function earningsOf(row: DeliveryRow): Earnings {
+ const charged = money(row.deliverycharges);
+ const riderPaid = money((row as { ridercharges?: unknown }).ridercharges);
+ const recorded = money((row as { profit?: unknown }).profit);
+ const derived = charged !== null && riderPaid !== null ? round(charged - riderPaid) : null;
+ const km = money(row.kms);
+
+ return {
+ deliveryid: row.deliveryid,
+ orderid: row.orderid ?? `#${row.deliveryid}`,
+ userid: Number(row.userid ?? 0) || 0,
+ rider: row.ridername?.trim() || '—',
+ charged,
+ riderPaid,
+ // A recorded 0 is treated as "not costed": every row that carries a real
+ // figure carries a positive one (min ₹10 over 210 rows), so a bare zero is
+ // the column's default rather than a delivery that broke even.
+ recorded: recorded !== null && recorded !== 0 ? recorded : null,
+ derived,
+ disagrees:
+ recorded !== null && recorded !== 0 && derived !== null && Math.abs(recorded - derived) > 1,
+ km: km !== null && km > 0 && km < ABSURD_KM ? km : null,
+ };
+}
+
+export interface RiderEarnings {
+ userid: number;
+ rider: string;
+ deliveries: number;
+ charged: number;
+ riderPaid: number;
+ /** Summed over the rows that carry a figure. `costed` says how many that was. */
+ profit: number;
+ costed: number;
+}
+
+export interface Profitability {
+ rows: Earnings[];
+ deliveries: number;
+ /** Rows carrying a recorded profit. The denominator for `profit`. */
+ costed: number;
+ charged: number;
+ riderPaid: number;
+ profit: number;
+ /** Rows where the recorded figure and the arithmetic disagree. */
+ disagreeing: number;
+ /** Per rider, biggest earner first. */
+ byRider: RiderEarnings[];
+ /** Profit per costed delivery. Null when nothing was costed. */
+ perDelivery: number | null;
+}
+
+function round(value: number): number {
+ return Math.round(value * 100) / 100;
+}
+
+/**
+ * A name per rider id, from a column that often holds a status instead.
+ *
+ * Grouping the earnings table on `ridername` put a rider called "delivered" on
+ * the page carrying 284 of tenant 916's 499 finished deliveries — more than any
+ * real person — and split every actual rider's takings across two rows. The
+ * column holds a delivery status on more rows than it holds a name for some
+ * riders, so the id is the key and the name is resolved separately: statuses
+ * excluded by vocabulary, then the most common of what survives.
+ *
+ * A rider whose every row carried a status keeps their id. Unassigned work
+ * keeps a dash — it is not a person and should not read as one.
+ */
+function riderNames(rows: readonly Earnings[]): (userid: number) => string {
+ const counts = new Map>();
+ for (const row of rows) {
+ if (row.userid === 0 || !isRealName(row.rider)) continue;
+ const forRider = counts.get(row.userid) ?? new Map();
+ forRider.set(row.rider, (forRider.get(row.rider) ?? 0) + 1);
+ counts.set(row.userid, forRider);
+ }
+
+ const resolved = new Map();
+ for (const [userid, names] of counts) {
+ let best = '';
+ let most = 0;
+ for (const [name, count] of names) {
+ if (count > most) {
+ best = name;
+ most = count;
+ }
+ }
+ if (best) resolved.set(userid, best);
+ }
+
+ return (userid) =>
+ userid === 0 ? '—' : (resolved.get(userid) ?? `Rider ${userid}`);
+}
+
+/**
+ * Many deliveries, totalled.
+ *
+ * Sums only what is there. A row with no recorded profit contributes nothing to
+ * `profit` and increments neither `costed` nor the average — the alternative is
+ * to treat "not costed" as "earned nothing", which understates the day by
+ * exactly the rows nobody has costed yet.
+ */
+export function profitability(deliveries: readonly DeliveryRow[]): Profitability {
+ const rows = deliveries.map(earningsOf);
+ const nameOf = riderNames(rows);
+
+ const byRider = new Map();
+ let charged = 0;
+ let riderPaid = 0;
+ let profit = 0;
+ let costed = 0;
+
+ for (const row of rows) {
+ charged += row.charged ?? 0;
+ riderPaid += row.riderPaid ?? 0;
+ if (row.recorded !== null) {
+ profit += row.recorded;
+ costed += 1;
+ }
+
+ const entry = byRider.get(row.userid) ?? {
+ userid: row.userid,
+ rider: nameOf(row.userid),
+ deliveries: 0,
+ charged: 0,
+ riderPaid: 0,
+ profit: 0,
+ costed: 0,
+ };
+ entry.deliveries += 1;
+ entry.charged += row.charged ?? 0;
+ entry.riderPaid += row.riderPaid ?? 0;
+ if (row.recorded !== null) {
+ entry.profit += row.recorded;
+ entry.costed += 1;
+ }
+ byRider.set(row.userid, entry);
+ }
+
+ return {
+ rows,
+ deliveries: rows.length,
+ costed,
+ charged: round(charged),
+ riderPaid: round(riderPaid),
+ profit: round(profit),
+ disagreeing: rows.filter((row) => row.disagrees).length,
+ byRider: [...byRider.values()]
+ .map((entry) => ({
+ ...entry,
+ charged: round(entry.charged),
+ riderPaid: round(entry.riderPaid),
+ profit: round(entry.profit),
+ }))
+ .sort((a, b) => b.profit - a.profit || b.deliveries - a.deliveries),
+ perDelivery: costed > 0 ? round(profit / costed) : null,
+ };
+}
+
+/**
+ * How much of the picture is actually costed, 0–1.
+ *
+ * Shown next to every total, because "₹3,150 profit" over 210 of 500 rows and
+ * over 500 of 500 are different claims and the number alone cannot tell them
+ * apart.
+ */
+export function coverage(result: Profitability): number {
+ return result.deliveries === 0 ? 0 : result.costed / result.deliveries;
+}
diff --git a/src/features/store-admin/riderLive.test.ts b/src/features/store-admin/riderLive.test.ts
new file mode 100644
index 0000000..1ef5e4c
--- /dev/null
+++ b/src/features/store-admin/riderLive.test.ts
@@ -0,0 +1,208 @@
+/**
+ * The live snapshot, and the staleness it never admits to on its own.
+ *
+ * The fixtures are real: rider 852's payload was captured from jupiter on
+ * 2026-09-10, and riders 883/897/1111 really do answer with positions days old
+ * and no flag saying so. Reading those as "now" is the fault this module
+ * exists to prevent.
+ */
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import type { RiderSnapshot } from '@/api/telemetry';
+import {
+ activeBoard,
+ agoOf,
+ concerns,
+ distanceLabel,
+ fixedAt,
+ freshnessOf,
+ metresBetween,
+ readSnapshot,
+} from './riderLive';
+
+/** Rider 852's real payload. */
+const LIVE: RiderSnapshot = {
+ userid: 852,
+ username: 'Sivakumar Subramani',
+ accuracy: '12.4',
+ battery: '95%',
+ connection: 'mobile',
+ heading: '0.00',
+ is_background: true,
+ is_charging: false,
+ latitude: '8.179740',
+ longitude: '77.425007',
+ location_service: 'enabled',
+ logdate: '2026-09-10 11:25:11',
+ orderid: '908-20246337',
+ speed: '0.00',
+ status: 'idle',
+};
+
+const NOW = Date.parse('2026-09-10T11:25:41');
+
+test('a live snapshot is read into numbers, not strings', () => {
+ const rider = readSnapshot(LIVE, 'fallback', NOW)!;
+ assert.equal(rider.battery, 95, 'the % sign must not make this NaN');
+ assert.equal(rider.speed, 0, 'standing still is a real answer, not unknown');
+ assert.equal(rider.accuracy, 12.4);
+ assert.equal(rider.lat, 8.17974);
+ assert.equal(rider.name, 'Sivakumar Subramani');
+ assert.equal(rider.orderid, '908-20246337');
+});
+
+test('a fix from thirty seconds ago is live', () => {
+ const rider = readSnapshot(LIVE, 'x', NOW)!;
+ assert.equal(rider.ageMs, 30_000);
+ assert.equal(rider.freshness, 'live');
+});
+
+// Riders 883, 897 and 1111 really answer like this, with nothing in the payload
+// admitting it. Drawing them beside a live rider is the lie to avoid.
+test('a fix from five days ago is old, however confident the payload looks', () => {
+ const rider = readSnapshot({ ...LIVE, logdate: '2026-09-05 11:05:38' }, 'x', NOW)!;
+ assert.equal(rider.freshness, 'old');
+ assert.match(agoOf(rider.ageMs), /5 days ago/);
+});
+
+test('a fix from ten minutes ago is recent — a last-known point, not a position', () => {
+ const rider = readSnapshot({ ...LIVE, logdate: '2026-09-10 11:15:11' }, 'x', NOW)!;
+ assert.equal(rider.freshness, 'recent');
+});
+
+test('an unreadable stamp is old rather than assumed fresh', () => {
+ const rider = readSnapshot({ ...LIVE, logdate: 'whenever' }, 'x', NOW)!;
+ assert.equal(rider.ageMs, null);
+ assert.equal(rider.freshness, 'old');
+ assert.equal(agoOf(null), 'never reported');
+});
+
+// A phone clock running ahead of the browser's would otherwise sort above
+// everything real, as the freshest fix on the board.
+test('a fix stamped in the future reads as just now, not as the freshest', () => {
+ const rider = readSnapshot({ ...LIVE, logdate: '2026-09-10 11:40:00' }, 'x', NOW)!;
+ assert.equal(rider.ageMs, 0);
+ assert.equal(rider.freshness, 'live');
+});
+
+test('0,0 is not a position', () => {
+ const rider = readSnapshot({ ...LIVE, latitude: '0', longitude: '0' }, 'x', NOW)!;
+ assert.equal(rider.lat, null);
+ assert.equal(rider.lng, null);
+});
+
+test('a rider who never reported is null, not an empty rider', () => {
+ assert.equal(readSnapshot(null, 'x', NOW), null);
+});
+
+test('a rider with no name falls back rather than showing blank', () => {
+ assert.equal(readSnapshot({ ...LIVE, username: ' ' }, 'Rider 852', NOW)!.name, 'Rider 852');
+});
+
+/* ── Accuracy ────────────────────────────────────────────────────────────── */
+
+// Live data carries accuracy: "100.0" — a circle wider than the blocks the
+// drops sit on. Worth saying rather than rounding away.
+test('a hundred-metre fix is flagged as vague', () => {
+ assert.equal(readSnapshot({ ...LIVE, accuracy: '100.0' }, 'x', NOW)!.isVague, true);
+ assert.equal(readSnapshot(LIVE, 'x', NOW)!.isVague, false);
+});
+
+/* ── Concerns ────────────────────────────────────────────────────────────── */
+
+test('a healthy live rider has nothing to report', () => {
+ assert.deepEqual(concerns(readSnapshot(LIVE, 'x', NOW)!), []);
+});
+
+test('location turned off is named, since it explains a stale fix', () => {
+ const rider = readSnapshot({ ...LIVE, location_service: 'disabled' }, 'x', NOW)!;
+ assert.equal(rider.hasLocationOn, false);
+ assert.ok(concerns(rider).includes('location turned off'));
+});
+
+// Accusing somebody of turning location off because a field was absent is the
+// kind of wrong that starts an argument with a person.
+test('a missing location_service field is not an accusation', () => {
+ const rider = readSnapshot({ ...LIVE, location_service: undefined }, 'x', NOW)!;
+ assert.equal(rider.hasLocationOn, true);
+ assert.deepEqual(concerns(rider), []);
+});
+
+test('a low battery is a concern unless it is charging', () => {
+ assert.ok(concerns(readSnapshot({ ...LIVE, battery: '9%' }, 'x', NOW)!).some((c) => c.includes('battery')));
+ assert.deepEqual(
+ concerns(readSnapshot({ ...LIVE, battery: '9%', is_charging: true }, 'x', NOW)!),
+ [],
+ );
+});
+
+test('no signal is reported', () => {
+ assert.ok(concerns(readSnapshot({ ...LIVE, connection: 'none' }, 'x', NOW)!).includes('no signal'));
+});
+
+/* ── Distance ────────────────────────────────────────────────────────────── */
+
+test('metres between two points is a real distance', () => {
+ const a = { lat: 11.0168, lng: 76.9558 };
+ assert.ok(Math.abs(metresBetween(a, { lat: a.lat + 1 / 111, lng: a.lng }) - 1000) < 20);
+ assert.equal(metresBetween(a, a), 0);
+});
+
+test('distances read at the scale they are', () => {
+ assert.equal(distanceLabel(null), '—');
+ assert.equal(distanceLabel(840), '840 m');
+ assert.equal(distanceLabel(4235), '4.2 km');
+});
+
+/* ── The active board ────────────────────────────────────────────────────── */
+
+const drops: Record = {
+ 'near-1': { lat: 8.18, lng: 77.4251, customer: 'Close by', address: 'A' },
+ 'far-1': { lat: 8.25, lng: 77.49, customer: 'Miles away', address: 'B' },
+};
+
+const rider = (userid: number, orderid: string, lat: number, lng: number) =>
+ readSnapshot({ ...LIVE, userid, orderid, latitude: String(lat), longitude: String(lng) }, 'x', NOW)!;
+
+test('the board is ordered by how far each rider still has to go', () => {
+ const board = activeBoard(
+ [rider(1, 'far-1', 8.1797, 77.425), rider(2, 'near-1', 8.1797, 77.425)],
+ (id) => drops[id] ?? null,
+ );
+ assert.deepEqual(board.map((entry) => entry.orderid), ['near-1', 'far-1']);
+ assert.equal(board[0]!.customer, 'Close by');
+});
+
+test('a rider carrying nothing is not on the active board', () => {
+ assert.deepEqual(activeBoard([rider(1, '', 8.1797, 77.425)], (id) => drops[id] ?? null), []);
+});
+
+// An unknown distance is not a short one. Putting it first would say the
+// opposite of what is known.
+test('a rider with no usable position sorts last, not first', () => {
+ const lost = readSnapshot({ ...LIVE, userid: 9, orderid: 'near-1', latitude: '0', longitude: '0' }, 'x', NOW)!;
+ const board = activeBoard([lost, rider(2, 'far-1', 8.1797, 77.425)], (id) => drops[id] ?? null);
+ assert.equal(board[0]!.orderid, 'far-1');
+ assert.equal(board[1]!.toDropM, null);
+});
+
+test('a rider on an order we do not hold is still listed, with no distance', () => {
+ const board = activeBoard([rider(1, 'unknown-order', 8.1797, 77.425)], () => null);
+ assert.equal(board.length, 1);
+ assert.equal(board[0]!.toDropM, null);
+ assert.equal(board[0]!.customer, '');
+});
+
+test('freshness bands are drawn where they are documented', () => {
+ assert.equal(freshnessOf(0), 'live');
+ assert.equal(freshnessOf(60_000), 'live');
+ assert.equal(freshnessOf(60_001), 'recent');
+ assert.equal(freshnessOf(60 * 60_000), 'recent');
+ assert.equal(freshnessOf(60 * 60_000 + 1), 'old');
+ assert.equal(freshnessOf(null), 'old');
+});
+
+test('the stamp is read as server local time', () => {
+ assert.equal(fixedAt('2026-09-10 11:25:11'), Date.parse('2026-09-10T11:25:11'));
+ assert.equal(fixedAt(undefined), null);
+});
diff --git a/src/features/store-admin/riderLive.ts b/src/features/store-admin/riderLive.ts
new file mode 100644
index 0000000..6bf4548
--- /dev/null
+++ b/src/features/store-admin/riderLive.ts
@@ -0,0 +1,233 @@
+/**
+ * A rider's live snapshot, read honestly.
+ *
+ * ── Why every field here is nullable ────────────────────────────────────────
+ *
+ * The endpoint always answers, and it answers with the LAST known state however
+ * old it is. Riders 883, 897 and 1111 come back with positions from 5, 3 and 12
+ * days ago; nothing in the payload says so. Every number it carries — battery,
+ * speed, accuracy — is that old too.
+ *
+ * So a snapshot is never shown as a fact about now. `age` is derived first and
+ * `freshness` decides what may be claimed: a LIVE fix can be drawn as a
+ * position, a STALE one is a last-known point, and an OLD one is only evidence
+ * that a rider once existed. The map draws them differently for exactly this
+ * reason.
+ *
+ * ── Numbers arrive as strings, and some of them are junk ────────────────────
+ *
+ * `battery: "95%"` with the sign, `speed: "0.00"`, `accuracy: "100.0"`. A
+ * hundred-metre accuracy is a fix good enough to say which suburb somebody is
+ * in and not which road, and it is common — so it is surfaced rather than
+ * quietly rounded away.
+ */
+
+import type { RiderSnapshot } from '@/api/telemetry';
+
+/** Under a minute old. Safe to call a position. */
+const LIVE_MS = 60_000;
+/** Within the hour. A last-known point, drawn hollow. */
+const RECENT_MS = 60 * 60_000;
+
+/**
+ * Beyond this a GPS fix names a neighbourhood, not a street.
+ *
+ * Live data really does carry `accuracy: "100.0"`, which is a 100 m circle —
+ * wider than most of the blocks the drops sit on.
+ */
+const VAGUE_ACCURACY_M = 60;
+
+export type Freshness = 'live' | 'recent' | 'old';
+
+export interface LiveRider {
+ userid: number;
+ name: string;
+ lat: number | null;
+ lng: number | null;
+ /** Milliseconds since the fix. Null when the stamp is unreadable. */
+ ageMs: number | null;
+ freshness: Freshness;
+ /** 0–100, or null when the phone did not say. */
+ battery: number | null;
+ isCharging: boolean;
+ /** Km/h. Null when unknown; 0 is a real answer meaning standing still. */
+ speed: number | null;
+ /** Degrees clockwise from north. */
+ heading: number | null;
+ /** Metres of uncertainty. */
+ accuracy: number | null;
+ /** True when the fix is too vague to place on a street. */
+ isVague: boolean;
+ connection: string;
+ /** False when the rider has turned location off — the usual cause of a stale fix. */
+ hasLocationOn: boolean;
+ isBackground: boolean;
+ status: string;
+ /** The order they are on, when they are on one. */
+ orderid: string;
+}
+
+function numberFrom(value: string | undefined): number | null {
+ if (value === undefined || value === null || value === '') return null;
+ const n = Number(String(value).replace('%', '').trim());
+ return Number.isFinite(n) ? n : null;
+}
+
+/** `2026-09-10 11:25:11` — server local time, read in the viewer's zone. */
+export function fixedAt(logdate: string | undefined): number | null {
+ if (!logdate) return null;
+ const at = Date.parse(logdate.replace(' ', 'T'));
+ return Number.isFinite(at) ? at : null;
+}
+
+export function freshnessOf(ageMs: number | null): Freshness {
+ if (ageMs === null) return 'old';
+ if (ageMs <= LIVE_MS) return 'live';
+ if (ageMs <= RECENT_MS) return 'recent';
+ return 'old';
+}
+
+/** One snapshot, read into something that can be drawn without lying. */
+export function readSnapshot(
+ snapshot: RiderSnapshot | null,
+ fallbackName: string,
+ now = Date.now(),
+): LiveRider | null {
+ if (!snapshot) return null;
+
+ const lat = numberFrom(snapshot.latitude);
+ const lng = numberFrom(snapshot.longitude);
+ const at = fixedAt(snapshot.logdate);
+ // A negative age is a clock skew between the phone and this browser, not a
+ // fix from the future. Clamped, so it reads as "just now" rather than
+ // sorting above everything real.
+ const ageMs = at === null ? null : Math.max(0, now - at);
+ const accuracy = numberFrom(snapshot.accuracy);
+
+ return {
+ userid: snapshot.userid,
+ name: snapshot.username?.trim() || fallbackName,
+ // 0,0 is the Atlantic — what a phone sends before it has a fix.
+ lat: lat !== null && lng !== null && !(lat === 0 && lng === 0) ? lat : null,
+ lng: lat !== null && lng !== null && !(lat === 0 && lng === 0) ? lng : null,
+ ageMs,
+ freshness: freshnessOf(ageMs),
+ battery: numberFrom(snapshot.battery),
+ isCharging: snapshot.is_charging === true,
+ speed: numberFrom(snapshot.speed),
+ heading: numberFrom(snapshot.heading),
+ accuracy,
+ isVague: accuracy !== null && accuracy > VAGUE_ACCURACY_M,
+ connection: snapshot.connection?.trim() || 'unknown',
+ // Only an explicit "disabled" is treated as off. An absent field is the app
+ // not saying, and accusing a rider of disabling location on a missing value
+ // is the kind of wrong that starts an argument with a person.
+ hasLocationOn: (snapshot.location_service ?? '').trim().toLowerCase() !== 'disabled',
+ isBackground: snapshot.is_background === true,
+ status: snapshot.status?.trim().toLowerCase() || 'unknown',
+ orderid: snapshot.orderid?.trim() || '',
+ };
+}
+
+/** "12s ago", "4m ago", "5 days ago". */
+export function agoOf(ageMs: number | null): string {
+ if (ageMs === null) return 'never reported';
+ const seconds = Math.round(ageMs / 1000);
+ if (seconds < 60) return `${seconds}s ago`;
+ const minutes = Math.round(seconds / 60);
+ if (minutes < 60) return `${minutes}m ago`;
+ const hours = Math.round(minutes / 60);
+ if (hours < 24) return `${hours}h ago`;
+ const days = Math.round(hours / 24);
+ return `${days} day${days === 1 ? '' : 's'} ago`;
+}
+
+/**
+ * What is wrong with this rider's reporting, if anything.
+ *
+ * Reasons rather than a score, and at most a couple of them: a dispatcher needs
+ * to know whether to trust the dot and what to do about it, not to be handed a
+ * health percentage they then have to decode.
+ */
+export function concerns(rider: LiveRider): string[] {
+ const out: string[] = [];
+ if (!rider.hasLocationOn) out.push('location turned off');
+ if (rider.freshness === 'old') out.push(`last heard from ${agoOf(rider.ageMs)}`);
+ if (rider.battery !== null && rider.battery <= 15 && !rider.isCharging) {
+ out.push(`battery ${rider.battery}%`);
+ }
+ if (rider.connection === 'none') out.push('no signal');
+ if (rider.isVague) out.push(`fix only good to ${Math.round(rider.accuracy ?? 0)} m`);
+ return out;
+}
+
+/** Metres between two points. Haversine — the distances here are small. */
+export function metresBetween(
+ a: { lat: number; lng: number },
+ b: { lat: number; lng: number },
+): number {
+ const R = 6_371_000;
+ const rad = (deg: number) => (deg * Math.PI) / 180;
+ const dLat = rad(b.lat - a.lat);
+ const dLng = rad(b.lng - a.lng);
+ const h =
+ Math.sin(dLat / 2) ** 2 +
+ Math.sin(dLng / 2) ** 2 * Math.cos(rad(a.lat)) * Math.cos(rad(b.lat));
+ return 2 * R * Math.asin(Math.min(1, Math.sqrt(h)));
+}
+
+/** "800 m", "4.2 km". */
+export function distanceLabel(metres: number | null): string {
+ if (metres === null) return '—';
+ return metres < 1000 ? `${Math.round(metres / 10) * 10} m` : `${(metres / 1000).toFixed(1)} km`;
+}
+
+/**
+ * A rider with their current job and how far they still have to go.
+ *
+ * `toDrop` is straight-line and says so wherever it is shown: the rider is on
+ * roads and will cover more. It is for ORDERING the board — who is closest to
+ * finishing — which it does correctly, not for quoting an ETA.
+ */
+export interface ActiveRider {
+ live: LiveRider;
+ orderid: string;
+ customer: string;
+ address: string;
+ /** Straight-line metres from the rider to the drop. Null when either is unknown. */
+ toDropM: number | null;
+}
+
+/**
+ * The riders currently carrying something, closest to their drop first.
+ *
+ * A rider with no usable position sorts last rather than first: an unknown
+ * distance is not a short one, and putting them at the top would say the
+ * opposite of what is known.
+ */
+export function activeBoard(
+ riders: readonly LiveRider[],
+ dropOf: (orderid: string) => { lat: number; lng: number; customer: string; address: string } | null,
+): ActiveRider[] {
+ const out: ActiveRider[] = [];
+ for (const live of riders) {
+ if (!live.orderid) continue;
+ const drop = dropOf(live.orderid);
+ const toDropM =
+ drop && live.lat !== null && live.lng !== null
+ ? metresBetween({ lat: live.lat, lng: live.lng }, drop)
+ : null;
+ out.push({
+ live,
+ orderid: live.orderid,
+ customer: drop?.customer ?? '',
+ address: drop?.address ?? '',
+ toDropM,
+ });
+ }
+ return out.sort((a, b) => {
+ if (a.toDropM === null) return 1;
+ if (b.toDropM === null) return -1;
+ return a.toDropM - b.toDropM;
+ });
+}
diff --git a/src/features/store-admin/useRoads.ts b/src/features/store-admin/useRoads.ts
new file mode 100644
index 0000000..449ef2f
--- /dev/null
+++ b/src/features/store-admin/useRoads.ts
@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { routingApi, type Leg, type RoadPath } from '@/api/routing';
+
+/**
+ * Road geometry for a set of legs, fetched in the background.
+ *
+ * ── Why a hook and not a query ──────────────────────────────────────────────
+ *
+ * This is decoration that must never block or break the map. React Query would
+ * give it a loading state, an error state and a retry policy, and the map needs
+ * none of them: until the roads arrive it draws straight lines, and if they
+ * never arrive it goes on drawing straight lines. There is nothing to report
+ * and nothing to retry.
+ *
+ * The cache lives in `routing.ts` and is shared across every map in the
+ * session, so switching between riders re-uses legs already fetched rather than
+ * asking a courtesy server for them again.
+ *
+ * ── Keyed on the coordinates alone ──────────────────────────────────────────
+ *
+ * The signature is built from the endpoints, so a redraw that changes a colour,
+ * a label or a filter does not re-fetch. Only genuinely new legs cost anything.
+ */
+export function useRoads(legs: readonly Leg[]): Map {
+ const [roads, setRoads] = useState>(new Map());
+
+ const signature = legs.map(routingApi.keyFor).join('|');
+
+ useEffect(() => {
+ if (legs.length === 0) {
+ setRoads(new Map());
+ return;
+ }
+ const controller = new AbortController();
+ let isCurrent = true;
+
+ routingApi.roads(legs, controller.signal).then((result) => {
+ // A late answer for a round nobody is looking at any more must not
+ // repaint the map underneath the one they are.
+ if (isCurrent && !controller.signal.aborted) setRoads(result);
+ });
+
+ return () => {
+ isCurrent = false;
+ controller.abort();
+ };
+ // `signature` is the real dependency — `legs` is a fresh array every render.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [signature]);
+
+ return roads;
+}
diff --git a/src/queries/hooks.ts b/src/queries/hooks.ts
index c260616..a6208fd 100644
--- a/src/queries/hooks.ts
+++ b/src/queries/hooks.ts
@@ -18,6 +18,7 @@ import { stockApi, type StockRequestQuery } from '@/api/stock';
import { tenantsApi, utilsApi, type TenantListQuery } from '@/api/tenants';
import { partnersApi } from '@/api/deliveries';
import { customersApi, type CustomerQuery } from '@/api/customers';
+import { telemetryApi, type RiderSnapshot } from '@/api/telemetry';
import { uploadsApi } from '@/api/uploads';
import { APP_BROWSE_CATEGORY } from '@/features/catalogue/tenantCategories';
import { queryKeys } from './keys';
@@ -618,3 +619,53 @@ export function usePartners(applocationid: number | undefined) {
...stable,
});
}
+
+/**
+ * Live positions for a set of riders.
+ *
+ * ── Fanned out, because there is no fleet form ────────────────────────────
+ *
+ * `getriderperiodiclogs` answers for one rider at a time. A merchant's round is
+ * a handful of riders, so a handful of requests every fifteen seconds is
+ * cheap — and the fan-out means one rider's failure does not blank the others,
+ * which a single fleet call would.
+ *
+ * ── Fifteen seconds, matching the source ──────────────────────────────────
+ *
+ * The rider app reports every twenty seconds or so, so polling faster only
+ * re-reads the same fix. Fifteen keeps the board a beat ahead of the data
+ * without asking for anything that does not exist yet.
+ *
+ * Paused when the tab is hidden: nobody is watching a map they cannot see, and
+ * a background tab polling a third-party service all afternoon is rude.
+ */
+export function useRiderLive(userids: readonly number[], isEnabled = true) {
+ const ids = [...new Set(userids)].filter((id) => id > 0);
+
+ const results = useQueries({
+ queries: ids.map((userid) => ({
+ queryKey: queryKeys.live.rider(userid),
+ queryFn: ({ signal }: { signal: AbortSignal }) => telemetryApi.rider(userid, signal),
+ enabled: isEnabled,
+ refetchInterval: isEnabled ? 15_000 : false,
+ refetchIntervalInBackground: false,
+ // A stale fix is worth drawing while the next one is fetched; blanking
+ // the map every fifteen seconds would make it unreadable.
+ staleTime: 10_000,
+ retry: 1,
+ })),
+ });
+
+ const byRider = new Map();
+ results.forEach((result, index) => {
+ const id = ids[index];
+ if (id !== undefined) byRider.set(id, result.data ?? null);
+ });
+
+ return {
+ data: byRider,
+ isLoading: results.some((result) => result.isLoading),
+ /** True while any rider is being re-read — for a quiet "updating" hint. */
+ isFetching: results.some((result) => result.isFetching),
+ };
+}
diff --git a/src/queries/keys.ts b/src/queries/keys.ts
index 2177025..b9845da 100644
--- a/src/queries/keys.ts
+++ b/src/queries/keys.ts
@@ -16,6 +16,10 @@ export const queryKeys = {
logs: (partnerid: number, fromdate: string, todate: string) =>
['partners', 'logs', partnerid, fromdate, todate] as const,
},
+ live: {
+ all: ['live'] as const,
+ rider: (userid: number) => ['live', 'rider', userid] as const,
+ },
/** The delivery regions a partner can cover. */
regions: { all: ['regions'] as const },
uploads: {
diff --git a/tools/css-hooks.mjs b/tools/css-hooks.mjs
new file mode 100644
index 0000000..a71f312
--- /dev/null
+++ b/tools/css-hooks.mjs
@@ -0,0 +1,19 @@
+/**
+ * Make `import './thing.css'` a no-op under the Node test runner.
+ *
+ * Vite turns a CSS import into a side effect that injects a stylesheet; Node
+ * has no such notion and refuses the file outright with
+ * ERR_UNKNOWN_FILE_EXTENSION. That is fine for the pure tests, which never
+ * import a component — but the map has to be MOUNTED to be tested at all, and
+ * leaflet's own stylesheet comes with it.
+ *
+ * Styling is not what those tests check. They count polylines and markers in
+ * the document, which leaflet creates regardless of whether any CSS loaded. So
+ * every `.css` specifier resolves to an empty module and the import vanishes.
+ */
+export function resolve(specifier, context, next) {
+ if (specifier.endsWith('.css')) {
+ return { url: 'data:text/javascript,export default {}', shortCircuit: true };
+ }
+ return next(specifier, context);
+}
diff --git a/tools/stub-css.mjs b/tools/stub-css.mjs
new file mode 100644
index 0000000..705785a
--- /dev/null
+++ b/tools/stub-css.mjs
@@ -0,0 +1,9 @@
+/**
+ * Registers the CSS stub for the test runner.
+ *
+ * Loaded with `node --import`, which has to happen before any test module is
+ * evaluated — a hook registered later cannot intercept an import that has
+ * already been resolved.
+ */
+import { register } from 'node:module';
+register('./css-hooks.mjs', import.meta.url);