Truck detention on lastmile

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

@@ -58,6 +58,7 @@ import { vehiclesService } from "@/services/vehicles.service";
 import { driversService, type Driver } from "@/services/drivers.service";
 import { ratesService } from "@/services/rates.service";
 import { ReleaseOrderModal, type ReleaseOrderTruckPrefill } from "@/components/warehouses/ReleaseOrderModal";
+import { TruckDetentionModal } from "@/components/operations/TruckDetentionModal";
 import { LastMileStepper, type LastMileStepState } from "@/components/operations/LastMileSteps";
 
 const formatPrice = (amount: number | string | null | undefined, currency = "ETB") =>
@@ -544,6 +545,7 @@ const LastMilePage = () => {
   const [tripSlipVehicleId, setTripSlipVehicleId] = useState<string | null>(null);
   const [tripSlipSelectOpen, setTripSlipSelectOpen] = useState(false);
   const [activeId, setActiveId] = useState<string | null>(null);
+  const [detentionRecord, setDetentionRecord] = useState<LastMileRecord | null>(null);
   // Multi-vehicle assign: one row per truck — vehicle + the container it carries.
   const [vehicleRows, setVehicleRows] = useState<
     Array<{ vehicleId: string | null; containerNumber: string }>
@@ -1360,6 +1362,16 @@ const LastMilePage = () => {
                   >
                     {row.original.invoice ? "Invoice generated" : "Generate Invoice"}
                   </Menu.Item>
+                  {/* Truck detention: set/adjust arrival & return times, preview the
+                      per-truck-per-day charge, and generate its invoice. Available
+                      once the vehicle is en route/delivered (clock has a start). */}
+                  <Menu.Item
+                    leftSection={<Receipt size={15} />}
+                    disabled={!pastTransit}
+                    onClick={() => setDetentionRecord(row.original)}
+                  >
+                    Truck detention
+                  </Menu.Item>
                   {canPrint && (
                     <Menu.Item
                       leftSection={<Printer size={15} />}
@@ -2019,6 +2031,12 @@ const LastMilePage = () => {
         item={releaseItem}
         truckPrefill={releaseTruckPrefill}
       />
+
+      <TruckDetentionModal
+        opened={Boolean(detentionRecord)}
+        onClose={() => setDetentionRecord(null)}
+        record={detentionRecord}
+      />
     </Stack>
   );
 };