rider status

src/features/store-admin/OrderDetailDrawer.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { ArrowDown, Bike, Check, MapPin, Phone, X } from 'lucide-react';
 import type { DeliveryRow, OrderRow } from '@/api/types';
+import { orderStage, type Stage } from './orderProgress';
 import { useDeliveryMoves } from './DeliveryProgress';
 import { Drawer } from './Drawer';
 import { Badge, DrawerButton, DrawerCard, Metric, Metrics, Note, Row, Section } from './drawerKit';
@@ -47,10 +48,21 @@ const STEPS: { label: string; fields: string[] }[] = [
 export function OrderDetailDrawer({
   row,
   kind,
+  stages,
   onClose,
 }: {
   row: Row_;
   kind: RowKind;
+  /**
+   * Where each order's delivery has got to — see `orderProgress.ts`.
+   *
+   * Passed in rather than looked up, so the drawer and the table it opened
+   * from cannot disagree: the row said "Picked" and the drawer said "Pending"
+   * would be exactly the table/drawer mismatch this console has been cleaning
+   * up. Optional because the dispatch board opens deliveries directly, and a
+   * delivery row already carries its own stage.
+   */
+  stages?: ReadonlyMap<number, string>;
   onClose: () => void;
 }) {
   /*
@@ -65,7 +77,7 @@ export function OrderDetailDrawer({
   return kind === 'delivery' ? (
     <DeliveryDrawer job={row as DeliveryRow} onClose={onClose} />
   ) : (
-    <Sheet row={row} isDelivery={false} onClose={onClose} />
+    <Sheet row={row} isDelivery={false} stage={orderStage(row as OrderRow, stages ?? EMPTY_STAGES)} onClose={onClose} />
   );
 }
 
@@ -76,7 +88,7 @@ function DeliveryDrawer({ job, onClose }: { job: DeliveryRow; onClose: () => voi
       row={job}
       isDelivery
       onClose={onClose}
-      {...(moves.isSettled ? {} : { footer: <MoveActions moves={moves} /> })}
+      {...(moves.isSettled || moves.isStalled ? {} : { footer: <MoveActions moves={moves} /> })}
       caption={<MoveCaption moves={moves} />}
     />
   );
@@ -84,14 +96,21 @@ function DeliveryDrawer({ job, onClose }: { job: DeliveryRow; onClose: () => voi
 
 type Moves = ReturnType<typeof useDeliveryMoves>;
 
+/** A drawer opened without the index falls back to the order's own word. */
+const EMPTY_STAGES: ReadonlyMap<number, string> = new Map();
+
 function Sheet({
   row,
   isDelivery,
+  stage,
   onClose,
   footer,
   caption,
 }: {
   row: Row_;
+  /** For an order: the stage its delivery reports. Absent on a delivery row,
+      whose `orderstatus` IS the delivery status already. */
+  stage?: Stage;
   /** Passed explicitly, never inferred from the presence of a footer — a
       settled job has no actions and would otherwise read as an order. */
   isDelivery: boolean;
@@ -108,8 +127,10 @@ function Sheet({
   const order = delivery ? undefined : (row as OrderRow);
 
   const title = row.orderid || (job ? `DLV-${job.deliveryid}` : `#${order?.orderheaderid}`);
-  const status = row.orderstatus;
-  const colour = statusColor(delivery ? DELIVERY_STATUS : ORDER_STATUS, status);
+  /* An order shows the stage its delivery reports, which may be a word from the
+     delivery ladder — so the ladder follows the word, not the row kind. */
+  const status = stage ? stage.status : row.orderstatus;
+  const colour = statusColor(delivery || stage?.isDelivery ? DELIVERY_STATUS : ORDER_STATUS, status);
 
   const value = job ? (job.deliveryamt ?? 0) : orderValue(row);
   const cancelled = (status ?? '').toLowerCase().includes('cancel');
@@ -278,9 +299,9 @@ function MoveActions({ moves: state }: { moves: Moves }) {
 }
 
 function MoveCaption({ moves }: { moves: Moves }) {
-  const { isSettled, problem, status } = moves;
+  const { isSettled, isStalled, problem, status } = moves;
 
-  if (isSettled) {
+  if (isSettled || isStalled) {
     return <Note>This job is {status}. Nothing further to record.</Note>;
   }
   if (problem) {