resolve conflict

apps/edr-freight-web/backoffice/src/components/fleet/FleetFormDialog.tsx

@@ -7,6 +7,7 @@ import {
   Group,
   Modal,
   NumberInput,
+  Radio,
   Select,
   MultiSelect,
   SimpleGrid,
@@ -293,6 +294,26 @@ const FleetFormDialog = ({
     // only by verification and never hand-edited.
     const isDisabled = Boolean(field.disabled || field.faydaLocked);
 
+    if (field.type === "radio") {
+      return (
+        <Radio.Group
+          key={field.name}
+          label={field.label}
+          value={value == null ? "" : String(value)}
+          onChange={(next) =>
+            setValues((current) => ({ ...current, [field.name]: next }))
+          }
+          error={error}
+        >
+          <Group gap="lg" mt={6}>
+            {(field.options ?? []).map((o) => (
+              <Radio key={o.value} value={o.value} label={o.label} disabled={isDisabled} />
+            ))}
+          </Group>
+        </Radio.Group>
+      );
+    }
+
     if (field.type === "select") {
       return (
         <Select

apps/edr-freight-web/backoffice/src/components/operations/TruckDetentionModal.tsx

@@ -0,0 +1,245 @@
+import {
+  Alert,
+  Badge,
+  Button,
+  Divider,
+  Group,
+  Loader,
+  Modal,
+  Paper,
+  Stack,
+  Table,
+  Text,
+} from '@mantine/core';
+import { DateTimePicker } from '@mantine/dates';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Receipt } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
+import { useToast } from '@/hooks/use-toast';
+import { lastMileService, type LastMileRecord } from '@/services/last-mile.service';
+
+interface TruckDetentionModalProps {
+  opened: boolean;
+  onClose: () => void;
+  record: LastMileRecord | null;
+}
+
+const money = (amount: number, currency: string) =>
+  `${Number(amount).toLocaleString()} ${currency === 'ETB' ? 'Birr (ETB)' : currency}`;
+
+function Stat({ label, value, strong }: { label: string; value: React.ReactNode; strong?: boolean }) {
+  return (
+    <Paper withBorder p="sm" radius="md" style={{ flex: 1, minWidth: 120 }}>
+      <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+        {label}
+      </Text>
+      <Text size={strong ? 'lg' : 'md'} fw={strong ? 800 : 600}>
+        {value}
+      </Text>
+    </Paper>
+  );
+}
+
+/**
+ * View/override the detention clock (arrival + delivery/return) for a last-mile
+ * leg, preview the per-truck-per-day charge, and generate the detention invoice.
+ */
+export function TruckDetentionModal({ opened, onClose, record }: TruckDetentionModalProps) {
+  const { toast } = useToast();
+  const qc = useQueryClient();
+  const id = record?.id ?? null;
+  const [arrived, setArrived] = useState<Date | null>(null);
+  const [delivered, setDelivered] = useState<Date | null>(null);
+
+  useEffect(() => {
+    setArrived(record?.arrivedAt ? new Date(record.arrivedAt) : null);
+    setDelivered(record?.deliveredAt ? new Date(record.deliveredAt) : null);
+  }, [record?.id, record?.arrivedAt, record?.deliveredAt, opened]);
+
+  const previewQuery = useQuery({
+    queryKey: ['truck-detention-preview', id],
+    queryFn: async () => (await lastMileService.truckDetentionPreview(id as string)).data,
+    enabled: opened && Boolean(id),
+  });
+  const preview = previewQuery.data;
+
+  const saveTimes = useMutation({
+    mutationFn: () =>
+      lastMileService.update(id as string, {
+        arrivedAt: arrived ? arrived.toISOString() : null,
+        deliveredAt: delivered ? delivered.toISOString() : null,
+      }),
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.LAST_MILE.ROOT });
+      void previewQuery.refetch();
+      toast({ title: 'Detention times saved' });
+    },
+    onError: () => toast({ title: 'Save failed', variant: 'destructive' }),
+  });
+
+  const generate = useMutation({
+    mutationFn: () => lastMileService.generateTruckDetentionInvoice(id as string),
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.LAST_MILE.ROOT });
+      toast({ title: 'Truck detention invoice generated' });
+      onClose();
+    },
+    onError: (e: unknown) => {
+      const description = (e as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      toast({ title: 'Detention invoice failed', description, variant: 'destructive' });
+    },
+  });
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      centered
+      size="lg"
+      title={
+        <Text fw={700}>
+          Truck detention{record?.booking?.reference ? ` · ${record.booking.reference}` : ''}
+        </Text>
+      }
+    >
+      <Stack gap="md">
+        <Group grow align="flex-start">
+          <DateTimePicker
+            label="Arrived at"
+            description="Detention clock start"
+            value={arrived}
+            onChange={(v) => setArrived(v ? new Date(v) : null)}
+            clearable
+          />
+          <DateTimePicker
+            label="Delivered / returned at"
+            description="Clock end (blank = still out)"
+            value={delivered}
+            onChange={(v) => setDelivered(v ? new Date(v) : null)}
+            clearable
+          />
+        </Group>
+        <Group justify="flex-end">
+          <Button variant="light" loading={saveTimes.isPending} onClick={() => saveTimes.mutate()}>
+            Save times
+          </Button>
+        </Group>
+
+        <Divider label="Detention preview" labelPosition="left" />
+
+        {previewQuery.isLoading ? (
+          <Group justify="center" py="md">
+            <Loader />
+          </Group>
+        ) : !preview ? (
+          <Alert color="gray" variant="light">
+            No preview available.
+          </Alert>
+        ) : !preview.ruleId ? (
+          <Alert color="orange" variant="light">
+            No active Truck Detention rule matches this booking. Create one under Warehouse → Fee rules
+            (rule type "Truck Detention Cost").
+          </Alert>
+        ) : (
+          <Stack gap="sm">
+            <Group grow>
+              <Stat label="Chargeable days" value={preview.chargeableDays} />
+              <Stat label="Trucks" value={preview.containerCount} />
+              <Stat label="Amount" value={money(preview.amount, preview.currency)} strong />
+            </Group>
+            {preview.endIsOpen && (
+              <Text size="xs" c="orange">
+                Still accruing — no delivery/return time yet. The amount grows until the vehicle is returned.
+              </Text>
+            )}
+            {preview.groups && preview.groups.length > 1 ? (
+              <Table withTableBorder withColumnBorders verticalSpacing="xs" fz="xs">
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>Truck type</Table.Th>
+                    <Table.Th>Trucks</Table.Th>
+                    <Table.Th>Days</Table.Th>
+                    <Table.Th ta="right">Rate / truck / day</Table.Th>
+                    <Table.Th ta="right">Amount</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {preview.groups.map((g, i) => (
+                    <Table.Tr key={i}>
+                      <Table.Td>
+                        {g.vehicleType ?? 'Unknown'}
+                        {!g.ruleId && (
+                          <Text span size="xs" c="red">
+                            {' '}· no rule
+                          </Text>
+                        )}
+                      </Table.Td>
+                      <Table.Td>{g.truckCount}</Table.Td>
+                      <Table.Td>{g.chargeableDays}</Table.Td>
+                      <Table.Td ta="right">{money(g.ratePerDay, preview.currency)}</Table.Td>
+                      <Table.Td ta="right">{money(g.amount, preview.currency)}</Table.Td>
+                    </Table.Tr>
+                  ))}
+                </Table.Tbody>
+              </Table>
+            ) : preview.tiers && preview.tiers.length > 0 ? (
+              <Table withTableBorder withColumnBorders verticalSpacing="xs" fz="xs">
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>From day</Table.Th>
+                    <Table.Th>To day</Table.Th>
+                    <Table.Th>Days</Table.Th>
+                    <Table.Th ta="right">Rate / truck / day</Table.Th>
+                    <Table.Th ta="right">Amount</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {preview.tiers.map((t, i) => (
+                    <Table.Tr key={i}>
+                      <Table.Td>{t.appliedFromDay}</Table.Td>
+                      <Table.Td>{t.appliedToDay}</Table.Td>
+                      <Table.Td>{t.days}</Table.Td>
+                      <Table.Td ta="right">{money(t.ratePerDay, preview.currency)}</Table.Td>
+                      <Table.Td ta="right">{money(t.amount, preview.currency)}</Table.Td>
+                    </Table.Tr>
+                  ))}
+                </Table.Tbody>
+              </Table>
+            ) : (
+              <Text size="sm" c="dimmed">
+                Flat {money(preview.ratePerDay, preview.currency)} per truck per day after the grace window.
+              </Text>
+            )}
+            <Group gap="xs">
+              <Badge variant="light" color="gray">
+                {preview.ruleName ?? 'Detention rule'}
+              </Badge>
+              {preview.billableUnits > 0 && (
+                <Text size="xs" c="dimmed">
+                  {preview.billableUnits} billable truck-day(s)
+                </Text>
+              )}
+            </Group>
+          </Stack>
+        )}
+
+        <Group justify="flex-end" mt="sm">
+          <Button variant="default" onClick={onClose}>
+            Close
+          </Button>
+          <Button
+            color="edr-green"
+            leftSection={<Receipt size={16} />}
+            disabled={!preview || preview.amount <= 0}
+            loading={generate.isPending}
+            onClick={() => generate.mutate()}
+          >
+            Generate invoice
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,211 @@
+import {
+  Alert,
+  Badge,
+  Button,
+  Checkbox,
+  Group,
+  Loader,
+  Modal,
+  Select,
+  Stack,
+  Table,
+  Tabs,
+  Text,
+} from '@mantine/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { FileText } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import { useToast } from '@/hooks/use-toast';
+import {
+  warehouseService,
+  type ContainerItem,
+  type ContainerItemStage,
+} from '@/services/warehouse.service';
+import { extractErrorMessage } from './options';
+import { openPdfBlob } from './pdf';
+
+interface ContainerItemsModalProps {
+  opened: boolean;
+  onClose: () => void;
+  bookingId: string | null;
+  bookingReference?: string | null;
+}
+
+const STAGE_TABS: Array<{ value: string; label: string }> = [
+  { value: 'ALL', label: 'All' },
+  { value: 'RECEIVED', label: 'Received' },
+  { value: 'GRN', label: "GRN'd" },
+  { value: 'LOADED', label: 'Loaded' },
+  { value: 'LEFT', label: 'Left' },
+  { value: 'DELIVERED', label: 'Delivered' },
+];
+
+const STAGE_COLOR: Record<ContainerItemStage, string> = {
+  PENDING: 'gray',
+  RECEIVED: 'blue',
+  GRN: 'teal',
+  LOADED: 'grape',
+  LEFT: 'orange',
+  DELIVERED: 'green',
+};
+
+/** Loadable = not yet on a truck (before LOADED). */
+const isLoadable = (i: ContainerItem) => i.stage === 'PENDING' || i.stage === 'RECEIVED' || i.stage === 'GRN';
+
+export function ContainerItemsModal({ opened, onClose, bookingId, bookingReference }: ContainerItemsModalProps) {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [tab, setTab] = useState('ALL');
+  const [selected, setSelected] = useState<string[]>([]);
+  const [truckId, setTruckId] = useState<string | null>(null);
+
+  const itemsKey = ['container-items', bookingId];
+  const { data: items = [], isLoading } = useQuery({
+    queryKey: itemsKey,
+    queryFn: () => warehouseService.getContainerItems(bookingId as string),
+    enabled: opened && Boolean(bookingId),
+  });
+  const { data: trucks = [] } = useQuery({
+    queryKey: ['ci-trucks', bookingId],
+    queryFn: () => warehouseService.getCustomerTrucks(bookingId as string),
+    enabled: opened && Boolean(bookingId),
+  });
+
+  const visible = useMemo(
+    () => (tab === 'ALL' ? items : items.filter((i) => i.stage === tab)),
+    [items, tab],
+  );
+  const truckOptions = trucks
+    .filter((t) => !(t as { departedAt?: string }).departedAt)
+    .map((t) => ({ value: t.id, label: `${t.plateNumber} · ${t.driverName}` }));
+
+  const loadMutation = useMutation({
+    mutationFn: () => warehouseService.loadTruck(bookingId as string, truckId as string, selected),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: itemsKey });
+      setSelected([]);
+      toast({ title: 'Containers loaded onto truck' });
+    },
+    onError: (e) => toast({ variant: 'destructive', title: 'Load failed', description: extractErrorMessage(e) }),
+  });
+
+  const openExitPaper = async (assignmentId: string, plate: string) => {
+    try {
+      const res = await warehouseService.downloadTruckExitPaper(assignmentId);
+      openPdfBlob(res.data, `exit-${plate}.pdf`);
+    } catch (e) {
+      toast({ variant: 'destructive', title: 'Exit paper not ready', description: extractErrorMessage(e) });
+    }
+  };
+
+  const toggle = (n: string) => setSelected((s) => (s.includes(n) ? s.filter((x) => x !== n) : [...s, n]));
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      centered
+      size="90%"
+      title={<Text fw={700}>Container / bulk items {bookingReference ? `· ${bookingReference}` : ''}</Text>}
+    >
+      <Tabs value={tab} onChange={(v) => setTab(v ?? 'ALL')} mb="sm">
+        <Tabs.List>
+          {STAGE_TABS.map((t) => {
+            const count = t.value === 'ALL' ? items.length : items.filter((i) => i.stage === t.value).length;
+            return (
+              <Tabs.Tab key={t.value} value={t.value} rightSection={<Badge size="xs" variant="light">{count}</Badge>}>
+                {t.label}
+              </Tabs.Tab>
+            );
+          })}
+        </Tabs.List>
+      </Tabs>
+
+      {isLoading ? (
+        <Group justify="center" py="lg">
+          <Loader />
+        </Group>
+      ) : items.length === 0 ? (
+        <Alert color="gray" variant="light">No container or bulk items on this booking.</Alert>
+      ) : (
+        <Stack gap="sm">
+          <Table.ScrollContainer minWidth={900}>
+            <Table striped highlightOnHover verticalSpacing="xs">
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th />
+                  <Table.Th>Container</Table.Th>
+                  <Table.Th>Goods</Table.Th>
+                  <Table.Th>Stage</Table.Th>
+                  <Table.Th>Truck</Table.Th>
+                  <Table.Th>Booking</Table.Th>
+                  <Table.Th>Contract</Table.Th>
+                  <Table.Th>Last mile</Table.Th>
+                  <Table.Th ta="right">Actions</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {visible.map((i) => (
+                  <Table.Tr key={i.containerNumber}>
+                    <Table.Td>
+                      <Checkbox
+                        checked={selected.includes(i.containerNumber)}
+                        onChange={() => toggle(i.containerNumber)}
+                        disabled={!isLoadable(i)}
+                      />
+                    </Table.Td>
+                    <Table.Td><Text fw={600}>{i.containerNumber}</Text></Table.Td>
+                    <Table.Td>{i.goods ?? '—'}</Table.Td>
+                    <Table.Td><Badge color={STAGE_COLOR[i.stage]} variant="light">{i.stage}</Badge></Table.Td>
+                    <Table.Td>{i.truckPlate ?? '—'}</Table.Td>
+                    <Table.Td>{i.bookingReference ?? '—'}</Table.Td>
+                    <Table.Td>{i.contractId ? <Badge variant="outline" color="indigo">Contract</Badge> : '—'}</Table.Td>
+                    <Table.Td>{i.hasLastMile ? <Badge variant="light" color="cyan">EDR</Badge> : <Badge variant="light" color="gray">Self-haul</Badge>}</Table.Td>
+                    <Table.Td ta="right">
+                      {i.truckAssignmentId && (
+                        <Button
+                          size="compact-xs"
+                          variant="light"
+                          color="orange"
+                          leftSection={<FileText size={13} />}
+                          onClick={() => openExitPaper(i.truckAssignmentId as string, i.truckPlate ?? '')}
+                        >
+                          Exit Paper
+                        </Button>
+                      )}
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </Table.ScrollContainer>
+
+          {/* Multiselect → load onto a truck */}
+          <Group justify="space-between" align="flex-end">
+            <Text size="sm" c="dimmed">{selected.length} selected</Text>
+            <Group gap="sm" align="flex-end">
+              <Select
+                label="Load onto truck"
+                placeholder={truckOptions.length ? 'Select truck' : 'No arrived truck'}
+                data={truckOptions}
+                value={truckId}
+                onChange={setTruckId}
+                disabled={truckOptions.length === 0}
+                w={260}
+              />
+              <Button
+                color="edr-green"
+                disabled={selected.length === 0 || !truckId}
+                loading={loadMutation.isPending}
+                onClick={() => loadMutation.mutate()}
+              >
+                Load selected
+              </Button>
+            </Group>
+          </Group>
+        </Stack>
+      )}
+    </Modal>
+  );
+}

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

@@ -28,6 +28,8 @@ interface FeePreviewModalProps {
 const LABELS: Record<string, { label: string; color: string }> = {
   DEMURRAGE_FEE: { label: 'Demurrage', color: 'orange' },
   STORAGE_FEE: { label: 'Storage', color: 'teal' },
+  DOUBLE_HANDLING_FEE: { label: 'Double Handling', color: 'grape' },
+  TRUCK_DETENTION_FEE: { label: 'Truck Detention Cost', color: 'blue' },
 };
 
 function fmtDate(iso: string | null) {

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

@@ -0,0 +1,307 @@
+import {
+  Alert,
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Table,
+  Text,
+} from '@mantine/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ChevronDown, ChevronRight, TrainFront } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import { useToast } from '@/hooks/use-toast';
+import {
+  warehouseService,
+  type LoadableTrain,
+  type TrainLoadableItem,
+} from '@/services/warehouse.service';
+import { extractErrorMessage } from './options';
+
+const STAGE_COLOR: Record<string, string> = {
+  RECEIVED: 'blue',
+  STORED: 'gray',
+  RESERVED: 'grape',
+  READY_FOR_LOADING: 'teal',
+  LOADED: 'green',
+};
+
+const weight = (w: number | null) => (w == null ? '—' : `${Number(w).toLocaleString()} kg`);
+
+interface BookingGroup {
+  bookingId: string | null;
+  bookingReference: string | null;
+  customerName: string | null;
+  items: TrainLoadableItem[];
+}
+
+function groupByBooking(items: TrainLoadableItem[]): BookingGroup[] {
+  const map = new Map<string, BookingGroup>();
+  for (const i of items) {
+    const key = i.bookingId ?? i.bookingReference ?? 'unknown';
+    let g = map.get(key);
+    if (!g) {
+      g = { bookingId: i.bookingId, bookingReference: i.bookingReference, customerName: i.customerName, items: [] };
+      map.set(key, g);
+    }
+    g.items.push(i);
+  }
+  return [...map.values()];
+}
+
+/**
+ * Load to Train — a datatable of allocated EXPORT trains. Expand a train to see
+ * the bookings allocated to it; expand a booking to see its containers/cargoes
+ * and load the ready ones onto their wagons. Only READY_FOR_LOADING items with an
+ * allocated wagon are selectable.
+ */
+export function LoadToTrainPanel() {
+  const { data: trains = [], isLoading } = useQuery({
+    queryKey: ['loadable-trains'],
+    queryFn: () => warehouseService.getLoadableTrains(),
+  });
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const toggle = (id: string) =>
+    setExpanded((s) => {
+      const next = new Set(s);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+
+  if (isLoading) {
+    return (
+      <Group justify="center" py="lg">
+        <Loader />
+      </Group>
+    );
+  }
+  if (trains.length === 0) {
+    return (
+      <Alert color="gray" variant="light">
+        No allocated EXPORT trains awaiting loading. Trains appear here after train and wagon allocation.
+      </Alert>
+    );
+  }
+
+  return (
+    <Table.ScrollContainer minWidth={720}>
+      <Table verticalSpacing="sm">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th w={40} />
+            <Table.Th>Train</Table.Th>
+            <Table.Th>Route</Table.Th>
+            <Table.Th ta="center">Ready</Table.Th>
+            <Table.Th ta="center">Loaded</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {trains.map((t) => (
+            <TrainRow
+              key={t.scheduleId}
+              train={t}
+              expanded={expanded.has(t.scheduleId)}
+              onToggle={() => toggle(t.scheduleId)}
+            />
+          ))}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
+  );
+}
+
+function TrainRow({ train, expanded, onToggle }: { train: LoadableTrain; expanded: boolean; onToggle: () => void }) {
+  const { data: items = [], isLoading } = useQuery({
+    queryKey: ['train-loadable-items', train.scheduleId],
+    queryFn: () => warehouseService.getTrainLoadableItems(train.scheduleId),
+    enabled: expanded,
+  });
+  const bookings = useMemo(() => groupByBooking(items), [items]);
+  const route =
+    train.origin || train.destination ? `${train.origin ?? '?'} → ${train.destination ?? '?'}` : '—';
+
+  return (
+    <>
+      <Table.Tr style={{ cursor: 'pointer' }} onClick={onToggle}>
+        <Table.Td>{expanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}</Table.Td>
+        <Table.Td>
+          <Group gap="xs" wrap="nowrap">
+            <TrainFront size={16} />
+            <Text fw={600}>{train.trainNumber ?? train.scheduleId.slice(0, 8)}</Text>
+          </Group>
+        </Table.Td>
+        <Table.Td>{route}</Table.Td>
+        <Table.Td ta="center">
+          <Badge color="blue" variant="light">
+            {train.readyCount}
+          </Badge>
+        </Table.Td>
+        <Table.Td ta="center">
+          <Badge color="green" variant="light">
+            {train.loadedCount}
+          </Badge>
+        </Table.Td>
+      </Table.Tr>
+      {expanded && (
+        <Table.Tr>
+          <Table.Td colSpan={5} p={0}>
+            <Box p="sm" bg="var(--mantine-color-gray-0)">
+              {isLoading ? (
+                <Group justify="center" py="md">
+                  <Loader size="sm" />
+                </Group>
+              ) : bookings.length === 0 ? (
+                <Alert color="gray" variant="light">
+                  No arrived containers/cargoes allocated to this train yet.
+                </Alert>
+              ) : (
+                <Stack gap="xs">
+                  {bookings.map((b) => (
+                    <BookingBlock key={b.bookingId ?? b.bookingReference} scheduleId={train.scheduleId} booking={b} />
+                  ))}
+                </Stack>
+              )}
+            </Box>
+          </Table.Td>
+        </Table.Tr>
+      )}
+    </>
+  );
+}
+
+function BookingBlock({ scheduleId, booking }: { scheduleId: string; booking: BookingGroup }) {
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const loadedCount = booking.items.filter((i) => i.status === 'LOADED').length;
+  const selectable = booking.items.filter((i) => i.loadable);
+  const allSelected = selectable.length > 0 && selectable.every((i) => selected.includes(i.id));
+  const toggleItem = (id: string) =>
+    setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]));
+  const toggleAll = () =>
+    setSelected((s) =>
+      allSelected ? s.filter((id) => !selectable.some((i) => i.id === id)) : selectable.map((i) => i.id),
+    );
+
+  const loadMutation = useMutation({
+    mutationFn: () => warehouseService.loadItemsOntoTrain(scheduleId, selected),
+    onSuccess: (r) => {
+      queryClient.invalidateQueries({ queryKey: ['train-loadable-items', scheduleId] });
+      queryClient.invalidateQueries({ queryKey: ['loadable-trains'] });
+      setSelected([]);
+      toast({ title: 'Loaded onto train', description: `Loaded ${r.loadedCount}; skipped ${r.skippedCount}.` });
+    },
+    onError: (e) =>
+      toast({ variant: 'destructive', title: 'Load failed', description: extractErrorMessage(e) }),
+  });
+
+  return (
+    <Paper withBorder radius="sm" p="xs">
+      <Group justify="space-between" style={{ cursor: 'pointer' }} onClick={() => setOpen((o) => !o)} wrap="nowrap">
+        <Group gap="xs" wrap="nowrap">
+          {open ? <ChevronDown size={15} /> : <ChevronRight size={15} />}
+          <Text fw={600}>{booking.bookingReference ?? booking.bookingId?.slice(0, 8) ?? '—'}</Text>
+          <Text size="sm" c="dimmed">
+            {booking.customerName ?? '—'}
+          </Text>
+        </Group>
+        <Group gap="xs" wrap="nowrap">
+          <Badge variant="light" color="blue">
+            {booking.items.length} item(s)
+          </Badge>
+          {loadedCount > 0 && (
+            <Badge variant="light" color="green">
+              {loadedCount} loaded
+            </Badge>
+          )}
+        </Group>
+      </Group>
+
+      {open && (
+       <>
+        <Table striped highlightOnHover verticalSpacing="xs" mt="xs">
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th w={36}>
+                <Checkbox
+                  checked={allSelected}
+                  indeterminate={!allSelected && selected.length > 0}
+                  onChange={toggleAll}
+                  disabled={selectable.length === 0}
+                />
+              </Table.Th>
+              <Table.Th>Container / Cargo</Table.Th>
+              <Table.Th>Goods</Table.Th>
+              <Table.Th>Weight</Table.Th>
+              <Table.Th>Stage</Table.Th>
+              <Table.Th>Wagon</Table.Th>
+              <Table.Th>Inspection</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {booking.items.map((i) => (
+              <Table.Tr key={i.id}>
+                <Table.Td>
+                  <Checkbox checked={selected.includes(i.id)} onChange={() => toggleItem(i.id)} disabled={!i.loadable} />
+                </Table.Td>
+                <Table.Td>
+                  <Text fw={600}>{i.containerNumber ?? i.cargoType ?? '—'}</Text>
+                </Table.Td>
+                <Table.Td>{i.cargoType ?? '—'}</Table.Td>
+                <Table.Td>{weight(i.weight)}</Table.Td>
+                <Table.Td>
+                  <Badge color={STAGE_COLOR[i.status] ?? 'gray'} variant="light">
+                    {i.status.replace(/_/g, ' ')}
+                  </Badge>
+                </Table.Td>
+                <Table.Td>
+                  {i.wagonNumber ? (
+                    <Badge variant="outline" color="indigo">
+                      {i.wagonNumber}
+                    </Badge>
+                  ) : (
+                    <Text size="xs" c="red">
+                      Not allocated
+                    </Text>
+                  )}
+                </Table.Td>
+                <Table.Td>
+                  {i.inspectionStatus ? (
+                    <Badge size="xs" variant="light" color={i.inspectionStatus === 'PASSED' ? 'green' : 'orange'}>
+                      {i.inspectionStatus}
+                    </Badge>
+                  ) : (
+                    '—'
+                  )}
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+        <Group justify="space-between" align="center" mt="xs">
+          <Text size="xs" c="dimmed">
+            {selected.length} selected · only READY_FOR_LOADING items with a wagon can be loaded
+          </Text>
+          <Button
+            size="compact-sm"
+            color="edr-green"
+            leftSection={<TrainFront size={14} />}
+            disabled={selected.length === 0}
+            loading={loadMutation.isPending}
+            onClick={() => loadMutation.mutate()}
+          >
+            Load {selected.length || ''} onto train
+          </Button>
+        </Group>
+       </>
+      )}
+    </Paper>
+  );
+}

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

@@ -62,6 +62,7 @@ import type {
 import { BookingSelect } from './BookingSelect';
 import { DeliverInventoryModal } from './DeliverInventoryModal';
 import { TruckDispatchModal } from './TruckDispatchModal';
+import { ContainerItemsModal } from './ContainerItemsModal';
 import { FeePreviewModal } from './FeePreviewModal';
 import { InspectionReportModal } from './InspectionReportModal';
 import { InventoryDetailModal } from './InventoryDetailModal';
@@ -645,9 +646,15 @@ function TruckEntranceFields({
 function LocationSelects({
   value,
   onChange,
+  allowedYardTypes,
+  allowedZoneTypes,
 }: {
   value: Location;
   onChange: (next: Location) => void;
+  /** When non-empty, only yards of these types are offered (matched to freight). */
+  allowedYardTypes?: string[];
+  /** When non-empty, only zones of these types are offered. */
+  allowedZoneTypes?: string[];
 }) {
   const warehousesQuery = useQuery(
     api.warehouses.list.queryOptions({ input: { filter: { status: 'ACTIVE' } } }),
@@ -673,15 +680,17 @@ function LocationSelects({
     () =>
       (yardsQuery.data ?? [])
         .filter((y) => y.status === 'ACTIVE')
+        .filter((y) => !allowedYardTypes?.length || allowedYardTypes.includes((y as { type?: string }).type ?? ''))
         .map((y) => ({ value: y.id, label: `${y.name} (${y.code})` })),
-    [yardsQuery.data],
+    [yardsQuery.data, allowedYardTypes],
   );
   const zoneOptions = useMemo(
     () =>
       (zonesQuery.data ?? [])
         .filter((z) => z.status === 'ACTIVE')
+        .filter((z) => !allowedZoneTypes?.length || allowedZoneTypes.includes((z as { type?: string }).type ?? ''))
         .map((z) => ({ value: z.id, label: `${z.name} (${z.code})` })),
-    [zonesQuery.data],
+    [zonesQuery.data, allowedZoneTypes],
   );
 
   return (
@@ -1759,6 +1768,29 @@ const importLocationTypesForFreight = (freightType: string | null | undefined) =
 const isImportContainerFreight = (freightType: string | null | undefined) =>
   (freightType ?? '').toUpperCase() === 'CONTAINER';
 
+/**
+ * Yard/zone types valid for the freight being received — used to filter the receive
+ * location pickers so the yard list matches the cargo. Container freight → container
+ * yards only; bulk / break-bulk → bulk, general-cargo, hazardous, or cold-storage.
+ * Union across the given freight types; empty input → no restriction (show all).
+ */
+const yardZoneTypesForFreights = (freightTypes: Array<string | null | undefined>) => {
+  const yardTypes = new Set<string>();
+  const zoneTypes = new Set<string>();
+  for (const freightType of freightTypes) {
+    const normalized = (freightType ?? '').toUpperCase();
+    if (!normalized) continue;
+    if (normalized === 'CONTAINER') {
+      yardTypes.add('CONTAINER_YARD');
+      zoneTypes.add('CONTAINER_ZONE');
+    } else {
+      ['BULK_YARD', 'GENERAL_CARGO_YARD', 'HAZARDOUS_YARD', 'COLD_STORAGE_YARD'].forEach((t) => yardTypes.add(t));
+      ['BULK_ZONE', 'GENERAL_CARGO_ZONE', 'HAZARDOUS_ZONE', 'COLD_STORAGE_ZONE'].forEach((t) => zoneTypes.add(t));
+    }
+  }
+  return { yardTypes: [...yardTypes], zoneTypes: [...zoneTypes] };
+};
+
 const isImportUnloadPending = (item: ImportTrainItem) =>
   !item.currentStatus || item.currentStatus === 'RECEIVED';
 
@@ -2161,6 +2193,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
   const [releaseItem, setReleaseItem] = useState<WarehouseInventoryItem | null>(null);
   const [deliverItem, setDeliverItem] = useState<WarehouseInventoryItem | null>(null);
   const [loadTruckItem, setLoadTruckItem] = useState<WarehouseInventoryItem | null>(null);
+  const [containerItemsItem, setContainerItemsItem] = useState<WarehouseInventoryItem | null>(null);
 
   const allSelected = rows.length > 0 && selected.size === rows.length;
   const someSelected = selected.size > 0 && !allSelected;
@@ -2376,7 +2409,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                   <Table.Td ta="right">
                     <Group gap="xs" justify="flex-end" wrap="nowrap">
                       <Tooltip label="View details" withArrow>
-                        <ActionIcon variant="subtle" color="gray" onClick={() => setViewItem(toInventoryItem(r))}>
+                        <ActionIcon variant="subtle" color="gray" onClick={() => setContainerItemsItem(toInventoryItem(r))}>
                           <Eye size={16} />
                         </ActionIcon>
                       </Tooltip>
@@ -2500,6 +2533,12 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
         bookingId={loadTruckItem?.booking?.id ?? null}
         bookingReference={loadTruckItem?.booking?.reference ?? null}
       />
+      <ContainerItemsModal
+        opened={Boolean(containerItemsItem)}
+        onClose={() => setContainerItemsItem(null)}
+        bookingId={containerItemsItem?.booking?.id ?? null}
+        bookingReference={containerItemsItem?.booking?.reference ?? null}
+      />
     </Stack>
   );
 }
@@ -2880,6 +2919,24 @@ export function WarehouseFlowWorkbench({
   );
   const activeDirection = direction === 'BOTH' ? tab : direction;
 
+  // Match the yard/zone list to the freight being received (container → container
+  // yards, etc). Same query key as the export tab, so React Query dedupes it.
+  const { data: eligibleForLocation = [] } = useQuery(
+    api.warehouses.eligibleBookings.queryOptions({
+      input: { direction: activeDirection },
+      enabled: enabled && activeDirection === 'EXPORT',
+    }),
+  );
+  const { yardTypes: allowedYardTypes, zoneTypes: allowedZoneTypes } = useMemo(
+    () =>
+      yardZoneTypesForFreights(
+        eligibleForLocation
+          .filter((r) => r.direction === activeDirection)
+          .map((r) => r.freightType),
+      ),
+    [eligibleForLocation, activeDirection],
+  );
+
   useEffect(() => {
     if (enabled) setLocation({ warehouseId: '', yardId: '', zoneId: '' });
   }, [enabled, direction]);
@@ -2887,7 +2944,12 @@ export function WarehouseFlowWorkbench({
   return (
     <Stack gap="md">
       {activeDirection === 'EXPORT' && (
-        <LocationSelects value={location} onChange={setLocation} />
+        <LocationSelects
+          value={location}
+          onChange={setLocation}
+          allowedYardTypes={allowedYardTypes}
+          allowedZoneTypes={allowedZoneTypes}
+        />
       )}
 
       {direction === 'BOTH' ? (