Merge branch 'freight/develop' into freight/style/ui-sync

apps/edr-freight-web/backoffice/src/components/warehouses/DeliverInventoryModal.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import { Alert, Button, Group, Modal, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { Info } from 'lucide-react';
+
+import { useToast } from '@/hooks/use-toast';
+import { useDeliverInventory } from '@/hooks/useWarehouses';
+import type { WarehouseInventoryItem } from '@/types/warehouse';
+import { extractErrorMessage } from './options';
+
+interface DeliverInventoryModalProps {
+  opened: boolean;
+  onClose: () => void;
+  item: WarehouseInventoryItem | null;
+}
+
+export function DeliverInventoryModal({ opened, onClose, item }: DeliverInventoryModalProps) {
+  const { toast } = useToast();
+  const deliverMutation = useDeliverInventory();
+  const [receiverName, setReceiverName] = useState('');
+  const [remarks, setRemarks] = useState('');
+
+  useEffect(() => {
+    if (opened) {
+      setReceiverName('');
+      setRemarks('');
+    }
+  }, [opened, item]);
+
+  const handleSubmit = async () => {
+    if (!item) return;
+    if (!receiverName.trim()) {
+      toast({ variant: 'destructive', title: 'Receiver name is required' });
+      return;
+    }
+    try {
+      await deliverMutation.mutateAsync({
+        id: item.id,
+        payload: { receiverName: receiverName.trim(), remarks: remarks.trim() || undefined },
+      });
+      toast({ title: 'Delivered — proof of delivery captured' });
+      onClose();
+    } catch (error) {
+      toast({ variant: 'destructive', title: 'Delivery failed', description: extractErrorMessage(error) });
+    }
+  };
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="Deliver to customer (proof of delivery)" centered size="md">
+      <Stack gap="md">
+        <Alert icon={<Info size={16} />} color="green" variant="light">
+          <Text size="sm">
+            A release order must already be issued. Capturing the receiver marks the goods <b>DELIVERED</b>.
+          </Text>
+        </Alert>
+        <TextInput
+          label="Receiver name"
+          required
+          placeholder="Who received the goods"
+          value={receiverName}
+          onChange={(e) => setReceiverName(e.currentTarget.value)}
+        />
+        <Textarea
+          label="Remarks"
+          placeholder="Optional delivery notes"
+          minRows={2}
+          value={remarks}
+          onChange={(e) => setRemarks(e.currentTarget.value)}
+        />
+        <Group justify="flex-end" mt="sm">
+          <Button variant="default" onClick={onClose} disabled={deliverMutation.isPending}>
+            Cancel
+          </Button>
+          <Button color="green" onClick={handleSubmit} loading={deliverMutation.isPending}>
+            Confirm delivery
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}

apps/edr-freight-web/backoffice/src/components/warehouses/InventoryWorkbench.tsx

@@ -1,18 +1,23 @@
 import { useState } from 'react';
-import { Center, Loader } from '@mantine/core';
+import { Button, Center, Group, Loader, Stack, Text } from '@mantine/core';
+import { ClipboardCheck } from 'lucide-react';
 
 import { useToast } from '@/hooks/use-toast';
 import {
+  useBulkMarkInspected,
   useDispatchInventory,
   useMarkReadyForLoading,
+  useMarkReadyForPickup,
   useStoreInventory,
 } from '@/hooks/useWarehouses';
 import type { InventoryAction, WarehouseInventoryItem } from '@/types/warehouse';
+import { DeliverInventoryModal } from './DeliverInventoryModal';
 import { FeePreviewModal } from './FeePreviewModal';
 import { InspectionReportModal } from './InspectionReportModal';
 import { InventoryHistoryModal } from './InventoryHistoryModal';
 import { LoadInventoryModal } from './LoadInventoryModal';
 import { MoveInventoryModal } from './MoveInventoryModal';
+import { ReleaseOrderModal } from './ReleaseOrderModal';
 import { ReserveInventoryModal } from './ReserveInventoryModal';
 import { WarehouseInventoryTable } from './WarehouseInventoryTable';
 import { extractErrorMessage } from './options';
@@ -20,10 +25,12 @@ import { extractErrorMessage } from './options';
 interface InventoryWorkbenchProps {
   items: WarehouseInventoryItem[];
   isLoading?: boolean;
+  /** Optional Last Mile action (Batch 8) — only shown for items whose booking requested door delivery. */
+  onLastMile?: (item: WarehouseInventoryItem) => void;
 }
 
 /** Inventory table + all lifecycle actions (advance / move / reserve / history). */
-export function InventoryWorkbench({ items, isLoading }: InventoryWorkbenchProps) {
+export function InventoryWorkbench({ items, isLoading, onLastMile }: InventoryWorkbenchProps) {
   const { toast } = useToast();
   const [busyId, setBusyId] = useState<string | null>(null);
   const [moveItem, setMoveItem] = useState<WarehouseInventoryItem | null>(null);
@@ -32,10 +39,46 @@ export function InventoryWorkbench({ items, isLoading }: InventoryWorkbenchProps
   const [historyItem, setHistoryItem] = useState<WarehouseInventoryItem | null>(null);
   const [inspectItem, setInspectItem] = useState<WarehouseInventoryItem | null>(null);
   const [feeItem, setFeeItem] = useState<WarehouseInventoryItem | null>(null);
+  const [releaseItem, setReleaseItem] = useState<WarehouseInventoryItem | null>(null);
+  const [deliverItem, setDeliverItem] = useState<WarehouseInventoryItem | null>(null);
 
   const storeMutation = useStoreInventory();
   const readyMutation = useMarkReadyForLoading();
+  const pickupMutation = useMarkReadyForPickup();
   const dispatchMutation = useDispatchInventory();
+  const inspectMutation = useBulkMarkInspected();
+
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const allSelected = items.length > 0 && selected.size === items.length;
+  const someSelected = selected.size > 0 && !allSelected;
+  const toggleSelect = (id: string) =>
+    setSelected((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  const toggleSelectAll = () =>
+    setSelected(allSelected ? new Set() : new Set(items.map((i) => i.id)));
+
+  const markInspected = async () => {
+    if (selected.size === 0) {
+      toast({ variant: 'destructive', title: 'Select at least one item' });
+      return;
+    }
+    try {
+      const res = (await inspectMutation.mutateAsync({ inventoryIds: [...selected] })) as {
+        data: { inspectedCount: number; skippedCount: number };
+      };
+      const r = res.data;
+      toast({
+        title: `${r.inspectedCount} marked inspected`,
+        description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
+      });
+      setSelected(new Set());
+    } catch (error) {
+      toast({ variant: 'destructive', title: 'Mark inspected failed', description: extractErrorMessage(error) });
+    }
+  };
 
   const runDirect = async (item: WarehouseInventoryItem, fn: () => Promise<unknown>, label: string) => {
     setBusyId(item.id);
@@ -63,6 +106,14 @@ export function InventoryWorkbench({ items, isLoading }: InventoryWorkbenchProps
         return;
       case 'dispatch':
         return runDirect(item, () => dispatchMutation.mutateAsync(item.id), 'Inventory dispatched');
+      case 'ready-for-pickup':
+        return runDirect(item, () => pickupMutation.mutateAsync(item.id), 'Ready for pickup');
+      case 'release':
+        setReleaseItem(item);
+        return;
+      case 'deliver':
+        setDeliverItem(item);
+        return;
       default:
         return;
     }
@@ -78,15 +129,39 @@ export function InventoryWorkbench({ items, isLoading }: InventoryWorkbenchProps
 
   return (
     <>
-      <WarehouseInventoryTable
-        items={items}
-        busyId={busyId}
-        onAdvance={advance}
-        onMove={setMoveItem}
-        onHistory={setHistoryItem}
-        onInspect={setInspectItem}
-        onFeePreview={setFeeItem}
-      />
+      <Stack gap="sm">
+        <Group justify="space-between">
+          <Text size="sm" c="dimmed">
+            Selected: <b>{selected.size}</b>
+          </Text>
+          <Button
+            size="compact-sm"
+            variant="light"
+            leftSection={<ClipboardCheck size={14} />}
+            disabled={selected.size === 0}
+            loading={inspectMutation.isPending}
+            onClick={markInspected}
+          >
+            Mark Selected as Inspected
+          </Button>
+        </Group>
+
+        <WarehouseInventoryTable
+          items={items}
+          busyId={busyId}
+          onAdvance={advance}
+          onMove={setMoveItem}
+          onHistory={setHistoryItem}
+          onInspect={setInspectItem}
+          onFeePreview={setFeeItem}
+          onLastMile={onLastMile}
+          selectedIds={selected}
+          onToggleSelect={toggleSelect}
+          onToggleSelectAll={toggleSelectAll}
+          allSelected={allSelected}
+          someSelected={someSelected}
+        />
+      </Stack>
 
       <MoveInventoryModal opened={Boolean(moveItem)} onClose={() => setMoveItem(null)} item={moveItem} />
       <ReserveInventoryModal
@@ -110,6 +185,8 @@ export function InventoryWorkbench({ items, isLoading }: InventoryWorkbenchProps
         onClose={() => setFeeItem(null)}
         inventoryId={feeItem?.id ?? null}
       />
+      <ReleaseOrderModal opened={Boolean(releaseItem)} onClose={() => setReleaseItem(null)} item={releaseItem} />
+      <DeliverInventoryModal opened={Boolean(deliverItem)} onClose={() => setDeliverItem(null)} item={deliverItem} />
     </>
   );
 }

apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+import { Alert, Button, Group, Modal, Stack, Text, TextInput } from '@mantine/core';
+import { Info } from 'lucide-react';
+
+import { useToast } from '@/hooks/use-toast';
+import { useReleaseInventory } from '@/hooks/useWarehouses';
+import type { WarehouseInventoryItem } from '@/types/warehouse';
+import { extractErrorMessage } from './options';
+
+interface ReleaseOrderModalProps {
+  opened: boolean;
+  onClose: () => void;
+  item: WarehouseInventoryItem | null;
+}
+
+export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalProps) {
+  const { toast } = useToast();
+  const releaseMutation = useReleaseInventory();
+  const [reference, setReference] = useState('');
+
+  useEffect(() => {
+    if (opened) setReference(item?.releaseOrderReference ?? '');
+  }, [opened, item]);
+
+  const handleSubmit = async () => {
+    if (!item) return;
+    try {
+      await releaseMutation.mutateAsync({ id: item.id, payload: { reference: reference.trim() || undefined } });
+      toast({ title: 'Release order issued' });
+      onClose();
+    } catch (error) {
+      toast({ variant: 'destructive', title: 'Release failed', description: extractErrorMessage(error) });
+    }
+  };
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="Issue release order (DO)" centered size="md">
+      <Stack gap="md">
+        <Alert icon={<Info size={16} />} color="orange" variant="light">
+          <Text size="sm">
+            Records the delivery order / release order sent to the customer. Once issued, the goods can be
+            picked up and delivered.
+          </Text>
+        </Alert>
+        <TextInput
+          label="Release order reference"
+          placeholder="e.g. DO-2026-001"
+          value={reference}
+          onChange={(e) => setReference(e.currentTarget.value)}
+        />
+        <Group justify="flex-end" mt="sm">
+          <Button variant="default" onClick={onClose} disabled={releaseMutation.isPending}>
+            Cancel
+          </Button>
+          <Button color="orange" onClick={handleSubmit} loading={releaseMutation.isPending}>
+            Issue release order
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}

apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseDashboardCharts.tsx

@@ -23,15 +23,15 @@ interface WarehouseDashboardChartsProps {
 }
 
 const ORANGE = '#f08c00';
-const GREEN = '#5bbf4a';
+const GREEN = '#22c55e'; // green from bookings
 
-/** Inventory lifecycle status series — alternating orange / light green. */
+/** Inventory lifecycle status series — one distinct color per status (aligned with status badges). */
 const STATUS_SERIES = [
-  { key: 'stored', label: 'Stored', color: ORANGE },
-  { key: 'reserved', label: 'Reserved', color: GREEN },
-  { key: 'readyForLoading', label: 'Ready', color: ORANGE },
-  { key: 'loaded', label: 'Loaded', color: GREEN },
-  { key: 'dispatched', label: 'Dispatched', color: ORANGE },
+  { key: 'stored', label: 'Stored', color: '#228be6' }, // blue
+  { key: 'reserved', label: 'Reserved', color: '#ae3ec9' }, // grape
+  { key: 'readyForLoading', label: 'Ready', color: '#f08c00' }, // orange
+  { key: 'loaded', label: 'Loaded', color: '#12b886' }, // teal
+  { key: 'dispatched', label: 'Dispatched', color: GREEN }, // green (bookings)
 ] as const;
 
 type Granularity = 'week' | 'month' | 'year';
@@ -157,8 +157,8 @@ export function WarehouseDashboardCharts({ data }: WarehouseDashboardChartsProps
                 outerRadius={95}
                 paddingAngle={2}
               >
-                {statusData.map((entry, i) => (
-                  <Cell key={entry.name} fill={i % 2 === 0 ? ORANGE : GREEN} />
+                {statusData.map((entry) => (
+                  <Cell key={entry.name} fill={entry.color} />
                 ))}
               </Pie>
               <Tooltip />

apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseInventoryTable.tsx

@@ -4,7 +4,7 @@ import { ArrowRightLeft, ClipboardList, Coins, History } from 'lucide-react';
 import { DataTable, type ColumnDef } from '@edr/ui-common';
 
 import type { InventoryAction, WarehouseInventoryItem } from '@/types/warehouse';
-import { INVENTORY_NEXT_ACTION } from '@/types/warehouse';
+import { getNextInventoryAction } from '@/types/warehouse';
 import { InventoryStatusBadge } from './badges';
 import { formatDate, formatNumber, humanizeEnum } from './options';
 
@@ -16,6 +16,14 @@ interface WarehouseInventoryTableProps {
   onHistory: (item: WarehouseInventoryItem) => void;
   onInspect?: (item: WarehouseInventoryItem) => void;
   onFeePreview?: (item: WarehouseInventoryItem) => void;
+  // Optional Last Mile action — only rendered for items whose booking requested door delivery.
+  onLastMile?: (item: WarehouseInventoryItem) => void;
+  // Optional row selection (used for bulk Mark-as-Inspected).
+  selectedIds?: Set<string>;
+  onToggleSelect?: (id: string) => void;
+  onToggleSelectAll?: () => void;
+  allSelected?: boolean;
+  someSelected?: boolean;
 }
 
 const itemKind = (item: WarehouseInventoryItem) => {
@@ -31,6 +39,9 @@ const actionColor: Record<InventoryAction, string> = {
   'ready-for-loading': 'cyan',
   load: 'teal',
   dispatch: 'edr-green',
+  'ready-for-pickup': 'orange',
+  release: 'yellow',
+  deliver: 'green',
 };
 
 export function WarehouseInventoryTable({
@@ -41,6 +52,12 @@ export function WarehouseInventoryTable({
   onHistory,
   onInspect,
   onFeePreview,
+  onLastMile,
+  selectedIds,
+  onToggleSelect,
+  onToggleSelectAll,
+  allSelected,
+  someSelected,
 }: WarehouseInventoryTableProps) {
   const columns = useMemo<ColumnDef<WarehouseInventoryItem>[]>(
     () => [

apps/edr-freight-web/backoffice/src/components/warehouses/badges.tsx

@@ -34,12 +34,14 @@ export function WarehouseStatusBadge({ status }: { status: WarehouseStatus }) {
 }
 
 const inventoryStatusColor: Record<InventoryStatus, string> = {
+  UNLOADED: 'indigo',
   RECEIVED: 'yellow',
   STORED: 'blue',
   RESERVED: 'grape',
   READY_FOR_LOADING: 'cyan',
   LOADED: 'teal',
   DISPATCHED: 'edr-green',
+  DELIVERED: 'edr-green',
 };
 
 export function InventoryStatusBadge({ status }: { status: InventoryStatus }) {