From 9eb10bb4ce9bdf917e1e317c6d2d15c1152b2697 Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Fri, 10 Jul 2026 07:53:13 +0000
Subject: [PATCH 01/16] feat(warehouses): auto-load targets a selected train,
 never loads trainless

"Auto Load Ready Items" now opens a train picker (pre-dispatch trains with
these bookings assigned, via the existing loadable-trains flow). No train
available -> no auto-loading, with a clear notice. Loading goes through the
existing per-wagon load path, so items without an allocated wagon are skipped
with a reason.

The train association is stored on the existing warehouse_loadings table
(no new table needed): new train_schedule_id column + a note recording train
number, origin -> destination, and departure time; wagon_id becomes nullable.
The trainless load-passed-export endpoint, its frontend wiring, and the unused
useLoadPassedExport hook are removed.

Migration 2100000000000 (idempotent) also applied to the dev database.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 ...000000-WarehouseLoadingTrainAssociation.ts | 35 ++++++++
 .../warehouses/dto/load-inventory.dto.ts      |  5 ++
 .../entities/warehouse-loading.entity.ts      | 14 ++-
 .../warehouse-inventory.controller.ts         |  5 --
 .../warehouses/warehouse-inventory.service.ts | 81 +++++++----------
 .../warehouses/ReceiveInventoryModal.tsx      | 89 +++++++++++++++++--
 .../backoffice/src/hooks/useWarehouses.ts     |  2 -
 .../backoffice/src/services/api.ts            |  9 --
 .../src/services/warehouse.service.ts         |  3 -
 9 files changed, 166 insertions(+), 77 deletions(-)
 create mode 100644 apps/edr-freight-api/src/migrations/2100000000000-WarehouseLoadingTrainAssociation.ts

diff --git a/apps/edr-freight-api/src/migrations/2100000000000-WarehouseLoadingTrainAssociation.ts b/apps/edr-freight-api/src/migrations/2100000000000-WarehouseLoadingTrainAssociation.ts
new file mode 100644
index 000000000..26afdf82a
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/2100000000000-WarehouseLoadingTrainAssociation.ts
@@ -0,0 +1,35 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+/**
+ * Auto-load onto a selected train: a warehouse_loadings row now records WHICH
+ * train the item was loaded onto (train_schedule_id), and wagon_id becomes
+ * nullable because a schedule-level load may not resolve to a single wagon.
+ */
+export class WarehouseLoadingTrainAssociation2100000000000 implements MigrationInterface {
+  name = 'WarehouseLoadingTrainAssociation2100000000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.warehouse_loadings
+        ADD COLUMN IF NOT EXISTS train_schedule_id UUID NULL
+    `);
+    await queryRunner.query(`
+      ALTER TABLE freight.warehouse_loadings
+        ALTER COLUMN wagon_id DROP NOT NULL
+    `);
+    await queryRunner.query(`
+      CREATE INDEX IF NOT EXISTS idx_warehouse_loadings_train_schedule
+        ON freight.warehouse_loadings(train_schedule_id)
+        WHERE train_schedule_id IS NOT NULL
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP INDEX IF EXISTS freight.idx_warehouse_loadings_train_schedule`);
+    await queryRunner.query(`
+      ALTER TABLE freight.warehouse_loadings DROP COLUMN IF EXISTS train_schedule_id
+    `);
+    // wagon_id stays nullable on revert: restoring NOT NULL would fail on rows
+    // recorded without a wagon and re-introduce the outage this fixes.
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/warehouses/dto/load-inventory.dto.ts b/apps/edr-freight-api/src/modules/warehouses/dto/load-inventory.dto.ts
index c81550cd0..3c9c6c85f 100644
--- a/apps/edr-freight-api/src/modules/warehouses/dto/load-inventory.dto.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/dto/load-inventory.dto.ts
@@ -6,6 +6,11 @@ export class LoadInventoryDto {
   @IsUUID()
   wagonId!: string;
 
+  @ApiPropertyOptional({ format: 'uuid', description: 'Train schedule this load belongs to (recorded on the loading).' })
+  @IsOptional()
+  @IsUUID()
+  trainScheduleId?: string;
+
   @ApiPropertyOptional({ description: 'Weight loaded onto the wagon (t)' })
   @IsOptional()
   @IsNumber()
diff --git a/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-loading.entity.ts b/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-loading.entity.ts
index 5f6952aec..1698b8a5e 100644
--- a/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-loading.entity.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-loading.entity.ts
@@ -28,9 +28,17 @@ export class WarehouseLoading extends BaseEntity {
   @JoinColumn({ name: 'booking_id' })
   booking?: Booking | null;
 
-  /** Physical wagon the item was loaded onto. References freight.wagons (read-only link). */
-  @Column({ name: 'wagon_id', type: 'uuid' })
-  wagonId!: string;
+  /**
+   * Physical wagon the item was loaded onto. References freight.wagons
+   * (read-only link). Nullable: a schedule-level auto-load may not resolve to
+   * one wagon — the train association then lives in trainScheduleId.
+   */
+  @Column({ name: 'wagon_id', type: 'uuid', nullable: true })
+  wagonId?: string | null;
+
+  /** Train schedule the item was loaded onto (read-only link to scheduling). */
+  @Column({ name: 'train_schedule_id', type: 'uuid', nullable: true })
+  trainScheduleId?: string | null;
 
   @Column({ name: 'loaded_at', type: 'timestamptz' })
   loadedAt!: Date;
diff --git a/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.controller.ts b/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.controller.ts
index 242cecc76..070a267a4 100644
--- a/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.controller.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.controller.ts
@@ -77,11 +77,6 @@ export class WarehouseInventoryController {
     return this.inventoryService.bulkReceive(dto);
   }
 
-  @Post('load-passed-export')
-  @ApiOperation({ summary: 'Bulk-load all EXPORT inventory that passed inspection (READY_FOR_LOADING)' })
-  loadPassedExport(@Body('performedBy') performedBy?: string) {
-    return this.inventoryService.loadPassedExport(performedBy);
-  }
 
   @Get('ready-to-load-export')
   @ApiOperation({ summary: 'EXPORT inventory that passed inspection and is READY_FOR_LOADING' })
diff --git a/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts b/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts
index 92617db6d..8f7a71fc1 100644
--- a/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts
@@ -243,11 +243,6 @@ export interface BulkReceiveResult {
   results: { bookingId: string; status: string; inventoryId?: string; grnNumber?: string; reason?: string }[];
 }
 
-export interface LoadPassedExportResult {
-  loadedCount: number;
-  skippedCount: number;
-  results: { inventoryId: string; status: string; reason?: string }[];
-}
 
 export interface BulkInspectResult {
   inspectedCount: number;
@@ -1098,46 +1093,6 @@ export class WarehouseInventoryService {
     return result;
   }
 
-  /** Bulk-load all EXPORT inventory that passed inspection and is READY_FOR_LOADING. */
-  async loadPassedExport(performedBy?: string): Promise<LoadPassedExportResult> {
-    const ready = await this.inventoryRepository.findAll({ where: { status: 'READY_FOR_LOADING' } });
-    const result: LoadPassedExportResult = { loadedCount: 0, skippedCount: 0, results: [] };
-
-    for (const item of ready) {
-      const skip = (reason: string) => {
-        result.skippedCount += 1;
-        result.results.push({ inventoryId: item.id, status: 'SKIPPED', reason });
-      };
-
-      if (item.inspectionStatus !== 'PASSED') { skip('Inspection not PASSED'); continue; }
-      const direction = item.bookingId ? await this.getBookingDirection(item.bookingId) : null;
-      if (direction !== 'EXPORT') { skip('Not an EXPORT item'); continue; }
-      const bookingStatus = item.bookingId ? await this.getBookingStatus(item.bookingId) : null;
-      if (bookingStatus !== 'PAID') { skip('Booking not PAID'); continue; }
-
-      await this.dataSource.transaction(async (manager) => {
-        await manager.getRepository(WarehouseInventory).update(item.id, {
-          status: 'LOADED',
-          loadedAt: new Date(),
-        });
-        await this.activityLog.record(
-          {
-            activityType: 'INVENTORY_LOADED',
-            inventoryId: item.id,
-            warehouseId: item.warehouseId,
-            description: 'Bulk loaded (passed export)',
-            performedBy,
-          },
-          manager,
-        );
-      });
-
-      result.loadedCount += 1;
-      result.results.push({ inventoryId: item.id, status: 'LOADED' });
-    }
-
-    return result;
-  }
 
   /** EXPORT inventory rows at a given status (route-derived direction), with booking detail. */
   private async exportInventoryByStatus(
@@ -1319,6 +1274,29 @@ export class WarehouseInventoryService {
     performedBy?: string,
   ): Promise<TrainLoadResult> {
     const result: TrainLoadResult = { loadedCount: 0, skippedCount: 0, results: [] };
+    const [schedule]: Array<{
+      trainNumber: string | null;
+      origin: string | null;
+      destination: string | null;
+      departure: string | null;
+    }> = await this.dataSource.query(
+      `SELECT ts.train_number AS "trainNumber",
+              COALESCE(oy.label, oy.code) AS "origin",
+              COALESCE(dy.label, dy.code) AS "destination",
+              ts.scheduled_departure_date AS "departure"
+         FROM freight.train_schedules ts
+         LEFT JOIN freight.yards oy ON oy.id = ts.origin_station_id
+         LEFT JOIN freight.yards dy ON dy.id = ts.destination_station_id
+        WHERE ts.id = $1 AND ts.deleted_at IS NULL`,
+      [scheduleId],
+    );
+    const trainNote = schedule
+      ? `Loaded onto train ${schedule.trainNumber ?? scheduleId.slice(0, 8)}` +
+        (schedule.origin || schedule.destination
+          ? ` (${schedule.origin ?? '?'} -> ${schedule.destination ?? '?'})`
+          : '') +
+        (schedule.departure ? `, departure ${new Date(schedule.departure).toISOString()}` : '')
+      : undefined;
     const items = await this.trainLoadableItems(scheduleId);
     const byId = new Map(items.map((i) => [i.id, i]));
     const affectedBookingIds = new Set<string>();
@@ -1335,7 +1313,12 @@ export class WarehouseInventoryService {
       if (!item.wagonId) { skip('No wagon allocated — allocate a wagon first'); continue; }
 
       try {
-        await this.load(inventoryId, { wagonId: item.wagonId, loadedBy: performedBy });
+        await this.load(inventoryId, {
+          wagonId: item.wagonId,
+          loadedBy: performedBy,
+          trainScheduleId: scheduleId,
+          notes: trainNote,
+        });
         result.loadedCount += 1;
         result.results.push({ inventoryId, status: 'LOADED' });
         if (item.bookingId) affectedBookingIds.add(item.bookingId);
@@ -3403,6 +3386,8 @@ export class WarehouseInventoryService {
           warehouseInventoryId: id,
           bookingId: item.bookingId ?? null,
           wagonId: dto.wagonId,
+          // Which train this load belongs to — durable even if wagons reshuffle.
+          trainScheduleId: dto.trainScheduleId ?? null,
           loadedAt: now,
           loadedBy: dto.loadedBy ?? null,
           loadedWeight,
@@ -3441,7 +3426,7 @@ export class WarehouseInventoryService {
     });
 
     // Enrich with wagon numbers (read-only lookup into the scheduling domain).
-    const wagonIds = [...new Set(loadings.map((l) => l.wagonId))];
+    const wagonIds = [...new Set(loadings.map((l) => l.wagonId).filter((id): id is string => Boolean(id)))];
     const wagonNumbers = new Map<string, string>();
     if (wagonIds.length > 0) {
       const rows: Array<{ id: string; wagon_number: string }> = await this.dataSource.query(
@@ -3452,7 +3437,7 @@ export class WarehouseInventoryService {
     }
 
     return loadings.map((loading) =>
-      Object.assign(loading, { wagonNumber: wagonNumbers.get(loading.wagonId) ?? null }),
+      Object.assign(loading, { wagonNumber: (loading.wagonId && wagonNumbers.get(loading.wagonId)) ?? null }),
     );
   }
 
diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
index de41c1a82..ff8dc0abd 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
@@ -1414,8 +1414,30 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
   const { data: rows = [], isLoading } = useQuery(
     api.warehouses.readyToLoadExport.queryOptions({ enabled }),
   );
-  const loadPassed = useMutation(api.warehouses.loadPassedExport.mutationOptions());
+  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.
+  const { data: trains = [], isLoading: trainsLoading } = useQuery({
+    queryKey: ['warehouse-inventory', 'loadable-trains'],
+    queryFn: () => warehouseService.getLoadableTrains(),
+    enabled: enabled && trainPickerOpen,
+  });
+  const loadOntoTrain = useMutation({
+    mutationFn: async (scheduleId: string) => {
+      const items = await warehouseService.getTrainLoadableItems(scheduleId);
+      const loadableIds = items.filter((i) => i.loadable).map((i) => i.id);
+      if (!loadableIds.length) {
+        throw new Error('No ready items with an allocated wagon on this train');
+      }
+      return warehouseService.loadItemsOntoTrain(scheduleId, loadableIds);
+    },
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
+      void qc.invalidateQueries({ queryKey: ['warehouse-loadings'] });
+    },
+  });
 
   const allSelected = rows.length > 0 && selected.size === rows.length;
   const someSelected = selected.size > 0 && !allSelected;
@@ -1427,13 +1449,22 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
       return next;
     });
 
-  const autoLoad = async () => {
+  const confirmLoad = async () => {
+    if (!targetScheduleId) {
+      toast({ variant: 'destructive', title: 'Select a train to load onto' });
+      return;
+    }
     try {
-      const r = await loadPassed.mutateAsync(undefined);
+      const r = await loadOntoTrain.mutateAsync(targetScheduleId);
+      const train = trains.find((t) => t.scheduleId === targetScheduleId);
       toast({
-        title: `${r.loadedCount} items loaded`,
-        description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
+        title: `${r.loadedCount} item(s) loaded onto train ${train?.trainNumber ?? ''}`.trim(),
+        description: r.skippedCount
+          ? `${r.skippedCount} skipped — ${r.results.find((x) => x.reason)?.reason ?? 'see results'}`
+          : undefined,
       });
+      setTrainPickerOpen(false);
+      setTargetScheduleId(null);
       setSelected(new Set());
       onChanged?.();
     } catch (error) {
@@ -1452,14 +1483,58 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
           variant="filled"
           color="teal"
           leftSection={<Truck size={14} />}
-          loading={loadPassed.isPending}
           disabled={rows.length === 0}
-          onClick={autoLoad}
+          onClick={() => setTrainPickerOpen(true)}
         >
           Auto Load Ready Items
         </Button>
       </Group>
 
+      <Modal
+        opened={trainPickerOpen}
+        onClose={() => setTrainPickerOpen(false)}
+        title="Load ready items onto a train"
+        centered
+        size="lg"
+      >
+        <Stack gap="md">
+          {trainsLoading ? (
+            <Group justify="center" py="md"><Loader size="sm" /></Group>
+          ) : trains.length === 0 ? (
+            <Alert color="yellow" variant="light" icon={<Info size={16} />}>
+              No train available. Auto-loading needs a scheduled (not yet dispatched) train with
+              these bookings assigned — schedule the train and allocate wagons first.
+            </Alert>
+          ) : (
+            <Select
+              label="Available trains"
+              placeholder="Select the train to load onto"
+              data={trains.map((t) => ({
+                value: t.scheduleId,
+                label: `${t.trainNumber ?? t.scheduleId.slice(0, 8)} · ${t.origin ?? '?'} → ${t.destination ?? '?'} · dep ${t.departureTime ? formatDate(t.departureTime) : '—'} · ${t.readyCount} ready`,
+              }))}
+              value={targetScheduleId}
+              onChange={setTargetScheduleId}
+              searchable
+            />
+          )}
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setTrainPickerOpen(false)} disabled={loadOntoTrain.isPending}>
+              Cancel
+            </Button>
+            <Button
+              color="teal"
+              leftSection={<Truck size={14} />}
+              loading={loadOntoTrain.isPending}
+              disabled={!targetScheduleId}
+              onClick={confirmLoad}
+            >
+              Load onto this train
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
       {isLoading ? (
         <Group justify="center" py="lg">
           <Loader size="sm" />
diff --git a/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts b/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
index 2c5af46ab..5ed88d5ac 100644
--- a/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
@@ -236,8 +236,6 @@ export function useEligibleBookings(enabled = true) {
 }
 export const useBulkReceive = () =>
   useInventoryMutation((payload: BulkReceivePayload) => warehouseService.receiveBulk(payload));
-export const useLoadPassedExport = () =>
-  useInventoryMutation(() => warehouseService.loadPassedExport());
 export const useBulkMarkInspected = () =>
   useInventoryMutation((payload: BulkInspectPayload) => warehouseService.bulkMarkInspected(payload));
 
diff --git a/apps/edr-freight-web/backoffice/src/services/api.ts b/apps/edr-freight-web/backoffice/src/services/api.ts
index f5281c283..7d8038156 100644
--- a/apps/edr-freight-web/backoffice/src/services/api.ts
+++ b/apps/edr-freight-web/backoffice/src/services/api.ts
@@ -101,7 +101,6 @@ import type {
   InitiateWarehouseInvoicePaymentPayload,
   LoadableWagon,
   LoadInventoryPayload,
-  LoadPassedExportResult,
   MoveInventoryPayload,
   StoreInventoryPayload,
   PayInvoicePayload,
@@ -1158,14 +1157,6 @@ export const api = {
       () => INVENTORY_INVALIDATIONS,
     ),
 
-    loadPassedExport: endpoint<void, LoadPassedExportResult>(
-      "warehouse-inventory",
-      "load-passed-export",
-      () => warehouseService.loadPassedExport().then((r) => r.data),
-      undefined,
-      () => INVENTORY_INVALIDATIONS,
-    ),
-
     bulkMarkInspected: endpoint<BulkInspectPayload, BulkInspectResult>(
       "warehouse-inventory",
       "bulk-mark-inspected",
diff --git a/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts b/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
index 366d8b9f3..6797f1743 100644
--- a/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
@@ -37,7 +37,6 @@ import type {
   EligibleBooking,
   BulkReceivePayload,
   BulkReceiveResult,
-  LoadPassedExportResult,
   BulkInspectPayload,
   BulkInspectResult,
   ReadyToLoadRow,
@@ -300,8 +299,6 @@ export const warehouseService = {
     apiClient.get<EligibleBooking[]>(URL_CONSTANTS.WAREHOUSE_INVENTORY.ELIGIBLE_BOOKINGS(direction)),
   receiveBulk: (payload: BulkReceivePayload) =>
     apiClient.post<BulkReceiveResult>(URL_CONSTANTS.WAREHOUSE_INVENTORY.RECEIVE_BULK, payload),
-  loadPassedExport: () =>
-    apiClient.post<LoadPassedExportResult>(URL_CONSTANTS.WAREHOUSE_INVENTORY.LOAD_PASSED_EXPORT, {}),
   bulkMarkInspected: (payload: BulkInspectPayload) =>
     apiClient.post<BulkInspectResult>(URL_CONSTANTS.WAREHOUSE_INVENTORY.BULK_MARK_INSPECTED, payload),
   receivedExport: () =>

From 9ef390ef1ef69c964b62c304ee601b167ecf89bb Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Fri, 10 Jul 2026 08:07:53 +0000
Subject: [PATCH 02/16] fix(warehouses): truck weighing modal resolves
 bookingId without the relation

The modal read the booking id only from item.booking?.id, but inventory-
workbench rows carry bookingId without the booking relation. Result: the
container-weights and assigned-trucks queries never ran, so "Recorded net
weight (system)" fell back to the inventory row's weight (often 0), the
container MultiSelect never appeared, and the truck dropdown showed
"not assigned" even when trucks existed - while the server correctly computed
the cargo weight and rejected the mismatch.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/warehouses/ReleaseOrderModal.tsx           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx
index d986e2aba..cfa271076 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx
@@ -112,7 +112,9 @@ const parseInspectionNote = (notes: string | null | undefined) => {
 export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: ReleaseOrderModalProps) {
   const { toast } = useToast();
   const releaseMutation = useMutation(api.warehouses.release.mutationOptions());
-  const bookingId = item?.booking?.id;
+  // Some openers (inventory workbench) supply bookingId without the booking
+  // relation — fall back to it, or the truck/container-weight queries never run.
+  const bookingId = item?.booking?.id ?? item?.bookingId ?? undefined;
   // Customer self-haul trucks assigned to this booking via the portal.
   const { data: customerTrucks = [] } = useQuery({
     queryKey: ['release-customer-trucks', bookingId],

From 27efbe6bb396e007fef95dad68661a02ddb9791b Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Fri, 10 Jul 2026 09:14:49 +0000
Subject: [PATCH 03/16] fix(warehouses): drop truncated UUID columns and
 duplicate GRN buttons

Queue tables showed "Booking ID" / "Customer ID" as dimmed 8-char UUID hashes
next to the human-readable Booking Ref and Customer Name - unusable columns
that forced extra horizontal scrolling. Removed across all six tables
(eligible, received, ready-to-load, loaded/dispatch, import unloaded, import
train detail).

The GRN document button also rendered twice per row (inside the Booking Ref
cell and again in the GRN column) in four tables - kept the GRN column only.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../warehouses/ReceiveInventoryModal.tsx      | 68 ++-----------------
 1 file changed, 4 insertions(+), 64 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
index ff8dc0abd..8e39ea53e 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
@@ -1043,8 +1043,6 @@ function EligibleTab({
                   />
                 </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>Origin</Table.Th>
                 <Table.Th>Destination</Table.Th>
@@ -1077,12 +1075,6 @@ function EligibleTab({
                       {r.reference}
                     </Text>
                   </Table.Td>
-                  <Table.Td>
-                    <Text size="xs" c="dimmed">{r.id.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.customer ?? '—'}</Table.Td>
                   <Table.Td>{r.origin ?? '—'}</Table.Td>
                   <Table.Td>{r.destination ?? '—'}</Table.Td>
@@ -1329,8 +1321,6 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
                 </Table.Th>
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</Table.Th>
-                <Table.Th>Booking ID</Table.Th>
-                <Table.Th>Customer ID</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
                 <Table.Th>Container / Cargo Items</Table.Th>
                 <Table.Th>Cargo Type</Table.Th>
@@ -1355,20 +1345,11 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
                       />
                     </Table.Td>
                     <Table.Td>
-                      <Stack gap={2}>
-                        <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                        <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                      </Stack>
+                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                     </Table.Td>
                     <Table.Td>
                       <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                     </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>
@@ -1558,8 +1539,6 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
                 </Table.Th>
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</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>
@@ -1580,20 +1559,11 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
                     />
                   </Table.Td>
                   <Table.Td>
-                    <Stack gap={2}>
-                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                      <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                    </Stack>
+                    <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
                   <Table.Td>
                     <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                   </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>
@@ -1735,8 +1705,6 @@ function LoadedExportTab({
                 )}
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</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>
@@ -1758,20 +1726,11 @@ function LoadedExportTab({
                     </Table.Td>
                   )}
                   <Table.Td>
-                    <Stack gap={2}>
-                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                      <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                    </Stack>
+                    <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
                   <Table.Td>
                     <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                   </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>
@@ -1891,9 +1850,7 @@ function ImportTrainDetailTable({
       <Table.Thead>
         <Table.Tr>
           <Table.Th>Wagon</Table.Th>
-          <Table.Th>Booking ID</Table.Th>
           <Table.Th>Booking Ref</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>
@@ -1927,15 +1884,9 @@ function ImportTrainDetailTable({
                 {it.sequenceNo ? `#${it.sequenceNo}` : '-'} {it.wagonNumber ?? ''}
               </Text>
             </Table.Td>
-            <Table.Td>
-              <Text size="xs" c="dimmed">{it.bookingId.slice(0, 8)}…</Text>
-            </Table.Td>
             <Table.Td>
               <Text size="xs" fw={600}>{it.bookingReference ?? '—'}</Text>
             </Table.Td>
-            <Table.Td>
-              <Text size="xs" c="dimmed">{it.customerId ? `${it.customerId.slice(0, 8)}…` : '—'}</Text>
-            </Table.Td>
             <Table.Td>{it.customerName ?? '—'}</Table.Td>
             <Table.Td>{it.containerNumber ?? '—'}</Table.Td>
             <Table.Td>{it.cargoType ?? '—'}</Table.Td>
@@ -2384,10 +2335,8 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                     onChange={() => (allSelected ? unselectAll() : selectAll())}
                   />
                 </Table.Th>
-                <Table.Th>Booking ID</Table.Th>
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</Table.Th>
-                <Table.Th>Customer ID</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
                 <Table.Th>Arrival Time</Table.Th>
                 <Table.Th>Container #</Table.Th>
@@ -2412,20 +2361,11 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                     />
                   </Table.Td>
                   <Table.Td>
-                    <Text size="xs" c="dimmed">{r.bookingId ? `${r.bookingId.slice(0, 8)}…` : '—'}</Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Stack gap={2}>
-                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                      <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                    </Stack>
+                    <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
                   <Table.Td>
                     <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                   </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>{formatDate(r.arrivalTime)}</Table.Td>
                   <Table.Td>{r.containerNumber ?? '—'}</Table.Td>

From 9e30c0c07128357c06ff4f86f0a1ea4941b52f24 Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Fri, 10 Jul 2026 09:22:23 +0000
Subject: [PATCH 04/16] ci: replace actions/checkout with plain git on
 self-hosted runners

Runners on this network intermittently time out downloading the action
tarball from codeload.github.com (HttpClient 100s limit, 3 attempts, job
dead before the first step). git fetch talks to github.com directly and
needs no action download at all.

- detect-changes: fetch --depth 2 (keeps the HEAD~1 diff working)
- deploy: fetch --depth 1
- token passed via env for the fetch, then scrubbed from .git/config so it
  doesn't persist in the runner workspace; git clean keeps checkout@v4's
  clean-workspace behaviour

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .github/workflows/deploy.yml | 37 ++++++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 62530611c..5e1f46ad0 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -17,10 +17,23 @@ jobs:
     outputs:
       matrix: ${{ steps.filter.outputs.matrix }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 2
+      # Plain git instead of actions/checkout: self-hosted runners on this
+      # network intermittently time out downloading action tarballs from
+      # codeload.github.com (100s HttpClient limit x3 = dead job). git fetch
+      # talks to github.com directly and needs no action download at all.
+      - name: Checkout (plain git, depth 2)
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          set -euo pipefail
+          git init -q .
+          git remote remove origin 2>/dev/null || true
+          git remote add origin "https://x-access-token:${GH_TOKEN}@github.com/${{ github.repository }}.git"
+          git fetch -q --depth 2 origin "${{ github.sha }}"
+          git checkout -q --force "${{ github.sha }}"
+          git clean -ffdq
+          # Don't leave the token in .git/config on the persistent runner workspace.
+          git remote set-url origin "https://github.com/${{ github.repository }}.git"
 
       - name: Determine changed services
         id: filter
@@ -103,8 +116,20 @@ jobs:
       COMPOSE_DOCKER_CLI_BUILD: "1"
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
+      # Same rationale as detect-changes: no action download on this network.
+      - name: Checkout (plain git)
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          set -euo pipefail
+          git init -q .
+          git remote remove origin 2>/dev/null || true
+          git remote add origin "https://x-access-token:${GH_TOKEN}@github.com/${{ github.repository }}.git"
+          git fetch -q --depth 1 origin "${{ github.sha }}"
+          git checkout -q --force "${{ github.sha }}"
+          git clean -ffdq
+          # Don't leave the token in .git/config on the persistent runner workspace.
+          git remote set-url origin "https://github.com/${{ github.repository }}.git"
 
       - name: Resolve project and build env file
         run: |

From 1abef3ce343970923b1dfcfa85f0235788b4f7eb Mon Sep 17 00:00:00 2001
From: Marshal <marshal@example.com>
Date: Fri, 10 Jul 2026 10:32:41 +0000
Subject: [PATCH 05/16] enhance shipment requests page with filtering and
 sorting options

- Added status and cargo filters to the ShipmentRequestsPage.
- Implemented date range filtering for preferred dates.
- Introduced sorting options for shipment requests based on submission date and reference.
- Enhanced the display of shipment request details, including status badges and customer information.
- Updated the UI to include a search input with clear functionality and improved layout for filters.

feat: add equipment return option in new shipment form

- Introduced a toggle for equipment return in the NewShipmentPage.
- Updated form schema to include  field for container contracts.
- Enhanced user experience with visual feedback on the equipment return selection.

fix: update booking DTO to include equipment return option

- Added  field to CreateBookingUnderContractDto for per-shipment override.
- Updated related types and schemas to accommodate the new field for better contract handling.
---
 .gitignore                                    |    1 +
 .../contracts/booking-request.repository.ts   |   13 +-
 .../contracts/booking-request.service.ts      |    2 +-
 .../contracts/contract-booking.service.ts     |    2 +-
 .../modules/contracts/contracts.controller.ts |    2 +-
 .../dto/create-booking-under-contract.dto.ts  |   13 +
 .../train-scheduling/booking-batch.service.ts |  116 +-
 .../booking-notifier.service.ts               |    9 +-
 .../train-scheduling.service.ts               |    8 +-
 apps/edr-freight-web/backoffice/src/App.tsx   |   12 +-
 .../contracts/GlCreateBookingForm.tsx         |   76 ++
 .../features/contracts/mapShipmentListRow.ts  |    6 +
 .../ContractTemplateEditorPage.tsx            |  600 ++++++++-
 .../contracts/GlDjiboutiClearanceListPage.tsx | 1069 +++++++++++++++--
 .../pages/contracts/ShipmentRequestsPage.tsx  |  397 +++++-
 .../backoffice/src/types/booking.ts           |    5 +
 .../src/pages/contracts/NewShipmentPage.tsx   |   86 +-
 .../contracts/new-shipment-form/schema.ts     |    5 +
 packages/types/src/freight/contracts.ts       |    2 +
 19 files changed, 2130 insertions(+), 294 deletions(-)

diff --git a/.gitignore b/.gitignore
index ffdc4b78b..ca2a5b7af 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ coverage/
 *~
 \#*\#
 .\#*
+docker-compose.override.yml
diff --git a/apps/edr-freight-api/src/modules/contracts/booking-request.repository.ts b/apps/edr-freight-api/src/modules/contracts/booking-request.repository.ts
index 0ae829529..d0705bfb1 100644
--- a/apps/edr-freight-api/src/modules/contracts/booking-request.repository.ts
+++ b/apps/edr-freight-api/src/modules/contracts/booking-request.repository.ts
@@ -22,12 +22,15 @@ export class BookingRequestRepository extends BaseRepository<BookingRequest> {
     });
   }
 
-  /** GL queue: pending requests across all contracts, oldest first. */
-  async findPending(): Promise<BookingRequest[]> {
+  /**
+   * GL queue: every request across all contracts, newest first. The queue page
+   * filters by status client-side (pending work vs accepted/rejected history),
+   * and surfaces the customer — so the contract's company rides along.
+   */
+  async findQueue(): Promise<BookingRequest[]> {
     return this.repository.find({
-      where: { status: 'PENDING' },
-      order: { createdAt: 'ASC' },
-      relations: { contract: true },
+      order: { createdAt: 'DESC' },
+      relations: { contract: { company: true } },
     });
   }
 
diff --git a/apps/edr-freight-api/src/modules/contracts/booking-request.service.ts b/apps/edr-freight-api/src/modules/contracts/booking-request.service.ts
index e038c7bff..17270c738 100644
--- a/apps/edr-freight-api/src/modules/contracts/booking-request.service.ts
+++ b/apps/edr-freight-api/src/modules/contracts/booking-request.service.ts
@@ -139,7 +139,7 @@ export class BookingRequestService {
   }
 
   queue(): Promise<BookingRequest[]> {
-    return this.repo.findPending();
+    return this.repo.findQueue();
   }
 
   private async findPending(requestId: string): Promise<BookingRequest> {
diff --git a/apps/edr-freight-api/src/modules/contracts/contract-booking.service.ts b/apps/edr-freight-api/src/modules/contracts/contract-booking.service.ts
index 70083a2ae..9a03bfe8a 100644
--- a/apps/edr-freight-api/src/modules/contracts/contract-booking.service.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contract-booking.service.ts
@@ -218,7 +218,7 @@ export class ContractBookingService {
       contractType: 'NEW',
       customsClearingEnabled: contract.customsClearingEnabled,
       customsClearingAgent: contract.customsClearingAgent ?? null,
-      equipmentReturn: contract.equipmentReturn ?? 'WITHOUT_RETURN',
+      equipmentReturn: dto.equipmentReturn ?? contract.equipmentReturn ?? 'WITHOUT_RETURN',
       originYardId: route?.originYardId ?? null,
       destinationYardId: route?.destinationYardId ?? null,
       tradeDirection: contract.tradeDirection,
diff --git a/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts b/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts
index 4ea7634b6..7f75b12c8 100644
--- a/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts
@@ -107,7 +107,7 @@ export class ContractsController {
 
   @Get('booking-requests/queue')
   @BookingStaff(FREIGHT_PERMS.contracts.createBooking)
-  @ApiOperation({ summary: 'GL queue: pending shipment requests across contracts' })
+  @ApiOperation({ summary: 'GL queue: shipment requests across contracts (all statuses, newest first)' })
   bookingRequestQueue() {
     return this.bookingRequestService.queue();
   }
diff --git a/apps/edr-freight-api/src/modules/contracts/dto/create-booking-under-contract.dto.ts b/apps/edr-freight-api/src/modules/contracts/dto/create-booking-under-contract.dto.ts
index f220cae0d..870817365 100644
--- a/apps/edr-freight-api/src/modules/contracts/dto/create-booking-under-contract.dto.ts
+++ b/apps/edr-freight-api/src/modules/contracts/dto/create-booking-under-contract.dto.ts
@@ -4,6 +4,7 @@ import {
   IsArray,
   IsBoolean,
   IsDateString,
+  IsIn,
   IsInt,
   IsNumber,
   IsOptional,
@@ -14,6 +15,9 @@ import {
   ValidateNested,
 } from 'class-validator';
 
+/** Per-shipment equipment return — "NA" stays contract-level only. */
+const SHIPMENT_EQUIPMENT_RETURNS = ['WITH_RETURN', 'WITHOUT_RETURN'] as const;
+
 /** One physical container under a booking line — entered at booking time. */
 export class CreateContainerUnitDto {
   @ApiProperty({ description: 'ISO 6346 container number, e.g. ABCD1234567' })
@@ -134,6 +138,15 @@ export class CreateBookingUnderContractDto {
   @IsDateString()
   scheduledDate?: string;
 
+  @ApiPropertyOptional({
+    enum: SHIPMENT_EQUIPMENT_RETURNS,
+    description:
+      'Per-shipment equipment return override; omitted → the contract default applies.',
+  })
+  @IsOptional()
+  @IsIn([...SHIPMENT_EQUIPMENT_RETURNS])
+  equipmentReturn?: string;
+
   @ApiPropertyOptional({ type: [CreateBookingContainerLineDto] })
   @IsOptional()
   @IsArray()
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
index 7dd78d167..5609c8801 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
@@ -31,7 +31,6 @@ import { TrainSchedule } from '../train-schedules/entities/train-schedule.entity
 import { TrainScheduleBooking } from '../train-schedules/entities/train-schedule-booking.entity';
 import { TrainSchedulesRepository } from '../train-schedules/train-schedules.repository';
 import { TrainScheduleBookingsRepository } from '../train-schedules/train-schedule-bookings.repository';
-import { TrainSchedulingGlobalRules } from './entities/train-scheduling-global-rules.entity';
 import { BookingNotifierService } from './booking-notifier.service';
 import { TrainSchedulingService } from './train-scheduling.service';
 import { eatDay, groupBookingsIntoBoardWindows } from './batch-window.util';
@@ -568,7 +567,6 @@ export class BookingBatchService implements OnModuleInit {
       );
     }
 
-    const rules = await this.loadGlobalRules();
     const wagonDims = await this.loadWagonDims();
     const required = need ?? this.needFor(booking, wagonDims);
     let corridorMatched = false;
@@ -578,7 +576,7 @@ export class BookingBatchService implements OnModuleInit {
       );
       const locomotive = schedule?.trainSet?.locomotive;
       if (!schedule || !locomotive) continue;
-      const limits = await this.capacityLimits(locomotive, rules);
+      const limits = await this.capacityLimits(locomotive);
       const budget = await this.remainingBudget(schedule, limits, wagonDims);
       const leg = budget.legOf(booking.originYardId, booking.destinationYardId);
       if (!leg) continue; // this train's route doesn't carry the booking's leg
@@ -757,7 +755,6 @@ export class BookingBatchService implements OnModuleInit {
     });
 
     const wagonDims = await this.loadWagonDims();
-    const rules = await this.loadGlobalRules();
     const linkRepo = this.dataSource.getRepository(TrainScheduleBooking);
 
     const board: BatchBoardSchedule[] = [];
@@ -787,7 +784,7 @@ export class BookingBatchService implements OnModuleInit {
         };
       });
 
-      board.push(this.buildScheduleSummary(s, items, rules));
+      board.push(this.buildScheduleSummary(s, items));
     }
 
     return {
@@ -817,7 +814,6 @@ export class BookingBatchService implements OnModuleInit {
     }
 
     const wagonDims = await this.loadWagonDims();
-    const rules = await this.loadGlobalRules();
     const linkRepo = this.dataSource.getRepository(TrainScheduleBooking);
     const links = await linkRepo.find({ where: { trainScheduleId: s.id } });
     const linkedIds = new Set(links.map((l) => l.bookingId));
@@ -1011,7 +1007,7 @@ export class BookingBatchService implements OnModuleInit {
           maxTrainLengthMeters: Number(loco.maxTrainLengthMeters),
         }
         : null,
-      capacity: this.computeBoardCapacity(items, loco, s.maxWagons ?? null, rules),
+      capacity: this.computeBoardCapacity(items, loco, s.maxWagons ?? null),
       counts: {
         allocated: items.filter((i) => i.state === "ALLOCATED").length,
         selectedForBatch: items.filter((i) => i.state === "SELECTED_FOR_BATCH")
@@ -1045,9 +1041,10 @@ export class BookingBatchService implements OnModuleInit {
   /**
    * Board capacity figures. `usedWeightTons` is GROSS (each item's weight already
    * includes the tare of the wagons it occupies), so the ceiling it is measured
-   * against must be the same one the fill loop spends from: the locomotive floored
-   * by the global rule caps and widened by its overage tolerance. Reading the raw
-   * `loco.maxPullWeightTons` here showed staff a ceiling the batch engine did not use.
+   * against must be the same one the fill loop spends from: the locomotive's own
+   * limits widened by its overage tolerance (global rule caps do not apply, same
+   * as {@link capacityLimits}). Reading the raw `loco.maxPullWeightTons` here
+   * showed staff a ceiling the batch engine did not use.
    */
   private computeBoardCapacity(
     items: Array<{
@@ -1058,29 +1055,18 @@ export class BookingBatchService implements OnModuleInit {
     }>,
     loco: Locomotive | null,
     maxWagons: number | null,
-    rules: TrainSchedulingGlobalRules | null,
   ): BatchBoardSchedule["capacity"] {
     const allocated = items.filter((i) => i.state === "ALLOCATED");
     const committed = items.filter(
       (i) => i.state === "ALLOCATED" || i.state === "SELECTED_FOR_BATCH",
     );
     const caps = loco
-      ? trainHardCaps(
-          {
-            maxPullWeightTons: Number(loco.maxPullWeightTons),
-            maxTrainLengthMeters: Number(loco.maxTrainLengthMeters),
-            overageToleranceTons: Number(loco.overageToleranceTons) || 0,
-            overageToleranceMeters: Number(loco.overageToleranceMeters) || 0,
-          },
-          {
-            maxTrainWeightTons: rules?.maxTrainWeightTons
-              ? Number(rules.maxTrainWeightTons)
-              : undefined,
-            maxTrainLengthMeters: rules?.maxTrainLengthMeters
-              ? Number(rules.maxTrainLengthMeters)
-              : undefined,
-          },
-        )
+      ? trainHardCaps({
+          maxPullWeightTons: Number(loco.maxPullWeightTons),
+          maxTrainLengthMeters: Number(loco.maxTrainLengthMeters),
+          overageToleranceTons: Number(loco.overageToleranceTons) || 0,
+          overageToleranceMeters: Number(loco.overageToleranceMeters) || 0,
+        })
       : null;
     const round2 = (value: number) => Math.round(value * 100) / 100;
 
@@ -1099,7 +1085,6 @@ export class BookingBatchService implements OnModuleInit {
   private buildScheduleSummary(
     s: TrainSchedule,
     items: BatchBoardBooking[],
-    rules: TrainSchedulingGlobalRules | null,
   ): BatchBoardSchedule {
     const loco = s.trainSet?.locomotive ?? null;
 
@@ -1134,7 +1119,7 @@ export class BookingBatchService implements OnModuleInit {
           maxTrainLengthMeters: Number(loco.maxTrainLengthMeters),
         }
         : null,
-      capacity: this.computeBoardCapacity(items, loco, s.maxWagons ?? null, rules),
+      capacity: this.computeBoardCapacity(items, loco, s.maxWagons ?? null),
       counts: {
         allocated: items.filter((i) => i.state === "ALLOCATED").length,
         selectedForBatch: items.filter((i) => i.state === "SELECTED_FOR_BATCH")
@@ -1203,10 +1188,9 @@ export class BookingBatchService implements OnModuleInit {
       return 0;
     }
 
-    const rules = await this.loadGlobalRules();
     const wagonDims = await this.loadWagonDims();
-    const limits = await this.capacityLimits(locomotive, rules);
-    await this.syncScheduleMaxWagons(schedule, locomotive, rules);
+    const limits = await this.capacityLimits(locomotive);
+    await this.syncScheduleMaxWagons(schedule, locomotive);
     const budget = await this.remainingBudget(schedule, limits, wagonDims);
     const minPerWagon = this.minPerWagonNeed(wagonDims);
     if (budget.isExhausted(minPerWagon)) {
@@ -1405,7 +1389,6 @@ export class BookingBatchService implements OnModuleInit {
       return { scheduleIds: [], commercialReserved: 0 };
     }
 
-    const rules = await this.loadGlobalRules();
     const wagonDims = await this.loadWagonDims();
 
     // Live per-schedule corridor budget + arm flag, in departure order.
@@ -1420,8 +1403,8 @@ export class BookingBatchService implements OnModuleInit {
         );
         continue;
       }
-      const limits = await this.capacityLimits(locomotive, rules);
-      await this.syncScheduleMaxWagons(schedule, locomotive, rules);
+      const limits = await this.capacityLimits(locomotive);
+      await this.syncScheduleMaxWagons(schedule, locomotive);
       const budget = await this.remainingBudget(schedule, limits, wagonDims);
       trains.push({ id, budget, armed: false });
     }
@@ -1973,9 +1956,8 @@ export class BookingBatchService implements OnModuleInit {
       await this.trainSchedulesRepository.findByIdWithFullGraph(scheduleId);
     const locomotive = schedule?.trainSet?.locomotive;
     if (!schedule || !locomotive) return null;
-    const rules = await this.loadGlobalRules();
     const wagonDims = await this.loadWagonDims();
-    const limits = await this.capacityLimits(locomotive, rules);
+    const limits = await this.capacityLimits(locomotive);
     const budget = await this.remainingBudget(schedule, limits, wagonDims);
     return { budget, needFor: (booking) => this.needFor(booking, wagonDims) };
   }
@@ -2520,11 +2502,12 @@ export class BookingBatchService implements OnModuleInit {
    * `base` via {@link needFor}, whose weight axis is gross. The locomotive's
    * overage tolerance is returned separately — the corridor budget spends it
    * only to admit a booking whole, never to size a split.
+   *
+   * Limits come from the LOCOMOTIVE ALONE — the global-rules weight/length
+   * caps deliberately do not apply here (a mis-set global row once capped
+   * every train at 14m and no export booking could board).
    */
-  private async capacityLimits(
-    locomotive: Locomotive,
-    rules: TrainSchedulingGlobalRules | null,
-  ): Promise<TrainLimits> {
+  private async capacityLimits(locomotive: Locomotive): Promise<TrainLimits> {
     const wagonTypes = await this.loadWagonTypeDimensions();
     const derived = deriveTrainCapacityFromLocomotive(
       {
@@ -2534,14 +2517,6 @@ export class BookingBatchService implements OnModuleInit {
         overageToleranceMeters: Number(locomotive.overageToleranceMeters) || 0,
       },
       wagonTypes,
-      {
-        maxTrainWeightTons: rules?.maxTrainWeightTons
-          ? Number(rules.maxTrainWeightTons)
-          : undefined,
-        maxTrainLengthMeters: rules?.maxTrainLengthMeters
-          ? Number(rules.maxTrainLengthMeters)
-          : undefined,
-      },
     );
     return {
       base: {
@@ -2556,18 +2531,27 @@ export class BookingBatchService implements OnModuleInit {
     };
   }
 
-  /** Keep schedule.max_wagons aligned with locomotive physical limits. */
+  /**
+   * Keep schedule.max_wagons aligned with the train's real boarding limit: the
+   * locomotive's length-derived slot count, floored by the physical wagons in
+   * the train set (slots that exist on paper but not in the yard must not be
+   * sold — see {@link remainingBudget}).
+   */
   private async syncScheduleMaxWagons(
     schedule: TrainSchedule,
     locomotive: Locomotive,
-    rules: TrainSchedulingGlobalRules | null,
   ): Promise<void> {
-    const limits = await this.capacityLimits(locomotive, rules);
-    if ((schedule.maxWagons ?? 0) !== limits.base.wagons) {
+    const limits = await this.capacityLimits(locomotive);
+    const physicalWagons = schedule.trainSet?.wagons?.length ?? 0;
+    const maxWagons =
+      physicalWagons > 0
+        ? Math.min(limits.base.wagons, physicalWagons)
+        : limits.base.wagons;
+    if ((schedule.maxWagons ?? 0) !== maxWagons) {
       await this.dataSource
         .getRepository(TrainSchedule)
-        .update(schedule.id, { maxWagons: limits.base.wagons });
-      schedule.maxWagons = limits.base.wagons;
+        .update(schedule.id, { maxWagons });
+      schedule.maxWagons = maxWagons;
     }
   }
 
@@ -2655,12 +2639,6 @@ export class BookingBatchService implements OnModuleInit {
     };
   }
 
-  private async loadGlobalRules(): Promise<TrainSchedulingGlobalRules | null> {
-    return this.dataSource
-      .getRepository(TrainSchedulingGlobalRules)
-      .findOne({ where: {} });
-  }
-
   /**
    * Ordered stop yards of the schedule's route (origin → milestones →
    * destination); the legacy two-stop pseudo-route when milestones are absent.
@@ -2684,6 +2662,12 @@ export class BookingBatchService implements OnModuleInit {
    * Remaining capacity per corridor edge = hard caps minus what allocated +
    * reserved bookings already use ON THEIR OWN LEGS. A booking riding only
    * Dire→Djibouti leaves the Addis→Dire edges untouched.
+   *
+   * The wagon axis is additionally capped by the PHYSICAL wagons marshalled in
+   * the schedule's train set. The length-derived slot count says how many wagons
+   * the locomotive could pull, not how many exist: a 760m/54-slot train with a
+   * 50-wagon set once split-offered 4 wagons that were never buildable — the
+   * customer paid and the wagon planner had nothing to assign.
    */
   private async remainingBudget(
     schedule: TrainSchedule,
@@ -2691,7 +2675,12 @@ export class BookingBatchService implements OnModuleInit {
     wagonDims: WagonDims,
   ): Promise<CorridorBudget> {
     const stops = await this.stopsForSchedule(schedule);
-    const budget = new CorridorBudget(stops, limits.base, limits.tolerance);
+    const physicalWagons = schedule.trainSet?.wagons?.length ?? 0;
+    const base =
+      physicalWagons > 0
+        ? { ...limits.base, wagons: Math.min(limits.base.wagons, physicalWagons) }
+        : limits.base;
+    const budget = new CorridorBudget(stops, base, limits.tolerance);
     const allocated = (schedule.scheduleBookings ?? [])
       .map((sb) => sb.booking)
       .filter((b): b is Booking => Boolean(b));
@@ -2795,9 +2784,8 @@ export class BookingBatchService implements OnModuleInit {
     if ((await this.remainingWagons(schedule)) <= 0) return true;
     const locomotive = schedule.trainSet?.locomotive;
     if (!locomotive) return false; // no weight/length limits to bind against
-    const rules = await this.loadGlobalRules();
     const wagonDims = await this.loadWagonDims();
-    const limits = await this.capacityLimits(locomotive, rules);
+    const limits = await this.capacityLimits(locomotive);
     const budget = await this.remainingBudget(schedule, limits, wagonDims);
     return budget.isExhausted(this.minPerWagonNeed(wagonDims));
   }
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/booking-notifier.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/booking-notifier.service.ts
index 48985bdf0..c189825fd 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/booking-notifier.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/booking-notifier.service.ts
@@ -1,6 +1,7 @@
 import { Injectable, Logger } from '@nestjs/common';
 import {
   NotificationAudience,
+  NotificationPriority,
   NotificationType,
   NotifyInput,
 } from '@edr/types';
@@ -114,11 +115,15 @@ export class BookingNotifierService {
     const eat = deadline.toLocaleString('en-GB', { timeZone: 'Africa/Addis_Ababa' });
     const msg =
       `Only ${offeredWagons} of ${totalWagons} wagons fit the train for booking ${b.reference ?? b.id}. ` +
-      `Pay within ${payMinutes} minute${payMinutes === 1 ? '' : 's'} to accept and ship ${offeredWagons} wagon${offeredWagons === 1 ? '' : 's'} now ` +
-      `(the rest returns to your contract to book later). If you do not pay, the booking stays whole and you can rebook in the next window. Deadline: ${eat} EAT.`;
+      `Pay within ${payMinutes} minute${payMinutes === 1 ? '' : 's'} to accept and ship ${offeredWagons} wagon${offeredWagons === 1 ? '' : 's'} now. ` +
+      `The remaining ${totalWagons - offeredWagons} return${totalWagons - offeredWagons === 1 ? 's' : ''} to your contract — book them yourself in a later window. ` +
+      `If you do not pay, the booking stays whole and you can rebook in the next window. Deadline: ${eat} EAT.`;
     await this.notifyContact(b, msg, 'PAY NOW (PARTIAL)');
+    // HIGH: a split is a change to what the customer ordered AND a live payment
+    // deadline — it must reach email/SMS, not just the portal inbox.
     this.inApp(b, 'Partial allocation offer', msg, {
       type: NotificationType.INVOICE_ISSUED,
+      priority: NotificationPriority.HIGH,
     });
   }
 
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
index f53af2a93..0fbfd30ce 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
@@ -3111,6 +3111,10 @@ export class TrainSchedulingService {
     const wagonTypes = await this.loadSchedulingWagonTypeDimensions();
 
     if (locomotive) {
+      // With a locomotive assigned its own limits are the single source of
+      // truth — global-rules / env caps do not floor them (a mis-set global
+      // row once capped every train at 14m). Only an explicit per-request dto
+      // override still applies.
       const derived = deriveTrainCapacityFromLocomotive(
         {
           maxPullWeightTons: Number(locomotive.maxPullWeightTons),
@@ -3120,8 +3124,8 @@ export class TrainSchedulingService {
         },
         wagonTypes,
         {
-          maxTrainWeightTons: ruleWeightCap,
-          maxTrainLengthMeters: ruleLengthCap,
+          maxTrainWeightTons: dto?.maxTrainWeightTons,
+          maxTrainLengthMeters: dto?.maxTrainLengthMeters,
         },
       );
       return {
diff --git a/apps/edr-freight-web/backoffice/src/App.tsx b/apps/edr-freight-web/backoffice/src/App.tsx
index 15c8cf19c..d9a326d91 100644
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -196,12 +196,12 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <Send />,
         permission: FREIGHT_PERMS.contracts.createBooking,
       },
-      {
-        label: "Self-Clearance Review",
-        href: "/dashboard/contracts/ops-clearance",
-        icon: <ShieldCheck />,
-        permission: FREIGHT_PERMS.contracts.opsClearanceReview,
-      },
+      // {
+      //   label: "Self-Clearance Review",
+      //   href: "/dashboard/contracts/ops-clearance",
+      //   icon: <ShieldCheck />,
+      //   permission: FREIGHT_PERMS.contracts.opsClearanceReview,
+      // },
       {
         label: "GL Djibouti Clearance",
         href: "/dashboard/gl-djibouti/clearance",
diff --git a/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx b/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx
index 33254d3ce..32ec2c511 100644
--- a/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx
@@ -38,6 +38,7 @@ import {
   MapPin,
   Package,
   Receipt,
+  Repeat,
   X,
 } from "lucide-react";
 import type { Freight } from "@edr/types";
@@ -192,9 +193,19 @@ export default function GlCreateBookingForm() {
   const [notes, setNotes] = useState("");
   const [containerLines, setContainerLines] = useState<ContainerLineDraft[]>([]);
   const [bulkLines, setBulkLines] = useState<BulkLineDraft[]>([]);
+  const [withReturn, setWithReturn] = useState(false);
   const [prefilled, setPrefilled] = useState(false);
   const [priceOpen, setPriceOpen] = useState(false);
   const seededRef = useRef(false);
+  const returnSeededRef = useRef(false);
+
+  // Seed the equipment-return toggle from the contract exactly once (also when
+  // the form is prefilled from a shipment request); GL can flip it per shipment.
+  useEffect(() => {
+    if (!contract || returnSeededRef.current) return;
+    returnSeededRef.current = true;
+    setWithReturn(contract.equipmentReturn === "WITH_RETURN");
+  }, [contract]);
 
   const isContainer = contract?.freightType === "CONTAINER";
   const routes = useMemo(
@@ -527,6 +538,10 @@ export default function GlCreateBookingForm() {
       scheduledDate,
       ...(contractRouteId ? { contractRouteId } : {}),
       ...(notes.trim() ? { notes: notes.trim() } : {}),
+      // Equipment return is a container concern — bulk keeps the contract default.
+      ...(isContainer
+        ? { equipmentReturn: withReturn ? "WITH_RETURN" : "WITHOUT_RETURN" }
+        : {}),
     };
 
     if (isContainer) {
@@ -1091,6 +1106,67 @@ export default function GlCreateBookingForm() {
           </StepCard>
         )}
 
+        {isContainer ? (
+          <StepCard>
+            <StepHeader
+              icon={<Repeat size={22} />}
+              title="Equipment Return"
+              description="Choose whether the empty container(s) come back to EDR after unloading."
+            />
+            <Paper
+              withBorder
+              radius="md"
+              p="md"
+              style={{
+                borderColor: withReturn ? "#CDEBDD" : "#E6ECF2",
+                background: withReturn ? "#F6FBF8" : "white",
+                cursor: "pointer",
+                transition: "border-color 150ms ease, background 150ms ease",
+              }}
+              onClick={() => setWithReturn((v) => !v)}
+            >
+              <Group justify="space-between" wrap="nowrap" gap="md">
+                <Group gap={13} wrap="nowrap" align="flex-start">
+                  <Box
+                    style={{
+                      width: 38,
+                      height: 38,
+                      flexShrink: 0,
+                      borderRadius: 11,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      background: withReturn ? "#ECF6F1" : "#F1F4F7",
+                      color: withReturn ? "#0A6F4D" : "#6B7C8E",
+                    }}
+                  >
+                    <Repeat size={18} />
+                  </Box>
+                  <Box>
+                    <Text fz={14} fw={700}>
+                      With return
+                    </Text>
+                    <Text fz={12} c="dimmed" style={{ lineHeight: 1.4 }}>
+                      {withReturn
+                        ? "Container(s) returned to EDR after unloading."
+                        : "Container(s) retained by the customer after delivery."}
+                    </Text>
+                  </Box>
+                </Group>
+                <Switch
+                  size="md"
+                  color="edr-green"
+                  aria-label="With return"
+                  checked={withReturn}
+                  onChange={(e) => setWithReturn(e.currentTarget.checked)}
+                  onClick={(e) => e.stopPropagation()}
+                  style={{ flexShrink: 0 }}
+                />
+              </Group>
+            </Paper>
+          </StepCard>
+        ) : null}
+
         <StepCard>
           <StepHeader
             icon={<CalendarDays size={22} />}
diff --git a/apps/edr-freight-web/backoffice/src/features/contracts/mapShipmentListRow.ts b/apps/edr-freight-web/backoffice/src/features/contracts/mapShipmentListRow.ts
index 766c04ee1..9e58e84bc 100644
--- a/apps/edr-freight-web/backoffice/src/features/contracts/mapShipmentListRow.ts
+++ b/apps/edr-freight-web/backoffice/src/features/contracts/mapShipmentListRow.ts
@@ -9,6 +9,12 @@ export interface ShipmentListRow {
   summary: string;
   status: Freight.BookingRequestStatus;
   createdBookingId?: string | null;
+  /** When the customer submitted the request — the queue's default sort key. */
+  createdAt?: string | null;
+  customerName?: string | null;
+  freightKind?: "CONTAINER" | "BULK";
+  hazardous?: boolean;
+  reefer?: boolean;
 }
 
 export type ShipmentRowAction =
diff --git a/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplateEditorPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplateEditorPage.tsx
index 0ad7ef301..2d635fe58 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplateEditorPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplateEditorPage.tsx
@@ -1,15 +1,18 @@
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 import {
   ActionIcon,
   Badge,
+  Box,
   Button,
   Card,
   Center,
   Group,
   Loader,
+  Menu,
   Modal,
   Paper,
+  ScrollArea,
   Stack,
   Switch,
   Text,
@@ -19,13 +22,29 @@ import {
   Tooltip,
 } from "@mantine/core";
 import {
+  AlertTriangle,
   ArrowDown,
   ArrowUp,
+  Banknote,
+  Building2,
+  CalendarClock,
+  CalendarDays,
+  CalendarRange,
+  ChevronDown,
+  Coins,
+  Hash,
+  ListOrdered,
+  ListPlus,
+  Mail,
+  MapPin,
+  Package,
   Pencil,
+  Phone,
   Plus,
   RefreshCw,
   Settings2,
   Trash2,
+  Weight,
 } from "lucide-react";
 
 import { PageContainer, PageHeader } from "@/components/page";
@@ -41,7 +60,7 @@ import {
 import type { ContractTemplateArticle } from "@/services/contract-templates.service";
 
 const BODY_HINT =
-  'One clause per line — clauses are numbered automatically. Prefix a line with "- " to nest it as a bullet under the previous clause. Placeholders like {{client.companyName}}, {{contractDate}}, {{contractYear}} and {{reference}} are filled from the contract.';
+  'One clause per line — clauses are numbered automatically. Prefix a line with "- " to nest it as a bullet under the previous clause. Use the buttons above to drop a placeholder at the cursor — it is filled from the contract when the document is generated.';
 
 interface ArticleDraft {
   id?: string;
@@ -49,6 +68,254 @@ interface ArticleDraft {
   body: string;
 }
 
+interface PlaceholderDef {
+  token: string;
+  label: string;
+  icon: typeof Building2;
+  hint: string;
+}
+
+/**
+ * Placeholders the renderer fills from the contract view model
+ * (contract-view-model.builder.ts). Quick row = the ones template authors
+ * reach for constantly; the rest live in the grouped "More" menu.
+ */
+const QUICK_PLACEHOLDERS: PlaceholderDef[] = [
+  {
+    token: "{{client.companyName}}",
+    label: "Client name",
+    icon: Building2,
+    hint: "Company name of the contracting client",
+  },
+  {
+    token: "{{reference}}",
+    label: "Reference",
+    icon: Hash,
+    hint: "Contract reference number",
+  },
+  {
+    token: "{{contractDate}}",
+    label: "Contract date",
+    icon: CalendarDays,
+    hint: "Full signature date of the contract",
+  },
+  {
+    token: "{{contractYear}}",
+    label: "Contract year",
+    icon: CalendarRange,
+    hint: "Year the contract is signed",
+  },
+  {
+    token: "{{pricing.totalAmount}}",
+    label: "Total price",
+    icon: Banknote,
+    hint: "Total contract price from the pricing schedule",
+  },
+];
+
+const MORE_PLACEHOLDER_GROUPS: { label: string; items: PlaceholderDef[] }[] = [
+  {
+    label: "Client",
+    items: [
+      {
+        token: "{{client.companyAddress}}",
+        label: "Client address",
+        icon: MapPin,
+        hint: "Street address of the client",
+      },
+      {
+        token: "{{client.companyLocation}}",
+        label: "Client location",
+        icon: MapPin,
+        hint: "Region / city of the client",
+      },
+      {
+        token: "{{client.phone}}",
+        label: "Client phone",
+        icon: Phone,
+        hint: "Client phone number",
+      },
+      {
+        token: "{{client.email}}",
+        label: "Client email",
+        icon: Mail,
+        hint: "Client email address",
+      },
+      {
+        token: "{{client.tinNumber}}",
+        label: "Client TIN",
+        icon: Hash,
+        hint: "Client tax identification number",
+      },
+    ],
+  },
+  {
+    label: "Route & cargo",
+    items: [
+      {
+        token: "{{schedule.originLabel}}",
+        label: "Origin",
+        icon: MapPin,
+        hint: "Origin yard / station",
+      },
+      {
+        token: "{{schedule.destinationLabel}}",
+        label: "Destination",
+        icon: MapPin,
+        hint: "Destination yard / station",
+      },
+      {
+        token: "{{schedule.serviceType}}",
+        label: "Service type",
+        icon: Settings2,
+        hint: "Contracted service type name",
+      },
+      {
+        token: "{{schedule.cargoDescription}}",
+        label: "Cargo description",
+        icon: Package,
+        hint: "Description of the cargo",
+      },
+      {
+        token: "{{schedule.totalWeightVgm}}",
+        label: "Total weight",
+        icon: Weight,
+        hint: "Total verified gross mass",
+      },
+      {
+        token: "{{schedule.equipmentReturn}}",
+        label: "Equipment return",
+        icon: RefreshCw,
+        hint: "Empty-equipment return terms",
+      },
+      {
+        token: "{{schedule.scheduledDate}}",
+        label: "Scheduled date",
+        icon: CalendarClock,
+        hint: "Scheduled shipment date",
+      },
+    ],
+  },
+  {
+    label: "Pricing",
+    items: [
+      {
+        token: "{{pricing.currency}}",
+        label: "Currency",
+        icon: Coins,
+        hint: "Payment currency (e.g. USD)",
+      },
+    ],
+  },
+  {
+    label: "Service provider (EDR)",
+    items: [
+      {
+        token: "{{provider.name}}",
+        label: "Provider name",
+        icon: Building2,
+        hint: "EDR legal company name",
+      },
+      {
+        token: "{{provider.address}}",
+        label: "Provider address",
+        icon: MapPin,
+        hint: "EDR principal place of business",
+      },
+      {
+        token: "{{provider.phone}}",
+        label: "Provider phone",
+        icon: Phone,
+        hint: "EDR phone number",
+      },
+      {
+        token: "{{provider.email}}",
+        label: "Provider email",
+        icon: Mail,
+        hint: "EDR email address",
+      },
+    ],
+  },
+];
+
+const ALL_PLACEHOLDERS: PlaceholderDef[] = [
+  ...QUICK_PLACEHOLDERS,
+  ...MORE_PLACEHOLDER_GROUPS.flatMap((g) => g.items),
+];
+
+const KNOWN_TOKENS = new Set<string>(ALL_PLACEHOLDERS.map((p) => p.token));
+
+/** Any {{…}} tokens in the text the renderer does not know how to fill. */
+function unknownTokens(text: string): string[] {
+  const found = text.match(/\{\{[^{}]+\}\}/g) ?? [];
+  return [...new Set(found.filter((t) => !KNOWN_TOKENS.has(t)))];
+}
+
+interface ParsedClause {
+  text: string;
+  bullets: string[];
+}
+
+interface ParsedBody {
+  /** Set (instead of clauses) when the body is one plain paragraph. */
+  paragraph?: string;
+  clauses: ParsedClause[];
+}
+
+/**
+ * Mirror of the API renderer's rules (contract-article.util.ts): one clause per
+ * line, "- " nests a bullet under the previous clause, and a single bullet-less
+ * clause renders as a plain paragraph instead of a numbered list of one.
+ */
+function parseArticleBody(body: string): ParsedBody {
+  const clauses: ParsedClause[] = [];
+  for (const raw of body.split("\n")) {
+    const line = raw.trim();
+    if (!line) continue;
+    if (line.startsWith("- ") && clauses.length > 0) {
+      clauses[clauses.length - 1].bullets.push(line.slice(2).trim());
+    } else {
+      clauses.push({ text: line.replace(/^- /, ""), bullets: [] });
+    }
+  }
+  if (clauses.length === 1 && clauses[0].bullets.length === 0) {
+    return { paragraph: clauses[0].text, clauses: [] };
+  }
+  return { clauses };
+}
+
+/** Render clause text with {{placeholders}} highlighted as green chips. */
+function HighlightedText({ text }: { text: string }) {
+  const parts = text.split(/(\{\{[^{}]+\}\})/g);
+  return (
+    <>
+      {parts.map((part, i) =>
+        /^\{\{[^{}]+\}\}$/.test(part) ? (
+          <Text
+            key={i}
+            component="span"
+            size="xs"
+            fw={600}
+            c={KNOWN_TOKENS.has(part) ? "edr-green.8" : "red.7"}
+            px={4}
+            style={{
+              borderRadius: 4,
+              background: KNOWN_TOKENS.has(part)
+                ? "var(--mantine-color-edr-green-0)"
+                : "var(--mantine-color-red-0)",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {part}
+          </Text>
+        ) : (
+          <span key={i}>{part}</span>
+        ),
+      )}
+    </>
+  );
+}
+
 export default function ContractTemplateEditorPage() {
   const { code } = useParams<{ code: string }>();
   const { data: template, isLoading } = useContractTemplate(code);
@@ -79,15 +346,12 @@ export default function ContractTemplateEditorPage() {
     );
   };
 
-  const saveArticle = () => {
+  const saveArticle = (values: { title: string; body: string }) => {
     if (!articleDraft) return;
     if (articleDraft.id) {
-      updateArticle.mutate({
-        articleId: articleDraft.id,
-        payload: { title: articleDraft.title, body: articleDraft.body },
-      });
+      updateArticle.mutate({ articleId: articleDraft.id, payload: values });
     } else {
-      addArticle.mutate({ title: articleDraft.title, body: articleDraft.body });
+      addArticle.mutate(values);
     }
     setArticleDraft(null);
   };
@@ -264,55 +528,14 @@ export default function ContractTemplateEditorPage() {
       </div>
 
       {/* ── Add / edit article modal ───────────────────────────────────── */}
-      <Modal
-        opened={Boolean(articleDraft)}
-        onClose={() => setArticleDraft(null)}
-        title={articleDraft?.id ? "Edit article" : "Add article"}
-        size="xl"
-      >
-        {articleDraft && (
-          <Stack gap="sm">
-            <TextInput
-              label="Article title"
-              placeholder="e.g. Obligations of the Client"
-              value={articleDraft.title}
-              onChange={(event) =>
-                setArticleDraft({ ...articleDraft, title: event.currentTarget.value })
-              }
-              required
-            />
-            <Textarea
-              label="Article body"
-              description={BODY_HINT}
-              value={articleDraft.body}
-              onChange={(event) =>
-                setArticleDraft({ ...articleDraft, body: event.currentTarget.value })
-              }
-              autosize
-              minRows={12}
-              maxRows={24}
-              styles={{ input: { fontFamily: "ui-monospace, monospace", fontSize: 13 } }}
-              required
-            />
-            <Group justify="flex-end">
-              <Button variant="default" onClick={() => setArticleDraft(null)}>
-                Cancel
-              </Button>
-              <Button
-                color="edr-green"
-                disabled={
-                  articleDraft.title.trim().length < 2 ||
-                  articleDraft.body.trim().length < 2
-                }
-                loading={addArticle.isPending || updateArticle.isPending}
-                onClick={saveArticle}
-              >
-                {articleDraft.id ? "Save changes" : "Add article"}
-              </Button>
-            </Group>
-          </Stack>
-        )}
-      </Modal>
+      {articleDraft && (
+        <ArticleEditorModal
+          initial={articleDraft}
+          saving={addArticle.isPending || updateArticle.isPending}
+          onClose={() => setArticleDraft(null)}
+          onSave={saveArticle}
+        />
+      )}
 
       {/* ── Delete confirm ─────────────────────────────────────────────── */}
       <Modal
@@ -364,6 +587,269 @@ export default function ContractTemplateEditorPage() {
   );
 }
 
+interface ArticleEditorModalProps {
+  initial: ArticleDraft;
+  saving: boolean;
+  onClose: () => void;
+  onSave: (values: { title: string; body: string }) => void;
+}
+
+/**
+ * Rich add/edit article editor: placeholder buttons insert at the text cursor
+ * of whichever field (title or body) was focused last, with a live preview of
+ * the numbered clauses exactly as the renderer lays them out.
+ */
+function ArticleEditorModal({
+  initial,
+  saving,
+  onClose,
+  onSave,
+}: ArticleEditorModalProps) {
+  const [title, setTitle] = useState(initial.title);
+  const [body, setBody] = useState(initial.body);
+
+  const titleRef = useRef<HTMLInputElement>(null);
+  const bodyRef = useRef<HTMLTextAreaElement>(null);
+  // Placeholders drop into whichever field held the cursor last (body default).
+  const lastFocused = useRef<"title" | "body">("body");
+
+  const insertAtCursor = (snippet: string) => {
+    const isTitle = lastFocused.current === "title";
+    const el = isTitle ? titleRef.current : bodyRef.current;
+    const value = isTitle ? title : body;
+    const start = el?.selectionStart ?? value.length;
+    const end = el?.selectionEnd ?? start;
+    const next = value.slice(0, start) + snippet + value.slice(end);
+    if (isTitle) setTitle(next);
+    else setBody(next);
+    // Refocus and place the caret right after the inserted snippet once the
+    // controlled re-render has flushed.
+    requestAnimationFrame(() => {
+      if (!el) return;
+      el.focus();
+      const caret = start + snippet.length;
+      el.setSelectionRange(caret, caret);
+    });
+  };
+
+  const insertLinePrefix = (prefix: string) => {
+    const el = bodyRef.current;
+    const start = el?.selectionStart ?? body.length;
+    // Start the snippet on its own line unless the caret already is.
+    const needsNewline = start > 0 && body[start - 1] !== "\n";
+    lastFocused.current = "body";
+    insertAtCursor(`${needsNewline ? "\n" : ""}${prefix}`);
+  };
+
+  const parsed = useMemo(() => parseArticleBody(body), [body]);
+  const clauseCount = parsed.paragraph ? 1 : parsed.clauses.length;
+  const unknown = useMemo(
+    () => unknownTokens(`${title}\n${body}`),
+    [title, body],
+  );
+  const canSave = title.trim().length >= 2 && body.trim().length >= 2;
+
+  return (
+    <Modal
+      opened
+      onClose={onClose}
+      title={initial.id ? "Edit article" : "Add article"}
+      size="min(1120px, 95vw)"
+    >
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        {/* ── Editor ─────────────────────────────────────────────────── */}
+        <Stack gap="sm">
+          <TextInput
+            ref={titleRef}
+            label="Article title"
+            placeholder="e.g. Obligations of the Client"
+            value={title}
+            onChange={(event) => setTitle(event.currentTarget.value)}
+            onFocus={() => (lastFocused.current = "title")}
+            required
+          />
+
+          <Box>
+            <Text size="sm" fw={500} mb={4}>
+              Insert placeholder
+            </Text>
+            <Group gap={6} wrap="wrap">
+              {QUICK_PLACEHOLDERS.map(({ token, label, icon: Icon, hint }) => (
+                <Tooltip key={token} label={hint} withArrow>
+                  <Button
+                    variant="light"
+                    color="edr-green"
+                    size="compact-sm"
+                    radius="md"
+                    leftSection={<Icon size={13} />}
+                    // Keep the field's focus/caret alive so insertion lands
+                    // where the user was typing.
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={() => insertAtCursor(token)}
+                  >
+                    {label}
+                  </Button>
+                </Tooltip>
+              ))}
+              <Menu shadow="md" width={300} position="bottom-start">
+                <Menu.Target>
+                  <Button
+                    variant="default"
+                    size="compact-sm"
+                    radius="md"
+                    leftSection={<Plus size={13} />}
+                    rightSection={<ChevronDown size={13} />}
+                    onMouseDown={(e) => e.preventDefault()}
+                  >
+                    More
+                  </Button>
+                </Menu.Target>
+                <Menu.Dropdown mah={340} style={{ overflowY: "auto" }}>
+                  {MORE_PLACEHOLDER_GROUPS.map((group) => (
+                    <Box key={group.label}>
+                      <Menu.Label>{group.label}</Menu.Label>
+                      {group.items.map(({ token, label, icon: Icon, hint }) => (
+                        <Menu.Item
+                          key={token}
+                          leftSection={<Icon size={14} />}
+                          onClick={() => insertAtCursor(token)}
+                        >
+                          <Text size="sm">{label}</Text>
+                          <Text size="xs" c="dimmed" title={hint}>
+                            {token}
+                          </Text>
+                        </Menu.Item>
+                      ))}
+                    </Box>
+                  ))}
+                </Menu.Dropdown>
+              </Menu>
+              <Tooltip label="Start a new numbered clause" withArrow>
+                <Button
+                  variant="default"
+                  size="compact-sm"
+                  radius="md"
+                  leftSection={<ListOrdered size={13} />}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => insertLinePrefix("")}
+                >
+                  New clause
+                </Button>
+              </Tooltip>
+              <Tooltip label="Nest a bullet under the previous clause" withArrow>
+                <Button
+                  variant="default"
+                  size="compact-sm"
+                  radius="md"
+                  leftSection={<ListPlus size={13} />}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => insertLinePrefix("- ")}
+                >
+                  Bullet
+                </Button>
+              </Tooltip>
+            </Group>
+          </Box>
+
+          <Textarea
+            ref={bodyRef}
+            label="Article body"
+            description={BODY_HINT}
+            value={body}
+            onChange={(event) => setBody(event.currentTarget.value)}
+            onFocus={() => (lastFocused.current = "body")}
+            autosize
+            minRows={12}
+            maxRows={22}
+            styles={{
+              input: { fontFamily: "ui-monospace, monospace", fontSize: 13 },
+            }}
+            required
+          />
+
+          {unknown.length > 0 && (
+            <Group gap={6} wrap="nowrap" align="flex-start">
+              <AlertTriangle size={14} className="mt-0.5 shrink-0 text-red-600" />
+              <Text size="xs" c="red.7">
+                Unknown placeholder{unknown.length > 1 ? "s" : ""}{" "}
+                {unknown.join(", ")} — the generator won't fill{" "}
+                {unknown.length > 1 ? "these" : "this"}. Pick from the Insert
+                placeholder buttons instead.
+              </Text>
+            </Group>
+          )}
+        </Stack>
+
+        {/* ── Live preview ───────────────────────────────────────────── */}
+        <Paper withBorder radius="md" p="md" className="self-start lg:sticky lg:top-0">
+          <Group justify="space-between" mb="xs">
+            <Text fw={600} size="sm">
+              Live preview
+            </Text>
+            <Text size="xs" c="dimmed">
+              {clauseCount} clause{clauseCount !== 1 ? "s" : ""}
+            </Text>
+          </Group>
+          <ScrollArea.Autosize mah="60vh">
+            {title.trim() || clauseCount > 0 ? (
+              <Stack gap="xs">
+                {title.trim() && (
+                  <Title order={5}>
+                    <HighlightedText text={title} />
+                  </Title>
+                )}
+                {parsed.paragraph && (
+                  <Text size="sm">
+                    <HighlightedText text={parsed.paragraph} />
+                  </Text>
+                )}
+                {parsed.clauses.map((clause, i) => (
+                  <Box key={i}>
+                    <Text size="sm">
+                      <Text component="span" fw={600} c="edr-green.7">
+                        {i + 1}.{" "}
+                      </Text>
+                      <HighlightedText text={clause.text} />
+                    </Text>
+                    {clause.bullets.length > 0 && (
+                      <Stack gap={2} mt={2} pl="lg">
+                        {clause.bullets.map((bullet, j) => (
+                          <Text key={j} size="sm" c="dimmed">
+                            • <HighlightedText text={bullet} />
+                          </Text>
+                        ))}
+                      </Stack>
+                    )}
+                  </Box>
+                ))}
+              </Stack>
+            ) : (
+              <Text size="sm" c="dimmed" ta="center" py="xl">
+                Start typing — the article renders here exactly as it will
+                appear in the contract.
+              </Text>
+            )}
+          </ScrollArea.Autosize>
+        </Paper>
+      </div>
+
+      <Group justify="flex-end" mt="md">
+        <Button variant="default" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          color="edr-green"
+          disabled={!canSave}
+          loading={saving}
+          onClick={() => onSave({ title: title.trim(), body: body.trim() })}
+        >
+          {initial.id ? "Save changes" : "Add article"}
+        </Button>
+      </Group>
+    </Modal>
+  );
+}
+
 interface DocumentDetailsModalProps {
   opened: boolean;
   onClose: () => void;
diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx
index afa15d8d1..bb0edcadb 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx
@@ -1,21 +1,54 @@
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
+  ActionIcon,
   Badge,
   Box,
+  Button,
   Card,
   Group,
-  Loader,
   SegmentedControl,
+  Select,
   Stack,
   Text,
+  TextInput,
+  ThemeIcon,
+  Tooltip,
 } from "@mantine/core";
-import { ChevronRight, FileSignature, PackageCheck, Ship } from "lucide-react";
+import {
+  AlertTriangle,
+  ArrowRight,
+  CalendarClock,
+  ChevronRight,
+  FileSignature,
+  FileText,
+  Inbox,
+  PackageCheck,
+  RefreshCw,
+  Search,
+  ShieldCheck,
+  Ship,
+  ShipWheel,
+  Truck,
+  User,
+  Weight,
+  X,
+} from "lucide-react";
+import {
+  DataTable,
+  DataTableFooter,
+  usePagination,
+  type ColumnDef,
+} from "@edr/ui-common";
+import type { Freight } from "@edr/types";
 
 import { PageContainer } from "@/components/page/PageContainer";
 import { PageHeader } from "@/components/page/PageHeader";
+import { KpiStrip } from "@/components/page/KpiStrip";
+import { bookingTable } from "@/components/bookings/booking-ui.styles";
 import { useDjClearanceQueue } from "@/hooks/contracts/useContracts";
 import { useBookingDjClearanceQueue } from "@/hooks/bookings/useBookings";
+import type { BookingDetail } from "@/types/booking";
 
 type QueueTab = "contracts" | "shipments";
 
@@ -25,6 +58,235 @@ const prettyStatus = (s?: string | null) =>
     .replace(/_/g, " ")
     .replace(/^\w/, (c) => c.toUpperCase());
 
+function formatDate(value?: string | null): string {
+  if (!value) return "—";
+  const d = new Date(value);
+  return Number.isNaN(d.getTime())
+    ? "—"
+    : d.toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+}
+
+function yardLabel(
+  yard?: { label?: string; code?: string; name?: string } | null,
+  fallback = "—",
+): string {
+  if (!yard) return fallback;
+  return yard.label ?? yard.name ?? yard.code ?? fallback;
+}
+
+const PHASE_LABELS: Record<string, string> = {
+  CUSTOMER_INTAKE: "Customer intake",
+  GL_ET_REVIEW: "GL ET review",
+  GL_DJ_COLLECTION: "DJ collection",
+  GL_ET_OUTPUT: "GL ET output",
+  CUSTOMER_DUTY: "Customer duty",
+  GL_ET_POST_CLEARANCE: "ET post-clearance",
+  GL_DJ_LOADING: "DJ loading",
+  POST_TRANSIT: "Post transit",
+};
+
+const phaseLabel = (phase?: string | null) =>
+  phase ? (PHASE_LABELS[phase] ?? prettyStatus(phase)) : "—";
+
+function statusColor(status: string): string {
+  switch (status) {
+    case "AWAITING_DOCUMENTS":
+    case "AWAITING_CLEARANCE_DOCUMENTS":
+      return "yellow";
+    case "DOCUMENTS_UNDER_REVIEW":
+    case "CLEARANCE_UNDER_REVIEW":
+      return "blue";
+    case "CLEARANCE_READY":
+    case "CLEARANCE_READY_FOR_BOOKING":
+      return "edr-green";
+    case "ACTIVE_SHIPMENT_IN_PROGRESS":
+    case "IN_TRANSIT":
+      return "teal";
+    default:
+      return "gray";
+  }
+}
+
+// ── DJ next action (shipments) ───────────────────────────────────────────────
+
+type DjActionKey = "RO_HOLD" | "COLLECT_DO" | "ISSUE_RO" | "LOADING" | "REVIEW";
+
+interface DjAction {
+  key: DjActionKey;
+  label: string;
+  color: string;
+}
+
+const DJ_ACTION_OPTIONS: { value: DjActionKey; label: string }[] = [
+  { value: "RO_HOLD", label: "RO amendment hold" },
+  { value: "COLLECT_DO", label: "Collect DO" },
+  { value: "ISSUE_RO", label: "Issue RO" },
+  { value: "LOADING", label: "Loading milestones" },
+  { value: "REVIEW", label: "Review" },
+];
+
+function djAction(b: BookingDetail): DjAction {
+  if (b.roHoldReason) {
+    return { key: "RO_HOLD", label: "RO amendment hold", color: "red" };
+  }
+  if (b.clearanceCurrentPhase === "GL_DJ_LOADING") {
+    return { key: "LOADING", label: "Loading milestones", color: "teal" };
+  }
+  if (b.tradeDirection === "IMPORT") {
+    return { key: "COLLECT_DO", label: "Collect DO", color: "yellow" };
+  }
+  if (b.tradeDirection === "EXPORT") {
+    return { key: "ISSUE_RO", label: "Issue RO", color: "blue" };
+  }
+  return { key: "REVIEW", label: "Review", color: "gray" };
+}
+
+// ── Row models ───────────────────────────────────────────────────────────────
+
+interface ShipmentRow {
+  id: string;
+  reference: string;
+  contractReference: string;
+  customerLabel: string;
+  originLabel: string;
+  destinationLabel: string;
+  tradeDirection: string;
+  freightType: string;
+  status: string;
+  phase: string | null;
+  roHoldReason: string | null;
+  scheduledDate: string | null;
+  weightTons: number;
+  isHazardous: boolean;
+  action: DjAction;
+}
+
+function toShipmentRow(b: BookingDetail): ShipmentRow {
+  return {
+    id: b.id,
+    reference: b.reference,
+    contractReference: b.contractReference ?? "—",
+    customerLabel: b.company?.name ?? b.governmentInstitution ?? "—",
+    originLabel: yardLabel(b.originYard),
+    destinationLabel: yardLabel(b.destinationYard),
+    tradeDirection: b.tradeDirection ?? "—",
+    freightType: b.freightType ?? "—",
+    status: b.status,
+    phase: b.clearanceCurrentPhase ?? null,
+    roHoldReason: b.roHoldReason ?? null,
+    scheduledDate: b.scheduledDate ?? null,
+    weightTons: b.cargoTotalWeightVgm ?? 0,
+    isHazardous: Boolean(b.isHazardous),
+    action: djAction(b),
+  };
+}
+
+interface ContractRow {
+  id: string;
+  reference: string;
+  customerLabel: string;
+  originLabel: string;
+  destinationLabel: string;
+  tradeDirection: string;
+  freightType: string;
+  serviceTypeName: string;
+  customs: boolean;
+  status: string;
+  clearanceStatus: string;
+  phase: string | null;
+  cycleNumber: number;
+  validFrom: string | null;
+  validUntil: string | null;
+  validityDays: number | null;
+  estimatedShipmentDate: string | null;
+}
+
+function toContractRow(c: Freight.IContract): ContractRow {
+  const routes = [...(c.routes ?? [])].sort((a, b) => a.sortOrder - b.sortOrder);
+  const first = routes[0];
+  const last = routes[routes.length - 1] ?? first;
+  return {
+    id: c.id,
+    reference: c.reference,
+    customerLabel: c.isGovernment
+      ? (c.governmentInstitution ?? "Government")
+      : (c.company?.name ?? "—"),
+    originLabel: yardLabel(first?.originYard),
+    destinationLabel: yardLabel(last?.destinationYard),
+    tradeDirection: c.tradeDirection ?? "—",
+    freightType: c.freightType ?? "—",
+    serviceTypeName: c.serviceType?.serviceName ?? "—",
+    customs: c.serviceType?.includesCustoms ?? Boolean(c.customsClearingEnabled),
+    status: c.status,
+    clearanceStatus: c.clearanceStatus,
+    phase: (c.clearancePhase as string | null) ?? null,
+    cycleNumber: c.clearanceCycleNumber ?? 1,
+    validFrom: c.contractValidFrom ?? null,
+    validUntil: c.contractValidUntil ?? null,
+    validityDays: c.contractValidityDays ?? null,
+    estimatedShipmentDate: c.estimatedShipmentDate ?? null,
+  };
+}
+
+// ── Shared cell pieces ───────────────────────────────────────────────────────
+
+function DirectionIcon({ direction }: { direction: string }) {
+  const isImport = direction === "IMPORT";
+  const Icon = isImport ? Truck : ShipWheel;
+  const label = isImport ? "Import" : direction === "EXPORT" ? "Export" : "—";
+  return (
+    <Tooltip label={label} withArrow>
+      <ThemeIcon
+        variant="light"
+        color={isImport ? "edr-green" : "gray"}
+        radius="md"
+        size={26}
+        aria-label={label}
+      >
+        <Icon size={14} strokeWidth={1.9} />
+      </ThemeIcon>
+    </Tooltip>
+  );
+}
+
+function RouteCell({
+  origin,
+  destination,
+  direction,
+  freightType,
+}: {
+  origin: string;
+  destination: string;
+  direction: string;
+  freightType: string;
+}) {
+  return (
+    <Stack gap={4} py={2}>
+      <Group gap={6} wrap="nowrap">
+        <Text size="sm" fw={500} truncate maw={120}>
+          {origin}
+        </Text>
+        <ArrowRight size={14} className="shrink-0 text-muted-foreground" />
+        <Text size="sm" fw={500} truncate maw={120}>
+          {destination}
+        </Text>
+      </Group>
+      <Group gap={8} align="center">
+        <DirectionIcon direction={direction} />
+        <Badge size="xs" variant="default" radius="sm">
+          {freightType}
+        </Badge>
+      </Group>
+    </Stack>
+  );
+}
+
+// ── Page ─────────────────────────────────────────────────────────────────────
+
 /**
  * GL Djibouti clearance queues:
  * - Contracts: ONE_TIME customs contracts in phased clearance (legacy flow).
@@ -35,13 +297,443 @@ const prettyStatus = (s?: string | null) =>
 export default function GlDjiboutiClearanceListPage() {
   const navigate = useNavigate();
   const [tab, setTab] = useState<QueueTab>("shipments");
-  const { data: contractQueue, isLoading: contractsLoading } = useDjClearanceQueue();
-  const { data: bookingQueue, isLoading: bookingsLoading } =
-    useBookingDjClearanceQueue();
+  const [query, setQuery] = useState("");
+  const [direction, setDirection] = useState<string | null>(null);
+  const [freight, setFreight] = useState<string | null>(null);
+  const [status, setStatus] = useState<string | null>(null);
+  const [action, setAction] = useState<string | null>(null);
+  const { pagination, setPagination } = usePagination({ pageSize: 10 });
 
-  const contractItems = contractQueue?.items ?? [];
-  const bookingItems = bookingQueue ?? [];
+  const {
+    data: contractQueue,
+    isLoading: contractsLoading,
+    isError: contractsError,
+    isFetching: contractsFetching,
+    refetch: refetchContracts,
+  } = useDjClearanceQueue();
+  const {
+    data: bookingQueue,
+    isLoading: bookingsLoading,
+    isError: bookingsError,
+    isFetching: bookingsFetching,
+    refetch: refetchBookings,
+  } = useBookingDjClearanceQueue();
+
+  const resetPage = useCallback(
+    () => setPagination({ pageIndex: 0, pageSize: pagination.pageSize }),
+    [setPagination, pagination.pageSize],
+  );
+
+  const allShipmentRows = useMemo(
+    () => (bookingQueue ?? []).map(toShipmentRow),
+    [bookingQueue],
+  );
+  const allContractRows = useMemo(
+    () => (contractQueue?.items ?? []).map(toContractRow),
+    [contractQueue?.items],
+  );
+
+  // KPI metrics span both queues, regardless of active tab or filters.
+  const metrics = useMemo(
+    () => ({
+      shipments: allShipmentRows.length,
+      contracts: allContractRows.length,
+      collectDo: allShipmentRows.filter((r) => r.action.key === "COLLECT_DO")
+        .length,
+      issueRo: allShipmentRows.filter((r) => r.action.key === "ISSUE_RO").length,
+      roHolds: allShipmentRows.filter((r) => r.action.key === "RO_HOLD").length,
+    }),
+    [allShipmentRows, allContractRows],
+  );
+
+  const statusOptions = useMemo(() => {
+    const source =
+      tab === "shipments"
+        ? allShipmentRows.map((r) => r.status)
+        : allContractRows.map((r) => r.status);
+    return [...new Set(source)].sort().map((s) => ({
+      value: s,
+      label: prettyStatus(s),
+    }));
+  }, [tab, allShipmentRows, allContractRows]);
+
+  const matchesShared = useCallback(
+    (
+      r: {
+        reference: string;
+        customerLabel: string;
+        originLabel: string;
+        destinationLabel: string;
+        tradeDirection: string;
+        freightType: string;
+        status: string;
+      },
+      extraSearchFields: string[] = [],
+    ) => {
+      if (direction && r.tradeDirection !== direction) return false;
+      if (freight && r.freightType !== freight) return false;
+      if (status && r.status !== status) return false;
+      const q = query.trim().toLowerCase();
+      if (!q) return true;
+      return [
+        r.reference,
+        r.customerLabel,
+        r.originLabel,
+        r.destinationLabel,
+        prettyStatus(r.status),
+        ...extraSearchFields,
+      ].some((v) => v.toLowerCase().includes(q));
+    },
+    [direction, freight, status, query],
+  );
+
+  const shipmentRows = useMemo(
+    () =>
+      allShipmentRows.filter(
+        (r) =>
+          (!action || r.action.key === action) &&
+          // Shipments also match the parent contract reference in search.
+          matchesShared(r, [r.contractReference]),
+      ),
+    [allShipmentRows, action, matchesShared],
+  );
+
+  const contractRows = useMemo(
+    () => allContractRows.filter((r) => matchesShared(r)),
+    [allContractRows, matchesShared],
+  );
+
+  const rows = tab === "shipments" ? shipmentRows : contractRows;
   const isLoading = tab === "contracts" ? contractsLoading : bookingsLoading;
+  const isError = tab === "contracts" ? contractsError : bookingsError;
+  const isFetching = contractsFetching || bookingsFetching;
+  const total = rows.length;
+  const pageCount = Math.max(1, Math.ceil(total / pagination.pageSize));
+  const showEmpty = !isLoading && !isError && total === 0;
+
+  const pagedShipmentRows = useMemo(() => {
+    const start = pagination.pageIndex * pagination.pageSize;
+    return shipmentRows.slice(start, start + pagination.pageSize);
+  }, [shipmentRows, pagination.pageIndex, pagination.pageSize]);
+
+  const pagedContractRows = useMemo(() => {
+    const start = pagination.pageIndex * pagination.pageSize;
+    return contractRows.slice(start, start + pagination.pageSize);
+  }, [contractRows, pagination.pageIndex, pagination.pageSize]);
+
+  const hasFilters = Boolean(query || direction || freight || status || action);
+
+  const clearFilters = useCallback(() => {
+    setQuery("");
+    setDirection(null);
+    setFreight(null);
+    setStatus(null);
+    setAction(null);
+    resetPage();
+  }, [resetPage]);
+
+  const handleRefresh = useCallback(() => {
+    void refetchContracts();
+    void refetchBookings();
+  }, [refetchContracts, refetchBookings]);
+
+  const openDetail = useCallback(
+    (id: string) => navigate(`/dashboard/gl-djibouti/clearance/${id}`),
+    [navigate],
+  );
+
+  const shipmentColumns: ColumnDef<ShipmentRow>[] = useMemo(
+    () => [
+      {
+        id: "booking",
+        header: () => <span className={bookingTable.headerCell}>Booking</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <div className="flex items-center gap-3 py-1.5">
+              <div className={bookingTable.rowIcon}>
+                <PackageCheck className="size-4" strokeWidth={1.75} />
+              </div>
+              <div className="min-w-0">
+                <p className="truncate font-medium text-foreground">
+                  {r.reference}
+                </p>
+                <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
+                  <User className="size-3 shrink-0 opacity-70" />
+                  {r.customerLabel}
+                </p>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        id: "contract",
+        header: () => <span className={bookingTable.headerCell}>Contract</span>,
+        cell: ({ row }) => (
+          <Group gap={6} wrap="nowrap">
+            <FileText size={13} className="shrink-0 text-muted-foreground" />
+            <Text size="sm" truncate maw={140}>
+              {row.original.contractReference}
+            </Text>
+          </Group>
+        ),
+      },
+      {
+        id: "route",
+        header: () => <span className={bookingTable.headerCell}>Route</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <RouteCell
+              origin={r.originLabel}
+              destination={r.destinationLabel}
+              direction={r.tradeDirection}
+              freightType={r.freightType}
+            />
+          );
+        },
+      },
+      {
+        id: "cargo",
+        header: () => <span className={bookingTable.headerCell}>Cargo</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <Stack gap={4} py={2}>
+              <Group gap={6} wrap="nowrap">
+                <Weight size={13} className="shrink-0 text-muted-foreground" />
+                <Text size="sm">{r.weightTons} t</Text>
+              </Group>
+              {r.isHazardous ? (
+                <Badge
+                  size="xs"
+                  variant="light"
+                  color="red"
+                  radius="sm"
+                  leftSection={<AlertTriangle size={10} />}
+                >
+                  Hazardous
+                </Badge>
+              ) : null}
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "action",
+        header: () => <span className={bookingTable.headerCell}>DJ action</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          const badge = (
+            <Badge size="sm" variant="light" color={r.action.color} radius="sm">
+              {r.action.label}
+            </Badge>
+          );
+          return (
+            <Stack gap={4} py={2}>
+              {r.roHoldReason ? (
+                <Tooltip label={r.roHoldReason} withArrow multiline maw={280}>
+                  {badge}
+                </Tooltip>
+              ) : (
+                badge
+              )}
+              <Text size="xs" c="dimmed">
+                {phaseLabel(r.phase)}
+              </Text>
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "status",
+        header: () => <span className={bookingTable.headerCell}>Status</span>,
+        cell: ({ row }) => (
+          <Badge
+            size="sm"
+            variant="light"
+            color={statusColor(row.original.status)}
+            radius="sm"
+          >
+            {prettyStatus(row.original.status)}
+          </Badge>
+        ),
+      },
+      {
+        id: "scheduled",
+        header: () => <span className={bookingTable.headerCell}>Scheduled</span>,
+        cell: ({ row }) => (
+          <Group gap={6} wrap="nowrap">
+            <CalendarClock size={13} className="shrink-0 text-muted-foreground" />
+            <Text size="sm" c="dimmed">
+              {formatDate(row.original.scheduledDate)}
+            </Text>
+          </Group>
+        ),
+      },
+      {
+        id: "chevron",
+        size: 40,
+        header: "",
+        cell: () => (
+          <Group justify="flex-end" pr="xs">
+            <ChevronRight size={16} className="text-muted-foreground" />
+          </Group>
+        ),
+      },
+    ],
+    [],
+  );
+
+  const contractColumns: ColumnDef<ContractRow>[] = useMemo(
+    () => [
+      {
+        id: "contract",
+        header: () => <span className={bookingTable.headerCell}>Contract</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <div className="flex items-center gap-3 py-1.5">
+              <div className={bookingTable.rowIcon}>
+                <Ship className="size-4" strokeWidth={1.75} />
+              </div>
+              <div className="min-w-0">
+                <p className="truncate font-medium text-foreground">
+                  {r.reference}
+                </p>
+                <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
+                  <User className="size-3 shrink-0 opacity-70" />
+                  {r.customerLabel}
+                </p>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        id: "route",
+        header: () => <span className={bookingTable.headerCell}>Route</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <RouteCell
+              origin={r.originLabel}
+              destination={r.destinationLabel}
+              direction={r.tradeDirection}
+              freightType={r.freightType}
+            />
+          );
+        },
+      },
+      {
+        id: "service",
+        header: () => <span className={bookingTable.headerCell}>Service</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <Stack gap={4} py={2} style={{ minWidth: 0 }}>
+              <Text size="sm" fw={500} truncate maw={160}>
+                {r.serviceTypeName}
+              </Text>
+              {r.customs ? (
+                <Badge
+                  size="xs"
+                  variant="light"
+                  color="edr-green"
+                  radius="sm"
+                  leftSection={<ShieldCheck size={11} />}
+                >
+                  Customs
+                </Badge>
+              ) : (
+                <Badge size="xs" variant="light" color="gray" radius="sm">
+                  No customs
+                </Badge>
+              )}
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "clearance",
+        header: () => <span className={bookingTable.headerCell}>Clearance</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <Stack gap={4} py={2}>
+              <Badge
+                size="sm"
+                variant="light"
+                color={statusColor(r.clearanceStatus)}
+                radius="sm"
+              >
+                {prettyStatus(r.clearanceStatus)}
+              </Badge>
+              <Text size="xs" c="dimmed">
+                {phaseLabel(r.phase)}
+                {r.cycleNumber > 1 ? ` · Cycle ${r.cycleNumber}` : ""}
+              </Text>
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "status",
+        header: () => <span className={bookingTable.headerCell}>Status</span>,
+        cell: ({ row }) => (
+          <Badge
+            size="sm"
+            variant="light"
+            color={statusColor(row.original.status)}
+            radius="sm"
+          >
+            {prettyStatus(row.original.status)}
+          </Badge>
+        ),
+      },
+      {
+        id: "validity",
+        header: () => <span className={bookingTable.headerCell}>Validity</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <Stack gap={2} py={2}>
+              <Group gap={6} wrap="nowrap">
+                <CalendarClock
+                  size={13}
+                  className="shrink-0 text-muted-foreground"
+                />
+                <Text size="sm" c="dimmed">
+                  {r.validUntil
+                    ? `Until ${formatDate(r.validUntil)}`
+                    : r.validityDays
+                      ? `${r.validityDays} days`
+                      : "—"}
+                </Text>
+              </Group>
+              {r.estimatedShipmentDate ? (
+                <Text size="xs" c="dimmed">
+                  Est. shipment {formatDate(r.estimatedShipmentDate)}
+                </Text>
+              ) : null}
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "chevron",
+        size: 40,
+        header: "",
+        cell: () => (
+          <Group justify="flex-end" pr="xs">
+            <ChevronRight size={16} className="text-muted-foreground" />
+          </Group>
+        ),
+      },
+    ],
+    [],
+  );
 
   return (
     <PageContainer>
@@ -49,123 +741,274 @@ export default function GlDjiboutiClearanceListPage() {
         <PageHeader
           title="GL Djibouti — Clearance"
           subtitle="Customs contracts and shipment bookings handed off to Djibouti GL."
+          action={
+            <ActionIcon
+              variant="default"
+              size="lg"
+              radius="md"
+              loading={isFetching}
+              onClick={handleRefresh}
+              aria-label="Refresh"
+            >
+              <RefreshCw size={16} />
+            </ActionIcon>
+          }
         />
 
-        <SegmentedControl
-          value={tab}
-          onChange={(v) => setTab(v as QueueTab)}
-          radius="md"
-          data={[
+        <KpiStrip
+          loading={contractsLoading || bookingsLoading}
+          items={[
             {
-              value: "shipments",
-              label: (
-                <Group gap={6} wrap="nowrap">
-                  <PackageCheck size={15} />
-                  <Box visibleFrom="sm">Shipments</Box>
-                  <Badge size="sm" radius="sm" variant="light" color="edr-green">
-                    {bookingItems.length}
-                  </Badge>
-                </Group>
-              ),
+              label: "Shipments in queue",
+              value: metrics.shipments,
+              icon: PackageCheck,
+              color: "blue",
             },
             {
-              value: "contracts",
-              label: (
-                <Group gap={6} wrap="nowrap">
-                  <FileSignature size={15} />
-                  <Box visibleFrom="sm">Contracts</Box>
-                  <Badge size="sm" radius="sm" variant="light" color="gray">
-                    {contractItems.length}
-                  </Badge>
-                </Group>
-              ),
+              label: "Contracts in queue",
+              value: metrics.contracts,
+              icon: FileSignature,
+              color: "edr-green",
+            },
+            {
+              label: "Imports — collect DO",
+              value: metrics.collectDo,
+              icon: Truck,
+              color: "yellow",
+            },
+            {
+              label: "Exports — issue RO",
+              value: metrics.issueRo,
+              icon: ShipWheel,
+              color: "blue",
+            },
+            {
+              label: "RO amendment holds",
+              value: metrics.roHolds,
+              icon: AlertTriangle,
+              color: "red",
             },
           ]}
         />
 
-        {isLoading ? (
-          <Group justify="center" py={60}>
-            <Loader color="edr-green" />
-          </Group>
-        ) : tab === "contracts" ? (
-          <Stack gap="sm">
-            {contractItems.length === 0 ? (
-              <Text c="dimmed" ta="center" py="xl">
-                No Djibouti customs contracts yet.
-              </Text>
+        <Card p={0} withBorder shadow="sm" radius="lg">
+          <Stack gap={0}>
+            <Box px="md" pt="md">
+              <SegmentedControl
+                size="sm"
+                value={tab}
+                onChange={(v) => {
+                  setTab(v as QueueTab);
+                  setStatus(null);
+                  setAction(null);
+                  resetPage();
+                }}
+                radius="md"
+                data={[
+                  {
+                    value: "shipments",
+                    label: (
+                      <Group gap={6} wrap="nowrap">
+                        <PackageCheck size={15} />
+                        <Box visibleFrom="sm">Shipments</Box>
+                        <Badge size="sm" radius="sm" variant="light" color="edr-green">
+                          {allShipmentRows.length}
+                        </Badge>
+                      </Group>
+                    ),
+                  },
+                  {
+                    value: "contracts",
+                    label: (
+                      <Group gap={6} wrap="nowrap">
+                        <FileSignature size={15} />
+                        <Box visibleFrom="sm">Contracts</Box>
+                        <Badge size="sm" radius="sm" variant="light" color="gray">
+                          {allContractRows.length}
+                        </Badge>
+                      </Group>
+                    ),
+                  },
+                ]}
+              />
+            </Box>
+
+            <Box px="md" pt="md" pb="sm">
+              <Group gap="sm" wrap="wrap">
+                <TextInput
+                  placeholder="Search reference, customer, route, or status…"
+                  leftSection={<Search size={18} />}
+                  value={query}
+                  onChange={(e) => {
+                    setQuery(e.currentTarget.value);
+                    resetPage();
+                  }}
+                  rightSection={
+                    query ? (
+                      <ActionIcon
+                        size="sm"
+                        color="gray"
+                        radius="md"
+                        variant="transparent"
+                        onClick={() => {
+                          setQuery("");
+                          resetPage();
+                        }}
+                      >
+                        <X size={16} />
+                      </ActionIcon>
+                    ) : null
+                  }
+                  radius="lg"
+                  style={{ flex: 1, minWidth: 220 }}
+                />
+                <Select
+                  placeholder="Direction"
+                  data={[
+                    { value: "IMPORT", label: "Import" },
+                    { value: "EXPORT", label: "Export" },
+                  ]}
+                  value={direction}
+                  onChange={(v) => {
+                    setDirection(v);
+                    resetPage();
+                  }}
+                  clearable
+                  radius="lg"
+                  w={130}
+                />
+                <Select
+                  placeholder="Freight"
+                  data={[
+                    { value: "CONTAINER", label: "Container" },
+                    { value: "BULK", label: "Bulk" },
+                  ]}
+                  value={freight}
+                  onChange={(v) => {
+                    setFreight(v);
+                    resetPage();
+                  }}
+                  clearable
+                  radius="lg"
+                  w={130}
+                />
+                <Select
+                  placeholder="Status"
+                  data={statusOptions}
+                  value={status}
+                  onChange={(v) => {
+                    setStatus(v);
+                    resetPage();
+                  }}
+                  clearable
+                  radius="lg"
+                  w={190}
+                />
+                {tab === "shipments" ? (
+                  <Select
+                    placeholder="DJ action"
+                    data={DJ_ACTION_OPTIONS}
+                    value={action}
+                    onChange={(v) => {
+                      setAction(v);
+                      resetPage();
+                    }}
+                    clearable
+                    radius="lg"
+                    w={180}
+                  />
+                ) : null}
+                {hasFilters ? (
+                  <Button
+                    variant="subtle"
+                    color="gray"
+                    size="compact-sm"
+                    radius="md"
+                    leftSection={<X size={14} />}
+                    onClick={clearFilters}
+                  >
+                    Clear
+                  </Button>
+                ) : null}
+                <Text size="sm" c="dimmed" ml="auto">
+                  {total} record{total !== 1 ? "s" : ""}
+                </Text>
+              </Group>
+            </Box>
+
+            {showEmpty ? (
+              <Stack align="center" gap={8} py={48}>
+                <ThemeIcon variant="light" color="gray" radius="xl" size={48}>
+                  <Inbox size={22} />
+                </ThemeIcon>
+                <Text c="dimmed">
+                  {hasFilters
+                    ? "No records match these filters."
+                    : tab === "contracts"
+                      ? "No Djibouti customs contracts yet."
+                      : "No shipment bookings awaiting a Djibouti action."}
+                </Text>
+                {hasFilters ? (
+                  <Button
+                    variant="light"
+                    color="gray"
+                    size="compact-sm"
+                    radius="md"
+                    onClick={clearFilters}
+                  >
+                    Clear filters
+                  </Button>
+                ) : null}
+              </Stack>
             ) : (
-              contractItems.map((c) => (
-                <Card
-                  key={c.id}
-                  withBorder
-                  radius="md"
-                  padding="md"
-                  style={{ cursor: "pointer" }}
-                  onClick={() => navigate(`/dashboard/gl-djibouti/clearance/${c.id}`)}
-                >
-                  <Group justify="space-between" wrap="nowrap">
-                    <Group gap="sm">
-                      <Ship size={18} className="text-[color:var(--freight-brand)]" />
-                      <div>
-                        <Text fw={700}>{c.reference}</Text>
-                        <Text size="sm" c="dimmed">
-                          {c.tradeDirection} · {prettyStatus(c.status)}
-                        </Text>
-                      </div>
-                    </Group>
-                    <Group gap="xs">
-                      <Badge variant="light" color="edr-green">
-                        Contract
-                      </Badge>
-                      <ChevronRight size={18} className="text-muted-foreground" />
-                    </Group>
-                  </Group>
-                </Card>
-              ))
+              <Box style={{ overflowX: "auto" }} px="xs" pb="xs">
+                {tab === "shipments" ? (
+                  <DataTable<ShipmentRow, unknown>
+                    columns={shipmentColumns}
+                    data={pagedShipmentRows}
+                    status={isLoading ? "loading" : isError ? "error" : "success"}
+                    onRowClick={(row) => openDetail(row.id)}
+                    pagination={{
+                      pageIndex: pagination.pageIndex,
+                      pageSize: pagination.pageSize,
+                      pageCount,
+                      totalCount: total,
+                    }}
+                    tableOptions={{
+                      state: { pagination },
+                      onPaginationChange: setPagination,
+                      manualPagination: true,
+                      pageCount,
+                    }}
+                    containerClassName="border-0 shadow-none bg-transparent"
+                    footer={DataTableFooter}
+                  />
+                ) : (
+                  <DataTable<ContractRow, unknown>
+                    columns={contractColumns}
+                    data={pagedContractRows}
+                    status={isLoading ? "loading" : isError ? "error" : "success"}
+                    onRowClick={(row) => openDetail(row.id)}
+                    pagination={{
+                      pageIndex: pagination.pageIndex,
+                      pageSize: pagination.pageSize,
+                      pageCount,
+                      totalCount: total,
+                    }}
+                    tableOptions={{
+                      state: { pagination },
+                      onPaginationChange: setPagination,
+                      manualPagination: true,
+                      pageCount,
+                    }}
+                    containerClassName="border-0 shadow-none bg-transparent"
+                    footer={DataTableFooter}
+                  />
+                )}
+              </Box>
             )}
           </Stack>
-        ) : (
-          <Stack gap="sm">
-            {bookingItems.length === 0 ? (
-              <Text c="dimmed" ta="center" py="xl">
-                No shipment bookings awaiting a Djibouti action.
-              </Text>
-            ) : (
-              bookingItems.map((b) => (
-                <Card
-                  key={b.id}
-                  withBorder
-                  radius="md"
-                  padding="md"
-                  style={{ cursor: "pointer" }}
-                  onClick={() => navigate(`/dashboard/gl-djibouti/clearance/${b.id}`)}
-                >
-                  <Group justify="space-between" wrap="nowrap">
-                    <Group gap="sm">
-                      <PackageCheck
-                        size={18}
-                        className="text-[color:var(--freight-brand)]"
-                      />
-                      <div>
-                        <Text fw={700}>{b.reference}</Text>
-                        <Text size="sm" c="dimmed">
-                          {b.tradeDirection} · {prettyStatus(b.status)}
-                          {b.company?.name ? ` · ${b.company.name}` : ""}
-                        </Text>
-                      </div>
-                    </Group>
-                    <Group gap="xs">
-                      <Badge variant="light" color="blue">
-                        Shipment
-                      </Badge>
-                      <ChevronRight size={18} className="text-muted-foreground" />
-                    </Group>
-                  </Group>
-                </Card>
-              ))
-            )}
-          </Stack>
-        )}
+        </Card>
       </Stack>
     </PageContainer>
   );
diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx
index 812d68f0d..7f2bf52d8 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx
@@ -6,14 +6,26 @@ import {
   Badge,
   Box,
   Button,
+  CloseButton,
   Group,
   Modal,
+  Paper,
+  SegmentedControl,
+  Select,
   Stack,
   Text,
   Textarea,
   TextInput,
 } from "@mantine/core";
-import { Inbox, PackageSearch, RefreshCw, Search } from "lucide-react";
+import { DateInput } from "@mantine/dates";
+import {
+  ArrowUpDown,
+  FilterX,
+  Inbox,
+  PackageSearch,
+  RefreshCw,
+  Search,
+} from "lucide-react";
 import { DataTable, type ColumnDef } from "@edr/ui-common";
 import type { Freight } from "@edr/types";
 
@@ -41,6 +53,17 @@ const fmtDate = (iso?: string | null) =>
       }).format(new Date(iso))
     : "—";
 
+const fmtDateTime = (iso?: string | null) =>
+  iso
+    ? new Intl.DateTimeFormat("en-GB", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      }).format(new Date(iso))
+    : "—";
+
 function summarizeLines(lines: Freight.RequestedShipmentLines): string {
   if (lines.containers?.length) {
     return lines.containers
@@ -56,10 +79,46 @@ function summarizeLines(lines: Freight.RequestedShipmentLines): string {
   return "—";
 }
 
+const STATUS_META: Record<
+  Freight.BookingRequestStatus,
+  { label: string; color: string }
+> = {
+  PENDING: { label: "Pending", color: "yellow" },
+  ACCEPTED: { label: "Accepted", color: "edr-green" },
+  REJECTED: { label: "Rejected", color: "red" },
+  CANCELLED: { label: "Cancelled", color: "gray" },
+};
+
+type StatusFilter = "ALL" | Freight.BookingRequestStatus;
+type CargoFilter = "ALL" | "CONTAINER" | "BULK";
+type SortKey =
+  | "submitted-desc"
+  | "submitted-asc"
+  | "preferred-asc"
+  | "preferred-desc"
+  | "reference";
+
+const SORT_OPTIONS: Array<{ value: SortKey; label: string }> = [
+  { value: "submitted-desc", label: "Newest first" },
+  { value: "submitted-asc", label: "Oldest first" },
+  { value: "preferred-asc", label: "Preferred date (soonest)" },
+  { value: "preferred-desc", label: "Preferred date (latest)" },
+  { value: "reference", label: "Reference A–Z" },
+];
+
+const time = (iso?: string | null) => (iso ? new Date(iso).getTime() : 0);
+
 export default function ShipmentRequestsPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+
   const [query, setQuery] = useState("");
+  const [status, setStatus] = useState<StatusFilter>("PENDING");
+  const [cargo, setCargo] = useState<CargoFilter>("ALL");
+  const [preferredFrom, setPreferredFrom] = useState<Date | null>(null);
+  const [preferredTo, setPreferredTo] = useState<Date | null>(null);
+  const [sort, setSort] = useState<SortKey>("submitted-desc");
+
   const [rejectTarget, setRejectTarget] = useState<ShipmentListRow | null>(null);
   const [rejectNote, setRejectNote] = useState("");
   const [acceptTarget, setAcceptTarget] = useState<ShipmentListRow | null>(null);
@@ -80,26 +139,132 @@ export default function ShipmentRequestsPage() {
     },
   });
 
+  const allRows = useMemo<ShipmentListRow[]>(
+    () =>
+      (data ?? []).map((r) => {
+        const lines = r.requestedLines ?? {};
+        return {
+          id: r.id,
+          reference: r.reference || r.id.slice(0, 8),
+          contractId: r.contractId,
+          contractReference: r.contract?.reference ?? r.contractId,
+          scheduledDate: r.scheduledDate,
+          summary: summarizeLines(lines),
+          status: r.status,
+          createdBookingId: r.createdBookingId,
+          createdAt: r.createdAt,
+          customerName: r.contract?.company?.name ?? null,
+          freightKind: lines.containers?.length
+            ? "CONTAINER"
+            : lines.bulk
+              ? "BULK"
+              : r.contract?.freightType === "BULK"
+                ? "BULK"
+                : "CONTAINER",
+          hazardous:
+            (lines.containers ?? []).some((c) => (c.hazardousQuantity ?? 0) > 0) ||
+            (lines.bulk?.hazardousQuantity ?? 0) > 0,
+          reefer: (lines.containers ?? []).some(
+            (c) => (c.reeferQuantity ?? 0) > 0,
+          ),
+        };
+      }),
+    [data],
+  );
+
+  // Status counts always reflect the whole queue so the segmented control
+  // reads as a live overview, independent of the other filters.
+  const counts = useMemo(() => {
+    const c: Record<StatusFilter, number> = {
+      ALL: allRows.length,
+      PENDING: 0,
+      ACCEPTED: 0,
+      REJECTED: 0,
+      CANCELLED: 0,
+    };
+    allRows.forEach((r) => {
+      c[r.status] += 1;
+    });
+    return c;
+  }, [allRows]);
+
   const rows = useMemo<ShipmentListRow[]>(() => {
-    const all = (data ?? []).map((r) => ({
-      id: r.id,
-      reference: r.reference || r.id.slice(0, 8),
-      contractId: r.contractId,
-      contractReference: r.contract?.reference ?? r.contractId,
-      scheduledDate: r.scheduledDate,
-      summary: summarizeLines(r.requestedLines ?? {}),
-      status: r.status,
-      createdBookingId: r.createdBookingId,
-    }));
+    let out = allRows;
+
+    if (status !== "ALL") out = out.filter((r) => r.status === status);
+    if (cargo !== "ALL") out = out.filter((r) => r.freightKind === cargo);
+
+    // Preferred-date range: rows without a preferred day drop out once a bound
+    // is set — a date filter that keeps dateless rows reads as broken.
+    if (preferredFrom || preferredTo) {
+      const from = preferredFrom ? preferredFrom.getTime() : -Infinity;
+      const to = preferredTo
+        ? preferredTo.getTime() + 24 * 60 * 60 * 1000 - 1
+        : Infinity;
+      out = out.filter((r) => {
+        if (!r.scheduledDate) return false;
+        const t = time(r.scheduledDate);
+        return t >= from && t <= to;
+      });
+    }
+
     const q = query.trim().toLowerCase();
-    if (!q) return all;
-    return all.filter(
-      (r) =>
-        r.reference.toLowerCase().includes(q) ||
-        r.contractReference.toLowerCase().includes(q) ||
-        r.summary.toLowerCase().includes(q),
-    );
-  }, [data, query]);
+    if (q) {
+      out = out.filter(
+        (r) =>
+          r.reference.toLowerCase().includes(q) ||
+          r.contractReference.toLowerCase().includes(q) ||
+          (r.customerName ?? "").toLowerCase().includes(q) ||
+          r.summary.toLowerCase().includes(q),
+      );
+    }
+
+    const sorted = [...out];
+    switch (sort) {
+      case "submitted-asc":
+        sorted.sort((a, b) => time(a.createdAt) - time(b.createdAt));
+        break;
+      case "preferred-asc":
+        // Requests without a preferred day sink to the bottom in both orders.
+        sorted.sort(
+          (a, b) =>
+            (a.scheduledDate ? time(a.scheduledDate) : Infinity) -
+            (b.scheduledDate ? time(b.scheduledDate) : Infinity),
+        );
+        break;
+      case "preferred-desc":
+        sorted.sort(
+          (a, b) =>
+            (b.scheduledDate ? time(b.scheduledDate) : -Infinity) -
+            (a.scheduledDate ? time(a.scheduledDate) : -Infinity),
+        );
+        break;
+      case "reference":
+        sorted.sort((a, b) => a.reference.localeCompare(b.reference));
+        break;
+      default:
+        // Newest submitted on top.
+        sorted.sort((a, b) => time(b.createdAt) - time(a.createdAt));
+    }
+    return sorted;
+  }, [allRows, status, cargo, preferredFrom, preferredTo, query, sort]);
+
+  const filtersActive =
+    query.trim() !== "" ||
+    status !== "PENDING" ||
+    cargo !== "ALL" ||
+    preferredFrom !== null ||
+    preferredTo !== null ||
+    sort !== "submitted-desc";
+
+  const clearFilters = () => {
+    setQuery("");
+    setStatus("PENDING");
+    setCargo("ALL");
+    setPreferredFrom(null);
+    setPreferredTo(null);
+    setSort("submitted-desc");
+  };
 
   const columns = useMemo<ColumnDef<ShipmentListRow>[]>(
     () => [
@@ -108,9 +273,14 @@ export default function ShipmentRequestsPage() {
         header: "Request",
         meta: cellMeta,
         cell: ({ row }) => (
-          <Text size="sm" fw={700} c="dark.5">
-            {row.original.reference}
-          </Text>
+          <Box>
+            <Text size="sm" fw={700} c="dark.5">
+              {row.original.reference}
+            </Text>
+            <Text size="xs" c="dimmed" mt={2}>
+              Submitted {fmtDateTime(row.original.createdAt)}
+            </Text>
+          </Box>
         ),
       },
       {
@@ -118,9 +288,16 @@ export default function ShipmentRequestsPage() {
         header: "Contract",
         meta: cellMeta,
         cell: ({ row }) => (
-          <Text size="sm" c="gray.7">
-            {row.original.contractReference}
-          </Text>
+          <Box>
+            <Text size="sm" c="gray.7">
+              {row.original.contractReference}
+            </Text>
+            {row.original.customerName ? (
+              <Text size="xs" c="dimmed" mt={2}>
+                {row.original.customerName}
+              </Text>
+            ) : null}
+          </Box>
         ),
       },
       {
@@ -128,9 +305,21 @@ export default function ShipmentRequestsPage() {
         header: "Requested",
         meta: cellMeta,
         cell: ({ row }) => (
-          <Badge variant="light" color="edr-green" radius="sm">
-            {row.original.summary}
-          </Badge>
+          <Group gap={6} wrap="wrap">
+            <Badge variant="light" color="edr-green" radius="sm">
+              {row.original.summary}
+            </Badge>
+            {row.original.hazardous ? (
+              <Badge variant="light" color="red" radius="sm">
+                Hazardous
+              </Badge>
+            ) : null}
+            {row.original.reefer ? (
+              <Badge variant="light" color="blue" radius="sm">
+                Reefer
+              </Badge>
+            ) : null}
+          </Group>
         ),
       },
       {
@@ -141,6 +330,19 @@ export default function ShipmentRequestsPage() {
           <Text size="sm">{fmtDate(row.original.scheduledDate)}</Text>
         ),
       },
+      {
+        id: "status",
+        header: "Status",
+        meta: cellMeta,
+        cell: ({ row }) => {
+          const meta = STATUS_META[row.original.status];
+          return (
+            <Badge variant="light" color={meta.color} radius="sm">
+              {meta.label}
+            </Badge>
+          );
+        },
+      },
       {
         id: "actions",
         header: () => <span className={ruleEngineTable.headerCell}>Action</span>,
@@ -193,6 +395,8 @@ export default function ShipmentRequestsPage() {
     [navigate],
   );
 
+  const hasAnyRequests = allRows.length > 0;
+
   return (
     <PageContainer>
       <Stack gap="lg">
@@ -206,7 +410,7 @@ export default function ShipmentRequestsPage() {
               radius="sm"
               leftSection={<PackageSearch size={13} />}
             >
-              {rows.length} pending
+              {counts.PENDING} pending
             </Badge>
           }
           action={
@@ -223,16 +427,108 @@ export default function ShipmentRequestsPage() {
           }
         />
 
-        <TextInput
-          radius="md"
-          maw={360}
-          placeholder="Search request, contract, cargo…"
-          leftSection={<Search size={15} />}
-          value={query}
-          onChange={(e) => setQuery(e.currentTarget.value)}
-        />
+        <Paper withBorder radius="lg" p="md" style={{ borderColor: "#E6ECF2" }}>
+          <Stack gap="sm">
+            <Group gap="sm" wrap="wrap">
+              <TextInput
+                radius="md"
+                style={{ flex: 1, minWidth: 220 }}
+                placeholder="Search request, contract, customer, cargo…"
+                leftSection={<Search size={15} />}
+                rightSection={
+                  query ? (
+                    <CloseButton
+                      size="sm"
+                      aria-label="Clear search"
+                      onClick={() => setQuery("")}
+                    />
+                  ) : null
+                }
+                value={query}
+                onChange={(e) => setQuery(e.currentTarget.value)}
+              />
+              <Select
+                radius="md"
+                w={150}
+                value={cargo}
+                onChange={(v) => setCargo((v as CargoFilter) ?? "ALL")}
+                data={[
+                  { value: "ALL", label: "All cargo" },
+                  { value: "CONTAINER", label: "Containers" },
+                  { value: "BULK", label: "Bulk" },
+                ]}
+                allowDeselect={false}
+                aria-label="Cargo type"
+              />
+              <DateInput
+                radius="md"
+                w={150}
+                placeholder="Preferred from"
+                value={preferredFrom}
+                onChange={(v) => setPreferredFrom(v ? new Date(v) : null)}
+                maxDate={preferredTo ?? undefined}
+                clearable
+                aria-label="Preferred date from"
+              />
+              <DateInput
+                radius="md"
+                w={150}
+                placeholder="Preferred to"
+                value={preferredTo}
+                onChange={(v) => setPreferredTo(v ? new Date(v) : null)}
+                minDate={preferredFrom ?? undefined}
+                clearable
+                aria-label="Preferred date to"
+              />
+              <Select
+                radius="md"
+                w={215}
+                leftSection={<ArrowUpDown size={14} />}
+                value={sort}
+                onChange={(v) => setSort((v as SortKey) ?? "submitted-desc")}
+                data={SORT_OPTIONS}
+                allowDeselect={false}
+                aria-label="Sort by"
+              />
+            </Group>
 
-        {rows.length === 0 && !isLoading ? (
+            <Group justify="space-between" gap="sm" wrap="wrap">
+              <SegmentedControl
+                radius="md"
+                size="xs"
+                value={status}
+                onChange={(v) => setStatus(v as StatusFilter)}
+                data={[
+                  { value: "ALL", label: `All · ${counts.ALL}` },
+                  { value: "PENDING", label: `Pending · ${counts.PENDING}` },
+                  { value: "ACCEPTED", label: `Accepted · ${counts.ACCEPTED}` },
+                  { value: "REJECTED", label: `Rejected · ${counts.REJECTED}` },
+                  { value: "CANCELLED", label: `Cancelled · ${counts.CANCELLED}` },
+                ]}
+              />
+              <Group gap="sm">
+                <Text size="sm" c="dimmed">
+                  {rows.length} of {allRows.length} request
+                  {allRows.length === 1 ? "" : "s"}
+                </Text>
+                {filtersActive ? (
+                  <Button
+                    variant="subtle"
+                    color="gray"
+                    size="compact-sm"
+                    radius="md"
+                    leftSection={<FilterX size={14} />}
+                    onClick={clearFilters}
+                  >
+                    Clear filters
+                  </Button>
+                ) : null}
+              </Group>
+            </Group>
+          </Stack>
+        </Paper>
+
+        {rows.length === 0 && !isLoading && !isError ? (
           <Box
             py={56}
             style={{
@@ -242,9 +538,28 @@ export default function ShipmentRequestsPage() {
             }}
           >
             <Inbox size={26} className="text-muted-foreground" />
-            <Text c="dimmed" mt="sm">
-              No pending shipment requests.
-            </Text>
+            {hasAnyRequests ? (
+              <>
+                <Text c="dimmed" mt="sm">
+                  No requests match the current filters.
+                </Text>
+                <Button
+                  variant="subtle"
+                  color="gray"
+                  size="compact-sm"
+                  radius="md"
+                  mt="xs"
+                  leftSection={<FilterX size={14} />}
+                  onClick={clearFilters}
+                >
+                  Clear filters
+                </Button>
+              </>
+            ) : (
+              <Text c="dimmed" mt="sm">
+                No shipment requests yet.
+              </Text>
+            )}
           </Box>
         ) : (
           <DataTable
diff --git a/apps/edr-freight-web/backoffice/src/types/booking.ts b/apps/edr-freight-web/backoffice/src/types/booking.ts
index dc9a29db8..c31118cc7 100644
--- a/apps/edr-freight-web/backoffice/src/types/booking.ts
+++ b/apps/edr-freight-web/backoffice/src/types/booking.ts
@@ -201,6 +201,11 @@ export interface BookingDetail {
   latestChangeRequestNote?: string | null;
   nextStep?: BookingNextStep | null;
   paymentReceipt?: InAppPaymentReceipt;
+  /** Phased-clearance fields the ET/DJ queue rows surface (GENERAL customs bookings). */
+  clearanceCurrentPhase?: string | null;
+  roHoldReason?: string | null;
+  roAmendmentRequestedAt?: string | null;
+  preClearanceFinalizedAt?: string | null;
   createdAt: string;
   updatedAt: string;
   // customer?: BookingNamedRef & { companyName?: string };
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx b/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
index 4a073a59a..699b143fb 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
@@ -15,6 +15,7 @@ import {
   Modal,
   Paper,
   Stack,
+  Switch,
   Text,
   TextInput,
   Textarea,
@@ -32,6 +33,7 @@ import {
   MapPin,
   Package,
   Receipt,
+  Repeat,
   X,
 } from "lucide-react";
 
@@ -230,7 +232,12 @@ function NewShipmentBookingForm({
   );
 
   const form = useForm<ShipmentFormInputValues, any, ShipmentFormValues>({
-    defaultValues: initialShipmentFormValues,
+    defaultValues: {
+      ...initialShipmentFormValues,
+      // Seed the equipment-return toggle from the contract; the customer can
+      // still flip it per shipment.
+      withReturn: contract.equipmentReturn === "WITH_RETURN",
+    },
     resolver: zodResolver(
       createShipmentFormSchema({
         isContainer: contract.freightType === "CONTAINER",
@@ -276,8 +283,10 @@ function NewShipmentBookingForm({
       ...(values.scheduledDate
         ? { scheduledDate: new Date(values.scheduledDate).toISOString() }
         : {}),
+      // Equipment return is a container concern — bulk keeps the contract default.
       ...(isContainer
         ? {
+            equipmentReturn: values.withReturn ? "WITH_RETURN" : "WITHOUT_RETURN",
             containers: values.containers
               .filter((l) => Number(l.quantity) >= 1)
               .map((l) => ({
@@ -405,6 +414,9 @@ function NewShipmentBookingForm({
           <Stack gap="lg" className="mx-auto max-w-4xl">
             <RouteStep form={form} contract={contract} routes={routes} />
             <CargoStep form={form} contract={contract} />
+            {contract.freightType === "CONTAINER" && (
+              <EquipmentReturnStep form={form} />
+            )}
             <ScheduleStep form={form} contract={contract} routes={routes} />
             <NotesSection form={form} />
           </Stack>
@@ -1187,6 +1199,78 @@ function CargoStep({
   );
 }
 
+function EquipmentReturnStep({ form }: { form: ShipmentForm }) {
+  return (
+    <StepCard>
+      <StepHeader
+        icon={<Repeat size={22} />}
+        title="Equipment Return"
+        description="Choose whether the empty container(s) come back to EDR after unloading."
+      />
+      <Controller
+        name="withReturn"
+        control={form.control}
+        render={({ field }) => {
+          const on = field.value ?? false;
+          return (
+            <Paper
+              withBorder
+              radius="md"
+              p="md"
+              style={{
+                borderColor: on ? "#CDEBDD" : "#E6ECF2",
+                background: on ? "#F6FBF8" : "white",
+                cursor: "pointer",
+                transition: "border-color 150ms ease, background 150ms ease",
+              }}
+              onClick={() => field.onChange(!on)}
+            >
+              <Group justify="space-between" wrap="nowrap" gap="md">
+                <Group gap={13} wrap="nowrap" align="flex-start">
+                  <Box
+                    style={{
+                      width: 38,
+                      height: 38,
+                      flexShrink: 0,
+                      borderRadius: 11,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      background: on ? "#ECF6F1" : "#F1F4F7",
+                      color: on ? "#0A6F4D" : "#6B7C8E",
+                    }}
+                  >
+                    <Repeat size={18} />
+                  </Box>
+                  <Box>
+                    <Text fz={14} fw={700} c="#10202F">
+                      With return
+                    </Text>
+                    <Text fz={12} c="dimmed" style={{ lineHeight: 1.4 }}>
+                      {on
+                        ? "Container(s) returned to EDR after unloading."
+                        : "Container(s) retained by you after delivery."}
+                    </Text>
+                  </Box>
+                </Group>
+                <Switch
+                  size="md"
+                  color="edr-green"
+                  aria-label="With return"
+                  checked={on}
+                  onChange={(e) => field.onChange(e.currentTarget.checked)}
+                  onClick={(e) => e.stopPropagation()}
+                  style={{ flexShrink: 0 }}
+                />
+              </Group>
+            </Paper>
+          );
+        }}
+      />
+    </StepCard>
+  );
+}
+
 function NotesSection({ form }: { form: ShipmentForm }) {
   return (
     <StepCard>
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/schema.ts b/apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/schema.ts
index c1f9408ea..80c04f081 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/schema.ts
+++ b/apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/schema.ts
@@ -58,6 +58,9 @@ const containerLineSchema = z.object({
 const shipmentFormBase = z.object({
   contractRouteId: z.string().default(""),
   scheduledDate: z.string().default(""),
+  // Container contracts only: return the empty container(s) to EDR after
+  // unloading. Seeded from the contract's equipment return; bulk ignores it.
+  withReturn: z.boolean().default(false),
   containers: z.array(containerLineSchema).default([]),
   cargoWeightTons: z.string().default(""),
   itemCount: z.string().default(""),
@@ -210,6 +213,7 @@ export type ShipmentFormInputValues = z.input<typeof shipmentFormSchema>;
 export const initialShipmentFormValues: DeepPartial<ShipmentFormValues> = {
   contractRouteId: "",
   scheduledDate: "",
+  withReturn: false,
   containers: [],
   cargoWeightTons: "",
   itemCount: "",
@@ -229,6 +233,7 @@ export const shipmentStepFields: Record<
     "itemCount",
     "bulkHazardousQuantity",
     "bulkReeferQuantity",
+    "withReturn",
   ],
   2: ["scheduledDate"],
   3: ["notes"],
diff --git a/packages/types/src/freight/contracts.ts b/packages/types/src/freight/contracts.ts
index 49af6b736..7d3962932 100644
--- a/packages/types/src/freight/contracts.ts
+++ b/packages/types/src/freight/contracts.ts
@@ -705,6 +705,8 @@ export interface CreateBookingUnderContractDto {
   contractRouteId?: string;
   /** Binding shipment day. Omitted for intercity (DOMESTIC) bookings — staff assign a passing train later. */
   scheduledDate?: string;
+  /** "WITH_RETURN" | "WITHOUT_RETURN" — per-shipment override; falls back to the contract's equipment return. */
+  equipmentReturn?: string;
   containers?: CreateBookingContainerLineDto[];
   bulkLines?: CreateBulkLineDto[];
   notes?: string;

From 8321c697ec9afc1912a9991a60b35e7f7787a3df Mon Sep 17 00:00:00 2001
From: Abubeker Yasin <dev.abubeker@gmail.com>
Date: Fri, 10 Jul 2026 13:38:53 +0300
Subject: [PATCH 06/16] feat( auth ): make email optional in signup/login

---
 .../src/modules/auth/auth.dto.ts              | 19 +++++++---
 .../modules/auth/passenger-auth.service.ts    |  7 +++-
 .../portal/src/app/login/page.tsx             | 38 +++++++++++++------
 .../portal/src/app/register/page.tsx          | 17 +++++++--
 4 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/apps/edr-passenger-api/src/modules/auth/auth.dto.ts b/apps/edr-passenger-api/src/modules/auth/auth.dto.ts
index d0a691b0f..d7d80df94 100644
--- a/apps/edr-passenger-api/src/modules/auth/auth.dto.ts
+++ b/apps/edr-passenger-api/src/modules/auth/auth.dto.ts
@@ -1,4 +1,4 @@
-import { IsEmail, IsString, ValidateNested } from 'class-validator';
+import { IsEmail, IsNotEmpty, IsString, ValidateNested } from 'class-validator';
 import { Type } from 'class-transformer';
 import { ApiProperty } from '@nestjs/swagger';
 
@@ -13,8 +13,13 @@ export class NameDto {
 }
 
 export class RegisterDto {
-  @ApiProperty({ example: 'kelemu@email.com' })
-  @IsEmail()
+  // Accepts an email OR a phone number. When a passenger signs up without an email,
+  // the portal passes the phone number here (and as `username`) — the IAM only requires
+  // a non-empty string, so a phone value is a valid account identifier. Kept as
+  // @IsString/@IsNotEmpty (not @IsEmail) so that phone-as-email passes the ValidationPipe.
+  @ApiProperty({ example: 'kelemu@email.com', description: 'Email or, when the user has no email, their phone number' })
+  @IsString()
+  @IsNotEmpty()
   email: string;
 
   @ApiProperty({ example: 'kelemu.ketsela' })
@@ -42,8 +47,12 @@ export class ResendRegistrationCodeDto {
 }
 
 export class LoginDto {
-  @ApiProperty({ example: 'kelemu@email.com' })
-  @IsEmail()
+  // Accepts an email OR a phone number in the same field. Passengers who registered
+  // without an email log in with their phone number, which the IAM matches. Kept as
+  // @IsString/@IsNotEmpty (not @IsEmail) so a phone value passes the ValidationPipe.
+  @ApiProperty({ example: 'kelemu@email.com', description: 'Email or phone number' })
+  @IsString()
+  @IsNotEmpty()
   email: string;
 
   @ApiProperty({ example: 'password123', format: 'password' })
diff --git a/apps/edr-passenger-api/src/modules/auth/passenger-auth.service.ts b/apps/edr-passenger-api/src/modules/auth/passenger-auth.service.ts
index 2d20b4503..9c962477b 100644
--- a/apps/edr-passenger-api/src/modules/auth/passenger-auth.service.ts
+++ b/apps/edr-passenger-api/src/modules/auth/passenger-auth.service.ts
@@ -184,8 +184,11 @@ export class PassengerAuthService {
 
     const { token, refreshToken } = iamResult as { token: string; refreshToken: string };
 
+    // `dto.email` may hold an email OR a phone number (passengers without an email log in
+    // with their phone). Match on either so the post-auth lookup works regardless of which
+    // identifier was used.
     const iamRows = await this.dataSource.query<IamUserRow[]>(
-      `SELECT id, email, name, phone_number, metadata FROM iam.users WHERE email = $1 LIMIT 1`,
+      `SELECT id, email, name, phone_number, metadata FROM iam.users WHERE email = $1 OR phone_number = $1 LIMIT 1`,
       [dto.email],
     );
     const iamUser = iamRows[0];
@@ -210,7 +213,7 @@ export class PassengerAuthService {
     return {
       token,
       refreshToken,
-      user: { id: iamUser.id, iamUserId: iamUser.id, email: dto.email, passengerId: passenger.id },
+      user: { id: iamUser.id, iamUserId: iamUser.id, email: iamUser.email, passengerId: passenger.id },
     };
   }
 
diff --git a/apps/edr-passenger-web/portal/src/app/login/page.tsx b/apps/edr-passenger-web/portal/src/app/login/page.tsx
index 9453c39e2..97a595244 100644
--- a/apps/edr-passenger-web/portal/src/app/login/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/login/page.tsx
@@ -7,10 +7,13 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useAuthStore } from '@/lib/auth-store';
 import { useState, Suspense } from 'react';
 import Link from 'next/link';
-import { Train, ShieldCheck } from 'lucide-react';
+import { Train, ShieldCheck, Eye, EyeOff } from 'lucide-react';
 
 const loginSchema = z.object({
-  email: z.string().email('Invalid email address'),
+  // Accepts either an email or a phone number. Passengers who registered without an
+  // email sign in with their phone number, which is sent in the same `email` field —
+  // the IAM matches on either identifier.
+  email: z.string().min(1, 'Phone or email is required'),
   password: z.string().min(6, 'Password must be at least 6 characters'),
 });
 
@@ -22,6 +25,7 @@ function LoginContent() {
   const login = useAuthStore((s) => s.login);
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
 
   const { register, handleSubmit, formState: { errors } } = useForm<LoginForm>({
     resolver: zodResolver(loginSchema as any),
@@ -63,12 +67,13 @@ function LoginContent() {
             )}
 
             <div>
-              <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Email</label>
+              <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Phone or email</label>
               <input
-                type="email"
+                type="text"
                 {...register('email')}
                 className="input-field"
-                placeholder="your@email.com"
+                placeholder="+251912345678 or your@email.com"
+                autoComplete="username"
               />
               {errors.email && (
                 <p className="text-red-500 text-sm mt-1">{errors.email.message}</p>
@@ -77,12 +82,23 @@ function LoginContent() {
 
             <div>
               <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Password</label>
-              <input
-                type="password"
-                {...register('password')}
-                className="input-field"
-                placeholder="••••••••"
-              />
+              <div className="relative">
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  {...register('password')}
+                  className="input-field pr-10"
+                  placeholder="••••••••"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((v) => !v)}
+                  className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+                  aria-label={showPassword ? 'Hide password' : 'Show password'}
+                  tabIndex={-1}
+                >
+                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                </button>
+              </div>
               {errors.password && (
                 <p className="text-red-500 text-sm mt-1">{errors.password.message}</p>
               )}
diff --git a/apps/edr-passenger-web/portal/src/app/register/page.tsx b/apps/edr-passenger-web/portal/src/app/register/page.tsx
index a39810be1..f020d0f31 100644
--- a/apps/edr-passenger-web/portal/src/app/register/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/register/page.tsx
@@ -11,7 +11,13 @@ import { Train, ShieldCheck } from 'lucide-react';
 
 const registerSchema = z.object({
   fullName: z.string().min(2, 'Full name is required'),
-  email: z.string().email('Invalid email address'),
+  // Email is optional. If provided it must be a valid address; if left blank we fall back
+  // to the phone number as the account identifier (see onSubmit).
+  email: z
+    .string()
+    .email('Invalid email address')
+    .optional()
+    .or(z.literal('')),
   phone: z.string().min(9, 'Phone number is required'),
 });
 
@@ -31,9 +37,12 @@ export default function RegisterPage() {
     setLoading(true);
     setError('');
     try {
+      // No email? Use the phone number as the account identifier. The IAM (and our
+      // relaxed RegisterDto) accept any non-empty string in the email field.
+      const email = data.email?.trim() ? data.email.trim() : data.phone;
       const result = await registerUser({
         fullName: data.fullName,
-        email: data.email,
+        email,
         phone: data.phone,
       });
       const params = new URLSearchParams({
@@ -89,7 +98,9 @@ export default function RegisterPage() {
             </div>
 
             <div>
-              <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Email</label>
+              <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
+                Email <span className="text-gray-400 font-normal">(optional)</span>
+              </label>
               <input
                 type="email"
                 {...register('email')}

From 45629e436e7fef8d09e7c84c668284d1373bcc73 Mon Sep 17 00:00:00 2001
From: Marshal <marshal@example.com>
Date: Fri, 10 Jul 2026 11:08:14 +0000
Subject: [PATCH 07/16] merge

---
 .../ContractTemplatesPage.tsx                 | 280 ++++++++++++------
 .../backoffice/src/services/routes.service.ts |  10 +
 2 files changed, 195 insertions(+), 95 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplatesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplatesPage.tsx
index e13c8a741..4a3654aa3 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplatesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplatesPage.tsx
@@ -2,17 +2,25 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   Badge,
+  Box,
   Button,
   Card,
-  Center,
   Group,
-  Loader,
   SimpleGrid,
+  Skeleton,
   Stack,
   Text,
   ThemeIcon,
+  Tooltip,
 } from "@mantine/core";
-import { Boxes, Container, Eye, FileSignature, Pencil } from "lucide-react";
+import {
+  Boxes,
+  Clock,
+  Container,
+  Eye,
+  FileText,
+  Pencil,
+} from "lucide-react";
 
 import { PageContainer, PageHeader } from "@/components/page";
 import { useContractTemplates } from "@/hooks/contract-templates/useContractTemplates";
@@ -25,10 +33,10 @@ const DIRECTION_LABEL: Record<string, string> = {
   INTERCITY: "Intercity",
 };
 
-const DIRECTION_COLOR: Record<string, string> = {
-  IMPORT: "edr-green",
-  EXPORT: "teal",
-  INTERCITY: "lime",
+const DIRECTION_DOT: Record<string, string> = {
+  IMPORT: "var(--mantine-color-blue-5)",
+  EXPORT: "var(--mantine-color-violet-5)",
+  INTERCITY: "var(--mantine-color-orange-5)",
 };
 
 function templateDirection(code: ContractTemplate["code"]): string {
@@ -39,6 +47,14 @@ function isBulk(code: ContractTemplate["code"]): boolean {
   return code.endsWith("_BULK");
 }
 
+function formatUpdated(value: string): string {
+  return new Date(value).toLocaleDateString("en-GB", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+}
+
 export default function ContractTemplatesPage() {
   const navigate = useNavigate();
   const { data: templates, isLoading } = useContractTemplates();
@@ -53,94 +69,20 @@ export default function ContractTemplatesPage() {
         subtitle="The six contract documents generated when a contract is approved — one per trade direction and freight type. Articles are fully editable."
       />
 
-      {isLoading ? (
-        <Center h={320}>
-          <Loader color="edr-green" />
-        </Center>
-      ) : (
-        <SimpleGrid cols={{ base: 1, md: 2, xl: 3 }} spacing="lg">
-          {(templates ?? []).map((template) => {
-            const direction = templateDirection(template.code);
-            return (
-              <Card key={template.code} withBorder radius="xl" padding="lg">
-                <Stack gap="sm" h="100%">
-                  <Group justify="space-between" align="flex-start">
-                    <ThemeIcon
-                      size={44}
-                      radius="md"
-                      variant="light"
-                      color="edr-green"
-                    >
-                      {isBulk(template.code) ? (
-                        <Boxes size={24} />
-                      ) : (
-                        <Container size={24} />
-                      )}
-                    </ThemeIcon>
-                    <Group gap={6}>
-                      <Badge
-                        variant="light"
-                        color={DIRECTION_COLOR[direction] ?? "edr-green"}
-                      >
-                        {DIRECTION_LABEL[direction] ?? direction}
-                      </Badge>
-                      <Badge variant="outline" color="gray">
-                        {isBulk(template.code) ? "Bulk" : "Container"}
-                      </Badge>
-                      {!template.isActive && (
-                        <Badge variant="light" color="red">
-                          Inactive
-                        </Badge>
-                      )}
-                    </Group>
-                  </Group>
-
-                  <div>
-                    <Text fw={700} size="lg">
-                      {template.name}
-                    </Text>
-                    <Text size="sm" c="dimmed" lineClamp={3}>
-                      {template.description || template.documentTitle}
-                    </Text>
-                  </div>
-
-                  <Group gap="xs" mt="auto">
-                    <FileSignature size={14} className="text-edr-primary" />
-                    <Text size="xs" c="dimmed">
-                      {template.articles.length} articles · updated{" "}
-                      {new Date(template.updatedAt).toLocaleDateString("en-GB", {
-                        day: "numeric",
-                        month: "short",
-                        year: "numeric",
-                      })}
-                    </Text>
-                  </Group>
-
-                  <Group grow>
-                    <Button
-                      variant="light"
-                      color="edr-green"
-                      leftSection={<Eye size={16} />}
-                      onClick={() => setPreviewCode(template.code)}
-                    >
-                      Preview
-                    </Button>
-                    <Button
-                      color="edr-green"
-                      leftSection={<Pencil size={16} />}
-                      onClick={() =>
-                        navigate(`/dashboard/contract-templates/${template.code}`)
-                      }
-                    >
-                      Edit articles
-                    </Button>
-                  </Group>
-                </Stack>
-              </Card>
-            );
-          })}
-        </SimpleGrid>
-      )}
+      <SimpleGrid cols={{ base: 1, md: 2, xl: 3 }} spacing="lg">
+        {isLoading
+          ? Array.from({ length: 6 }, (_, i) => <TemplateCardSkeleton key={i} />)
+          : (templates ?? []).map((template) => (
+              <TemplateCard
+                key={template.code}
+                template={template}
+                onPreview={() => setPreviewCode(template.code)}
+                onEdit={() =>
+                  navigate(`/dashboard/contract-templates/${template.code}`)
+                }
+              />
+            ))}
+      </SimpleGrid>
 
       <TemplatePreviewModal
         code={previewCode}
@@ -150,3 +92,151 @@ export default function ContractTemplatesPage() {
     </PageContainer>
   );
 }
+
+function TemplateCard({
+  template,
+  onPreview,
+  onEdit,
+}: {
+  template: ContractTemplate;
+  onPreview: () => void;
+  onEdit: () => void;
+}) {
+  const direction = templateDirection(template.code);
+  const bulk = isBulk(template.code);
+
+  return (
+    <Card
+      withBorder
+      radius="lg"
+      padding={0}
+      className="group flex flex-col overflow-hidden transition-all duration-150 hover:-translate-y-0.5 hover:shadow-md"
+    >
+      <Stack gap="md" p="lg" style={{ flex: 1 }}>
+        {/* Kicker row: muted icon well + category label + state */}
+        <Group justify="space-between" align="center" wrap="nowrap">
+          <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+            <ThemeIcon size={40} radius="md" variant="light" color="gray" c="gray.6">
+              {bulk ? (
+                <Boxes size={20} strokeWidth={1.75} />
+              ) : (
+                <Container size={20} strokeWidth={1.75} />
+              )}
+            </ThemeIcon>
+            <Group gap={7} wrap="nowrap">
+              <Box
+                w={7}
+                h={7}
+                style={{
+                  borderRadius: 999,
+                  flexShrink: 0,
+                  background: DIRECTION_DOT[direction] ?? "var(--mantine-color-gray-5)",
+                }}
+              />
+              <Text size="xs" fw={600} tt="uppercase" lts="0.06em" c="dimmed">
+                {DIRECTION_LABEL[direction] ?? direction} ·{" "}
+                {bulk ? "Bulk" : "Container"}
+              </Text>
+            </Group>
+          </Group>
+          {!template.isActive && (
+            <Tooltip label="Not used for new contracts" withArrow>
+              <Badge size="sm" variant="light" color="red">
+                Inactive
+              </Badge>
+            </Tooltip>
+          )}
+        </Group>
+
+        {/* Name + description */}
+        <div>
+          <Text fw={600} size="md" lh={1.35}>
+            {template.name}
+          </Text>
+          <Text size="sm" c="dimmed" lineClamp={2} mt={4} lh={1.5}>
+            {template.description || template.documentTitle}
+          </Text>
+        </div>
+
+        {/* Meta stats */}
+        <Group gap="lg" mt="auto">
+          <Group gap={5} wrap="nowrap">
+            <FileText size={13} className="text-gray-400" />
+            <Text size="xs" c="dimmed">
+              {template.articles.length} article
+              {template.articles.length !== 1 ? "s" : ""}
+            </Text>
+          </Group>
+          <Group gap={5} wrap="nowrap">
+            <Clock size={13} className="text-gray-400" />
+            <Text size="xs" c="dimmed">
+              Updated {formatUpdated(template.updatedAt)}
+            </Text>
+          </Group>
+        </Group>
+      </Stack>
+
+      {/* Footer actions, separated by a hairline */}
+      <Box
+        px="md"
+        py="xs"
+        style={{ borderTop: "1px solid var(--mantine-color-default-border)" }}
+      >
+        <Group justify="space-between">
+          <Button
+            variant="subtle"
+            color="gray"
+            size="compact-sm"
+            radius="md"
+            leftSection={<Eye size={14} />}
+            onClick={onPreview}
+          >
+            Preview
+          </Button>
+          <Button
+            variant="light"
+            color="edr-green"
+            size="compact-sm"
+            radius="md"
+            leftSection={<Pencil size={14} />}
+            onClick={onEdit}
+          >
+            Edit articles
+          </Button>
+        </Group>
+      </Box>
+    </Card>
+  );
+}
+
+function TemplateCardSkeleton() {
+  return (
+    <Card withBorder radius="lg" padding={0} className="overflow-hidden">
+      <Stack gap="md" p="lg">
+        <Group gap="sm">
+          <Skeleton height={40} width={40} radius="md" />
+          <Skeleton height={10} width={120} radius="xl" />
+        </Group>
+        <div>
+          <Skeleton height={14} width="70%" radius="xl" />
+          <Skeleton height={10} width="95%" radius="xl" mt={10} />
+          <Skeleton height={10} width="60%" radius="xl" mt={6} />
+        </div>
+        <Group gap="lg">
+          <Skeleton height={10} width={70} radius="xl" />
+          <Skeleton height={10} width={110} radius="xl" />
+        </Group>
+      </Stack>
+      <Box
+        px="md"
+        py="xs"
+        style={{ borderTop: "1px solid var(--mantine-color-default-border)" }}
+      >
+        <Group justify="space-between">
+          <Skeleton height={26} width={90} radius="md" />
+          <Skeleton height={26} width={110} radius="md" />
+        </Group>
+      </Box>
+    </Card>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/services/routes.service.ts b/apps/edr-freight-web/backoffice/src/services/routes.service.ts
index 9c59e31ad..2317c693d 100644
--- a/apps/edr-freight-web/backoffice/src/services/routes.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/routes.service.ts
@@ -43,8 +43,18 @@ export interface SaveRoutePayload {
  * Human-readable route label: yard names, not yard codes. Staff read
  * "Addis Ababa → Dire Dawa", not "ADDIS_ABABA → DIRE_DAWA". Falls back to the
  * code only when a yard has no label.
+ *
+ * When milestones are present they ARE the full ordered corridor (origin first,
+ * destination last), so the label shows every stop:
+ * "Addis Ababa → Adama → Dire Dawa".
  */
 export function formatRouteLabel(route: RouteRecord): string {
+  const stops = [...(route.milestones ?? [])]
+    .sort((a, b) => a.sequenceNo - b.sequenceNo)
+    .map((m) => m.yard?.label ?? m.yard?.code)
+    .filter((name): name is string => Boolean(name));
+  if (stops.length >= 2) return stops.join(' → ');
+
   const origin =
     route.originYard?.label ?? route.originYard?.code ?? 'Origin';
   const dest =

From 10111c9e0120743791f789cfbb3086098dca1b2d Mon Sep 17 00:00:00 2001
From: Marshal <marshal@example.com>
Date: Fri, 10 Jul 2026 11:08:30 +0000
Subject: [PATCH 08/16] merge

---
 .../src/modules/routes/entities/route.entity.ts   | 15 +++++++++++++++
 .../train-schedules/train-schedules.repository.ts |  5 +++--
 .../train-scheduling/booking-batch.service.ts     |  5 +++--
 .../train-scheduling/train-scheduling.service.ts  |  5 +++--
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/apps/edr-freight-api/src/modules/routes/entities/route.entity.ts b/apps/edr-freight-api/src/modules/routes/entities/route.entity.ts
index 23399bb4d..238129a1d 100644
--- a/apps/edr-freight-api/src/modules/routes/entities/route.entity.ts
+++ b/apps/edr-freight-api/src/modules/routes/entities/route.entity.ts
@@ -43,11 +43,26 @@ export class Route extends BaseEntity {
  * Human-readable route label: yard names, not yard codes — "Addis Ababa → Dire Dawa",
  * not "ADDIS_ABABA → DIRE_DAWA". A yard's display name is its `label`; `code` is the
  * machine identifier and is only a fallback for a yard missing one.
+ *
+ * When the route's milestones are loaded (with their yards), the label is the FULL
+ * ordered corridor — "Addis Ababa → Adama → Dire Dawa" — since milestones already
+ * include the origin (first) and destination (last). Without milestones it falls
+ * back to origin → destination.
  */
 export function formatRouteLabel(route: {
   originYard?: { code?: string; label?: string } | null;
   destinationYard?: { code?: string; label?: string } | null;
+  milestones?: Array<{
+    sequenceNo: number;
+    yard?: { code?: string; label?: string } | null;
+  }> | null;
 }): string {
+  const stops = [...(route.milestones ?? [])]
+    .sort((a, b) => a.sequenceNo - b.sequenceNo)
+    .map((m) => m.yard?.label ?? m.yard?.code)
+    .filter((name): name is string => Boolean(name));
+  if (stops.length >= 2) return stops.join(' → ');
+
   const origin = route.originYard?.label ?? route.originYard?.code ?? 'Origin';
   const dest = route.destinationYard?.label ?? route.destinationYard?.code ?? 'Destination';
   return `${origin} → ${dest}`;
diff --git a/apps/edr-freight-api/src/modules/train-schedules/train-schedules.repository.ts b/apps/edr-freight-api/src/modules/train-schedules/train-schedules.repository.ts
index a64faabbe..6a8aced53 100644
--- a/apps/edr-freight-api/src/modules/train-schedules/train-schedules.repository.ts
+++ b/apps/edr-freight-api/src/modules/train-schedules/train-schedules.repository.ts
@@ -23,8 +23,9 @@ export class TrainSchedulesRepository extends BaseRepository<TrainSchedule> {
       where: { id },
       relations: {
         // Yards carry the route's display name; without them formatRouteLabel
-        // degrades to the literal "Origin → Destination".
-        route: { originYard: true, destinationYard: true },
+        // degrades to the literal "Origin → Destination". Milestones (with
+        // their yards) give it the full corridor path.
+        route: { originYard: true, destinationYard: true, milestones: { yard: true } },
         trainSet: {
           locomotive: true,
           locomotives: { locomotive: true },
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
index 5609c8801..0e6f1fd8c 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
@@ -746,8 +746,9 @@ export class BookingBatchService implements OnModuleInit {
         trainSet: { locomotive: true },
         originStation: true,
         destinationStation: true,
-        // Yards supply the route's display name for `routeName` below.
-        route: { originYard: true, destinationYard: true },
+        // Yards supply the route's display name for `routeName` below;
+        // milestones (with yards) give it the full corridor path.
+        route: { originYard: true, destinationYard: true, milestones: { yard: true } },
       },
       order: { [sortBy]: sortOrder } as never,
       skip: (page - 1) * pageSize,
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
index 0fbfd30ce..eee880a6b 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
@@ -2645,8 +2645,9 @@ export class TrainSchedulingService {
     const schedules = await this.trainSchedulesRepository.findAll({
       relations: {
         trainSet: { locomotive: true, locomotives: { locomotive: true } },
-        // Yards carry the route's display name used by mapScheduleListItem.
-        route: { originYard: true, destinationYard: true },
+        // Yards carry the route's display name used by mapScheduleListItem;
+        // milestones (with yards) let it show the full corridor path.
+        route: { originYard: true, destinationYard: true, milestones: { yard: true } },
         originStation: true,
         destinationStation: true,
         scheduleBookings: { booking: true },

From aa3674041d4e240df0124117ab87635e3586b328 Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Fri, 10 Jul 2026 09:14:49 +0000
Subject: [PATCH 09/16] fix(warehouses): drop truncated UUID columns and
 duplicate GRN buttons

Queue tables showed "Booking ID" / "Customer ID" as dimmed 8-char UUID hashes
next to the human-readable Booking Ref and Customer Name - unusable columns
that forced extra horizontal scrolling. Removed across all six tables
(eligible, received, ready-to-load, loaded/dispatch, import unloaded, import
train detail).

The GRN document button also rendered twice per row (inside the Booking Ref
cell and again in the GRN column) in four tables - kept the GRN column only.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../warehouses/ReceiveInventoryModal.tsx      | 68 ++-----------------
 1 file changed, 4 insertions(+), 64 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
index ff8dc0abd..8e39ea53e 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
@@ -1043,8 +1043,6 @@ function EligibleTab({
                   />
                 </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>Origin</Table.Th>
                 <Table.Th>Destination</Table.Th>
@@ -1077,12 +1075,6 @@ function EligibleTab({
                       {r.reference}
                     </Text>
                   </Table.Td>
-                  <Table.Td>
-                    <Text size="xs" c="dimmed">{r.id.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.customer ?? '—'}</Table.Td>
                   <Table.Td>{r.origin ?? '—'}</Table.Td>
                   <Table.Td>{r.destination ?? '—'}</Table.Td>
@@ -1329,8 +1321,6 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
                 </Table.Th>
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</Table.Th>
-                <Table.Th>Booking ID</Table.Th>
-                <Table.Th>Customer ID</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
                 <Table.Th>Container / Cargo Items</Table.Th>
                 <Table.Th>Cargo Type</Table.Th>
@@ -1355,20 +1345,11 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
                       />
                     </Table.Td>
                     <Table.Td>
-                      <Stack gap={2}>
-                        <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                        <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                      </Stack>
+                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                     </Table.Td>
                     <Table.Td>
                       <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                     </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>
@@ -1558,8 +1539,6 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
                 </Table.Th>
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</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>
@@ -1580,20 +1559,11 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
                     />
                   </Table.Td>
                   <Table.Td>
-                    <Stack gap={2}>
-                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                      <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                    </Stack>
+                    <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
                   <Table.Td>
                     <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                   </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>
@@ -1735,8 +1705,6 @@ function LoadedExportTab({
                 )}
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</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>
@@ -1758,20 +1726,11 @@ function LoadedExportTab({
                     </Table.Td>
                   )}
                   <Table.Td>
-                    <Stack gap={2}>
-                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                      <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                    </Stack>
+                    <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
                   <Table.Td>
                     <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                   </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>
@@ -1891,9 +1850,7 @@ function ImportTrainDetailTable({
       <Table.Thead>
         <Table.Tr>
           <Table.Th>Wagon</Table.Th>
-          <Table.Th>Booking ID</Table.Th>
           <Table.Th>Booking Ref</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>
@@ -1927,15 +1884,9 @@ function ImportTrainDetailTable({
                 {it.sequenceNo ? `#${it.sequenceNo}` : '-'} {it.wagonNumber ?? ''}
               </Text>
             </Table.Td>
-            <Table.Td>
-              <Text size="xs" c="dimmed">{it.bookingId.slice(0, 8)}…</Text>
-            </Table.Td>
             <Table.Td>
               <Text size="xs" fw={600}>{it.bookingReference ?? '—'}</Text>
             </Table.Td>
-            <Table.Td>
-              <Text size="xs" c="dimmed">{it.customerId ? `${it.customerId.slice(0, 8)}…` : '—'}</Text>
-            </Table.Td>
             <Table.Td>{it.customerName ?? '—'}</Table.Td>
             <Table.Td>{it.containerNumber ?? '—'}</Table.Td>
             <Table.Td>{it.cargoType ?? '—'}</Table.Td>
@@ -2384,10 +2335,8 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                     onChange={() => (allSelected ? unselectAll() : selectAll())}
                   />
                 </Table.Th>
-                <Table.Th>Booking ID</Table.Th>
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</Table.Th>
-                <Table.Th>Customer ID</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
                 <Table.Th>Arrival Time</Table.Th>
                 <Table.Th>Container #</Table.Th>
@@ -2412,20 +2361,11 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                     />
                   </Table.Td>
                   <Table.Td>
-                    <Text size="xs" c="dimmed">{r.bookingId ? `${r.bookingId.slice(0, 8)}…` : '—'}</Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Stack gap={2}>
-                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                      <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                    </Stack>
+                    <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
                   <Table.Td>
                     <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                   </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>{formatDate(r.arrivalTime)}</Table.Td>
                   <Table.Td>{r.containerNumber ?? '—'}</Table.Td>

From 0339b89b54f1d8b717f1e47609aba17930eb0cac Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Fri, 10 Jul 2026 09:22:23 +0000
Subject: [PATCH 10/16] ci: replace actions/checkout with plain git on
 self-hosted runners

Runners on this network intermittently time out downloading the action
tarball from codeload.github.com (HttpClient 100s limit, 3 attempts, job
dead before the first step). git fetch talks to github.com directly and
needs no action download at all.

- detect-changes: fetch --depth 2 (keeps the HEAD~1 diff working)
- deploy: fetch --depth 1
- token passed via env for the fetch, then scrubbed from .git/config so it
  doesn't persist in the runner workspace; git clean keeps checkout@v4's
  clean-workspace behaviour

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .github/workflows/deploy.yml | 37 ++++++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 62530611c..5e1f46ad0 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -17,10 +17,23 @@ jobs:
     outputs:
       matrix: ${{ steps.filter.outputs.matrix }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 2
+      # Plain git instead of actions/checkout: self-hosted runners on this
+      # network intermittently time out downloading action tarballs from
+      # codeload.github.com (100s HttpClient limit x3 = dead job). git fetch
+      # talks to github.com directly and needs no action download at all.
+      - name: Checkout (plain git, depth 2)
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          set -euo pipefail
+          git init -q .
+          git remote remove origin 2>/dev/null || true
+          git remote add origin "https://x-access-token:${GH_TOKEN}@github.com/${{ github.repository }}.git"
+          git fetch -q --depth 2 origin "${{ github.sha }}"
+          git checkout -q --force "${{ github.sha }}"
+          git clean -ffdq
+          # Don't leave the token in .git/config on the persistent runner workspace.
+          git remote set-url origin "https://github.com/${{ github.repository }}.git"
 
       - name: Determine changed services
         id: filter
@@ -103,8 +116,20 @@ jobs:
       COMPOSE_DOCKER_CLI_BUILD: "1"
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
+      # Same rationale as detect-changes: no action download on this network.
+      - name: Checkout (plain git)
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          set -euo pipefail
+          git init -q .
+          git remote remove origin 2>/dev/null || true
+          git remote add origin "https://x-access-token:${GH_TOKEN}@github.com/${{ github.repository }}.git"
+          git fetch -q --depth 1 origin "${{ github.sha }}"
+          git checkout -q --force "${{ github.sha }}"
+          git clean -ffdq
+          # Don't leave the token in .git/config on the persistent runner workspace.
+          git remote set-url origin "https://github.com/${{ github.repository }}.git"
 
       - name: Resolve project and build env file
         run: |

From 3ff4b8bf945d30f4deaf1822c0c8700a20bf5818 Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Fri, 10 Jul 2026 09:31:54 +0000
Subject: [PATCH 11/16] fix(warehouses): finish queue-table ergonomics batch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../warehouses/ReceiveInventoryModal.tsx      | 159 ++++++++++++------
 1 file changed, 108 insertions(+), 51 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
index 8e39ea53e..465b59aca 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
+++ b/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>
   );
 }

From 707923b603b7f3a54daea107a1c2c5d9e423669a Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Fri, 10 Jul 2026 09:51:36 +0000
Subject: [PATCH 12/16] feat(warehouses): expandable booking rows list
 containers / cargo inline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every booking row in the queue tables (export received, ready-to-load,
loaded/dispatch, import unloaded) gets a chevron that expands to the
booking's items: container number, goods, lifecycle stage badge
(PENDING..DELIVERED), carrying truck, and GRN.

Bulk bookings (no container units) show a one-line summary instead
("Bulk cargo — Coffee export cargo, 3,200 t"). The expansion reuses the
['container-items', bookingId] query the container modal already uses, so
data is shared and instant after either has loaded it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../warehouses/ReceiveInventoryModal.tsx      | 169 +++++++++++++++++-
 1 file changed, 165 insertions(+), 4 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
index 465b59aca..55722f04a 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
@@ -257,6 +257,83 @@ const toTruckEntrancePayload = (form: TruckEntranceFormState): TruckEntrancePayl
 
 
 
+
+const SUB_STAGE_COLOR: Record<string, string> = {
+  PENDING: 'gray',
+  RECEIVED: 'blue',
+  GRN: 'teal',
+  ASSIGNED: 'indigo',
+  LOADED: 'grape',
+  LEFT: 'orange',
+  DELIVERED: 'green',
+};
+
+/**
+ * Expanded booking row: the booking's containers / bulk items with their
+ * lifecycle stage. Shares the ['container-items', bookingId] cache with
+ * ContainerItemsModal, so expanding after using the modal is instant.
+ */
+function BookingItemsExpansion({
+  bookingId,
+  colSpan,
+  bulkFallback,
+}: {
+  bookingId: string | null;
+  colSpan: number;
+  bulkFallback?: string;
+}) {
+  const { data: items = [], isLoading } = useQuery({
+    queryKey: ['container-items', bookingId],
+    queryFn: () => warehouseService.getContainerItems(bookingId as string),
+    enabled: Boolean(bookingId),
+  });
+
+  return (
+    <Table.Tr>
+      <Table.Td colSpan={colSpan} bg="var(--mantine-color-gray-0)">
+        {isLoading ? (
+          <Group justify="center" py="sm">
+            <Loader size="xs" />
+          </Group>
+        ) : items.length === 0 ? (
+          <Text size="xs" c="dimmed" py={6}>
+            {bulkFallback ?? 'No container units recorded on this booking.'}
+          </Text>
+        ) : (
+          <Table verticalSpacing={4} fz="xs" withTableBorder>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Container #</Table.Th>
+                <Table.Th>Goods</Table.Th>
+                <Table.Th>Stage</Table.Th>
+                <Table.Th>Truck</Table.Th>
+                <Table.Th>GRN</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {items.map((i) => (
+                <Table.Tr key={i.containerNumber}>
+                  <Table.Td>
+                    <Text size="xs" fw={600}>{i.containerNumber}</Text>
+                  </Table.Td>
+                  <Table.Td>{i.goods ?? '—'}</Table.Td>
+                  <Table.Td>
+                    <Badge size="xs" variant="light" color={SUB_STAGE_COLOR[i.stage] ?? 'gray'}>
+                      {i.stage}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>{i.truckPlate ?? '—'}</Table.Td>
+                  <Table.Td>{i.grnNumber ?? '—'}</Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        )}
+      </Table.Td>
+    </Table.Tr>
+  );
+}
+
 type ConfirmAction = { title: string; message: string; confirmLabel: string; run: () => void };
 
 /** One-click bulk actions are irreversible — make the click deliberate. */
@@ -1295,6 +1372,7 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
   );
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
+  const [expandedRow, setExpandedRow] = useState<string | null>(null);
   const [inspectId, setInspectId] = useState<string | null>(null);
 
   const pendingRows = rows.filter((r) => r.inspectionStatus !== 'PASSED');
@@ -1365,6 +1443,7 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
+                <Table.Th w={34} />
                 <Table.Th w={40}>
                   <Checkbox
                     aria-label="Select all"
@@ -1389,7 +1468,18 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
               {rows.map((r: ReadyToLoadRow) => {
                 const selectable = r.inspectionStatus !== 'PASSED';
                 return (
-                  <Table.Tr key={r.id}>
+                  <Fragment key={r.id}>
+                  <Table.Tr>
+                    <Table.Td>
+                      <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        aria-label="Show containers"
+                        onClick={() => setExpandedRow(expandedRow === r.id ? null : r.id)}
+                      >
+                        {expandedRow === r.id ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                      </ActionIcon>
+                    </Table.Td>
                     <Table.Td>
                       <Checkbox
                         aria-label={`Select ${r.bookingReference ?? r.id}`}
@@ -1425,6 +1515,14 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
                       </Button>
                     </Table.Td>
                   </Table.Tr>
+                  {expandedRow === r.id && (
+                    <BookingItemsExpansion
+                      bookingId={r.bookingId}
+                      colSpan={18}
+                      bulkFallback={r.cargoType ? `Bulk cargo — ${r.cargoType}, ${formatNumber(Number(r.weight))} t` : undefined}
+                    />
+                  )}
+                  </Fragment>
                 );
               })}
             </Table.Tbody>
@@ -1450,6 +1548,7 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
   );
   const qc = useQueryClient();
   const [trainPickerOpen, setTrainPickerOpen] = useState(false);
+  const [expandedRow, setExpandedRow] = useState<string | null>(null);
   const [targetScheduleId, setTargetScheduleId] = useState<string | null>(null);
   // Loading is always onto a SPECIFIC pre-dispatch train. No train -> no auto-load.
   const { data: trains = [], isLoading: trainsLoading } = useQuery({
@@ -1571,6 +1670,7 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
+                <Table.Th w={34} />
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
@@ -1584,7 +1684,18 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
             </Table.Thead>
             <Table.Tbody>
               {rows.map((r: ReadyToLoadRow) => (
-                <Table.Tr key={r.id}>
+                <Fragment key={r.id}>
+                <Table.Tr>
+                  <Table.Td>
+                    <ActionIcon
+                      variant="subtle"
+                      color="gray"
+                      aria-label="Show containers"
+                      onClick={() => setExpandedRow(expandedRow === r.id ? null : r.id)}
+                    >
+                      {expandedRow === r.id ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                    </ActionIcon>
+                  </Table.Td>
                   <Table.Td>
                     <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
@@ -1607,6 +1718,14 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
                     <InventoryStatusBadge status={r.status as InventoryStatus} />
                   </Table.Td>
                 </Table.Tr>
+                {expandedRow === r.id && (
+                  <BookingItemsExpansion
+                    bookingId={r.bookingId}
+                    colSpan={11}
+                    bulkFallback={r.cargoType ? `Bulk cargo — ${r.cargoType}, ${formatNumber(Number(r.weight))} t` : undefined}
+                  />
+                )}
+              </Fragment>
               ))}
             </Table.Tbody>
           </Table>
@@ -1634,6 +1753,7 @@ function LoadedExportTab({
     api.warehouses.loadedExport.queryOptions({ enabled }),
   );
   const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
+  const [expandedRow, setExpandedRow] = useState<string | null>(null);
   const bulkDispatch = useMutation(
     api.warehouses.bulkDispatchExport.mutationOptions(),
   );
@@ -1743,6 +1863,7 @@ function LoadedExportTab({
                     />
                   </Table.Th>
                 )}
+                <Table.Th w={34} />
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
@@ -1755,7 +1876,8 @@ function LoadedExportTab({
             </Table.Thead>
             <Table.Tbody>
               {rows.map((r: ReadyToLoadRow) => (
-                <Table.Tr key={r.id}>
+                <Fragment key={r.id}>
+                <Table.Tr>
                   {dispatchable && (
                     <Table.Td>
                       <Checkbox
@@ -1765,6 +1887,16 @@ function LoadedExportTab({
                       />
                     </Table.Td>
                   )}
+                  <Table.Td>
+                    <ActionIcon
+                      variant="subtle"
+                      color="gray"
+                      aria-label="Show containers"
+                      onClick={() => setExpandedRow(expandedRow === r.id ? null : r.id)}
+                    >
+                      {expandedRow === r.id ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                    </ActionIcon>
+                  </Table.Td>
                   <Table.Td>
                     <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
@@ -1782,6 +1914,14 @@ function LoadedExportTab({
                     <InventoryStatusBadge status={r.status as InventoryStatus} />
                   </Table.Td>
                 </Table.Tr>
+                {expandedRow === r.id && (
+                  <BookingItemsExpansion
+                    bookingId={r.bookingId}
+                    colSpan={11}
+                    bulkFallback={r.cargoType ? `Bulk cargo — ${r.cargoType}, ${formatNumber(Number(r.weight))} t` : undefined}
+                  />
+                )}
+                </Fragment>
               ))}
             </Table.Tbody>
           </Table>
@@ -2221,6 +2361,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 [expandedRow, setExpandedRow] = useState<string | null>(null);
   const [inspectId, setInspectId] = useState<string | null>(null);
   const [busyId, setBusyId] = useState<string | null>(null);
   const [viewItem, setViewItem] = useState<WarehouseInventoryItem | null>(null);
@@ -2383,6 +2524,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
+                <Table.Th w={34} />
                 <Table.Th w={40}>
                   <Checkbox
                     aria-label="Select all"
@@ -2408,7 +2550,18 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
             </Table.Thead>
             <Table.Tbody>
               {rows.map((r: ImportUnloadedItem) => (
-                <Table.Tr key={r.id}>
+                <Fragment key={r.id}>
+                <Table.Tr>
+                  <Table.Td>
+                    <ActionIcon
+                      variant="subtle"
+                      color="gray"
+                      aria-label="Show containers"
+                      onClick={() => setExpandedRow(expandedRow === r.id ? null : r.id)}
+                    >
+                      {expandedRow === r.id ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                    </ActionIcon>
+                  </Table.Td>
                   <Table.Td>
                     <Checkbox
                       aria-label={`Select ${r.bookingReference ?? r.id}`}
@@ -2534,6 +2687,14 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                     </Group>
                   </Table.Td>
                 </Table.Tr>
+                {expandedRow === r.id && (
+                  <BookingItemsExpansion
+                    bookingId={r.bookingId}
+                    colSpan={16}
+                    bulkFallback={r.cargoType ? `Bulk cargo — ${r.cargoType}, ${formatNumber(Number(r.weight))} t` : undefined}
+                  />
+                )}
+                </Fragment>
               ))}
             </Table.Tbody>
           </Table>

From 4ca436348919d957af0c8ad3fcf16a1b2fe44d1c Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Fri, 10 Jul 2026 09:56:20 +0000
Subject: [PATCH 13/16] fix(billing): fallback PDF renders duplicate-copy
 documents as watermarked pages

buildTabularFallbackPdf parsed the whole HTML at once, so a two-copy document
(freight order: Port Operations copy + Gate Security & Carrier copy) came out
as ONE page with every tile duplicated and no watermarks.

- documents wrapped in <section class="copy"> now render one page per copy,
  each parsed independently (no more merged/duplicated tiles)
- each page carries its copy label as a large rotated light-gray watermark,
  drawn beneath the content (new watermarkOp, 30-degree text matrix)
- new assemblePdf() multi-page assembler; assembleSinglePagePdf untouched for
  its existing callers
- the meta label is parsed from the document ("Booking") instead of the
  hardcoded "TRAIN / SCHEDULE"

Verified by compiling the util standalone and rendering a two-copy freight
order: 2 pages, both watermarks present, tiles once per page, valid xref/EOF;
copy-less documents (marshalling) still render a single unwatermarked page.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../billing/documents/styled-pdf.util.ts      | 72 ++++++++++++++++++-
 1 file changed, 70 insertions(+), 2 deletions(-)

diff --git a/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts b/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts
index b4f168e4e..f75a284a4 100644
--- a/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts
+++ b/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts
@@ -143,6 +143,20 @@ export function htmlToText(html: string): string {
     .trim();
 }
 
+/**
+ * Large rotated light-gray copy label (e.g. "Copy 1: Port Operations Copy"),
+ * drawn FIRST so the page content sits on top of it. 30-degree rotation via a
+ * text matrix; roughly centered on the page.
+ */
+export function watermarkOp(text: string, page: { width: number; height: number }): string {
+  const label = clipText(text, 46);
+  const size = 34;
+  const w = textWidth(label, size);
+  const x = page.width / 2 - (w * 0.866) / 2;
+  const y = page.height / 2 - (w * 0.5) / 2;
+  return `q BT 0.93 0.93 0.93 rg /F2 ${size} Tf 0.866 0.5 -0.5 0.866 ${x.toFixed(1)} ${y.toFixed(1)} Tm (${escapePdfText(label)}) Tj ET Q`;
+}
+
 /**
  * Parse a "summary tiles + one <table> + notice + signature lines" document (the
  * marshalling / load-list layout the train-scheduling builders emit) and draw it as a
@@ -150,6 +164,16 @@ export function htmlToText(html: string): string {
  * document, not a flat text dump. Switches to landscape when the table is wide.
  */
 export function buildTabularFallbackPdf(html: string): Buffer {
+  // Documents printed in duplicate wrap each copy in <section class="copy">
+  // (freight order: Port Operations copy + Gate Security copy). Render one
+  // page per copy, each with its own watermark and tile set — parsing the
+  // whole HTML at once would merge both copies' tiles and drop the watermarks.
+  const copies = [...html.matchAll(/<section class="copy">([\s\S]*?)<\/section>/gi)].map((m) => m[1]);
+  const fragments = copies.length ? copies : [html];
+  return assemblePdf(fragments.map((fragment) => buildTabularPageOps(fragment)));
+}
+
+function buildTabularPageOps(html: string): { ops: string[]; page: { width: number; height: number } } {
   const pick = (re: RegExp) => html.match(re)?.[1];
   const title = htmlToText(pick(/<h1[^>]*>([\s\S]*?)<\/h1>/i) ?? "Document");
   const subtitle = htmlToText(pick(/class="subtitle"[^>]*>([\s\S]*?)<\/div>/i) ?? "");
@@ -182,13 +206,19 @@ export function buildTabularFallbackPdf(html: string): Buffer {
   const right = page.width - M;
   const ops: string[] = [];
 
+  // Copy watermark, underneath everything else.
+  const watermark = htmlToText(pick(/class="watermark"[^>]*>([\s\S]*?)<\/div>/i) ?? "");
+  if (watermark) ops.push(watermarkOp(watermark, page));
+
   // Header
   ops.push(lineOp(M, page.height - 28, right, page.height - 28, PdfColor.teal, 2.4));
   ops.push(textOp("ETHIO-DJIBOUTI RAILWAY S.C.", M, page.height - 44, 8.5, "F2", PdfColor.gray));
   ops.push(textOp(clipText(title, landscape ? 82 : 52), M, page.height - 68, 19, "F2", PdfColor.dark));
   if (subtitle) ops.push(textOp(clipText(subtitle, 96), M, page.height - 82, 9, "F1", PdfColor.gray));
+  const metaLabel =
+    htmlToText(pick(/class="meta"[^>]*>([\s\S]*?)<strong/i) ?? "").toUpperCase() || "REFERENCE";
   if (metaRef) {
-    ops.push(textOpRight("TRAIN / SCHEDULE", right, page.height - 42, 7.5, "F2", PdfColor.gray));
+    ops.push(textOpRight(clipText(metaLabel, 26), right, page.height - 42, 7.5, "F2", PdfColor.gray));
     ops.push(textOpRight(clipText(metaRef, 28), right, page.height - 58, 12, "F2", PdfColor.dark));
   }
   if (generated) {
@@ -258,7 +288,7 @@ export function buildTabularFallbackPdf(html: string): Buffer {
     ops.push(textOp(clipText(s, Math.floor((sigW - 18) / 3.6)), x, 30, 7, "F1", PdfColor.gray));
   });
 
-  return assembleSinglePagePdf(ops, page);
+  return { ops, page };
 }
 
 /** Greedy word-wrap to a maximum character width. */
@@ -320,3 +350,41 @@ export function assembleSinglePagePdf(
   pdf += `trailer\n<< /Size ${objects.length + 1} /Root 1 0 R >>\nstartxref\n${xrefOffset}\n%%EOF\n`;
   return Buffer.from(pdf, "latin1");
 }
+
+/** Assemble a multi-page PDF; one content stream per page, shared Helvetica fonts. */
+export function assemblePdf(
+  pages: Array<{ ops: string[]; page: { width: number; height: number } }>,
+): Buffer {
+  const kids = pages.map((_, i) => `${5 + i * 2} 0 R`).join(" ");
+  const objects: string[] = [
+    "<< /Type /Catalog /Pages 2 0 R >>",
+    `<< /Type /Pages /Kids [${kids}] /Count ${pages.length} >>`,
+    "<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>",
+    "<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica-Bold >>",
+  ];
+  for (const [i, p] of pages.entries()) {
+    const stream = p.ops.join("\n");
+    objects.push(
+      `<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${p.page.width} ${p.page.height}] /Resources << /Font << /F1 3 0 R /F2 4 0 R >> >> /Contents ${6 + i * 2} 0 R >>`,
+    );
+    objects.push(`<< /Length ${Buffer.byteLength(stream, "latin1")} >>\nstream\n${stream}\nendstream`);
+  }
+
+  let pdf = "%PDF-1.4\n";
+  const offsets: number[] = [0];
+  objects.forEach((object, index) => {
+    offsets.push(Buffer.byteLength(pdf, "latin1"));
+    pdf += `${index + 1} 0 obj\n${object}\nendobj\n`;
+  });
+  while (Buffer.byteLength(pdf, "latin1") < MIN_VALID_PDF_BYTES) {
+    pdf += "% fallback padding\n";
+  }
+  const xrefOffset = Buffer.byteLength(pdf, "latin1");
+  pdf += `xref\n0 ${objects.length + 1}\n`;
+  pdf += "0000000000 65535 f \n";
+  for (const offset of offsets.slice(1)) {
+    pdf += `${String(offset).padStart(10, "0")} 00000 n \n`;
+  }
+  pdf += `trailer\n<< /Size ${objects.length + 1} /Root 1 0 R >>\nstartxref\n${xrefOffset}\n%%EOF\n`;
+  return Buffer.from(pdf, "latin1");
+}

From 00875dd2f44e936acb60d02054bcf25ffad673a5 Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Fri, 10 Jul 2026 10:05:00 +0000
Subject: [PATCH 14/16] fix(billing): fallback PDF paginates long tables
 instead of truncating
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The marshalling manifest cut off at one page ("... 10 more row(s) not
shown") because the fallback drew rows only until it hit the bottom band.
Now the table flows across as many pages as it needs:

- page 1 keeps the full header + summary tiles; continuation pages get a slim
  "(continued — page N)" header and a re-drawn table header
- the verification notice and signature lines stay pinned to the final page,
  moving to a fresh page when rows run too deep for the bottom band
- the copy watermark repeats on every page of its copy
- a 12-page safety cap keeps the old truncation note as a last resort

Verified by standalone render: 50-row manifest -> 2 pages, all 50 rows, no
truncation; 5-row doc stays 1 page; two-copy freight order still renders 2
watermarked pages.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../billing/documents/styled-pdf.util.ts      | 122 ++++++++++++------
 1 file changed, 81 insertions(+), 41 deletions(-)

diff --git a/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts b/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts
index f75a284a4..d2a88b683 100644
--- a/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts
+++ b/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts
@@ -170,15 +170,20 @@ export function buildTabularFallbackPdf(html: string): Buffer {
   // whole HTML at once would merge both copies' tiles and drop the watermarks.
   const copies = [...html.matchAll(/<section class="copy">([\s\S]*?)<\/section>/gi)].map((m) => m[1]);
   const fragments = copies.length ? copies : [html];
-  return assemblePdf(fragments.map((fragment) => buildTabularPageOps(fragment)));
+  return assemblePdf(fragments.flatMap((fragment) => buildTabularPageOps(fragment)));
 }
 
-function buildTabularPageOps(html: string): { ops: string[]; page: { width: number; height: number } } {
+function buildTabularPageOps(
+  html: string,
+): Array<{ ops: string[]; page: { width: number; height: number } }> {
   const pick = (re: RegExp) => html.match(re)?.[1];
   const title = htmlToText(pick(/<h1[^>]*>([\s\S]*?)<\/h1>/i) ?? "Document");
   const subtitle = htmlToText(pick(/class="subtitle"[^>]*>([\s\S]*?)<\/div>/i) ?? "");
   const metaRef = htmlToText(pick(/class="meta"[\s\S]*?<strong>([\s\S]*?)<\/strong>/i) ?? "");
+  const metaLabel =
+    htmlToText(pick(/class="meta"[^>]*>([\s\S]*?)<strong/i) ?? "").toUpperCase() || "REFERENCE";
   const generated = htmlToText(pick(/Generated:\s*([^<]+)/i) ?? "");
+  const watermark = htmlToText(pick(/class="watermark"[^>]*>([\s\S]*?)<\/div>/i) ?? "");
 
   const tiles: Array<[string, string]> = [];
   for (const m of html.matchAll(
@@ -204,30 +209,49 @@ function buildTabularPageOps(html: string): { ops: string[]; page: { width: numb
   const M = 32;
   const contentW = page.width - M * 2;
   const right = page.width - M;
-  const ops: string[] = [];
+  const MAX_PAGES = 12;
 
-  // Copy watermark, underneath everything else.
-  const watermark = htmlToText(pick(/class="watermark"[^>]*>([\s\S]*?)<\/div>/i) ?? "");
-  if (watermark) ops.push(watermarkOp(watermark, page));
+  const pagesOut: Array<{ ops: string[]; page: { width: number; height: number } }> = [];
+  let ops: string[] = [];
+  let y = 0;
 
-  // Header
-  ops.push(lineOp(M, page.height - 28, right, page.height - 28, PdfColor.teal, 2.4));
-  ops.push(textOp("ETHIO-DJIBOUTI RAILWAY S.C.", M, page.height - 44, 8.5, "F2", PdfColor.gray));
-  ops.push(textOp(clipText(title, landscape ? 82 : 52), M, page.height - 68, 19, "F2", PdfColor.dark));
-  if (subtitle) ops.push(textOp(clipText(subtitle, 96), M, page.height - 82, 9, "F1", PdfColor.gray));
-  const metaLabel =
-    htmlToText(pick(/class="meta"[^>]*>([\s\S]*?)<strong/i) ?? "").toUpperCase() || "REFERENCE";
-  if (metaRef) {
-    ops.push(textOpRight(clipText(metaLabel, 26), right, page.height - 42, 7.5, "F2", PdfColor.gray));
-    ops.push(textOpRight(clipText(metaRef, 28), right, page.height - 58, 12, "F2", PdfColor.dark));
-  }
-  if (generated) {
-    ops.push(textOpRight(clipText(`Generated ${generated}`, 40), right, page.height - 72, 8, "F1", PdfColor.gray));
-  }
-  ops.push(lineOp(M, page.height - 92, right, page.height - 92, PdfColor.line, 1));
+  const drawFullHeader = () => {
+    ops.push(lineOp(M, page.height - 28, right, page.height - 28, PdfColor.teal, 2.4));
+    ops.push(textOp("ETHIO-DJIBOUTI RAILWAY S.C.", M, page.height - 44, 8.5, "F2", PdfColor.gray));
+    ops.push(textOp(clipText(title, landscape ? 82 : 52), M, page.height - 68, 19, "F2", PdfColor.dark));
+    if (subtitle) ops.push(textOp(clipText(subtitle, 96), M, page.height - 82, 9, "F1", PdfColor.gray));
+    if (metaRef) {
+      ops.push(textOpRight(clipText(metaLabel, 26), right, page.height - 42, 7.5, "F2", PdfColor.gray));
+      ops.push(textOpRight(clipText(metaRef, 28), right, page.height - 58, 12, "F2", PdfColor.dark));
+    }
+    if (generated) {
+      ops.push(textOpRight(clipText(`Generated ${generated}`, 40), right, page.height - 72, 8, "F1", PdfColor.gray));
+    }
+    ops.push(lineOp(M, page.height - 92, right, page.height - 92, PdfColor.line, 1));
+    y = page.height - 100;
+  };
 
-  // Summary tiles
-  let y = page.height - 100;
+  const drawContinuationHeader = (pageNo: number) => {
+    ops.push(lineOp(M, page.height - 24, right, page.height - 24, PdfColor.teal, 1.6));
+    ops.push(
+      textOp(clipText(`${title} (continued — page ${pageNo})`, landscape ? 100 : 68), M, page.height - 42, 11, "F2", PdfColor.dark),
+    );
+    if (metaRef) ops.push(textOpRight(clipText(metaRef, 28), right, page.height - 42, 10, "F2", PdfColor.gray));
+    y = page.height - 54;
+  };
+
+  const startPage = (first: boolean) => {
+    ops = [];
+    if (watermark) ops.push(watermarkOp(watermark, page));
+    if (first) drawFullHeader();
+    else drawContinuationHeader(pagesOut.length + 1);
+  };
+
+  const finishPage = () => pagesOut.push({ ops, page });
+
+  startPage(true);
+
+  // Summary tiles (first page only)
   if (tiles.length) {
     const cols = landscape ? 6 : 4;
     const tileW = contentW / cols;
@@ -243,21 +267,34 @@ function buildTabularPageOps(html: string): { ops: string[]; page: { width: numb
     y -= tileH + 12;
   }
 
-  // Table
+  // Table, paginated across as many pages as the rows need.
   if (headers.length) {
     const colW = contentW / headers.length;
     const headerH = 16;
     const rowH = 14;
     const cellChars = Math.max(4, Math.floor(colW / 3.9));
-    ops.push(rectOp(M, y - headerH, contentW, headerH, PdfColor.tint, PdfColor.line, 0.6));
-    headers.forEach((h, c) =>
-      ops.push(textOp(clipText(h, cellChars), M + c * colW + 4, y - 11, 7, "F2", PdfColor.teal)),
-    );
-    y -= headerH;
+    const bottomReserve = 46; // keep clear of the page edge on row-only pages
 
-    let shown = 0;
-    for (const row of rows) {
-      if (y < 96) break;
+    const drawTableHeader = () => {
+      ops.push(rectOp(M, y - headerH, contentW, headerH, PdfColor.tint, PdfColor.line, 0.6));
+      headers.forEach((h, c) =>
+        ops.push(textOp(clipText(h, cellChars), M + c * colW + 4, y - 11, 7, "F2", PdfColor.teal)),
+      );
+      y -= headerH;
+    };
+
+    drawTableHeader();
+    let truncated = 0;
+    for (const [index, row] of rows.entries()) {
+      if (y - rowH < bottomReserve) {
+        if (pagesOut.length + 1 >= MAX_PAGES) {
+          truncated = rows.length - index;
+          break;
+        }
+        finishPage();
+        startPage(false);
+        drawTableHeader();
+      }
       ops.push(rectOp(M, y - rowH, contentW, rowH, "1 1 1", PdfColor.line, 0.4));
       headers.forEach((_h, c) => {
         if (c > 0) ops.push(lineOp(M + c * colW, y - rowH, M + c * colW, y, PdfColor.line, 0.3));
@@ -265,30 +302,33 @@ function buildTabularPageOps(html: string): { ops: string[]; page: { width: numb
         if (cell) ops.push(textOp(clipText(cell, cellChars), M + c * colW + 4, y - 10, 6.8, "F1", PdfColor.dark));
       });
       y -= rowH;
-      shown += 1;
     }
-    if (shown < rows.length) {
-      ops.push(textOp(`... ${rows.length - shown} more row(s) not shown`, M, y - 10, 7, "F1", PdfColor.gray));
+    if (truncated > 0) {
+      ops.push(textOp(`... ${truncated} more row(s) not shown`, M, y - 10, 7, "F1", PdfColor.gray));
     }
   }
 
-  // Notice (verification clause)
+  // Notice + signatures live on the final page; give them a fresh page when the
+  // rows ran too deep for the fixed bottom band.
+  if (y < 110 && (notice || signatures.length)) {
+    finishPage();
+    startPage(false);
+  }
   if (notice) {
     ops.push(lineOp(M, 78, M, 54, PdfColor.teal, 2));
     wrapText(notice, landscape ? 155 : 104)
       .slice(0, 2)
       .forEach((ln, i) => ops.push(textOp(ln, M + 8, 72 - i * 11, 7.5, "F1", PdfColor.gray)));
   }
-
-  // Signatures
   const sigW = contentW / signatures.length;
-  signatures.forEach((s, i) => {
+  signatures.forEach((sig, i) => {
     const x = M + i * sigW;
     ops.push(lineOp(x, 40, x + sigW - 18, 40, PdfColor.dark, 0.7));
-    ops.push(textOp(clipText(s, Math.floor((sigW - 18) / 3.6)), x, 30, 7, "F1", PdfColor.gray));
+    ops.push(textOp(clipText(sig, Math.floor((sigW - 18) / 3.6)), x, 30, 7, "F1", PdfColor.gray));
   });
+  finishPage();
 
-  return { ops, page };
+  return pagesOut;
 }
 
 /** Greedy word-wrap to a maximum character width. */

From 9d147fbe2646d590cfbbd908b6be4e70603fe41b Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Fri, 10 Jul 2026 10:13:46 +0000
Subject: [PATCH 15/16] fix(warehouses): truck-arrival crash on duplicate
 containers; auto-GRN on import unload

Truck Arrival died with "[@mantine/core] Duplicate options are not supported"
when a booking carried the same container number on two container lines (the
unit uniqueness is per line, not per booking):
- bookingContainerWeights now GROUPs BY container number (MAX weight)
- the weighing modal dedupes both the containers MultiSelect and the
  assigned-trucks Select defensively, so bad data degrades instead of
  crashing the whole page

Import GRN is now issued automatically when the arrived train is unloaded:
autoUnloadArrivedBookings stamps GRN-IMPORT-<date>-<booking> on both the
create and update paths (never overwrites an existing GRN). The per-row GRN
button in the import queue lights up with no extra clicks.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../warehouses/warehouse-inventory.service.ts |  6 ++++-
 .../warehouses/ReleaseOrderModal.tsx          | 24 ++++++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts b/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts
index 8f7a71fc1..281d3f620 100644
--- a/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts
@@ -1597,6 +1597,8 @@ export class WarehouseInventoryService {
             status: 'UNLOADED',
             unloadedAt: now,
             arrivedAt: existing.arrivedAt ?? now,
+            // Import GRN is issued automatically at train unload.
+            ...(existing.grnNumber ? {} : { grnNumber: this.generateGrnNumber('IMPORT', booking.id, now) }),
           });
           await this.activityLog.record({
             activityType: 'INVENTORY_UNLOADED',
@@ -1630,6 +1632,7 @@ export class WarehouseInventoryService {
           quantity: 1,
           weight: Number(booking.weight) || 0,
           status: 'UNLOADED',
+          grnNumber: this.generateGrnNumber('IMPORT', booking.id, now),
           arrivedAt: now,
           unloadedAt: now,
           notes: allocated?.rule ? `Unloaded → ${allocated.path}` : 'Unloaded from arrived import train',
@@ -2757,11 +2760,12 @@ export class WarehouseInventoryService {
     const rows: Array<{ containerNumber: string; weightTons: string }> =
       await this.dataSource.query(
         `SELECT bcu.container_number AS "containerNumber",
-                COALESCE(bcu.vgm_tons, 0) AS "weightTons"
+                MAX(COALESCE(bcu.vgm_tons, 0)) AS "weightTons"
            FROM freight.booking_container_units bcu
            JOIN freight.booking_container bc
              ON bc.id = bcu.booking_container_id AND bc.deleted_at IS NULL
           WHERE bc.booking_id = $1 AND bcu.deleted_at IS NULL
+          GROUP BY bcu.container_number
           ORDER BY bcu.container_number`,
         [bookingId],
       );
diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx
index cfa271076..6833167f7 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx
@@ -202,8 +202,11 @@ export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: Relea
   ];
   // Only trucks actually assigned to THIS booking (last-mile prefill or customer
   // portal) are selectable. No global fleet list — if nothing is assigned, the
-  // operator types the plate manually in the field below.
-  const truckSelectOptions = assignedTruckOptions;
+  // operator types the plate manually in the field below. Deduped by plate:
+  // duplicate option values crash Mantine's Select.
+  const truckSelectOptions = [
+    ...new Map(assignedTruckOptions.map((t) => [t.value, t])).values(),
+  ];
   // Neither a last-mile truck nor a customer truck has been assigned yet.
   const noTruckAssigned = assignedTruckOptions.length === 0 && !isCustomerAssignedTruck;
   const isTruckIdentityLocked = isEntranceLocked || isCustomerAssignedTruck || hasLastMileTruckPrefill;
@@ -216,10 +219,19 @@ export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: Relea
   const containerWeightByNumber = new Map(
     containerWeights.map((c) => [c.containerNumber.toUpperCase(), Number(c.weightTons) || 0]),
   );
-  const containerSelectData = containerWeights.map((c) => ({
-    value: c.containerNumber,
-    label: `${c.containerNumber} · ${(Number(c.weightTons) || 0).toLocaleString()} t`,
-  }));
+  // Mantine Selects throw on duplicate option values — legacy bookings can carry
+  // the same container number on two lines, so dedupe defensively.
+  const containerSelectData = [
+    ...new Map(
+      containerWeights.map((c) => [
+        c.containerNumber,
+        {
+          value: c.containerNumber,
+          label: `${c.containerNumber} · ${(Number(c.weightTons) || 0).toLocaleString()} t`,
+        },
+      ]),
+    ).values(),
+  ];
   const selectedContainerNumbers = containerNumbers.map((n) => n.trim()).filter(Boolean);
   const selectedCargoWeight = Number(
     selectedContainerNumbers

From a58650bdfbc78dc91e937183fa5d4c631f0098d1 Mon Sep 17 00:00:00 2001
From: Marshal <marshal@example.com>
Date: Fri, 10 Jul 2026 12:13:08 +0000
Subject: [PATCH 16/16] update booking logic for train schedules and customs
 contracts

---
 .../train-scheduling/booking-batch.service.ts | 30 ++++++----------
 .../pages/contracts/ContractDetailPage.tsx    |  5 ++-
 .../src/pages/contracts/NewShipmentPage.tsx   | 10 +++---
 .../contracts/NewShipmentRequestPage.tsx      | 34 +++++++++++++------
 4 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
index 0e6f1fd8c..d51108043 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
@@ -2533,21 +2533,17 @@ export class BookingBatchService implements OnModuleInit {
   }
 
   /**
-   * Keep schedule.max_wagons aligned with the train's real boarding limit: the
-   * locomotive's length-derived slot count, floored by the physical wagons in
-   * the train set (slots that exist on paper but not in the yard must not be
-   * sold — see {@link remainingBudget}).
+   * Keep schedule.max_wagons aligned with the train's boarding limit: the
+   * locomotive's length-derived slot count. The physical wagons currently in
+   * the train set do NOT cap this — bookings are admitted on length/weight
+   * alone and yard staff attach the wagons manually before departure.
    */
   private async syncScheduleMaxWagons(
     schedule: TrainSchedule,
     locomotive: Locomotive,
   ): Promise<void> {
     const limits = await this.capacityLimits(locomotive);
-    const physicalWagons = schedule.trainSet?.wagons?.length ?? 0;
-    const maxWagons =
-      physicalWagons > 0
-        ? Math.min(limits.base.wagons, physicalWagons)
-        : limits.base.wagons;
+    const maxWagons = limits.base.wagons;
     if ((schedule.maxWagons ?? 0) !== maxWagons) {
       await this.dataSource
         .getRepository(TrainSchedule)
@@ -2664,11 +2660,10 @@ export class BookingBatchService implements OnModuleInit {
    * reserved bookings already use ON THEIR OWN LEGS. A booking riding only
    * Dire→Djibouti leaves the Addis→Dire edges untouched.
    *
-   * The wagon axis is additionally capped by the PHYSICAL wagons marshalled in
-   * the schedule's train set. The length-derived slot count says how many wagons
-   * the locomotive could pull, not how many exist: a 760m/54-slot train with a
-   * 50-wagon set once split-offered 4 wagons that were never buildable — the
-   * customer paid and the wagon planner had nothing to assign.
+   * The wagon axis is the locomotive's length-derived slot count only — the
+   * physical wagons currently marshalled in the train set do NOT cap it.
+   * Bookings are admitted on length/weight capacity and yard staff attach
+   * the missing wagons manually before wagon assignment.
    */
   private async remainingBudget(
     schedule: TrainSchedule,
@@ -2676,12 +2671,7 @@ export class BookingBatchService implements OnModuleInit {
     wagonDims: WagonDims,
   ): Promise<CorridorBudget> {
     const stops = await this.stopsForSchedule(schedule);
-    const physicalWagons = schedule.trainSet?.wagons?.length ?? 0;
-    const base =
-      physicalWagons > 0
-        ? { ...limits.base, wagons: Math.min(limits.base.wagons, physicalWagons) }
-        : limits.base;
-    const budget = new CorridorBudget(stops, base, limits.tolerance);
+    const budget = new CorridorBudget(stops, limits.base, limits.tolerance);
     const allocated = (schedule.scheduleBookings ?? [])
       .map((sb) => sb.booking)
       .filter((b): b is Booking => Boolean(b));
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx b/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
index 784fa6bf5..2fed7e7a0 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
@@ -241,11 +241,10 @@ export default function ContractDetailPage() {
   });
   // Intercity contracts are never window-gated: the shipment rides a passing
   // import/export train that staff assign later, so booking is always open.
-  // GENERAL contracts are also not gated at creation — the booking enters the
-  // per-booking clearance gate first and picks its shipment day at proceed time.
+  // ONE_TIME and GENERAL contracts are both gated — booking is only possible
+  // while a window on the contract's lane is open.
   const bookingWindowOpen =
     contract?.tradeDirection === "DOMESTIC" ||
-    contract?.contractKind === "GENERAL" ||
     hasOpenWindow(bookingWindows);
 
   // Draw-down capacity per cargo line (GENERAL contracts only). The backend
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx b/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
index 699b143fb..06cb017c9 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
@@ -146,14 +146,12 @@ export default function NewShipmentPage() {
 
   // Coarse gate: if the customer deep-links here while no booking window is
   // open, show the same closed-state notice as the contract page instead of the
-  // form. Still allowed the moment any window isOpenNow. Intercity contracts
-  // are never window-gated — the shipment rides a passing train that staff
-  // pick at finalize time, so booking is always open. GENERAL contracts are not
-  // gated at creation either: the booking enters per-booking clearance first
-  // and picks its shipment day at proceed time.
+  // form. Still allowed the moment any window isOpenNow. Applies to ONE_TIME
+  // and GENERAL alike. Intercity contracts are never window-gated — the
+  // shipment rides a passing train that staff pick at finalize time, so
+  // booking is always open.
   if (
     contract.tradeDirection !== "DOMESTIC" &&
-    contract.contractKind !== "GENERAL" &&
     !hasOpenWindow(bookingWindows)
   ) {
     return (
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentRequestPage.tsx b/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentRequestPage.tsx
index 38924251e..23cfdfe0d 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentRequestPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentRequestPage.tsx
@@ -61,11 +61,16 @@ export default function NewShipmentRequestPage() {
 
   const isContainer = contract.freightType === "CONTAINER";
   const route = contract.routes?.[0];
+  // GENERAL customs contracts: GL schedules the shipment during clearance —
+  // the customer only states the quantity, never picks a date.
+  const hasCustoms =
+    contract.contractKind === "GENERAL" &&
+    (contract.serviceType?.includesCustoms ?? contract.customsClearingEnabled);
 
   const handleSubmit = () => {
     const dto: Freight.CreateBookingRequestDto = {
       contractRouteId: route?.id,
-      scheduledDate: scheduledDate || undefined,
+      scheduledDate: hasCustoms ? undefined : scheduledDate || undefined,
       notes: notes.trim() || undefined,
     };
 
@@ -104,19 +109,26 @@ export default function NewShipmentRequestPage() {
 
         <Paper withBorder radius="lg" p="xl" style={{ borderColor: BORDER }}>
           <Stack gap="md">
-            <DatePickerInput
-              label="Preferred shipment date"
-              placeholder="Pick a date"
-              leftSection={<CalendarDays size={16} />}
-              minDate={new Date().toISOString().slice(0, 10)}
-              value={scheduledDate || null}
-              onChange={(v) => setScheduledDate(v ?? "")}
-              radius="md"
-              popoverProps={{ withinPortal: true }}
-            />
+            {!hasCustoms && (
+              <DatePickerInput
+                label="Preferred shipment date"
+                placeholder="Pick a date"
+                leftSection={<CalendarDays size={16} />}
+                minDate={new Date().toISOString().slice(0, 10)}
+                value={scheduledDate || null}
+                onChange={(v) => setScheduledDate(v ?? "")}
+                radius="md"
+                popoverProps={{ withinPortal: true }}
+              />
+            )}
 
             <NumberInput
               label={isContainer ? "Number of containers" : "Cargo weight (tons)"}
+              description={
+                hasCustoms
+                  ? "Global Logistics schedules the shipment date during customs clearance — you only state the quantity."
+                  : undefined
+              }
               value={quantity}
               onChange={setQuantity}
               min={1}