feat(warehouse): Batch 6 — Export Loaded queue + Dispatch Queue with bulk dispatch

- GET /warehouse-inventory/loaded-export: EXPORT+LOADED items (route-derived direction)
- POST /warehouse-inventory/bulk-dispatch-export: reuses existing dispatch() transition
  (LOADED → DISPATCHED, capacity freed, movement/activity logged); skips non-LOADED/non-EXPORT
- Extracted shared exportInventoryByStatus() helper (readyToLoadExport now delegates to it)
- Frontend LoadedExportTab serves both Loaded (read-only) and Dispatch Queue (dispatchable)
  sub-tabs with Dispatch / Dispatch Selected / Dispatch All + per-row Dispatch
- Replaces "Loaded" and "Dispatch Queue — coming in the next batch" placeholders
- Train/schedule flow (DISPATCHED → IN_TRANSIT) unchanged

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -20,16 +20,24 @@ import { Info, PackageSearch, Truck } from 'lucide-react';
 
 import { useToast } from '@/hooks/use-toast';
 import {
+  useBulkDispatchExport,
   useBulkReceive,
   useEligibleBookings,
   useLoadPassedExport,
+  useLoadedExport,
   useReadyToLoadExport,
   useReceiveInventory,
   useWarehouseYards,
   useWarehouseZones,
   useWarehouses,
 } from '@/hooks/useWarehouses';
-import type { BulkReceiveResult, LoadPassedExportResult, ReadyToLoadRow, ReceiveInventoryPayload } from '@/types/warehouse';
+import type {
+  BulkDispatchResult,
+  BulkReceiveResult,
+  LoadPassedExportResult,
+  ReadyToLoadRow,
+  ReceiveInventoryPayload,
+} from '@/types/warehouse';
 import { BookingSelect } from './BookingSelect';
 import { extractErrorMessage, formatNumber } from './options';
 
@@ -458,6 +466,183 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
   );
 }
 
+/**
+ * Export items that are LOADED onto a wagon. Serves both the "Loaded" tab (read-only)
+ * and the "Dispatch Queue" tab (dispatchable=true → selection + Dispatch actions).
+ */
+function LoadedExportTab({
+  enabled,
+  dispatchable,
+  onChanged,
+}: {
+  enabled: boolean;
+  dispatchable: boolean;
+  onChanged?: () => void;
+}) {
+  const { toast } = useToast();
+  const { data: rows = [], isLoading } = useLoadedExport(enabled);
+  const bulkDispatch = useBulkDispatchExport();
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  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 dispatch = async (inventoryIds: string[]) => {
+    if (inventoryIds.length === 0) {
+      toast({ variant: 'destructive', title: 'Select at least one item' });
+      return;
+    }
+    try {
+      const res = (await bulkDispatch.mutateAsync(inventoryIds)) as { data: BulkDispatchResult };
+      const r = res.data;
+      toast({
+        title: `${r.dispatchedCount} dispatched`,
+        description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
+      });
+      setSelected(new Set());
+      onChanged?.();
+    } catch (error) {
+      toast({ variant: 'destructive', title: 'Dispatch failed', description: extractErrorMessage(error) });
+    }
+  };
+
+  return (
+    <Stack gap="sm" mt="sm">
+      <Group justify="space-between">
+        <Text size="sm" c="dimmed">
+          {dispatchable ? (
+            <>
+              Selected: <b>{selected.size}</b> / {rows.length} loaded
+            </>
+          ) : (
+            <>
+              <b>{rows.length}</b> item{rows.length !== 1 ? 's' : ''} loaded
+            </>
+          )}
+        </Text>
+        {dispatchable && (
+          <Group gap="xs">
+            <Button
+              size="compact-sm"
+              variant="default"
+              disabled={rows.length === 0}
+              loading={bulkDispatch.isPending}
+              onClick={() => dispatch(rows.map((r) => r.id))}
+            >
+              Dispatch All
+            </Button>
+            <Button
+              size="compact-sm"
+              color="green"
+              leftSection={<Truck size={14} />}
+              disabled={selected.size === 0}
+              loading={bulkDispatch.isPending}
+              onClick={() => dispatch([...selected])}
+            >
+              Dispatch Selected
+            </Button>
+          </Group>
+        )}
+      </Group>
+
+      {isLoading ? (
+        <Group justify="center" py="lg">
+          <Loader size="sm" />
+        </Group>
+      ) : rows.length === 0 ? (
+        <Text c="dimmed" ta="center" py="lg" size="sm">
+          No LOADED export items {dispatchable ? 'waiting to dispatch' : 'yet'}.
+        </Text>
+      ) : (
+        <Table.ScrollContainer minWidth={1600}>
+          <Table highlightOnHover verticalSpacing="xs" striped>
+            <Table.Thead>
+              <Table.Tr>
+                {dispatchable && (
+                  <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>Booking ID</Table.Th>
+                <Table.Th>Customer ID</Table.Th>
+                <Table.Th>Customer Name</Table.Th>
+                <Table.Th>Container #</Table.Th>
+                <Table.Th>Cargo Type</Table.Th>
+                <Table.Th>Weight</Table.Th>
+                <Table.Th>Route</Table.Th>
+                <Table.Th>Status</Table.Th>
+                {dispatchable && <Table.Th ta="right">Actions</Table.Th>}
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {rows.map((r: ReadyToLoadRow) => (
+                <Table.Tr key={r.id}>
+                  {dispatchable && (
+                    <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>
+                  <Table.Td>
+                    <Text size="xs" c="dimmed">{r.bookingId ? `${r.bookingId.slice(0, 8)}…` : '—'}</Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text size="xs" c="dimmed">{r.customerId ? `${r.customerId.slice(0, 8)}…` : '—'}</Text>
+                  </Table.Td>
+                  <Table.Td>{r.customerName ?? '—'}</Table.Td>
+                  <Table.Td>{r.containerNumber ?? '—'}</Table.Td>
+                  <Table.Td>{r.cargoType ?? '—'}</Table.Td>
+                  <Table.Td>{formatNumber(Number(r.weight))}</Table.Td>
+                  <Table.Td>
+                    {r.origin || r.destination ? `${r.origin ?? '?'} → ${r.destination ?? '?'}` : '—'}
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge color="blue" variant="light" size="sm">
+                      {r.status}
+                    </Badge>
+                  </Table.Td>
+                  {dispatchable && (
+                    <Table.Td ta="right">
+                      <Button
+                        size="compact-xs"
+                        variant="light"
+                        color="green"
+                        loading={bulkDispatch.isPending}
+                        onClick={() => dispatch([r.id])}
+                      >
+                        Dispatch
+                      </Button>
+                    </Table.Td>
+                  )}
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+      )}
+    </Stack>
+  );
+}
+
 /** New bulk Receive: Import / Export tabs with eligible PAID bookings. */
 function BulkReceiveModal({ opened, onClose, onReceived }: ReceiveInventoryModalProps) {
   const [location, setLocation] = useState<Location>({ warehouseId: '', yardId: '', zoneId: '' });
@@ -501,14 +686,10 @@ function BulkReceiveModal({ opened, onClose, onReceived }: ReceiveInventoryModal
                 <ReadyToLoadTab enabled={opened} onChanged={onReceived} />
               </Tabs.Panel>
               <Tabs.Panel value="loaded">
-                <Text c="dimmed" ta="center" py="lg" size="sm">
-                  Loaded — coming in the next batch.
-                </Text>
+                <LoadedExportTab enabled={opened} dispatchable={false} onChanged={onReceived} />
               </Tabs.Panel>
               <Tabs.Panel value="dispatch-queue">
-                <Text c="dimmed" ta="center" py="lg" size="sm">
-                  Dispatch Queue — coming in the next batch.
-                </Text>
+                <LoadedExportTab enabled={opened} dispatchable onChanged={onReceived} />
               </Tabs.Panel>
             </Tabs>
           </Tabs.Panel>