feat(warehouse): Batch 5 — Export Ready To Load queue + Auto Load Ready Items

- GET /warehouse-inventory/ready-to-load-export: EXPORT+PASSED+READY_FOR_LOADING items
  with booking details (customer, container, cargo type, route, inspection status)
- Direction filtering via deriveTradeDirection (route-based, not stored field)
- Frontend ReadyToLoadTab: full table (checkbox, booking ref/id, customer, container,
  cargo type, weight, route, inspection status, current status) with selection
- Auto Load Ready Items button reuses existing POST /load-passed-export endpoint
- Replaces "Ready To Load — coming in the next batch" placeholder in Export sub-tabs

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

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

@@ -23,12 +23,13 @@ import {
   useBulkReceive,
   useEligibleBookings,
   useLoadPassedExport,
+  useReadyToLoadExport,
   useReceiveInventory,
   useWarehouseYards,
   useWarehouseZones,
   useWarehouses,
 } from '@/hooks/useWarehouses';
-import type { BulkReceiveResult, LoadPassedExportResult, ReceiveInventoryPayload } from '@/types/warehouse';
+import type { BulkReceiveResult, LoadPassedExportResult, ReadyToLoadRow, ReceiveInventoryPayload } from '@/types/warehouse';
 import { BookingSelect } from './BookingSelect';
 import { extractErrorMessage, formatNumber } from './options';
 
@@ -327,6 +328,136 @@ function EligibleTab({
   );
 }
 
+/** Export items that passed inspection and are queued to be loaded onto a train. */
+function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?: () => void }) {
+  const { toast } = useToast();
+  const { data: rows = [], isLoading } = useReadyToLoadExport(enabled);
+  const loadPassed = useLoadPassedExport();
+  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 autoLoad = async () => {
+    try {
+      const res = (await loadPassed.mutateAsync(undefined)) as { data: LoadPassedExportResult };
+      const r = res.data;
+      toast({
+        title: `${r.loadedCount} items loaded`,
+        description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
+      });
+      setSelected(new Set());
+      onChanged?.();
+    } catch (error) {
+      toast({ variant: 'destructive', title: 'Load failed', description: extractErrorMessage(error) });
+    }
+  };
+
+  return (
+    <Stack gap="sm" mt="sm">
+      <Group justify="space-between">
+        <Text size="sm" c="dimmed">
+          <b>{rows.length}</b> item{rows.length !== 1 ? 's' : ''} ready to load
+        </Text>
+        <Button
+          size="compact-sm"
+          variant="filled"
+          color="teal"
+          leftSection={<Truck size={14} />}
+          loading={loadPassed.isPending}
+          disabled={rows.length === 0}
+          onClick={autoLoad}
+        >
+          Auto Load Ready Items
+        </Button>
+      </Group>
+
+      {isLoading ? (
+        <Group justify="center" py="lg">
+          <Loader size="sm" />
+        </Group>
+      ) : rows.length === 0 ? (
+        <Text c="dimmed" ta="center" py="lg" size="sm">
+          No EXPORT items with inspection PASSED waiting to be loaded.
+        </Text>
+      ) : (
+        <Table.ScrollContainer minWidth={1600}>
+          <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>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>Inspection</Table.Th>
+                <Table.Th>Status</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <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>
+                  <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="green" variant="light" size="sm">
+                      {r.inspectionStatus ?? '—'}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge color="teal" variant="light" size="sm">
+                      {r.status}
+                    </Badge>
+                  </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: '' });
@@ -367,9 +498,7 @@ function BulkReceiveModal({ opened, onClose, onReceived }: ReceiveInventoryModal
                 <EligibleTab direction="EXPORT" location={location} enabled={opened} onChanged={onReceived} />
               </Tabs.Panel>
               <Tabs.Panel value="ready-to-load">
-                <Text c="dimmed" ta="center" py="lg" size="sm">
-                  Ready To Load — coming in the next batch.
-                </Text>
+                <ReadyToLoadTab enabled={opened} onChanged={onReceived} />
               </Tabs.Panel>
               <Tabs.Panel value="loaded">
                 <Text c="dimmed" ta="center" py="lg" size="sm">