last mile

apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx

@@ -1,5 +1,13 @@
 import { useMemo, useState } from "react";
-import { Check, Eye, Filter, MoreHorizontal, RefreshCw, Truck } from "lucide-react";
+import {
+  ArrowRight,
+  Check,
+  Eye,
+  Filter,
+  MoreHorizontal,
+  RefreshCw,
+  Truck,
+} from "lucide-react";
 import type { ColumnDef } from "@edr/ui-common";
 import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
 import {
@@ -52,6 +60,12 @@ const DELIVERY_STATUS_META: Record<
   DELIVERED: { label: "Delivered", color: "green" },
 };
 
+// Forward-only lifecycle: Payment Pending → Ready to Transit → Delivered.
+const NEXT_DELIVERY_STATUS: Partial<Record<DeliveryStatus, DeliveryStatus>> = {
+  PAYMENT_PENDING: "READY_TO_TRANSIT",
+  READY_TO_TRANSIT: "DELIVERED",
+};
+
 // Single filter covering both the delivery lifecycle and assignment state.
 type StatusFilter =
   | "ALL"
@@ -271,6 +285,20 @@ const LastMilePage = () => {
     closeAssign();
   };
 
+  const handleAdvanceStatus = (job: LastMileJob) => {
+    const next = NEXT_DELIVERY_STATUS[job.deliveryStatus];
+    if (!next) return;
+    setJobs((current) =>
+      current.map((item) =>
+        item.id === job.id ? { ...item, deliveryStatus: next } : item,
+      ),
+    );
+    toast({
+      title: "Status updated",
+      description: `${job.bookingRef} → ${DELIVERY_STATUS_META[next].label}`,
+    });
+  };
+
   const columns = useMemo((): ColumnDef<LastMileJob>[] => {
     const headerClassName = ruleEngineTable.headerCell;
     const cellClassName = ruleEngineTable.bodyCell;
@@ -343,15 +371,26 @@ const LastMilePage = () => {
         meta: { headerClassName, cellClassName: `${cellClassName} whitespace-nowrap` },
         cell: ({ row }) => {
           const isAssigned = row.original.status === "ASSIGNED";
+          const nextStatus = NEXT_DELIVERY_STATUS[row.original.deliveryStatus];
           return (
             <Group gap={4} justify="flex-end" wrap="nowrap">
-              <Menu position="bottom-end" width={190} withinPortal>
+              <Menu position="bottom-end" width={200} withinPortal>
                 <Menu.Target>
                   <ActionIcon variant="subtle" color="gray" aria-label="Delivery actions">
                     <MoreHorizontal size={16} />
                   </ActionIcon>
                 </Menu.Target>
                 <Menu.Dropdown>
+                  <Menu.Item
+                    leftSection={<ArrowRight size={15} />}
+                    disabled={!nextStatus}
+                    onClick={() => handleAdvanceStatus(row.original)}
+                  >
+                    {nextStatus
+                      ? `Mark ${DELIVERY_STATUS_META[nextStatus].label}`
+                      : "Delivered"}
+                  </Menu.Item>
+                  <Menu.Divider />
                   <Menu.Item
                     leftSection={<Truck size={15} />}
                     disabled={isAssigned}