+ {zoneCards.length > 0 && (
+
+ )}
+
+
+
+
+ {shouldFetchLive && (
+
+ {liveIsFetching && (
+
+ Loading {liveRows.length ? `· ${liveRows.length} loaded` : ''}
+
+ )}
+ {!liveIsFetching && !liveIsError && (
+
+ {liveRows.length} orders
+
+ )}
+ {liveIsError && (
+
+ Failed to load
+
+ )}
+
+
+ )}
+
+
+
+
+
+
+
+
+ {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()}
+ {!focusedKitchen && riderPositions
+ .filter(p => activeRiders.has(p.id))
+ .filter(p => !focusedRider || focusedRider.id === p.id)
+ .map(p => {
+ // Prefer the road polyline midpoint; fall back to aerial midpoint until OSRM responds.
+ const segPolyline = osrmRoutes[`${p.id}-seg-${p.nextStep}`];
+ const roadMid = polylineMidpoint(segPolyline);
+ const pos = roadMid || [p.aerialLat, p.aerialLon];
+ const onRoad = Boolean(roadMid);
+ const bikeIcon = L.divIcon({
+ className: '',
+ iconSize: [44, 44],
+ iconAnchor: [22, 22],
+ popupAnchor: [0, -22],
+ html: `
+
+
${MOTORBIKE_SVG}
+
${p.completedCount}/${p.totalCount}
+
RIDER
+ {p.riderName}
+ Progress{p.completedCount} / {p.totalCount} delivered
+ Next stop#{p.nextStep} · {p.nextCustomer || '—'}
+ Position{onRoad ? 'on road' : 'estimating…'}
+
+
+ );
+ })}
+
+
+
+ {/*
+
+
{activeStats.orders}
Orders
+
{activeStats.riders}
Riders
+
₹{activeStats.profit.toFixed(0)}
Profit
+
+
*/}
+
+
+
+ {viewMode === 'kitchens' ? (
+ kitchens.slice(0, 10).map(k => (
+
setFocusedKitchen(k)}>
+
+
{k.kitchenName}
+
{k.orders.length}
+
+ ))
+ ) : (
+ riders.slice(0, 10).map(r => (
+
handleRiderFocus(r)}>
+
+
{r.riderName}
+
{r.orders.length}
+
+ ))
+ )}
+
+
+
+
+
+
+