fix(warehouses): finish queue-table ergonomics batch

- statuses render through the shared InventoryStatusBadge (humanized label,
  consistent per-status color) instead of raw enums in ad-hoc badges
- Ready-To-Load drops its selection checkboxes: nothing consumed the
  selection since auto-load became train-scoped
- bulk toasts now say WHY items were skipped ("3 skipped — Booking not PAID")
  via a shared skippedSummary helper
- one-click irreversible bulk actions (Dispatch All/Selected, Mark Selected
  as Inspected x2, Auto Unload train) now ask for confirmation through a
  small local ConfirmActionModal - no @mantine/modals dependency added.
  Receive All stays unconfirmed: it already funnels through the
  truck-entrance modal with an explicit Save.
- table minWidths retuned for the slimmed column sets
  (1700->1350, 1600->1200, 2000->1650)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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

@@ -51,6 +51,7 @@ import { warehouseService } from '@/services/warehouse.service';
 import type {
   EligibleBooking,
   InventoryInquiryFilter,
+  InventoryStatus,
   InventoryInquiryResult,
   ImportTrain,
   ImportTrainItem,
@@ -63,6 +64,7 @@ import type {
   WarehouseYard,
   WarehouseZone,
 } from '@/types/warehouse';
+import { InventoryStatusBadge } from './badges';
 import { BookingSelect } from './BookingSelect';
 import { DeliverInventoryModal } from './DeliverInventoryModal';
 import { ContainerItemsModal } from './ContainerItemsModal';
@@ -253,6 +255,50 @@ const toTruckEntrancePayload = (form: TruckEntranceFormState): TruckEntrancePayl
   warehouseManagerName: form.warehouseManagerName.trim() || undefined,
 });
 
+
+
+type ConfirmAction = { title: string; message: string; confirmLabel: string; run: () => void };
+
+/** One-click bulk actions are irreversible — make the click deliberate. */
+function ConfirmActionModal({
+  action,
+  onClose,
+}: {
+  action: ConfirmAction | null;
+  onClose: () => void;
+}) {
+  return (
+    <Modal opened={Boolean(action)} onClose={onClose} title={action?.title ?? ''} centered size="sm">
+      <Stack gap="md">
+        <Text size="sm">{action?.message}</Text>
+        <Group justify="flex-end">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              action?.run();
+              onClose();
+            }}
+          >
+            {action?.confirmLabel}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+/** "3 skipped — Booking not PAID" instead of a bare count. */
+const skippedSummary = (
+  skippedCount: number,
+  results: Array<{ reason?: string; message?: string }>,
+): string | undefined => {
+  if (!skippedCount) return undefined;
+  const reason = results.find((x) => x.reason || x.message);
+  return `${skippedCount} skipped${reason ? ` — ${reason.reason ?? reason.message}` : ''}`;
+};
+
 const commonNonEmptyValue = (values: Array<string | null | undefined>) => {
   const unique = [...new Set(values.map((value) => value?.trim()).filter(Boolean))] as string[];
   return unique.length === 1 ? unique[0] : '';
@@ -860,7 +906,7 @@ function EligibleTab({
       });
       toast({
         title: `${r.receivedCount} received at ${direction === 'EXPORT' ? 'facility' : 'warehouse'}`,
-        description: r.results.find((item) => item.grnNumber)?.grnNumber ?? (r.skippedCount ? `${r.skippedCount} skipped` : undefined),
+        description: r.results.find((item) => item.grnNumber)?.grnNumber ?? skippedSummary(r.skippedCount, r.results),
       });
       const firstGrn = r.results.find((item) => item.inventoryId && item.grnNumber);
       if (focusedBookingId && firstGrn?.inventoryId && firstGrn.grnNumber) {
@@ -1030,7 +1076,7 @@ function EligibleTab({
             : `No eligible PAID ${direction.toLowerCase()} bookings to receive.`}
         </Text>
       ) : (
-        <Table.ScrollContainer minWidth={1700}>
+        <Table.ScrollContainer minWidth={1350}>
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
@@ -1248,6 +1294,7 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
     api.warehouses.bulkMarkInspected.mutationOptions(),
   );
   const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
   const [inspectId, setInspectId] = useState<string | null>(null);
 
   const pendingRows = rows.filter((r) => r.inspectionStatus !== 'PASSED');
@@ -1271,7 +1318,7 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
       const r = await inspectMutation.mutateAsync({ inventoryIds: [...selected] });
       toast({
         title: `${r.inspectedCount} marked inspected`,
-        description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
+        description: skippedSummary(r.skippedCount, r.results),
       });
       setSelected(new Set());
       onChanged?.();
@@ -1292,7 +1339,14 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
           leftSection={<ClipboardCheck size={14} />}
           disabled={selected.size === 0}
           loading={inspectMutation.isPending}
-          onClick={markInspected}
+          onClick={() =>
+            setConfirmAction({
+              title: 'Mark inspected',
+              message: `Mark ${selected.size} selected item(s) as inspection PASSED?`,
+              confirmLabel: `Mark ${selected.size} inspected`,
+              run: markInspected,
+            })
+          }
         >
           Mark Selected as Inspected
         </Button>
@@ -1307,7 +1361,7 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
           No received export items awaiting inspection.
         </Text>
       ) : (
-        <Table.ScrollContainer minWidth={1700}>
+        <Table.ScrollContainer minWidth={1350}>
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
@@ -1363,9 +1417,7 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
                       </Badge>
                     </Table.Td>
                     <Table.Td>
-                      <Badge color="blue" variant="light" size="sm">
-                        {r.status}
-                      </Badge>
+                      <InventoryStatusBadge status={r.status as InventoryStatus} />
                     </Table.Td>
                     <Table.Td ta="right">
                       <Button size="compact-xs" variant="light" color="orange" onClick={() => setInspectId(r.id)}>
@@ -1385,6 +1437,7 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
         opened={Boolean(inspectId)}
         onClose={() => setInspectId(null)}
       />
+      <ConfirmActionModal action={confirmAction} onClose={() => setConfirmAction(null)} />
     </Stack>
   );
 }
@@ -1396,7 +1449,6 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
     api.warehouses.readyToLoadExport.queryOptions({ enabled }),
   );
   const qc = useQueryClient();
-  const [selected, setSelected] = useState<Set<string>>(new Set());
   const [trainPickerOpen, setTrainPickerOpen] = useState(false);
   const [targetScheduleId, setTargetScheduleId] = useState<string | null>(null);
   // Loading is always onto a SPECIFIC pre-dispatch train. No train -> no auto-load.
@@ -1420,15 +1472,6 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
     },
   });
 
-  const allSelected = rows.length > 0 && selected.size === rows.length;
-  const someSelected = selected.size > 0 && !allSelected;
-  const toggleAll = () => setSelected(allSelected ? new Set() : new Set(rows.map((r) => r.id)));
-  const toggleOne = (id: string) =>
-    setSelected((prev) => {
-      const next = new Set(prev);
-      next.has(id) ? next.delete(id) : next.add(id);
-      return next;
-    });
 
   const confirmLoad = async () => {
     if (!targetScheduleId) {
@@ -1446,7 +1489,6 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
       });
       setTrainPickerOpen(false);
       setTargetScheduleId(null);
-      setSelected(new Set());
       onChanged?.();
     } catch (error) {
       toast({ variant: 'destructive', title: 'Load failed', description: extractErrorMessage(error) });
@@ -1525,18 +1567,10 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
           No EXPORT items with inspection PASSED waiting to be loaded.
         </Text>
       ) : (
-        <Table.ScrollContainer minWidth={1600}>
+        <Table.ScrollContainer minWidth={1200}>
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
-                <Table.Th w={40}>
-                  <Checkbox
-                    aria-label="Select all"
-                    checked={allSelected}
-                    indeterminate={someSelected}
-                    onChange={toggleAll}
-                  />
-                </Table.Th>
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
@@ -1551,13 +1585,6 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
             <Table.Tbody>
               {rows.map((r: ReadyToLoadRow) => (
                 <Table.Tr key={r.id}>
-                  <Table.Td>
-                    <Checkbox
-                      aria-label={`Select ${r.bookingReference ?? r.id}`}
-                      checked={selected.has(r.id)}
-                      onChange={() => toggleOne(r.id)}
-                    />
-                  </Table.Td>
                   <Table.Td>
                     <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
@@ -1577,9 +1604,7 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
                     </Badge>
                   </Table.Td>
                   <Table.Td>
-                    <Badge color="teal" variant="light" size="sm">
-                      {r.status}
-                    </Badge>
+                    <InventoryStatusBadge status={r.status as InventoryStatus} />
                   </Table.Td>
                 </Table.Tr>
               ))}
@@ -1608,6 +1633,7 @@ function LoadedExportTab({
   const { data: rows = [], isLoading } = useQuery(
     api.warehouses.loadedExport.queryOptions({ enabled }),
   );
+  const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
   const bulkDispatch = useMutation(
     api.warehouses.bulkDispatchExport.mutationOptions(),
   );
@@ -1632,7 +1658,7 @@ function LoadedExportTab({
       const r = await bulkDispatch.mutateAsync(inventoryIds);
       toast({
         title: `${r.dispatchedCount} dispatched`,
-        description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
+        description: skippedSummary(r.skippedCount, r.results),
       });
       setSelected(new Set());
       onChanged?.();
@@ -1662,7 +1688,14 @@ function LoadedExportTab({
               variant="default"
               disabled={rows.length === 0}
               loading={bulkDispatch.isPending}
-              onClick={() => dispatch(rows.map((r) => r.id))}
+              onClick={() =>
+                setConfirmAction({
+                  title: 'Dispatch all',
+                  message: `Dispatch all ${rows.length} loaded item(s)? They leave warehouse inventory for the train.`,
+                  confirmLabel: `Dispatch ${rows.length}`,
+                  run: () => dispatch(rows.map((r) => r.id)),
+                })
+              }
             >
               Dispatch All
             </Button>
@@ -1672,7 +1705,14 @@ function LoadedExportTab({
               leftSection={<Truck size={14} />}
               disabled={selected.size === 0}
               loading={bulkDispatch.isPending}
-              onClick={() => dispatch([...selected])}
+              onClick={() =>
+                setConfirmAction({
+                  title: 'Dispatch selected',
+                  message: `Dispatch ${selected.size} selected item(s)? They leave warehouse inventory for the train.`,
+                  confirmLabel: `Dispatch ${selected.size}`,
+                  run: () => dispatch([...selected]),
+                })
+              }
             >
               Dispatch Selected
             </Button>
@@ -1689,7 +1729,7 @@ function LoadedExportTab({
           No LOADED export items {dispatchable ? 'waiting to dispatch' : 'yet'}.
         </Text>
       ) : (
-        <Table.ScrollContainer minWidth={1600}>
+        <Table.ScrollContainer minWidth={1200}>
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
@@ -1739,9 +1779,7 @@ function LoadedExportTab({
                     {r.origin || r.destination ? `${r.origin ?? '?'} → ${r.destination ?? '?'}` : '—'}
                   </Table.Td>
                   <Table.Td>
-                    <Badge color="blue" variant="light" size="sm">
-                      {r.status}
-                    </Badge>
+                    <InventoryStatusBadge status={r.status as InventoryStatus} />
                   </Table.Td>
                 </Table.Tr>
               ))}
@@ -1749,6 +1787,7 @@ function LoadedExportTab({
           </Table>
         </Table.ScrollContainer>
       )}
+      <ConfirmActionModal action={confirmAction} onClose={() => setConfirmAction(null)} />
     </Stack>
   );
 }
@@ -1976,6 +2015,7 @@ function ImportArriveQueueTab({
     api.warehouses.autoUnloadArrivedBookings.mutationOptions(),
   );
   const [openId, setOpenId] = useState<string | null>(null);
+  const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
   const [busyId, setBusyId] = useState<string | null>(null);
   const [assignmentsBySchedule, setAssignmentsBySchedule] = useState<
     Record<string, Record<string, ImportUnloadAssignmentDraft>>
@@ -2017,7 +2057,7 @@ function ImportArriveQueueTab({
       const alreadyUnloaded = r.unloadedCount === 0 && r.skippedCount > 0 && r.failedCount === 0;
       const firstReason = r.results.find((item) => item.reason)?.reason;
       const extra = [
-        r.skippedCount ? `${r.skippedCount} skipped` : '',
+        skippedSummary(r.skippedCount, r.results) ?? '',
         r.failedCount ? `${r.failedCount} failed` : '',
       ]
         .filter(Boolean)
@@ -2113,7 +2153,14 @@ function ImportArriveQueueTab({
                             leftSection={<Truck size={14} />}
                             loading={busyId === t.scheduleId}
                             disabled={fullyUnloaded || t.totalBookings === 0 || !readyBySchedule[t.scheduleId] || warehousesLoading}
-                            onClick={() => autoUnload(t)}
+                            onClick={() =>
+                              setConfirmAction({
+                                title: 'Auto unload train',
+                                message: `Unload all arrived bookings from train ${t.trainNumber ?? t.scheduleId.slice(0, 8)} into their assigned warehouse locations?`,
+                                confirmLabel: 'Unload train',
+                                run: () => autoUnload(t),
+                              })
+                            }
                           >
                             {fullyUnloaded ? 'Already Unloaded' : 'Auto Unload Arrived Bookings'}
                           </Button>
@@ -2152,6 +2199,7 @@ function ImportArriveQueueTab({
           </Table>
         </Table.ScrollContainer>
       )}
+      <ConfirmActionModal action={confirmAction} onClose={() => setConfirmAction(null)} />
     </Stack>
   );
 }
@@ -2172,6 +2220,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
   );
   const readyMutation = useMutation(api.warehouses.markReadyForPickup.mutationOptions());
   const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
   const [inspectId, setInspectId] = useState<string | null>(null);
   const [busyId, setBusyId] = useState<string | null>(null);
   const [viewItem, setViewItem] = useState<WarehouseInventoryItem | null>(null);
@@ -2203,7 +2252,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
       const r = await inspectMutation.mutateAsync({ inventoryIds: [...selected] });
       toast({
         title: `${r.inspectedCount} marked inspected`,
-        description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
+        description: skippedSummary(r.skippedCount, r.results),
       });
       setSelected(new Set());
       void qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
@@ -2307,7 +2356,14 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
             leftSection={<ClipboardCheck size={14} />}
             disabled={selected.size === 0}
             loading={inspectMutation.isPending}
-            onClick={markInspected}
+            onClick={() =>
+              setConfirmAction({
+                title: 'Mark inspected',
+                message: `Mark ${selected.size} selected item(s) as inspection PASSED? Passed import items become ready for pickup.`,
+                confirmLabel: `Mark ${selected.size} inspected`,
+                run: markInspected,
+              })
+            }
           >
             Mark Selected as Inspected
           </Button>
@@ -2323,7 +2379,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
           No unloaded import items. Items appear here after Auto Unload on an arrived train.
         </Text>
       ) : (
-        <Table.ScrollContainer minWidth={2000}>
+        <Table.ScrollContainer minWidth={1650}>
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
@@ -2384,7 +2440,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                     </Badge>
                   </Table.Td>
                   <Table.Td>
-                    <Badge color="indigo" variant="light" size="sm">{r.currentStatus}</Badge>
+                    <InventoryStatusBadge status={r.currentStatus as InventoryStatus} />
                   </Table.Td>
                   <Table.Td ta="right">
                     <Group gap="xs" justify="flex-end" wrap="nowrap">
@@ -2506,6 +2562,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
         bookingId={containerItemsItem?.booking?.id ?? null}
         bookingReference={containerItemsItem?.booking?.reference ?? null}
       />
+      <ConfirmActionModal action={confirmAction} onClose={() => setConfirmAction(null)} />
     </Stack>
   );
 }