merge conflict

2026-08-30 12:18:11 +00:00 · 2026-06-29 12:45:40 +03:00
parent 2ad384e63b f3e27fb607
commit 1c01c792fc
202 changed files with 16895 additions and 3799 deletions
--- a/apps/edr-freight-web/backoffice/package.json
+++ b/apps/edr-freight-web/backoffice/package.json
@@ -5,6 +5,7 @@
  "type": "module",
  "scripts": {
    "dev": "vite --port 5183",
+    "prebuild": "node -e \"const fs=require('fs'); fs.rmSync('dist',{recursive:true,force:true});\"",
    "build": "vite build",
    "preview": "vite preview --port 5183",
    "lint": "eslint src",
@@ -19,7 +20,7 @@
    "@mantine/hooks": "^9.3.0",
    "@tabler/icons-react": "^3.44.0",
    "@tanstack/react-query": "^5.100.11",
-    "@tria-plc/iamui": "file:../../../local-packages/tria-plc-iamui-0.0.3.tgz",
+    "@tria-plc/iamui": "file:../../../local-packages/tria-plc-iamui-0.1.1.tgz",
    "axios": "^1.7.7",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -83,6 +83,7 @@ import WarehouseInventoryPage from "./pages/warehouses/WarehouseInventoryPage";
 import WarehouseInvoicesPage from "./pages/warehouses/WarehouseInvoicesPage";
 import WarehouseListPage from "./pages/warehouses/WarehouseListPage";
 import WarehouseRulesPage from "./pages/warehouses/WarehouseRulesPage";
+import { HealthCheck } from "./features/health/HealthCheck";

 const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
  {
@@ -94,7 +95,7 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
        icon: <LayoutDashboard />,
      },
      {
-        label: "UM",
+        label: "User Management",
        href: "/um",
        icon: <Users />,
      },
@@ -386,6 +387,7 @@ const App = () => {
  return (
    <Routes>
      <Route path="/um/*" element={<UserManagementHostPage />} />
+      <Route path="/health" element={<HealthCheck />} />
      <Route path="/" element={<Navigate to="/dashboard/overview" replace />} />
      <Route path="/dashboard" element={<Navigate to="/dashboard/overview" replace />} />
      <Route path="/dashboard" element={<DashboardShell />}>
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx
@@ -134,15 +134,23 @@ export function FeePreviewModal({ opened, onClose, inventoryId }: FeePreviewModa
    const pdfWindow = window.open('', '_blank');
    try {
      const releasedItem = await gateClear.mutateAsync(inventoryId) as WarehouseInventoryItem;
-      const documentResponse = await warehouseService.downloadReleaseDocument(inventoryId);
-      const filename = `release-${releasedItem?.booking?.reference ?? releasedItem?.bookingId ?? inventoryId}.pdf`;
-      const opened = openPdfBlob(documentResponse.data, filename, pdfWindow);
-      toast({
-        title: 'Gate clearance recorded',
-        description: opened
-          ? 'The release PDF opened in a browser tab.'
-          : 'The browser blocked the preview tab, so the PDF was downloaded.',
-      });
+      try {
+        const documentResponse = await warehouseService.downloadReleaseDocument(inventoryId);
+        const filename = `release-${releasedItem?.booking?.reference ?? releasedItem?.bookingId ?? inventoryId}.pdf`;
+        const opened = openPdfBlob(documentResponse.data, filename, pdfWindow);
+        toast({
+          title: 'Gate clearance recorded',
+          description: opened
+            ? 'The release PDF opened in a browser tab.'
+            : 'The browser blocked the preview tab, so the PDF was downloaded.',
+        });
+      } catch (documentError) {
+        pdfWindow?.close();
+        toast({
+          title: 'Gate clearance recorded',
+          description: `Release paper could not be opened: ${extractErrorMessage(documentError)}`,
+        });
+      }
      onClose();
    } catch (error) {
      pdfWindow?.close();
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/InterchangeDocumentDetailPanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/InterchangeDocumentDetailPanel.tsx
@@ -69,6 +69,8 @@ export function InterchangeDocumentDetailPanel({ id }: { id: string }) {
        />
        <DetailField label="Generated At" value={formatDate(document.generatedAt)} />
        <DetailField label="Acknowledged At" value={formatDate(document.acknowledgedAt)} />
+        <DetailField label="Signed by EDR" value={document.generatedBy} />
+        <DetailField label="Signed by Djibouti Port" value={document.acknowledgedBy} />
        <DetailField label="Customs Ref" value={document.customsReference} />
        <DetailField label="Manifest Ref" value={document.manifestReference} />
      </SimpleGrid>
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/InventoryDetailModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/InventoryDetailModal.tsx
@@ -24,6 +24,15 @@ function DetailRow({ label, value }: { label: string; value: React.ReactNode })
 }

 export function InventoryDetailModal({ opened, onClose, item }: InventoryDetailModalProps) {
+  const bookingReference = item?.booking?.reference ?? '-';
+  const inventorySummary = [
+    item?.status?.replace(/_/g, ' '),
+    item?.releaseOrderReference ? `Release ${item.releaseOrderReference}` : null,
+    item?.warehouse ? `${item.warehouse.name} (${item.warehouse.code})` : null,
+  ]
+    .filter(Boolean)
+    .join(' / ');
+
  return (
    <Modal opened={opened} onClose={onClose} title="Inventory detail" centered size="xl">
      {!item ? (
@@ -33,10 +42,10 @@ export function InventoryDetailModal({ opened, onClose, item }: InventoryDetailM
          <Group justify="space-between" align="flex-start">
            <Stack gap={2}>
              <Text size="lg" fw={800}>
-                {item.booking?.reference ?? item.bookingId ?? item.id}
+                {bookingReference}
              </Text>
              <Text size="sm" c="dimmed">
-                Inventory ID: {item.id}
+                {inventorySummary || 'Inventory information'}
              </Text>
            </Stack>
            <InventoryStatusBadge status={item.status} />
@@ -51,12 +60,12 @@ export function InventoryDetailModal({ opened, onClose, item }: InventoryDetailM

          <Divider label="Booking & item" labelPosition="left" />
          <SimpleGrid cols={{ base: 1, sm: 3 }}>
+            <DetailRow label="Booking reference" value={bookingReference} />
            <DetailRow label="Booking status" value={item.booking?.status ?? '-'} />
            <DetailRow label="Payment status" value={item.booking?.paymentStatus ?? '-'} />
            <DetailRow label="Trade direction" value={item.booking?.tradeDirection ?? '-'} />
-            <DetailRow label="Container ID" value={item.containerId ?? '-'} />
-            <DetailRow label="Cargo ID" value={item.cargoId ?? '-'} />
-            <DetailRow label="Goods ID" value={item.goodsId ?? '-'} />
+            <DetailRow label="Inventory status" value={item.status.replace(/_/g, ' ')} />
+            <DetailRow label="Release reference" value={item.releaseOrderReference ?? '-'} />
            <DetailRow label="Quantity" value={formatNumber(item.quantity)} />
            <DetailRow label="Weight" value={`${formatNumber(item.weight)} kg`} />
            <DetailRow label="Volume" value={item.volume == null ? '-' : formatNumber(item.volume)} />
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Alert, Button, Group, Modal, Stack, Text, TextInput } from '@mantine/core';
-import { Info } from 'lucide-react';
+import { Alert, Button, Group, Modal, NumberInput, Select, Stack, Text, TextInput } from '@mantine/core';
+import { Info, Scale } from 'lucide-react';

 import { useMutation } from '@tanstack/react-query';

@@ -17,23 +17,115 @@ interface ReleaseOrderModalProps {
  item: WarehouseInventoryItem | null;
 }

+const REGISTERED_FIRST_LAST_MILE_TRUCKS = [
+  ['03-ET A45843', '43495'], ['03-ET A45866', '43470'], ['03-ET A45853', '43508'], ['03-ET A45849', '43414'],
+  ['03-ET A45845', '43492'], ['03-ET A45820', '43487'], ['03-ET A45842', '43478'], ['03-ET A45841', '43515'],
+  ['03-ET A45832', '43504'], ['03-ET A45856', '43510'], ['03-ET A45865', '43490'], ['03-ET A45855', '43485'],
+  ['03-ET A45840', '43499'], ['03-ET A45867', '43493'], ['03-ET A45833', '43466'], ['03-ET A45858', '43496'],
+  ['03-ET A45819', '43474'], ['03-ET A45834', '43502'], ['03-ET A45868', '43469'], ['03-ET A45831', '43488'],
+  ['03-ET A45828', '43479'], ['03-ET A45850', '43505'], ['03-ET A45823', '43480'], ['03-ET A45838', '43472'],
+  ['03-ET A45854', '43500'], ['03-ET A45839', '43486'], ['03-ET A45861', '43513'], ['03-ET A45830', '43501'],
+  ['03-ET A45826', '43498'], ['03-ET A45836', '43467'], ['03-ET A45822', '43512'], ['03-ET A45821', '43210'],
+  ['03-ET A45837', '43475'], ['03-ET A45860', '43497'], ['03-ET A45863', '43477'], ['03-ET A45825', '43483'],
+  ['03-ET A45829', '43473'], ['03-ET A45824', '43491'], ['03-ET A45857', '43481'], ['03-ET A45851', '43509'],
+  ['03-ET A45827', '43468'], ['03-ET A45859', '43887'], ['03-ET A45846', '43471'], ['03-ET A45847', '43511'],
+  ['03-ET A45852', '43484'], ['03-ET A45844', '43476'], ['03-ET A45835', '43482'], ['03-ET A45864', '43503'],
+  ['03-ET A45848', '43494'], ['03-ET A45862', '43465'], ['03-ET A39105', '41218'], ['03-ET A39098', '41220'],
+  ['03-ET A29900', '41865'], ['03-ET A39097', '41226'], ['03-ET A39104', '41225'], ['03-ET A39103', '41223'],
+  ['03-ET A39106', '41221'], ['03-ET A39107', '41215'], ['03-ET A39094', '41222'], ['03-ET A39099', '41216'],
+  ['03-ET A39092', '41224'], ['03-ET A31801', '41214'],
+].map(([powerPlate, trailerPlate], index) => ({
+  value: powerPlate,
+  label: `${index + 1}. ${powerPlate} / ${trailerPlate}`,
+  trailerPlate,
+}));
+
+const toIsoDateTime = (value: string) => {
+  if (!value) return undefined;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
+};
+
 export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalProps) {
  const { toast } = useToast();
  const releaseMutation = useMutation(api.warehouses.release.mutationOptions());
  const [reference, setReference] = useState('');
+  const [truckPlateNumber, setTruckPlateNumber] = useState('');
+  const [trailerPlateNumber, setTrailerPlateNumber] = useState('');
+  const [driverName, setDriverName] = useState('');
+  const [driverLicense, setDriverLicense] = useState('');
+  const [driverPhone, setDriverPhone] = useState('');
+  const [truckType, setTruckType] = useState('');
+  const [containerNumber, setContainerNumber] = useState('');
+  const [gateInTime, setGateInTime] = useState('');
+  const [tareWeight, setTareWeight] = useState<number | ''>('');
+  const [grossWeight, setGrossWeight] = useState<number | ''>('');
+  const [netWeight, setNetWeight] = useState<number | ''>('');
+  const [gateOutTime, setGateOutTime] = useState('');
  const [downloading, setDownloading] = useState(false);

  useEffect(() => {
-    if (opened) setReference(item?.releaseOrderReference ?? '');
+    if (opened) {
+      setReference(item?.releaseOrderReference ?? '');
+      setTruckPlateNumber('');
+      setTrailerPlateNumber('');
+      setDriverName('');
+      setDriverLicense('');
+      setDriverPhone('');
+      setTruckType('');
+      setContainerNumber('');
+      setGateInTime('');
+      setTareWeight('');
+      setGrossWeight('');
+      setNetWeight(item?.weight != null ? Number(item.weight) : '');
+      setGateOutTime('');
+    }
  }, [opened, item]);

+  const computedNetWeight =
+    tareWeight !== '' && grossWeight !== '' ? Number((Number(grossWeight) - Number(tareWeight)).toFixed(3)) : null;
+  const weightMismatch =
+    computedNetWeight != null && netWeight !== '' && Math.abs(Number(netWeight) - computedNetWeight) > 0.001;
+
  const handleSubmit = async () => {
    if (!item) return;
+    if (!truckPlateNumber.trim() || !driverName.trim()) {
+      toast({ variant: 'destructive', title: 'Truck plate and driver name are required' });
+      return;
+    }
+    if (tareWeight === '' || grossWeight === '') {
+      toast({ variant: 'destructive', title: 'Tare and gross weight are required' });
+      return;
+    }
+    if (weightMismatch) {
+      toast({
+        variant: 'destructive',
+        title: 'Weight mismatch',
+        description: 'Gate clearance is blocked. Reassign the item to warehouse if it cannot exit.',
+      });
+      return;
+    }
    const pdfWindow = window.open('', '_blank');
    try {
      const released = await releaseMutation.mutateAsync({
        id: item.id,
-        payload: { reference: reference.trim() || undefined },
+        payload: {
+          reference: reference.trim() || undefined,
+          bookingId: item.bookingId ?? undefined,
+          customerId: undefined,
+          truckPlateNumber: truckPlateNumber.trim(),
+          trailerPlateNumber: trailerPlateNumber.trim() || undefined,
+          driverName: driverName.trim(),
+          driverLicense: driverLicense.trim() || undefined,
+          driverPhone: driverPhone.trim() || undefined,
+          truckType: truckType.trim() || undefined,
+          containerNumber: containerNumber.trim() || undefined,
+          gateInTime: toIsoDateTime(gateInTime),
+          tareWeight: Number(tareWeight),
+          grossWeight: Number(grossWeight),
+          netWeight: netWeight === '' ? computedNetWeight ?? undefined : Number(netWeight),
+          gateOutTime: toIsoDateTime(gateOutTime),
+        },
      });
      setDownloading(true);
      const response = await warehouseService.downloadReleaseDocument(item.id);
@@ -56,12 +148,12 @@ export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalPr
  };

  return (
-    <Modal opened={opened} onClose={onClose} title="Issue release exit paper" centered size="md">
+    <Modal opened={opened} onClose={onClose} title="Exit inspection and release paper" centered size="lg">
      <Stack gap="md">
        <Alert icon={<Info size={16} />} color="orange" variant="light">
          <Text size="sm">
-            Creates the warehouse release document with booking, customer, cargo and location details. The
-            printed paper authorizes the goods to leave the warehouse gate.
+            Save the exit inspection before generating the exit paper. Gate clearance is blocked when
+            recorded net weight does not equal gross weight minus tare weight.
          </Text>
        </Alert>
        <TextInput
@@ -70,12 +162,69 @@ export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalPr
          value={reference}
          onChange={(e) => setReference(e.currentTarget.value)}
        />
+        <Select
+          label="Registered first / last-mile truck"
+          placeholder="Select truck or type plate manually below"
+          searchable
+          clearable
+          data={REGISTERED_FIRST_LAST_MILE_TRUCKS}
+          value={REGISTERED_FIRST_LAST_MILE_TRUCKS.some((truck) => truck.value === truckPlateNumber) ? truckPlateNumber : null}
+          onChange={(value) => {
+            const truck = REGISTERED_FIRST_LAST_MILE_TRUCKS.find((row) => row.value === value);
+            setTruckPlateNumber(truck?.value ?? '');
+            setTrailerPlateNumber(truck?.trailerPlate ?? '');
+          }}
+        />
+        <Group grow>
+          <TextInput
+            label="Truck plate number"
+            required
+            value={truckPlateNumber}
+            onChange={(e) => setTruckPlateNumber(e.currentTarget.value)}
+          />
+          <TextInput
+            label="Trailer plate number"
+            value={trailerPlateNumber}
+            onChange={(e) => setTrailerPlateNumber(e.currentTarget.value)}
+          />
+        </Group>
+        <Group grow>
+          <TextInput label="Driver name" required value={driverName} onChange={(e) => setDriverName(e.currentTarget.value)} />
+          <TextInput label="Driver license" value={driverLicense} onChange={(e) => setDriverLicense(e.currentTarget.value)} />
+        </Group>
+        <Group grow>
+          <TextInput label="Driver phone" value={driverPhone} onChange={(e) => setDriverPhone(e.currentTarget.value)} />
+          <TextInput label="Truck type" value={truckType} onChange={(e) => setTruckType(e.currentTarget.value)} />
+        </Group>
+        <Group grow>
+          <TextInput label="Container number" value={containerNumber} onChange={(e) => setContainerNumber(e.currentTarget.value)} />
+          <TextInput label="Gate in time" type="datetime-local" value={gateInTime} onChange={(e) => setGateInTime(e.currentTarget.value)} />
+        </Group>
+        <Group grow>
+          <NumberInput label="Tare weight (kg)" required min={0} value={tareWeight} onChange={(v) => setTareWeight(v === '' ? '' : Number(v))} />
+          <NumberInput label="Gross weight (kg)" required min={0} value={grossWeight} onChange={(v) => setGrossWeight(v === '' ? '' : Number(v))} />
+          <NumberInput label="Recorded net weight (kg)" min={0} value={netWeight} onChange={(v) => setNetWeight(v === '' ? '' : Number(v))} />
+        </Group>
+        <Group justify="space-between">
+          <Text size="sm" c={weightMismatch ? 'red' : 'dimmed'}>
+            Computed net: <b>{computedNetWeight == null ? '-' : `${computedNetWeight.toLocaleString()} kg`}</b>
+          </Text>
+          <TextInput label="Gate out time" type="datetime-local" value={gateOutTime} onChange={(e) => setGateOutTime(e.currentTarget.value)} />
+        </Group>
+        {weightMismatch && (
+          <Alert icon={<Scale size={16} />} color="red" variant="light">
+            <Text size="sm">
+              Weight mismatch detected. Exit paper and gate clearance are blocked; use Store or Move to
+              reassign the item back to warehouse handling.
+            </Text>
+          </Alert>
+        )}
        <Group justify="flex-end" mt="sm">
          <Button variant="default" onClick={onClose} disabled={releaseMutation.isPending || downloading}>
            Cancel
          </Button>
          <Button color="orange" onClick={handleSubmit} loading={releaseMutation.isPending || downloading}>
-            Issue & view exit paper
+            Exit Inspection & View Exit Paper
          </Button>
        </Group>
      </Stack>
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseInventoryTable.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseInventoryTable.tsx
@@ -164,7 +164,7 @@ export function WarehouseInventoryTable({
                        loading={busy}
                        onClick={() => onAdvance(item, nextAction)}
                      >
-                        {humanizeEnum(nextAction.replace(/-/g, '_'))}
+                        {nextAction === 'release' ? 'Exit Inspection' : humanizeEnum(nextAction.replace(/-/g, '_'))}
                      </Button>
                    )}
                    {item.status === 'READY_FOR_PICKUP' && (
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseTable.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseTable.tsx
@@ -181,7 +181,7 @@ export function WarehouseTable({ warehouses, onView, onEdit }: WarehouseTablePro
          </ActionIcon>
        </Group>
      ),
-    },
+      },
  ];

  return (
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/warehousePdf.ts
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/warehousePdf.ts
@@ -0,0 +1,273 @@
+import type { WarehouseFeeInvoice, WarehouseInventoryItem } from '@/types/warehouse';
+import type { BookingDetail } from '@/types/booking';
+
+type PdfLine = {
+  text: string;
+  size?: number;
+  bold?: boolean;
+  x?: number;
+  yGap?: number;
+  color?: 'black' | 'green';
+  align?: 'left' | 'center' | 'right';
+};
+
+export interface WarehouseExitPaperContext {
+  invoice: WarehouseFeeInvoice;
+  releasedItem?: WarehouseInventoryItem;
+  inventory?: WarehouseInventoryItem;
+  booking?: BookingDetail | null;
+  releasedAt?: Date;
+}
+
+const escapePdfText = (value: string) =>
+  value.replace(/\\/g, '\\\\').replace(/\(/g, '\\(').replace(/\)/g, '\\)');
+
+const money = (amount: unknown, currency = 'USD') =>
+  `${Number(amount ?? 0).toLocaleString()} ${currency === 'ETB' ? 'Birr (ETB)' : currency}`;
+
+const fmtDate = (value: unknown) => {
+  if (!value) return '-';
+  const date = new Date(value as string | Date);
+  return Number.isNaN(date.getTime()) ? '-' : date.toLocaleString();
+};
+
+const GREEN = '0 0.55 0.32';
+
+const circlePath = (cx: number, cy: number, r: number) => {
+  const k = 0.5522847498;
+  const c = r * k;
+  return [
+    `${cx + r} ${cy} m`,
+    `${cx + r} ${cy + c} ${cx + c} ${cy + r} ${cx} ${cy + r} c`,
+    `${cx - c} ${cy + r} ${cx - r} ${cy + c} ${cx - r} ${cy} c`,
+    `${cx - r} ${cy - c} ${cx - c} ${cy - r} ${cx} ${cy - r} c`,
+    `${cx + c} ${cy - r} ${cx + r} ${cy - c} ${cx + r} ${cy} c`,
+    'h',
+  ].join('\n');
+};
+
+const stampText = (text: string, x: number, y: number, size: number, bold = false) =>
+  `BT\n${GREEN} rg\n/${bold ? 'F2' : 'F1'} ${size} Tf\n${x} ${y} Td\n(${escapePdfText(text)}) Tj\nET`;
+
+const buildCircularSeal = (cx: number, cy: number, label: 'PAID' | 'CLEARED') =>
+  [
+    'q',
+    `${GREEN} RG`,
+    `${GREEN} rg`,
+    '2.2 w',
+    circlePath(cx, cy, 52),
+    'S',
+    '0.9 w',
+    circlePath(cx, cy, 42),
+    'S',
+    stampText('EDR FREIGHT', cx - 33, cy + 24, 9, true),
+    stampText(label, cx - (label === 'CLEARED' ? 36 : 21), cy - 4, label === 'CLEARED' ? 17 : 20, true),
+    stampText(label === 'CLEARED' ? 'GATE RELEASE' : 'WAREHOUSE', cx - (label === 'CLEARED' ? 34 : 32), cy - 25, 8),
+    'Q',
+  ].join('\n');
+
+const estimateTextWidth = (text: string, size: number) => text.length * size * 0.52;
+
+const textX = (text: string, size: number, align: PdfLine['align'] = 'left', x?: number) => {
+  if (typeof x === 'number') return x;
+  if (align === 'center') return Math.max(36, (595 - estimateTextWidth(text, size)) / 2);
+  if (align === 'right') return Math.max(36, 535 - estimateTextWidth(text, size));
+  return 60;
+};
+
+const lineOp = (x1: number, y1: number, x2: number, y2: number, color = '0.65 0.7 0.76') =>
+  `q\n${color} RG\n0.8 w\n${x1} ${y1} m\n${x2} ${y2} l\nS\nQ`;
+
+const textOp = (
+  text: string,
+  x: number,
+  y: number,
+  size = 10,
+  bold = false,
+  color = '0 0 0',
+) => `BT\n${color} rg\n/${bold ? 'F2' : 'F1'} ${size} Tf\n${x} ${y} Td\n(${escapePdfText(text)}) Tj\nET`;
+
+const buildAuthorizationBand = (label: 'PAID' | 'CLEARED') => [
+  lineOp(60, 242, 535, 242),
+  textOp('AUTHORIZED SEAL', 382, 218, 9, true, GREEN),
+  buildCircularSeal(452, 155, label),
+];
+
+const buildWarehouseOfficerSealBand = () => [
+  lineOp(60, 218, 535, 218),
+  textOp('WAREHOUSE OFFICER SEAL', 92, 194, 9, true, GREEN),
+  buildCircularSeal(170, 128, 'CLEARED'),
+  textOp('Officer in charge name / signature / date:', 292, 154, 10),
+  lineOp(292, 132, 535, 132, '0 0 0'),
+  textOp('Customer or driver name / signature / date:', 292, 94, 10),
+  lineOp(292, 72, 535, 72, '0 0 0'),
+];
+
+function buildSimplePdf(lines: PdfLine[], rawOps: string[] = []): Blob {
+  let y = 800;
+  const streamLines = lines.map((line) => {
+    y -= line.yGap ?? 16;
+    const size = line.size ?? 10;
+    const font = line.bold ? '/F2' : '/F1';
+    const color = line.color === 'green' ? `${GREEN} rg` : '0 0 0 rg';
+    return `BT\n${color}\n${font} ${size} Tf\n${textX(line.text, size, line.align, line.x)} ${y} Td\n(${escapePdfText(line.text)}) Tj\nET`;
+  });
+  const stream = [...rawOps, ...streamLines].join('\n');
+  const objects = [
+    '<< /Type /Catalog /Pages 2 0 R >>',
+    '<< /Type /Pages /Kids [3 0 R] /Count 1 >>',
+    '<< /Type /Page /Parent 2 0 R /MediaBox [0 0 595 842] /Resources << /Font << /F1 4 0 R /F2 5 0 R >> >> /Contents 6 0 R >>',
+    '<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>',
+    '<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica-Bold >>',
+    `<< /Length ${stream.length} >>\nstream\n${stream}\nendstream`,
+  ];
+
+  let pdf = '%PDF-1.4\n';
+  const offsets = [0];
+  objects.forEach((object, index) => {
+    offsets.push(pdf.length);
+    pdf += `${index + 1} 0 obj\n${object}\nendobj\n`;
+  });
+  const xref = pdf.length;
+  pdf += `xref\n0 ${objects.length + 1}\n0000000000 65535 f \n`;
+  offsets.slice(1).forEach((offset) => {
+    pdf += `${String(offset).padStart(10, '0')} 00000 n \n`;
+  });
+  pdf += `trailer\n<< /Size ${objects.length + 1} /Root 1 0 R >>\nstartxref\n${xref}\n%%EOF\n`;
+  return new Blob([pdf], { type: 'application/pdf' });
+}
+
+export function buildWarehouseInvoicePdf(invoice: WarehouseFeeInvoice, kind: 'INVOICE' | 'RECEIPT') {
+  const paid = kind === 'RECEIPT' || invoice.status === 'PAID';
+  const title = `Warehouse Fee ${kind === 'RECEIPT' ? 'Receipt' : 'Invoice'}`;
+  const bookingReference = firstText(invoice.bookingReference);
+  const customerName = firstText(invoice.customerName);
+  const inventoryReference = firstText(invoice.inventoryReference);
+  const inventoryInfo = firstText(invoice.inventoryInfo, invoice.containerNumber, invoice.cargoDescription);
+  const clearanceStatus = firstText(
+    invoice.clearanceStatus,
+    paid ? 'FEE PAID - READY FOR RELEASE' : 'PENDING PAYMENT',
+  );
+  const lines: PdfLine[] = [
+    { text: 'Ethio-Djibouti Railway S.C.', size: 12, bold: true, yGap: 0, align: 'center' },
+    { text: title, size: 23, bold: true, yGap: 28, align: 'center' },
+    { text: `Document No: ${invoice.invoiceNumber}`, size: 12, bold: true, yGap: 32, align: 'center' },
+    { text: `Status: ${invoice.status.replace(/_/g, ' ')}     Type: ${invoice.invoiceType.replace(/_/g, ' ')}`, align: 'center' },
+    { text: `Booking Reference: ${bookingReference}     Customer: ${customerName}`, align: 'center' },
+    { text: `Inventory Reference: ${inventoryReference}     Inventory Info: ${inventoryInfo}`, align: 'center' },
+    { text: `Clearance: ${clearanceStatus}`, align: 'center' },
+    { text: `Issued: ${fmtDate(invoice.issuedAt)}     Paid At: ${fmtDate(invoice.paidAt)}`, align: 'center' },
+    { text: 'ITEMS', size: 13, bold: true, yGap: 30, align: 'center' },
+    ...(invoice.items ?? []).flatMap((item) => [
+      { text: item.description, bold: true, align: 'center' as const },
+      {
+        text: `${item.feeType.replace(/_/g, ' ')} | Qty ${Number(item.quantity ?? 0).toLocaleString()} | Rate ${money(item.unitRate, item.currency)} | Amount ${money(item.amount, item.currency)}`,
+        yGap: 13,
+        align: 'center' as const,
+      },
+    ]),
+    { text: 'TOTALS', size: 13, bold: true, yGap: 30, align: 'center' },
+    { text: `Subtotal: ${money(invoice.subtotalAmount, invoice.currency)}`, align: 'center' },
+    { text: `Tax: ${money(invoice.taxAmount, invoice.currency)}`, align: 'center' },
+    { text: `Total: ${money(invoice.totalAmount, invoice.currency)}`, bold: true, align: 'center' },
+    { text: `Paid: ${money(invoice.paidAmount, invoice.currency)}`, align: 'center' },
+    { text: `Balance: ${money(invoice.balanceAmount, invoice.currency)}`, bold: true, align: 'center' },
+  ];
+  const authorizationOps = [
+    ...buildAuthorizationBand('PAID'),
+    textOp('Prepared by EDR warehouse finance', 72, 196, 10),
+    textOp('Finance officer name / signature / date:', 72, 164, 10),
+    lineOp(245, 162, 360, 162, '0 0 0'),
+  ];
+  const invoiceOps = [
+    lineOp(60, 242, 535, 242),
+    textOp('Prepared by EDR warehouse finance', 72, 196, 10),
+    textOp('Finance officer name / signature / date:', 72, 164, 10),
+    lineOp(245, 162, 360, 162, '0 0 0'),
+  ];
+  return buildSimplePdf(lines, paid ? authorizationOps : invoiceOps);
+}
+
+const firstText = (...values: Array<unknown>) => {
+  for (const value of values) {
+    if (value !== null && value !== undefined && String(value).trim()) return String(value);
+  }
+  return '-';
+};
+
+const tons = (value: unknown) => {
+  const num = Number(value ?? 0);
+  if (!Number.isFinite(num) || num <= 0) return null;
+  return `${num.toLocaleString(undefined, { maximumFractionDigits: 3 })} ton`;
+};
+
+const containerSummary = (booking?: BookingDetail | null, inventory?: WarehouseInventoryItem) => {
+  const explicitNumber = (inventory as unknown as { containerNumber?: string | null })?.containerNumber;
+  if (explicitNumber) return explicitNumber;
+  const containers = booking?.bookingContainers ?? [];
+  if (!containers.length) return '-';
+  return containers
+    .map((item) => {
+      const type = item.containerType?.code ?? item.containerType?.label ?? item.containerTypeId;
+      return `${item.quantity} x ${type}`;
+    })
+    .join(', ');
+};
+
+export function buildWarehouseExitPaperPdf(input: WarehouseFeeInvoice | WarehouseExitPaperContext, releasedItemArg?: WarehouseInventoryItem) {
+  const context: WarehouseExitPaperContext =
+    'invoice' in input ? input : { invoice: input, releasedItem: releasedItemArg };
+  const { invoice, booking } = context;
+  const releasedItem = context.releasedItem;
+  const inventory = context.inventory ?? releasedItem;
+  const releasedAt = context.releasedAt ?? new Date();
+  const releaseReference = firstText(
+    inventory?.releaseOrderReference,
+    releasedItem?.releaseOrderReference,
+    invoice.inventoryReference,
+    booking?.reference ? `REL-${booking.reference.replace(/^BK-?/i, '')}` : null,
+  );
+  const customerName = firstText(
+    booking?.company?.name,
+    booking?.company?.companyName,
+    booking?.company?.label,
+    booking?.company?.contactPersonName,
+    invoice.customerName,
+  );
+  const weightTons = firstText(tons(booking?.cargoTotalWeightVgm), tons(inventory?.weight));
+  const inventoryInfo = firstText(
+    invoice.inventoryInfo,
+    invoice.containerNumber,
+    invoice.cargoDescription,
+    inventory?.status,
+    releasedItem?.status,
+  );
+  const bookingReference = firstText(
+    booking?.reference,
+    (inventory as unknown as { bookingReference?: string })?.bookingReference,
+    invoice.bookingReference,
+    releasedItem?.booking?.reference,
+  );
+
+  return buildSimplePdf([
+    { text: 'Ethio-Djibouti Railway S.C.', size: 12, bold: true, yGap: 0, align: 'center' },
+    { text: 'Warehouse Release / Exit Paper', size: 23, bold: true, yGap: 28, align: 'center' },
+    { text: '[ GATE CLEARANCE ]', size: 14, bold: true, color: 'green', yGap: 24, align: 'center' },
+    { text: `Release Reference: ${releaseReference}`, bold: true, yGap: 30, align: 'center' },
+    { text: `Invoice No: ${invoice.invoiceNumber}`, align: 'center' },
+    { text: `Booking Reference: ${bookingReference}`, align: 'center' },
+    { text: `Customer: ${customerName}`, align: 'center' },
+    { text: `Inventory Info: ${inventoryInfo}`, align: 'center' },
+    { text: `Warehouse: ${firstText(inventory?.warehouse?.name, inventory?.warehouse?.code)}`, align: 'center' },
+    { text: `Yard: ${firstText(inventory?.yard?.name, inventory?.yard?.code)}`, align: 'center' },
+    { text: `Zone: ${firstText(inventory?.zone?.name, inventory?.zone?.code)}`, align: 'center' },
+    { text: `Booking Container: ${containerSummary(booking, inventory)}`, align: 'center' },
+    { text: `Weight: ${weightTons}`, align: 'center' },
+    { text: `Inventory Status: ${releasedItem?.status ?? inventory?.status ?? 'RELEASED'}`, align: 'center' },
+    { text: `Clearance: ${invoice.clearanceStatus ?? 'CLEARED FOR WAREHOUSE EXIT'}`, bold: true, color: 'green', align: 'center' },
+    { text: `Release Date & Time: ${fmtDate(releasedAt)}`, align: 'center' },
+    { text: 'This sealed document authorizes the listed booking/goods to leave the warehouse gate.', yGap: 30, align: 'center' },
+  ], [
+    ...buildWarehouseOfficerSealBand(),
+  ]);
+}
--- a/apps/edr-freight-web/backoffice/src/constants/URLS.ts
+++ b/apps/edr-freight-web/backoffice/src/constants/URLS.ts
@@ -250,6 +250,24 @@ export const URL_CONSTANTS = {
    PIN_WAGONS: (id: string) => `/train-scheduling/schedules/${id}/pin-wagons`,
    FINALIZE: (id: string) => `/train-scheduling/schedules/${id}/finalize`,
    DISPATCH: (id: string) => `/train-scheduling/schedules/${id}/dispatch`,
+    IMPORT_DJIBOUTI: (id: string) =>
+      `/train-scheduling/schedules/${id}/import-djibouti`,
+    IMPORT_DJIBOUTI_DOCUMENTS: (id: string) =>
+      `/train-scheduling/schedules/${id}/import-djibouti/documents`,
+    IMPORT_DJIBOUTI_GATEPASS_GRANTED: (id: string) =>
+      `/train-scheduling/schedules/${id}/import-djibouti/gatepass-granted`,
+    IMPORT_DJIBOUTI_READY_FOR_LOADING: (id: string) =>
+      `/train-scheduling/schedules/${id}/import-djibouti/ready-for-loading`,
+    IMPORT_DJIBOUTI_LOADED_ON_TRAIN: (id: string) =>
+      `/train-scheduling/schedules/${id}/import-djibouti/loaded-on-train`,
+    IMPORT_DJIBOUTI_DEPART: (id: string) =>
+      `/train-scheduling/schedules/${id}/import-djibouti/depart`,
+    IMPORT_DJIBOUTI_LOAD_LIST: (id: string) =>
+      `/train-scheduling/schedules/${id}/import-djibouti/load-list`,
+    IMPORT_DJIBOUTI_LOAD_LIST_DOCUMENT: (id: string) =>
+      `/train-scheduling/schedules/${id}/import-djibouti/load-list/document`,
+    EXPORT_LOAD_LIST_DOCUMENT: (id: string) =>
+      `/train-scheduling/schedules/${id}/export/load-list/document`,
    CHECKPOINTS: (id: string) => `/train-scheduling/schedules/${id}/checkpoints`,
    ARRIVE: (id: string) => `/train-scheduling/schedules/${id}/arrive`,
    RESCHEDULE_PREVIEW: (id: string) =>
@@ -380,6 +398,7 @@ export const URL_CONSTANTS = {
    RECEIVE_BULK: '/warehouse-inventory/receive-bulk',
    LOAD_PASSED_EXPORT: '/warehouse-inventory/load-passed-export',
    BULK_MARK_INSPECTED: '/warehouse-inventory/bulk-mark-inspected',
+    RECEIVED_EXPORT: '/warehouse-inventory/received-export',
    READY_TO_LOAD_EXPORT: '/warehouse-inventory/ready-to-load-export',
    LOADED_EXPORT: '/warehouse-inventory/loaded-export',
    BULK_DISPATCH_EXPORT: '/warehouse-inventory/bulk-dispatch-export',
@@ -416,6 +435,8 @@ export const URL_CONSTANTS = {
  WAREHOUSE_INVOICES: {
    BASE: '/warehouse-fee-invoices',
    BY_ID: (id: string) => `/warehouse-fee-invoices/${id}`,
+    DOCUMENT: (id: string) => `/warehouse-fee-invoices/${id}/document`,
+    RECEIPT: (id: string) => `/warehouse-fee-invoices/${id}/receipt`,
    CANCEL: (id: string) => `/warehouse-fee-invoices/${id}/cancel`,
    PAY: (id: string) => `/warehouse-fee-invoices/${id}/pay`,
    GENERATE: (inventoryId: string) => `/warehouse-inventory/${inventoryId}/generate-fee-invoice`,
@@ -433,6 +454,23 @@ export const URL_CONSTANTS = {
    CANCEL: (id: string) => `/interchange-documents/${id}/cancel`,
  },

+  IMPORT_OPERATIONS: {
+    DJIBOUTI_INCIDENTS: '/import-operations/djibouti-incidents',
+    CUSTOMS: (bookingId: string) => `/import-operations/customs/${bookingId}`,
+    CUSTOMS_DOCUMENTS: (bookingId: string) => `/import-operations/customs/${bookingId}/documents`,
+    CUSTOMS_DECLARATION: (bookingId: string) => `/import-operations/customs/${bookingId}/declaration`,
+    CUSTOMS_NOTIFY_DUTIES_TAXES: (bookingId: string) =>
+      `/import-operations/customs/${bookingId}/notify-duties-taxes`,
+    CUSTOMS_DUTIES_TAXES_PAID: (bookingId: string) =>
+      `/import-operations/customs/${bookingId}/duties-taxes-paid`,
+    CUSTOMS_RISK: (bookingId: string) => `/import-operations/customs/${bookingId}/risk`,
+    CUSTOMS_RELEASE_PERMITTED: (bookingId: string) =>
+      `/import-operations/customs/${bookingId}/release-permitted`,
+    EMPTY_CONTAINER_RETURNS: '/import-operations/empty-container-returns',
+    EMPTY_CONTAINER_RETURN_STATUS: (id: string) =>
+      `/import-operations/empty-container-returns/${id}/status`,
+  },
+
  VEHICLES: {
    BASE: '/vehicles',
    BY_ID: (id: string) => `/vehicles/${id}`,
--- a/apps/edr-freight-web/backoffice/src/hooks/bookings/useBookings.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/bookings/useBookings.ts
@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { isAxiosError } from "axios";
 import toast from "react-hot-toast";

 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
@@ -9,6 +10,16 @@ import {
 } from "@/services/bookings.service";
 import { invalidateBookingDetail } from "@/utils/queryInvalidation";

+const parseApiError = (error: unknown, fallback: string) => {
+  if (isAxiosError(error)) {
+    const message = error.response?.data?.message;
+    if (Array.isArray(message)) return message.join(", ");
+    if (typeof message === "string") return message;
+  }
+  if (error instanceof Error && error.message) return error.message;
+  return fallback;
+};
+
 export function useBookingList(filter?: BookingListFilter, enabled = true) {
  return useQuery({
    queryKey: QUERY_KEYS.BOOKINGS.list(filter),
@@ -84,7 +95,7 @@ export function useBookingMutations(bookingId: string) {
        requiredRole,
      }),
    onSuccess: (data) => onSuccess(data, "Approval step completed"),
-    onError: () => toast.error("Failed to approve step"),
+    onError: (error) => toast.error(parseApiError(error, "Failed to approve step")),
  });

  const rejectStep = useMutation({
@@ -101,7 +112,7 @@ export function useBookingMutations(bookingId: string) {
        reason,
      }),
    onSuccess: (data) => onSuccess(data, "Booking rejected at approval step"),
-    onError: () => toast.error("Failed to reject step"),
+    onError: (error) => toast.error(parseApiError(error, "Failed to reject step")),
  });

  const generateContract = useMutation({
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/NewBookingPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/NewBookingPage.tsx
@@ -42,19 +42,10 @@ import { useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";

-import { api } from "@/auth/http";
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
-import { URL_CONSTANTS } from "@/constants/URLS";
 import { api as appApi } from "@/services/api";
 import { bookingsService } from "@/services/bookings.service";
-import { unwrap } from "@/utils/endpoint";
-
-interface CompanyOption {
-  id: string;
-  name?: string | null;
-  tin?: string | null;
-  email?: string | null;
-}
+import { customersService } from "@/services/customers.service";

 type FreightType = "CONTAINER" | "BULK";

@@ -219,15 +210,12 @@ export default function NewBookingPage() {
    queryFn: () => bookingsService.getReferenceData() as Promise<ReferenceData>,
  });

-  const { data: companies, isLoading: companiesLoading } = useQuery({
+  const { data: companiesPage, isLoading: companiesLoading } = useQuery({
    queryKey: ["companies", "list"],
-    queryFn: async () => {
-      const res = await api.get(URL_CONSTANTS.COMPANIES.BASE);
-      return unwrap(res.data) as CompanyOption[];
-    },
+    queryFn: () => customersService.list({ page: 1, pageSize: 1000 }),
  });

-  const companyOptions = (companies ?? []).map((c) => ({
+  const companyOptions = (companiesPage?.items ?? []).map((c) => ({
    value: c.id,
    label: c.name || c.email || c.tin || c.id,
  }));
--- a/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx
@@ -22,7 +22,7 @@ import {
  LayoutGrid,
  Package,
 } from "lucide-react";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useNavigate, useParams } from "react-router-dom";

@@ -85,9 +85,6 @@ export default function CustomerDetailPage() {
      enabled: Boolean(id),
    }),
  );
-  const approveMutation = useMutation(
-    api.customers.setCompanyStatus.mutationOptions(),
-  );
  const bookingsQuery = useQuery(
    api.customers.bookings.queryOptions({
      input: { id: id ?? "" },
@@ -395,28 +392,12 @@ export default function CustomerDetailPage() {
        ]}
        backTo="/dashboard/customers"
        title={company.name}
-        subtitle={`TIN ${company.tin}${
-          company.country ? ` · ${company.country}` : ""
-        }`}
+        subtitle={`TIN ${company.tin}${company.country ? ` · ${company.country}` : ""
+          }`}
        meta={
          <Group gap="xs" wrap="nowrap">
            <CompanyTypeBadge type={company.type} />
            <CompanyStatusBadge status={company.status} />
-            {company.status === "pending" && (
-              <Button
-                size="xs"
-                color="green"
-                loading={approveMutation.isPending}
-                onClick={() =>
-                  approveMutation.mutate({
-                    companyId: company.id,
-                    status: "active",
-                  })
-                }
-              >
-                Approve
-              </Button>
-            )}
          </Group>
        }
      />
@@ -547,9 +528,9 @@ export default function CustomerDetailPage() {
              error={
                bookingsQuery.isError
                  ? {
-                      message: "Failed to load bookings.",
-                      onRetry: () => void bookingsQuery.refetch(),
-                    }
+                    message: "Failed to load bookings.",
+                    onRetry: () => void bookingsQuery.refetch(),
+                  }
                  : undefined
              }
            />
@@ -568,9 +549,9 @@ export default function CustomerDetailPage() {
              error={
                documentsQuery.isError
                  ? {
-                      message: "Failed to load documents.",
-                      onRetry: () => void documentsQuery.refetch(),
-                    }
+                    message: "Failed to load documents.",
+                    onRetry: () => void documentsQuery.refetch(),
+                  }
                  : undefined
              }
            />
@@ -589,9 +570,9 @@ export default function CustomerDetailPage() {
              error={
                paymentsQuery.isError
                  ? {
-                      message: "Failed to load payments.",
-                      onRetry: () => void paymentsQuery.refetch(),
-                    }
+                    message: "Failed to load payments.",
+                    onRetry: () => void paymentsQuery.refetch(),
+                  }
                  : undefined
              }
            />
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementHostPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementHostPage.tsx
@@ -1,23 +1,34 @@
-import { useEffect, useRef } from "react";
-import { createRoot, type Root } from "react-dom/client";
+import { useEffect, useRef } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
 import {
  UserManagementApp,
  type UserManagementRuntimeOptions,
  type UserManagementSessionSeed,
-} from "@tria-plc/iamui";
+} from '@tria-plc/iamui';
+import { iamConfig } from './iamConfig';

-import { getCookie } from "@/auth/cookies";
+function readCookieValue(name: string): string | null {
+  const escaped = name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1');
+  const match = document.cookie.match(
+    new RegExp(`(?:^|; )${escaped}=([^;]*)`),
+  );

-import { iamConfig } from "./iamConfig";
+  return match ? decodeURIComponent(match[1]) : null;
+}

 function readInitialSession(): UserManagementSessionSeed | null {
-  const token = getCookie("auth-token");
+  const token =
+    localStorage.getItem('fhc-backoffice-auth-token') ??
+    readCookieValue('auth-token');

  if (!token) {
    return null;
  }

-  const refreshToken = getCookie("refresh-token") ?? undefined;
+  const refreshToken =
+    localStorage.getItem('fhc-backoffice-auth-refresh-token') ??
+    readCookieValue('refresh-token') ??
+    undefined;

  return {
    token,
@@ -47,15 +58,14 @@ export default function UserManagementHostPage() {
      rootRef.current = createRoot(mountNode);
    }

-    const apiBaseUrl = import.meta.env.VITE_BASE_API_URL.replace(/\/+$/, "");
-    const iamApiUrl = "/um-api";
+    const apiBaseUrl = import.meta.env.VITE_BASE_API_URL.replace(/\/+$/, '');
    const runtime: UserManagementRuntimeOptions = {
-      basename: "/um",
+      basename: '/um',
      apiBaseUrl,
-      apiUrl: iamApiUrl,
-      recordApiUrl: iamApiUrl,
-      chronicleUrl: iamApiUrl,
-      auditApiUrl: iamApiUrl,
+      apiUrl: `${apiBaseUrl}/api`,
+      recordApiUrl: `${apiBaseUrl}/api`,
+      chronicleUrl: `${apiBaseUrl}/api`,
+      auditApiUrl: `${apiBaseUrl}/api`,
    };

    rootRef.current.render(
@@ -78,5 +88,5 @@ export default function UserManagementHostPage() {
    };
  }, []);

-  return <div ref={mountRef} style={{ position: "fixed", inset: 0 }} />;
+  return <div ref={mountRef} style={{ position: 'fixed', inset: 0 }} />;
 }
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/config/vehicles.ts
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/config/vehicles.ts
@@ -59,6 +59,8 @@ export const vehiclesConfig: FleetResourceConfig = {
    { id: "fuelType", header: "Fuel Type", accessorKey: "fuelType", format: "code", size: 110 },
    { id: "capacity", header: "Capacity (tons)", accessorKey: "capacity", format: "number", size: 130 },
    { id: "assignedDriverName", header: "Assigned Driver", accessorKey: "assignedDriverName", format: "code", size: 140 },
+    { id: "estimatedDistanceKm", header: "Est. Distance (KM)", accessorKey: "estimatedDistanceKm", format: "number", size: 150 },
+    { id: "actualDistanceKm", header: "Actual Distance (KM)", accessorKey: "actualDistanceKm", format: "number", size: 150 },
    { id: "status", header: "Status", accessorKey: "status", format: "statusBadge", size: 100 },
  ],
  formFields: [
@@ -72,6 +74,8 @@ export const vehiclesConfig: FleetResourceConfig = {
    { name: "year", label: "Year", type: "number", required: true },
    { name: "fuelType", label: "Fuel Type", type: "select", required: true, options: FUEL_TYPE_OPTIONS },
    { name: "capacity", label: "Capacity", type: "number", required: true },
+    { name: "estimatedDistanceKm", label: "Estimated Distance (KM)", type: "number" },
+    { name: "actualDistanceKm", label: "Actual Distance (KM)", type: "number" },
    { name: "status", label: "Status", type: "select", required: true, options: VEHICLE_STATUS_OPTIONS },
    { name: "description", label: "Description", type: "textarea" },
  ],
@@ -86,6 +90,8 @@ export const vehiclesConfig: FleetResourceConfig = {
    year: new Date().getFullYear(),
    fuelType: "DIESEL",
    capacity: 0,
+    estimatedDistanceKm: "",
+    actualDistanceKm: "",
    status: "ACTIVE",
    description: "",
  },
--- a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
@@ -22,6 +22,7 @@ import {
  Group,
  Menu,
  Modal,
+  NumberInput,
  Select,
  SimpleGrid,
  Stack,
@@ -67,7 +68,7 @@ type StatusFilter = "ALL" | FirstMileApiStatus | AssignmentStatus;

 const FILTER_OPTIONS: { value: StatusFilter; label: string }[] = [
  { value: "ALL", label: "All" },
-  ...FIRST_MILE_STATUSES.map((s) => ({ value: s as StatusFilter, label: STATUS_META[s].label })),
+  ...FIRST_MILE_STATUSES.filter((s) => s !== "PAYMENT_PENDING").map((s) => ({ value: s as StatusFilter, label: STATUS_META[s].label })),
  { value: "ASSIGNED", label: "Assigned" },
  { value: "UNASSIGNED", label: "Unassigned" },
 ];
@@ -89,12 +90,10 @@ const bookingRef = (r: FirstMileRecord) => r.booking?.reference ?? r.bookingId;
 const customerName = (r: FirstMileRecord) => r.booking?.company?.name ?? "—";
 const pickupLocation = (r: FirstMileRecord) => r.booking?.firstMilePickupAddress ?? "—";
 const cargoDesc = (r: FirstMileRecord) => {
-  const parts = [r.booking?.cargoType?.name ?? r.booking?.cargoFreeText].filter(Boolean);
+  const parts = [r.booking?.cargoType?.label ?? r.booking?.cargoFreeText].filter(Boolean);
  if (r.booking?.cargoTotalWeightVgm) parts.push(`${r.booking.cargoTotalWeightVgm} t`);
  return parts.join(" · ") || "—";
 };
-const priceAmount = (r: FirstMileRecord) =>
-  r.booking?.totalAmount ?? r.advancedPayment;
 // First-mile destination is the origin yard (pickup → origin yard)
 const destinationYardName = (r: FirstMileRecord) =>
  r.booking?.originYard?.label ?? "—";
@@ -142,11 +141,14 @@ const BookingInfo = ({ record }: { record: FirstMileRecord }) => (
        <InfoRow label="Pickup location" value={pickupLocation(record)} />
        <InfoRow label="Destination (origin yard)" value={destinationYardName(record)} />
        <InfoRow label="Cargo" value={cargoDesc(record)} />
-        <InfoRow label="Price" value={formatPrice(priceAmount(record))} />
+        <InfoRow label="Advanced Payment" value={formatPrice(record.advancedPayment)} />
+        <InfoRow label="Post Payment" value={formatPrice(record.remainingPayment)} />
        <InfoRow label="Contact" value={contactPersonName(record)} />
        <InfoRow label="Phone" value={contactPhone(record)} />
        <InfoRow label="Requested date" value={requestedDate(record)} />
        <InfoRow label="Assigned vehicle" value={vehicleLabel(record) ?? "—"} />
+        <InfoRow label="Est. Distance (KM)" value={record.estimatedKm != null ? String(record.estimatedKm) : "—"} />
+        <InfoRow label="Actual Distance (KM)" value={record.exactKm != null ? String(record.exactKm) : "—"} />
      </SimpleGrid>
    </Stack>
  </Card>
@@ -158,10 +160,13 @@ const tripSlipRows = (record: FirstMileRecord): [string, string][] => [
  ["Pickup location", pickupLocation(record)],
  ["Destination yard", destinationYardName(record)],
  ["Cargo", cargoDesc(record)],
-  ["Price", formatPrice(priceAmount(record))],
+  ["Advanced Payment", formatPrice(record.advancedPayment)],
+  ["Post Payment", formatPrice(record.remainingPayment)],
  ["Vehicle", vehicleLabel(record) ?? "Unassigned"],
  ["Contact", `${contactPersonName(record)} · ${contactPhone(record)}`],
  ["Requested date", requestedDate(record)],
+  ["Est. Distance (KM)", record.estimatedKm != null ? String(record.estimatedKm) : "—"],
+  ["Actual Distance (KM)", record.exactKm != null ? String(record.exactKm) : "—"],
  ["Status", STATUS_META[record.status].label],
 ];

@@ -323,6 +328,9 @@ const FirstMilePage = () => {
  const [acceptVehicleValue, setAcceptVehicleValue] = useState<string | null>(null);
  const [bookingSearch, setBookingSearch] = useState("");

+  const [distanceOpen, setDistanceOpen] = useState(false);
+  const [distanceValue, setDistanceValue] = useState("");
+
  const { data: listData, isLoading } = useQuery({
    queryKey: QUERY_KEYS.FIRST_MILE.list(),
    queryFn: async () => {
@@ -347,6 +355,10 @@ const FirstMilePage = () => {
  const paidBookings = paidBookingsData?.items ?? [];

  const records = listData?.data ?? [];
+  const existingFirstMileBookingIds = useMemo(
+    () => new Set(records.map((record) => record.bookingId)),
+    [records],
+  );

  const vehicleOptions = useMemo(
    () =>
@@ -371,10 +383,28 @@ const FirstMilePage = () => {
    },
  });

+  const updateDistanceMutation = useMutation({
+    mutationFn: ({ id, exactKm }: { id: string; exactKm: number }) =>
+      firstMileService.update(id, { exactKm }),
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: QUERY_KEYS.FIRST_MILE.ROOT });
+      if (activeRecord) {
+        toast({ title: "Distance updated", description: `${bookingRef(activeRecord)} → ${distanceValue} km` });
+      }
+      closeDistance();
+    },
+    onError: () => {
+      toast({ title: "Update failed", variant: "destructive" });
+    },
+  });
+
  const acceptMutation = useMutation({
    mutationFn: async ({ reference, vehicleId }: { reference: string; vehicleId: string | null }) => {
      const res = await firstMileService.accept(reference);
      const created = res.data;
+      if (!created?.id) {
+        throw new Error("First-mile leg was not created for this booking.");
+      }
      if (vehicleId) await firstMileService.update(created.id, { vehicleId });
      return created;
    },
@@ -383,8 +413,11 @@ const FirstMilePage = () => {
      toast({ title: "Booking accepted", description: "First-mile leg created successfully." });
      closeAccept();
    },
-    onError: () => {
-      toast({ title: "Accept failed", variant: "destructive" });
+    onError: (err: unknown) => {
+      const description =
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+        (err instanceof Error ? err.message : undefined);
+      toast({ title: "Accept failed", description, variant: "destructive" });
    },
  });

@@ -398,16 +431,26 @@ const FirstMilePage = () => {
    [rowSelection],
  );

+  const firstMileEligiblePaidBookings = useMemo(
+    () =>
+      paidBookings.filter(
+        (booking) =>
+          booking.tradeDirection === "EXPORT" &&
+          !existingFirstMileBookingIds.has(booking.id),
+      ),
+    [existingFirstMileBookingIds, paidBookings],
+  );
+
  const filteredPaidBookings = useMemo(() => {
    const term = bookingSearch.trim().toLowerCase();
-    if (!term) return paidBookings;
-    return paidBookings.filter((b) =>
+    if (!term) return firstMileEligiblePaidBookings;
+    return firstMileEligiblePaidBookings.filter((b) =>
      [b.reference, b.company?.name, b.company?.companyName]
        .join(" ")
        .toLowerCase()
        .includes(term),
    );
-  }, [paidBookings, bookingSearch]);
+  }, [firstMileEligiblePaidBookings, bookingSearch]);

  const openAccept = () => {
    setAcceptOpen(true);
@@ -430,6 +473,27 @@ const FirstMilePage = () => {
    acceptMutation.mutate({ reference: selectedBooking.reference, vehicleId: acceptVehicleValue });
  };

+  const openDistance = (id: string) => {
+    setActiveId(id);
+    setDistanceValue("");
+    setDistanceOpen(true);
+  };
+
+  const closeDistance = () => {
+    setDistanceOpen(false);
+    setActiveId(null);
+    setDistanceValue("");
+  };
+
+  const handleSaveDistance = () => {
+    const distance = parseFloat(distanceValue);
+    if (!activeId || isNaN(distance) || distance < 0) {
+      toast({ title: "Invalid distance", description: "Enter a valid distance value.", variant: "destructive" });
+      return;
+    }
+    updateDistanceMutation.mutate({ id: activeId, exactKm: distance });
+  };
+
  const matchesFilter = (r: FirstMileRecord) => {
    switch (statusFilter) {
      case "ALL": return true;
@@ -608,10 +672,16 @@ const FirstMilePage = () => {
        cell: ({ row }) => cargoDesc(row.original),
      },
      {
-        id: "price",
-        header: "Price",
+        id: "advancedPayment",
+        header: "Advanced Payment",
        meta: { headerClassName, cellClassName },
-        cell: ({ row }) => formatPrice(priceAmount(row.original)),
+        cell: ({ row }) => formatPrice(row.original.advancedPayment),
+      },
+      {
+        id: "postPayment",
+        header: "Post Payment",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => formatPrice(row.original.remainingPayment),
      },
      {
        id: "vehicle",
@@ -619,6 +689,18 @@ const FirstMilePage = () => {
        meta: { headerClassName, cellClassName },
        cell: ({ row }) => vehicleLabel(row.original) ?? <Text c="dimmed">—</Text>,
      },
+      {
+        id: "estimatedKm",
+        header: "Est. Distance (KM)",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => row.original.estimatedKm != null ? row.original.estimatedKm : <Text c="dimmed">—</Text>,
+      },
+      {
+        id: "exactKm",
+        header: "Actual Distance (KM)",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => row.original.exactKm != null ? row.original.exactKm : <Text c="dimmed">—</Text>,
+      },
      {
        id: "status",
        header: "Status",
@@ -684,6 +766,11 @@ const FirstMilePage = () => {
                  >
                    View detail
                  </Menu.Item>
+                  <Menu.Item
+                    onClick={() => openDistance(row.original.id)}
+                  >
+                    Add Actual distance
+                  </Menu.Item>
                  {canPrint && (
                    <Menu.Item
                      leftSection={<Printer size={15} />}
@@ -879,7 +966,7 @@ const FirstMilePage = () => {
              {bookingsLoading ? (
                <Text c="dimmed" size="sm" ta="center" py="md">Loading bookings…</Text>
              ) : filteredPaidBookings.length === 0 ? (
-                <Text c="dimmed" size="sm" ta="center" py="md">No paid bookings found.</Text>
+                <Text c="dimmed" size="sm" ta="center" py="md">No paid export bookings need first mile.</Text>
              ) : (
                filteredPaidBookings.map((b) => (
                  <UnstyledButton
@@ -988,6 +1075,53 @@ const FirstMilePage = () => {
          </Stack>
        )}
      </Modal>
+
+      {/* Add Actual Distance modal */}
+      <Modal
+        opened={distanceOpen}
+        onClose={closeDistance}
+        title={<Text fw={600}>Add Actual Distance</Text>}
+        size="md"
+        radius="lg"
+        centered
+      >
+        <Stack gap="md">
+          {activeRecord && (
+            <Card withBorder padding="md" radius="md" bg="var(--mantine-color-gray-0)">
+              <Stack gap="sm">
+                <Text fw={600} size="sm">{bookingRef(activeRecord)}</Text>
+                <Group justify="space-between">
+                  <Text size="xs" c="dimmed">Customer</Text>
+                  <Text size="sm">{customerName(activeRecord)}</Text>
+                </Group>
+                <Group justify="space-between">
+                  <Text size="xs" c="dimmed">Est. Distance (KM)</Text>
+                  <Text size="sm">{activeRecord.estimatedKm ?? "—"}</Text>
+                </Group>
+              </Stack>
+            </Card>
+          )}
+          <NumberInput
+            label="Actual Distance (KM)"
+            placeholder="Enter distance"
+            value={distanceValue}
+            onChange={(v) => setDistanceValue(String(v ?? ""))}
+            min={0}
+            step={0.1}
+            decimalScale={2}
+          />
+          <Group justify="flex-end" gap="sm">
+            <Button variant="default" onClick={closeDistance}>Cancel</Button>
+            <Button
+              onClick={handleSaveDistance}
+              loading={updateDistanceMutation.isPending}
+              disabled={!distanceValue}
+            >
+              Save
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
    </Stack>
  );
 };
--- a/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
@@ -66,7 +66,7 @@ type StatusFilter = "ALL" | LastMileApiStatus | AssignmentStatus;

 const FILTER_OPTIONS: { value: StatusFilter; label: string }[] = [
  { value: "ALL", label: "All" },
-  ...LAST_MILE_STATUSES.map((s) => ({ value: s as StatusFilter, label: STATUS_META[s].label })),
+  ...LAST_MILE_STATUSES.filter((s) => s !== "PAYMENT_PENDING").map((s) => ({ value: s as StatusFilter, label: STATUS_META[s].label })),
  { value: "ASSIGNED", label: "Assigned" },
  { value: "UNASSIGNED", label: "Unassigned" },
 ];
@@ -87,14 +87,12 @@ const bookingRef = (r: LastMileRecord) => r.booking?.reference ?? r.bookingId;
 const customerName = (r: LastMileRecord) => r.booking?.company?.name ?? "—";
 const deliveryLocation = (r: LastMileRecord) => r.booking?.lastMileDeliveryAddress ?? "—";
 const cargoDesc = (r: LastMileRecord) => {
-  const parts = [r.booking?.cargoType?.name ?? r.booking?.cargoFreeText].filter(Boolean);
+  const parts = [r.booking?.cargoType?.cargoTypeName ?? r.booking?.cargoType?.label ?? r.booking?.cargoType?.name ?? r.booking?.cargoFreeText].filter(Boolean);
  if (r.booking?.cargoTotalWeightVgm) parts.push(`${r.booking.cargoTotalWeightVgm} t`);
  return parts.join(" · ") || "—";
 };
-const priceAmount = (r: LastMileRecord) =>
-  r.booking?.totalAmount ?? r.advancedPayment;
 const originYardName = (r: LastMileRecord) =>
-  r.booking?.originYard?.name ?? "—";
+  r.booking?.originYard?.label ?? r.booking?.originYard?.name ?? "—";
 const contactPersonName = (r: LastMileRecord) =>
  r.booking?.company?.contactPersonName ?? "—";
 const contactPhone = (r: LastMileRecord) =>
@@ -104,7 +102,7 @@ const requestedDate = (r: LastMileRecord) => {
  return d ? new Date(d).toISOString().slice(0, 10) : "—";
 };
 const serviceTypeName = (r: LastMileRecord) =>
-  r.booking?.serviceType?.name ?? "—";
+  r.booking?.serviceType?.label ?? r.booking?.serviceType?.name ?? "—";

 const InfoRow = ({ label, value }: { label: string; value: string }) => (
  <Stack gap={2}>
@@ -130,14 +128,17 @@ const BookingInfo = ({ record }: { record: LastMileRecord }) => (
      <SimpleGrid cols={2} spacing="sm">
        <InfoRow label="Customer" value={customerName(record)} />
        <InfoRow label="Service type" value={serviceTypeName(record)} />
-        <InfoRow label="Origin yard" value={originYardName(record)} />
+        <InfoRow label="Pickup (origin yard)" value={originYardName(record)} />
        <InfoRow label="Destination" value={deliveryLocation(record)} />
        <InfoRow label="Cargo" value={cargoDesc(record)} />
-        <InfoRow label="Price" value={formatPrice(priceAmount(record))} />
+        <InfoRow label="Advanced Payment" value={formatPrice(record.advancedPayment)} />
+        <InfoRow label="Post Payment" value={formatPrice(record.remainingPayment)} />
        <InfoRow label="Contact" value={contactPersonName(record)} />
        <InfoRow label="Phone" value={contactPhone(record)} />
        <InfoRow label="Requested date" value={requestedDate(record)} />
        <InfoRow label="Assigned vehicle" value={vehicleLabel(record) ?? "—"} />
+        <InfoRow label="Est. Distance (KM)" value={record.estimatedKm != null ? String(record.estimatedKm) : "—"} />
+        <InfoRow label="Actual Distance (KM)" value={record.exactKm != null ? String(record.exactKm) : "—"} />
      </SimpleGrid>
    </Stack>
  </Card>
@@ -146,13 +147,16 @@ const BookingInfo = ({ record }: { record: LastMileRecord }) => (
 const tripSlipRows = (record: LastMileRecord): [string, string][] => [
  ["Customer", customerName(record)],
  ["Service", serviceTypeName(record)],
-  ["Origin yard", originYardName(record)],
+  ["Pickup (origin yard)", originYardName(record)],
  ["Destination", deliveryLocation(record)],
  ["Cargo", cargoDesc(record)],
-  ["Price", formatPrice(priceAmount(record))],
+  ["Advanced Payment", formatPrice(record.advancedPayment)],
+  ["Post Payment", formatPrice(record.remainingPayment)],
  ["Vehicle", vehicleLabel(record) ?? "Unassigned"],
  ["Contact", `${contactPersonName(record)} · ${contactPhone(record)}`],
  ["Requested date", requestedDate(record)],
+  ["Est. Distance (KM)", record.estimatedKm != null ? String(record.estimatedKm) : "—"],
+  ["Actual Distance (KM)", record.exactKm != null ? String(record.exactKm) : "—"],
  ["Status", STATUS_META[record.status].label],
 ];

@@ -587,6 +591,12 @@ const LastMilePage = () => {
        meta: { headerClassName, cellClassName },
        cell: ({ row }) => customerName(row.original),
      },
+      {
+        id: "pickup",
+        header: "Pickup",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => originYardName(row.original),
+      },
      {
        id: "destination",
        header: "Destination",
@@ -600,10 +610,16 @@ const LastMilePage = () => {
        cell: ({ row }) => cargoDesc(row.original),
      },
      {
-        id: "price",
-        header: "Price",
+        id: "advancedPayment",
+        header: "Advanced Payment",
        meta: { headerClassName, cellClassName },
-        cell: ({ row }) => formatPrice(priceAmount(row.original)),
+        cell: ({ row }) => formatPrice(row.original.advancedPayment),
+      },
+      {
+        id: "postPayment",
+        header: "Post Payment",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => formatPrice(row.original.remainingPayment),
      },
      {
        id: "vehicle",
@@ -611,6 +627,18 @@ const LastMilePage = () => {
        meta: { headerClassName, cellClassName },
        cell: ({ row }) => vehicleLabel(row.original) ?? <Text c="dimmed">—</Text>,
      },
+      {
+        id: "estimatedKm",
+        header: "Est. Distance (KM)",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => row.original.estimatedKm != null ? row.original.estimatedKm : <Text c="dimmed">—</Text>,
+      },
+      {
+        id: "exactKm",
+        header: "Actual Distance (KM)",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => row.original.exactKm != null ? row.original.exactKm : <Text c="dimmed">—</Text>,
+      },
      {
        id: "status",
        header: "Status",
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2DetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2DetailPage.tsx
@@ -19,6 +19,7 @@ import {
  CheckCircle2,
  Container as ContainerIcon,
  Eye,
+  FileText,
  LayoutGrid,
  Navigation,
  Package,
@@ -55,8 +56,10 @@ import {
 import { TrainCompositionDiagram } from "@/components/trainScheduling/TrainCompositionDiagram";
 import { WagonPlanGrid } from "@/components/trainScheduling/WagonPlanGrid";
 import { WorkflowRail, WorkflowStep } from "@/components/trainScheduling/WorkflowStep";
+import { openPdfBlob } from "@/components/warehouses/pdf";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { api } from "@/services/api";
+import { trainSchedulingService } from "@/services/trainScheduling.service";
 import { useToast } from "@/hooks/use-toast";
 import type {
  ContainerPlacement,
@@ -123,6 +126,12 @@ export default function TrainScheduleV2DetailPage() {
  const unassign = useMutation(api.trainScheduling.unassignBooking.mutationOptions());
  const finalize = useMutation(api.trainScheduling.finalizeSchedule.mutationOptions());
  const dispatch = useMutation(api.trainScheduling.dispatchSchedule.mutationOptions());
+  const downloadMarshalling = useMutation({
+    mutationFn: ({ id, direction }: { id: string; direction?: string | null }) =>
+      direction === "EXPORT"
+        ? trainSchedulingService.downloadExportLoadListDocument(id)
+        : trainSchedulingService.downloadImportDjiboutiLoadListDocument(id),
+  });

  const assignedIds = useMemo(
    () => (schedule?.bookings ?? []).map((b) => b.id),
@@ -287,6 +296,33 @@ export default function TrainScheduleV2DetailPage() {
  const canDispatch = schedule.status === "SCHEDULED";
  const finalizeStep = hasContainerStep ? 3 : 2;
  const canModifyBookings = canEditBookings && !["DISPATCHED", "ARRIVED"].includes(schedule.status);
+  const canPrintMarshalling = schedule.direction === "IMPORT" || schedule.direction === "EXPORT";
+
+  const openMarshallingDocument = async () => {
+    const pdfWindow = window.open("", "_blank");
+    try {
+      const blob = await downloadMarshalling.mutateAsync({
+        id: scheduleId,
+        direction: schedule.direction,
+      });
+      const prefix = schedule.direction === "EXPORT" ? "export-marshalling" : "import-marshalling";
+      const filename = `${prefix}-${schedule.trainNumber ?? scheduleId}.pdf`;
+      const opened = openPdfBlob(blob, filename, pdfWindow);
+      toast({
+        title: "Marshalling document ready",
+        description: opened
+          ? "The PDF opened in a browser tab for printing or saving."
+          : "The browser blocked the preview tab, so the PDF was downloaded.",
+      });
+    } catch (error) {
+      pdfWindow?.close();
+      toast({
+        title: "Could not open marshalling document",
+        description: parseError(error, "Make sure the train has wagon allocations, then try again."),
+        variant: "destructive",
+      });
+    }
+  };

  const handleAssign = async () => {
    if (!allSelectedIds.length) return;
@@ -749,6 +785,19 @@ export default function TrainScheduleV2DetailPage() {
              </Stack>
            </Group>
            <Group gap="sm">
+              {canPrintMarshalling ? (
+                <Button
+                  variant="light"
+                  color="edr-green"
+                  radius="lg"
+                  size="sm"
+                  leftSection={<FileText size={16} />}
+                  loading={downloadMarshalling.isPending}
+                  onClick={() => void openMarshallingDocument()}
+                >
+                  Marshalling PDF
+                </Button>
+              ) : null}
              {["DISPATCHED", "ARRIVED"].includes(schedule.status) ? (
                <Button
                  component={Link}
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/ArrivalQueuePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/ArrivalQueuePage.tsx
@@ -37,6 +37,12 @@ const getErrorMessage = (error: unknown) => {
  return error instanceof Error ? error.message : undefined;
 };

+const getPendingUnloadBookings = (train: ImportTrain) =>
+  train.pendingUnloadBookings ?? train.totalBookings;
+
+const isFullyUnloaded = (train: ImportTrain) =>
+  Boolean(train.fullyUnloaded) || (train.totalBookings > 0 && getPendingUnloadBookings(train) === 0);
+
 function ImportTrainDetailRows({ scheduleId }: { scheduleId: string }) {
  const { data: items = [], isLoading } = useImportTrainItems(scheduleId);

@@ -67,6 +73,7 @@ function ImportTrainDetailRows({ scheduleId }: { scheduleId: string }) {
          <Table.Th>Weight</Table.Th>
          <Table.Th>Arrival</Table.Th>
          <Table.Th>Status</Table.Th>
+          <Table.Th>Inspection</Table.Th>
          <Table.Th>Pickup</Table.Th>
        </Table.Tr>
      </Table.Thead>
@@ -88,6 +95,11 @@ function ImportTrainDetailRows({ scheduleId }: { scheduleId: string }) {
                {item.currentStatus ?? 'PENDING'}
              </Badge>
            </Table.Td>
+            <Table.Td>
+              <Badge variant="light" color={item.inspectionStatus === 'PASSED' ? 'green' : 'gray'} size="sm">
+                {item.inspectionStatus ?? 'Not inspected'}
+              </Badge>
+            </Table.Td>
            <Table.Td>{item.pickupOption.replace(/_/g, ' ')}</Table.Td>
          </Table.Tr>
        ))}
@@ -105,10 +117,20 @@ export default function ArrivalQueuePage() {
  const [busyScheduleId, setBusyScheduleId] = useState<string | null>(null);

  const unloadTrain = async (train: ImportTrain) => {
+    if (isFullyUnloaded(train)) {
+      toast({
+        title: 'Already unloaded',
+        description: `${train.trainNumber ?? 'This train'} has no remaining bookings to auto unload.`,
+      });
+      return;
+    }
+
    setBusyScheduleId(train.scheduleId);
    try {
      const res = (await autoUnload.mutateAsync(train.scheduleId)) as { data: AutoUnloadArrivedResult };
      const result = res.data;
+      const alreadyUnloaded = result.unloadedCount === 0 && result.skippedCount > 0 && result.failedCount === 0;
+      const firstReason = result.results.find((item) => item.reason)?.reason;
      const details = [
        result.skippedCount ? `${result.skippedCount} skipped` : '',
        result.failedCount ? `${result.failedCount} failed` : '',
@@ -117,8 +139,10 @@ export default function ArrivalQueuePage() {
        .join(', ');

      toast({
-        title: `${result.unloadedCount} booking(s) unloaded`,
-        description: details || `${train.trainNumber ?? 'Train'} moved into warehouse inventory.`,
+        title: alreadyUnloaded ? 'Already unloaded' : `${result.unloadedCount} booking(s) unloaded`,
+        description: alreadyUnloaded
+          ? firstReason ?? `${train.trainNumber ?? 'Train'} is already in warehouse inventory.`
+          : details || `${train.trainNumber ?? 'Train'} moved into warehouse inventory.`,
      });
    } catch (error) {
      toast({
@@ -181,6 +205,8 @@ export default function ArrivalQueuePage() {
                <Table.Tbody>
                  {trains.map((train: ImportTrain) => {
                    const isOpen = openScheduleId === train.scheduleId;
+                    const fullyUnloaded = isFullyUnloaded(train);
+                    const unloadedBookings = train.unloadedBookings ?? train.totalBookings - getPendingUnloadBookings(train);
                    return (
                      <Fragment key={train.scheduleId}>
                        <Table.Tr>
@@ -204,9 +230,14 @@ export default function ArrivalQueuePage() {
                          <Table.Td ta="center">{train.totalContainers}</Table.Td>
                          <Table.Td ta="center">{train.totalCargoes}</Table.Td>
                          <Table.Td>
-                            <Badge variant="light" color="teal" size="sm">
-                              {train.status}
-                            </Badge>
+                            <Stack gap={2}>
+                              <Badge variant="light" color={fullyUnloaded ? 'green' : 'teal'} size="sm">
+                                {fullyUnloaded ? 'UNLOADED' : train.status}
+                              </Badge>
+                              <Text size="xs" c="dimmed">
+                                {Math.max(unloadedBookings, 0)}/{train.totalBookings} unloaded
+                              </Text>
+                            </Stack>
                          </Table.Td>
                          <Table.Td>
                            <Group gap="xs" justify="flex-end" wrap="nowrap">
@@ -220,12 +251,13 @@ export default function ArrivalQueuePage() {
                              </Button>
                              <Button
                                size="compact-xs"
-                                color="orange"
+                                color={fullyUnloaded ? 'gray' : 'orange'}
                                leftSection={busyScheduleId === train.scheduleId ? <PackageOpen size={14} /> : <Truck size={14} />}
                                loading={busyScheduleId === train.scheduleId}
+                                disabled={fullyUnloaded || train.totalBookings === 0}
                                onClick={() => unloadTrain(train)}
                              >
-                                Auto Unload
+                                {fullyUnloaded ? 'Already Unloaded' : 'Auto Unload'}
                              </Button>
                            </Group>
                          </Table.Td>
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/ExportDjiboutiUnloadingQueuePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/ExportDjiboutiUnloadingQueuePage.tsx
@@ -7,6 +7,7 @@ import {
  Group,
  Loader,
  Modal,
+  Alert,
  Stack,
  Table,
  Tabs,
@@ -168,7 +169,7 @@ function ExportTrainDetailRows({
 export default function ExportDjiboutiUnloadingQueuePage() {
  const navigate = useNavigate();
  const { toast } = useToast();
-  const { data: trains = [], isLoading } = useExportDjiboutiArrivalQueue();
+  const { data: trains = [], isLoading, isError, error } = useExportDjiboutiArrivalQueue();
  const { data: interchangeDocuments = [] } = useInterchangeDocuments({ direction: 'EXPORT' });
  const autoUnload = useAutoUnloadExportAtDjibouti();
  const generateInterchange = useGenerateInterchangeDocument();
@@ -193,14 +194,14 @@ export default function ExportDjiboutiUnloadingQueuePage() {
        result.skippedCount ? `${result.skippedCount} skipped` : '',
        result.failedCount ? `${result.failedCount} failed` : '',
        result.interchangeDocument
-          ? `Interchange document ${result.interchangeDocument.documentNo} generated`
+          ? `Signed interchange document ${result.interchangeDocument.documentNo} generated`
          : '',
      ]
        .filter(Boolean)
        .join(', ');

      toast({
-        title: `${result.unloadedCount} export item(s) unloaded`,
+        title: `${result.unloadedCount} export item(s) auto unloaded`,
        description: details || `${train.trainNumber ?? 'Train'} unloaded at Djibouti Port.`,
      });
    } catch (error) {
@@ -224,7 +225,8 @@ export default function ExportDjiboutiUnloadingQueuePage() {
        handoverFrom: 'EDR',
        handoverTo: 'Djibouti Port Operator',
        portOperatorName: 'Doraleh Multipurpose Port',
-        remarks: 'Generated after export unloading at Djibouti Port',
+        generatedBy: 'EDR Operations',
+        remarks: 'Generated after export unloading at Djibouti Port; signed by EDR and Djibouti Port Operator.',
      });
      toast({
        title: 'Interchange document generated',
@@ -249,21 +251,21 @@ export default function ExportDjiboutiUnloadingQueuePage() {
      <Stack gap="lg" mt="sm">
        <PageHeader
          title="Djibouti Arrival / Unloading Queue"
-          subtitle="Arrived export trains at Djibouti-side destinations ready for unloading."
+          subtitle="Arrived export trains at Djibouti-side destinations, auto unloading, and signed interchange handover."
        />

        <WarehouseHero
          variant="train"
          secondaryVariant="container"
          title="Export Unloading at Djibouti Port"
-          subtitle="Review arrived export trains and unload eligible assigned export items."
+          subtitle="Review arrived trains, auto unload eligible export items, then generate the EDR and Djibouti Port signed interchange document."
        />

        <Card withBorder radius="md" padding="lg">
          <Group justify="space-between" mb="md">
            <Text fw={600}>{trains.length} arrived export train(s)</Text>
            <Text size="sm" c="dimmed">
-              Open a train to review assigned export items, then auto unload it.
+              Open a train, auto unload it, then view the signed interchange document.
            </Text>
          </Group>

@@ -271,6 +273,10 @@ export default function ExportDjiboutiUnloadingQueuePage() {
            <Group justify="center" py="xl">
              <Loader />
            </Group>
+          ) : isError ? (
+            <Alert color="red" variant="light" title="Could not load arrived export trains">
+              {getErrorMessage(error) ?? 'Check your API connection and sign in again.'}
+            </Alert>
          ) : trains.length === 0 ? (
            <VisualEmptyState
              variant="train"
@@ -368,7 +374,7 @@ export default function ExportDjiboutiUnloadingQueuePage() {
                                  loading={busyScheduleId === train.scheduleId && generateInterchange.isPending}
                                  onClick={() => generateInterchangeDocument(train)}
                                >
-                                  Generate Interchange Document
+                                  Generate Signed Document
                                </Button>
                              )}
                            </Group>
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/InterchangeDocumentsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/InterchangeDocumentsPage.tsx
@@ -12,7 +12,7 @@ import {
  Text,
  TextInput,
 } from '@mantine/core';
-import { CheckCircle2, Eye, FileText, Search, XCircle } from 'lucide-react';
+import { CheckCircle2, Download, Eye, FileText, Printer, Search, XCircle } from 'lucide-react';
 import type { ReactNode } from 'react';

 import { PageContainer, PageHeader } from '@/components/page';
@@ -25,6 +25,7 @@ import {
  useInterchangeDocuments,
 } from '@/hooks/useInterchangeDocuments';
 import { useToast } from '@/hooks/use-toast';
+import { interchangeDocumentsService } from '@/services/interchange-documents.service';
 import type { InterchangeDocument, InterchangeDocumentStatus } from '@/types/interchangeDocument';

 const statusColor: Record<InterchangeDocumentStatus, string> = {
@@ -45,6 +46,116 @@ const getErrorMessage = (error: unknown) => {
  return error instanceof Error ? error.message : undefined;
 };

+const escapeHtml = (value: unknown) =>
+  String(value ?? '-')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
+const filenameFor = (document: InterchangeDocument) =>
+  `${document.documentNo || document.id}-interchange-document.html`.replace(/[\\/:*?"<>|]/g, '-');
+
+const buildPrintableInterchangeHtml = (document: InterchangeDocument) => {
+  const items = document.items ?? [];
+  const rows = items
+    .map(
+      (item, index) => `
+        <tr>
+          <td>${index + 1}</td>
+          <td>${escapeHtml(item.bookingReference ?? item.bookingId?.slice(0, 8))}</td>
+          <td>${escapeHtml(item.itemType)}</td>
+          <td>${escapeHtml(item.containerNumber)}</td>
+          <td>${escapeHtml(item.sealNumber)}</td>
+          <td>${escapeHtml(item.cargoType ?? item.cargoDescription)}</td>
+          <td>${escapeHtml(formatNumber(item.weight))}</td>
+          <td>${escapeHtml(formatNumber(item.quantity))}</td>
+          <td>${escapeHtml(item.wagonNumber)}</td>
+          <td>${escapeHtml(item.conditionStatus)}</td>
+          <td>${escapeHtml(item.damageDescription)}</td>
+        </tr>`,
+    )
+    .join('');
+
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>${escapeHtml(document.documentNo)} Interchange Document</title>
+  <style>
+    @page { size: A4 landscape; margin: 14mm; }
+    * { box-sizing: border-box; }
+    body { font-family: Arial, sans-serif; color: #111827; margin: 0; }
+    .top { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2px solid #111827; padding-bottom: 14px; }
+    h1 { margin: 0; font-size: 24px; }
+    .muted { color: #4b5563; font-size: 12px; }
+    .stamp { border: 2px solid #15803d; color: #15803d; border-radius: 999px; padding: 14px 18px; text-align: center; font-weight: 700; }
+    .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 18px; margin: 18px 0; }
+    .field { border-bottom: 1px solid #d1d5db; padding-bottom: 6px; }
+    .label { color: #6b7280; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
+    .value { font-size: 13px; font-weight: 700; margin-top: 3px; }
+    table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 11px; }
+    th, td { border: 1px solid #d1d5db; padding: 6px; text-align: left; vertical-align: top; }
+    th { background: #f3f4f6; }
+    .signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 34px; }
+    .signature { border-top: 1px solid #111827; padding-top: 8px; min-height: 48px; }
+    .footer { margin-top: 16px; font-size: 10px; color: #6b7280; }
+  </style>
+</head>
+<body>
+  <div class="top">
+    <div>
+      <h1>EDR / Djibouti Port Interchange Document</h1>
+      <div class="muted">Official export handover document</div>
+      <div class="muted">Document No: ${escapeHtml(document.documentNo)}</div>
+    </div>
+    <div class="stamp">${escapeHtml(document.status)}<br/>SIGNED HANDOVER</div>
+  </div>
+
+  <div class="grid">
+    <div class="field"><div class="label">Direction</div><div class="value">${escapeHtml(document.direction)}</div></div>
+    <div class="field"><div class="label">Train No</div><div class="value">${escapeHtml(document.trainNo)}</div></div>
+    <div class="field"><div class="label">Schedule</div><div class="value">${escapeHtml(document.scheduleId)}</div></div>
+    <div class="field"><div class="label">Handover Location</div><div class="value">${escapeHtml(document.handoverLocation)}</div></div>
+    <div class="field"><div class="label">Handover From</div><div class="value">${escapeHtml(document.handoverFrom)}</div></div>
+    <div class="field"><div class="label">Handover To</div><div class="value">${escapeHtml(document.handoverTo)}</div></div>
+    <div class="field"><div class="label">Generated At</div><div class="value">${escapeHtml(formatDate(document.generatedAt))}</div></div>
+    <div class="field"><div class="label">Acknowledged At</div><div class="value">${escapeHtml(formatDate(document.acknowledgedAt))}</div></div>
+    <div class="field"><div class="label">Signed by EDR</div><div class="value">${escapeHtml(document.generatedBy)}</div></div>
+    <div class="field"><div class="label">Signed by Djibouti Port</div><div class="value">${escapeHtml(document.acknowledgedBy)}</div></div>
+    <div class="field"><div class="label">Port Operator</div><div class="value">${escapeHtml(document.portOperatorName)}</div></div>
+    <div class="field"><div class="label">Manifest Ref</div><div class="value">${escapeHtml(document.manifestReference)}</div></div>
+  </div>
+
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Booking</th>
+        <th>Type</th>
+        <th>Container</th>
+        <th>Seal</th>
+        <th>Cargo</th>
+        <th>Weight</th>
+        <th>Qty</th>
+        <th>Wagon</th>
+        <th>Condition</th>
+        <th>Damage / Notes</th>
+      </tr>
+    </thead>
+    <tbody>${rows || '<tr><td colspan="11">No items</td></tr>'}</tbody>
+  </table>
+
+  <div class="signatures">
+    <div class="signature">EDR Representative: ${escapeHtml(document.generatedBy)}</div>
+    <div class="signature">Djibouti Port Operator: ${escapeHtml(document.acknowledgedBy)}</div>
+  </div>
+  <div class="footer">Generated from EDR Freight Management System. Printed on ${escapeHtml(new Date().toLocaleString())}.</div>
+</body>
+</html>`;
+};
+
 function DetailField({ label, value }: { label: string; value: ReactNode }) {
  return (
    <Stack gap={2}>
@@ -93,6 +204,8 @@ function InterchangeDocumentDetail({ id }: { id: string }) {
        />
        <DetailField label="Generated At" value={formatDate(document.generatedAt)} />
        <DetailField label="Acknowledged At" value={formatDate(document.acknowledgedAt)} />
+        <DetailField label="Signed by EDR" value={document.generatedBy} />
+        <DetailField label="Signed by Djibouti Port" value={document.acknowledgedBy} />
        <DetailField label="Customs Ref" value={document.customsReference} />
        <DetailField label="Manifest Ref" value={document.manifestReference} />
      </SimpleGrid>
@@ -155,6 +268,37 @@ export default function InterchangeDocumentsPage() {
  const dispute = useDisputeInterchangeDocument();
  const cancel = useCancelInterchangeDocument();

+  const getPrintableDocument = async (interchangeDocument: InterchangeDocument) => {
+    if (interchangeDocument.items?.length) return interchangeDocument;
+    return interchangeDocumentsService.getById(interchangeDocument.id).then((response) => response.data);
+  };
+
+  const printDocument = async (interchangeDocument: InterchangeDocument) => {
+    const fullDocument = await getPrintableDocument(interchangeDocument);
+    const win = window.open('', '_blank');
+    if (!win) {
+      toast({ variant: 'destructive', title: 'Pop-up blocked', description: 'Allow pop-ups to print the document.' });
+      return;
+    }
+    win.document.write(buildPrintableInterchangeHtml(fullDocument));
+    win.document.close();
+    win.focus();
+    setTimeout(() => win.print(), 250);
+  };
+
+  const downloadDocument = async (interchangeDocument: InterchangeDocument) => {
+    const fullDocument = await getPrintableDocument(interchangeDocument);
+    const blob = new Blob([buildPrintableInterchangeHtml(fullDocument)], { type: 'text/html;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filenameFor(fullDocument);
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  };
+
  const run = async (fn: () => Promise<unknown>, title: string) => {
    try {
      await fn();
@@ -167,10 +311,10 @@ export default function InterchangeDocumentsPage() {
  const acknowledgeDocument = (document: InterchangeDocument) => {
    const acknowledgedBy = window.prompt('Acknowledged by');
    if (!acknowledgedBy) return;
-    run(
-      () => acknowledge.mutateAsync({ id: document.id, acknowledgedBy }),
-      'Interchange document acknowledged',
-    );
+    run(async () => {
+      const response = await acknowledge.mutateAsync({ id: document.id, acknowledgedBy });
+      await printDocument(response.data);
+    }, 'Interchange document acknowledged');
  };

  const disputeDocument = (document: InterchangeDocument) => {
@@ -221,6 +365,7 @@ export default function InterchangeDocumentsPage() {
                  <Table.Th>Handover From</Table.Th>
                  <Table.Th>Handover To</Table.Th>
                  <Table.Th>Status</Table.Th>
+                  <Table.Th>Signed By</Table.Th>
                  <Table.Th>Generated At</Table.Th>
                  <Table.Th ta="right">Actions</Table.Th>
                </Table.Tr>
@@ -251,6 +396,14 @@ export default function InterchangeDocumentsPage() {
                        {document.status}
                      </Badge>
                    </Table.Td>
+                    <Table.Td>
+                      <Stack gap={0}>
+                        <Text size="sm">{document.generatedBy ?? '-'}</Text>
+                        <Text size="xs" c="dimmed">
+                          {document.acknowledgedBy ?? 'Awaiting Djibouti Port'}
+                        </Text>
+                      </Stack>
+                    </Table.Td>
                    <Table.Td>{formatDate(document.generatedAt)}</Table.Td>
                    <Table.Td>
                      <Group gap="xs" justify="flex-end" wrap="nowrap">
@@ -273,6 +426,28 @@ export default function InterchangeDocumentsPage() {
                            Acknowledge
                          </Button>
                        ) : null}
+                        {document.status === 'ACKNOWLEDGED' ? (
+                          <>
+                            <Button
+                              size="compact-xs"
+                              color="blue"
+                              variant="light"
+                              leftSection={<Printer size={14} />}
+                              onClick={() => run(() => printDocument(document), 'Print view opened')}
+                            >
+                              Print
+                            </Button>
+                            <Button
+                              size="compact-xs"
+                              color="blue"
+                              variant="light"
+                              leftSection={<Download size={14} />}
+                              onClick={() => run(() => downloadDocument(document), 'Document downloaded')}
+                            >
+                              Download
+                            </Button>
+                          </>
+                        ) : null}
                        {document.status !== 'CANCELLED' ? (
                          <Button
                            size="compact-xs"
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInvoicesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInvoicesPage.tsx
@@ -15,19 +15,24 @@ import {
  Text,
  TextInput,
 } from '@mantine/core';
-import { Ban, CreditCard, Eye, Search } from 'lucide-react';
+import { Ban, CreditCard, DoorOpen, Download, Eye, Receipt, Search } from 'lucide-react';
 import { DataTable, type ColumnDef } from '@edr/ui-common';

 import { PageContainer, PageHeader } from '@/components/page';
 import { useMutation, useQuery } from '@tanstack/react-query';

 import { api } from '@/services/api';
+import { bookingsService } from '@/services/bookings.service';
+import { warehouseService } from '@/services/warehouse.service';
 import { useToast } from '@/hooks/use-toast';
 import {
  WAREHOUSE_INVOICE_STATUSES,
  type WarehouseFeeInvoice,
  type WarehouseInvoiceStatus,
 } from '@/types/warehouse';
+import { openPdfBlob } from '@/components/warehouses/pdf';
+import { buildWarehouseExitPaperPdf, buildWarehouseInvoicePdf } from '@/components/warehouses/warehousePdf';
+import { extractErrorMessage } from '@/components/warehouses/options';

 const STATUS_COLOR: Record<WarehouseInvoiceStatus, string> = {
  DRAFT: 'gray',
@@ -158,18 +163,120 @@ function InvoiceDetailModal({ id, onClose }: { id: string | null; onClose: () =>
  );
  const pay = useMutation(api.warehouses.payInvoice.mutationOptions());
  const cancel = useMutation(api.warehouses.cancelInvoice.mutationOptions());
+  const gateClear = useMutation(api.warehouses.gateClearance.mutationOptions());
  const [payAmount, setPayAmount] = useState<number | ''>('');
+  const [driverName, setDriverName] = useState('');
+  const [driverPhone, setDriverPhone] = useState('');

  const canPay = inv && (inv.status === 'ISSUED' || inv.status === 'PARTIALLY_PAID');
+  const canGateClear = inv?.status === 'PAID' && Boolean(inv.inventoryId);
+
+  const downloadInvoicePdf = async (invoice: WarehouseFeeInvoice) => {
+    const blob = buildWarehouseInvoicePdf(invoice, 'INVOICE');
+    openPdfBlob(blob, `warehouse-invoice-${invoice.invoiceNumber}.pdf`);
+  };
+
+  const downloadReceiptPdf = async (invoice: WarehouseFeeInvoice) => {
+    const blob = buildWarehouseInvoicePdf(invoice, 'RECEIPT');
+    openPdfBlob(blob, `warehouse-receipt-${invoice.invoiceNumber}.pdf`);
+  };
+
+  const getExitPaperContext = async (invoice: WarehouseFeeInvoice) => {
+    const [booking, inventoryRows] = await Promise.all([
+      invoice.bookingId
+        ? bookingsService.getById(invoice.bookingId).catch(() => null)
+        : Promise.resolve(null),
+      invoice.bookingId
+        ? warehouseService.listInventory({ bookingId: invoice.bookingId }).then((response) => response.data).catch(() => [])
+        : Promise.resolve([]),
+    ]);
+    const inventory = inventoryRows.find((item) => item.id === invoice.inventoryId) ?? inventoryRows[0] ?? undefined;
+    return { booking, inventory };
+  };
+
+  const handleGateClearance = async (invoice: WarehouseFeeInvoice) => {
+    if (!invoice.inventoryId) {
+      toast({
+        variant: 'destructive',
+        title: 'Gate clearance failed',
+        description: 'This invoice is not linked to an inventory item.',
+      });
+      return;
+    }
+
+    const pdfWindow = window.open('', '_blank');
+    try {
+      const releasedAt = new Date();
+      const releasedItem = await gateClear.mutateAsync(invoice.inventoryId);
+      let documentResponse: Awaited<ReturnType<typeof warehouseService.downloadReleaseDocument>>;
+      try {
+        documentResponse = await warehouseService.downloadReleaseDocument(invoice.inventoryId);
+      } catch (documentError) {
+        const context = await getExitPaperContext(invoice);
+        const fallbackBlob = buildWarehouseExitPaperPdf({
+          invoice,
+          releasedItem,
+          inventory: context.inventory,
+          booking: context.booking,
+          releasedAt,
+        });
+        const opened = openPdfBlob(
+          fallbackBlob,
+          `release-${releasedItem?.booking?.reference ?? releasedItem?.bookingId ?? invoice.inventoryId}.pdf`,
+          pdfWindow,
+        );
+        toast({
+          title: 'Gate clearance recorded',
+          description: opened
+            ? 'The API exit paper failed, so a sealed fallback PDF opened instead.'
+            : `The API exit paper failed (${extractErrorMessage(documentError)}), so a sealed fallback PDF was downloaded.`,
+        });
+        onClose();
+        return;
+      }
+      const filename = `release-${releasedItem?.booking?.reference ?? releasedItem?.bookingId ?? invoice.inventoryId}.pdf`;
+      const opened = openPdfBlob(documentResponse.data, filename, pdfWindow);
+      toast({
+        title: 'Gate clearance recorded',
+        description: opened
+          ? 'The exit paper opened in a browser tab.'
+          : 'The browser blocked the preview tab, so the exit paper was downloaded.',
+      });
+      onClose();
+    } catch (e) {
+      pdfWindow?.close();
+      toast({
+        variant: 'destructive',
+        title: 'Gate clearance failed',
+        description: extractErrorMessage(e),
+      });
+    }
+  };

  const handlePay = async () => {
    if (!inv || !payAmount) return;
    try {
-      await pay.mutateAsync({ id: inv.id, payload: { amount: Number(payAmount), method: 'MANUAL' } });
-      toast({ title: 'Payment recorded' });
+      const paidInvoice = await pay.mutateAsync({
+        id: inv.id,
+        payload: {
+          amount: Number(payAmount),
+          method: 'MANUAL',
+          driverName: driverName.trim() || undefined,
+          driverPhone: driverPhone.trim() || undefined,
+        },
+      });
      setPayAmount('');
+      setDriverName('');
+      setDriverPhone('');
+      if (paidInvoice.status === 'PAID') {
+        toast({ title: 'Payment recorded', description: 'Downloading receipt, then generating gate clearance and exit paper.' });
+        await downloadReceiptPdf(paidInvoice);
+        await handleGateClearance(paidInvoice);
+      } else {
+        toast({ title: 'Payment recorded' });
+      }
    } catch (e) {
-      toast({ variant: 'destructive', title: 'Payment failed', description: (e as Error)?.message });
+      toast({ variant: 'destructive', title: 'Payment failed', description: extractErrorMessage(e) });
    }
  };

@@ -180,7 +287,7 @@ function InvoiceDetailModal({ id, onClose }: { id: string | null; onClose: () =>
      toast({ title: 'Invoice cancelled' });
      onClose();
    } catch (e) {
-      toast({ variant: 'destructive', title: 'Cancel failed', description: (e as Error)?.message });
+      toast({ variant: 'destructive', title: 'Cancel failed', description: extractErrorMessage(e) });
    }
  };

@@ -239,6 +346,18 @@ function InvoiceDetailModal({ id, onClose }: { id: string | null; onClose: () =>
                  onChange={(v) => setPayAmount(v === '' ? '' : Number(v))}
                  style={{ flex: 1 }}
                />
+                <TextInput
+                  label="Pickup driver"
+                  value={driverName}
+                  onChange={(e) => setDriverName(e.currentTarget.value)}
+                  style={{ flex: 1 }}
+                />
+                <TextInput
+                  label="Driver phone"
+                  value={driverPhone}
+                  onChange={(e) => setDriverPhone(e.currentTarget.value)}
+                  style={{ flex: 1 }}
+                />
                <Button leftSection={<CreditCard size={16} />} loading={pay.isPending} onClick={handlePay}>
                  Pay
                </Button>
@@ -247,6 +366,34 @@ function InvoiceDetailModal({ id, onClose }: { id: string | null; onClose: () =>
          )}

          <Group justify="flex-end" mt="sm">
+            <Button
+              variant="light"
+              color="gray"
+              leftSection={<Download size={16} />}
+              onClick={() => downloadInvoicePdf(inv)}
+            >
+              Invoice PDF
+            </Button>
+            {Number(inv.paidAmount) > 0 && (
+              <Button
+                variant="light"
+                color="teal"
+                leftSection={<Receipt size={16} />}
+                onClick={() => downloadReceiptPdf(inv)}
+              >
+                Receipt PDF
+              </Button>
+            )}
+            {canGateClear && (
+              <Button
+                color="edr-green"
+                leftSection={<DoorOpen size={16} />}
+                loading={gateClear.isPending}
+                onClick={() => handleGateClearance(inv)}
+              >
+                Gate clearance & exit paper
+              </Button>
+            )}
            {inv.status !== 'PAID' && inv.status !== 'CANCELLED' && (
              <Button variant="light" color="red" leftSection={<Ban size={16} />} loading={cancel.isPending} onClick={handleCancel}>
                Cancel invoice
--- a/apps/edr-freight-web/backoffice/src/services/api.ts
+++ b/apps/edr-freight-web/backoffice/src/services/api.ts
@@ -670,6 +670,13 @@ export const api = {
      () => ["warehouse-inventory", "ready-to-load-export"],
    ),

+    receivedExport: endpoint<void, ReadyToLoadRow[]>(
+      "warehouse-inventory",
+      "received-export",
+      () => warehouseService.receivedExport().then((r) => r.data),
+      () => ["warehouse-inventory", "received-export"],
+    ),
+
    loadedExport: endpoint<void, ReadyToLoadRow[]>(
      "warehouse-inventory",
      "loaded-export",
--- a/apps/edr-freight-web/backoffice/src/services/first-mile.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/first-mile.service.ts
@@ -60,7 +60,7 @@ export const firstMileService = {
  list: (pageSize = 1000) =>
    api.get<FirstMileListResponse>(`${FM.BASE}?pageSize=${pageSize}`),
  getById: (id: string) => api.get<FirstMileRecord>(FM.BY_ID(id)),
-  update: (id: string, data: { status?: FirstMileApiStatus; vehicleId?: string | null }) =>
+  update: (id: string, data: { status?: FirstMileApiStatus; vehicleId?: string | null; estimatedKm?: number | null; exactKm?: number | null }) =>
    api.patch<FirstMileRecord>(FM.BY_ID(id), data),
  accept: (bookingReference: string) =>
    api.post<FirstMileRecord>(FM.ACCEPT(bookingReference)),
--- a/apps/edr-freight-web/backoffice/src/services/importOperations.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/importOperations.service.ts
@@ -0,0 +1,136 @@
+import { api as client } from '../auth/http';
+import { URL_CONSTANTS } from '@/constants/URLS';
+import { unwrap } from '@/utils/endpoint';
+import type {
+  AssignCustomsRiskPayload,
+  CreateDjiboutiIncidentPayload,
+  CreateEmptyContainerReturnPayload,
+  DjiboutiIncident,
+  EmptyContainerReturn,
+  ImportCustomsFinalization,
+  ImportOperationActionPayload,
+  RecordDeclarationPayload,
+  UpdateEmptyContainerReturnStatusPayload,
+  UploadImportCustomsDocumentPayload,
+} from '@/types/importOperations';
+
+export const importOperationsService = {
+  listIncidents: async (bookingId?: string): Promise<DjiboutiIncident[]> => {
+    const response = await client.get<DjiboutiIncident[]>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.DJIBOUTI_INCIDENTS,
+      { params: { bookingId } },
+    );
+    return unwrap(response.data);
+  },
+
+  createIncident: async (
+    payload: CreateDjiboutiIncidentPayload,
+  ): Promise<DjiboutiIncident> => {
+    const response = await client.post<DjiboutiIncident>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.DJIBOUTI_INCIDENTS,
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  getCustoms: async (bookingId: string): Promise<ImportCustomsFinalization> => {
+    const response = await client.get<ImportCustomsFinalization>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.CUSTOMS(bookingId),
+    );
+    return unwrap(response.data);
+  },
+
+  uploadCustomsDocument: async (
+    bookingId: string,
+    payload: UploadImportCustomsDocumentPayload,
+  ): Promise<ImportCustomsFinalization> => {
+    const response = await client.post<ImportCustomsFinalization>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.CUSTOMS_DOCUMENTS(bookingId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  recordDeclaration: async (
+    bookingId: string,
+    payload: RecordDeclarationPayload,
+  ): Promise<ImportCustomsFinalization> => {
+    const response = await client.post<ImportCustomsFinalization>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.CUSTOMS_DECLARATION(bookingId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  notifyDutiesTaxes: async (
+    bookingId: string,
+    payload: ImportOperationActionPayload = {},
+  ): Promise<ImportCustomsFinalization> => {
+    const response = await client.post<ImportCustomsFinalization>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.CUSTOMS_NOTIFY_DUTIES_TAXES(bookingId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  markDutiesTaxesPaid: async (
+    bookingId: string,
+    payload: ImportOperationActionPayload = {},
+  ): Promise<ImportCustomsFinalization> => {
+    const response = await client.post<ImportCustomsFinalization>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.CUSTOMS_DUTIES_TAXES_PAID(bookingId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  assignRisk: async (
+    bookingId: string,
+    payload: AssignCustomsRiskPayload,
+  ): Promise<ImportCustomsFinalization> => {
+    const response = await client.post<ImportCustomsFinalization>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.CUSTOMS_RISK(bookingId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  markReleasePermitted: async (
+    bookingId: string,
+    payload: ImportOperationActionPayload = {},
+  ): Promise<ImportCustomsFinalization> => {
+    const response = await client.post<ImportCustomsFinalization>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.CUSTOMS_RELEASE_PERMITTED(bookingId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  listEmptyReturns: async (): Promise<EmptyContainerReturn[]> => {
+    const response = await client.get<EmptyContainerReturn[]>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.EMPTY_CONTAINER_RETURNS,
+    );
+    return unwrap(response.data);
+  },
+
+  createEmptyReturn: async (
+    payload: CreateEmptyContainerReturnPayload,
+  ): Promise<EmptyContainerReturn> => {
+    const response = await client.post<EmptyContainerReturn>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.EMPTY_CONTAINER_RETURNS,
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  updateEmptyReturnStatus: async (
+    id: string,
+    payload: UpdateEmptyContainerReturnStatusPayload,
+  ): Promise<EmptyContainerReturn> => {
+    const response = await client.post<EmptyContainerReturn>(
+      URL_CONSTANTS.IMPORT_OPERATIONS.EMPTY_CONTAINER_RETURN_STATUS(id),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+};
--- a/apps/edr-freight-web/backoffice/src/services/last-mile.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/last-mile.service.ts
@@ -18,10 +18,10 @@ export interface LastMileBooking {
  totalAmount: number;
  scheduledDate?: string | null;
  company?: { id: string; name?: string; phone?: string | null; contactPersonName?: string | null; contactPersonPhone?: string | null } | null;
-  serviceType?: { id: string; name?: string } | null;
-  originYard?: { id: string; name?: string } | null;
-  destinationYard?: { id: string; name?: string } | null;
-  cargoType?: { id: string; name?: string } | null;
+  serviceType?: { id: string; name?: string; label?: string } | null;
+  originYard?: { id: string; name?: string; label?: string } | null;
+  destinationYard?: { id: string; name?: string; label?: string } | null;
+  cargoType?: { id: string; name?: string; label?: string; cargoTypeName?: string } | null;
 }

 export interface LastMileVehicle {
@@ -60,7 +60,7 @@ export const lastMileService = {
  list: (pageSize = 1000) =>
    api.get<LastMileListResponse>(`${LM.BASE}?pageSize=${pageSize}`),
  getById: (id: string) => api.get<LastMileRecord>(LM.BY_ID(id)),
-  update: (id: string, data: { status?: LastMileApiStatus; vehicleId?: string | null }) =>
+  update: (id: string, data: { status?: LastMileApiStatus; vehicleId?: string | null; estimatedKm?: number | null; exactKm?: number | null }) =>
    api.patch<LastMileRecord>(LM.BY_ID(id), data),
  accept: (bookingReference: string) =>
    api.post<LastMileRecord>(LM.ACCEPT(encodeURIComponent(bookingReference))),
--- a/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
@@ -12,6 +12,9 @@ import type {
  CreateTrainSchedulePayload,
  EligibleContainerBookingsResponse,
  FreightType,
+  ImportDjiboutiActionPayload,
+  ImportDjiboutiLoadList,
+  ImportDjiboutiOperation,
  LocomotiveRecord,
  PinWagonsPayload,
  RecordCheckpointPayload,
@@ -22,6 +25,7 @@ import type {
  TrainSchedulePreviewResponse,
  TrainSchedulingGlobalRules,
  TrainTrackResponse,
+  UploadImportDjiboutiDocumentPayload,
  WagonAllocationAttemptResult,
  YardOption,
 } from "@/types/trainScheduling";
@@ -280,6 +284,101 @@ export const trainSchedulingService = {
    return unwrap(response.data);
  },

+  getImportDjiboutiOperation: async (
+    scheduleId: string,
+  ): Promise<ImportDjiboutiOperation> => {
+    const response = await client.get<ImportDjiboutiOperation>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.IMPORT_DJIBOUTI(scheduleId),
+    );
+    return unwrap(response.data);
+  },
+
+  uploadImportDjiboutiDocument: async (
+    scheduleId: string,
+    payload: UploadImportDjiboutiDocumentPayload,
+  ): Promise<ImportDjiboutiOperation> => {
+    const response = await client.post<ImportDjiboutiOperation>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.IMPORT_DJIBOUTI_DOCUMENTS(scheduleId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  grantImportDjiboutiGatepass: async (
+    scheduleId: string,
+    payload: ImportDjiboutiActionPayload = {},
+  ): Promise<ImportDjiboutiOperation> => {
+    const response = await client.post<ImportDjiboutiOperation>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.IMPORT_DJIBOUTI_GATEPASS_GRANTED(scheduleId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  markImportDjiboutiReadyForLoading: async (
+    scheduleId: string,
+    payload: ImportDjiboutiActionPayload = {},
+  ): Promise<ImportDjiboutiOperation> => {
+    const response = await client.post<ImportDjiboutiOperation>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.IMPORT_DJIBOUTI_READY_FOR_LOADING(scheduleId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  confirmImportDjiboutiLoadedOnTrain: async (
+    scheduleId: string,
+    payload: ImportDjiboutiActionPayload = {},
+  ): Promise<ImportDjiboutiOperation> => {
+    const response = await client.post<ImportDjiboutiOperation>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.IMPORT_DJIBOUTI_LOADED_ON_TRAIN(scheduleId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  departImportFromDjibouti: async (
+    scheduleId: string,
+    payload: ImportDjiboutiActionPayload = {},
+  ): Promise<ImportDjiboutiOperation> => {
+    const response = await client.post<ImportDjiboutiOperation>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.IMPORT_DJIBOUTI_DEPART(scheduleId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  generateImportDjiboutiLoadList: async (
+    scheduleId: string,
+    payload: ImportDjiboutiActionPayload = {},
+  ): Promise<ImportDjiboutiLoadList> => {
+    const response = await client.post<ImportDjiboutiLoadList>(
+      URL_CONSTANTS.TRAIN_SCHEDULING.IMPORT_DJIBOUTI_LOAD_LIST(scheduleId),
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
+  downloadImportDjiboutiLoadListDocument: async (
+    scheduleId: string,
+  ): Promise<Blob> => {
+    const response = await client.get(
+      URL_CONSTANTS.TRAIN_SCHEDULING.IMPORT_DJIBOUTI_LOAD_LIST_DOCUMENT(scheduleId),
+      { responseType: "blob" },
+    );
+    return response.data;
+  },
+
+  downloadExportLoadListDocument: async (
+    scheduleId: string,
+  ): Promise<Blob> => {
+    const response = await client.get(
+      URL_CONSTANTS.TRAIN_SCHEDULING.EXPORT_LOAD_LIST_DOCUMENT(scheduleId),
+      { responseType: "blob" },
+    );
+    return response.data;
+  },
+
  getTrack: async (scheduleId: string): Promise<TrainTrackResponse> => {
    const response = await client.get<TrainTrackResponse>(
      URL_CONSTANTS.TRAIN_SCHEDULING.CHECKPOINTS(scheduleId),
--- a/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
@@ -149,6 +149,8 @@ export const warehouseService = {
    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: () =>
+    apiClient.get<ReadyToLoadRow[]>(URL_CONSTANTS.WAREHOUSE_INVENTORY.RECEIVED_EXPORT),
  readyToLoadExport: () =>
    apiClient.get<ReadyToLoadRow[]>(URL_CONSTANTS.WAREHOUSE_INVENTORY.READY_TO_LOAD_EXPORT),
  loadedExport: () =>
@@ -263,6 +265,14 @@ export const warehouseService = {
    }),
  getInvoice: (id: string) =>
    apiClient.get<WarehouseFeeInvoice>(URL_CONSTANTS.WAREHOUSE_INVOICES.BY_ID(id)),
+  downloadInvoiceDocument: (id: string) =>
+    apiClient.get<Blob>(URL_CONSTANTS.WAREHOUSE_INVOICES.DOCUMENT(id), {
+      responseType: 'blob',
+    }),
+  downloadInvoiceReceipt: (id: string) =>
+    apiClient.get<Blob>(URL_CONSTANTS.WAREHOUSE_INVOICES.RECEIPT(id), {
+      responseType: 'blob',
+    }),
  invoicesForInventory: (inventoryId: string) =>
    apiClient.get<WarehouseFeeInvoice[]>(URL_CONSTANTS.WAREHOUSE_INVOICES.FOR_INVENTORY(inventoryId)),
  invoicesForBooking: (bookingId: string) =>
--- a/apps/edr-freight-web/backoffice/src/types/importOperations.ts
+++ b/apps/edr-freight-web/backoffice/src/types/importOperations.ts
@@ -0,0 +1,124 @@
+export type DjiboutiIncidentType =
+  | 'SEAL_BROKEN'
+  | 'CONTAINER_OPENED'
+  | 'CONTAINER_DAMAGED'
+  | 'FLUID_LEAKING'
+  | 'QUANTITY_MISMATCH'
+  | 'WEIGHT_MISMATCH'
+  | 'OTHER';
+
+export interface DjiboutiIncident {
+  id: string;
+  bookingId: string;
+  containerNumber: string | null;
+  cargoId: string | null;
+  facility: string | null;
+  station: string | null;
+  incidentType: DjiboutiIncidentType;
+  description: string;
+  photos: string[];
+  reportedBy: string | null;
+  reportedAt: string;
+}
+
+export interface CreateDjiboutiIncidentPayload {
+  bookingId: string;
+  containerNumber?: string;
+  cargoId?: string;
+  facility?: string;
+  station?: string;
+  incidentType: DjiboutiIncidentType;
+  description: string;
+  photos?: string[];
+  reportedBy?: string;
+  reportedAt?: string;
+}
+
+export type ImportCustomsDocumentType =
+  | 'IM4'
+  | 'IM5'
+  | 'T1_CLOSURE_PROOF'
+  | 'TRANSIT_PERMIT_SCREENSHOT'
+  | 'CUSTOMER_PAYMENT_SLIP'
+  | 'IMPORT_RELEASE_PERMIT';
+
+export type ImportCustomsRiskLevel = 'GREEN' | 'YELLOW' | 'BLUE' | 'RED';
+
+export interface ImportCustomsFinalization {
+  id: string;
+  bookingId: string;
+  documents: Partial<Record<ImportCustomsDocumentType, string>>;
+  declarationSerialNumber: string | null;
+  dutiesTaxesNotifiedAt: string | null;
+  dutiesTaxesPaidAt: string | null;
+  customsRisk: ImportCustomsRiskLevel | null;
+  importReleasePermittedAt: string | null;
+  completedAt: string | null;
+  performedBy: string | null;
+  notes: string | null;
+}
+
+export interface ImportOperationActionPayload {
+  performedBy?: string;
+  notes?: string;
+}
+
+export interface UploadImportCustomsDocumentPayload {
+  documentType: ImportCustomsDocumentType;
+  fileId: string;
+  performedBy?: string;
+}
+
+export interface RecordDeclarationPayload {
+  declarationSerialNumber: string;
+  performedBy?: string;
+}
+
+export interface AssignCustomsRiskPayload {
+  risk: ImportCustomsRiskLevel;
+  performedBy?: string;
+}
+
+export type EmptyContainerReturnStatus =
+  | 'RETURNED'
+  | 'ASSIGNED_STORAGE'
+  | 'DOCUMENTATION_CLEARED'
+  | 'WAGON_ALLOCATED'
+  | 'TRANSPORTED_TO_DJIBOUTI'
+  | 'HANDOVER_ISSUED'
+  | 'COMPLETED';
+
+export interface EmptyContainerReturn {
+  id: string;
+  containerNumber: string;
+  bookingId: string | null;
+  customerId: string | null;
+  returnDate: string;
+  facility: string | null;
+  yard: string | null;
+  zone: string | null;
+  condition: string | null;
+  handoverNote: string | null;
+  status: EmptyContainerReturnStatus;
+  wagonAllocationReference: string | null;
+  performedBy: string | null;
+}
+
+export interface CreateEmptyContainerReturnPayload {
+  containerNumber: string;
+  bookingId?: string;
+  customerId?: string;
+  returnDate?: string;
+  facility?: string;
+  yard?: string;
+  zone?: string;
+  condition?: string;
+  handoverNote?: string;
+  performedBy?: string;
+}
+
+export interface UpdateEmptyContainerReturnStatusPayload extends ImportOperationActionPayload {
+  status: EmptyContainerReturnStatus;
+  wagonAllocationReference?: string;
+  handoverNote?: string;
+}
--- a/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
+++ b/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
@@ -399,6 +399,81 @@ export interface TrainScheduleDetail {
  warnings?: string[];
 }

+export type ImportDjiboutiDocumentType =
+  | "DELIVERY_ORDER"
+  | "PORT_INVOICE"
+  | "DJIBOUTI_T1"
+  | "ETHIOPIA_T1"
+  | "RAILWAY_BILL";
+
+export interface ImportDjiboutiDocumentRecord {
+  fileId?: string | null;
+  fileUrl?: string | null;
+  reference?: string | null;
+  uploadedAt: string;
+  uploadedBy?: string | null;
+  notes?: string | null;
+}
+
+export interface ImportDjiboutiOperation {
+  trainScheduleId: string;
+  trainNumber: string | null;
+  direction: string | null;
+  status: {
+    documentsComplete: boolean;
+    missingDocuments: ImportDjiboutiDocumentType[];
+    gatepassGranted: boolean;
+    readyForLoading: boolean;
+    loadedOnTrain: boolean;
+    departedFromDjibouti: boolean;
+    loadListGenerated: boolean;
+  };
+  documents: Partial<Record<ImportDjiboutiDocumentType, ImportDjiboutiDocumentRecord>>;
+  gatepassGrantedAt: string | null;
+  readyForLoadingAt: string | null;
+  loadedOnTrainAt: string | null;
+  departedFromDjiboutiAt: string | null;
+  loadListGeneratedAt: string | null;
+  performedBy: string | null;
+  notes: string | null;
+}
+
+export interface UploadImportDjiboutiDocumentPayload {
+  documentType: ImportDjiboutiDocumentType;
+  fileId?: string;
+  fileUrl?: string;
+  reference?: string;
+  notes?: string;
+  performedBy?: string;
+}
+
+export interface ImportDjiboutiActionPayload {
+  notes?: string;
+  performedBy?: string;
+}
+
+export interface ImportDjiboutiLoadList {
+  generatedAt: string;
+  trainScheduleId: string;
+  trainNumber: string | null;
+  route: string | null;
+  origin: string | null;
+  destination: string | null;
+  totalBookings: number;
+  wagons: Array<{
+    sequenceNo: number;
+    wagonNumber: string | null;
+    allocations: Array<{
+      bookingId: string;
+      bookingReference: string | null;
+      loadType: string | null;
+      allocatedWeightTons: number;
+      containerNumbers: string[];
+    }>;
+  }>;
+  operation: ImportDjiboutiOperation;
+}
+
 export type TrainCheckpointKind = "DEPARTED" | "PASSED" | "ARRIVED";

 export interface TrackStation {
--- a/apps/edr-freight-web/backoffice/src/types/warehouse.ts
+++ b/apps/edr-freight-web/backoffice/src/types/warehouse.ts
@@ -341,6 +341,20 @@ export interface ReserveInventoryPayload {
 export interface ReleaseOrderPayload {
  reference?: string;
  releaseDate?: string;
+  bookingId?: string;
+  customerId?: string;
+  truckPlateNumber?: string;
+  trailerPlateNumber?: string;
+  driverName?: string;
+  driverLicense?: string;
+  driverPhone?: string;
+  truckType?: string;
+  containerNumber?: string;
+  gateInTime?: string;
+  tareWeight?: number;
+  grossWeight?: number;
+  netWeight?: number;
+  gateOutTime?: string;
 }

 /** Import branch: proof of delivery captured on customer pickup. */
@@ -356,6 +370,13 @@ export interface EligibleBooking {
  reference: string;
  customerId: string | null;
  customer: string | null;
+  customerTin: string | null;
+  customerPhone: string | null;
+  containerNumber: string | null;
+  containerQuantity: number | null;
+  containerPackagingType: string | null;
+  cargoDescription: string | null;
+  lastMileRequested: boolean;
  direction: string;
  origin: string | null;
  destination: string | null;
@@ -364,6 +385,16 @@ export interface EligibleBooking {
  weight: string | null;
  paymentStatus: string;
  status: string;
+  hasFirstMile: boolean;
+  firstMileRequestId: string | null;
+  firstMileStatus: string | null;
+  firstMileVehicleId: string | null;
+  firstMileTruckPlateNumber: string | null;
+  firstMileTrailerPlateNumber: string | null;
+  firstMileDriverName: string | null;
+  firstMileDriverPhone: string | null;
+  firstMileDriverLicenseNumber: string | null;
+  firstMileTruckType: string | null;
 }

 export interface BulkReceivePayload {
@@ -372,12 +403,46 @@ export interface BulkReceivePayload {
  yardId: string;
  zoneId: string;
  bookingIds: string[];
+  truckEntrance?: TruckEntrancePayload;
 }

 export interface BulkReceiveResult {
  receivedCount: number;
  skippedCount: number;
-  results: { bookingId: string; status: string; inventoryId?: string; reason?: string }[];
+  results: { bookingId: string; status: string; inventoryId?: string; grnNumber?: string; reason?: string }[];
+}
+
+export interface TruckEntrancePayload {
+  ownerName?: string;
+  consigneeDetails?: string;
+  edrDigitalBookingId?: string;
+  tin?: string;
+  customerPhone?: string;
+  truckPlateNumber: string;
+  trailerPlateNumber?: string;
+  assignedEquipmentNumber?: string;
+  customsSealNumber?: string;
+  declarationNumber?: string;
+  incoterms?: string;
+  hsCodes?: string;
+  itemCode?: string;
+  itemDescription?: string;
+  packagingType?: string;
+  unitCount?: number;
+  grossWeightKg?: number;
+  netWeightKg?: number;
+  volumeDimensions?: string;
+  conditionAtReceipt?: string;
+  damagedRejectedQuantity?: number;
+  warehouseCodeLocation?: string;
+  driverName: string;
+  driverPhone: string;
+  driverLicenseNumber?: string;
+  truckType?: string;
+  entranceTareWeightKg: number;
+  exitTareWeightKg?: number;
+  driverSignatoryName?: string;
+  warehouseManagerName?: string;
 }

 export interface LoadPassedExportResult {
@@ -430,6 +495,9 @@ export interface ImportTrain {
  totalBookings: number;
  totalContainers: number;
  totalCargoes: number;
+  unloadedBookings?: number;
+  pendingUnloadBookings?: number;
+  fullyUnloaded?: boolean;
  status: string;
 }

@@ -510,6 +578,7 @@ export interface ImportTrainItem {
  weight: number | null;
  arrivalTime: string | null;
  currentStatus: string | null;
+  inspectionStatus: string | null;
  lastMileRequested: boolean;
  pickupOption: string;
 }
@@ -733,8 +802,16 @@ export interface WarehouseFeeInvoice {
  id: string;
  invoiceNumber: string;
  bookingId?: string | null;
+  bookingReference?: string | null;
  customerId?: string | null;
+  customerName?: string | null;
  inventoryId: string;
+  inventoryReference?: string | null;
+  inventoryInfo?: string | null;
+  inventoryStatus?: string | null;
+  containerNumber?: string | null;
+  cargoDescription?: string | null;
+  clearanceStatus?: string | null;
  facilityId?: string | null;
  warehouseId?: string | null;
  yardId?: string | null;
@@ -771,6 +848,8 @@ export interface PayInvoicePayload {
  amount: number;
  method?: string;
  reference?: string;
+  driverName?: string;
+  driverPhone?: string;
 }

 // ── Payloads ───────────────────────────────────────────────────────────────
@@ -823,6 +902,7 @@ export interface ReceiveInventoryPayload {
  weight: number;
  volume?: number;
  notes?: string;
+  truckEntrance: TruckEntrancePayload;
 }

 export interface MoveInventoryPayload {
--- a/apps/edr-freight-web/backoffice/vite.config.ts
+++ b/apps/edr-freight-web/backoffice/vite.config.ts
@@ -11,97 +11,9 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
 const streamBrowserifyPath = require.resolve("stream-browserify");

-function createIamApiAdapter(apiBaseUrl: string): Plugin {
-  const upstreamBaseUrl = `${apiBaseUrl.replace(/\/+$/, "")}/api`;
-
-  return {
-    name: "iam-api-adapter",
-    configureServer(server) {
-      server.middlewares.use("/um-api", async (req, res) => {
-        const requestPath = req.url ?? "/";
-        const normalizedPath = requestPath.replace(/^\/+/, "");
-        const targetUrl = new URL(normalizedPath, `${upstreamBaseUrl}/`);
-
-        try {
-          const headers = new Headers();
-          for (const [key, value] of Object.entries(req.headers)) {
-            if (!value || key.toLowerCase() === "host") {
-              continue;
-            }
-
-            if (Array.isArray(value)) {
-              for (const item of value) {
-                headers.append(key, item);
-              }
-              continue;
-            }
-
-            headers.set(key, value);
-          }
-
-          const body =
-            req.method === "GET" || req.method === "HEAD"
-              ? undefined
-              : await new Promise<Buffer>((resolve, reject) => {
-                  const chunks: Buffer[] = [];
-                  req.on("data", (chunk) =>
-                    chunks.push(
-                      Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk),
-                    ),
-                  );
-                  req.on("end", () => resolve(Buffer.concat(chunks)));
-                  req.on("error", reject);
-                });
-
-          const upstreamResponse = await fetch(targetUrl, {
-            method: req.method,
-            headers,
-            body,
-          });
-
-          if (targetUrl.pathname.endsWith("/auth/me")) {
-            const payload = await upstreamResponse.json();
-            const unwrappedPayload =
-              payload &&
-              typeof payload === "object" &&
-              "success" in payload &&
-              "data" in payload
-                ? payload.data
-                : payload;
-
-            res.statusCode = upstreamResponse.status;
-            res.setHeader("content-type", "application/json; charset=utf-8");
-            res.end(JSON.stringify(unwrappedPayload));
-            return;
-          }
-
-          res.statusCode = upstreamResponse.status;
-          upstreamResponse.headers.forEach((value, key) => {
-            res.setHeader(key, value);
-          });
-          res.end(Buffer.from(await upstreamResponse.arrayBuffer()));
-        } catch (error) {
-          server.ssrFixStacktrace(error as Error);
-          res.statusCode = 502;
-          res.setHeader("content-type", "application/json; charset=utf-8");
-          res.end(
-            JSON.stringify({
-              message: "Failed to forward IAM request",
-            }),
-          );
-        }
-      });
-    },
-  };
-}
-
 export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, __dirname, "");
-  const apiBaseUrl =
-    env.VITE_BASE_API_URL?.trim() || "http://localhost:3000";
-
  return {
-    plugins: [react(), tailwindcss(), createIamApiAdapter(apiBaseUrl)],
+    plugins: [react(), tailwindcss()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
--- a/apps/edr-freight-web/portal/package.json
+++ b/apps/edr-freight-web/portal/package.json
@@ -18,7 +18,7 @@
    "@mantine/core": "^9.3.0",
    "@mantine/hooks": "^9.3.0",
    "@tanstack/react-query": "^5.59.0",
-    "@tria-plc/iamui": "file:../../../local-packages/tria-plc-iamui-0.0.3.tgz",
+    "@tria-plc/iamui": "file:../../../local-packages/tria-plc-iamui-0.1.1.tgz",
    "axios": "^1.7.7",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
--- a/apps/edr-freight-web/portal/src/components/onboarding/OnboardingWizardDialog.tsx
+++ b/apps/edr-freight-web/portal/src/components/onboarding/OnboardingWizardDialog.tsx
@@ -164,7 +164,9 @@ export default function OnboardingWizardDialog({
    (company?.company?.nationality as CompanyNationality | null) ?? null;

  // Resume position from the backend-persisted step.
-  const resumeFormStep: FormStep = FORM_STEPS.includes(onboardingStep as FormStep)
+  const resumeFormStep: FormStep = FORM_STEPS.includes(
+    onboardingStep as FormStep,
+  )
    ? (onboardingStep as FormStep)
    : "company";

@@ -275,7 +277,7 @@ export default function OnboardingWizardDialog({
    const idx = FORM_STEPS.indexOf(step as FormStep);
    if (idx < 0 || idx <= furthestIdxRef.current) return;
    furthestIdxRef.current = idx;
-    api.companies.setOnboardingStep.call({ step }).catch(() => {});
+    api.companies.setOnboardingStep.call({ step }).catch(() => { });
  }, []);

  // Mirror the form's step locally (for the header/pill) and persist it.
@@ -321,7 +323,7 @@ export default function OnboardingWizardDialog({

  // Note: no "back to role selection" — once the draft is created the role(s)
  // are fixed; the form's first-step Back is a no-op so progress never resets.
-  const handleBackToRoles = useCallback(() => {}, []);
+  const handleBackToRoles = useCallback(() => { }, []);

  // Save the current step's fields to the draft (PATCH /profile). Returns the
  // server error message on failure so the form can show it (e.g. duplicate TIN).
@@ -339,6 +341,31 @@ export default function OnboardingWizardDialog({
    [],
  );

+  // Auto-upload the documents the user just selected as they leave the documents
+  // step. Only the in-memory selections are sent; once uploaded they're cleared
+  // (so the final submit never re-uploads them) and the requirements query is
+  // refreshed so the "Already uploaded" badges light up. Partial uploads are
+  // allowed — the user may continue even with required docs still outstanding.
+  const handleUploadDocuments = useCallback(async (): Promise<
+    { ok: true } | { ok: false; error: string }
+  > => {
+    const companyId = company?.company?.id;
+    const hasNew = Object.values(documentFiles).some(
+      (f) => f !== null && (Array.isArray(f) ? f.length > 0 : true),
+    );
+    if (!companyId || !hasNew) return { ok: true };
+    try {
+      await companiesService.uploadDocuments(companyId, documentFiles);
+      setDocumentFiles({});
+      await queryClient.invalidateQueries({
+        queryKey: api.companies.onboardingRequirements.queryKey(),
+      });
+      return { ok: true };
+    } catch (err) {
+      return { ok: false, error: extractApiError(err).message };
+    }
+  }, [company?.company?.id, documentFiles, queryClient]);
+
  // Final confirm step → finalize onboarding (no company create; it already
  // exists as a draft that's been filled in step-by-step).
  const handleSubmit = useCallback(
@@ -383,6 +410,25 @@ export default function OnboardingWizardDialog({
    requirementsQuery.data?.documentSettingCode ??
    documentSettingCode(effectiveNationality);

+  // Server-confirmed document state, used both to badge already-uploaded fields
+  // and to keep a refreshed resume from over-shooting the documents step.
+  const requirementDocuments = requirementsQuery.data?.documents ?? [];
+  const uploadedDocumentKeys = requirementDocuments
+    .filter((d) => d.uploaded)
+    .map((d) => d.fileKey);
+  // If any REQUIRED document is still missing, the resume must not rest past the
+  // documents step (don't skip to Business License) — clamp it back. This only
+  // changes the target once requirements load; the form follows the correction
+  // as long as the user hasn't navigated yet.
+  const requiredDocsMissing = requirementDocuments.some(
+    (d) => d.isRequired && !d.uploaded,
+  );
+  const effectiveResumeStep: FormStep =
+    requiredDocsMissing &&
+    FORM_STEPS.indexOf(resumeFormStep) > FORM_STEPS.indexOf("documents")
+      ? "documents"
+      : resumeFormStep;
+
  const formProps = {
    documentSettingCode: resolvedDocumentSettingCode,
    documentFiles,
@@ -392,7 +438,7 @@ export default function OnboardingWizardDialog({
    isPending: finishMutation.isPending,
    onBack: handleBackToRoles,
    hideFirstStepBack: true,
-    initialStep: resumeFormStep,
+    initialStep: effectiveResumeStep,
    resyncOpen: opened,
    onStepChange: handleStepChange,
    onSaveStep: saveStep,
@@ -400,6 +446,8 @@ export default function OnboardingWizardDialog({
    roleProfiles,
    licenseFiles,
    onLicenseChange: setLicenseFiles,
+    uploadedDocumentKeys,
+    onUploadDocuments: handleUploadDocuments,
    // Surface a failed final submit (license/document upload or complete) inside
    // the form — otherwise the server message (e.g. a 500) would be invisible on
    // the submit step.
@@ -413,7 +461,7 @@ export default function OnboardingWizardDialog({
      withCloseButton={!completed}
      closeOnClickOutside={false}
      closeOnEscape={!completed}
-      size={720}
+      size={1440}
      radius="lg"
      padding="xl"
      centered
@@ -422,11 +470,11 @@ export default function OnboardingWizardDialog({
      overlayProps={{ backgroundOpacity: 0.55, blur: 4 }}
      styles={{
        header: {
-          alignItems:"flex-start"
+          alignItems: "flex-start",
        },
        title: {
-          flex: 1
-        }
+          flex: 1,
+        },
      }}
      title={
        completed ? null : (
@@ -448,59 +496,64 @@ export default function OnboardingWizardDialog({
      {completed ? (
        <OnboardingCompletePanel onClose={handleClose} />
      ) : (
-      <Stack gap="xl">
-
-        {phase === "nationality" ? (
-          <Stack gap="lg">
-            <NationalitySelect
-              value={nationality}
-              onChange={setNationality}
-              embedded
-            />
-            <Group justify="flex-end" pt="xs">
-              <Button
-                color="edr-green"
-                onClick={handleNationalityContinue}
-                disabled={!nationality}
-                rightSection={<ArrowRight size={16} />}
-              >
-                Continue
-              </Button>
-            </Group>
-          </Stack>
-        ) : phase === "role" ? (
-          <Stack gap="lg">
-            <OnboardingRoleSelect value={roles} onChange={setRoles} embedded />
-            {startError && (
-              <Text size="sm" c="red">
-                {startError}
-              </Text>
-            )}
-            <Group justify="space-between" pt="xs">
-              <Button
-                variant="default"
-                leftSection={<ArrowLeft size={16} />}
-                onClick={() => setPhase("nationality")}
-              >
-                Back
-              </Button>
-              <Button
-                color="edr-green"
-                onClick={handleRolesContinue}
-                disabled={!rolesValid}
-                loading={startMutation.isPending}
-                rightSection={
-                  startMutation.isPending ? undefined : <ArrowRight size={16} />
-                }
-              >
-                Continue
-              </Button>
-            </Group>
-          </Stack>
-        ) : (
-          <CompanyProfileForm {...formProps} />
-        )}
-      </Stack>
+        <Stack gap="xl">
+          {phase === "nationality" ? (
+            <Stack gap="lg">
+              <NationalitySelect
+                value={nationality}
+                onChange={setNationality}
+                embedded
+              />
+              <Group justify="flex-end" pt="xs">
+                <Button
+                  color="edr-green"
+                  onClick={handleNationalityContinue}
+                  disabled={!nationality}
+                  rightSection={<ArrowRight size={16} />}
+                >
+                  Continue
+                </Button>
+              </Group>
+            </Stack>
+          ) : phase === "role" ? (
+            <Stack gap="lg">
+              <OnboardingRoleSelect
+                value={roles}
+                onChange={setRoles}
+                embedded
+              />
+              {startError && (
+                <Text size="sm" c="red">
+                  {startError}
+                </Text>
+              )}
+              <Group justify="space-between" pt="xs">
+                <Button
+                  variant="default"
+                  leftSection={<ArrowLeft size={16} />}
+                  onClick={() => setPhase("nationality")}
+                >
+                  Back
+                </Button>
+                <Button
+                  color="edr-green"
+                  onClick={handleRolesContinue}
+                  disabled={!rolesValid}
+                  loading={startMutation.isPending}
+                  rightSection={
+                    startMutation.isPending ? undefined : (
+                      <ArrowRight size={16} />
+                    )
+                  }
+                >
+                  Continue
+                </Button>
+              </Group>
+            </Stack>
+          ) : (
+            <CompanyProfileForm {...formProps} />
+          )}
+        </Stack>
      )}
    </Modal>
  );
@@ -518,7 +571,10 @@ function OnboardingCompletePanel({ onClose }: { onClose: () => void }) {
        className="flex h-16 w-16 items-center justify-center rounded-full"
        style={{ background: "var(--mantine-color-edr-green-1)" }}
      >
-        <PartyPopper size={32} className="text-[var(--mantine-color-edr-green-7)]" />
+        <PartyPopper
+          size={32}
+          className="text-[var(--mantine-color-edr-green-7)]"
+        />
      </Box>

      <Box>
@@ -538,14 +594,20 @@ function OnboardingCompletePanel({ onClose }: { onClose: () => void }) {
        style={{ background: "var(--mantine-color-edr-green-0)" }}
      >
        <Group gap="sm" wrap="nowrap" align="flex-start">
-          <Clock size={18} className="mt-0.5 shrink-0 text-[var(--mantine-color-edr-green-7)]" />
+          <Clock
+            size={18}
+            className="mt-0.5 shrink-0 text-[var(--mantine-color-edr-green-7)]"
+          />
          <Text size="sm" ta="left">
            Each operational profile (importer, exporter, freight forwarder) is
            reviewed and approved individually.
          </Text>
        </Group>
        <Group gap="sm" wrap="nowrap" align="flex-start">
-          <ShieldCheck size={18} className="mt-0.5 shrink-0 text-[var(--mantine-color-edr-green-7)]" />
+          <ShieldCheck
+            size={18}
+            className="mt-0.5 shrink-0 text-[var(--mantine-color-edr-green-7)]"
+          />
          <Text size="sm" ta="left">
            You can start creating bookings under a profile as soon as it's
            approved — we'll let you know the moment that happens.
--- a/apps/edr-freight-web/portal/src/components/onboarding/RoleLicenseStep.tsx
+++ b/apps/edr-freight-web/portal/src/components/onboarding/RoleLicenseStep.tsx
@@ -1,14 +1,8 @@
-import {
-  Anchor,
-  Badge,
-  Card,
-  FileInput,
-  Group,
-  Stack,
-  Text,
-  ThemeIcon,
-} from "@mantine/core";
-import { FileText, Paperclip, Upload } from "lucide-react";
+import { Anchor, Group, Stack, Text } from "@mantine/core";
+import { Paperclip } from "lucide-react";
+
+import { SmartFileInput } from "@edr/ui-common";
+import type { IFileUploadSetting } from "@edr/types/freight";

 import type { LicenseFile } from "@/services/companies.service";

@@ -20,6 +14,48 @@ const ROLE_LABELS: Record<string, string> = {
  transporter: "Transporter",
 };

+/** Field key the synthesized per-profile upload setting is keyed on. */
+const LICENSE_FILE_KEY = "business_license";
+
+/**
+ * Build a single-field upload setting so each profile's license input can reuse
+ * the shared SmartFileInput (same dropzone + "uploaded" state as the documents
+ * step), instead of a bespoke file picker.
+ */
+function buildLicenseSetting(
+  profileId: string,
+  profileName: string,
+): IFileUploadSetting {
+  return {
+    id: `license-setting-${profileId}`,
+    createdAt: "",
+    updatedAt: "",
+    deletedAt: null,
+    code: "business_license",
+    label: "Business license",
+    description: null,
+    entity: "customer",
+    fields: [
+      {
+        id: `${LICENSE_FILE_KEY}-${profileId}`,
+        createdAt: "",
+        updatedAt: "",
+        deletedAt: null,
+        settingId: `license-setting-${profileId}`,
+        fileKey: LICENSE_FILE_KEY,
+        fileLabel: `Upload ${profileName} Business license file(s)`,
+        helpText: null,
+        isRequired: true,
+        isMultiple: true,
+        maxFiles: 10,
+        allowedExtensions: ["pdf", "png", "jpg", "jpeg"],
+        maxSizeMb: 10,
+        order: 1,
+      },
+    ],
+  };
+}
+
 export interface RoleLicenseProfile {
  id: string;
  type: string;
@@ -38,8 +74,9 @@ interface RoleLicenseStepProps {

 /**
 * Final onboarding step: collect a business license (one or more files) for
- * each operational role the company holds. Each role gets its own multi-file
- * input; already-uploaded files are listed for context.
+ * each operational role the company holds. Each role gets its own SmartFileInput
+ * dropzone; already-uploaded files are listed (with download links) for context
+ * and surface the input's "uploaded" state.
 */
 export default function RoleLicenseStep({
  profiles,
@@ -60,37 +97,11 @@ export default function RoleLicenseStep({
      {profiles.map((profile) => {
        const label = ROLE_LABELS[profile.type] ?? profile.type;
        const selected = value[profile.id] ?? [];
-        const hasAny = selected.length > 0 || profile.existingFiles.length > 0;
+        const hasExisting = profile.existingFiles.length > 0;

        return (
-          <Card key={profile.id} padding="lg" withBorder>
-            <Group justify="space-between" mb="sm" wrap="nowrap">
-              <Group gap="sm" wrap="nowrap">
-                <ThemeIcon
-                  size={40}
-                  radius="md"
-                  variant="light"
-                  color="edr-green"
-                >
-                  <FileText size={20} />
-                </ThemeIcon>
-                <div>
-                  <Text fw={700} c="edr-text" fz={15}>
-                    {label} — Business License
-                  </Text>
-                  <Text size="xs" c="edr-muted" ff="monospace">
-                    {profile.reference}
-                  </Text>
-                </div>
-              </Group>
-              {hasAny && (
-                <Badge color="edr-green" variant="light">
-                  Provided
-                </Badge>
-              )}
-            </Group>
-
-            {profile.existingFiles.length > 0 && (
+          <>
+            {hasExisting && (
              <Stack gap={4} mb="sm">
                {profile.existingFiles.map((f) => (
                  <Group key={f.url} gap={6} wrap="nowrap">
@@ -108,20 +119,17 @@ export default function RoleLicenseStep({
              </Stack>
            )}

-            <FileInput
-              multiple
-              clearable
-              accept="application/pdf,image/png,image/jpeg"
-              leftSection={<Upload size={16} />}
-              placeholder={
-                profile.existingFiles.length > 0
-                  ? "Upload more / replace files"
-                  : "Select license file(s)"
-              }
-              value={selected}
-              onChange={(files) => setFiles(profile.id, files ?? [])}
+            <SmartFileInput
+              file={buildLicenseSetting(profile.id, label)}
+              value={{ [LICENSE_FILE_KEY]: selected }}
+              uploadedKeys={hasExisting ? [LICENSE_FILE_KEY] : undefined}
+              onChange={(v) => {
+                const next = v[LICENSE_FILE_KEY];
+                const files = Array.isArray(next) ? next : next ? [next] : [];
+                setFiles(profile.id, files);
+              }}
            />
-          </Card>
+          </>
        );
      })}
    </Stack>
--- a/apps/edr-freight-web/portal/src/pages/accounts/CompanyProfileForm.tsx
+++ b/apps/edr-freight-web/portal/src/pages/accounts/CompanyProfileForm.tsx
@@ -18,23 +18,17 @@ import {
  ArrowRight,
  CheckCircle2,
  RotateCw,
-  ShieldCheck,
  Smartphone,
  UserCheck,
 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
-import { z } from "zod";

 import type { AuthUser } from "@/types/auth";
 import type { CreateCompanyPayload } from "@/services/companies.service";
 import type { ProfileResponse, UpdateProfilePayload } from "@/types/profile";
 import type { CompanyRegistrationData } from "@edr/types";
-import {
-  ControlledPhoneField,
-  isValidPhone,
-  toEthiopianE164,
-} from "@/components/PhoneField";
+import { ControlledPhoneField, toEthiopianE164 } from "@/components/PhoneField";
 import { SmartFileInput } from "@edr/ui-common";
 import { api } from "@/services/api";
 import RoleLicenseStep, {
@@ -42,261 +36,21 @@ import RoleLicenseStep, {
 } from "@/components/onboarding/RoleLicenseStep";
 import ETradeInfo from "@/components/onboarding/ETradeInfo";
 import { extractApiError } from "@/utils/result";
-
-type CompanyStep =
-  | "company"
-  | "personnel"
-  | "contact"
-  | "verify"
-  | "poa"
-  | "documents"
-  | "additional";
-
-/** Last 9 digits (Ethiopian national significant number) for tolerant compare. */
-const phoneDigits = (p?: string | null) => (p ?? "").replace(/\D/g, "").slice(-9);
-const samePhone = (a?: string | null, b?: string | null) => {
-  const da = phoneDigits(a);
-  return da.length === 9 && da === phoneDigits(b);
-};
-/** Mask all but the first 7 chars of an E.164 phone for display. */
-const maskPhone = (p: string) =>
-  p.length > 4 ? `${p.slice(0, 7)}${"*".repeat(Math.max(0, p.length - 7))}` : p;
-
-const onboardingSchema = z.object({
-  companyName: z.string().min(1, "Company name is required"),
-  companyEmail: z.string().email("Invalid email address"),
-  companyPhone: z
-    .string()
-    .min(1, "Company phone is required")
-    .refine(isValidPhone, "Enter a valid phone number"),
-  companyLocation: z.string().min(1, "Location is required"),
-  // Derived from the eTrade address parts (kebele/woreda/zone/region); no
-  // standalone input — the granular fields live in the registration section.
-  companyAddress: z.string().optional(),
-  tinNumber: z.string().length(10, "TIN must be exactly 10 digits"),
-  vatNumber: z
-    .string()
-    .min(1, "VAT number is required")
-    .length(10, "VAT number must be exactly 10 digits"),
-  fanNumber: z.string().length(16, "FAN must be exactly 16 digits"),
-  licenceNumber: z.string().optional(),
-  statusDescription: z.string().optional(),
-  dateRegistered: z.string().optional(),
-  renewedFrom: z.string().optional(),
-  renewalDate: z.string().optional(),
-  renewedTo: z.string().optional(),
-  // Address fields are user-entered and required (the registration/license
-  // fields above are read-only confirmations pulled from eTrade).
-  region: z.string().min(1, "Region is required"),
-  zone: z.string().min(1, "Zone is required"),
-  woreda: z.string().min(1, "Woreda is required"),
-  kebele: z.string().min(1, "Kebele is required"),
-  houseNo: z.string().min(1, "House number is required"),
-  etradePhone: z.string().optional(),
-  contactPersonName: z.string().min(1, "Contact person name is required"),
-  contactPersonPosition: z.string().optional(),
-  contactPersonEmail: z
-    .string()
-    .email("Invalid email address")
-    .optional()
-    .or(z.literal("")),
-  contactPersonPhone: z
-    .string()
-    .min(1, "Contact person phone is required")
-    .refine(isValidPhone, "Enter a valid phone number"),
-  generalManagerName: z.string().min(1, "Manager name is required"),
-  generalManagerEmail: z.string().email("Invalid Manager email"),
-  generalManagerPhone: z
-    .string()
-    .min(1, "Manager phone is required")
-    .refine(isValidPhone, "Enter a valid phone number"),
-  poaName: z.string().optional(),
-  poaPhone: z
-    .string()
-    .optional()
-    .refine((v) => !v || isValidPhone(v), "Enter a valid phone number"),
-  poaAddress: z.string().optional(),
-  poaEmail: z.string().optional(),
-  poaLocation: z.string().optional(),
-});
-
-type FormData = z.infer<typeof onboardingSchema>;
-
-const stepFields: Record<CompanyStep, (keyof FormData)[]> = {
-  company: [
-    "companyName",
-    "companyEmail",
-    "companyPhone",
-    "companyLocation",
-    "companyAddress",
-    "tinNumber",
-    "vatNumber",
-    "fanNumber",
-    "licenceNumber",
-    "statusDescription",
-    "dateRegistered",
-    "renewedFrom",
-    "renewalDate",
-    "renewedTo",
-    "region",
-    "zone",
-    "woreda",
-    "kebele",
-    "houseNo",
-    "etradePhone",
-  ],
-  personnel: [
-    "generalManagerName",
-    "generalManagerEmail",
-    "generalManagerPhone",
-  ],
-  contact: [
-    "contactPersonName",
-    "contactPersonPosition",
-    "contactPersonEmail",
-    "contactPersonPhone",
-  ],
-  verify: [],
-  poa: [],
-  documents: [],
-  additional: [],
-};
-
-function buildPayload(data: FormData, _user: AuthUser): CreateCompanyPayload {
-  return {
-    companyName: data.companyName,
-    companyEmail: data.companyEmail,
-    companyPhone: data.companyPhone,
-    companyLocation: data.companyLocation,
-    companyAddress: data.companyAddress,
-    tin: data.tinNumber,
-    vatNumber: data.vatNumber,
-    fanNumber: data.fanNumber,
-    attributes: {
-      contactPersonName: data.contactPersonName,
-      contactPersonPosition: data.contactPersonPosition || undefined,
-      contactPersonEmail: data.contactPersonEmail || undefined,
-      contactPersonPhone: data.contactPersonPhone,
-      generalManagerName: data.generalManagerName,
-      generalManagerEmail: data.generalManagerEmail,
-      generalManagerPhone: data.generalManagerPhone,
-      poaName: data.poaName || undefined,
-      poaPhone: data.poaPhone || undefined,
-      poaAddress: data.poaAddress || undefined,
-      poaEmail: data.poaEmail || undefined,
-      poaLocation: data.poaLocation || undefined,
-    },
-  };
-}
-
-/** Map one wizard step's form values to the profile-update payload it saves. */
-function stepPayload(
-  step: CompanyStep,
-  d: FormData,
-): Partial<UpdateProfilePayload> {
-  switch (step) {
-    case "company":
-      return {
-        companyName: d.companyName,
-        companyEmail: d.companyEmail,
-        companyPhone: d.companyPhone,
-        companyLocation: d.companyLocation,
-        companyAddress: d.companyAddress,
-        tin: d.tinNumber,
-        vatNumber: d.vatNumber,
-        fanNumber: d.fanNumber,
-        licenceNumber: d.licenceNumber,
-        statusDescription: d.statusDescription,
-        dateRegistered: d.dateRegistered,
-        renewedFrom: d.renewedFrom,
-        renewalDate: d.renewalDate,
-        renewedTo: d.renewedTo,
-        region: d.region,
-        zone: d.zone,
-        woreda: d.woreda,
-        kebele: d.kebele,
-        houseNo: d.houseNo,
-        etradePhone: d.etradePhone,
-      };
-    case "personnel":
-      return {
-        generalManagerName: d.generalManagerName,
-        generalManagerEmail: d.generalManagerEmail,
-        generalManagerPhone: d.generalManagerPhone,
-      };
-    case "contact":
-      return {
-        contactPersonName: d.contactPersonName,
-        contactPersonPosition: d.contactPersonPosition || undefined,
-        contactPersonEmail: d.contactPersonEmail || undefined,
-        contactPersonPhone: d.contactPersonPhone,
-      };
-    case "poa":
-      return {
-        poaName: d.poaName || undefined,
-        poaPhone: d.poaPhone || undefined,
-        poaEmail: d.poaEmail || undefined,
-        poaLocation: d.poaLocation || undefined,
-        poaAddress: d.poaAddress || undefined,
-      };
-    default:
-      return {};
-  }
-}
-
-/** Seed the form from previously-saved profile data. */
-function toFormValues(p: ProfileResponse): FormData {
-  // The draft placeholder TIN ("D…") shouldn't show as a real value.
-  const tin = p.tinNumber && !p.tinNumber.startsWith("D") ? p.tinNumber : "";
-  return {
-    companyName: p.companyName ?? "",
-    companyEmail: p.companyEmail ?? "",
-    companyPhone: p.companyPhone ?? "",
-    companyLocation: p.companyLocation ?? "",
-    companyAddress: p.companyAddress ?? "",
-    tinNumber: tin,
-    vatNumber: p.vatNumber ?? "",
-    fanNumber: p.fanNumber ?? "",
-    licenceNumber: p.licenceNumber ?? "",
-    statusDescription: p.statusDescription ?? "",
-    dateRegistered: p.dateRegistered ?? "",
-    renewedFrom: p.renewedFrom ?? "",
-    renewalDate: p.renewalDate ?? "",
-    renewedTo: p.renewedTo ?? "",
-    region: p.region ?? "",
-    zone: p.zone ?? "",
-    woreda: p.woreda ?? "",
-    kebele: p.kebele ?? "",
-    houseNo: p.houseNo ?? "",
-    etradePhone: p.etradePhone ?? "",
-    contactPersonName: p.contactPersonName ?? "",
-    contactPersonPosition: p.contactPersonPosition ?? "",
-    contactPersonEmail: p.contactPersonEmail ?? "",
-    contactPersonPhone: p.contactPersonPhone ?? "",
-    generalManagerName: p.generalManagerName ?? "",
-    generalManagerEmail: p.generalManagerEmail ?? "",
-    generalManagerPhone: p.generalManagerPhone ?? "",
-    poaName: p.poaName ?? "",
-    poaPhone: p.poaPhone ?? "",
-    poaAddress: p.poaAddress ?? "",
-    poaEmail: p.poaEmail ?? "",
-    poaLocation: p.poaLocation ?? "",
-  };
-}
-
-/** A single read-only registration value rendered as a label/value pair. */
-function ReadOnlyField({ label, value }: { label: string; value?: string }) {
-  return (
-    <Stack gap={2}>
-      <Text size="xs" c="dimmed">
-        {label}
-      </Text>
-      <Text size="sm" c="edr-text" fw={500}>
-        {value && value.trim() ? value : "—"}
-      </Text>
-    </Stack>
-  );
-}
+import {
+  type CompanyStep,
+  type FormData,
+  onboardingSchema,
+  stepFields,
+} from "./companyProfileForm/schema";
+import {
+  buildPayload,
+  maskPhone,
+  samePhone,
+  stepPayload,
+  toFormValues,
+} from "./companyProfileForm/helpers";
+import { LinkCheckboxCard } from "./companyProfileForm/LinkCheckboxCard";
+import { ReadOnlyField } from "./companyProfileForm/ReadOnlyField";

 export default function CompanyProfileForm({
  documentSettingCode,
@@ -316,6 +70,8 @@ export default function CompanyProfileForm({
  licenseFiles,
  onLicenseChange,
  submitError,
+  uploadedDocumentKeys,
+  onUploadDocuments,
 }: {
  documentSettingCode: string;
  documentFiles?: Record<string, File | File[] | null>;
@@ -345,6 +101,16 @@ export default function CompanyProfileForm({
  onLicenseChange?: (value: Record<string, File[]>) => void;
  /** Server error from the final submit (uploads/complete), shown verbatim. */
  submitError?: string | null;
+  /** fileKeys whose company document is already uploaded server-side (resume). */
+  uploadedDocumentKeys?: string[];
+  /**
+   * Auto-upload the currently-selected company documents (the Documents step's
+   * "Continue" action). Resolves to an error message string on failure so the
+   * step can surface it and hold the user in place.
+   */
+  onUploadDocuments?: () => Promise<
+    { ok: true } | { ok: false; error: string }
+  >;
 }) {
  const [step, setStep] = useState<CompanyStep>(initialStep ?? "company");
  const [saving, setSaving] = useState(false);
@@ -356,17 +122,40 @@ export default function CompanyProfileForm({
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [step]);

+  // Tracks whether the user has manually navigated the form this session. While
+  // false, the form still follows the parent's resume target (initialStep) —
+  // which can shift to an earlier step once server data lands (e.g. a required
+  // document turns out to be un-uploaded, so we must not rest on a later step).
+  const userNavigatedRef = useRef(false);
+
  // On reopen, jump to the furthest step reached (initialStep) so progress
-  // never appears to reset.
+  // never appears to reset. Re-arm the follow-the-parent behaviour too.
  const wasOpen = useRef(resyncOpen);
  useEffect(() => {
    if (resyncOpen && !wasOpen.current && initialStep) {
+      userNavigatedRef.current = false;
      setStep(initialStep);
      setSaveError(null);
    }
    wasOpen.current = resyncOpen;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [resyncOpen]);
+
+  // Follow a parent-driven resume correction: if initialStep changes (the wizard
+  // re-clamps it back once onboarding requirements load — e.g. a required
+  // document is still missing, so it must not skip ahead to Business License),
+  // adopt it, but only while the user hasn't started navigating themselves.
+  const lastInitialStep = useRef(initialStep);
+  useEffect(() => {
+    if (initialStep && initialStep !== lastInitialStep.current) {
+      lastInitialStep.current = initialStep;
+      if (!userNavigatedRef.current) {
+        setStep(initialStep);
+        setSaveError(null);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialStep]);
  const [internalFiles, setInternalFiles] = useState<
    Record<string, File | File[] | null>
  >({});
@@ -410,7 +199,6 @@ export default function CompanyProfileForm({
      woreda: "",
      kebele: "",
      houseNo: "",
-      etradePhone: "",
      contactPersonName: "",
      contactPersonPosition: "",
      contactPersonEmail: "",
@@ -482,7 +270,7 @@ export default function CompanyProfileForm({
    setValue("kebele", data.kebele);
    setValue("houseNo", data.houseNo);
    setValue(
-      "etradePhone",
+      "companyPhone",
      toEthiopianE164(data.regularPhone || data.mobilePhone),
    );
    // companyAddress is composed reactively from the address fields below, so
@@ -512,33 +300,54 @@ export default function CompanyProfileForm({
    });
  };

-  /** Copy the General Manager into the Contact Person fields (still editable). */
-  const useGmAsContact = () => {
-    setValue("contactPersonName", watch("generalManagerName"), {
-      shouldValidate: true,
-    });
-    setValue("contactPersonEmail", watch("generalManagerEmail"));
-    setValue("contactPersonPhone", watch("generalManagerPhone"), {
-      shouldValidate: true,
-    });
+  // "Same as …" links. A checked card prefills the target step's fields from the
+  // source step and disables them (kept mirrored while linked); unchecking clears
+  // them and re-enables editing.
+  const [contactSameAsGm, setContactSameAsGm] = useState(false);
+  const [poaSameAsContact, setPoaSameAsContact] = useState(false);
+
+  const gmName = watch("generalManagerName");
+  const gmEmail = watch("generalManagerEmail");
+  const gmPhone = watch("generalManagerPhone");
+  const contactName = watch("contactPersonName");
+  const contactEmail = watch("contactPersonEmail");
+  const contactPhone = watch("contactPersonPhone");
+
+  // While linked, mirror the source values into the (disabled) target fields so
+  // the copy stays current even if the user goes back and edits the source.
+  useEffect(() => {
+    if (!contactSameAsGm) return;
+    setValue("contactPersonName", gmName ?? "", { shouldValidate: true });
+    setValue("contactPersonEmail", gmEmail ?? "");
+    setValue("contactPersonPhone", gmPhone ?? "", { shouldValidate: true });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contactSameAsGm, gmName, gmEmail, gmPhone]);
+
+  useEffect(() => {
+    if (!poaSameAsContact) return;
+    setValue("poaName", contactName ?? "");
+    setValue("poaEmail", contactEmail ?? "");
+    setValue("poaPhone", contactPhone ?? "");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [poaSameAsContact, contactName, contactEmail, contactPhone]);
+
+  const toggleContactSameAsGm = (checked: boolean) => {
+    setContactSameAsGm(checked);
+    // Checked → the mirror effect fills the fields; unchecked → reset them.
+    if (!checked) {
+      setValue("contactPersonName", "");
+      setValue("contactPersonEmail", "");
+      setValue("contactPersonPhone", "");
+    }
  };

-  /** Copy the Contact Person into the PoA fields (still editable). */
-  const useContactAsPoa = () => {
-    setValue("poaName", watch("contactPersonName"));
-    setValue("poaEmail", watch("contactPersonEmail"));
-    setValue("poaPhone", watch("contactPersonPhone"));
-  };
-
-  /** Populate the Contact Person from the currently logged-in user. */
-  const useLoggedInUserAsContact = () => {
-    setValue("contactPersonName", user?.name?.en ?? "", {
-      shouldValidate: true,
-    });
-    if (user?.email) setValue("contactPersonEmail", user.email);
-    setValue("contactPersonPhone", user?.phoneNumber ?? "", {
-      shouldValidate: true,
-    });
+  const togglePoaSameAsContact = (checked: boolean) => {
+    setPoaSameAsContact(checked);
+    if (!checked) {
+      setValue("poaName", "");
+      setValue("poaEmail", "");
+      setValue("poaPhone", "");
+    }
  };

  // --- Contact-phone SMS OTP verification -----------------------------------
@@ -612,7 +421,7 @@ export default function CompanyProfileForm({
      setOtpSent(false);
      // Persist the verified phone so the step resumes as "done" after a refresh
      // (best-effort — the OTP itself already succeeded server-side).
-      onSaveStep?.({ contactVerifiedPhone: contactPhoneE164 }).catch(() => {});
+      onSaveStep?.({ contactVerifiedPhone: contactPhoneE164 }).catch(() => { });
    } catch (err) {
      setOtpError(extractApiError(err).message);
    } finally {
@@ -675,6 +484,7 @@ export default function CompanyProfileForm({
  );

  const nextStep = async () => {
+    userNavigatedRef.current = true;
    if (step === "additional") {
      if (!licenseComplete) {
        setSaveError(
@@ -699,16 +509,34 @@ export default function CompanyProfileForm({
      setStep(stepOrder[currentIdx + 1]);
      return;
    }
-    // The documents step has nothing to persist; field steps validate + save
-    // before advancing.
-    if (step !== "documents") {
-      const ok = await saveCurrentStep();
-      if (!ok) return;
+    // The documents step auto-uploads whatever the user selected as they
+    // continue (partial uploads are allowed — required-doc completeness is
+    // re-checked on resume). A failed upload holds them on the step.
+    if (step === "documents") {
+      if (onUploadDocuments) {
+        setSaving(true);
+        try {
+          const res = await onUploadDocuments();
+          if (!res.ok) {
+            setSaveError(res.error);
+            return;
+          }
+        } finally {
+          setSaving(false);
+        }
+      }
+      setSaveError(null);
+      setStep(stepOrder[currentIdx + 1]);
+      return;
    }
+    // Field steps validate + save before advancing.
+    const ok = await saveCurrentStep();
+    if (!ok) return;
    setStep(stepOrder[currentIdx + 1]);
  };

  const prevStep = () => {
+    userNavigatedRef.current = true;
    setSaveError(null);
    if (currentIdx === 0) onBack();
    else setStep(stepOrder[currentIdx - 1]);
@@ -864,11 +692,6 @@ export default function CompanyProfileForm({
                  error={errors.houseNo?.message}
                  {...register("houseNo")}
                />
-                <ControlledPhoneField
-                  control={control}
-                  name="etradePhone"
-                  label="Phone"
-                />
              </SimpleGrid>
            </>
          )}
@@ -917,33 +740,17 @@ export default function CompanyProfileForm({

          {step === "contact" && (
            <>
-              <Group justify="space-between" align="center" wrap="nowrap">
-                <Text fw={600} size="sm" c="edr-text">
-                  Contact Person
-                </Text>
-                <Group gap="xs" wrap="nowrap" style={{ flexShrink: 0 }}>
-                  <Button
-                    variant="light"
-                    color="edr-green"
-                    size="xs"
-                    leftSection={<UserCheck size={14} />}
-                    onClick={useLoggedInUserAsContact}
-                  >
-                    Use me
-                  </Button>
-                  {watch("generalManagerName") && (
-                    <Button
-                      variant="light"
-                      color="edr-green"
-                      size="xs"
-                      leftSection={<UserCheck size={14} />}
-                      onClick={useGmAsContact}
-                    >
-                      Use General Manager
-                    </Button>
-                  )}
-                </Group>
-              </Group>
+              <Text fw={600} size="sm" c="edr-text">
+                Contact Person
+              </Text>
+              {watch("generalManagerName") && (
+                <LinkCheckboxCard
+                  checked={contactSameAsGm}
+                  onToggle={toggleContactSameAsGm}
+                  title="Same as General Manager"
+                  description="Reuse the general manager's name, email and phone. Uncheck to enter different details."
+                />
+              )}
              <SimpleGrid cols={2} spacing="md">
                <TextInput
                  label="Name"
@@ -978,12 +785,6 @@ export default function CompanyProfileForm({

          {step === "verify" && (
            <Stack gap="md">
-              <Group gap="xs" align="center">
-                <ShieldCheck size={18} className="text-[var(--mantine-color-edr-green-7)]" />
-                <Text fw={600} size="sm" c="edr-text">
-                  Verify the contact person
-                </Text>
-              </Group>
              <Text size="sm" c="edr-muted">
                We'll text a one-time code to the contact person's phone to
                confirm it's reachable. This is required before you continue.
@@ -1009,7 +810,10 @@ export default function CompanyProfileForm({
              ) : (
                <Stack gap="sm">
                  <Group gap="xs" align="center">
-                    <Smartphone size={16} className="text-[var(--mantine-color-edr-muted)]" />
+                    <Smartphone
+                      size={16}
+                      className="text-[var(--mantine-color-edr-muted)]"
+                    />
                    <Text size="sm" c="edr-text">
                      {maskPhone(contactPhoneE164)}
                    </Text>
@@ -1028,15 +832,17 @@ export default function CompanyProfileForm({
                    </Button>
                  ) : (
                    <Stack gap="sm">
-                      <Text size="sm" c="edr-muted">
-                        Enter the 6-digit code we sent to{" "}
-                        {maskPhone(contactPhoneE164)}.
-                      </Text>
                      <PinInput
                        length={6}
                        type="number"
                        oneTimeCode
                        value={otpCode}
+                        placeholder="0"
+                        styles={{
+                          input: {
+                            textAlign: "center",
+                          },
+                        }}
                        onChange={setOtpCode}
                      />
                      <Group gap="sm">
@@ -1056,7 +862,9 @@ export default function CompanyProfileForm({
                          disabled={resendIn > 0 || sendingOtp}
                          leftSection={<RotateCw size={14} />}
                        >
-                          {resendIn > 0 ? `Resend in ${resendIn}s` : "Resend code"}
+                          {resendIn > 0
+                            ? `Resend in ${resendIn}s`
+                            : "Resend code"}
                        </Button>
                      </Group>
                    </Stack>
@@ -1078,24 +886,18 @@ export default function CompanyProfileForm({

          {step === "poa" && (
            <>
-              <Group justify="space-between" align="center" wrap="nowrap">
-                <Text size="sm" c="edr-muted">
-                  Power of Attorney details are optional. Fill them in if you
-                  have them, or skip to continue.
-                </Text>
-                {watch("contactPersonName") && (
-                  <Button
-                    variant="light"
-                    color="edr-green"
-                    size="xs"
-                    leftSection={<UserCheck size={14} />}
-                    onClick={useContactAsPoa}
-                    style={{ flexShrink: 0 }}
-                  >
-                    Use contact person
-                  </Button>
-                )}
-              </Group>
+              <Text size="sm" c="edr-muted">
+                Power of Attorney details are optional. Fill them in if you have
+                them, or skip to continue.
+              </Text>
+              {watch("contactPersonName") && (
+                <LinkCheckboxCard
+                  checked={poaSameAsContact}
+                  onToggle={togglePoaSameAsContact}
+                  title="Same as contact person"
+                  description="Reuse the contact person's name, email and phone. Uncheck to enter different details."
+                />
+              )}
              <TextInput
                label="PoA Name"
                placeholder="Authorized Representative Name"
@@ -1147,6 +949,8 @@ export default function CompanyProfileForm({
                <SmartFileInput
                  file={uploadSetting}
                  value={documentFiles}
+                  uploadedKeys={uploadedDocumentKeys}
+                  containerClassName="lg:grid grid-cols-2 items-stretch"
                  onChange={setDocumentFiles}
                />
              )}
@@ -1210,19 +1014,12 @@ export default function CompanyProfileForm({
              }
              loading={isPending || saving}
              rightSection={
-                !isPending &&
-                  !saving &&
-                  step !== "additional" &&
-                  step !== "documents" ? (
+                !isPending && !saving && step !== "additional" ? (
                  <ArrowRight size={16} />
                ) : undefined
              }
            >
-              {step === "documents" || step === "verify"
-                ? "Continue"
-                : step === "additional"
-                  ? "Submit for review"
-                  : "Save & Continue"}
+              {step === "additional" ? "Submit for review" : "Continue"}
            </Button>
          </Group>
        </Stack>
--- a/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/LinkCheckboxCard.tsx
+++ b/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/LinkCheckboxCard.tsx
@@ -0,0 +1,51 @@
+import { Group, Text, UnstyledButton } from "@mantine/core";
+import { Check } from "lucide-react";
+
+/**
+ * A card styled as a large checkbox: clicking it toggles `checked`, which the
+ * caller uses to prefill + lock a set of fields (and clear them on uncheck).
+ */
+export function LinkCheckboxCard({
+  checked,
+  onToggle,
+  title,
+  description,
+}: {
+  checked: boolean;
+  onToggle: (checked: boolean) => void;
+  title: string;
+  description: string;
+}) {
+  return (
+    <UnstyledButton
+      onClick={() => onToggle(!checked)}
+      role="checkbox"
+      aria-checked={checked}
+      className={`w-full rounded-lg border! p-3! text-left transition-colors! ${checked
+          ? "border-[var(--mantine-color-edr-green-6)]! bg-[var(--mantine-color-edr-green-0)]!"
+          : "border-[var(--mantine-color-gray-3)]! hover:border-[var(--mantine-color-edr-green-4)]! hover:bg-[var(--mantine-color-edr-green-0)]!"
+        }`}
+    >
+      <Group gap="sm" wrap="nowrap" align="flex-start">
+        <div
+          className={`mt-px flex h-5 w-5 shrink-0 items-center justify-center rounded-[6px] border transition-colors ${checked
+              ? "border-[var(--mantine-color-edr-green-6)] bg-[var(--mantine-color-edr-green-6)] text-white"
+              : "border-[var(--mantine-color-gray-4)] bg-white"
+            }`}
+        >
+          {checked && <Check size={14} strokeWidth={3} />}
+        </div>
+        <div>
+          <Text fw={600} size="sm" c="edr-text" lh={1.25}>
+            {title}
+          </Text>
+          <Text size="xs" c="dimmed" mt={2}>
+            {description}
+          </Text>
+        </div>
+      </Group>
+    </UnstyledButton>
+  );
+}
+
+export default LinkCheckboxCard;
--- a/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/ReadOnlyField.tsx
+++ b/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/ReadOnlyField.tsx
@@ -0,0 +1,23 @@
+import { Stack, Text } from "@mantine/core";
+
+/** A single read-only registration value rendered as a label/value pair. */
+export function ReadOnlyField({
+  label,
+  value,
+}: {
+  label: string;
+  value?: string;
+}) {
+  return (
+    <Stack gap={2}>
+      <Text size="xs" c="dimmed">
+        {label}
+      </Text>
+      <Text size="sm" c="edr-text" fw={500}>
+        {value && value.trim() ? value : "—"}
+      </Text>
+    </Stack>
+  );
+}
+
+export default ReadOnlyField;
--- a/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/helpers.ts
+++ b/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/helpers.ts
@@ -0,0 +1,142 @@
+import type { AuthUser } from "@/types/auth";
+import type { CreateCompanyPayload } from "@/services/companies.service";
+import type { ProfileResponse, UpdateProfilePayload } from "@/types/profile";
+
+import type { CompanyStep, FormData } from "./schema";
+
+/** Last 9 digits (Ethiopian national significant number) for tolerant compare. */
+export const phoneDigits = (p?: string | null) =>
+  (p ?? "").replace(/\D/g, "").slice(-9);
+
+export const samePhone = (a?: string | null, b?: string | null) => {
+  const da = phoneDigits(a);
+  return da.length === 9 && da === phoneDigits(b);
+};
+
+/** Mask all but the first 7 chars of an E.164 phone for display. */
+export const maskPhone = (p: string) =>
+  p.length > 4 ? `${p.slice(0, 7)}${"*".repeat(Math.max(0, p.length - 7))}` : p;
+
+export function buildPayload(
+  data: FormData,
+  _user: AuthUser,
+): CreateCompanyPayload {
+  return {
+    companyName: data.companyName,
+    companyEmail: data.companyEmail,
+    companyPhone: data.companyPhone,
+    companyLocation: data.companyLocation,
+    companyAddress: data.companyAddress,
+    tin: data.tinNumber,
+    vatNumber: data.vatNumber,
+    fanNumber: data.fanNumber,
+    attributes: {
+      contactPersonName: data.contactPersonName,
+      contactPersonPosition: data.contactPersonPosition || undefined,
+      contactPersonEmail: data.contactPersonEmail || undefined,
+      contactPersonPhone: data.contactPersonPhone,
+      generalManagerName: data.generalManagerName,
+      generalManagerEmail: data.generalManagerEmail,
+      generalManagerPhone: data.generalManagerPhone,
+      poaName: data.poaName || undefined,
+      poaPhone: data.poaPhone || undefined,
+      poaAddress: data.poaAddress || undefined,
+      poaEmail: data.poaEmail || undefined,
+      poaLocation: data.poaLocation || undefined,
+    },
+  };
+}
+
+/** Map one wizard step's form values to the profile-update payload it saves. */
+export function stepPayload(
+  step: CompanyStep,
+  d: FormData,
+): Partial<UpdateProfilePayload> {
+  switch (step) {
+    case "company":
+      return {
+        companyName: d.companyName,
+        companyEmail: d.companyEmail,
+        companyPhone: d.companyPhone,
+        companyLocation: d.companyLocation,
+        companyAddress: d.companyAddress,
+        tin: d.tinNumber,
+        vatNumber: d.vatNumber,
+        fanNumber: d.fanNumber,
+        licenceNumber: d.licenceNumber,
+        statusDescription: d.statusDescription,
+        dateRegistered: d.dateRegistered,
+        renewedFrom: d.renewedFrom,
+        renewalDate: d.renewalDate,
+        renewedTo: d.renewedTo,
+        region: d.region,
+        zone: d.zone,
+        woreda: d.woreda,
+        kebele: d.kebele,
+        houseNo: d.houseNo,
+        etradePhone: d.companyPhone,
+      };
+    case "personnel":
+      return {
+        generalManagerName: d.generalManagerName,
+        generalManagerEmail: d.generalManagerEmail,
+        generalManagerPhone: d.generalManagerPhone,
+      };
+    case "contact":
+      return {
+        contactPersonName: d.contactPersonName,
+        contactPersonPosition: d.contactPersonPosition || undefined,
+        contactPersonEmail: d.contactPersonEmail || undefined,
+        contactPersonPhone: d.contactPersonPhone,
+      };
+    case "poa":
+      return {
+        poaName: d.poaName || undefined,
+        poaPhone: d.poaPhone || undefined,
+        poaEmail: d.poaEmail || undefined,
+        poaLocation: d.poaLocation || undefined,
+        poaAddress: d.poaAddress || undefined,
+      };
+    default:
+      return {};
+  }
+}
+
+/** Seed the form from previously-saved profile data. */
+export function toFormValues(p: ProfileResponse): FormData {
+  // The draft placeholder TIN ("D…") shouldn't show as a real value.
+  const tin = p.tinNumber && !p.tinNumber.startsWith("D") ? p.tinNumber : "";
+  return {
+    companyName: p.companyName ?? "",
+    companyEmail: p.companyEmail ?? "",
+    companyPhone: p.companyPhone ?? "",
+    companyLocation: p.companyLocation ?? "",
+    companyAddress: p.companyAddress ?? "",
+    tinNumber: tin,
+    vatNumber: p.vatNumber ?? "",
+    fanNumber: p.fanNumber ?? "",
+    licenceNumber: p.licenceNumber ?? "",
+    statusDescription: p.statusDescription ?? "",
+    dateRegistered: p.dateRegistered ?? "",
+    renewedFrom: p.renewedFrom ?? "",
+    renewalDate: p.renewalDate ?? "",
+    renewedTo: p.renewedTo ?? "",
+    region: p.region ?? "",
+    zone: p.zone ?? "",
+    woreda: p.woreda ?? "",
+    kebele: p.kebele ?? "",
+    houseNo: p.houseNo ?? "",
+    contactPersonName: p.contactPersonName ?? "",
+    contactPersonPosition: p.contactPersonPosition ?? "",
+    contactPersonEmail: p.contactPersonEmail ?? "",
+    contactPersonPhone: p.contactPersonPhone ?? "",
+    generalManagerName: p.generalManagerName ?? "",
+    generalManagerEmail: p.generalManagerEmail ?? "",
+    generalManagerPhone: p.generalManagerPhone ?? "",
+    poaName: p.poaName ?? "",
+    poaPhone: p.poaPhone ?? "",
+    poaAddress: p.poaAddress ?? "",
+    poaEmail: p.poaEmail ?? "",
+    poaLocation: p.poaLocation ?? "",
+  };
+}
--- a/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/schema.ts
+++ b/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/schema.ts
@@ -0,0 +1,110 @@
+import { z } from "zod";
+
+import { isValidPhone } from "@/components/PhoneField";
+
+export type CompanyStep =
+  | "company"
+  | "personnel"
+  | "contact"
+  | "verify"
+  | "poa"
+  | "documents"
+  | "additional";
+
+export const onboardingSchema = z.object({
+  companyName: z.string().min(1, "Company name is required"),
+  companyEmail: z.string().email("Invalid email address"),
+  companyPhone: z
+    .string()
+    .min(1, "Company phone is required")
+    .refine(isValidPhone, "Enter a valid phone number"),
+  companyLocation: z.string().min(1, "Location is required"),
+  // Derived from the eTrade address parts (kebele/woreda/zone/region); no
+  // standalone input — the granular fields live in the registration section.
+  companyAddress: z.string().optional(),
+  tinNumber: z.string().length(10, "TIN must be exactly 10 digits"),
+  vatNumber: z
+    .string()
+    .min(1, "VAT number is required")
+    .length(10, "VAT number must be exactly 10 digits"),
+  fanNumber: z.string().length(16, "FAN must be exactly 16 digits"),
+  licenceNumber: z.string().optional(),
+  statusDescription: z.string().optional(),
+  dateRegistered: z.string().optional(),
+  renewedFrom: z.string().optional(),
+  renewalDate: z.string().optional(),
+  renewedTo: z.string().optional(),
+  // Address fields are user-entered and required (the registration/license
+  // fields above are read-only confirmations pulled from eTrade).
+  region: z.string().min(1, "Region is required"),
+  zone: z.string().min(1, "Zone is required"),
+  woreda: z.string().min(1, "Woreda is required"),
+  kebele: z.string().min(1, "Kebele is required"),
+  houseNo: z.string().min(1, "House number is required"),
+  contactPersonName: z.string().min(1, "Contact person name is required"),
+  contactPersonPosition: z.string().optional(),
+  contactPersonEmail: z
+    .string()
+    .email("Invalid email address")
+    .optional()
+    .or(z.literal("")),
+  contactPersonPhone: z
+    .string()
+    .min(1, "Contact person phone is required")
+    .refine(isValidPhone, "Enter a valid phone number"),
+  generalManagerName: z.string().min(1, "Manager name is required"),
+  generalManagerEmail: z.string().email("Invalid Manager email"),
+  generalManagerPhone: z
+    .string()
+    .min(1, "Manager phone is required")
+    .refine(isValidPhone, "Enter a valid phone number"),
+  poaName: z.string().optional(),
+  poaPhone: z
+    .string()
+    .optional()
+    .refine((v) => !v || isValidPhone(v), "Enter a valid phone number"),
+  poaAddress: z.string().optional(),
+  poaEmail: z.string().optional(),
+  poaLocation: z.string().optional(),
+});
+
+export type FormData = z.infer<typeof onboardingSchema>;
+
+export const stepFields: Record<CompanyStep, (keyof FormData)[]> = {
+  company: [
+    "companyName",
+    "companyEmail",
+    "companyPhone",
+    "companyLocation",
+    "companyAddress",
+    "tinNumber",
+    "vatNumber",
+    "fanNumber",
+    "licenceNumber",
+    "statusDescription",
+    "dateRegistered",
+    "renewedFrom",
+    "renewalDate",
+    "renewedTo",
+    "region",
+    "zone",
+    "woreda",
+    "kebele",
+    "houseNo",
+  ],
+  personnel: [
+    "generalManagerName",
+    "generalManagerEmail",
+    "generalManagerPhone",
+  ],
+  contact: [
+    "contactPersonName",
+    "contactPersonPosition",
+    "contactPersonEmail",
+    "contactPersonPhone",
+  ],
+  verify: [],
+  poa: [],
+  documents: [],
+  additional: [],
+};