+ {!embedded && (
+
+
+
D
+
Dispatch
+ {appLocations && appLocations.length > 0 && (
+
+
+ {locationMenuOpen && (
+
+ {appLocations.map((loc) => {
+ const isActive = String(loc.applocationid) === String(selectedAppLocationId);
+ return (
+
+ );
+ })}
+
+ )}
+
+ )}
+
+
+ {/* Header right-cluster: total-orders pill, date picker. Sits to the
+ LEFT of the running clock so the operator sees current wave size
+ + selected date together in one row. */}
+
+ {shouldFetchLive && (
+ <>
+ {liveIsFetching && (
+
+ Loading {liveRows.length ? `· ${liveRows.length} loaded` : ''}
+
+ )}
+ {!liveIsFetching && !liveIsError && (
+
+ {filteredLiveRows.length} orders
+ / {liveRows.length} total
+
+ )}
+ {liveIsError && (
+
+ Failed to load
+
+ )}
+ {(() => {
+ // Date-picker chip + custom calendar popover. Replaces the
+ // OS-native
dialog (which looks different
+ // on every browser and can't pick up the design system) with
+ // a single popover that always renders the same way. The
+ // chip has three regions:
+ // • prev-day arrow — one-click ±1 day scrubbing
+ // • center card — opens the calendar popover on click
+ // • next-day arrow — disabled when viewing today
+ // The popover itself carries the month grid + quick presets.
+ const today = dayjs().startOf('day');
+ const todayStr = today.format('YYYY-MM-DD');
+ const picked = dayjs(selectedDate);
+ const isToday = selectedDate === todayStr;
+ const isFuture = picked.isAfter(today, 'day');
+
+ const commitDate = (next) => {
+ if (!next) return;
+ const str = next.format('YYYY-MM-DD');
+ if (str === selectedDate) {
+ setDatePickerOpen(false);
+ return;
+ }
+ if (next.isAfter(today, 'day')) return; // guard future
+ setSelectedDate(str);
+ handleRiderFocus(null);
+ setFocusedKitchen(null);
+ setFocusedZone(null);
+ setDatePickerOpen(false);
+ };
+
+ const goPrevDay = () => commitDate(picked.subtract(1, 'day'));
+ const goNextDay = () => {
+ if (isToday || isFuture) return;
+ commitDate(picked.add(1, 'day'));
+ };
+
+ // Build a fixed 6×7 grid of dayjs instances starting from
+ // the Sunday before the month's first day. Days outside the
+ // visible month render as faded "other-month" cells so the
+ // grid never jumps in height as months change.
+ const monthStart = calViewMonth.startOf('month');
+ const gridStart = monthStart.subtract(monthStart.day(), 'day');
+ const cells = Array.from({ length: 42 }, (_, i) => gridStart.add(i, 'day'));
+
+ const prevMonth = () => setCalViewMonth((m) => m.subtract(1, 'month'));
+ const nextMonth = () => {
+ const candidate = calViewMonth.add(1, 'month');
+ // Allow navigating into the current month (so "today" can
+ // be reached) but not into purely-future months.
+ if (candidate.startOf('month').isAfter(today, 'month')) return;
+ setCalViewMonth(candidate);
+ };
+ const canGoNextMonth = !calViewMonth.add(1, 'month').startOf('month').isAfter(today, 'month');
+
+ const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+ return (
+
+
+
+
+
+ {datePickerOpen && (
+
+ {/* Month header — month/year title flanked by
+ prev/next arrows. The next-month arrow disables
+ once we'd cross into a purely-future month so
+ the operator never lands on a month they can't
+ pick a date in. */}
+
+
+
+ {calViewMonth.format('MMMM YYYY')}
+
+
+
+
+
+ {WEEKDAYS.map((w) => (
+
{w}
+ ))}
+
+
+
+ {cells.map((d) => {
+ const inMonth = d.month() === calViewMonth.month();
+ const isSel = d.format('YYYY-MM-DD') === selectedDate;
+ const isTodayCell = d.format('YYYY-MM-DD') === todayStr;
+ const disabled = d.isAfter(today, 'day');
+ const cls = [
+ 'date-cal-day',
+ !inMonth && 'is-other-month',
+ isSel && 'is-selected',
+ isTodayCell && 'is-today',
+ disabled && 'is-disabled'
+ ].filter(Boolean).join(' ');
+ return (
+
+ );
+ })}
+
+
+ {/* Quick presets — the three dates ops scrub to
+ most often. Saves a month-nav + a day-click for
+ the common cases. */}
+
+
+
+
+
+
+ )}
+
+ );
+ })()}
+
+ )}
+
+
+
{clock}
+
+ )}
+
+ {(embedded || topView === 'live') && (<>
+
+
+
+
+
+
+
+
+ {shouldFetchLive && viewMode !== 'rider-info' && (
+
+
Batch
+ {/* Status-wise (time-field) filter is hidden for now per spec —
+ bucketing is locked to `assigntime`. Restore this block to bring
+ back the Delivered/Pending/Assigned/... dropdown.
+
+
+ {timeFieldMenuOpen && (
+
+ {TIME_FIELDS.map((f) => {
+ const isActive = f.id === selectedTimeField;
+ return (
+
+ );
+ })}
+
+ )}
+
+ */}
+ {/* Slot editor (Edit slots button + panel) is hidden for now per
+ spec — the three batches (Morning / Afternoon / Evening) are
+ fixed. Restore this block to bring back the operator-editable
+ start/end hours, add-slot, and reset-to-defaults controls.
+
+
+ {slotEditOpen && (
+
+
+
Slot timings
+
Hours are 0–24 (24h clock). Half-hour steps allowed (e.g. 12.5 = 12:30). Start < End.
+
+
+ {slotsConfig.map((s, idx) => (
+
+ {idx + 1}
+
+
+
+ {formatSlotRange(s.startHour, s.endHour)}
+
+
+
+ ))}
+
+
+
+
+
+
+ )}
+
+ */}
+ {/* Inner scroller — keeps the "Slot" label fixed while the chip list scrolls
+ horizontally when it overflows. */}
+
+ {BATCHES.map((b) => {
+ const isActive = selectedBatch === b.id;
+ return (
+
+ );
+ })}
+
+
+ )}
+
+ {viewMode === 'rider-info' ? (
+
+
+
+
Riders
+
{ridersAllDay.length} {ridersAllDay.length === 1 ? 'rider' : 'riders'} today
+
+
+
+ setRiderInfoSearch(e.target.value)}
+ />
+
+ {(() => {
+ const q = riderInfoSearch.trim().toLowerCase();
+ const matched = ridersAllDay.filter((r) => {
+ if (!q) return true;
+ return String(r.riderName || '').toLowerCase().includes(q) || String(r.id).includes(q);
+ });
+ if (matched.length === 0) {
+ return
{riderInfoSearch ? `No riders match "${riderInfoSearch}"` : 'No riders have orders today'}
;
+ }
+ return (
+
+ {matched.map((r) => {
+ const isActive = String(riderInfoUserid) === String(r.id);
+ return (
+
+ );
+ })}
+
+ );
+ })()}
+
+
+
+ {riderInfoUserid == null ? (
+
+
+
Pick a rider
+
+ Select a rider from the list on the left to see their live GPS,
+ battery, connection, and current order snapshot.
+
+
+ ) : (
+ <>
+ {riderInfoFetching && !riderInfoData && (
+
Loading rider snapshot…
+ )}
+
+ {riderInfoIsError && (
+
+ Couldn't load this rider's log. {riderInfoError?.message || ''}
+
+ )}
+
+ {riderInfoData && (() => {
+ const d = riderInfoData;
+ const lat = parseFloat(d.latitude);
+ const lon = parseFloat(d.longitude);
+ const hasCoords = Number.isFinite(lat) && Number.isFinite(lon);
+ const batteryNum = parseInt(String(d.battery || '').replace('%', ''), 10);
+ const batteryLow = Number.isFinite(batteryNum) && batteryNum <= 20;
+ const speedNum = parseFloat(d.speed);
+ const statusKey = String(d.status || '').toLowerCase();
+ return (
+
+
+
{d.username || `Rider #${d.userid}`}
+
+ #{d.userid}
+ {d.status && (
+ {d.status}
+ )}
+
+
+ {riderInfoFetching ? 'Updating…' : 'Live'}
+
+
+ {d.logdate && (
+
+ Last seen {d.logdate}
+
+ )}
+
+
+
+
+
+
+
Battery
+
+ {d.battery || '—'}
+ {d.is_charging && Charging}
+
+
+
+
+
+
+
+
Connection
+
{d.connection || '—'}
+
+
+
+
+
+
+
GPS Accuracy
+
{d.accuracy ? `${d.accuracy} m` : '—'}
+
+
+
+
+
+
+
Location Service
+
{d.location_service || '—'}
+
+
+
+
+
+
+
Speed
+
+ {Number.isFinite(speedNum) ? `${speedNum.toFixed(2)} km/h` : '—'}
+
+
+
+
+
+
+
+
Heading
+
{d.heading != null ? `${d.heading}°` : '—'}
+
+
+
+
+
+
+
App State
+
{d.is_background ? 'Background' : 'Foreground'}
+
+
+
+
+
+
+
Current Order
+
{d.orderid || '—'}
+
+
+
+
+ {hasCoords && (
+
+
+ {lat.toFixed(6)}, {lon.toFixed(6)}
+
+
+ {/* `key` forces a remount when the rider changes so the
+ MapContainer re-centers on the new coords (leaflet's
+ center prop is only read on mount). */}
+
+
+
+ {/* Permanent banner above the pin — Nominatim
+ reverse-geocode tells the operator which
+ suburb/area the rider is in. Falls back to
+ a "Locating…" hint while the request is in
+ flight so the pin never looks unlabeled. */}
+
+ {riderInfoArea?.area || 'Locating area…'}
+
+
+ {d.username || `Rider #${d.userid}`}
+ {riderInfoArea?.area && (
+
+ {riderInfoArea.area}
+
+ )}
+
+ {d.logdate ? `Last seen ${d.logdate}` : `${lat.toFixed(6)}, ${lon.toFixed(6)}`}
+
+
+
+
+
+
+ )}
+
+ );
+ })()}
+
+ )}
+
+
+ ) : (
+
+
+ {compareOpen && focusedRider && (
+
+ )}
+
+
+
+
+
+
+ {compareOpen && }
+
+ {kitchens
+ .filter(k => Number.isFinite(k.lat) && Number.isFinite(k.lon))
+ .filter(k => !focusedRider || k.riders.has(focusedRider.id))
+ .map((k, i) => (
+ setFocusedKitchen(k),
+ mouseover: (e) => e.target.openPopup(),
+ mouseout: (e) => e.target.closePopup()
+ }}
+ >
+
+ KITCHEN
+ {k.kitchenName}
+
+ Orders
+ {k.orders.length}
+
+
+
+ ))
+ }
+ {renderMarkers()}
+ {renderRoutes()}
+
+ {/* Live rider GPS markers from /partners/getriderlogs/. Mirrors the
+ Reports → Riders Logs map: green pin when the rider's last log
+ row is `active`, red otherwise, with the rider's username as a
+ label. Scoped to riders who actually have orders in the
+ currently selected slot — `riders` is derived from
+ filteredLiveRows so it already reflects the slot filter. A
+ rider with zero orders in the current slot is hidden, even if
+ getriderlogs still returns their GPS row. When a specific
+ rider is focused, only that one is shown. */}
+ {liveRiderLocations
+ .filter((r) => riders.some((rd) => String(rd.id) === String(r.id)))
+ .filter((r) => !focusedRider || String(focusedRider.id) === String(r.id))
+ .map((r) => {
+ const isActive = r.status === 'active';
+ const pinColor = isActive ? '#16a34a' : '#dc2626';
+ // Look up the rider's in-progress order so the popup can show
+ // where they're heading next (drop customer/area + originating
+ // kitchen). Falls back to nothing when every order is final.
+ const matchingRider = riders.find((rd) => String(rd.id) === String(r.id));
+ const nextOrder = matchingRider?.orders
+ ?.slice()
+ .sort((a, b) => {
+ const tA = a.trip_number || 1;
+ const tB = b.trip_number || 1;
+ if (tA !== tB) return tA - tB;
+ return (a.step || 0) - (b.step || 0);
+ })
+ .find((o) => {
+ const s = String(o.orderstatus || '').toLowerCase();
+ return !FINAL_STATUSES.has(s) && !SKIPPED_STATUSES.has(s);
+ });
+ const nextDropArea = nextOrder
+ ? (nextOrder.deliverysuburb || extractArea(nextOrder.deliveryaddress))
+ : null;
+ const liveIcon = L.divIcon({
+ className: '',
+ iconSize: [140, 56],
+ iconAnchor: [12, 41],
+ popupAnchor: [58, -40],
+ html: `
+
+
${(r.username || '').replace(/[<>&"']/g, '')}${r.orderid ? ` #${String(r.orderid).replace(/[<>&"']/g, '')}` : ''}
+
+
+
+
+
+
+ {r.username || `Rider #${r.id}`}
+ {r.status && (
+
+ {r.status}
+
+ )}
+
+
Rider ID: #{r.id}
+
+
+ {r.orderid && (
+
+ Active Order
+ #{r.orderid}
+
+ )}
+ {nextOrder && (
+
+ Next Stop
+
+ #{nextOrder.step || '?'} · {nextOrder.deliverycustomer || '—'}
+
+
+ )}
+ {nextDropArea && (
+
+ Next Location
+
+ {nextDropArea}
+
+
+ )}
+ {nextOrder?.pickupcustomer && (
+
+ Pickup
+
+ {nextOrder.pickupcustomer}
+
+
+ )}
+ {r.contactno && (
+
+ )}
+ {r.logdate && (
+
+ Last Seen
+
+ {' '}
+ {dayjs(r.logdate).isValid() ? dayjs(r.logdate).format('hh:mm:ss A') : r.logdate}
+
+
+ )}
+
+ Position
+
+ {r.lat.toFixed(5)}, {r.lon.toFixed(5)}
+
+
+
` +
+ `
${t.sequenceStep}` +
+ (isDelivered
+ ? '
'
+ : '') +
+ '
+
+
+
+
+
+
+ {t.pickupcustomer || 'Pickup'}
+
+
+ {t.coords[0]?.logdate
+ ? `Picked up · ${dayjs(t.coords[0].logdate).format('hh:mm A')}`
+ : 'Rider trip origin'}
+
+
+
+
Click for step 1 details
+
+
+
+ {t.sequenceStep}
+
+
+
+ {t.deliverycustomer || `Step ${t.sequenceStep}`}
+
+
+ {t.deliverytime
+ ? `Delivered ${dayjs(t.deliverytime).format('hh:mm A')}`
+ : `${t.coords.length} GPS pings`}
+
+
+ {t.orderstatus && (
+
+ {ss.label}
+
+ )}
+
+ {isAnomaly && (
+
+ Deviation flagged — see details below
+
+ )}
+
+ {isFocusedStep ? 'Click to deselect' : 'Click for details'}
+
+
+
+ {compareOpen && focusedRider && (
+
+
+
+
+
+ )}
+
+
+ {/*
+
+
{activeStats.orders}
Orders
+
{activeStats.riders}
Riders
+
₹{activeStats.profit.toFixed(0)}
Profit
+
+
*/}
+
+
+ {/* Right-corner rider/kitchen legend hidden per spec — the same
+ delivered/total count now renders inside the left sidebar's
+ rider card badge (see renderRiderCard). Restore this block to
+ bring back the floating top-right chip list.
+
+ {viewMode === 'kitchens' ? (
+ kitchens.slice(0, 10).map(k => {
+ const total = k.orders.length;
+ const delivered = k.orders.filter((o) =>
+ FINAL_STATUSES.has(String(o.orderstatus || '').toLowerCase())
+ ).length;
+ const isDone = total > 0 && delivered >= total;
+ return (
+
setFocusedKitchen(k)} title={`${delivered} delivered of ${total} total`}>
+
+
{k.kitchenName}
+
{delivered}/{total}
+
+ );
+ })
+ ) : (
+ riders.slice(0, 10).map(r => {
+ const total = r.orders.length;
+ const delivered = r.orders.filter((o) =>
+ FINAL_STATUSES.has(String(o.orderstatus || '').toLowerCase())
+ ).length;
+ const isDone = total > 0 && delivered >= total;
+ return (
+
handleRiderFocus(r)} title={`${delivered} delivered of ${total} total`}>
+
+
{r.riderName}
+
{delivered}/{total}
+
+ );
+ })
+ )}
+
+ */}
+
+
+
+
+
+
+ {/* Compare-mode second pane — actual GPS tracks per delivery for the
+ focused rider. Fans out /deliveries/getdeliverylogs/?deliveryid=X
+ (one query per order, cached by deliveryid) and overlays each
+ track as a colored polyline + start/end markers. Renders alongside
+ #map-wrap when compareOpen so the operator can eyeball planned vs.
+ actual side by side. */}
+ {compareOpen && focusedRider && (
+
+ {(() => {
+ const total = riderActualTracks.length;
+ const loaded = riderActualTracks.filter((t) => t.coords.length > 0).length;
+ const loading = riderActualTracks.filter((t) => t.isLoading).length;
+ const pct = total > 0 ? Math.round((loaded / total) * 100) : 0;
+ const isDone = total > 0 && loaded === total && loading === 0;
+ const focusedDelta =
+ focusedCompareStep != null
+ ? compareDeltas.find((d) => d.sequenceStep === focusedCompareStep)
+ : null;
+ return (
+
+
+
+
+ {focusedRider.riderName}
+ ACTUAL vs PLANNED
+
+
+ {focusedCompareStep != null && (
+
+ )}
+
+
+
+
+ {/* Step timeline — every delivery as a tappable dot in chronological
+ order. The operator can drill into any step to scrutinize that
+ single delivery on both maps. Filled = delivered, ring = pending,
+ dim = cancelled/skipped, ring with spinner = GPS still loading.
+ Whole strip (timeline + progress + legend) collapses via the
+ header chevron — open by default. */}
+ {compareTimelineOpen && (
+ <>
+
+
+
+
+ {/* Planned Row */}
+
+ {plannedOrdered.map((d, i) => {
+ const statusLow = String(d.orderstatus || '').toLowerCase();
+ const isDelivered = FINAL_STATUSES.has(statusLow);
+ const isSkipped = SKIPPED_STATUSES.has(statusLow);
+ const isFocused = focusedCompareStep === d.sequenceStep;
+ const isLoading = d.isLoading && d.coordsCount === 0;
+ const isNoData = !d.isLoading && d.coordsCount === 0;
+ const plannedStepNum = d.order?.step || d.sequenceStep;
+ const color = stepColor(plannedStepNum - 1);
+ const cls = [
+ 'compare-step',
+ isFocused && 'is-focused',
+ isDelivered && 'is-delivered',
+ isSkipped && 'is-skipped',
+ !isDelivered && !isSkipped && 'is-pending',
+ isLoading && 'is-loading',
+ isNoData && 'is-no-data',
+ d.anomaly && 'is-anomaly'
+ ].filter(Boolean).join(' ');
+ return (
+
+ {i > 0 && }
+
+
+ );
+ })}
+
+
+ {/* Actual Row */}
+
+ {actualOrdered.map((d, i) => {
+ const statusLow = String(d.orderstatus || '').toLowerCase();
+ const isDelivered = FINAL_STATUSES.has(statusLow);
+ const isSkipped = SKIPPED_STATUSES.has(statusLow);
+ const isFocused = focusedCompareStep === d.sequenceStep;
+ const isLoading = d.isLoading && d.coordsCount === 0;
+ const isNoData = !d.isLoading && d.coordsCount === 0;
+ const plannedStepNum = d.order?.step || d.sequenceStep;
+ const color = stepColor(plannedStepNum - 1);
+ const cls = [
+ 'compare-step',
+ isFocused && 'is-focused',
+ isDelivered && 'is-delivered',
+ isSkipped && 'is-skipped',
+ !isDelivered && !isSkipped && 'is-pending',
+ isLoading && 'is-loading',
+ isNoData && 'is-no-data',
+ d.anomaly && 'is-anomaly'
+ ].filter(Boolean).join(' ');
+ return (
+
+ {i > 0 && }
+
+
+ );
+ })}
+
+
+
+
+
+
+ {loading > 0 ? `Loading GPS… ${loaded}/${total}` : `${loaded}/${total} tracks`}
+
+
+
+
+ {/* Legend strip — one line of icons so the operator instantly knows
+ what each line/marker means. Lives in the header so it doesn't
+ compete with the map for vertical real estate. */}
+ {(() => {
+ // Two color stories depending on view mode:
+ // • Combined: polylines collapse to fixed indigo (planned)
+ // and emerald (actual) so the two overlaid layers can be
+ // told apart at a glance. Legend swatches mirror this.
+ // • Planned-only / Actual-only: single layer on the map,
+ // so polylines keep STEP_PALETTE and the swatch shows
+ // the focused step's color or a step-gradient strip
+ // (signals "varies by step").
+ const isCombined = compareViewMode === 'combined';
+ const stepSwatchBg = focusedDelta
+ ? stepColor(focusedDelta.sequenceStep - 1)
+ : `linear-gradient(90deg, ${STEP_PALETTE.slice(0, 6).join(', ')})`;
+ const plannedSwatchBg = isCombined ? COMBINED_PLANNED_COLOR : stepSwatchBg;
+ const actualSwatchBg = isCombined ? COMBINED_ACTUAL_COLOR : stepSwatchBg;
+ return (
+
+
+
+ Planned (dashed)
+
+
+
+ Actual GPS (solid)
+
+
+ Kalman-smoothed GPS · OSRM road-snapped
+
+
+ );
+ })()}
+
+ )}
+
+ );
+ })()}
+
+
+ )}
+
+ {/* Right-side data panel — full-height column in Compare mode. Renders
+ day-overview tiles (distance, deviation, on-time), the
+ focused-step delta when a step is selected, a deviations list of
+ anomaly steps, and a per-step list showing whether each step was
+ followed correctly (delivered + within plan) and the delivery time
+ vs expected. Clicking any step row mirrors the timeline click —
+ sets focusedCompareStep so both maps zoom onto that delivery. */}
+ {compareOpen && focusedRider && (
+
setCompareOpen(false)}
+ />
+ )}
+
+ )}
+
+ {/* Centered order popup — sibling of the map (NOT inside leaflet's
+ transformed panes) so position: fixed actually pins it to the
+ viewport. Replaces the marker-attached leaflet Popup so the rich
+ order card stays fully visible at the screen center on small
+ laptop displays. */}
+ {centerPopupOrder && (
+
{
+ if (popupHoverTimerRef.current) {
+ clearTimeout(popupHoverTimerRef.current);
+ popupHoverTimerRef.current = null;
+ }
+ }}
+ onMouseLeave={() => {
+ if (isOrderPopupPinned(centerPopupOrder)) return;
+ if (popupHoverTimerRef.current) clearTimeout(popupHoverTimerRef.current);
+ popupHoverTimerRef.current = setTimeout(() => {
+ setCenterPopupOrder(null);
+ popupHoverTimerRef.current = null;
+ }, 200);
+ }}
+ >
+
+
+ {renderOrderPopupContent(centerPopupOrder)}
+
+
+ )}
+ )}
+
+ {!embedded && topView === 'analysis' && (
+
+
+ {ANALYSIS_BATCH_WINDOWS.map((b) => {
+ const result = analysisResults[b.key];
+ const isLoading = analysisLoadingWindow === b.key;
+ const hasError = result?.data?.success === false;
+ const statusBg = hasError ? '#fee2e2' : result ? `${b.color}22` : '#f1f5f9';
+ const statusFg = hasError ? '#dc2626' : result ? b.color : '#64748b';
+ const statusLabel = isLoading
+ ? 'Loading…'
+ : hasError
+ ? '! Failed'
+ : result
+ ? `✓ ${result.fetchedAt}`
+ : 'Fetch';
+ const isActive = activeBatchKey === b.key;
+ return (
+
+ );
+ })}
+
+
+ {(() => {
+ if (!activeBatchKey) {
+ return (
+
+ Pick a batch above to view its efficiency analysis.
+
+ );
+ }
+ const activeMeta = ANALYSIS_BATCH_WINDOWS.find((b) => b.key === activeBatchKey);
+ const cached = analysisResults[activeBatchKey];
+ const isLoading = analysisLoadingWindow === activeBatchKey;
+
+ if (isLoading && !cached) {
+ return (
+
Loading {activeMeta.label} batch…
+ );
+ }
+ if (!cached) return null;
+
+ const raw = cached.data || {};
+ if (raw.success === false) {
+ return (
+
+
+
+
{activeMeta.label} Batch
+
+ {activeMeta.timeRange} · Fetched at {cached.fetchedAt}
+
+
+
+
+
+
+
+ {raw?.error?.code || 'Request failed'}
+
+
+ {raw?.error?.message || 'The server returned an error.'}
+
+ {raw?.request_id && (
+
request_id: {raw.request_id}
+ )}
+
+
+ );
+ }
+
+ const fleet = raw.fleet_summary || {};
+ const riders = Array.isArray(raw.rider_timelines) ? raw.rider_timelines : [];
+ const subs = Array.isArray(raw.substitution_opportunities) ? raw.substitution_opportunities : [];
+ const rec = raw.top_recommendation;
+ const hasRecRider = !!(rec && (rec.idle_rider_name || rec.idle_rider_id));
+ const hasRec = !!(rec && rec.action && rec.action !== 'none' && hasRecRider);
+ const win = raw.window || {};
+
+ const fleetMetrics = [
+ { label: 'Total Orders', value: analysisFormatNum(fleet.total_orders) },
+ { label: 'Total Riders', value: analysisFormatNum(fleet.total_riders) },
+ { label: 'Avg Orders/Rider', value: fleet.orders_per_rider_avg ?? '—' },
+ { label: 'Fleet Start', value: fleet.fleet_start || '—' },
+ { label: 'Fleet Done', value: fleet.fleet_done || '—' },
+ { label: 'Duration', value: fleet.total_duration_minutes != null ? `${fleet.total_duration_minutes} min` : '—' }
+ ];
+
+ return (
+
+
+
+
+ {activeMeta.label} Batch
+
+ {raw.date ? ` · ${raw.date}` : ''}
+ {win.from && win.to ? ` · ${win.from} – ${win.to}` : ''}
+
+
+
+ Fetched at {cached.fetchedAt} · Input deliveries: {raw.input_delivery_count ?? '—'}
+
+
+
+
+
+
+
Fleet Summary
+
+ {fleetMetrics.map((m) => (
+
+
{m.label}
+
{m.value}
+
+ ))}
+
+
+
+ {hasRec ? (
+
+
Top Recommendation
+
+
+
+
+ {(rec.action || 'recommendation').replaceAll('_', ' ')}
+
+ {rec.fleet_improvement_minutes != null && (
+
0
+ ? { background: '#dcfce7', color: '#166534' }
+ : { background: '#f1f5f9', color: '#475569' }
+ }
+ >
+ {rec.fleet_improvement_minutes > 0 ? '↑' : '•'} Fleet improves by {rec.fleet_improvement_minutes} min
+
+ )}
+
+
+ {rec.idle_rider_name || `Rider ${rec.idle_rider_id}`}
+ {rec.primary_kitchen && (
+ <> · primary kitchen {rec.primary_kitchen}
+ )}
+ {rec.second_kitchen && (
+ <> → also serve {rec.second_kitchen} after {rec.second_kitchen_dispatch_after || '—'}
+ )}
+
+ {rec.description && (
+
{rec.description}
+ )}
+ {rec.activate_when?.rules?.length > 0 && (
+
+
+ Activate when ({rec.activate_when.condition || 'AND'}):
+
+ {rec.activate_when.rules.map((rule, i) => (
+
+ {rule.field} {rule.operator} {rule.value}
+ {rule.reason && — {rule.reason}}
+
+ ))}
+
+ )}
+
+
+ ) : (
+
+
Top Recommendation
+
+
+
+ Fleet is balanced, no reassignment needed right now.
+
+
+
+ )}
+
+ {riders.length > 0 && (
+
+
+ Rider Timelines ({riders.length})
+
+
+ {riders.map((r) => {
+ const isActive = String(r.status || '').toLowerCase() === 'active';
+ return (
+
+
+
+
+ {r.name}
+ #{r.userid}
+
+
+ {r.status}
+
+
+
+ {r.kitchen && (
+
+ {r.kitchen}
+
+ )}
+
+ {r.order_count} orders
+
+
+ {r.started_at} → {r.finished_at}
+
+ 30
+ ? { background: '#fef3c7', color: '#92400e' }
+ : undefined
+ }
+ >
+ {r.idle_minutes} min idle
+
+
+
+ );
+ })}
+
+
+ )}
+
+ {subs.length > 0 && (
+
+
+ Substitution Opportunities ({subs.length})
+
+
+ {subs.map((s, i) => {
+ const idle = s.idle_rider || {};
+ const relieved = s.most_relieved_rider || {};
+ const improved = s.fleet_improvement_minutes ?? 0;
+ return (
+
+
+
+ {idle.name || `Rider ${idle.userid}`}{' '}
+ covers {s.target_kitchen}
+
+
0
+ ? { background: '#dcfce7', color: '#166534' }
+ : { background: '#f1f5f9', color: '#475569' }
+ }
+ >
+ Fleet {improved > 0 ? '↑' : '•'} {improved} min
+
+
+
+
+ {s.travel_to_kitchen_km} km
+
+
+ {s.travel_to_kitchen_minutes} min travel
+
+
+ arrives {s.arrive_at_kitchen}
+
+
+ {s.total_orders_transferred} orders
+
+
+ +{s.extra_km_for_idle_rider} km for idle rider
+
+
+ {relieved.name && (
+
+
+ Most relieved: {relieved.name}{' '}
+ ({relieved.original_finish} → {relieved.new_finish}, saves{' '}
+ {relieved.time_saved_minutes} min)
+
+ )}
+ {Array.isArray(s.orders_to_transfer) && s.orders_to_transfer.length > 0 && (
+
+
Orders transferred
+ {s.orders_to_transfer.map((o) => {
+ const imp = o.improvement_minutes ?? 0;
+ return (
+
+ #{o.deliveryid}
+
+ from {o.from_rider_name}
+
+
+ {o.original_delivery_time} → {o.estimated_delivery_time}
+
+ 0
+ ? { background: '#dcfce7', color: '#166534' }
+ : imp < 0
+ ? { background: '#fee2e2', color: '#991b1b' }
+ : { background: '#f1f5f9', color: '#475569' }
+ }
+ >
+ {imp > 0 ? '+' : ''}{imp} min
+
+
+ );
+ })}
+
+ )}
+
+ );
+ })}
+
+
+ )}
+
+ );
+ })()}
+
+ )}
+
+