fix

apps/edr-freight-web/backoffice/src/App.tsx

@@ -15,13 +15,22 @@ import {
   Send,
   Settings,
   ShieldCheck,
+  Ship,
   SlidersHorizontal,
   Train,
   Truck,
   Users,
   Wallet,
 } from "lucide-react";
-import { Navigate, Outlet, Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import {
+  Navigate,
+  Outlet,
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "react-router-dom";
 
 import { FreightDashboardLayout, type SidebarItem, type SidebarSection } from "@/components/layout";
 import { useAuth } from "./auth/useAuth";
@@ -36,8 +45,12 @@ import ContractRequestDetailPage from "./pages/contracts/ContractRequestDetailPa
 import ContractViewPage from "./pages/contracts/ContractViewPage";
 import ContractClearanceListPage from "./pages/contracts/ContractClearanceListPage";
 import ContractClearanceDetailPage from "./pages/contracts/ContractClearanceDetailPage";
+import GlDjiboutiClearanceListPage from "./pages/contracts/GlDjiboutiClearanceListPage";
+import GlClearanceDetailPage from "./pages/contracts/GlClearanceDetailPage";
+import ShipmentRequestsPage from "./pages/contracts/ShipmentRequestsPage";
+import ShipmentRequestDetailPage from "./pages/contracts/ShipmentRequestDetailPage";
 import GlCreateBookingForm from "./components/contracts/GlCreateBookingForm";
-import BookingMilestonesPage from "./pages/contracts/BookingMilestonesPage";
+import DocumentClearanceDetailPage from "./pages/bookings/DocumentClearanceDetailPage";
 import CustomerDetailPage from "./pages/customers/CustomerDetailPage";
 import CustomersPage from "./pages/customers/CustomersPage";
 import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
@@ -74,6 +87,7 @@ import BatchScheduleDetailPage from "./pages/trainScheduling/BatchScheduleDetail
 import TrainScheduleV2DetailPage from "./pages/trainScheduling/TrainScheduleV2DetailPage";
 import TrainScheduleTrackPage from "./pages/trainScheduling/TrainScheduleTrackPage";
 import TrainSchedulingGlobalRulesPage from "./pages/trainScheduling/TrainSchedulingGlobalRulesPage";
+import ContractValidityPeriodsPage from "./pages/configuration/ContractValidityPeriodsPage";
 import FirstMilePage from "./pages/operations/FirstMilePage";
 import LastMilePage from "./pages/operations/LastMilePage";
 import TrainDetailPage from "./pages/trains/TrainDetailPage";
@@ -140,7 +154,22 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         label: "Document Clearance",
         href: "/dashboard/contracts/clearance",
         icon: <ShieldCheck />,
-        permission: FREIGHT_PERMS.contracts.clearanceReview,
+        permission: [
+          FREIGHT_PERMS.contracts.clearanceReview,
+          FREIGHT_PERMS.contracts.clearanceEtActions,
+        ],
+      },
+      // {
+      //   label: "Shipment Requests",
+      //   href: "/dashboard/shipment-requests",
+      //   icon: <Send />,
+      //   permission: FREIGHT_PERMS.contracts.createBooking,
+      // },
+      {
+        label: "GL Djibouti Clearance",
+        href: "/dashboard/gl-djibouti/clearance",
+        icon: <Ship />,
+        permission: FREIGHT_PERMS.contracts.clearanceDjActions,
       },
       {
         label: "Train Schedules",
@@ -386,6 +415,10 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <Boxes />,
         children: [
           ...getCategorySidebarChildren("configuration"),
+          {
+            label: "Contract validity",
+            href: "/dashboard/configuration/contract-validity-periods",
+          },
           // {
           //   label: "Train scheduling rules",
           //   href: "/dashboard/configuration/train-scheduling-rules",
@@ -502,7 +535,11 @@ const App = () => {
         />
         <Route
           path="clearance/:id"
-          element={<Navigate to="/dashboard/contracts/clearance" replace />}
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.bookings.clearanceView}>
+              <DocumentClearanceDetailPage />
+            </RequirePermission>
+          }
         />
 
         {/* Contracts (Path A/B) */}
@@ -530,11 +567,40 @@ const App = () => {
             </RequirePermission>
           }
         />
+        <Route
+          path="bookings/:bookingId/clearance"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.bookings.clearanceView}>
+              <DocumentClearanceDetailPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="shipment-requests"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.contracts.createBooking}>
+              <ShipmentRequestsPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="shipment-requests/:id"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.contracts.createBooking}>
+              <ShipmentRequestDetailPage />
+            </RequirePermission>
+          }
+        />
         {/* GL (Path B) contract clearance review hub */}
         <Route
           path="contracts/clearance"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.contracts.clearanceReview}>
+            <RequirePermission
+              permission={[
+                FREIGHT_PERMS.contracts.clearanceReview,
+                FREIGHT_PERMS.contracts.clearanceEtActions,
+              ]}
+            >
               <ContractClearanceListPage />
             </RequirePermission>
           }
@@ -542,11 +608,34 @@ const App = () => {
         <Route
           path="contracts/clearance/:id"
           element={
-            <RequirePermission permission={FREIGHT_PERMS.contracts.clearanceReview}>
+            <RequirePermission
+              permission={[
+                FREIGHT_PERMS.contracts.clearanceReview,
+                FREIGHT_PERMS.contracts.clearanceEtActions,
+              ]}
+            >
               <ContractClearanceDetailPage />
             </RequirePermission>
           }
         />
+        <Route path="gl-ethiopia/clearance" element={<LegacyGlEthiopiaClearanceRedirect />} />
+        <Route path="gl-ethiopia/clearance/:id" element={<LegacyGlEthiopiaClearanceRedirect />} />
+        <Route
+          path="gl-djibouti/clearance"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.contracts.clearanceDjActions}>
+              <GlDjiboutiClearanceListPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="gl-djibouti/clearance/:id"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.contracts.clearanceDjActions}>
+              <GlClearanceDetailPage />
+            </RequirePermission>
+          }
+        />
         {/* Path A ops queue out of scope for now → fold into the GL hub. */}
         <Route
           path="contracts/ops-clearance"
@@ -562,11 +651,7 @@ const App = () => {
         />
         <Route
           path="bookings/:id/milestones"
-          element={
-            <RequirePermission permission={FREIGHT_PERMS.contracts.clearanceReview}>
-              <BookingMilestonesPage />
-            </RequirePermission>
-          }
+          element={<BookingMilestonesRedirect />}
         />
         <Route path="warehouses" element={<WarehouseListPage />} />
         <Route path="warehouses/:id" element={<WarehouseDetailPage />} />
@@ -902,6 +987,14 @@ const App = () => {
             </RequirePermission>
           }
         />
+        <Route
+          path="configuration/contract-validity-periods"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.admin}>
+              <ContractValidityPeriodsPage />
+            </RequirePermission>
+          }
+        />
         <Route path="configuration/cargo-types" element={<CargoTypesPage />} />
         <Route path="configuration/cargo-types/:id" element={<CargoTypesPage />} />
         <Route path="configuration/:resource" element={<RuleEngineResourcePage />} />
@@ -930,4 +1023,21 @@ const App = () => {
   );
 };
 
+/** Redirect removed milestones page to document clearance. */
+function BookingMilestonesRedirect() {
+  const { id } = useParams();
+  return (
+    <Navigate to={`/dashboard/bookings/${id}/clearance`} replace />
+  );
+}
+
+/** Redirect legacy GL Ethiopia clearance URLs to the unified document clearance hub. */
+function LegacyGlEthiopiaClearanceRedirect() {
+  const { id } = useParams();
+  if (id) {
+    return <Navigate to={`/dashboard/contracts/clearance/${id}`} replace />;
+  }
+  return <Navigate to="/dashboard/contracts/clearance" replace />;
+}
+
 export default App;

apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsMenu.tsx

@@ -65,7 +65,6 @@ export function BookingActionsMenu({
   };
 
   const hasMenu = listRowHasActions(row, user);
-  const primary = actions.find((a) => a.primary) ?? actions[0];
 
   if (!hasMenu && variant === "table") {
     return (
@@ -117,19 +116,6 @@ export function BookingActionsMenu({
       onClick={(e) => e.stopPropagation()}
       onKeyDown={(e) => e.stopPropagation()}
     >
-      {variant === "table" && primary && (
-        <Button
-          size="compact-sm"
-          color="edr-green"
-          visibleFrom="lg"
-          leftSection={<primary.icon size={14} />}
-          disabled={mutations.isPending}
-          onClick={() => handleAction(primary)}
-        >
-          {primary.shortLabel}
-        </Button>
-      )}
-
       <Menu position="bottom-end" width={220} withinPortal>
         <Menu.Target>
           <ActionIcon

apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx

@@ -41,6 +41,12 @@ export interface ClearanceReviewSectionProps {
   onChanged?: () => void;
   /** Hide the inline progress summary (e.g. when the parent renders its own). */
   hideSummary?: boolean;
+  /** Lock approve actions after document review phase completes. */
+  approvalsLocked?: boolean;
+  /** Block new queries after pre-clearance finalization. */
+  queriesLocked?: boolean;
+  /** Read-only audit view — no approve/query actions. */
+  readOnly?: boolean;
 }
 
 const STATUS_META: Record<
@@ -64,6 +70,9 @@ export function ClearanceReviewSection({
   bookingId,
   onChanged,
   hideSummary,
+  approvalsLocked = false,
+  queriesLocked = false,
+  readOnly = false,
 }: ClearanceReviewSectionProps) {
   const qc = useQueryClient();
   const [queryNotes, setQueryNotes] = useState<Record<string, string>>({});
@@ -147,6 +156,11 @@ export function ClearanceReviewSection({
     return { total, approved, queried, pending, pct };
   }, [customerDocs]);
 
+  const hasDocsAwaitingApproval = customerDocs.some(
+    (d) => d.file && d.reviewStatus !== "APPROVED",
+  );
+  const effectiveApprovalsLocked = approvalsLocked && !hasDocsAwaitingApproval;
+
   if (isLoading || !clearance) {
     return (
       <Group justify="center" py="xl" gap={10}>
@@ -194,6 +208,9 @@ export function ClearanceReviewSection({
               <DocReviewCard
                 key={`${doc.settingCode}:${doc.fileKey}`}
                 doc={doc}
+                approvalsLocked={effectiveApprovalsLocked}
+                queriesLocked={queriesLocked}
+                readOnly={readOnly}
                 note={queryNotes[doc.fileKey] ?? ""}
                 queryOpen={openQuery[doc.fileKey] ?? false}
                 onToggleQuery={(open) =>
@@ -397,6 +414,9 @@ function StatPill({
 
 function DocReviewCard({
   doc,
+  approvalsLocked,
+  queriesLocked,
+  readOnly,
   note,
   queryOpen,
   onToggleQuery,
@@ -407,6 +427,9 @@ function DocReviewCard({
   busy,
 }: {
   doc: Freight.ClearanceDocument;
+  approvalsLocked: boolean;
+  queriesLocked: boolean;
+  readOnly: boolean;
   note: string;
   queryOpen: boolean;
   onToggleQuery: (open: boolean) => void;
@@ -419,6 +442,7 @@ function DocReviewCard({
   const status = doc.reviewStatus ?? "PENDING";
   const meta = STATUS_META[status];
   const hasFile = !!doc.file;
+  const isApproved = status === "APPROVED";
 
   return (
     <Paper
@@ -499,31 +523,35 @@ function DocReviewCard({
         </Alert>
       )}
 
-      {hasFile && (
+      {hasFile && !readOnly && (
         <Box mt="sm">
           {!queryOpen ? (
             <Group justify="flex-end" gap={8}>
-              <Button
-                size="compact-sm"
-                variant="light"
-                color="red"
-                radius="md"
-                leftSection={<MessageSquareWarning size={14} />}
-                disabled={busy}
-                onClick={() => onToggleQuery(true)}
-              >
-                Open query
-              </Button>
-              <Button
-                size="compact-sm"
-                color="edr-green"
-                radius="md"
-                leftSection={<CheckCircle2 size={14} />}
-                disabled={busy}
-                onClick={onApprove}
-              >
-                Approve
-              </Button>
+              {!queriesLocked && (
+                <Button
+                  size="compact-sm"
+                  variant="light"
+                  color="red"
+                  radius="md"
+                  leftSection={<MessageSquareWarning size={14} />}
+                  disabled={busy}
+                  onClick={() => onToggleQuery(true)}
+                >
+                  Open query
+                </Button>
+              )}
+              {!isApproved && !approvalsLocked && (
+                <Button
+                  size="compact-sm"
+                  color="edr-green"
+                  radius="md"
+                  leftSection={<CheckCircle2 size={14} />}
+                  disabled={busy}
+                  onClick={onApprove}
+                >
+                  Approve
+                </Button>
+              )}
             </Group>
           ) : (
             <Box

apps/edr-freight-web/backoffice/src/components/contracts/ClearanceOpsTabs.tsx

@@ -0,0 +1,128 @@
+import type { ReactNode } from "react";
+import { Badge, Stack, Tabs, Text } from "@mantine/core";
+import { AlertTriangle, FileText, ShieldAlert } from "lucide-react";
+import type { Freight } from "@edr/types";
+
+import { SectionCard } from "@/components/bookings/detail/SectionCard";
+import { AssignRiskCard } from "@/components/contracts/gl-actions/AssignRiskCard";
+import { IncidentReportCard } from "@/components/contracts/gl-actions/IncidentReportCard";
+import { ClearanceUploadedDocumentsPanel } from "@/components/contracts/ClearanceUploadedDocumentsPanel";
+
+export interface ClearanceOpsTabsProps {
+  bookingId: string | undefined;
+  milestones?: Freight.IClearanceMilestone[];
+  /** When false, only the clearance tab content is rendered (no tab bar). */
+  showOpsTabs?: boolean;
+  clearanceTab: ReactNode;
+  /** Phased customs workflow files — enables the Uploaded documents tab. */
+  workflowFiles?: Freight.ClearanceWorkflowFile[];
+  showWorkflowFilesTab?: boolean;
+  tradeDirection?: string;
+  onViewFile?: (file: { name: string; url: string }) => void;
+  onDownloadFile?: (file: { id: string; name: string }) => void;
+}
+
+function findMilestone(
+  milestones: Freight.IClearanceMilestone[] | undefined,
+  code: string,
+): Freight.IClearanceMilestone | undefined {
+  return milestones?.find((m) => m.milestoneCode === code);
+}
+
+/**
+ * Document Clearance detail layout: primary clearance workflow plus optional
+ * uploaded documents, post-booking risk assignment, and incident reporting tabs.
+ */
+export function ClearanceOpsTabs({
+  bookingId,
+  milestones,
+  showOpsTabs = true,
+  clearanceTab,
+  workflowFiles = [],
+  showWorkflowFilesTab = false,
+  tradeDirection = "IMPORT",
+  onViewFile,
+  onDownloadFile,
+}: ClearanceOpsTabsProps) {
+  const riskMs = findMilestone(milestones, "RISK_ASSIGNED");
+  const hasOps = Boolean(bookingId);
+  const isExport = tradeDirection === "EXPORT";
+  const uploadedDocCount = workflowFiles.filter((f) => {
+    if (!f.file) return false;
+    if (isExport) return f.category !== "duty";
+    return true;
+  }).length;
+  const showDocuments = showWorkflowFilesTab && Boolean(onViewFile);
+  const hasTabs = (showOpsTabs && hasOps) || showDocuments;
+
+  if (!hasTabs) {
+    return <>{clearanceTab}</>;
+  }
+
+  return (
+    <Tabs defaultValue="clearance" keepMounted={false}>
+      <Tabs.List mb="md">
+        <Tabs.Tab value="clearance">Clearance</Tabs.Tab>
+        {showDocuments ? (
+          <Tabs.Tab
+            value="documents"
+            leftSection={<FileText size={14} />}
+            rightSection={
+              uploadedDocCount > 0 ? (
+                <Badge size="xs" variant="light" color="edr-green" circle>
+                  {uploadedDocCount}
+                </Badge>
+              ) : undefined
+            }
+          >
+            Uploaded documents
+          </Tabs.Tab>
+        ) : null}
+        {showOpsTabs && riskMs ? (
+          <Tabs.Tab value="risk" leftSection={<ShieldAlert size={14} />}>
+            Risk assignment
+          </Tabs.Tab>
+        ) : null}
+        {showOpsTabs && bookingId ? (
+          <Tabs.Tab value="incidents" leftSection={<AlertTriangle size={14} />}>
+            Incidents
+          </Tabs.Tab>
+        ) : null}
+      </Tabs.List>
+
+      <Tabs.Panel value="clearance">{clearanceTab}</Tabs.Panel>
+
+      {showDocuments ? (
+        <Tabs.Panel value="documents">
+          <ClearanceUploadedDocumentsPanel
+            files={workflowFiles}
+            tradeDirection={tradeDirection}
+            onView={onViewFile!}
+            onDownload={onDownloadFile}
+          />
+        </Tabs.Panel>
+      ) : null}
+
+      {showOpsTabs && riskMs && bookingId ? (
+        <Tabs.Panel value="risk">
+          <SectionCard icon={ShieldAlert} title="Customs risk" accent="edr-green">
+            <AssignRiskCard bookingId={bookingId} milestone={riskMs} />
+          </SectionCard>
+        </Tabs.Panel>
+      ) : null}
+
+      {showOpsTabs && bookingId ? (
+        <Tabs.Panel value="incidents">
+          <SectionCard icon={AlertTriangle} title="Incident reports" accent="edr-green">
+            <Stack gap="sm">
+              <Text size="sm" c="dimmed">
+                Log container or seal issues discovered during clearance handling.
+              </Text>
+              <IncidentReportCard bookingId={bookingId} />
+            </Stack>
+          </SectionCard>
+        </Tabs.Panel>
+      ) : null}
+    </Tabs>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/ClearancePhaseStepper.tsx

@@ -0,0 +1,112 @@
+import { Check } from "lucide-react";
+import { Box, Group, Stack, Text } from "@mantine/core";
+import type { Freight } from "@edr/types";
+
+const BRAND_GREEN = "var(--freight-brand, #0A6F4D)";
+
+const IMPORT_PHASES = [
+  "CUSTOMER_INTAKE",
+  "GL_ET_REVIEW",
+  "GL_ET_OUTPUT",
+  "CUSTOMER_DUTY",
+  "GL_ET_POST_CLEARANCE",
+  "GL_DJ_COLLECTION",
+] as const;
+
+const PHASE_LABELS: Record<string, string> = {
+  CUSTOMER_INTAKE: "Customer docs",
+  GL_ET_REVIEW: "GL ET review",
+  GL_DJ_COLLECTION: "GL Djibouti DO",
+  GL_ET_OUTPUT: "Declaration",
+  CUSTOMER_DUTY: "Duty / customer pays",
+  GL_ET_POST_CLEARANCE: "Transit & finalize",
+  GL_DJ_LOADING: "Loading",
+  POST_TRANSIT: "Transit",
+};
+
+const EXPORT_PHASES = [
+  "CUSTOMER_INTAKE",
+  "GL_ET_REVIEW",
+  "GL_DJ_COLLECTION",
+  "GL_ET_OUTPUT",
+  "GL_ET_POST_CLEARANCE",
+] as const;
+
+function phaseIndex(phases: readonly string[], current?: string | null): number {
+  if (!current) return 0;
+  const idx = phases.indexOf(current);
+  return idx >= 0 ? idx : 0;
+}
+
+export function ClearancePhaseStepper({
+  clearance,
+  tradeDirection,
+  compact = false,
+}: {
+  clearance?: Freight.ContractClearanceView | Freight.ClearanceView | null;
+  tradeDirection?: string;
+  compact?: boolean;
+}) {
+  const phases = tradeDirection === "EXPORT" ? EXPORT_PHASES : IMPORT_PHASES;
+  const current = clearance?.phase ?? phases[0];
+  const activeIdx = phaseIndex(phases, current);
+
+  return (
+    <Group gap={0} wrap="nowrap" align="flex-start" style={{ overflowX: "auto" }}>
+      {phases.map((phase, index) => {
+        const isComplete = index < activeIdx;
+        const isActive = index === activeIdx;
+        const isLast = index === phases.length - 1;
+
+        return (
+          <Box key={phase} style={{ flex: isLast ? "0 0 auto" : 1, minWidth: compact ? 72 : 88 }}>
+            <Group gap={0} wrap="nowrap" align="center">
+              <Stack gap={4} align="center" style={{ flexShrink: 0 }}>
+                <Box
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: compact ? 28 : 34,
+                    height: compact ? 28 : 34,
+                    borderRadius: "50%",
+                    background: isComplete ? BRAND_GREEN : isActive ? "white" : "var(--mantine-color-gray-1)",
+                    border: isActive
+                      ? `2px solid ${BRAND_GREEN}`
+                      : isComplete
+                        ? "2px solid transparent"
+                        : "2px solid var(--mantine-color-gray-3)",
+                    color: isComplete ? "white" : isActive ? BRAND_GREEN : "var(--mantine-color-gray-5)",
+                  }}
+                >
+                  {isComplete ? <Check size={compact ? 14 : 16} strokeWidth={3} /> : null}
+                </Box>
+                <Text
+                  size={compact ? "10px" : "xs"}
+                  fw={isActive ? 600 : 500}
+                  c={isActive ? "edr-green.7" : isComplete ? "dark" : "dimmed"}
+                  ta="center"
+                  style={{ whiteSpace: "nowrap" }}
+                >
+                  {PHASE_LABELS[phase] ?? phase}
+                </Text>
+              </Stack>
+              {!isLast && (
+                <Box
+                  style={{
+                    flex: 1,
+                    height: 2,
+                    marginInline: 6,
+                    marginBottom: compact ? 16 : 20,
+                    borderRadius: 2,
+                    background: isComplete ? BRAND_GREEN : "var(--mantine-color-gray-2)",
+                  }}
+                />
+              )}
+            </Group>
+          </Box>
+        );
+      })}
+    </Group>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/ClearanceUploadedDocumentsPanel.tsx

@@ -0,0 +1,205 @@
+import { useMemo } from "react";
+import { Badge, Box, Stack, Tabs, Text, ThemeIcon } from "@mantine/core";
+import { FileText, Receipt, Ship, Truck } from "lucide-react";
+import type { Freight } from "@edr/types";
+
+import { SectionCard } from "@/components/bookings/detail/SectionCard";
+import { PhasedUploadedFileRow } from "@/components/contracts/PhasedUploadedFileRow";
+
+type TabValue = Freight.ClearanceWorkflowFileCategory;
+
+type TabConfig = {
+  value: TabValue;
+  label: string;
+  icon: typeof FileText;
+  emptyHint: string;
+};
+
+function tabConfigForTradeDirection(tradeDirection: string): TabConfig[] {
+  if (tradeDirection === "EXPORT") {
+    return [
+      {
+        value: "declaration",
+        label: "Declaration",
+        icon: FileText,
+        emptyHint: "No declaration uploaded yet.",
+      },
+      {
+        value: "djibouti",
+        label: "Release order",
+        icon: Ship,
+        emptyHint: "No release order uploaded yet.",
+      },
+      {
+        value: "transit",
+        label: "Transit Permit",
+        icon: Truck,
+        emptyHint: "No transit permit uploaded yet.",
+      },
+    ];
+  }
+
+  return [
+    {
+      value: "declaration",
+      label: "Declaration",
+      icon: FileText,
+      emptyHint: "No declaration uploaded yet.",
+    },
+    {
+      value: "duty",
+      label: "Duty notice",
+      icon: Receipt,
+      emptyHint: "No duty notice or payment slip uploaded yet.",
+    },
+    {
+      value: "transit",
+      label: "Transit permit",
+      icon: Truck,
+      emptyHint: "No transit permit uploaded yet.",
+    },
+  ];
+}
+
+function subtitleForTradeDirection(tradeDirection: string): string {
+  return tradeDirection === "EXPORT"
+    ? "Declaration, release order, and transit permit files for this clearance."
+    : "Declaration, duty notice, and transit permit files for this clearance.";
+}
+
+function footerHintForTradeDirection(tradeDirection: string): string {
+  return tradeDirection === "EXPORT"
+    ? "Files appear here once GL uploads the declaration and release order, and after booking when the transit permit is uploaded."
+    : "Files appear here once GL Ethiopia uploads declaration, duty notice, or transit permit documents.";
+}
+
+export interface ClearanceUploadedDocumentsPanelProps {
+  files: Freight.ClearanceWorkflowFile[];
+  tradeDirection?: string;
+  onView: (file: { name: string; url: string }) => void;
+  onDownload?: (file: { id: string; name: string }) => void;
+}
+
+export function ClearanceUploadedDocumentsPanel({
+  files,
+  tradeDirection = "IMPORT",
+  onView,
+  onDownload,
+}: ClearanceUploadedDocumentsPanelProps) {
+  const tabConfig = useMemo(
+    () => tabConfigForTradeDirection(tradeDirection),
+    [tradeDirection],
+  );
+  const isExport = tradeDirection === "EXPORT";
+
+  const visibleFiles = useMemo(
+    () =>
+      isExport ? files.filter((f) => f.category !== "duty") : files,
+    [files, isExport],
+  );
+
+  const uploadedCount = visibleFiles.filter((f) => f.file).length;
+
+  const defaultTab =
+    tabConfig.find((tab) =>
+      visibleFiles.some((f) => f.category === tab.value && f.file),
+    )?.value ?? tabConfig[0]?.value ?? "declaration";
+
+  return (
+    <SectionCard
+      icon={FileText}
+      title="Uploaded customs documents"
+      subtitle={subtitleForTradeDirection(tradeDirection)}
+      accent="edr-green"
+    >
+      <Tabs defaultValue={defaultTab} keepMounted={false}>
+        <Tabs.List mb="md">
+          {tabConfig.map((tab) => {
+            const count = visibleFiles.filter(
+              (f) => f.category === tab.value && f.file,
+            ).length;
+            const Icon = tab.icon;
+            return (
+              <Tabs.Tab
+                key={tab.value}
+                value={tab.value}
+                leftSection={<Icon size={14} />}
+                rightSection={
+                  count > 0 ? (
+                    <Badge size="xs" variant="light" color="edr-green" circle>
+                      {count}
+                    </Badge>
+                  ) : undefined
+                }
+              >
+                {tab.label}
+              </Tabs.Tab>
+            );
+          })}
+        </Tabs.List>
+
+        {tabConfig.map((tab) => {
+          const items = visibleFiles.filter(
+            (f) => f.category === tab.value && f.file,
+          );
+          const Icon = tab.icon;
+
+          return (
+            <Tabs.Panel key={tab.value} value={tab.value}>
+              {items.length > 0 ? (
+                <Stack gap="sm">
+                  {items.map((item) => (
+                    <PhasedUploadedFileRow
+                      key={item.code}
+                      label={item.label}
+                      file={item.file!}
+                      onView={onView}
+                      onDownload={onDownload}
+                    />
+                  ))}
+                </Stack>
+              ) : (
+                <EmptyTabState icon={Icon} hint={tab.emptyHint} />
+              )}
+            </Tabs.Panel>
+          );
+        })}
+      </Tabs>
+
+      {uploadedCount === 0 ? (
+        <Text size="xs" c="dimmed" mt="md">
+          {footerHintForTradeDirection(tradeDirection)}
+        </Text>
+      ) : null}
+    </SectionCard>
+  );
+}
+
+function EmptyTabState({
+  icon: Icon,
+  hint,
+}: {
+  icon: typeof FileText;
+  hint: string;
+}) {
+  return (
+    <Box
+      py={40}
+      style={{
+        borderRadius: 12,
+        border: "1px dashed var(--mantine-color-gray-4)",
+        background: "var(--mantine-color-gray-0)",
+        textAlign: "center",
+      }}
+    >
+      <Stack gap={8} align="center">
+        <ThemeIcon variant="light" color="gray" radius="xl" size={44}>
+          <Icon size={20} />
+        </ThemeIcon>
+        <Text size="sm" c="dimmed" maw={320}>
+          {hint}
+        </Text>
+      </Stack>
+    </Box>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/ClearanceWorkflowFilesPanel.tsx

@@ -0,0 +1,155 @@
+import {
+  Badge,
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
+import { Download, Eye, FileText } from "lucide-react";
+import type { Freight } from "@edr/types";
+import { isViewable } from "@edr/ui-common";
+
+import { SectionCard } from "@/components/bookings/detail/SectionCard";
+import { fileViewUrl } from "@/constants/apiConfig";
+
+const CATEGORY_LABELS: Record<
+  Freight.ClearanceWorkflowFileCategory,
+  string
+> = {
+  declaration: "Declaration",
+  duty: "Duty & taxes",
+  transit: "Transit",
+  djibouti: "Djibouti",
+};
+
+const CATEGORY_ORDER: Freight.ClearanceWorkflowFileCategory[] = [
+  "declaration",
+  "duty",
+  "transit",
+  "djibouti",
+];
+
+const OWNER_LABELS: Record<Freight.ClearanceWorkflowFileOwner, string> = {
+  customer: "Customer",
+  gl_et: "GL Ethiopia",
+  gl_dj: "GL Djibouti",
+};
+
+export interface ClearanceWorkflowFilesPanelProps {
+  files: Freight.ClearanceWorkflowFile[];
+  onView: (file: { name: string; url: string }) => void;
+  onDownload?: (file: { id: string; name: string }) => void;
+  title?: string;
+}
+
+export function ClearanceWorkflowFilesPanel({
+  files,
+  onView,
+  onDownload,
+  title = "Customs workflow documents",
+}: ClearanceWorkflowFilesPanelProps) {
+  if (files.length === 0) return null;
+
+  const grouped = CATEGORY_ORDER.map((category) => ({
+    category,
+    label: CATEGORY_LABELS[category],
+    items: files.filter((f) => f.category === category),
+  })).filter((g) => g.items.length > 0);
+
+  return (
+    <SectionCard icon={FileText} title={title} accent="edr-green">
+      <Stack gap="md">
+        {grouped.map((group) => (
+          <Box key={group.category}>
+            <Text size="xs" fw={700} c="dimmed" tt="uppercase" mb={8}>
+              {group.label}
+            </Text>
+            <Stack gap={8}>
+              {group.items.map((item) => (
+                <WorkflowFileRow
+                  key={item.code}
+                  item={item}
+                  onView={onView}
+                  onDownload={onDownload}
+                />
+              ))}
+            </Stack>
+          </Box>
+        ))}
+      </Stack>
+    </SectionCard>
+  );
+}
+
+function WorkflowFileRow({
+  item,
+  onView,
+  onDownload,
+}: {
+  item: Freight.ClearanceWorkflowFile;
+  onView: (file: { name: string; url: string }) => void;
+  onDownload?: (file: { id: string; name: string }) => void;
+}) {
+  const file = item.file;
+  if (!file) return null;
+
+  const viewUrl = fileViewUrl(file.id);
+  const canPreview = isViewable({ name: file.name, url: viewUrl });
+
+  return (
+    <Paper withBorder radius="md" p="sm">
+      <Group justify="space-between" wrap="nowrap" align="center">
+        <Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={36}>
+            <FileText size={17} />
+          </ThemeIcon>
+          <Box style={{ minWidth: 0 }}>
+            <Text size="sm" fw={600} truncate>
+              {item.label}
+            </Text>
+            <Group gap={6} wrap="nowrap" mt={2}>
+              <Badge size="xs" variant="light" color="gray" radius="sm" tt="none">
+                {OWNER_LABELS[item.uploadedBy]}
+              </Badge>
+              <Text size="xs" c="dimmed" truncate>
+                {file.name}
+              </Text>
+            </Group>
+          </Box>
+        </Group>
+        <Group gap={6} wrap="nowrap">
+          {canPreview ? (
+            <Tooltip label="Preview">
+              <Button
+                size="compact-xs"
+                variant="default"
+                radius="md"
+                leftSection={<Eye size={13} />}
+                onClick={() => onView({ name: file.name, url: viewUrl })}
+              >
+                View
+              </Button>
+            </Tooltip>
+          ) : null}
+          {onDownload ? (
+            <Tooltip label="Download">
+              <Button
+                size="compact-xs"
+                variant="light"
+                radius="md"
+                leftSection={<Download size={13} />}
+                onClick={() => onDownload({ id: file.id, name: file.name })}
+              >
+                Download
+              </Button>
+            </Tooltip>
+          ) : null}
+        </Group>
+      </Group>
+    </Paper>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/ContractApprovalStepsCard.tsx

@@ -1,6 +1,14 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Check, ShieldCheck } from "lucide-react";
-import { Stack, Group, Text, Badge, Button, Box } from "@mantine/core";
+import {
+  Stack,
+  Group,
+  Text,
+  Badge,
+  Button,
+  Box,
+  Modal,
+} from "@mantine/core";
 import type { Freight } from "@edr/types";
 
 import { formatContractApprovalProgress } from "@/features/contracts/contract-approval-progress";
@@ -19,6 +27,10 @@ export function ContractApprovalStepsCard({
   contract,
   mutations,
 }: ContractApprovalStepsCardProps) {
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [pendingStep, setPendingStep] =
+    useState<Freight.IContractApprovalStep | null>(null);
+
   const steps = useMemo(
     () =>
       [...(contract.approvalSteps ?? [])].sort(
@@ -30,6 +42,24 @@ export function ContractApprovalStepsCard({
   const nextPending = steps.find((s) => s.status === "PENDING");
   const summary = formatContractApprovalProgress(contract.status, steps);
 
+  const openApprove = (step: Freight.IContractApprovalStep) => {
+    setPendingStep(step);
+    setConfirmOpen(true);
+  };
+
+  const closeApprove = () => {
+    setConfirmOpen(false);
+    setPendingStep(null);
+  };
+
+  const runApprove = () => {
+    if (!pendingStep) return;
+    mutations.approveStep.mutate(
+      { stepId: pendingStep.id, requiredRole: pendingStep.requiredRole },
+      { onSuccess: () => closeApprove() },
+    );
+  };
+
   const subtitle =
     summary.detail ||
     (nextPending
@@ -39,54 +69,87 @@ export function ContractApprovalStepsCard({
         : "Accept submission to begin");
 
   return (
-    <SectionCard
-      icon={ShieldCheck}
-      title="Approval chain"
-      extra={
-        <Badge color="edr-green" variant="light" radius="sm">
-          {steps.filter((s) => s.status === "APPROVED").length}/{steps.length}
-        </Badge>
-      }
-    >
-      <Text size="xs" c="dimmed" mb="sm">
-        {subtitle}
-      </Text>
-
-      {steps.length === 0 ? (
-        <Text
-          size="sm"
-          c="dimmed"
-          ta="center"
-          py="lg"
-          px="md"
-          style={{
-            borderRadius: 8,
-            border: "1px dashed var(--mantine-color-gray-3)",
-            background: "var(--mantine-color-gray-0)",
-          }}
-        >
-          Use <strong>Accept for approval</strong> in staff actions to
-          instantiate steps.
+    <>
+      <SectionCard
+        icon={ShieldCheck}
+        title="Approval chain"
+        extra={
+          <Badge color="edr-green" variant="light" radius="sm">
+            {steps.filter((s) => s.status === "APPROVED").length}/{steps.length}
+          </Badge>
+        }
+      >
+        <Text size="xs" c="dimmed" mb="sm">
+          {subtitle}
         </Text>
-      ) : (
-        <Stack gap="xs">
-          {steps.map((step) => (
-            <StepRow
-              key={step.id}
-              step={step}
-              isNext={nextPending?.id === step.id}
-              isPending={mutations.approveStep.isPending}
-              onApprove={() =>
-                mutations.approveStep.mutate({
-                  stepId: step.id,
-                  requiredRole: step.requiredRole,
-                })
-              }
-            />
-          ))}
+
+        {steps.length === 0 ? (
+          <Text
+            size="sm"
+            c="dimmed"
+            ta="center"
+            py="lg"
+            px="md"
+            style={{
+              borderRadius: 8,
+              border: "1px dashed var(--mantine-color-gray-3)",
+              background: "var(--mantine-color-gray-0)",
+            }}
+          >
+            Use <strong>Accept for approval</strong> in staff actions to
+            instantiate steps.
+          </Text>
+        ) : (
+          <Stack gap="xs">
+            {steps.map((step) => (
+              <StepRow
+                key={step.id}
+                step={step}
+                isNext={nextPending?.id === step.id}
+                isPending={mutations.approveStep.isPending}
+                onApprove={() => openApprove(step)}
+              />
+            ))}
+          </Stack>
+        )}
+      </SectionCard>
+
+      <Modal
+        opened={confirmOpen}
+        onClose={closeApprove}
+        title="Approve this step?"
+        radius="md"
+        centered
+      >
+        <Stack gap="md">
+          <Text size="sm" c="dimmed">
+            You are about to approve the{" "}
+            <Text span fw={600} c="dark">
+              {pendingStep?.requiredRole}
+            </Text>{" "}
+            step for contract{" "}
+            <Text span fw={600} c="dark">
+              {contract.reference}
+            </Text>
+            . This action cannot be undone from this screen.
+          </Text>
+          <Group justify="flex-end" gap="sm">
+            <Button variant="default" radius="md" onClick={closeApprove}>
+              Cancel
+            </Button>
+            <Button
+              color="edr-green"
+              radius="md"
+              leftSection={<Check size={16} />}
+              loading={mutations.approveStep.isPending}
+              onClick={runApprove}
+            >
+              Confirm approval
+            </Button>
+          </Group>
         </Stack>
-      )}
-    </SectionCard>
+      </Modal>
+    </>
   );
 }
 

apps/edr-freight-web/backoffice/src/components/contracts/ContractClearanceReviewSection.tsx

@@ -54,6 +54,21 @@ export interface ContractClearanceReviewSectionProps {
    * by whom, when) but hide all approve / query / finalize actions.
    */
   readOnly?: boolean;
+  /**
+   * Document approvals are locked (e.g. after all docs approved in phased flow)
+   * but queries remain available until {@link queriesLocked} or {@link readOnly}.
+   */
+  approvalsLocked?: boolean;
+  /**
+   * Pre-clearance finalized — block opening new queries on customer documents.
+   */
+  queriesLocked?: boolean;
+  /**
+   * ONE_TIME customs contracts use the phased milestone workflow. Hides the
+   * legacy "Finalize clearance" shortcut; booking readiness follows delivery
+   * order (import) or export release.
+   */
+  phasedCustoms?: boolean;
 }
 
 const STATUS_META: Record<
@@ -89,6 +104,9 @@ export function ContractClearanceReviewSection({
   hideSummary,
   selfClear = false,
   readOnly = false,
+  phasedCustoms = false,
+  approvalsLocked = false,
+  queriesLocked = false,
 }: ContractClearanceReviewSectionProps) {
   const [queryNotes, setQueryNotes] = useState<Record<string, string>>({});
   const [openQuery, setOpenQuery] = useState<Record<string, boolean>>({});
@@ -137,6 +155,11 @@ export function ContractClearanceReviewSection({
     .filter((d) => d.file && d.reviewStatus !== "APPROVED")
     .map((d) => d.fileKey);
 
+  const hasDocsAwaitingApproval = customerDocs.some(
+    (d) => d.file && d.reviewStatus !== "APPROVED",
+  );
+  const effectiveApprovalsLocked = approvalsLocked && !hasDocsAwaitingApproval;
+
   if (isLoading || !clearance) {
     return (
       <Group justify="center" py="xl" gap={10}>
@@ -170,14 +193,16 @@ export function ContractClearanceReviewSection({
         subtitle={
           readOnly
             ? `Reviewed by the ${reviewerTeam} team.`
-            : "Approve each document, or open a query to tell the customer what to fix."
+            : effectiveApprovalsLocked
+              ? "Documents are approved — you can still open a query if something needs fixing."
+              : "Approve each document, or open a query to tell the customer what to fix."
         }
         extra={
           <Group gap={10} wrap="nowrap" align="center">
             <Text size="xs" c="dimmed" fw={600}>
               {stats.approved}/{stats.total} approved
             </Text>
-            {!readOnly && approvableKeys.length > 0 && (
+            {!readOnly && !effectiveApprovalsLocked && approvableKeys.length > 0 && (
               <Button
                 size="compact-sm"
                 color="edr-green"
@@ -221,6 +246,8 @@ export function ContractClearanceReviewSection({
                 doc={doc}
                 reviewerTeam={reviewerTeam}
                 readOnly={readOnly}
+                approvalsLocked={effectiveApprovalsLocked}
+                queriesLocked={queriesLocked}
                 note={queryNotes[doc.fileKey] ?? ""}
                 queryOpen={openQuery[doc.fileKey] ?? false}
                 onToggleQuery={(open) =>
@@ -241,7 +268,7 @@ export function ContractClearanceReviewSection({
         </Stack>
       </SectionCard>
 
-      {glDocs.length > 0 && (
+      {glDocs.length > 0 && !phasedCustoms && (
         <SectionCard
           icon={Upload}
           title="GL output documents"
@@ -372,8 +399,42 @@ export function ContractClearanceReviewSection({
               <CheckCircle2 size={15} />
             </ThemeIcon>
             <Text fz="12.5px" c="dimmed">
-              Clearance was finalized by the {reviewerTeam} team. This is a
-              read-only record of the approved documents.
+              {phasedCustoms
+                ? "Document review is complete. Continue customs milestones in the action panel."
+                : `Clearance was finalized by the ${reviewerTeam} team. This is a read-only record of the approved documents.`}
+            </Text>
+          </Group>
+        </Paper>
+      ) : phasedCustoms && effectiveApprovalsLocked ? (
+        <Paper withBorder radius="md" p="md">
+          <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
+            <ThemeIcon variant="light" color="edr-green" radius="md" size={28}>
+              <CheckCircle2 size={15} />
+            </ThemeIcon>
+            <Text fz="12.5px" c="dimmed">
+              Document review is complete. Use the action panel for declaration, duty, and
+              transit steps
+              {queriesLocked
+                ? ". Pre-clearance is finalized — customer documents can no longer be queried."
+                : " — or open a query above if a customer document needs correction."}
+            </Text>
+          </Group>
+        </Paper>
+      ) : phasedCustoms ? (
+        <Paper withBorder radius="md" p="md">
+          <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
+            <ThemeIcon
+              variant="light"
+              color={clearance.allApproved ? "edr-green" : "gray"}
+              radius="md"
+              size={28}
+            >
+              <FileCheck2 size={15} />
+            </ThemeIcon>
+            <Text fz="12.5px" c="dimmed">
+              {clearance.allApproved
+                ? "All required documents are approved. Continue declaration, duty, and transit in the action panel."
+                : "Approve every required document to unlock the customs milestone steps."}
             </Text>
           </Group>
         </Paper>
@@ -450,6 +511,8 @@ function DocReviewCard({
   doc,
   reviewerTeam,
   readOnly,
+  approvalsLocked,
+  queriesLocked,
   note,
   queryOpen,
   onToggleQuery,
@@ -462,6 +525,8 @@ function DocReviewCard({
   doc: Freight.ContractClearanceDocument;
   reviewerTeam: string;
   readOnly: boolean;
+  approvalsLocked: boolean;
+  queriesLocked: boolean;
   note: string;
   queryOpen: boolean;
   onToggleQuery: (open: boolean) => void;
@@ -583,31 +648,35 @@ function DocReviewCard({
         </Alert>
       )}
 
-      {!readOnly && hasFile && !isApproved && (
+      {!readOnly && hasFile && (
         <Box mt="sm">
           {!queryOpen ? (
             <Group justify="flex-end" gap={8}>
-              <Button
-                size="sm"
-                variant="light"
-                color="red"
-                radius="md"
-                leftSection={<MessageSquareWarning size={15} />}
-                disabled={busy}
-                onClick={() => onToggleQuery(true)}
-              >
-                Open query
-              </Button>
-              <Button
-                size="sm"
-                color="edr-green"
-                radius="md"
-                leftSection={<CheckCircle2 size={15} />}
-                disabled={busy}
-                onClick={onApprove}
-              >
-                Approve
-              </Button>
+              {!queriesLocked && (
+                <Button
+                  size="sm"
+                  variant="light"
+                  color="red"
+                  radius="md"
+                  leftSection={<MessageSquareWarning size={15} />}
+                  disabled={busy}
+                  onClick={() => onToggleQuery(true)}
+                >
+                  Open query
+                </Button>
+              )}
+              {!isApproved && !approvalsLocked && (
+                <Button
+                  size="sm"
+                  color="edr-green"
+                  radius="md"
+                  leftSection={<CheckCircle2 size={15} />}
+                  disabled={busy}
+                  onClick={onApprove}
+                >
+                  Approve
+                </Button>
+              )}
             </Group>
           ) : (
             <Box

apps/edr-freight-web/backoffice/src/components/contracts/ContractSignSuccessModal.tsx

@@ -0,0 +1,43 @@
+import { Button, Group, Modal, Stack, Text, ThemeIcon } from "@mantine/core";
+import { CheckCircle2 } from "lucide-react";
+
+export interface ContractSignSuccessModalProps {
+  opened: boolean;
+  onClose: () => void;
+  reference: string;
+  message?: string;
+  confirmLabel?: string;
+}
+
+export function ContractSignSuccessModal({
+  opened,
+  onClose,
+  reference,
+  message = "The contract has been signed and recorded.",
+  confirmLabel = "Back to contract request",
+}: ContractSignSuccessModalProps) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Contract signed successfully"
+      centered
+      radius="lg"
+    >
+      <Stack gap="md" align="center" ta="center">
+        <ThemeIcon size={56} radius="xl" color="edr-green" variant="light">
+          <CheckCircle2 size={28} />
+        </ThemeIcon>
+        <Text fw={600}>{reference}</Text>
+        <Text size="sm" c="dimmed">
+          {message}
+        </Text>
+        <Group justify="center" mt="xs">
+          <Button color="edr-green" onClick={onClose}>
+            {confirmLabel}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/GlClearanceUploadModal.tsx

@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { Button, Group, Modal, Stack, Text } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
+import { Ship, Upload } from "lucide-react";
+import toast from "react-hot-toast";
+
+import { PhasedFileDropzone } from "@/components/contracts/PhasedFileDropzone";
+import { findWorkflowFile } from "@/components/contracts/PhasedUploadedFileRow";
+import { contractsService } from "@/services/contracts.service";
+import { bookingsService } from "@/services/bookings.service";
+import type { Freight } from "@edr/types";
+
+export type GlClearanceUploadKind = "do" | "ro";
+
+export interface GlClearanceUploadModalProps {
+  opened: boolean;
+  kind: GlClearanceUploadKind | null;
+  onClose: () => void;
+  entityId: string;
+  isBooking: boolean;
+  workflowFiles?: Freight.ClearanceWorkflowFile[];
+  vesselDepartureDate?: string | null;
+  onSuccess?: () => void;
+  onPreview?: (file: { name: string; url: string }) => void;
+}
+
+export function GlClearanceUploadModal({
+  opened,
+  kind,
+  onClose,
+  entityId,
+  isBooking,
+  workflowFiles = [],
+  vesselDepartureDate,
+  onSuccess,
+  onPreview,
+}: GlClearanceUploadModalProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [vesselDate, setVesselDate] = useState<Date | null>(
+    vesselDepartureDate ? new Date(vesselDepartureDate) : null,
+  );
+  const [loading, setLoading] = useState(false);
+
+  const isDo = kind === "do";
+  const isRo = kind === "ro";
+  const replaceMode = isDo
+    ? Boolean(findWorkflowFile(workflowFiles, "delivery_order"))
+    : Boolean(findWorkflowFile(workflowFiles, "release_order"));
+
+  const close = () => {
+    setFile(null);
+    onClose();
+  };
+
+  const submit = async () => {
+    if (!file || !kind) return;
+    if (isRo && !vesselDate) {
+      toast.error("Vessel departure date is required.");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      if (isDo) {
+        if (isBooking) {
+          await bookingsService.uploadDeliveryOrder(entityId, file);
+        } else {
+          await contractsService.uploadDeliveryOrder(entityId, file);
+        }
+        toast.success(replaceMode ? "Delivery Order updated" : "Delivery Order uploaded");
+      } else {
+        const iso = vesselDate!.toISOString().slice(0, 10);
+        const result = isBooking
+          ? await bookingsService.uploadReleaseOrder(entityId, file, iso)
+          : await contractsService.uploadReleaseOrder(entityId, file, iso);
+        if (result.hold) {
+          toast.error(result.holdReason ?? "Vessel date too soon");
+        } else {
+          toast.success(replaceMode ? "Release Order updated" : "Release Order uploaded");
+        }
+      }
+      setFile(null);
+      onSuccess?.();
+      close();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Upload failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      opened={opened && kind != null}
+      onClose={close}
+      title={
+        <Group gap={8}>
+          <Ship size={18} />
+          <Text fw={700}>{isDo ? "Upload Delivery Order" : "Upload Release Order"}</Text>
+        </Group>
+      }
+      radius="md"
+      size="md"
+    >
+      <Stack gap="md">
+        <Text size="sm" c="dimmed">
+          {isDo
+            ? "Upload the Djibouti Delivery Order (DO) for this import shipment."
+            : "Upload the Release Order and confirm the vessel departure date."}
+        </Text>
+
+        {isRo ? (
+          <DateInput
+            label="Vessel departure date"
+            value={vesselDate}
+            onChange={(v) => setVesselDate(v ? new Date(v) : null)}
+            size="sm"
+            required
+          />
+        ) : null}
+
+        <PhasedFileDropzone
+          label={isDo ? "Delivery Order file" : "Release Order file"}
+          description={isDo ? "Any file type." : "PDF or image."}
+          accept={isDo ? "*/*" : undefined}
+          value={file}
+          onChange={setFile}
+          replaceMode={replaceMode}
+          onPreview={onPreview}
+        />
+
+        <Group justify="flex-end" gap="sm">
+          <Button variant="default" onClick={close} disabled={loading}>
+            Cancel
+          </Button>
+          <Button
+            color="edr-green"
+            loading={loading}
+            disabled={!file || (isRo && !vesselDate)}
+            leftSection={<Upload size={16} />}
+            onClick={() => void submit()}
+          >
+            {replaceMode
+              ? isDo
+                ? "Replace DO"
+                : "Replace RO"
+              : isDo
+                ? "Upload DO"
+                : "Upload RO"}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/PhasedDocumentUploadField.tsx

@@ -0,0 +1,122 @@
+import { Box, Button, Group, Paper, Stack, Text } from "@mantine/core";
+import { FileText, Upload } from "lucide-react";
+import type { Freight } from "@edr/types";
+
+import { PhasedFileDropzone } from "@/components/contracts/PhasedFileDropzone";
+import { PhasedUploadedFileRow, findWorkflowFile } from "@/components/contracts/PhasedUploadedFileRow";
+
+export interface PhasedDocumentUploadFieldProps {
+  fields: Array<{ key: string; label: string }>;
+  files: Record<string, File | null>;
+  onChange: (key: string, file: File | null) => void;
+  workflowFiles?: Freight.ClearanceWorkflowFile[];
+  helperText: string;
+  replaceMode?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  submitLabel?: string;
+  onSubmit: () => void;
+  onViewFile?: (file: { name: string; url: string }) => void;
+  onDownloadFile?: (file: { id: string; name: string }) => void;
+}
+
+/** Consistent phased customs document upload with drag-and-drop, preview, and uploaded rows. */
+export function PhasedDocumentUploadField({
+  fields,
+  files,
+  onChange,
+  workflowFiles = [],
+  helperText,
+  replaceMode = false,
+  loading = false,
+  disabled = false,
+  submitLabel,
+  onSubmit,
+  onViewFile,
+  onDownloadFile,
+}: PhasedDocumentUploadFieldProps) {
+  const hasStaged = Object.values(files).some(Boolean);
+  const uploaded = fields
+    .map((f) => ({ ...f, file: findWorkflowFile(workflowFiles, f.key) }))
+    .filter((f) => f.file);
+  const multiField = fields.length > 1;
+
+  return (
+    <Stack gap="md">
+      {uploaded.length > 0 ? (
+        <Stack gap={8}>
+          <Text size="xs" fw={700} c="dimmed" tt="uppercase">
+            Current file{uploaded.length > 1 ? "s" : ""}
+          </Text>
+          {uploaded.map((row) => (
+            <PhasedUploadedFileRow
+              key={row.key}
+              label={row.label}
+              file={row.file!}
+              onView={onViewFile}
+              onDownload={onDownloadFile}
+            />
+          ))}
+        </Stack>
+      ) : null}
+
+      <Paper withBorder radius="md" p="md" bg="var(--mantine-color-gray-0)">
+        <Group gap={8} mb="sm" wrap="nowrap">
+          <Box
+            c="edr-green"
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: 8,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "var(--mantine-color-edr-green-1)",
+            }}
+          >
+            <FileText size={16} />
+          </Box>
+          <Box>
+            <Text size="sm" fw={700}>
+              {replaceMode ? "Replace document" : "Upload document"}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {helperText}
+            </Text>
+          </Box>
+        </Group>
+
+        <Stack gap="md">
+          {fields.map((f) => (
+            <PhasedFileDropzone
+              key={f.key}
+              label={multiField ? f.label : "Choose file"}
+              description={
+                multiField
+                  ? uploaded.some((u) => u.key === f.key)
+                    ? "Drop a new file to replace the current one."
+                    : `Upload ${f.label} (optional if another declaration type is provided).`
+                  : undefined
+              }
+              value={files[f.key] ?? null}
+              onChange={(file) => onChange(f.key, file)}
+              replaceMode={replaceMode || uploaded.some((u) => u.key === f.key)}
+              onPreview={onViewFile}
+            />
+          ))}
+        </Stack>
+      </Paper>
+
+      <Button
+        color="edr-green"
+        loading={loading}
+        disabled={disabled || !hasStaged}
+        leftSection={<Upload size={16} />}
+        onClick={onSubmit}
+        fullWidth
+      >
+        {submitLabel ?? (replaceMode ? "Replace document" : "Upload document")}
+      </Button>
+    </Stack>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/PhasedFileDropzone.tsx

@@ -0,0 +1,403 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Group,
+  Stack,
+  Text,
+  ThemeIcon,
+  UnstyledButton,
+} from "@mantine/core";
+import { Eye, FileText, Trash2, UploadCloud } from "lucide-react";
+import { isViewable } from "@edr/ui-common";
+
+export interface PhasedFileDropzoneProps {
+  label: string;
+  description?: string;
+  value: File | null;
+  onChange: (file: File | null) => void;
+  accept?: string;
+  replaceMode?: boolean;
+  onPreview?: (file: { name: string; url: string; mimeType?: string | null }) => void;
+  disabled?: boolean;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;
+}
+
+function isImageFile(file: File): boolean {
+  if (file.type.startsWith("image/")) return true;
+  const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+  return ["png", "jpg", "jpeg", "webp", "gif", "bmp", "svg"].includes(ext);
+}
+
+export function PhasedFileDropzone({
+  label,
+  description,
+  value,
+  onChange,
+  accept = "application/pdf,image/*",
+  replaceMode = false,
+  onPreview,
+  disabled = false,
+}: PhasedFileDropzoneProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragOver, setDragOver] = useState(false);
+
+  const previewUrl = useMemo(
+    () => (value ? URL.createObjectURL(value) : null),
+    [value],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+    };
+  }, [previewUrl]);
+
+  const pickFile = (file: File | null) => {
+    if (disabled) return;
+    onChange(file);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    if (disabled) return;
+    const file = e.dataTransfer.files[0];
+    if (file) pickFile(file);
+  };
+
+  if (value && previewUrl) {
+    const canPreview = onPreview && isViewable({ name: value.name, url: previewUrl, mimeType: value.type });
+    const image = isImageFile(value);
+
+    return (
+      <Stack gap={6}>
+        <Text size="sm" fw={600}>
+          {label}
+        </Text>
+        <Box
+          p="sm"
+          style={{
+            borderRadius: 12,
+            border: "1px solid var(--mantine-color-edr-green-4)",
+            background:
+              "linear-gradient(135deg, var(--mantine-color-edr-green-0) 0%, #fff 70%)",
+          }}
+        >
+          <Group justify="space-between" wrap="nowrap" align="center">
+            <Group gap={12} wrap="nowrap" style={{ minWidth: 0 }}>
+              {image ? (
+                <UnstyledButton
+                  onClick={() =>
+                    canPreview && onPreview?.({ name: value.name, url: previewUrl, mimeType: value.type })
+                  }
+                  style={{
+                    width: 52,
+                    height: 52,
+                    flexShrink: 0,
+                    borderRadius: 10,
+                    overflow: "hidden",
+                    border: "1px solid var(--mantine-color-gray-3)",
+                    cursor: canPreview ? "pointer" : "default",
+                  }}
+                >
+                  <img
+                    src={previewUrl}
+                    alt=""
+                    style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                  />
+                </UnstyledButton>
+              ) : (
+                <ThemeIcon variant="light" color="edr-green" radius="md" size={52}>
+                  <FileText size={22} />
+                </ThemeIcon>
+              )}
+              <Box style={{ minWidth: 0 }}>
+                <Text size="xs" fw={700} c="edr-green" tt="uppercase">
+                  Ready to upload
+                </Text>
+                <Text size="sm" fw={600} truncate>
+                  {value.name}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  {formatBytes(value.size)}
+                </Text>
+              </Box>
+            </Group>
+            <Group gap={6} wrap="nowrap">
+              {canPreview ? (
+                <Button
+                  size="compact-xs"
+                  variant="default"
+                  leftSection={<Eye size={13} />}
+                  onClick={() =>
+                    onPreview({ name: value.name, url: previewUrl, mimeType: value.type })
+                  }
+                >
+                  Preview
+                </Button>
+              ) : null}
+              <ActionIcon
+                variant="subtle"
+                color="red"
+                radius="md"
+                aria-label="Remove file"
+                onClick={() => pickFile(null)}
+                disabled={disabled}
+              >
+                <Trash2 size={15} />
+              </ActionIcon>
+            </Group>
+          </Group>
+        </Box>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap={6}>
+      <Text size="sm" fw={600}>
+        {label}
+      </Text>
+      {description ? (
+        <Text size="xs" c="dimmed">
+          {description}
+        </Text>
+      ) : null}
+      <Box
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (!disabled) setDragOver(true);
+        }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={handleDrop}
+        onClick={() => !disabled && inputRef.current?.click()}
+        style={{
+          borderRadius: 12,
+          border: `2px dashed ${
+            dragOver
+              ? "var(--mantine-color-edr-green-5)"
+              : "var(--mantine-color-gray-4)"
+          }`,
+          background: dragOver
+            ? "var(--mantine-color-edr-green-0)"
+            : "var(--mantine-color-gray-0)",
+          padding: "28px 20px",
+          textAlign: "center",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.6 : 1,
+          transition: "border-color 120ms ease, background 120ms ease",
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          hidden
+          disabled={disabled}
+          onChange={(e) => pickFile(e.target.files?.[0] ?? null)}
+        />
+        <Stack gap={8} align="center">
+          <ThemeIcon
+            variant="light"
+            color={dragOver ? "edr-green" : "gray"}
+            radius="xl"
+            size={48}
+          >
+            <UploadCloud size={24} />
+          </ThemeIcon>
+          <Box>
+            <Text size="sm" fw={600}>
+              {dragOver
+                ? "Drop to upload"
+                : replaceMode
+                  ? "Drag & drop to replace"
+                  : "Drag & drop your file here"}
+            </Text>
+            <Text size="xs" c="dimmed" mt={4}>
+              or <span style={{ color: "var(--mantine-color-edr-green-7)", fontWeight: 600 }}>browse</span>{" "}
+              — PDF or image
+            </Text>
+          </Box>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export interface PhasedMultiFileDropzoneProps {
+  label: string;
+  description?: string;
+  value: File[];
+  onChange: (files: File[]) => void;
+  accept?: string;
+  replaceMode?: boolean;
+  disabled?: boolean;
+}
+
+export function PhasedMultiFileDropzone({
+  label,
+  description,
+  value,
+  onChange,
+  accept = "application/pdf,image/*",
+  replaceMode = false,
+  disabled = false,
+}: PhasedMultiFileDropzoneProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragOver, setDragOver] = useState(false);
+
+  const addFiles = (incoming: FileList | File[]) => {
+    if (disabled) return;
+    const next = [...value];
+    for (const file of Array.from(incoming)) {
+      if (!next.some((f) => f.name === file.name && f.size === file.size)) {
+        next.push(file);
+      }
+    }
+    onChange(next);
+  };
+
+  const removeAt = (index: number) => {
+    if (disabled) return;
+    onChange(value.filter((_, i) => i !== index));
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    if (e.dataTransfer.files.length > 0) addFiles(e.dataTransfer.files);
+  };
+
+  return (
+    <Stack gap={6}>
+      <Text size="sm" fw={600}>
+        {label}
+      </Text>
+      {description ? (
+        <Text size="xs" c="dimmed">
+          {description}
+        </Text>
+      ) : null}
+
+      {value.length > 0 ? (
+        <Stack gap={8}>
+          {value.map((file, index) => (
+            <Box
+              key={`${file.name}-${file.size}-${index}`}
+              p="sm"
+              style={{
+                borderRadius: 12,
+                border: "1px solid var(--mantine-color-edr-green-4)",
+                background:
+                  "linear-gradient(135deg, var(--mantine-color-edr-green-0) 0%, #fff 70%)",
+              }}
+            >
+              <Group justify="space-between" wrap="nowrap" align="center">
+                <Group gap={12} wrap="nowrap" style={{ minWidth: 0 }}>
+                  <ThemeIcon variant="light" color="edr-green" radius="md" size={44}>
+                    <FileText size={18} />
+                  </ThemeIcon>
+                  <Box style={{ minWidth: 0 }}>
+                    <Text size="xs" fw={700} c="edr-green" tt="uppercase">
+                      Ready to upload
+                    </Text>
+                    <Text size="sm" fw={600} truncate>
+                      {file.name}
+                    </Text>
+                    <Text size="xs" c="dimmed">
+                      {formatBytes(file.size)}
+                    </Text>
+                  </Box>
+                </Group>
+                <ActionIcon
+                  variant="subtle"
+                  color="red"
+                  radius="md"
+                  aria-label="Remove file"
+                  onClick={() => removeAt(index)}
+                  disabled={disabled}
+                >
+                  <Trash2 size={15} />
+                </ActionIcon>
+              </Group>
+            </Box>
+          ))}
+        </Stack>
+      ) : null}
+
+      <Box
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (!disabled) setDragOver(true);
+        }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={handleDrop}
+        onClick={() => !disabled && inputRef.current?.click()}
+        style={{
+          borderRadius: 12,
+          border: `2px dashed ${
+            dragOver
+              ? "var(--mantine-color-edr-green-5)"
+              : "var(--mantine-color-gray-4)"
+          }`,
+          background: dragOver
+            ? "var(--mantine-color-edr-green-0)"
+            : "var(--mantine-color-gray-0)",
+          padding: "28px 20px",
+          textAlign: "center",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.6 : 1,
+          transition: "border-color 120ms ease, background 120ms ease",
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple
+          hidden
+          disabled={disabled}
+          onChange={(e) => {
+            if (e.target.files?.length) addFiles(e.target.files);
+            e.target.value = "";
+          }}
+        />
+        <Stack gap={8} align="center">
+          <ThemeIcon
+            variant="light"
+            color={dragOver ? "edr-green" : "gray"}
+            radius="xl"
+            size={48}
+          >
+            <UploadCloud size={24} />
+          </ThemeIcon>
+          <Box>
+            <Text size="sm" fw={600}>
+              {dragOver
+                ? "Drop to add files"
+                : replaceMode
+                  ? "Drag & drop to replace declaration files"
+                  : "Drag & drop declaration files here"}
+            </Text>
+            <Text size="xs" c="dimmed" mt={4}>
+              or{" "}
+              <span style={{ color: "var(--mantine-color-edr-green-7)", fontWeight: 600 }}>
+                browse
+              </span>{" "}
+              — select one or more PDF or image files
+            </Text>
+          </Box>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/PhasedUploadedFileRow.tsx

@@ -0,0 +1,94 @@
+import { Badge, Box, Button, Group, Paper, Text, ThemeIcon, Tooltip } from "@mantine/core";
+import { Download, Eye, FileText } from "lucide-react";
+import { isViewable } from "@edr/ui-common";
+
+import { fileViewUrl } from "@/constants/apiConfig";
+
+export interface PhasedUploadedFileRowProps {
+  label: string;
+  file: { id: string; name: string };
+  onView?: (file: { name: string; url: string }) => void;
+  onDownload?: (file: { id: string; name: string }) => void;
+  compact?: boolean;
+}
+
+/** Inline preview row for a phased customs upload (declaration, transit permit, DO, etc.). */
+export function PhasedUploadedFileRow({
+  label,
+  file,
+  onView,
+  onDownload,
+  compact = false,
+}: PhasedUploadedFileRowProps) {
+  const viewUrl = fileViewUrl(file.id);
+  const canPreview = isViewable({ name: file.name, url: viewUrl });
+
+  return (
+    <Paper
+      withBorder
+      radius="md"
+      p={compact ? "xs" : "sm"}
+      style={{
+        borderColor: "var(--mantine-color-edr-green-3)",
+        background:
+          "linear-gradient(135deg, var(--mantine-color-edr-green-0) 0%, #FFFFFF 75%)",
+      }}
+    >
+      <Group justify="space-between" wrap="nowrap" align="center">
+        <Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={compact ? 32 : 36}>
+            <FileText size={compact ? 15 : 17} />
+          </ThemeIcon>
+          <Box style={{ minWidth: 0 }}>
+            <Text size="sm" fw={600} truncate>
+              {label}
+            </Text>
+            <Group gap={6} wrap="nowrap" mt={2}>
+              <Badge size="xs" variant="light" color="edr-green" radius="sm">
+                Uploaded
+              </Badge>
+              <Text size="xs" c="dimmed" truncate>
+                {file.name}
+              </Text>
+            </Group>
+          </Box>
+        </Group>
+        <Group gap={6} wrap="nowrap">
+          {canPreview && onView ? (
+            <Tooltip label="Preview">
+              <Button
+                size="compact-xs"
+                variant="default"
+                radius="md"
+                leftSection={<Eye size={13} />}
+                onClick={() => onView({ name: file.name, url: viewUrl })}
+              >
+                View
+              </Button>
+            </Tooltip>
+          ) : null}
+          {onDownload ? (
+            <Tooltip label="Download">
+              <Button
+                size="compact-xs"
+                variant="light"
+                radius="md"
+                leftSection={<Download size={13} />}
+                onClick={() => onDownload({ id: file.id, name: file.name })}
+              >
+                Download
+              </Button>
+            </Tooltip>
+          ) : null}
+        </Group>
+      </Group>
+    </Paper>
+  );
+}
+
+export function findWorkflowFile(
+  files: Array<{ code: string; file: { id: string; name: string } | null }> | undefined,
+  code: string,
+): { id: string; name: string } | null {
+  return files?.find((f) => f.code === code)?.file ?? null;
+}

apps/edr-freight-web/backoffice/src/components/contracts/TransitPermitMultiUpload.tsx

@@ -0,0 +1,106 @@
+import { useState } from "react";
+import { Button, Paper, Stack, Text } from "@mantine/core";
+import { Upload } from "lucide-react";
+
+import { PhasedMultiFileDropzone } from "@/components/contracts/PhasedFileDropzone";
+import { PhasedUploadedFileRow } from "@/components/contracts/PhasedUploadedFileRow";
+
+export type TransitPermitUploadedRow = {
+  code: string;
+  label: string;
+  file: { id: string; name: string };
+};
+
+export interface TransitPermitMultiUploadProps {
+  title?: string;
+  uploaded?: TransitPermitUploadedRow[];
+  replaceMode?: boolean;
+  submitLabel?: string;
+  fileFieldPrefix: string;
+  disabled?: boolean;
+  onSubmit: (files: Record<string, File>) => Promise<void>;
+  onViewFile?: (file: { name: string; url: string }) => void;
+  onDownloadFile?: (file: { id: string; name: string }) => void;
+}
+
+/** Multi-file transit permit upload — import pre-booking and export post-booking. */
+export function TransitPermitMultiUpload({
+  title = "Transit Permit",
+  uploaded = [],
+  replaceMode = false,
+  submitLabel,
+  fileFieldPrefix,
+  disabled = false,
+  onSubmit,
+  onViewFile,
+  onDownloadFile,
+}: TransitPermitMultiUploadProps) {
+  const [files, setFiles] = useState<File[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const label = submitLabel ?? (replaceMode ? "Replace transit permit" : "Upload transit permit");
+
+  return (
+    <Stack gap="md">
+      <Text size="sm" fw={700}>
+        {title}
+      </Text>
+
+      {uploaded.length > 0 ? (
+        <Stack gap={8}>
+          <Text size="xs" fw={700} c="dimmed" tt="uppercase">
+            Current file{uploaded.length > 1 ? "s" : ""}
+          </Text>
+          {uploaded.map((row) => (
+            <PhasedUploadedFileRow
+              key={row.code}
+              label={row.label}
+              file={row.file}
+              onView={onViewFile}
+              onDownload={onDownloadFile}
+            />
+          ))}
+        </Stack>
+      ) : null}
+
+      <Paper withBorder radius="md" p="md" bg="var(--mantine-color-gray-0)">
+        <PhasedMultiFileDropzone
+          label="Transit permit documents"
+          description={
+            replaceMode
+              ? "Replace transit permit files — upload one or more documents (PDF or image)."
+              : "Upload one or more transit permit documents (PDF or image)."
+          }
+          value={files}
+          onChange={setFiles}
+          replaceMode={replaceMode}
+          disabled={disabled || loading}
+        />
+      </Paper>
+
+      <Button
+        color="edr-green"
+        loading={loading}
+        disabled={disabled || files.length === 0}
+        leftSection={<Upload size={16} />}
+        fullWidth
+        onClick={async () => {
+          setLoading(true);
+          try {
+            const payload = Object.fromEntries(
+              files.map((file, index) => [`${fileFieldPrefix}_${index}`, file]),
+            ) as Record<string, File>;
+            await onSubmit(payload);
+            setFiles([]);
+          } catch {
+            // Caller shows toast for upload errors.
+          } finally {
+            setLoading(false);
+          }
+        }}
+      >
+        {label}
+      </Button>
+    </Stack>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/detail/ContractDetailTabCards.tsx

@@ -0,0 +1,322 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  Building2,
+  Download,
+  Eye,
+  FileCheck,
+  FileText,
+  Globe,
+  Hash,
+  Mail,
+  MapPin,
+  Phone,
+  ShieldCheck,
+  User,
+} from "lucide-react";
+import {
+  ActionIcon,
+  Badge,
+  Divider,
+  Group,
+  Loader,
+  Stack,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
+import { useQuery } from "@tanstack/react-query";
+import type { Freight } from "@edr/types";
+import { clearanceWorkflowFileLabel } from "@edr/types";
+
+import { SectionCard } from "@/components/bookings/detail/SectionCard";
+import { detailStyles } from "@/components/bookings/detail/booking-detail.styles";
+import { customersService } from "@/services/customers.service";
+
+type ContractFile = NonNullable<Freight.IContract["files"]>[number];
+
+// ── shared bits ──────────────────────────────────────────────────────────────
+
+interface InfoRowProps {
+  icon: LucideIcon;
+  label: string;
+  value?: string | null;
+}
+
+function InfoRow({ icon: Icon, label, value }: InfoRowProps) {
+  return (
+    <Group justify="space-between" wrap="nowrap" py={6} gap="md">
+      <Group gap="xs" wrap="nowrap">
+        <Icon size={15} color="var(--mantine-color-gray-5)" />
+        <Text size="sm" c="dimmed">
+          {label}
+        </Text>
+      </Group>
+      <Text size="sm" fw={600} ta="right" style={{ minWidth: 0 }} truncate>
+        {value || "—"}
+      </Text>
+    </Group>
+  );
+}
+
+function InfoRows({ rows }: { rows: InfoRowProps[] }) {
+  const visible = rows.filter((r) => r.value);
+  if (visible.length === 0) {
+    return (
+      <Text size="sm" c="dimmed">
+        No details available.
+      </Text>
+    );
+  }
+  return (
+    <Stack gap={0}>
+      {visible.map((row, i) => (
+        <div key={row.label}>
+          {i > 0 && <Divider color="var(--mantine-color-gray-2)" />}
+          <InfoRow {...row} />
+        </div>
+      ))}
+    </Stack>
+  );
+}
+
+// ── Customer tab ─────────────────────────────────────────────────────────────
+
+/**
+ * Customer info for the contract. The contract detail payload only carries a
+ * `companyId`, so we fetch the full company record to surface contact + manager
+ * details (mirrors the booking-request customer card).
+ */
+export function ContractCustomerCard({
+  contract,
+}: {
+  contract: Freight.IContract;
+}) {
+  const companyId = contract.companyId ?? undefined;
+
+  const { data: company, isLoading } = useQuery({
+    queryKey: ["companies", "byId", companyId],
+    queryFn: () => customersService.getById(companyId!),
+    enabled: Boolean(companyId) && !contract.isGovernment,
+  });
+
+  // Government contracts carry an institution name instead of a company.
+  if (contract.isGovernment) {
+    return (
+      <SectionCard icon={Building2} title="Customer" accent="blue">
+        <InfoRows
+          rows={[
+            {
+              icon: Building2,
+              label: "Government",
+              value: contract.governmentInstitution ?? "Government",
+            },
+          ]}
+        />
+      </SectionCard>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <SectionCard icon={Building2} title="Customer" accent="blue">
+        <Group gap="sm" py="sm">
+          <Loader size="sm" color="gray" />
+          <Text size="sm" c="dimmed">
+            Loading customer…
+          </Text>
+        </Group>
+      </SectionCard>
+    );
+  }
+
+  if (!company) {
+    return (
+      <SectionCard icon={Building2} title="Customer" accent="blue">
+        <Text size="sm" c="dimmed">
+          No customer linked to this contract.
+        </Text>
+      </SectionCard>
+    );
+  }
+
+  return (
+    <Stack gap="lg">
+      <SectionCard
+        icon={Building2}
+        title="Customer"
+        subtitle={company.name}
+        accent="blue"
+      >
+        <InfoRows
+          rows={[
+            { icon: FileCheck, label: "TIN", value: company.tin },
+            { icon: Hash, label: "VAT number", value: company.vatNumber },
+            { icon: ShieldCheck, label: "FAN number", value: company.fanNumber },
+            { icon: Globe, label: "Country", value: company.country },
+            { icon: Mail, label: "Email", value: company.email },
+            { icon: Phone, label: "Phone", value: company.phone },
+            { icon: MapPin, label: "Address", value: company.address },
+            { icon: Globe, label: "Website", value: company.website },
+          ]}
+        />
+      </SectionCard>
+
+      <SectionCard icon={User} title="Contact person" accent="teal">
+        <InfoRows
+          rows={[
+            { icon: User, label: "Name", value: company.contactPersonName },
+            { icon: Phone, label: "Phone", value: company.contactPersonPhone },
+          ]}
+        />
+      </SectionCard>
+
+      <SectionCard icon={User} title="General manager" accent="grape">
+        <InfoRows
+          rows={[
+            { icon: User, label: "Name", value: company.generalManagerName },
+            { icon: Mail, label: "Email", value: company.generalManagerEmail },
+            { icon: Phone, label: "Phone", value: company.generalManagerPhone },
+          ]}
+        />
+      </SectionCard>
+    </Stack>
+  );
+}
+
+// ── Documents tab ────────────────────────────────────────────────────────────
+
+function formatBytes(bytes?: number | null): string {
+  if (!bytes || bytes <= 0) return "—";
+  const units = ["B", "KB", "MB", "GB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value.toFixed(value >= 10 || unit === 0 ? 0 : 1)} ${units[unit]}`;
+}
+
+/** Human label for a file's `code` (e.g. "business_license" → "Business license"). */
+function codeLabel(code?: string | null): string | null {
+  if (!code) return null;
+  return (
+    clearanceWorkflowFileLabel(code) ??
+    code.replace(/[_-]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+  );
+}
+
+export interface ContractDocumentsCardProps {
+  files: ContractFile[];
+  /** Open the file inline in a viewer modal. */
+  onView?: (file: ContractFile) => void;
+  /** Download the file to disk. */
+  onDownload?: (file: ContractFile) => void;
+}
+
+/** Rich list of the contract's attached documents: type, size, view + download. */
+export function ContractDocumentsCard({
+  files,
+  onView,
+  onDownload,
+}: ContractDocumentsCardProps) {
+  return (
+    <SectionCard
+      icon={FileText}
+      title="Documents"
+      accent="indigo"
+      extra={
+        <Badge color="gray" variant="light" radius="sm">
+          {files.length}
+        </Badge>
+      }
+    >
+      {files.length === 0 ? (
+        <Text size="sm" c="dimmed">
+          No documents attached to this contract.
+        </Text>
+      ) : (
+        <Stack gap="xs">
+          {files.map((file) => {
+            const label = codeLabel(file.code);
+            return (
+              <Group
+                key={file.id}
+                justify="space-between"
+                wrap="nowrap"
+                p="xs"
+                style={detailStyles.fileRow}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background =
+                    "var(--mantine-color-gray-0)";
+                  e.currentTarget.style.borderColor =
+                    "var(--freight-brand-border)";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = "transparent";
+                  e.currentTarget.style.borderColor =
+                    "var(--mantine-color-gray-2)";
+                }}
+              >
+                <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+                  <ThemeIcon size={36} radius="md" variant="light" color="indigo">
+                    <FileText size={17} />
+                  </ThemeIcon>
+                  <Stack gap={2} style={{ minWidth: 0 }}>
+                    <Text size="sm" fw={500} truncate>
+                      {file.name}
+                    </Text>
+                    <Group gap={6} wrap="nowrap">
+                      {label ? (
+                        <Badge
+                          variant="light"
+                          color="gray"
+                          radius="sm"
+                          size="xs"
+                          tt="none"
+                        >
+                          {label}
+                        </Badge>
+                      ) : null}
+                      <Text size="xs" c="dimmed">
+                        {formatBytes(file.size)}
+                      </Text>
+                    </Group>
+                  </Stack>
+                </Group>
+                <Group gap={4} wrap="nowrap">
+                  {onView ? (
+                    <Tooltip label="View" withArrow>
+                      <ActionIcon
+                        variant="subtle"
+                        color="indigo"
+                        radius="md"
+                        onClick={() => onView(file)}
+                        aria-label={`View ${file.name}`}
+                      >
+                        <Eye size={16} />
+                      </ActionIcon>
+                    </Tooltip>
+                  ) : null}
+                  {onDownload ? (
+                    <Tooltip label="Download" withArrow>
+                      <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        radius="md"
+                        onClick={() => onDownload(file)}
+                        aria-label={`Download ${file.name}`}
+                      >
+                        <Download size={16} />
+                      </ActionIcon>
+                    </Tooltip>
+                  ) : null}
+                </Group>
+              </Group>
+            );
+          })}
+        </Stack>
+      )}
+    </SectionCard>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/detail/RequestDetailCards.tsx

@@ -0,0 +1,275 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  Building2,
+  FileCheck,
+  FileText,
+  Mail,
+  MapPin,
+  Package,
+  Phone,
+  Ship,
+  Truck,
+  User,
+  Warehouse,
+} from "lucide-react";
+import { Badge, Box, Divider, Group, Stack, Text } from "@mantine/core";
+import type { Freight } from "@edr/types";
+
+import { SectionCard } from "@/components/bookings/detail/SectionCard";
+
+type ReqContract = NonNullable<Freight.IBookingRequest["contract"]>;
+
+interface InfoRowProps {
+  icon: LucideIcon;
+  label: string;
+  value?: string | null;
+}
+
+function InfoRow({ icon: Icon, label, value }: InfoRowProps) {
+  return (
+    <Group justify="space-between" wrap="nowrap" py={6} gap="md">
+      <Group gap="xs" wrap="nowrap">
+        <Icon size={15} color="var(--mantine-color-gray-5)" />
+        <Text size="sm" c="dimmed">
+          {label}
+        </Text>
+      </Group>
+      <Text size="sm" fw={600} ta="right" style={{ minWidth: 0 }} truncate>
+        {value || "—"}
+      </Text>
+    </Group>
+  );
+}
+
+function InfoRows({ rows }: { rows: InfoRowProps[] }) {
+  const visible = rows.filter((r) => r.value);
+  if (visible.length === 0) {
+    return (
+      <Text size="sm" c="dimmed">
+        No details available.
+      </Text>
+    );
+  }
+  return (
+    <Stack gap={0}>
+      {visible.map((row, i) => (
+        <div key={row.label}>
+          {i > 0 && <Divider color="var(--mantine-color-gray-2)" />}
+          <InfoRow {...row} />
+        </div>
+      ))}
+    </Stack>
+  );
+}
+
+/** Customer (company) on the request's contract. */
+export function RequestCustomerCard({ contract }: { contract?: ReqContract | null }) {
+  const company = contract?.company;
+  if (!company) {
+    return (
+      <SectionCard icon={Building2} title="Customer" accent="blue">
+        <Text size="sm" c="dimmed">
+          No customer linked to this request.
+        </Text>
+      </SectionCard>
+    );
+  }
+  return (
+    <SectionCard
+      icon={Building2}
+      title="Customer"
+      subtitle={company.name ?? undefined}
+      accent="blue"
+    >
+      <InfoRows
+        rows={[
+          { icon: FileCheck, label: "TIN", value: company.tin },
+          { icon: Mail, label: "Email", value: company.email },
+          { icon: Phone, label: "Phone", value: company.phone },
+          { icon: MapPin, label: "Address", value: company.address },
+          { icon: User, label: "Contact", value: company.contactPersonName },
+          { icon: Phone, label: "Contact phone", value: company.contactPersonPhone },
+        ]}
+      />
+    </SectionCard>
+  );
+}
+
+const fmtDate = (iso?: string | null) =>
+  iso
+    ? new Intl.DateTimeFormat("en-GB", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+      }).format(new Date(iso))
+    : "—";
+
+const titleCase = (s?: string | null) =>
+  s ? s.charAt(0) + s.slice(1).toLowerCase() : "—";
+
+/** Contract identity + commercial terms. */
+export function RequestContractSummaryCard({
+  contract,
+}: {
+  contract?: ReqContract | null;
+}) {
+  if (!contract) return null;
+  return (
+    <SectionCard
+      icon={FileText}
+      title="Contract"
+      subtitle={contract.reference}
+      accent="grape"
+    >
+      <InfoRows
+        rows={[
+          {
+            icon: FileText,
+            label: "Kind",
+            value: contract.contractKind === "GENERAL" ? "General" : "One-time",
+          },
+          {
+            icon: Package,
+            label: "Cargo",
+            value: contract.freightType === "CONTAINER" ? "Container" : "Bulk",
+          },
+          { icon: Ship, label: "Trade", value: titleCase(contract.tradeDirection) },
+          { icon: FileCheck, label: "Currency", value: contract.paymentCurrency },
+          {
+            icon: FileCheck,
+            label: "Customs",
+            value: contract.customsClearingEnabled
+              ? "Included (Global Logistics)"
+              : "Not included",
+          },
+          {
+            icon: FileText,
+            label: "Valid until",
+            value: contract.contractValidUntil
+              ? fmtDate(contract.contractValidUntil)
+              : "Not active yet",
+          },
+        ]}
+      />
+    </SectionCard>
+  );
+}
+
+/** Routes + cargo scope of the contract. */
+export function RequestRouteCargoCard({
+  contract,
+}: {
+  contract?: ReqContract | null;
+}) {
+  const routes = contract?.routes ?? [];
+  const cargo = contract?.cargoScope ?? [];
+  const isContainer = contract?.freightType === "CONTAINER";
+  return (
+    <SectionCard icon={MapPin} title="Route & cargo" accent="teal">
+      <Stack gap="md">
+        <Box>
+          <Text size="xs" c="dimmed" fw={600} mb={6} tt="uppercase">
+            Routes
+          </Text>
+          {routes.length === 0 ? (
+            <Text size="sm" c="dimmed">
+              No routes recorded.
+            </Text>
+          ) : (
+            <Stack gap={6}>
+              {routes.map((r) => (
+                <Group key={r.id} gap={8} wrap="nowrap">
+                  <MapPin size={14} color="var(--mantine-color-gray-5)" />
+                  <Text size="sm" fw={500} truncate>
+                    {r.originYard?.label ?? r.originYardId} →{" "}
+                    {r.destinationYard?.label ?? r.destinationYardId}
+                  </Text>
+                </Group>
+              ))}
+            </Stack>
+          )}
+        </Box>
+        <Box>
+          <Text size="xs" c="dimmed" fw={600} mb={6} tt="uppercase">
+            Cargo scope
+          </Text>
+          {cargo.length === 0 ? (
+            <Text size="sm" c="dimmed">
+              No cargo scope recorded.
+            </Text>
+          ) : (
+            <Group gap={6} wrap="wrap">
+              {cargo.map((c) => (
+                <Badge
+                  key={c.id}
+                  variant="light"
+                  color="teal"
+                  radius="sm"
+                  leftSection={<Package size={11} />}
+                >
+                  {c.containerSize ??
+                    c.cargoFreeText ??
+                    (isContainer ? "Container" : "Bulk commodity")}
+                </Badge>
+              ))}
+            </Group>
+          )}
+        </Box>
+      </Stack>
+    </SectionCard>
+  );
+}
+
+/** Service type — what the contracted service bundles (rail-only vs logistics/customs). */
+export function RequestServiceTypeCard({
+  contract,
+}: {
+  contract?: ReqContract | null;
+}) {
+  const st = contract?.serviceType;
+  if (!st) return null;
+
+  const firstMile = st.includesFirstMile ?? false;
+  const lastMile = st.includesLastMile ?? false;
+  const customs = st.includesCustoms ?? false;
+  const railOnly = !firstMile && !lastMile && !customs;
+
+  const chips: Array<{ label: string; color: string; icon: LucideIcon }> = [];
+  if (railOnly) chips.push({ label: "Rail only", color: "blue", icon: Ship });
+  if (firstMile)
+    chips.push({ label: "First-mile pickup", color: "teal", icon: Truck });
+  if (lastMile)
+    chips.push({ label: "Last-mile delivery", color: "teal", icon: Warehouse });
+  if (customs)
+    chips.push({ label: "Customs clearance (GL)", color: "grape", icon: FileCheck });
+
+  return (
+    <SectionCard
+      icon={Ship}
+      title="Service"
+      subtitle={st.serviceName}
+      accent="indigo"
+    >
+      <Stack gap="sm">
+        <Group gap={6} wrap="wrap">
+          {chips.map((c) => (
+            <Badge
+              key={c.label}
+              variant="light"
+              color={c.color}
+              radius="sm"
+              leftSection={<c.icon size={11} />}
+            >
+              {c.label}
+            </Badge>
+          ))}
+        </Group>
+        {st.description ? (
+          <Text size="sm" c="dimmed">
+            {st.description}
+          </Text>
+        ) : null}
+      </Stack>
+    </SectionCard>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/GlActionsPanel.tsx

@@ -9,6 +9,7 @@ import { AssignStationCard } from "./AssignStationCard";
 import { AssignRiskCard } from "./AssignRiskCard";
 import { AdviseDutyCard } from "./AdviseDutyCard";
 import { GlDocumentUploadCard } from "./GlDocumentUploadCard";
+import { TransportDocumentCard } from "./TransportDocumentCard";
 import { IncidentReportCard } from "./IncidentReportCard";
 
 export interface GlActionsPanelProps {
@@ -39,6 +40,16 @@ export function GlActionsPanel({ bookingId, milestones }: GlActionsPanelProps) {
     () => findMilestone(milestones, "DUTY_TAXES_ADVISED"),
     [milestones],
   );
+  const wagonMs = useMemo(
+    () => findMilestone(milestones, "WAGON_ALLOCATED"),
+    [milestones],
+  );
+  const transportMs = useMemo(
+    () => findMilestone(milestones, "EXPORT_TRANSPORT_ISSUED"),
+    [milestones],
+  );
+  const showTransport =
+    wagonMs?.status === "COMPLETED" && transportMs?.status !== "COMPLETED";
 
   return (
     <SectionCard icon={Flag} title="Global Logistics actions" accent="edr-green">
@@ -56,6 +67,8 @@ export function GlActionsPanel({ bookingId, milestones }: GlActionsPanelProps) {
 
         <GlDocumentUploadCard bookingId={bookingId} />
 
+        {showTransport ? <TransportDocumentCard bookingId={bookingId} /> : null}
+
         {riskMs ? (
           <AssignRiskCard bookingId={bookingId} milestone={riskMs} />
         ) : null}

apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/TransportDocumentCard.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { Button, FileInput, Stack } from "@mantine/core";
+import { FileText } from "lucide-react";
+import toast from "react-hot-toast";
+
+import { ActionShell } from "./ActionShell";
+import { contractsService } from "@/services/contracts.service";
+
+export function TransportDocumentCard({ bookingId }: { bookingId: string }) {
+  const [file, setFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <ActionShell
+      icon={FileText}
+      title="Transit permit"
+      subtitle="Upload after wagon allocation (GL Ethiopia)"
+      done={false}
+    >
+      <Stack gap="sm">
+        <FileInput
+          label="Transit permit"
+          value={file}
+          onChange={setFile}
+          size="sm"
+        />
+        <Button
+          color="edr-green"
+          loading={loading}
+          disabled={!file}
+          onClick={async () => {
+            if (!file) return;
+            setLoading(true);
+            try {
+              await contractsService.uploadTransportDocument(bookingId, file);
+              toast.success("Transport document uploaded");
+            } catch (e) {
+              toast.error(e instanceof Error ? e.message : "Upload failed");
+            } finally {
+              setLoading(false);
+            }
+          }}
+        >
+          Upload document
+        </Button>
+      </Stack>
+    </ActionShell>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/gl-booking-form/ContractCapacityNotice.tsx

@@ -0,0 +1,52 @@
+import { Alert, Badge, Group, Stack, Text } from "@mantine/core";
+import { Boxes } from "lucide-react";
+
+import { useContractCapacity } from "@/hooks/contracts/useContracts";
+
+export function ContractCapacityNotice({
+  contractId,
+  isContainer,
+}: {
+  contractId: string;
+  isContainer: boolean;
+}) {
+  const { data: lines = [] } = useContractCapacity(contractId);
+
+  if (lines.length === 0) return null;
+
+  const allFull = lines.every((l) => l.remaining === 0);
+  const unit = isContainer ? "" : " tons";
+
+  return (
+    <Alert
+      color={allFull ? "red" : "edr-green"}
+      variant="light"
+      radius="md"
+      icon={<Boxes size={16} />}
+      title={allFull ? "Contract capacity reached" : "Remaining contract capacity"}
+    >
+      {allFull ? (
+        <Text fz={13}>
+          This contract has been fully booked. No further shipments can be created
+          against it.
+        </Text>
+      ) : (
+        <Stack gap={6} mt={4}>
+          {lines.map((l, i) => (
+            <Group key={i} justify="space-between" wrap="nowrap">
+              <Text fz={13}>{l.containerSize ?? "Bulk"}</Text>
+              <Badge
+                color={l.remaining === 0 ? "red" : "edr-green"}
+                variant="light"
+                radius="sm"
+              >
+                {l.remaining}
+                {unit} of {l.cap} left
+              </Badge>
+            </Group>
+          ))}
+        </Stack>
+      )}
+    </Alert>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/gl-booking-form/form-ui.tsx

@@ -0,0 +1,93 @@
+import { Box, Group, Paper, Text, Title } from "@mantine/core";
+import type { ReactNode } from "react";
+
+const INK = "#10202F";
+const MUTED = "#6B7C8E";
+const BORDER = "#E6ECF2";
+const GREEN_DARK = "#0A6F4D";
+
+export const fieldStyles = {
+  label: { fontWeight: 600, fontSize: 13, color: INK, marginBottom: 6 },
+  input: {
+    borderRadius: 12,
+    minHeight: 46,
+    height: 46,
+    fontSize: 14,
+    borderColor: BORDER,
+  },
+};
+
+export function StepLabel({ children }: { children: ReactNode }) {
+  return (
+    <Text
+      fz={11}
+      fw={700}
+      tt="uppercase"
+      c={MUTED}
+      style={{ letterSpacing: "0.07em" }}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export function StepCard({
+  children,
+  eyebrow,
+}: {
+  children: ReactNode;
+  eyebrow?: ReactNode;
+}) {
+  return (
+    <Paper
+      radius={20}
+      p={{ base: "lg", sm: 28 }}
+      withBorder
+      bg="white"
+      style={{ borderColor: BORDER, boxShadow: "0 2px 14px rgba(16,24,40,0.04)" }}
+    >
+      {eyebrow}
+      {children}
+    </Paper>
+  );
+}
+
+export function StepHeader({
+  title,
+  description,
+  icon,
+}: {
+  title: string;
+  description: string;
+  icon?: ReactNode;
+}) {
+  return (
+    <Group gap={14} align="flex-start" wrap="nowrap" mb={22}>
+      {icon ? (
+        <Box
+          style={{
+            flexShrink: 0,
+            width: 44,
+            height: 44,
+            borderRadius: 13,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "linear-gradient(135deg, #ECF6F1, #E4F3EC)",
+            color: GREEN_DARK,
+          }}
+        >
+          {icon}
+        </Box>
+      ) : null}
+      <Box>
+        <Title order={3} fz={20} fw={800} c={INK} style={{ letterSpacing: "-0.01em" }}>
+          {title}
+        </Title>
+        <Text size="sm" c={MUTED} mt={4} style={{ lineHeight: 1.5 }}>
+          {description}
+        </Text>
+      </Box>
+    </Group>
+  );
+}

apps/edr-freight-web/backoffice/src/components/layout/route-meta.ts

@@ -184,6 +184,13 @@ const ROUTE_META: Array<{ prefix: string; meta: PageMeta }> = [
       subtitle: "Manage dropdown options used across the platform",
     },
   },
+  {
+    prefix: "/dashboard/configuration/contract-validity-periods",
+    meta: {
+      title: "Contract validity periods",
+      subtitle: "Validity options staff choose when accepting a submitted contract",
+    },
+  },
   {
     prefix: "/dashboard/configuration/train-scheduling-rules",
     meta: {

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx

@@ -307,6 +307,14 @@ const RuleEngineFormDialog = ({
         size="md"
         radius="md"
         styles={inputStyles}
+        rightSection={
+          field.suffix ? (
+            <Text size="sm" c="dimmed" fw={600} pr={4}>
+              {field.suffix}
+            </Text>
+          ) : undefined
+        }
+        rightSectionWidth={field.suffix ? 52 : undefined}
       />
     );
   };

apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx

@@ -94,6 +94,15 @@ export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode =>
     return <Text size="sm">{Number.isNaN(num) ? String(value) : num.toLocaleString()}</Text>;
   }
 
+  if (format === "currency") {
+    const num = Number(value);
+    return (
+      <Text size="sm" fw={500}>
+        {Number.isNaN(num) ? String(value) : `USD ${num.toLocaleString()}`}
+      </Text>
+    );
+  }
+
   if (format === "date") {
     const d = new Date(String(value));
     if (Number.isNaN(d.getTime())) return <Text size="sm">{String(value)}</Text>;

apps/edr-freight-web/backoffice/src/components/trainScheduling/AllocateBookingWizard.tsx

@@ -34,6 +34,7 @@ import {
 
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { api } from "@/services/api";
+import { formatRouteLabel } from "@/services/routes.service";
 import { useToast } from "@/hooks/use-toast";
 import { trainSchedulingService } from "@/services/trainScheduling.service";
 import type { BookingDetail } from "@/types/booking";
@@ -138,7 +139,9 @@ export function AllocateBookingWizard({
   const schedulesQuery = useQuery(
     api.trainScheduling.scheduleList.queryOptions({ input: {} }),
   );
-  const routesQuery = useQuery(api.routes.list.queryOptions());
+  const routesQuery = useQuery(
+    api.routes.list.queryOptions({ input: { status: "AVAILABLE" } }),
+  );
   const locomotivesQuery = useQuery(
     api.trainScheduling.availableLocomotives.queryOptions({
       input: {
@@ -244,7 +247,7 @@ export function AllocateBookingWizard({
   }, [containerUnits, containerSlots, savedPlacementsFromSchedule]);
 
   const activeRoutes = useMemo(
-    () => (routesQuery.data ?? []).filter((r) => r.isActive),
+    () => routesQuery.data ?? [],
     [routesQuery.data],
   );
 
@@ -522,7 +525,7 @@ export function AllocateBookingWizard({
                 <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="sm">
                   <Select
                     label="Route"
-                    data={activeRoutes.map((r) => ({ value: r.id, label: r.name }))}
+                    data={activeRoutes.map((r) => ({ value: r.id, label: formatRouteLabel(r) }))}
                     value={routeId || null}
                     onChange={(v) => setRouteId(v ?? "")}
                     searchable

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

@@ -72,6 +72,13 @@ function FeeCard({ fee }: { fee: FeePreview }) {
           <Row label="Chargeable days" value={`${fee.chargeableDays} (after ${fee.freeDays} free)`} />
           <Row label="Containers" value={String(fee.containerCount ?? 1)} />
           <Row label="Billable units" value={`${fee.billableUnits ?? fee.chargeableDays} container-day(s)`} />
+          {(fee.tiers ?? []).map((tier) => (
+            <Row
+              key={`${tier.appliedFromDay}-${tier.appliedToDay}-${tier.ratePerDay}`}
+              label={`Days ${tier.appliedFromDay}-${tier.appliedToDay}`}
+              value={`${tier.days} x ${money(tier.ratePerDay, fee.currency)} = ${money(tier.amount, fee.currency)}`}
+            />
+          ))}
         </Stack>
       )}
     </Card>

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

@@ -41,7 +41,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/services/api';
 import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
 import { useToast } from '@/hooks/use-toast';
-import { useInventoryInquiry } from '@/hooks/useWarehouses';
+import { useAllWarehouseYards, useAllWarehouseZones, useInventoryInquiry } from '@/hooks/useWarehouses';
 import { firstMileService } from '@/services/first-mile.service';
 import { warehouseService } from '@/services/warehouse.service';
 import type {
@@ -54,7 +54,10 @@ import type {
   ReadyToLoadRow,
   ReceiveInventoryPayload,
   TruckEntrancePayload,
+  Warehouse,
   WarehouseInventoryItem,
+  WarehouseYard,
+  WarehouseZone,
 } from '@/types/warehouse';
 import { BookingSelect } from './BookingSelect';
 import { DeliverInventoryModal } from './DeliverInventoryModal';
@@ -70,12 +73,17 @@ import { extractErrorMessage, formatDate, formatNumber, inventoryStatusOptions }
 import { openPdfBlob } from './pdf';
 import '@/components/overview/overview.css';
 
+type ImportUnloadAssignment = { bookingId: string; warehouseId: string; yardId: string; zoneId: string };
+type ImportUnloadAssignmentDraft = Partial<Omit<ImportUnloadAssignment, 'bookingId'>>;
+
 interface ReceiveInventoryModalProps {
   opened: boolean;
   onClose: () => void;
   /** When supplied the modal locks to a single booking (legacy single-receive). */
   bookingId?: string;
   bookingLabel?: string;
+  mode?: 'single' | 'bulk';
+  direction?: WarehouseFlowDirection;
   onReceived?: () => void;
 }
 
@@ -142,6 +150,7 @@ interface TruckEntranceFormState {
   packagingType: string;
   unitCount: number | '';
   grossWeightKg: number | '';
+  weighingRequired: boolean | null;
   netWeightKg: number | '';
   volumeDimensions: string;
   conditionAtReceipt: string;
@@ -163,11 +172,17 @@ interface LockedTruckEntranceFields {
   tin?: boolean;
   edrDigitalBookingId?: boolean;
   customerPhone?: boolean;
+  truckPlateNumber?: boolean;
+  trailerPlateNumber?: boolean;
   assignedEquipmentNumber?: boolean;
   itemDescription?: boolean;
   packagingType?: boolean;
   unitCount?: boolean;
   grossWeightKg?: boolean;
+  driverName?: boolean;
+  driverPhone?: boolean;
+  driverLicenseNumber?: boolean;
+  truckType?: boolean;
 }
 
 type PackagingFreightType = 'CONTAINER' | 'BULK' | 'MIXED';
@@ -190,6 +205,7 @@ const emptyTruckEntrance = (): TruckEntranceFormState => ({
   packagingType: '',
   unitCount: '',
   grossWeightKg: '',
+  weighingRequired: null,
   netWeightKg: '',
   volumeDimensions: '',
   conditionAtReceipt: '',
@@ -206,13 +222,24 @@ const emptyTruckEntrance = (): TruckEntranceFormState => ({
 });
 
 const toTruckEntrancePayload = (form: TruckEntranceFormState): TruckEntrancePayload => ({
+  ownerName: form.ownerName.trim() || undefined,
+  consigneeDetails: form.consigneeDetails.trim() || undefined,
+  edrDigitalBookingId: form.edrDigitalBookingId.trim() || undefined,
+  tin: form.tin.trim() || undefined,
+  customerPhone: form.customerPhone.trim() || undefined,
   truckPlateNumber: form.truckPlateNumber.trim(),
   trailerPlateNumber: form.trailerPlateNumber.trim() || undefined,
+  assignedEquipmentNumber: form.assignedEquipmentNumber.trim() || undefined,
   customsSealNumber: form.customsSealNumber.trim() || undefined,
   declarationNumber: form.declarationNumber.trim() || undefined,
   incoterms: form.incoterms.trim() || undefined,
   hsCodes: form.hsCodes.trim() || undefined,
   itemCode: form.itemCode.trim() || undefined,
+  itemDescription: form.itemDescription.trim() || undefined,
+  packagingType: form.packagingType.trim() || undefined,
+  unitCount: form.unitCount === '' ? undefined : Number(form.unitCount),
+  weighingRequired: form.weighingRequired ?? undefined,
+  grossWeightKg: form.weighingRequired && form.grossWeightKg !== '' ? Number(form.grossWeightKg) : undefined,
   netWeightKg: form.netWeightKg === '' ? undefined : Number(form.netWeightKg),
   volumeDimensions: form.volumeDimensions.trim() || undefined,
   conditionAtReceipt: form.conditionAtReceipt.trim() || undefined,
@@ -222,8 +249,11 @@ const toTruckEntrancePayload = (form: TruckEntranceFormState): TruckEntrancePayl
   driverPhone: form.driverPhone.trim(),
   driverLicenseNumber: form.driverLicenseNumber.trim() || undefined,
   truckType: form.truckType.trim() || undefined,
-  entranceTareWeightKg: Number(form.entranceTareWeightKg),
-  exitTareWeightKg: form.exitTareWeightKg === '' ? undefined : Number(form.exitTareWeightKg),
+  entranceTareWeightKg:
+    form.entranceTareWeightKg === ''
+      ? undefined
+      : Number(form.entranceTareWeightKg),
+  exitTareWeightKg: form.weighingRequired && form.exitTareWeightKg !== '' ? Number(form.exitTareWeightKg) : undefined,
   driverSignatoryName: form.driverSignatoryName.trim() || undefined,
   warehouseManagerName: form.warehouseManagerName.trim() || undefined,
 });
@@ -242,22 +272,31 @@ const truckEntranceFromBookings = (bookings: EligibleBooking[]): {
   const tin = commonNonEmptyValue(bookings.map((booking) => booking.customerTin));
   const customerPhone = commonNonEmptyValue(bookings.map((booking) => booking.customerPhone));
   const consigneeDetails = commonNonEmptyValue(bookings.map((booking) => booking.customer));
-  const assignedEquipmentNumber = commonNonEmptyValue(bookings.map((booking) => booking.containerNumber));
+  const assignedEquipmentNumber = commonNonEmptyValue(
+    bookings.map((booking) => booking.customerTruckContainerNumber || booking.containerNumber),
+  );
   const itemDescription = commonNonEmptyValue(bookings.map((booking) => booking.cargoDescription ?? booking.cargo));
   const packagingType = commonNonEmptyValue(bookings.map((booking) => booking.containerPackagingType));
+  const truckPlateNumber = commonNonEmptyValue(
+    bookings.map((booking) => booking.firstMileTruckPlateNumber || booking.customerTruckPlateNumber),
+  );
+  const trailerPlateNumber = commonNonEmptyValue(bookings.map((booking) => booking.firstMileTrailerPlateNumber));
+  const driverName = commonNonEmptyValue(
+    bookings.map((booking) => booking.firstMileDriverName || booking.customerTruckDriverName),
+  );
+  const driverPhone = commonNonEmptyValue(bookings.map((booking) => booking.firstMileDriverPhone));
+  const driverLicenseNumber = commonNonEmptyValue(bookings.map((booking) => booking.firstMileDriverLicenseNumber));
+  const truckType = commonNonEmptyValue(
+    bookings.map((booking) => booking.firstMileTruckType || booking.customerTruckType),
+  );
   const edrDigitalBookingId =
     bookings.length === 1
       ? bookings[0]?.reference ?? bookings[0]?.id ?? ''
       : commonNonEmptyValue(bookings.map((booking) => booking.reference));
-  const firstMileBooking = bookings.length === 1 ? bookings[0] : null;
   const unitCount =
     bookings.length === 1 && bookings[0]?.containerQuantity != null
       ? Number(bookings[0].containerQuantity)
       : '';
-  const grossWeightKg =
-    bookings.length === 1 && bookings[0]?.weight != null
-      ? Number(bookings[0].weight)
-      : '';
   const freightTypes = [...new Set(bookings.map((booking) => booking.freightType).filter(Boolean))];
   const packagingFreightType =
     freightTypes.length === 1 && freightTypes[0] === 'CONTAINER'
@@ -278,13 +317,13 @@ const truckEntranceFromBookings = (bookings: EligibleBooking[]): {
       itemDescription,
       packagingType,
       unitCount,
-      grossWeightKg,
-      truckPlateNumber: firstMileBooking?.firstMileTruckPlateNumber ?? '',
-      trailerPlateNumber: firstMileBooking?.firstMileTrailerPlateNumber ?? '',
-      driverName: firstMileBooking?.firstMileDriverName ?? '',
-      driverPhone: firstMileBooking?.firstMileDriverPhone ?? '',
-      driverLicenseNumber: firstMileBooking?.firstMileDriverLicenseNumber ?? '',
-      truckType: firstMileBooking?.firstMileTruckType ?? '',
+      grossWeightKg: '',
+      truckPlateNumber,
+      trailerPlateNumber,
+      driverName,
+      driverPhone,
+      driverLicenseNumber,
+      truckType,
     },
     lockedFields: {
       ownerName: Boolean(ownerName),
@@ -296,7 +335,13 @@ const truckEntranceFromBookings = (bookings: EligibleBooking[]): {
       itemDescription: Boolean(itemDescription),
       packagingType: Boolean(packagingType),
       unitCount: unitCount !== '',
-      grossWeightKg: grossWeightKg !== '',
+      grossWeightKg: false,
+      truckPlateNumber: Boolean(truckPlateNumber),
+      trailerPlateNumber: Boolean(trailerPlateNumber),
+      driverName: Boolean(driverName),
+      driverPhone: Boolean(driverPhone),
+      driverLicenseNumber: Boolean(driverLicenseNumber),
+      truckType: Boolean(truckType),
     },
     packagingFreightType,
   };
@@ -338,11 +383,13 @@ function TruckEntranceFields({
   onChange,
   lockedFields,
   packagingFreightType = 'MIXED',
+  allowTruckWeighing = true,
 }: {
   value: TruckEntranceFormState;
   onChange: (next: TruckEntranceFormState) => void;
   lockedFields?: LockedTruckEntranceFields;
   packagingFreightType?: PackagingFreightType;
+  allowTruckWeighing?: boolean;
 }) {
   const packagingOptions = packagingOptionsFor(packagingFreightType);
   const quantityLabel =
@@ -396,11 +443,13 @@ function TruckEntranceFields({
           label="Truck plate number"
           required
           value={value.truckPlateNumber}
+          readOnly={lockedFields?.truckPlateNumber}
           onChange={(e) => onChange({ ...value, truckPlateNumber: e.currentTarget.value })}
         />
         <TextInput
           label="Trailer plate number"
           value={value.trailerPlateNumber}
+          readOnly={lockedFields?.trailerPlateNumber}
           onChange={(e) => onChange({ ...value, trailerPlateNumber: e.currentTarget.value })}
         />
       </Group>
@@ -422,12 +471,14 @@ function TruckEntranceFields({
           label="Driver name"
           required
           value={value.driverName}
+          readOnly={lockedFields?.driverName}
           onChange={(e) => onChange({ ...value, driverName: e.currentTarget.value })}
         />
         <TextInput
           label="Driver phone"
           required
           value={value.driverPhone}
+          readOnly={lockedFields?.driverPhone}
           onChange={(e) => onChange({ ...value, driverPhone: e.currentTarget.value })}
         />
       </Group>
@@ -435,29 +486,61 @@ function TruckEntranceFields({
         <TextInput
           label="Driver license number"
           value={value.driverLicenseNumber}
+          readOnly={lockedFields?.driverLicenseNumber}
           onChange={(e) => onChange({ ...value, driverLicenseNumber: e.currentTarget.value })}
         />
         <TextInput
           label="Truck type"
           value={value.truckType}
+          readOnly={lockedFields?.truckType}
           onChange={(e) => onChange({ ...value, truckType: e.currentTarget.value })}
         />
       </Group>
-      <Group grow>
-        <NumberInput
-          label="Entrance tare weight (kg)"
-          required
-          min={0}
-          value={value.entranceTareWeightKg}
-          onChange={(v) => onChange({ ...value, entranceTareWeightKg: v === '' ? '' : Number(v) })}
-        />
-        <NumberInput
-          label="Exit tare weight (kg)"
-          min={0}
-          value={value.exitTareWeightKg}
-          onChange={(v) => onChange({ ...value, exitTareWeightKg: v === '' ? '' : Number(v) })}
-        />
-      </Group>
+      {allowTruckWeighing ? (
+        <>
+          <Select
+            label="Weighing"
+            required
+            data={[
+              { value: 'YES', label: 'Yes' },
+              { value: 'NO', label: 'No' },
+            ]}
+            value={value.weighingRequired == null ? null : value.weighingRequired ? 'YES' : 'NO'}
+            onChange={(next) =>
+              onChange({
+                ...value,
+                weighingRequired: next === 'YES' ? true : next === 'NO' ? false : null,
+                grossWeightKg: next === 'YES' ? value.grossWeightKg : '',
+                exitTareWeightKg: next === 'YES' ? value.exitTareWeightKg : '',
+              })
+            }
+          />
+          {value.weighingRequired && (
+            <Group grow>
+              <NumberInput
+                label="Gross weight (kg)"
+                required
+                min={0}
+                value={value.grossWeightKg}
+                onChange={(v) => onChange({ ...value, grossWeightKg: v === '' ? '' : Number(v) })}
+              />
+              <NumberInput
+                label="Exit tare weight (kg)"
+                required
+                min={0}
+                value={value.exitTareWeightKg}
+                onChange={(v) => onChange({ ...value, exitTareWeightKg: v === '' ? '' : Number(v) })}
+              />
+            </Group>
+          )}
+        </>
+      ) : (
+        <Alert icon={<Info size={16} />} color="green" variant="light">
+          <Text size="sm">
+            Truck weighing is not required for a received first-mile arrival. The GRN uses the booking weight.
+          </Text>
+        </Alert>
+      )}
 
       <Text size="sm" fw={600} mt="xs">Customs and compliance</Text>
       <Group grow>
@@ -510,21 +593,12 @@ function TruckEntranceFields({
           onChange={(v) => onChange({ ...value, unitCount: v === '' ? '' : Number(v) })}
         />
       </Group>
-      <Group grow>
-        <NumberInput
-          label="Gross weight (kg)"
-          min={0}
-          value={value.grossWeightKg}
-          readOnly={lockedFields?.grossWeightKg}
-          onChange={(v) => onChange({ ...value, grossWeightKg: v === '' ? '' : Number(v) })}
-        />
-        <NumberInput
-          label="Net weight (kg)"
-          min={0}
-          value={value.netWeightKg}
-          onChange={(v) => onChange({ ...value, netWeightKg: v === '' ? '' : Number(v) })}
-        />
-      </Group>
+      <NumberInput
+        label="Net weight (kg)"
+        min={0}
+        value={value.netWeightKg}
+        onChange={(v) => onChange({ ...value, netWeightKg: v === '' ? '' : Number(v) })}
+      />
       <TextInput
         label="Volume / dimensions"
         value={value.volumeDimensions}
@@ -650,11 +724,15 @@ function EligibleTab({
   location,
   enabled,
   onChanged,
+  focusedBookingId,
+  focusedBookingLabel,
 }: {
   direction: 'IMPORT' | 'EXPORT';
   location: Location;
   enabled: boolean;
   onChanged?: () => void;
+  focusedBookingId?: string;
+  focusedBookingLabel?: string;
 }) {
   const { toast } = useToast();
   const qc = useQueryClient();
@@ -664,7 +742,15 @@ function EligibleTab({
       enabled,
     }),
   );
-  const rows = useMemo(() => allRows.filter((r) => r.direction === direction), [allRows, direction]);
+  const rows = useMemo(
+    () =>
+      allRows.filter(
+        (r) =>
+          r.direction === direction &&
+          (!focusedBookingId || r.id === focusedBookingId),
+      ),
+    [allRows, direction, focusedBookingId],
+  );
   const bulkReceive = useMutation(api.warehouses.bulkReceive.mutationOptions());
   const requestFirstMile = useMutation({
     mutationFn: (reference: string) => firstMileService.accept(reference),
@@ -766,6 +852,8 @@ function EligibleTab({
     [pendingReceiveIds, rows],
   );
   const pendingHasFirstMile = pendingReceiveRows.some((row) => row.hasFirstMile);
+  const pendingUsesFirstMile =
+    pendingReceiveRows.length > 0 && pendingReceiveRows.every((row) => row.hasFirstMile);
 
   const toggleAll = () =>
     setSelected(allSelected ? new Set() : new Set(selectableRows.map((r) => r.id)));
@@ -788,6 +876,18 @@ function EligibleTab({
         title: `${r.receivedCount} received at ${direction === 'EXPORT' ? 'facility' : 'warehouse'}`,
         description: r.results.find((item) => item.grnNumber)?.grnNumber ?? (r.skippedCount ? `${r.skippedCount} skipped` : undefined),
       });
+      const firstGrn = r.results.find((item) => item.inventoryId && item.grnNumber);
+      if (focusedBookingId && firstGrn?.inventoryId && firstGrn.grnNumber) {
+        const pdfWindow = window.open('', '_blank');
+        try {
+          const response = await warehouseService.downloadGrnDocument(firstGrn.inventoryId);
+          const opened = openPdfBlob(response.data, `grn-${firstGrn.grnNumber}.pdf`, pdfWindow);
+          toast({ title: opened ? 'GRN document opened' : 'GRN document downloaded' });
+        } catch (error) {
+          pdfWindow?.close();
+          toast({ variant: 'destructive', title: 'GRN document failed', description: extractErrorMessage(error) });
+        }
+      }
       setSelected(new Set());
       setTruckOpen(false);
       setPendingReceiveIds([]);
@@ -822,32 +922,65 @@ function EligibleTab({
       void receiveBookings(filteredIds);
       return;
     }
+    const hasFirstMileRows = selectedRows.some((row) => row.hasFirstMile);
+    const hasCustomerTruckRows = selectedRows.some((row) => !row.hasFirstMile);
+    if (hasFirstMileRows && hasCustomerTruckRows) {
+      toast({
+        variant: 'destructive',
+        title: 'Receive separately',
+        description: 'First-mile arrivals and customer-truck arrivals use different truck evidence. Select one group at a time.',
+      });
+      return;
+    }
     const { form, lockedFields, packagingFreightType: nextPackagingFreightType } = truckEntranceFromBookings(selectedRows);
     const totalContainerQuantity = selectedRows.reduce(
       (sum, row) => sum + Number(row.containerQuantity ?? 0),
       0,
     );
+    const usesFirstMile = selectedRows.length > 0 && selectedRows.every((row) => row.hasFirstMile);
+    const usesCustomerAssignedTruck =
+      selectedRows.length > 0 &&
+      selectedRows.every((row) => !row.hasFirstMile && Boolean(row.customerTruckAssignedAt));
     const normalizedForm =
       nextPackagingFreightType === 'CONTAINER' && totalContainerQuantity > 0
         ? {
             ...form,
             unitCount: totalContainerQuantity,
           }
-        : form;
+        : {
+            ...form,
+          };
     setPendingReceiveIds(filteredIds);
     setReceivedAt(new Date().toISOString());
     setTruckForm(normalizedForm);
     setLockedTruckFields({
       ...lockedFields,
       unitCount: nextPackagingFreightType === 'CONTAINER' && totalContainerQuantity > 0,
+      assignedEquipmentNumber: usesCustomerAssignedTruck
+        ? lockedFields.assignedEquipmentNumber
+        : lockedFields.assignedEquipmentNumber,
+      truckPlateNumber: (usesFirstMile || usesCustomerAssignedTruck) && lockedFields.truckPlateNumber,
+      trailerPlateNumber: usesFirstMile && lockedFields.trailerPlateNumber,
+      driverName: (usesFirstMile || usesCustomerAssignedTruck) && lockedFields.driverName,
+      driverPhone: usesFirstMile && lockedFields.driverPhone,
+      driverLicenseNumber: usesFirstMile && lockedFields.driverLicenseNumber,
+      truckType: (usesFirstMile || usesCustomerAssignedTruck) && lockedFields.truckType,
     });
     setPackagingFreightType(nextPackagingFreightType);
     setTruckOpen(true);
   };
 
   const receive = async () => {
-    if (!truckForm.truckPlateNumber.trim() || !truckForm.driverName.trim() || !truckForm.driverPhone.trim() || truckForm.entranceTareWeightKg === '') {
-      toast({ variant: 'destructive', title: 'Truck, driver and entrance tare weight are required' });
+    if (!truckForm.truckPlateNumber.trim() || !truckForm.driverName.trim() || !truckForm.driverPhone.trim()) {
+      toast({ variant: 'destructive', title: 'Truck and driver information are required' });
+      return;
+    }
+    if (!pendingUsesFirstMile && truckForm.weighingRequired == null) {
+      toast({ variant: 'destructive', title: 'Select whether customer truck weighing is required' });
+      return;
+    }
+    if (truckForm.weighingRequired && (truckForm.grossWeightKg === '' || truckForm.exitTareWeightKg === '')) {
+      toast({ variant: 'destructive', title: 'Gross weight and exit tare weight are required when weighing is Yes' });
       return;
     }
     await receiveBookings(pendingReceiveIds, toTruckEntrancePayload(truckForm));
@@ -906,7 +1039,9 @@ function EligibleTab({
         </Group>
       ) : statusFilteredRows.length === 0 ? (
         <Text c="dimmed" ta="center" py="lg" size="sm">
-          No eligible PAID {direction.toLowerCase()} bookings to receive.
+          {focusedBookingLabel
+            ? `${focusedBookingLabel} is not eligible for warehouse receiving yet.`
+            : `No eligible PAID ${direction.toLowerCase()} bookings to receive.`}
         </Text>
       ) : (
         <Table.ScrollContainer minWidth={1700}>
@@ -1053,8 +1188,8 @@ function EligibleTab({
         <Stack gap="md">
           <Alert icon={<Truck size={16} />} color={pendingHasFirstMile ? 'green' : 'blue'} variant="light">
             <Text size="sm">
-              {pendingHasFirstMile
-                ? 'Assigned first-mile truck and driver details are prefilled. Confirm or update the actual arrival details before GRN.'
+              {pendingUsesFirstMile
+                ? 'Received first-mile truck and driver details are pulled from the first-mile record. GRN uses booking cargo, quantity and weight.'
                 : 'Register the customer or third-party truck and driver before export receiving and GRN.'}
             </Text>
           </Alert>
@@ -1109,6 +1244,7 @@ function EligibleTab({
             onChange={setTruckForm}
             lockedFields={lockedTruckFields}
             packagingFreightType={packagingFreightType}
+            allowTruckWeighing={!pendingUsesFirstMile}
           />
           <Group justify="flex-end">
             <Button variant="default" onClick={() => setTruckOpen(false)} disabled={bulkReceive.isPending}>
@@ -1611,14 +1747,59 @@ function LoadedExportTab({
   );
 }
 
-/** Assigned bookings/items for an arrived import train (read-only detail view). */
-function ImportTrainDetailTable({ train }: { train: ImportTrain }) {
+const importLocationTypesForFreight = (freightType: string | null | undefined) => {
+  const normalized = (freightType ?? '').toUpperCase();
+  if (normalized === 'CONTAINER') {
+    return { yardTypes: ['CONTAINER_YARD', 'GENERAL_CARGO_YARD'], zoneTypes: ['CONTAINER_ZONE', 'GENERAL_CARGO_ZONE'] };
+  }
+  return { yardTypes: ['BULK_YARD', 'GENERAL_CARGO_YARD'], zoneTypes: ['BULK_ZONE', 'GENERAL_CARGO_ZONE'] };
+};
+
+const isImportContainerFreight = (freightType: string | null | undefined) =>
+  (freightType ?? '').toUpperCase() === 'CONTAINER';
+
+const isImportUnloadPending = (item: ImportTrainItem) =>
+  !item.currentStatus || item.currentStatus === 'RECEIVED';
+
+/** Assigned bookings/items for an arrived import train with per-booking unload locations. */
+function ImportTrainDetailTable({
+  train,
+  warehouses,
+  yards,
+  zones,
+  assignments,
+  onAssignmentChange,
+  onReadyChange,
+}: {
+  train: ImportTrain;
+  warehouses: Warehouse[];
+  yards: WarehouseYard[];
+  zones: WarehouseZone[];
+  assignments: Record<string, ImportUnloadAssignmentDraft>;
+  onAssignmentChange: (bookingId: string, draft: ImportUnloadAssignmentDraft) => void;
+  onReadyChange: (ready: boolean) => void;
+}) {
   const { data: items = [], isLoading } = useQuery(
     api.warehouses.importTrainItems.queryOptions({
       input: { scheduleId: train.scheduleId },
       enabled: Boolean(train.scheduleId),
     }),
   );
+  const warehouseOptions = useMemo(
+    () => warehouses.map((warehouse) => ({ value: warehouse.id, label: `${warehouse.name} (${warehouse.code})` })),
+    [warehouses],
+  );
+
+  useEffect(() => {
+    const pending = items.filter(isImportUnloadPending);
+    onReadyChange(
+      pending.length > 0 &&
+        pending.every((item) => {
+          const draft = assignments[item.bookingId];
+          return Boolean(draft?.warehouseId && draft.yardId && draft.zoneId);
+        }),
+    );
+  }, [assignments, items]);
 
   if (isLoading) {
     return (
@@ -1648,6 +1829,9 @@ function ImportTrainDetailTable({ train }: { train: ImportTrain }) {
           <Table.Th>Cargo Type</Table.Th>
           <Table.Th>Weight</Table.Th>
           <Table.Th>Arrival</Table.Th>
+          <Table.Th>Warehouse</Table.Th>
+          <Table.Th>Yard</Table.Th>
+          <Table.Th>Zone</Table.Th>
           <Table.Th>Inspection</Table.Th>
           <Table.Th>Current Status</Table.Th>
           <Table.Th>Last Mile</Table.Th>
@@ -1655,7 +1839,18 @@ function ImportTrainDetailTable({ train }: { train: ImportTrain }) {
         </Table.Tr>
       </Table.Thead>
       <Table.Tbody>
-        {items.map((it: ImportTrainItem) => (
+        {items.map((it: ImportTrainItem) => {
+          const draft = assignments[it.bookingId] ?? {};
+          const { yardTypes, zoneTypes } = importLocationTypesForFreight(it.freightType);
+          const yardOptions = yards
+            .filter((yard) => yard.warehouseId === draft.warehouseId && yardTypes.includes(yard.type))
+            .map((yard) => ({ value: yard.id, label: `${yard.name} (${yard.code})` }));
+          const zoneOptions = zones
+            .filter((zone) => zone.yardId === draft.yardId && zoneTypes.includes(zone.type))
+            .map((zone) => ({ value: zone.id, label: `${zone.name} (${zone.code})` }));
+          const pending = isImportUnloadPending(it);
+
+          return (
           <Table.Tr key={`${it.bookingId}-${it.sequenceNo ?? 'wagon'}`}>
             <Table.Td>
               <Text size="xs" fw={600}>
@@ -1676,6 +1871,41 @@ function ImportTrainDetailTable({ train }: { train: ImportTrain }) {
             <Table.Td>{it.cargoType ?? '—'}</Table.Td>
             <Table.Td>{formatNumber(Number(it.weight))}</Table.Td>
             <Table.Td>{formatDate(it.arrivalTime)}</Table.Td>
+            <Table.Td>
+              <Select
+                placeholder="Warehouse"
+                data={warehouseOptions}
+                value={draft.warehouseId ?? null}
+                onChange={(value) => onAssignmentChange(it.bookingId, { warehouseId: value ?? undefined })}
+                searchable
+                disabled={!pending}
+                w={210}
+              />
+            </Table.Td>
+            <Table.Td>
+              <Select
+                placeholder={isImportContainerFreight(it.freightType) ? 'Container yard' : 'Bulk yard'}
+                data={yardOptions}
+                value={draft.yardId ?? null}
+                onChange={(value) =>
+                  onAssignmentChange(it.bookingId, { ...draft, yardId: value ?? undefined, zoneId: undefined })
+                }
+                searchable
+                disabled={!pending || !draft.warehouseId}
+                w={190}
+              />
+            </Table.Td>
+            <Table.Td>
+              <Select
+                placeholder={isImportContainerFreight(it.freightType) ? 'Container zone' : 'Bulk zone'}
+                data={zoneOptions}
+                value={draft.zoneId ?? null}
+                onChange={(value) => onAssignmentChange(it.bookingId, { ...draft, zoneId: value ?? undefined })}
+                searchable
+                disabled={!pending || !draft.yardId}
+                w={190}
+              />
+            </Table.Td>
             <Table.Td>
               <Badge size="xs" variant="light" color={it.inspectionStatus === 'PASSED' ? 'green' : 'gray'}>
                 {it.inspectionStatus ?? 'Not inspected'}
@@ -1691,7 +1921,8 @@ function ImportTrainDetailTable({ train }: { train: ImportTrain }) {
             </Table.Td>
             <Table.Td>{it.pickupOption}</Table.Td>
           </Table.Tr>
-        ))}
+          );
+        })}
       </Table.Tbody>
     </Table>
   );
@@ -1715,13 +1946,42 @@ function ImportArriveQueueTab({
   const { data: trains = [], isLoading } = useQuery(
     api.warehouses.importArriveQueue.queryOptions({ enabled }),
   );
+  const { data: warehouses = [], isLoading: warehousesLoading } = useQuery(
+    api.warehouses.list.queryOptions({ input: { filter: { status: 'ACTIVE' } }, enabled }),
+  );
+  const { data: yards = [] } = useAllWarehouseYards();
+  const { data: zones = [] } = useAllWarehouseZones();
   const autoUnloadMutation = useMutation(
     api.warehouses.autoUnloadArrivedBookings.mutationOptions(),
   );
   const [openId, setOpenId] = useState<string | null>(null);
   const [busyId, setBusyId] = useState<string | null>(null);
+  const [assignmentsBySchedule, setAssignmentsBySchedule] = useState<
+    Record<string, Record<string, ImportUnloadAssignmentDraft>>
+  >({});
+  const [readyBySchedule, setReadyBySchedule] = useState<Record<string, boolean>>({});
 
   const autoUnload = async (train: ImportTrain) => {
+    const assignments = Object.entries(assignmentsBySchedule[train.scheduleId] ?? {})
+      .filter((entry): entry is [string, Required<ImportUnloadAssignmentDraft>] =>
+        Boolean(entry[1].warehouseId && entry[1].yardId && entry[1].zoneId),
+      )
+      .map(([bookingId, draft]) => ({
+        bookingId,
+        warehouseId: draft.warehouseId,
+        yardId: draft.yardId,
+        zoneId: draft.zoneId,
+      }));
+
+    if (!readyBySchedule[train.scheduleId] || assignments.length === 0) {
+      toast({
+        variant: 'destructive',
+        title: 'Assign locations',
+        description: 'Select warehouse, yard and zone for each pending booking before unloading.',
+      });
+      return;
+    }
+
     if (isFullyUnloaded(train)) {
       toast({
         title: 'Already unloaded',
@@ -1732,7 +1992,7 @@ function ImportArriveQueueTab({
 
     setBusyId(train.scheduleId);
     try {
-      const r = await autoUnloadMutation.mutateAsync(train.scheduleId);
+      const r = await autoUnloadMutation.mutateAsync({ scheduleId: train.scheduleId, assignments });
       const alreadyUnloaded = r.unloadedCount === 0 && r.skippedCount > 0 && r.failedCount === 0;
       const firstReason = r.results.find((item) => item.reason)?.reason;
       const extra = [
@@ -1831,7 +2091,7 @@ function ImportArriveQueueTab({
                             color={fullyUnloaded ? 'gray' : 'indigo'}
                             leftSection={<Truck size={14} />}
                             loading={busyId === t.scheduleId}
-                            disabled={fullyUnloaded || t.totalBookings === 0}
+                            disabled={fullyUnloaded || t.totalBookings === 0 || !readyBySchedule[t.scheduleId] || warehousesLoading}
                             onClick={() => autoUnload(t)}
                           >
                             {fullyUnloaded ? 'Already Unloaded' : 'Auto Unload Arrived Bookings'}
@@ -1842,7 +2102,25 @@ function ImportArriveQueueTab({
                     {isOpen && (
                       <Table.Tr>
                         <Table.Td colSpan={11} bg="var(--mantine-color-gray-0)">
-                          <ImportTrainDetailTable train={t} />
+                          <ImportTrainDetailTable
+                            train={t}
+                            warehouses={warehouses}
+                            yards={yards}
+                            zones={zones}
+                            assignments={assignmentsBySchedule[t.scheduleId] ?? {}}
+                            onAssignmentChange={(bookingId, draft) =>
+                              setAssignmentsBySchedule((current) => ({
+                                ...current,
+                                [t.scheduleId]: {
+                                  ...(current[t.scheduleId] ?? {}),
+                                  [bookingId]: draft.warehouseId ? draft : {},
+                                },
+                              }))
+                            }
+                            onReadyChange={(ready) =>
+                              setReadyBySchedule((current) => ({ ...current, [t.scheduleId]: ready }))
+                            }
+                          />
                         </Table.Td>
                       </Table.Tr>
                     )}
@@ -1934,6 +2212,11 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
             reference: row.bookingReference ?? row.bookingId,
             tradeDirection: 'IMPORT',
             lastMileDeliveryAddress: row.lastMileRequested ? row.pickupOption : null,
+            customerTruckPlateNumber: row.customerTruckPlateNumber,
+            customerTruckDriverName: row.customerTruckDriverName,
+            customerTruckType: row.customerTruckType,
+            customerTruckContainerNumber: row.customerTruckContainerNumber,
+            customerTruckAssignedAt: row.customerTruckAssignedAt,
           }
         : null,
     }) as unknown as WarehouseInventoryItem;
@@ -2262,6 +2545,8 @@ interface WarehouseFlowWorkbenchProps {
   direction?: WarehouseFlowDirection;
   enabled?: boolean;
   onChanged?: () => void;
+  focusedBookingId?: string;
+  focusedBookingLabel?: string;
 }
 
 function WarehouseQueueTabs<TValue extends string>({
@@ -2481,10 +2766,14 @@ function ExportWarehouseTabs({
   enabled,
   location,
   onChanged,
+  focusedBookingId,
+  focusedBookingLabel,
 }: {
   enabled: boolean;
   location: Location;
   onChanged?: () => void;
+  focusedBookingId?: string;
+  focusedBookingLabel?: string;
 }) {
   const [activeTab, setActiveTab] = useState<ExportWarehouseTab>('receive-queue');
   const { data: eligibleRows = [] } = useQuery(
@@ -2543,7 +2832,14 @@ function ExportWarehouseTabs({
       <WarehouseQueueTabs value={activeTab} onChange={setActiveTab} tabs={tabs} />
 
       {activeTab === 'receive-queue' && (
-        <EligibleTab direction="EXPORT" location={location} enabled={enabled} onChanged={onChanged} />
+        <EligibleTab
+          direction="EXPORT"
+          location={location}
+          enabled={enabled}
+          onChanged={onChanged}
+          focusedBookingId={focusedBookingId}
+          focusedBookingLabel={focusedBookingLabel}
+        />
       )}
       {activeTab === 'received' && (
         <ExportReceivedTab enabled={enabled} onChanged={onChanged} />
@@ -2568,6 +2864,8 @@ export function WarehouseFlowWorkbench({
   direction = 'BOTH',
   enabled = true,
   onChanged,
+  focusedBookingId,
+  focusedBookingLabel,
 }: WarehouseFlowWorkbenchProps) {
   const [location, setLocation] = useState<Location>({ warehouseId: '', yardId: '', zoneId: '' });
   const [tab, setTab] = useState<Exclude<WarehouseFlowDirection, 'BOTH'>>(
@@ -2600,24 +2898,42 @@ export function WarehouseFlowWorkbench({
             <ImportWarehouseTabs enabled={enabled} onChanged={onChanged} />
           </Tabs.Panel>
           <Tabs.Panel value="EXPORT">
-            <ExportWarehouseTabs enabled={enabled} location={location} onChanged={onChanged} />
+            <ExportWarehouseTabs
+              enabled={enabled}
+              location={location}
+              onChanged={onChanged}
+              focusedBookingId={focusedBookingId}
+              focusedBookingLabel={focusedBookingLabel}
+            />
           </Tabs.Panel>
         </Tabs>
       ) : activeDirection === 'IMPORT' ? (
         <ImportWarehouseTabs enabled={enabled} onChanged={onChanged} />
       ) : (
-        <ExportWarehouseTabs enabled={enabled} location={location} onChanged={onChanged} />
+        <ExportWarehouseTabs
+          enabled={enabled}
+          location={location}
+          onChanged={onChanged}
+          focusedBookingId={focusedBookingId}
+          focusedBookingLabel={focusedBookingLabel}
+        />
       )}
     </Stack>
   );
 }
 
 /** New bulk Receive: Import / Export tabs with eligible PAID bookings. */
-function BulkReceiveModal({ opened, onClose, onReceived }: ReceiveInventoryModalProps) {
+function BulkReceiveModal({ opened, onClose, onReceived, bookingId, bookingLabel, direction = 'BOTH' }: ReceiveInventoryModalProps) {
   return (
     <Modal opened={opened} onClose={onClose} title="Receive at warehouse" centered size="80rem">
       <Stack gap="md">
-        <WarehouseFlowWorkbench enabled={opened} direction="BOTH" onChanged={onReceived} />
+        <WarehouseFlowWorkbench
+          enabled={opened}
+          direction={direction}
+          onChanged={onReceived}
+          focusedBookingId={bookingId}
+          focusedBookingLabel={bookingLabel}
+        />
 
         <Group justify="flex-end" mt="sm">
           <Button variant="default" onClick={onClose}>
@@ -2763,5 +3079,5 @@ function SingleBookingReceiveModal({
 
 export function ReceiveInventoryModal(props: ReceiveInventoryModalProps) {
   // Locked to a booking → legacy single receive; otherwise the Import/Export bulk flow.
-  return props.bookingId ? <SingleBookingReceiveModal {...props} /> : <BulkReceiveModal {...props} />;
+  return props.bookingId && props.mode !== 'bulk' ? <SingleBookingReceiveModal {...props} /> : <BulkReceiveModal {...props} />;
 }

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

@@ -15,6 +15,17 @@ interface ReleaseOrderModalProps {
   opened: boolean;
   onClose: () => void;
   item: WarehouseInventoryItem | null;
+  truckPrefill?: ReleaseOrderTruckPrefill | null;
+}
+
+export interface ReleaseOrderTruckPrefill {
+  truckPlateNumber?: string | null;
+  trailerPlateNumber?: string | null;
+  driverName?: string | null;
+  driverLicense?: string | null;
+  driverPhone?: string | null;
+  truckType?: string | null;
+  containerNumber?: string | null;
 }
 
 const REGISTERED_FIRST_LAST_MILE_TRUCKS = [
@@ -82,6 +93,9 @@ const splitContainerNumbers = (value: string | null | undefined) =>
 const getItemContainerNumber = (item: WarehouseInventoryItem | null) =>
   (item as (WarehouseInventoryItem & { containerNumber?: string | null }) | null)?.containerNumber ?? '';
 
+const assignedTruckValue = (item: WarehouseInventoryItem | null, key: keyof NonNullable<WarehouseInventoryItem['booking']>) =>
+  item?.booking?.[key] == null ? '' : String(item.booking[key]);
+
 const isContainerInventory = (item: WarehouseInventoryItem | null, containerCount: number) => {
   const freightType = (item as (WarehouseInventoryItem & { booking?: { freightType?: string | null } | null }) | null)
     ?.booking?.freightType;
@@ -117,7 +131,7 @@ const parseInspectionNote = (notes: string | null | undefined) => {
   };
 };
 
-export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalProps) {
+export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: ReleaseOrderModalProps) {
   const { toast } = useToast();
   const releaseMutation = useMutation(api.warehouses.release.mutationOptions());
   const [reference, setReference] = useState('');
@@ -138,25 +152,34 @@ export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalPr
   useEffect(() => {
     if (opened) {
       const inspection = parseInspectionNote(item?.notes);
+      const assignedTruckPlate = assignedTruckValue(item, 'customerTruckPlateNumber');
+      const assignedDriverName = assignedTruckValue(item, 'customerTruckDriverName');
+      const assignedTruckType = assignedTruckValue(item, 'customerTruckType');
+      const assignedContainerNumber = assignedTruckValue(item, 'customerTruckContainerNumber');
+      const prefillContainerNumber = truckPrefill?.containerNumber ?? '';
       setReference(item?.releaseOrderReference ?? generateReleaseReference(item));
-      setTruckPlateNumber(inspection.truckPlateNumber);
-      setTrailerPlateNumber(inspection.trailerPlateNumber);
-      setDriverName(inspection.driverName);
-      setDriverLicense(inspection.driverLicense);
-      setDriverPhone(inspection.driverPhone);
-      setTruckType(inspection.truckType);
-      setContainerNumbers(initialContainerNumbers(item, inspection.containerNumber));
+      setTruckPlateNumber(inspection.truckPlateNumber || truckPrefill?.truckPlateNumber || assignedTruckPlate || '');
+      setTrailerPlateNumber(inspection.trailerPlateNumber || truckPrefill?.trailerPlateNumber || '');
+      setDriverName(inspection.driverName || truckPrefill?.driverName || assignedDriverName || '');
+      setDriverLicense(inspection.driverLicense || truckPrefill?.driverLicense || '');
+      setDriverPhone(inspection.driverPhone || truckPrefill?.driverPhone || '');
+      setTruckType(inspection.truckType || truckPrefill?.truckType || assignedTruckType || '');
+      setContainerNumbers(initialContainerNumbers(item, inspection.containerNumber || prefillContainerNumber || assignedContainerNumber));
       setGateInTime(inspection.gateInTime);
       setTareWeight(inspection.tareWeight);
       setGrossWeight(inspection.grossWeight);
       setNetWeight(item?.weight == null ? inspection.netWeight : Number(item.weight));
       setGateOutTime(inspection.gateOutTime);
     }
-  }, [opened, item]);
+  }, [opened, item, truckPrefill]);
 
   const savedInspection = parseInspectionNote(item?.notes);
   const isExitStep = savedInspection.tareWeight !== '';
   const isEntranceLocked = isExitStep;
+  const isCustomerAssignedTruck = Boolean(item?.booking?.customerTruckAssignedAt);
+  const hasLastMileTruckPrefill = Boolean(truckPrefill?.truckPlateNumber || truckPrefill?.trailerPlateNumber);
+  const isTruckIdentityLocked = isEntranceLocked || isCustomerAssignedTruck || hasLastMileTruckPrefill;
+  const isDriverNameLocked = isEntranceLocked || isCustomerAssignedTruck || Boolean(truckPrefill?.driverName);
   const systemNetWeight = item?.weight == null ? netWeight : Number(item.weight);
   const computedNetWeight =
     tareWeight !== '' && grossWeight !== '' ? Number((Number(grossWeight) - Number(tareWeight)).toFixed(3)) : null;
@@ -269,7 +292,7 @@ export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalPr
           searchable
           clearable
           data={REGISTERED_FIRST_LAST_MILE_TRUCKS}
-          disabled={isEntranceLocked}
+          disabled={isTruckIdentityLocked}
           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);
@@ -283,7 +306,7 @@ export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalPr
             required
             value={truckPlateNumber}
             onChange={(e) => setTruckPlateNumber(e.currentTarget.value)}
-            readOnly={isEntranceLocked}
+            readOnly={isTruckIdentityLocked}
           />
           <TextInput
             label="Trailer plate number"
@@ -293,12 +316,12 @@ export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalPr
           />
         </Group>
         <Group grow>
-          <TextInput label="Driver name" required value={driverName} onChange={(e) => setDriverName(e.currentTarget.value)} readOnly={isEntranceLocked} />
+          <TextInput label="Driver name" required value={driverName} onChange={(e) => setDriverName(e.currentTarget.value)} readOnly={isDriverNameLocked} />
           <TextInput label="Driver license" value={driverLicense} onChange={(e) => setDriverLicense(e.currentTarget.value)} readOnly={isEntranceLocked} />
         </Group>
         <Group grow>
           <TextInput label="Driver phone" value={driverPhone} onChange={(e) => setDriverPhone(e.currentTarget.value)} readOnly={isEntranceLocked} />
-          <TextInput label="Truck type" value={truckType} onChange={(e) => setTruckType(e.currentTarget.value)} readOnly={isEntranceLocked} />
+          <TextInput label="Truck type" value={truckType} onChange={(e) => setTruckType(e.currentTarget.value)} readOnly={isTruckIdentityLocked} />
         </Group>
         <Group grow>
           <Stack gap={6}>
@@ -313,7 +336,7 @@ export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalPr
                       numbers.map((number, numberIndex) => (numberIndex === index ? e.currentTarget.value : number)),
                     )
                   }
-                  readOnly={isEntranceLocked}
+                  readOnly={isTruckIdentityLocked}
                 />
               ))}
             </SimpleGrid>

apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts

@@ -44,6 +44,8 @@ export const QUERY_KEYS = {
     listSummary: (filter?: BookingListFilter) =>
       ["bookings", "list-summary", filter ?? {}] as const,
     byId: (id: string) => ["bookings", "detail", id] as const,
+    clearanceQueue: (region?: string) =>
+      ["bookings", "clearance-queue", region ?? "ET"] as const,
   },
 
   CONTRACTS: {

apps/edr-freight-web/backoffice/src/constants/URLS.ts

@@ -123,6 +123,18 @@ export const URL_CONSTANTS = {
     COMPLETE: (id: string) => `/bookings/${id}/operations/complete`,
     CANCEL: (id: string) => `/bookings/${id}/cancel`,
     CONSOLIDATION: (id: string) => `/bookings/${id}/consolidation`,
+    CLEARANCE: (id: string) => `/bookings/${id}/clearance`,
+    CLEARANCE_DECLARATION: (id: string) => `/bookings/${id}/clearance/declaration`,
+    CLEARANCE_DUTY: (id: string) => `/bookings/${id}/clearance/duty`,
+    CLEARANCE_FINALIZE_PRE: (id: string) =>
+      `/bookings/${id}/clearance/finalize-pre-clearance`,
+    CLEARANCE_TRANSIT_PERMIT: (id: string) => `/bookings/${id}/clearance/transit-permit`,
+    CLEARANCE_DELIVERY_ORDER: (id: string) => `/bookings/${id}/clearance/delivery-order`,
+    CLEARANCE_RELEASE_ORDER: (id: string) => `/bookings/${id}/clearance/release-order`,
+    CLEARANCE_RO_AMENDMENT: (id: string) => `/bookings/${id}/clearance/ro-amendment`,
+    CLEARANCE_EXPORT_RELEASE: (id: string) => `/bookings/${id}/clearance/export-release`,
+    CLEARANCE_ET_QUEUE: "/bookings/clearance/et-queue",
+    CLEARANCE_DJ_QUEUE: "/bookings/clearance/dj-queue",
   },
 
   CONTRACTS: {
@@ -137,6 +149,7 @@ export const URL_CONSTANTS = {
       `/contracts/${id}/approval-steps/${stepId}/approve`,
     CONTRACT_GENERATE: (id: string) => `/contracts/${id}/contract/generate`,
     CONTRACT_VIEW: (id: string) => `/contracts/${id}/contract/view`,
+    CONTRACT_DOCUMENT: (id: string) => `/contracts/${id}/contract/document`,
     CONTRACT_SIGN: (id: string) => `/contracts/${id}/contract/sign`,
     CLEARANCE_QUEUE: "/contracts/clearance/queue",
     CLEARANCE: (id: string) => `/contracts/${id}/clearance`,
@@ -144,6 +157,25 @@ export const URL_CONSTANTS = {
     CLEARANCE_OUTPUT_DOCUMENTS: (id: string) =>
       `/contracts/${id}/clearance/output-documents`,
     CLEARANCE_FINALIZE: (id: string) => `/contracts/${id}/clearance/finalize`,
+    CLEARANCE_DECLARATION: (id: string) => `/contracts/${id}/clearance/declaration`,
+    CLEARANCE_DUTY: (id: string) => `/contracts/${id}/clearance/duty`,
+    CLEARANCE_DUTY_SLIP: (id: string) => `/contracts/${id}/clearance/duty-slip`,
+    CLEARANCE_FINALIZE_PRE: (id: string) =>
+      `/contracts/${id}/clearance/finalize-pre-clearance`,
+    CLEARANCE_TRANSIT_PERMIT: (id: string) =>
+      `/contracts/${id}/clearance/transit-permit`,
+    CLEARANCE_DELIVERY_ORDER: (id: string) =>
+      `/contracts/${id}/clearance/delivery-order`,
+    CLEARANCE_RELEASE_ORDER: (id: string) =>
+      `/contracts/${id}/clearance/release-order`,
+    CLEARANCE_RO_AMENDMENT: (id: string) =>
+      `/contracts/${id}/clearance/ro-amendment`,
+    CLEARANCE_EXPORT_RELEASE: (id: string) =>
+      `/contracts/${id}/clearance/export-release`,
+    CLEARANCE_FINALIZE_EXPORT: (id: string) =>
+      `/contracts/${id}/clearance/finalize-export-clearance`,
+    CLEARANCE_ET_QUEUE: "/contracts/clearance/et-queue",
+    CLEARANCE_DJ_QUEUE: "/contracts/clearance/dj-queue",
     // Path A self-clearance — Operations reviews the customer's own clearance docs.
     OPS_CLEARANCE_QUEUE: "/contracts/clearance/ops-queue",
     OPS_CLEARANCE_REVIEW: (id: string) =>
@@ -177,6 +209,12 @@ export const URL_CONSTANTS = {
       `/contracts/bookings/${bookingId}/station-assign`,
     BOOKING_GL_DOCUMENTS: (bookingId: string) =>
       `/contracts/bookings/${bookingId}/documents`,
+    BOOKING_TRANSPORT_DOCUMENT: (bookingId: string) =>
+      `/contracts/bookings/${bookingId}/transport-document`,
+    BOOKING_T1_DOCUMENTS: (bookingId: string) =>
+      `/contracts/bookings/${bookingId}/t1-documents`,
+    BOOKING_T1_CLOSE: (bookingId: string) =>
+      `/contracts/bookings/${bookingId}/t1-close`,
     BOOKING_INCIDENTS: (bookingId: string) =>
       `/contracts/bookings/${bookingId}/incidents`,
   },
@@ -441,6 +479,7 @@ export const URL_CONSTANTS = {
     RECEIPT: (id: string) => `/warehouse-fee-invoices/${id}/receipt`,
     CANCEL: (id: string) => `/warehouse-fee-invoices/${id}/cancel`,
     PAY: (id: string) => `/warehouse-fee-invoices/${id}/pay`,
+    PAY_ONLINE: (id: string) => `/warehouse-fee-invoices/${id}/pay-online`,
     GENERATE: (inventoryId: string) => `/warehouse-inventory/${inventoryId}/generate-fee-invoice`,
     FOR_INVENTORY: (inventoryId: string) => `/warehouse-inventory/${inventoryId}/fee-invoices`,
     FOR_BOOKING: (bookingId: string) => `/bookings/${bookingId}/warehouse-fee-invoices`,

apps/edr-freight-web/backoffice/src/features/contracts/mapShipmentListRow.ts

@@ -0,0 +1,64 @@
+import type { Freight } from "@edr/types";
+
+export interface ShipmentListRow {
+  id: string;
+  reference: string;
+  contractId: string;
+  contractReference: string;
+  scheduledDate?: string | null;
+  summary: string;
+  status: Freight.BookingRequestStatus;
+  createdBookingId?: string | null;
+}
+
+export type ShipmentRowAction =
+  | {
+      kind: "navigate";
+      label: string;
+      to: (row: ShipmentListRow) => string;
+      variant: "filled" | "light" | "default";
+    }
+  | {
+      kind: "reject";
+      label: string;
+      variant: "light";
+    };
+
+/** Primary staff action for a shipment request list row. */
+export function getShipmentStaffRowAction(
+  row: Pick<
+    ShipmentListRow,
+    "status" | "contractId" | "id" | "createdBookingId"
+  >,
+): ShipmentRowAction {
+  if (row.status === "PENDING") {
+    return {
+      kind: "navigate",
+      label: "Accept",
+      to: (r) =>
+        `/dashboard/contracts/${r.contractId}/create-booking?requestId=${r.id}`,
+      variant: "filled",
+    };
+  }
+  if (row.status === "ACCEPTED" && row.createdBookingId) {
+    return {
+      kind: "navigate",
+      label: "View clearance",
+      to: (r) => `/dashboard/clearance/${r.createdBookingId}`,
+      variant: "light",
+    };
+  }
+  return {
+    kind: "navigate",
+    label: "Review",
+    to: (r) => `/dashboard/shipment-requests/${r.id}`,
+    variant: "default",
+  };
+}
+
+export function getShipmentRejectAction(
+  row: Pick<ShipmentListRow, "status">,
+): ShipmentRowAction | null {
+  if (row.status !== "PENDING") return null;
+  return { kind: "reject", label: "Reject", variant: "light" };
+}

apps/edr-freight-web/backoffice/src/hooks/bookings/useBookings.ts

@@ -188,3 +188,19 @@ export function useBookingMutations(bookingId: string) {
     downloadContract: () => bookingsService.downloadContract(bookingId),
   };
 }
+
+export function useBookingEtClearanceQueue(enabled = true) {
+  return useQuery({
+    queryKey: QUERY_KEYS.BOOKINGS.clearanceQueue("ET"),
+    queryFn: () => bookingsService.getEtClearanceQueue(),
+    enabled,
+  });
+}
+
+export function useBookingDjClearanceQueue(enabled = true) {
+  return useQuery({
+    queryKey: QUERY_KEYS.BOOKINGS.clearanceQueue("DJ"),
+    queryFn: () => bookingsService.getDjClearanceQueue(),
+    enabled,
+  });
+}

apps/edr-freight-web/backoffice/src/hooks/contracts/useContracts.ts

@@ -52,6 +52,22 @@ export function useContractClearanceQueue(enabled = true) {
   });
 }
 
+export function useEtClearanceQueue(enabled = true) {
+  return useQuery({
+    queryKey: QUERY_KEYS.CONTRACTS.clearanceQueue("ET"),
+    queryFn: () => contractsService.getEtClearanceQueue(),
+    enabled,
+  });
+}
+
+export function useDjClearanceQueue(enabled = true) {
+  return useQuery({
+    queryKey: QUERY_KEYS.CONTRACTS.clearanceQueue("DJ"),
+    queryFn: () => contractsService.getDjClearanceQueue(),
+    enabled,
+  });
+}
+
 /** Path A self-clearance queue (Operations reviews non-customs contracts). */
 export function useOpsClearanceQueue(enabled = true) {
   return useQuery({
@@ -248,7 +264,10 @@ export function useContractClearanceMutations(
       );
       refresh();
     },
-    onError: () => toast.error("Could not update document"),
+    onError: (e) =>
+      toast.error(
+        e instanceof Error ? e.message : "Could not update document",
+      ),
   });
 
   // Approve every still-pending customer document in one click. There is no

apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts

@@ -280,7 +280,13 @@ export function useImportTrainItems(scheduleId?: string) {
 
 /** Unload all eligible assigned bookings of an ARRIVED import train (→ UNLOADED). */
 export const useAutoUnloadArrivedBookings = () =>
-  useInventoryMutation((scheduleId: string) => warehouseService.autoUnloadArrivedBookings(scheduleId));
+  useInventoryMutation((payload: {
+    scheduleId: string;
+    warehouseId?: string;
+    assignments?: { bookingId: string; warehouseId: string; yardId: string; zoneId: string }[];
+  }) =>
+    warehouseService.autoUnloadArrivedBookings(payload),
+  );
 
 /** Arrived EXPORT trains at Djibouti-side ports. Read-only. */
 export function useExportDjiboutiArrivalQueue(enabled = true) {

apps/edr-freight-web/backoffice/src/lib/permissions.ts

@@ -33,7 +33,9 @@ export const FREIGHT_PERMS = {
     clearanceReview: "edr_freight_app:contracts:clearance_review",
     finalizeClearance: "edr_freight_app:contracts:finalize_clearance",
     createBooking: "edr_freight_app:contracts:create_booking",
-    opsClearanceReview: "edr_freight_app:contracts:ops_clearance_review",
+    clearanceDutyAdvise: "edr_freight_app:contracts:clearance_duty_advise",
+    clearanceEtActions: "edr_freight_app:contracts:clearance_et_actions",
+    clearanceDjActions: "edr_freight_app:contracts:clearance_dj_actions",
   },
   trainScheduling: {
     view: "edr_freight_app:train_scheduling:view",

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx

@@ -294,16 +294,18 @@ export default function BookingRequestDetailPage() {
                   booking={booking}
                   mutations={mutations}
                 />
-                <Button
-                  fullWidth
-                  variant="default"
-                  leftSection={<Milestone size={16} />}
-                  onClick={() =>
-                    navigate(`/dashboard/bookings/${booking.id}/milestones`)
-                  }
-                >
-                  View clearance milestones
-                </Button>
+                {booking.customsClearingEnabled && (
+                  <Button
+                    fullWidth
+                    variant="default"
+                    leftSection={<Milestone size={16} />}
+                    onClick={() =>
+                      navigate(`/dashboard/bookings/${booking.id}/clearance`)
+                    }
+                  >
+                    View document clearance
+                  </Button>
+                )}
                 {showContractButton && (
                   <Button
                     fullWidth

apps/edr-freight-web/backoffice/src/pages/bookings/DocumentClearanceDetailPage.tsx

@@ -25,27 +25,39 @@ import {
 } from "lucide-react";
 import type { Freight } from "@edr/types";
 
+import { ClearanceOpsTabs } from "@/components/contracts/ClearanceOpsTabs";
 import { PageContainer } from "@/components/page/PageContainer";
 import { PageHeader } from "@/components/page/PageHeader";
 import { SectionCard } from "@/components/bookings/detail";
 import { ClearanceReviewSection } from "@/components/bookings/detail/ClearanceReviewSection";
+import { ClearancePhaseStepper } from "@/components/contracts/ClearancePhaseStepper";
+import { PhasedClearanceActionPanel } from "@/components/contracts/PhasedClearanceActionPanel";
+import { ClearanceMilestoneTimeline } from "@/components/contracts/ClearanceMilestoneTimeline";
+import { useFileViewer } from "@/hooks/useFileViewer";
+import { useBookingMilestones } from "@/hooks/contracts/useContracts";
 import { bookingsService } from "@/services/bookings.service";
+import { downloadBookingFile } from "@/services/files.service";
 import { useBookingDetail } from "@/hooks/bookings/useBookings";
 
 export default function DocumentClearanceDetailPage() {
-  const { id } = useParams<{ id: string }>();
+  const params = useParams<{ id?: string; bookingId?: string }>();
+  const id = params.id ?? params.bookingId;
+  const { view, viewer } = useFileViewer();
 
   const { data: booking } = useBookingDetail(id);
   const {
     data: clearance,
     isLoading,
     isError,
+    refetch,
   } = useQuery({
     queryKey: ["clearance", id],
     queryFn: () => bookingsService.getClearance(id!),
     enabled: Boolean(id),
   });
 
+  const { data: bookingMilestones } = useBookingMilestones(id);
+
   const stats = useMemo(() => {
     const docs = (clearance?.documents ?? []).filter(
       (d) => d.uploadedBy === "customer",
@@ -59,6 +71,20 @@ export default function DocumentClearanceDetailPage() {
   }, [clearance]);
 
   const reference = booking?.reference ?? "Clearance";
+  const isPhasedGeneral =
+    Boolean(booking?.customsClearingEnabled) &&
+    booking?.contractKind === "GENERAL" &&
+    Boolean(clearance?.phase);
+
+  const docsPhaseComplete =
+    clearance?.milestones?.some(
+      (m) => m.milestoneCode === "DOCUMENTS_APPROVED" && m.status === "COMPLETED",
+    ) ?? false;
+  const queriesLocked = Boolean(
+    (clearance as Freight.ContractClearanceView | undefined)?.preClearanceFinalized,
+  );
+  const workflowFiles =
+    (clearance as Freight.ContractClearanceView | undefined)?.workflowFiles ?? [];
 
   if (isLoading) {
     return (
@@ -76,9 +102,9 @@ export default function DocumentClearanceDetailPage() {
       <PageContainer>
         <PageHeader
           title="Clearance not found"
-          backTo="/dashboard/clearance"
+          backTo="/dashboard/contracts/clearance"
           breadcrumbs={[
-            { label: "Document Clearance", href: "/dashboard/clearance" },
+            { label: "Document Clearance", href: "/dashboard/contracts/clearance" },
             { label: "Not found" },
           ]}
         />
@@ -94,9 +120,9 @@ export default function DocumentClearanceDetailPage() {
       <Stack gap="lg">
         <PageHeader
           title={reference}
-          backTo="/dashboard/clearance"
+          backTo="/dashboard/contracts/clearance"
           breadcrumbs={[
-            { label: "Document Clearance", href: "/dashboard/clearance" },
+            { label: "Document Clearance", href: "/dashboard/contracts/clearance" },
             { label: reference },
           ]}
           meta={
@@ -124,60 +150,103 @@ export default function DocumentClearanceDetailPage() {
 
         <ClearanceHero booking={booking} clearance={clearance} stats={stats} />
 
-        <Grid gap="lg">
-          {/* LEFT — document review (shared with the Marketing booking detail) */}
-          <Grid.Col span={{ base: 12, lg: 8 }}>
-            <ClearanceReviewSection bookingId={id!} hideSummary />
-          </Grid.Col>
+        {isPhasedGeneral ? (
+          <Paper withBorder radius="md" p="lg">
+            <ClearancePhaseStepper
+              clearance={clearance as Freight.ContractClearanceView}
+              tradeDirection={booking?.tradeDirection ?? "IMPORT"}
+            />
+          </Paper>
+        ) : null}
 
-          {/* RIGHT — sticky progress gauge */}
-          <Grid.Col span={{ base: 12, lg: 4 }}>
-            <Box style={{ position: "sticky", top: 24 }}>
-              <SectionCard
-                icon={PackageCheck}
-                title="Review progress"
-                accent="edr-green"
-              >
-                <Stack align="center" gap="sm">
-                  <RingProgress
-                    size={140}
-                    thickness={12}
-                    roundCaps
-                    sections={[{ value: stats.pct, color: "edr-green" }]}
-                    label={
-                      <Stack gap={0} align="center">
-                        <Text fw={800} fz={26} lh={1}>
-                          {stats.pct}%
-                        </Text>
-                        <Text size="xs" c="dimmed">
-                          approved
-                        </Text>
-                      </Stack>
-                    }
+        <ClearanceOpsTabs
+          bookingId={id}
+          milestones={bookingMilestones}
+          showOpsTabs={Boolean(id)}
+          showWorkflowFilesTab={isPhasedGeneral}
+          tradeDirection={booking?.tradeDirection ?? "IMPORT"}
+          workflowFiles={workflowFiles}
+          onViewFile={view}
+          onDownloadFile={(f) => void downloadBookingFile(f.id, f.name)}
+          clearanceTab={
+            <Grid gap="lg">
+              <Grid.Col span={{ base: 12, lg: isPhasedGeneral ? 7 : 8 }}>
+                <ClearanceReviewSection
+                  bookingId={id!}
+                  hideSummary
+                  approvalsLocked={isPhasedGeneral && docsPhaseComplete}
+                  queriesLocked={queriesLocked}
+                  onChanged={() => void refetch()}
+                />
+              </Grid.Col>
+
+              <Grid.Col span={{ base: 12, lg: isPhasedGeneral ? 5 : 4 }}>
+                {isPhasedGeneral ? (
+                  <PhasedClearanceActionPanel
+                    bookingId={id!}
+                    clearance={clearance}
+                    tradeDirection={booking?.tradeDirection ?? "IMPORT"}
+                    workflowFiles={workflowFiles}
+                    roleMode="ET"
+                    onChanged={() => void refetch()}
+                    onViewFile={view}
+                    onDownloadFile={(f) => void downloadBookingFile(f.id, f.name)}
                   />
-                  <Group gap="lg" justify="center">
-                    <ProgressStat
-                      color="edr-green"
-                      label="Approved"
-                      value={stats.approved}
-                    />
-                    <ProgressStat
-                      color="red"
-                      label="Queried"
-                      value={stats.queried}
-                    />
-                    <ProgressStat
-                      color="gray"
-                      label="Pending"
-                      value={stats.pending}
-                    />
-                  </Group>
-                </Stack>
-              </SectionCard>
-            </Box>
-          </Grid.Col>
-        </Grid>
+                ) : (
+                  <Box style={{ position: "sticky", top: 24 }}>
+                    <SectionCard
+                      icon={PackageCheck}
+                      title="Review progress"
+                      accent="edr-green"
+                    >
+                      <Stack align="center" gap="sm">
+                        <RingProgress
+                          size={140}
+                          thickness={12}
+                          roundCaps
+                          sections={[{ value: stats.pct, color: "edr-green" }]}
+                          label={
+                            <Stack gap={0} align="center">
+                              <Text fw={800} fz={26} lh={1}>
+                                {stats.pct}%
+                              </Text>
+                              <Text size="xs" c="dimmed">
+                                approved
+                              </Text>
+                            </Stack>
+                          }
+                        />
+                        <Group gap="lg" justify="center">
+                          <ProgressStat
+                            color="edr-green"
+                            label="Approved"
+                            value={stats.approved}
+                          />
+                          <ProgressStat
+                            color="red"
+                            label="Queried"
+                            value={stats.queried}
+                          />
+                          <ProgressStat
+                            color="gray"
+                            label="Pending"
+                            value={stats.pending}
+                          />
+                        </Group>
+                      </Stack>
+                    </SectionCard>
+                  </Box>
+                )}
+              </Grid.Col>
+            </Grid>
+          }
+        />
+
+        {isPhasedGeneral && clearance.milestones && clearance.milestones.length > 0 ? (
+          <ClearanceMilestoneTimeline milestones={clearance.milestones} />
+        ) : null}
       </Stack>
+      {viewer}
     </PageContainer>
   );
 }

apps/edr-freight-web/backoffice/src/pages/bookings/NewBookingPage.tsx

@@ -70,7 +70,6 @@ interface RefCargoChild {
   id: string;
   name: string;
   code: string;
-  show_free_text_box?: boolean;
 }
 interface RefCargoGroup {
   id: string;
@@ -307,20 +306,18 @@ export default function NewBookingPage() {
     [refData?.containers],
   );
 
-  const { cargoData, freeTextById } = useMemo(() => {
+  const { cargoData } = useMemo(() => {
     const groups = refData?.cargo_type ?? [];
-    const freeText = new Map<string, boolean>();
     const data = groups.map((g) => {
       if (g.children?.length) {
-        g.children.forEach((c) => freeText.set(c.id, Boolean(c.show_free_text_box)));
         return { group: g.name, items: g.children.map((c) => ({ value: c.id, label: c.name })) };
       }
       return { value: g.id, label: g.name };
     });
-    return { cargoData: data, freeTextById: freeText };
+    return { cargoData: data };
   }, [refData?.cargo_type]);
 
-  const showFreeText = cargoTypeId ? freeTextById.get(cargoTypeId) : false;
+  const showFreeText = freightType === "BULK" && Boolean(cargoTypeId);
 
   // ---- derived totals ----
   const totalContainers = lines.reduce((s, l) => s + (l.quantity || 0), 0);
@@ -376,7 +373,7 @@ export default function NewBookingPage() {
         lastMileDeliveryAddress: lastMileDeliveryAddress.trim() || undefined,
         cargoTotalWeightVgm,
         cargoTypeId: freightType === "BULK" ? cargoTypeId : undefined,
-        cargoFreeText: freightType === "BULK" && showFreeText ? cargoFreeText.trim() || undefined : undefined,
+        cargoFreeText: freightType === "BULK" ? cargoFreeText.trim() || undefined : undefined,
         containers:
           freightType === "CONTAINER"
             ? lines.map((l) => ({

apps/edr-freight-web/backoffice/src/pages/configuration/ContractValidityPeriodsPage.tsx

@@ -0,0 +1,145 @@
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Badge,
+  Button,
+  Center,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Table,
+  Text,
+  Title,
+} from "@mantine/core";
+import { CalendarClock, Pencil } from "lucide-react";
+
+import { PageContainer } from "@/components/page";
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import { api } from "@/services/api";
+import ManageDropdownOptionsDialog from "@/pages/dropdown_settings/ManageDropdownOptionsDialog";
+
+const CONTRACT_VALIDITY_PERIODS_CODE = "contract_validity_periods";
+
+/**
+ * Admin UI for contract validity options used when staff accepts a submitted
+ * contract (SUBMITTED → PENDING_APPROVAL). Backed by dropdown_settings.
+ */
+export default function ContractValidityPeriodsPage() {
+  const [editOpen, setEditOpen] = useState(false);
+
+  const { data: setting, isLoading, isError } = useQuery(
+    api.dropdownSettings.getByCode.queryOptions({
+      input: { code: CONTRACT_VALIDITY_PERIODS_CODE },
+    }),
+  );
+
+  const options = useMemo(
+    () =>
+      [...(setting?.children ?? [])].sort(
+        (a, b) => (a.order ?? 0) - (b.order ?? 0),
+      ),
+    [setting],
+  );
+
+  return (
+    <PageContainer>
+      <Breadcrumbs
+        items={[
+          { label: "Configuration", href: "/dashboard/configuration" },
+          { label: "Contract validity periods" },
+        ]}
+      />
+
+      <Stack gap="lg" mt="md">
+        <Group justify="space-between" align="flex-start" wrap="wrap">
+          <Stack gap={4}>
+            <Title order={2}>Contract validity periods</Title>
+            <Text size="sm" c="dimmed" maw={560}>
+              Options shown when line staff accepts a submitted contract. Each
+              value is the number of days the contract stays valid from the
+              accept date.
+            </Text>
+          </Stack>
+          {setting && (
+            <Button
+              leftSection={<Pencil size={16} />}
+              color="edr-green"
+              onClick={() => setEditOpen(true)}
+            >
+              Edit options
+            </Button>
+          )}
+        </Group>
+
+        <Paper withBorder radius="lg" p="lg">
+          {isLoading ? (
+            <Center py="xl">
+              <Loader color="edr-green" />
+            </Center>
+          ) : isError || !setting ? (
+            <Text c="dimmed">
+              Could not load contract validity settings. Ensure{" "}
+              <Text span ff="monospace" size="sm">
+                {CONTRACT_VALIDITY_PERIODS_CODE}
+              </Text>{" "}
+              is seeded in dropdown settings.
+            </Text>
+          ) : options.length === 0 ? (
+            <Stack align="center" gap="md" py="xl">
+              <CalendarClock size={32} color="var(--mantine-color-gray-5)" />
+              <Text c="dimmed">No validity periods configured yet.</Text>
+              <Button
+                variant="light"
+                color="edr-green"
+                onClick={() => setEditOpen(true)}
+              >
+                Add options
+              </Button>
+            </Stack>
+          ) : (
+            <Table striped highlightOnHover>
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>Label</Table.Th>
+                  <Table.Th>Days (value)</Table.Th>
+                  <Table.Th>Order</Table.Th>
+                  <Table.Th>Status</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {options.map((opt) => (
+                  <Table.Tr key={opt.id}>
+                    <Table.Td>{opt.label}</Table.Td>
+                    <Table.Td>
+                      <Text ff="monospace" size="sm">
+                        {opt.value}
+                      </Text>
+                    </Table.Td>
+                    <Table.Td>{opt.order ?? "—"}</Table.Td>
+                    <Table.Td>
+                      <Badge
+                        color={opt.disabled ? "gray" : "edr-green"}
+                        variant="light"
+                      >
+                        {opt.disabled ? "Disabled" : "Active"}
+                      </Badge>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          )}
+        </Paper>
+      </Stack>
+
+      {setting ? (
+        <ManageDropdownOptionsDialog
+          setting={setting}
+          open={editOpen}
+          onOpenChange={setEditOpen}
+        />
+      ) : null}
+    </PageContainer>
+  );
+}

apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceDetailPage.tsx

@@ -23,23 +23,33 @@ import {
   PackageCheck,
   ShieldCheck,
 } from "lucide-react";
+import { Link } from "react-router-dom";
 
+import { ClearanceOpsTabs } from "@/components/contracts/ClearanceOpsTabs";
 import { PageContainer } from "@/components/page/PageContainer";
 import { PageHeader } from "@/components/page/PageHeader";
 import { SectionCard } from "@/components/bookings/detail/SectionCard";
 import { ContractClearanceReviewSection } from "@/components/contracts/ContractClearanceReviewSection";
+import { PhasedClearanceActionPanel } from "@/components/contracts/PhasedClearanceActionPanel";
 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
+import { useFileViewer } from "@/hooks/useFileViewer";
 import { contractsService } from "@/services/contracts.service";
-import { useContractDetail } from "@/hooks/contracts/useContracts";
+import { downloadBookingFile } from "@/services/files.service";
+import {
+  useBookingMilestones,
+  useContractDetail,
+} from "@/hooks/contracts/useContracts";
 
 export default function ContractClearanceDetailPage() {
   const { id } = useParams<{ id: string }>();
+  const { view, viewer } = useFileViewer();
 
   const { data: contract } = useContractDetail(id);
   const {
     data: clearance,
     isLoading,
     isError,
+    refetch,
   } = useQuery({
     queryKey: QUERY_KEYS.CONTRACTS.clearance(id ?? ""),
     queryFn: () => contractsService.getClearance(id!),
@@ -59,9 +69,40 @@ export default function ContractClearanceDetailPage() {
   }, [clearance]);
 
   const reference = contract?.reference ?? "Clearance";
-  // Customs (Path B) hub. The customer always creates the booking in the portal
-  // after GL finalizes clearance — there is no GL "Create booking" action here.
-  const ready = clearance?.clearanceStatus === "CLEARANCE_READY_FOR_BOOKING";
+  const phasedCustoms =
+    contract?.contractKind === "ONE_TIME" && Boolean(contract.customsClearingEnabled);
+  const docsPhaseComplete =
+    clearance?.milestones?.some(
+      (m) => m.milestoneCode === "DOCUMENTS_APPROVED" && m.status === "COMPLETED",
+    ) ?? false;
+  const ready = clearance?.bookingReady === true;
+  const docReviewLocked = phasedCustoms
+    ? docsPhaseComplete
+    : clearance?.clearanceStatus === "CLEARANCE_READY_FOR_BOOKING";
+  const shipmentLocked = Boolean(
+    contract?.status &&
+      [
+        "ACTIVE_SHIPMENT_IN_PROGRESS",
+        "FULLY_EXECUTED",
+        "CONTRACT_ACTIVE",
+        "CONTRACT_CLOSED",
+        "EXPIRED",
+      ].includes(contract.status),
+  );
+  const linkedBookingId = useMemo(() => {
+    const cycle = contract?.clearanceCycles?.find(
+      (c) => c.cycleNumber === (contract?.clearanceCycleNumber ?? 1),
+    );
+    return cycle?.bookingId ?? undefined;
+  }, [contract]);
+  const bookingAlreadyCreated = Boolean(linkedBookingId) || shipmentLocked;
+  const canCreateBooking = ready && !bookingAlreadyCreated;
+  const reviewReadOnly = shipmentLocked;
+  const queriesLocked = Boolean(clearance?.preClearanceFinalized);
+  const bookingHref = `/dashboard/contracts/${id}/create-booking`;
+
+  const { data: bookingMilestones, refetch: refetchBookingMilestones } =
+    useBookingMilestones(linkedBookingId);
 
   if (isLoading) {
     return (
@@ -95,6 +136,8 @@ export default function ContractClearanceDetailPage() {
     );
   }
 
+  const workflowFiles = clearance.workflowFiles ?? [];
+
   return (
     <PageContainer>
       <Stack gap="lg">
@@ -109,14 +152,23 @@ export default function ContractClearanceDetailPage() {
             { label: reference },
           ]}
           meta={
-            ready ? (
+            bookingAlreadyCreated ? (
+              <Badge
+                variant="light"
+                color="blue"
+                radius="sm"
+                leftSection={<PackageCheck size={13} />}
+              >
+                Booking created
+              </Badge>
+            ) : ready ? (
               <Badge
                 variant="light"
                 color="edr-green"
                 radius="sm"
                 leftSection={<PackageCheck size={13} />}
               >
-                Ready — customer books
+                Ready — create booking
               </Badge>
             ) : clearance.allApproved ? (
               <Badge
@@ -142,75 +194,139 @@ export default function ContractClearanceDetailPage() {
 
         <ClearanceHero contract={contract} stats={stats} />
 
-        {ready ? (
+        {bookingAlreadyCreated ? (
+          <Alert
+            color="blue"
+            radius="md"
+            icon={<PackageCheck size={16} />}
+            title="Shipment booking created"
+          >
+            GL Ethiopia has created the shipment booking for this contract.
+            {linkedBookingId ? (
+              <>
+                {" "}
+                <Text
+                  component={Link}
+                  to={`/dashboard/bookings/${linkedBookingId}/clearance`}
+                  inherit
+                  fw={600}
+                  c="blue.7"
+                >
+                  View booking →
+                </Text>
+              </>
+            ) : null}
+          </Alert>
+        ) : canCreateBooking ? (
           <Alert
             color="edr-green"
             radius="md"
             icon={<PackageCheck size={16} />}
-            title="Clearance finalized"
+            title="Clearance complete"
           >
-            Customs clearance is complete. The customer can now create the
-            shipment booking from the portal — no further action is needed here.
+            Pre-booking clearance is complete. GL Ethiopia can create the shipment booking.
           </Alert>
         ) : null}
 
-        <Grid gap="lg">
-          <Grid.Col span={{ base: 12, lg: 8 }}>
-            <ContractClearanceReviewSection
-              contractId={id!}
-              hideSummary
-              selfClear={false}
-              readOnly={ready}
-            />
-          </Grid.Col>
+        <ClearanceOpsTabs
+          bookingId={linkedBookingId}
+          milestones={bookingMilestones}
+          showOpsTabs={Boolean(linkedBookingId)}
+          showWorkflowFilesTab={phasedCustoms}
+          tradeDirection={contract?.tradeDirection ?? "IMPORT"}
+          workflowFiles={workflowFiles}
+          onViewFile={view}
+          onDownloadFile={(f) => void downloadBookingFile(f.id, f.name)}
+          clearanceTab={
+            <Grid>
+              <Grid.Col span={{ base: 12, lg: 7 }}>
+                <ContractClearanceReviewSection
+                  contractId={id!}
+                  hideSummary
+                  selfClear={false}
+                  readOnly={reviewReadOnly}
+                  approvalsLocked={phasedCustoms && docReviewLocked}
+                  queriesLocked={queriesLocked}
+                  phasedCustoms={phasedCustoms}
+                  onChanged={() => {
+                    void refetch();
+                    void refetchBookingMilestones();
+                  }}
+                />
+              </Grid.Col>
 
-          <Grid.Col span={{ base: 12, lg: 4 }}>
-            <Box style={{ position: "sticky", top: 24 }}>
-              <SectionCard
-                icon={PackageCheck}
-                title="Review progress"
-                accent="edr-green"
-              >
-                <Stack align="center" gap="sm">
-                  <RingProgress
-                    size={140}
-                    thickness={12}
-                    roundCaps
-                    sections={[{ value: stats.pct, color: "edr-green" }]}
-                    label={
-                      <Stack gap={0} align="center">
-                        <Text fw={800} fz={26} lh={1}>
-                          {stats.pct}%
-                        </Text>
-                        <Text size="xs" c="dimmed">
-                          approved
-                        </Text>
-                      </Stack>
-                    }
-                  />
-                  <Group gap="lg" justify="center">
-                    <ProgressStat
-                      color="edr-green"
-                      label="Approved"
-                      value={stats.approved}
+              <Grid.Col span={{ base: 12, lg: 5 }}>
+                <Stack gap="md">
+                  {phasedCustoms ? (
+                    <PhasedClearanceActionPanel
+                      contractId={id!}
+                      bookingId={linkedBookingId}
+                      bookingMilestones={bookingMilestones ?? []}
+                      clearance={clearance}
+                      tradeDirection={contract?.tradeDirection ?? "IMPORT"}
+                      workflowFiles={workflowFiles}
+                      roleMode="ET"
+                      onChanged={() => {
+                        void refetch();
+                        void refetchBookingMilestones();
+                      }}
+                      onViewFile={view}
+                      onDownloadFile={(f) => void downloadBookingFile(f.id, f.name)}
+                      bookingCreateHref={canCreateBooking ? bookingHref : undefined}
+                      bookingCreated={bookingAlreadyCreated}
                     />
-                    <ProgressStat
-                      color="red"
-                      label="Queried"
-                      value={stats.queried}
-                    />
-                    <ProgressStat
-                      color="gray"
-                      label="Pending"
-                      value={stats.pending}
-                    />
-                  </Group>
+                  ) : (
+                    <Box style={{ position: "sticky", top: 24 }}>
+                      <SectionCard
+                        icon={PackageCheck}
+                        title="Review progress"
+                        accent="edr-green"
+                      >
+                        <Stack align="center" gap="sm">
+                          <RingProgress
+                            size={140}
+                            thickness={12}
+                            roundCaps
+                            sections={[{ value: stats.pct, color: "edr-green" }]}
+                            label={
+                              <Stack gap={0} align="center">
+                                <Text fw={800} fz={26} lh={1}>
+                                  {stats.pct}%
+                                </Text>
+                                <Text size="xs" c="dimmed">
+                                  approved
+                                </Text>
+                              </Stack>
+                            }
+                          />
+                          <Group gap="lg" justify="center">
+                            <ProgressStat
+                              color="edr-green"
+                              label="Approved"
+                              value={stats.approved}
+                            />
+                            <ProgressStat
+                              color="red"
+                              label="Queried"
+                              value={stats.queried}
+                            />
+                            <ProgressStat
+                              color="gray"
+                              label="Pending"
+                              value={stats.pending}
+                            />
+                          </Group>
+                        </Stack>
+                      </SectionCard>
+                    </Box>
+                  )}
                 </Stack>
-              </SectionCard>
-            </Box>
-          </Grid.Col>
-        </Grid>
+              </Grid.Col>
+            </Grid>
+          }
+        />
       </Stack>
+      {viewer}
     </PageContainer>
   );
 }

apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceListPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   ActionIcon,
@@ -18,6 +18,7 @@ import {
   ArrowRight,
   ChevronRight,
   FileText,
+  Flag,
   Inbox,
   LayoutGrid,
   PackageCheck,
@@ -43,9 +44,15 @@ import { PageContainer } from "@/components/page/PageContainer";
 import { PageHeader } from "@/components/page/PageHeader";
 import { KpiStrip } from "@/components/page/KpiStrip";
 import { bookingTable } from "@/components/bookings/booking-ui.styles";
-import { useContractClearanceQueue } from "@/hooks/contracts/useContracts";
+import { useAuth } from "@/auth/useAuth";
+import {
+  useContractClearanceQueue,
+  useEtClearanceQueue,
+} from "@/hooks/contracts/useContracts";
+import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
 
 type ViewMode = "table" | "cards";
+type QueueTab = "all" | "et";
 
 interface ClearanceRow {
   id: string;
@@ -59,8 +66,10 @@ interface ClearanceRow {
   serviceTypeName: string;
   customs: boolean;
   status: string;
-  /** true once GL has finalized clearance — customer now books in the portal. */
+  /** true once GL has finalized clearance — customer may book in the portal. */
   ready: boolean;
+  /** true once GL Ethiopia created the shipment booking. */
+  bookingCreated: boolean;
 }
 
 function yardLabel(
@@ -93,6 +102,7 @@ function toClearanceRow(contract: Freight.IContract): ClearanceRow {
       contract.serviceType?.includesCustoms ?? contract.customsClearingEnabled,
     status: contract.status,
     ready: contract.status === "CLEARANCE_READY_FOR_BOOKING",
+    bookingCreated: contract.status === "ACTIVE_SHIPMENT_IN_PROGRESS",
   };
 }
 
@@ -134,6 +144,21 @@ function DirectionIcon({ direction }: { direction: string }) {
 }
 
 function StatusBadge({ row }: { row: ClearanceRow }) {
+  if (row.bookingCreated) {
+    return (
+      <Tooltip label="GL Ethiopia created the shipment booking" withArrow>
+        <Badge
+          size="sm"
+          variant="light"
+          color="blue"
+          radius="sm"
+          leftSection={<PackagePlus size={12} />}
+        >
+          Booking created
+        </Badge>
+      </Tooltip>
+    );
+  }
   if (row.ready) {
     return (
       <Tooltip
@@ -160,19 +185,61 @@ function StatusBadge({ row }: { row: ClearanceRow }) {
 }
 
 /**
- * Document Clearance hub. Lists every customs (Path B) contract that still needs
- * customs clearance — awaiting documents, under GL review, or finalized and
- * waiting for the customer to create the booking in the portal. A single list,
- * no queue/history/direction tabs.
+ * Document Clearance hub. Lists every customs (Path B) contract in phased clearance,
+ * including after booking is created — stays visible for reference and follow-up.
  */
 export default function ContractClearanceListPage() {
   const navigate = useNavigate();
+  const { user } = useAuth();
+  const canReview = hasPermission(user, FREIGHT_PERMS.contracts.clearanceReview);
+  const canEt = hasPermission(user, FREIGHT_PERMS.contracts.clearanceEtActions);
+
+  const defaultQueue: QueueTab = canReview ? "all" : "et";
+  const [queueTab, setQueueTab] = useState<QueueTab>(defaultQueue);
   const [query, setQuery] = useState("");
   const [view, setView] = useState<ViewMode>("table");
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
 
-  const { data, isLoading, isError, isFetching, refetch } =
-    useContractClearanceQueue(true);
+  const { data: allData, isLoading: allLoading, isError: allError, isFetching: allFetching, refetch: refetchAll } =
+    useContractClearanceQueue(queueTab === "all");
+  const { data: etData, isLoading: etLoading, isError: etError, isFetching: etFetching, refetch: refetchEt } =
+    useEtClearanceQueue(queueTab === "et");
+
+  const data = queueTab === "et" ? etData : allData;
+  const isLoading = queueTab === "et" ? etLoading : allLoading;
+  const isError = queueTab === "et" ? etError : allError;
+  const isFetching = queueTab === "et" ? etFetching : allFetching;
+  const refetch = () => {
+    if (queueTab === "et") void refetchEt();
+    else void refetchAll();
+  };
+
+  const queueTabOptions = useMemo(() => {
+    const opts: { value: QueueTab; label: ReactNode }[] = [];
+    if (canReview) {
+      opts.push({
+        value: "all",
+        label: (
+          <Group gap={6} wrap="nowrap">
+            <ShieldCheck size={15} />
+            <Box visibleFrom="sm">All</Box>
+          </Group>
+        ),
+      });
+    }
+    if (canEt) {
+      opts.push({
+        value: "et",
+        label: (
+          <Group gap={6} wrap="nowrap">
+            <Flag size={15} />
+            <Box visibleFrom="sm">ET queue</Box>
+          </Group>
+        ),
+      });
+    }
+    return opts;
+  }, [canReview, canEt]);
 
   const allRows = useMemo(
     () => (data?.items ?? []).map(toClearanceRow),
@@ -183,7 +250,8 @@ export default function ContractClearanceListPage() {
     () => ({
       all: allRows.length,
       ready: allRows.filter((r) => r.ready).length,
-      review: allRows.filter((r) => !r.ready).length,
+      booked: allRows.filter((r) => r.bookingCreated).length,
+      review: allRows.filter((r) => !r.ready && !r.bookingCreated).length,
     }),
     [allRows],
   );
@@ -329,7 +397,7 @@ export default function ContractClearanceListPage() {
       <Stack gap="lg">
         <PageHeader
           title="Document Clearance"
-          subtitle="Review pre-booking customs documents on contracts and finalize clearance. Once finalized, the customer creates the shipment booking in the portal."
+          subtitle="All customs contracts in phased clearance — stays visible after booking is created."
           meta={
             <Badge
               variant="light"
@@ -337,7 +405,7 @@ export default function ContractClearanceListPage() {
               radius="sm"
               leftSection={<ShieldCheck size={13} />}
             >
-              {counts.all} need clearance
+              {counts.all} in clearance
             </Badge>
           }
           action={
@@ -358,7 +426,7 @@ export default function ContractClearanceListPage() {
           loading={isLoading}
           items={[
             {
-              label: "Need clearance",
+              label: "In clearance",
               value: counts.all,
               icon: Inbox,
               color: "edr-green",
@@ -370,8 +438,8 @@ export default function ContractClearanceListPage() {
               color: "yellow",
             },
             {
-              label: "Ready — customer books",
-              value: counts.ready,
+              label: "Ready / booked",
+              value: counts.ready + counts.booked,
               icon: PackageCheck,
               color: "edr-green",
             },
@@ -380,6 +448,20 @@ export default function ContractClearanceListPage() {
 
         <Card p={0} withBorder shadow="sm" radius="lg">
           <Stack gap={0}>
+            {queueTabOptions.length > 1 ? (
+              <Box px="md" pt="md">
+                <SegmentedControl
+                  size="sm"
+                  radius="md"
+                  value={queueTab}
+                  onChange={(v) => {
+                    setQueueTab(v as QueueTab);
+                    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                  }}
+                  data={queueTabOptions}
+                />
+              </Box>
+            ) : null}
             <Box px="md" pt="md" pb="sm">
               <Group justify="space-between" gap="md" wrap="wrap">
                 <TextInput

apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx

@@ -1,4 +1,5 @@
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import {
   ArrowLeft,
   ArrowRight,
@@ -6,14 +7,19 @@ import {
   Building2,
   Calendar,
   CalendarClock,
+  Download,
+  FileSignature,
   FileText,
+  Files,
   Flame,
+  LayoutGrid,
   Package,
   Receipt,
   RefreshCw,
   Route as RouteIcon,
   ShieldCheck,
   Snowflake,
+  Users,
 } from "lucide-react";
 import {
   Badge,
@@ -31,6 +37,8 @@ import {
   Title,
 } from "@mantine/core";
 
+import toast from "react-hot-toast";
+
 import "@/components/overview/overview.css";
 import { PageContainer } from "@/components/page";
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
@@ -41,11 +49,22 @@ import { ContractWorkflowStepper } from "@/components/contracts/ContractWorkflow
 import { ContractActionsToolbar } from "@/components/contracts/ContractActionsToolbar";
 import { ContractApprovalStepsCard } from "@/components/contracts/ContractApprovalStepsCard";
 import { ContractClearanceReviewSection } from "@/components/contracts/ContractClearanceReviewSection";
+import { ClearanceWorkflowFilesPanel } from "@/components/contracts/ClearanceWorkflowFilesPanel";
+import {
+  ContractCustomerCard,
+  ContractDocumentsCard,
+} from "@/components/contracts/detail/ContractDetailTabCards";
 import { getContractStatusMeta } from "@/features/contracts/contract-status.config";
+import { useFileViewer } from "@/hooks/useFileViewer";
 import {
   useContractDetail,
   useContractMutations,
 } from "@/hooks/contracts/useContracts";
+import { contractsService } from "@/services/contracts.service";
+import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
+import { fileViewUrl } from "@/constants/apiConfig";
+import { downloadBookingFile } from "@/services/files.service";
+import type { Freight } from "@edr/types";
 
 // Clearance phase — staff can still ACT (approve / query / finalize).
 const CLEARANCE_ACTIVE_STATUSES = [
@@ -94,7 +113,8 @@ export default function ContractRequestDetailPage() {
   } = useContractDetail(id);
   const mutations = useContractMutations(id ?? "");
   const [searchParams, setSearchParams] = useSearchParams();
-  const activeTab = searchParams.get("tab") === "clearance" ? "clearance" : "details";
+  const { view, viewer } = useFileViewer();
+  const requestedTab = searchParams.get("tab");
   const setTab = (tab: string) =>
     setSearchParams(
       (prev) => {
@@ -106,6 +126,48 @@ export default function ContractRequestDetailPage() {
       { replace: true },
     );
 
+  const handleViewFile = (file: NonNullable<Freight.IContract["files"]>[number]) =>
+    view({
+      name: file.name,
+      url: file.signedUrl ?? file.url,
+      mimeType: file.mimeType,
+    });
+
+  const handleDownloadFile = async (
+    file: NonNullable<Freight.IContract["files"]>[number],
+  ) => {
+    try {
+      await downloadBookingFile(file.id, file.name);
+    } catch {
+      toast.error("Could not download file.");
+    }
+  };
+
+  const showClearanceTabQuery = Boolean(
+    contract && CLEARANCE_REVIEW_STATUSES.includes(contract.status),
+  );
+  const { data: clearanceView } = useQuery({
+    queryKey: QUERY_KEYS.CONTRACTS.clearance(id ?? ""),
+    queryFn: () => contractsService.getClearance(id!),
+    enabled: Boolean(id) && showClearanceTabQuery,
+  });
+
+  const downloadContractPdf = async () => {
+    if (!contract?.id) return;
+    try {
+      const blob = await contractsService.downloadContractDocument(contract.id);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      const contractPdf = contract.files?.find((f) => f.code === "contract");
+      a.download = contractPdf?.name ?? `contract-${contract.reference}.pdf`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      toast.error("Could not download contract PDF.");
+    }
+  };
+
   if (isLoading) {
     return (
       <PageContainer>
@@ -172,13 +234,36 @@ export default function ContractRequestDetailPage() {
     contract.status === "APPROVED_PENDING_SIGNATURE";
 
   const showClearanceTab = CLEARANCE_REVIEW_STATUSES.includes(contract.status);
+  const phasedCustoms =
+    contract.contractKind === "ONE_TIME" && Boolean(contract.customsClearingEnabled);
+  const docsPhaseComplete =
+    clearanceView?.milestones?.some(
+      (m) => m.milestoneCode === "DOCUMENTS_APPROVED" && m.status === "COMPLETED",
+    ) ?? false;
+  const clearanceApprovalsLocked = phasedCustoms && docsPhaseComplete;
   // Once clearance is finalized the tab is informational only — no approve/query.
   const clearanceReadOnly = CLEARANCE_DONE_STATUSES.includes(contract.status);
   // Path A (no customs) → Operations reviews; Path B (customs) → GL reviews.
   const selfClear = !contract.customsClearingEnabled;
-  // If the tab param points at clearance but the contract isn't in a clearance
-  // phase, fall back to details so we never show an empty tab.
-  const currentTab = activeTab === "clearance" && showClearanceTab ? "clearance" : "details";
+  const files = contract.files ?? [];
+  const contractPdf = files.find((f) => f.code === "contract");
+  const hasContractDocument = Boolean(
+    contractPdf || contract.contractGeneratedAt,
+  );
+  const canViewSign =
+    (contract.status === "CONTRACT_READY" ||
+      contract.status === "SIGNED_CUSTOMER") &&
+    Boolean(contract.contractGeneratedAt);
+  // Resolve the active tab from the URL, falling back to details when the
+  // requested tab isn't available for this contract (e.g. clearance pre-phase).
+  const currentTab =
+    requestedTab === "documents"
+      ? "documents"
+      : requestedTab === "customer"
+        ? "customer"
+        : requestedTab === "clearance" && showClearanceTab
+          ? "clearance"
+          : "details";
 
   const customerLabel = contract.isGovernment
     ? (contract.governmentInstitution ?? "Government")
@@ -254,6 +339,48 @@ export default function ContractRequestDetailPage() {
                   />
                 ) : null}
               </Group>
+              {hasContractDocument && (
+                <Group gap="sm" mt="sm">
+                  {canViewSign && (
+                    <Button
+                      color="edr-green"
+                      size="compact-sm"
+                      radius="lg"
+                      leftSection={<FileSignature size={15} />}
+                      onClick={() =>
+                        navigate(`/dashboard/contract-requests/${contract.id}/view`)
+                      }
+                    >
+                      View &amp; sign contract
+                    </Button>
+                  )}
+                  {contractPdf && (
+                    <Button
+                      variant="default"
+                      size="compact-sm"
+                      radius="lg"
+                      leftSection={<FileText size={15} />}
+                      onClick={() =>
+                        handleViewFile({
+                          ...contractPdf,
+                          url: fileViewUrl(contractPdf.id),
+                        })
+                      }
+                    >
+                      View contract
+                    </Button>
+                  )}
+                  <Button
+                    variant="default"
+                    size="compact-sm"
+                    radius="lg"
+                    leftSection={<Download size={15} />}
+                    onClick={() => void downloadContractPdf()}
+                  >
+                    Download PDF
+                  </Button>
+                </Group>
+              )}
             </Stack>
           </Stack>
         </Paper>
@@ -264,38 +391,83 @@ export default function ContractRequestDetailPage() {
           description={statusMeta.description}
         />
 
-        {showClearanceTab && (
-          <Tabs
-            value={currentTab}
-            onChange={(v) => setTab(v ?? "details")}
-            variant="pills"
-            color="edr-green"
-            classNames={{ list: "ov-tablist", tab: "ov-tab" }}
-          >
-            <Tabs.List>
-              <Tabs.Tab value="details" leftSection={<FileText size={16} />}>
-                Details
-              </Tabs.Tab>
+        <Tabs
+          value={currentTab}
+          onChange={(v) => setTab(v ?? "details")}
+          variant="pills"
+          color="edr-green"
+          classNames={{ list: "ov-tablist", tab: "ov-tab" }}
+        >
+          <Tabs.List>
+            <Tabs.Tab value="details" leftSection={<LayoutGrid size={16} />}>
+              Details
+            </Tabs.Tab>
+            <Tabs.Tab
+              value="documents"
+              leftSection={<Files size={16} />}
+              rightSection={
+                files.length > 0 ? (
+                  <Badge size="xs" variant="light" color="gray" radius="sm">
+                    {files.length}
+                  </Badge>
+                ) : null
+              }
+            >
+              Documents
+            </Tabs.Tab>
+            <Tabs.Tab value="customer" leftSection={<Users size={16} />}>
+              Customer
+            </Tabs.Tab>
+            {showClearanceTab && (
               <Tabs.Tab
                 value="clearance"
                 leftSection={<ShieldCheck size={16} />}
               >
                 Clearance Review
               </Tabs.Tab>
-            </Tabs.List>
-          </Tabs>
-        )}
+            )}
+          </Tabs.List>
+        </Tabs>
 
         <Grid gap="lg">
           {/* LEFT — primary content */}
           <Grid.Col span={{ base: 12, lg: 8 }}>
             {currentTab === "clearance" ? (
-              <ContractClearanceReviewSection
-                contractId={id!}
-                selfClear={selfClear}
-                readOnly={clearanceReadOnly}
-                onChanged={() => refetch()}
-              />
+              <Stack gap="lg">
+                <ContractClearanceReviewSection
+                  contractId={id!}
+                  selfClear={selfClear}
+                  readOnly={clearanceReadOnly}
+                  phasedCustoms={phasedCustoms}
+                  approvalsLocked={clearanceApprovalsLocked}
+                  onChanged={() => refetch()}
+                />
+                {(clearanceView?.workflowFiles?.length ?? 0) > 0 ? (
+                  <ClearanceWorkflowFilesPanel
+                    files={clearanceView!.workflowFiles!}
+                    onView={view}
+                    onDownload={(f) => void handleDownloadFile({ id: f.id, name: f.name } as never)}
+                  />
+                ) : null}
+              </Stack>
+            ) : currentTab === "documents" ? (
+              <Stack gap="lg">
+                <ContractDocumentsCard
+                  files={files}
+                  onView={handleViewFile}
+                  onDownload={handleDownloadFile}
+                />
+                {(clearanceView?.workflowFiles?.length ?? 0) > 0 ? (
+                  <ClearanceWorkflowFilesPanel
+                    files={clearanceView!.workflowFiles!}
+                    title="Customs workflow documents"
+                    onView={view}
+                    onDownload={(f) => void handleDownloadFile({ id: f.id, name: f.name } as never)}
+                  />
+                ) : null}
+              </Stack>
+            ) : currentTab === "customer" ? (
+              <ContractCustomerCard contract={contract} />
             ) : (
             <Stack gap="lg">
               <SectionCard icon={RouteIcon} title="Routes">
@@ -453,6 +625,8 @@ export default function ContractRequestDetailPage() {
           </Grid.Col>
         </Grid>
       </Stack>
+
+      {viewer}
     </PageContainer>
   );
 }

apps/edr-freight-web/backoffice/src/pages/contracts/ContractViewPage.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -13,18 +13,17 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
-import { ArrowLeft, FileSignature, Printer } from "lucide-react";
+import { ArrowLeft, Download, FileSignature, Printer } from "lucide-react";
 import toast from "react-hot-toast";
 
+import { ContractSignSuccessModal } from "@/components/contracts/ContractSignSuccessModal";
 import { ContractSignaturePad } from "@/components/bookings/ContractSignaturePad";
 import { contractsService } from "@/services/contracts.service";
 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
 
 /**
  * Staff contract preview + sign. Staff must open and read the generated
- * contract here before signing — there is no sign action on the detail page or
- * the list table. Signing as STAFF is only possible once the contract has been
- * generated and is in CONTRACT_READY / SIGNED_CUSTOMER.
+ * contract here before signing.
  */
 export default function ContractViewPage() {
   const { id } = useParams<{ id: string }>();
@@ -33,9 +32,9 @@ export default function ContractViewPage() {
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
   const [signOpen, setSignOpen] = useState(false);
+  const [successOpen, setSuccessOpen] = useState(false);
   const [signerName, setSignerName] = useState("");
   const [signatureData, setSignatureData] = useState<string | null>(null);
-  // Offer the staff member's saved signature first; they can draw a fresh one.
   const [drawNew, setDrawNew] = useState(false);
 
   const { data, isLoading, isError, refetch } = useQuery({
@@ -58,8 +57,8 @@ export default function ContractViewPage() {
         consentText: "I confirm this contract on behalf of EDR.",
       }),
     onSuccess: () => {
-      toast.success("Contract signed");
       setSignOpen(false);
+      setSuccessOpen(true);
       void refetch();
       void qc.invalidateQueries({ queryKey: QUERY_KEYS.CONTRACTS.byId(id!) });
       void qc.invalidateQueries({ queryKey: QUERY_KEYS.CONTRACTS.ROOT });
@@ -69,6 +68,21 @@ export default function ContractViewPage() {
 
   const handlePrint = () => iframeRef.current?.contentWindow?.print();
 
+  const downloadPdf = useCallback(async () => {
+    if (!id) return;
+    try {
+      const blob = await contractsService.downloadContractDocument(id);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `contract-${data?.reference ?? id}.pdf`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      toast.error("Could not download contract PDF.");
+    }
+  }, [id, data?.reference]);
+
   const openSign = () => {
     setSignerName(data?.savedSignature?.signerDisplayName ?? "");
     setSignatureData(null);
@@ -124,6 +138,13 @@ export default function ContractViewPage() {
             >
               Print
             </Button>
+            <Button
+              variant="default"
+              leftSection={<Download size={16} />}
+              onClick={() => void downloadPdf()}
+            >
+              Download PDF
+            </Button>
             {data.canSignStaff && (
               <Button
                 color="edr-green"
@@ -217,6 +238,16 @@ export default function ContractViewPage() {
           </Group>
         </Stack>
       </Modal>
+
+      <ContractSignSuccessModal
+        opened={successOpen}
+        reference={data.reference}
+        message="The contract has been counter-signed. The customer will be notified of the next steps."
+        onClose={() => {
+          setSuccessOpen(false);
+          navigate(`/dashboard/contract-requests/${data.contractId}`);
+        }}
+      />
     </Box>
   );
 }

apps/edr-freight-web/backoffice/src/pages/contracts/GlClearanceDetailPage.tsx

@@ -0,0 +1,263 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
+import {
+  Alert,
+  Badge,
+  Box,
+  Button,
+  Grid,
+  Group,
+  Loader,
+  Stack,
+  Tabs,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import { AlertCircle, ClipboardList, FileText, Upload } from "lucide-react";
+import type { Freight } from "@edr/types";
+
+import { PageContainer } from "@/components/page/PageContainer";
+import { PageHeader } from "@/components/page/PageHeader";
+import { ClearanceReviewSection } from "@/components/bookings/detail/ClearanceReviewSection";
+import { ContractClearanceReviewSection } from "@/components/contracts/ContractClearanceReviewSection";
+import { ClearanceWorkflowFilesPanel } from "@/components/contracts/ClearanceWorkflowFilesPanel";
+import {
+  GlClearanceUploadModal,
+  type GlClearanceUploadKind,
+} from "@/components/contracts/GlClearanceUploadModal";
+import { PhasedClearanceActionPanel } from "@/components/contracts/PhasedClearanceActionPanel";
+import { findWorkflowFile } from "@/components/contracts/PhasedUploadedFileRow";
+import { useFileViewer } from "@/hooks/useFileViewer";
+import { contractsService } from "@/services/contracts.service";
+import { bookingsService } from "@/services/bookings.service";
+import { downloadBookingFile } from "@/services/files.service";
+
+type GlClearanceDetail =
+  | {
+      kind: "contract";
+      reference: string;
+      tradeDirection: string;
+      clearance: Freight.ContractClearanceView;
+    }
+  | {
+      kind: "booking";
+      reference: string;
+      tradeDirection: string;
+      clearance: Freight.ClearanceView;
+    };
+
+async function loadGlClearanceDetail(id: string): Promise<GlClearanceDetail> {
+  try {
+    const [clearance, contract] = await Promise.all([
+      contractsService.getClearance(id),
+      contractsService.getById(id),
+    ]);
+    return {
+      kind: "contract",
+      reference: contract.reference,
+      tradeDirection: contract.tradeDirection,
+      clearance,
+    };
+  } catch {
+    const [clearance, booking] = await Promise.all([
+      bookingsService.getClearance(id),
+      bookingsService.getById(id),
+    ]);
+    return {
+      kind: "booking",
+      reference: booking.reference,
+      tradeDirection: booking.tradeDirection,
+      clearance,
+    };
+  }
+}
+
+/** Djibouti GL clearance detail — RO/DO upload and read-only upstream context. */
+export default function GlClearanceDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const { view, viewer } = useFileViewer();
+  const [uploadKind, setUploadKind] = useState<GlClearanceUploadKind | null>(null);
+
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ["gl-clearance-detail", id],
+    queryFn: () => loadGlClearanceDetail(id!),
+    enabled: Boolean(id),
+  });
+
+  if (isLoading) {
+    return (
+      <PageContainer>
+        <Stack align="center" py={80}>
+          <Loader color="edr-green" />
+          <Text c="dimmed">Loading clearance…</Text>
+        </Stack>
+      </PageContainer>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <PageContainer>
+        <Alert color="red" icon={<AlertCircle size={16} />}>
+          Could not load clearance for this item.
+        </Alert>
+      </PageContainer>
+    );
+  }
+
+  const backTo = "/dashboard/gl-djibouti/clearance";
+  const workflowFiles = data.clearance.workflowFiles ?? [];
+  const workflowFileCount = workflowFiles.filter((f) => f.file).length;
+  const isImport = data.tradeDirection === "IMPORT";
+  const hasDo = Boolean(findWorkflowFile(workflowFiles, "delivery_order"));
+  const hasRo = Boolean(findWorkflowFile(workflowFiles, "release_order"));
+  // DO upload is un-gated — Djibouti GL may attach it at any point, any file type.
+  const canUploadDo = isImport;
+  const vesselDepartureDate =
+    "vesselDepartureDate" in data.clearance
+      ? (data.clearance.vesselDepartureDate ?? null)
+      : null;
+
+  return (
+    <PageContainer>
+      <Stack gap="lg">
+        <PageHeader
+          title={data.reference}
+          backTo={backTo}
+          breadcrumbs={[
+            { label: "GL Djibouti Clearance", href: backTo },
+            { label: data.reference },
+          ]}
+          meta={
+            <Badge variant="light" color={isImport ? "edr-green" : "gray"} radius="sm">
+              {data.tradeDirection}
+            </Badge>
+          }
+          action={
+            <Group gap="sm">
+              {isImport ? (
+                <Button
+                  color="edr-green"
+                  leftSection={<Upload size={16} />}
+                  disabled={!canUploadDo}
+                  onClick={() => setUploadKind("do")}
+                >
+                  {hasDo ? "Replace DO" : "Upload DO"}
+                </Button>
+              ) : (
+                <Button
+                  color="edr-green"
+                  leftSection={<Upload size={16} />}
+                  onClick={() => setUploadKind("ro")}
+                >
+                  {hasRo ? "Replace RO" : "Upload RO"}
+                </Button>
+              )}
+            </Group>
+          }
+        />
+
+        <Tabs defaultValue="workflow" keepMounted={false}>
+          <Tabs.List mb="md">
+            <Tabs.Tab value="workflow" leftSection={<ClipboardList size={14} />}>
+              Clearance workflow
+            </Tabs.Tab>
+            <Tabs.Tab
+              value="documents"
+              leftSection={<FileText size={14} />}
+              rightSection={
+                workflowFileCount > 0 ? (
+                  <Badge size="xs" variant="light" color="edr-green" circle>
+                    {workflowFileCount}
+                  </Badge>
+                ) : undefined
+              }
+            >
+              Customs documents (all steps)
+            </Tabs.Tab>
+          </Tabs.List>
+
+          <Tabs.Panel value="workflow">
+            <Grid gutter="lg">
+              <Grid.Col span={{ base: 12, lg: 7 }}>
+                {data.kind === "booking" ? (
+                  <ClearanceReviewSection bookingId={id!} hideSummary readOnly />
+                ) : (
+                  <ContractClearanceReviewSection
+                    contractId={id!}
+                    hideSummary
+                    selfClear={false}
+                    readOnly
+                    phasedCustoms
+                  />
+                )}
+              </Grid.Col>
+
+              <Grid.Col span={{ base: 12, lg: 5 }}>
+                <PhasedClearanceActionPanel
+                  contractId={data.kind === "contract" ? id : undefined}
+                  bookingId={data.kind === "booking" ? id : undefined}
+                  clearance={data.clearance}
+                  tradeDirection={data.tradeDirection}
+                  workflowFiles={workflowFiles}
+                  roleMode="DJ"
+                  useUploadModals
+                  onUploadDoRequest={() => setUploadKind("do")}
+                  onUploadRoRequest={() => setUploadKind("ro")}
+                  onChanged={() => void refetch()}
+                  onViewFile={view}
+                  onDownloadFile={(f) => void downloadBookingFile(f.id, f.name)}
+                />
+              </Grid.Col>
+            </Grid>
+          </Tabs.Panel>
+
+          <Tabs.Panel value="documents">
+            {workflowFiles.length > 0 ? (
+              <ClearanceWorkflowFilesPanel
+                files={workflowFiles}
+                title="Customs documents (all steps)"
+                onView={view}
+                onDownload={(f) => void downloadBookingFile(f.id, f.name)}
+              />
+            ) : (
+              <Box
+                py={48}
+                style={{
+                  borderRadius: 12,
+                  border: "1px dashed var(--mantine-color-gray-4)",
+                  background: "var(--mantine-color-gray-0)",
+                  textAlign: "center",
+                }}
+              >
+                <Stack gap={8} align="center">
+                  <ThemeIcon variant="light" color="gray" radius="xl" size={48}>
+                    <FileText size={22} />
+                  </ThemeIcon>
+                  <Text size="sm" c="dimmed" maw={360}>
+                    No customs workflow documents uploaded yet. Files from Ethiopia-side
+                    clearance and your DO/RO uploads will appear here.
+                  </Text>
+                </Stack>
+              </Box>
+            )}
+          </Tabs.Panel>
+        </Tabs>
+      </Stack>
+
+      <GlClearanceUploadModal
+        opened={uploadKind != null}
+        kind={uploadKind}
+        onClose={() => setUploadKind(null)}
+        entityId={id!}
+        isBooking={data.kind === "booking"}
+        workflowFiles={workflowFiles}
+        vesselDepartureDate={vesselDepartureDate}
+        onSuccess={() => void refetch()}
+        onPreview={view}
+      />
+      {viewer}
+    </PageContainer>
+  );
+}

apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx

@@ -0,0 +1,123 @@
+import { useNavigate } from "react-router-dom";
+import { Badge, Card, Group, Loader, Stack, Tabs, Text } from "@mantine/core";
+import { ChevronRight, Container, Ship } from "lucide-react";
+
+import { PageContainer } from "@/components/page/PageContainer";
+import { PageHeader } from "@/components/page/PageHeader";
+import { useDjClearanceQueue } from "@/hooks/contracts/useContracts";
+import { useBookingDjClearanceQueue } from "@/hooks/bookings/useBookings";
+
+export default function GlDjiboutiClearanceListPage() {
+  const navigate = useNavigate();
+  const { data: contractQueue, isLoading: contractsLoading } = useDjClearanceQueue();
+  const { data: bookingQueue, isLoading: bookingsLoading } = useBookingDjClearanceQueue();
+
+  const contractItems = contractQueue?.items ?? [];
+  const bookingItems = bookingQueue ?? [];
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title="GL Djibouti — Clearance"
+        subtitle="All customs contracts and bookings handed off to Djibouti GL — stays visible after DO/RO upload and booking creation."
+      />
+      <Tabs defaultValue="contracts" keepMounted={false}>
+        <Tabs.List mb="md">
+          <Tabs.Tab value="contracts">Contracts ({contractItems.length})</Tabs.Tab>
+          <Tabs.Tab value="bookings">Bookings ({bookingItems.length})</Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value="contracts">
+          {contractsLoading ? (
+            <Group justify="center" py={60}>
+              <Loader color="edr-green" />
+            </Group>
+          ) : (
+            <Stack gap="sm">
+              {contractItems.length === 0 ? (
+                <Text c="dimmed" ta="center" py="xl">
+                  No Djibouti customs contracts yet. Items appear here once Ethiopia-side
+                  pre-clearance is finalized.
+                </Text>
+              ) : (
+                contractItems.map((c) => (
+                  <Card
+                    key={c.id}
+                    withBorder
+                    radius="md"
+                    padding="md"
+                    style={{ cursor: "pointer" }}
+                    onClick={() => navigate(`/dashboard/gl-djibouti/clearance/${c.id}`)}
+                  >
+                    <Group justify="space-between" wrap="nowrap">
+                      <Group gap="sm">
+                        <Ship size={18} className="text-[color:var(--freight-brand)]" />
+                        <div>
+                          <Text fw={700}>{c.reference}</Text>
+                          <Text size="sm" c="dimmed">
+                            {c.tradeDirection} · {c.status}
+                          </Text>
+                        </div>
+                      </Group>
+                      <Group gap="xs">
+                        <Badge variant="light" color="edr-green">
+                          Contract
+                        </Badge>
+                        <ChevronRight size={18} className="text-muted-foreground" />
+                      </Group>
+                    </Group>
+                  </Card>
+                ))
+              )}
+            </Stack>
+          )}
+        </Tabs.Panel>
+
+        <Tabs.Panel value="bookings">
+          {bookingsLoading ? (
+            <Group justify="center" py={60}>
+              <Loader color="edr-green" />
+            </Group>
+          ) : (
+            <Stack gap="sm">
+              {bookingItems.length === 0 ? (
+                <Text c="dimmed" ta="center" py="xl">
+                  No Djibouti customs bookings yet.
+                </Text>
+              ) : (
+                bookingItems.map((b) => (
+                  <Card
+                    key={b.id}
+                    withBorder
+                    radius="md"
+                    padding="md"
+                    style={{ cursor: "pointer" }}
+                    onClick={() => navigate(`/dashboard/gl-djibouti/clearance/${b.id}`)}
+                  >
+                    <Group justify="space-between" wrap="nowrap">
+                      <Group gap="sm">
+                        <Container size={18} className="text-[color:var(--freight-brand)]" />
+                        <div>
+                          <Text fw={700}>{b.reference}</Text>
+                          <Text size="sm" c="dimmed">
+                            {b.tradeDirection} · {b.status}
+                          </Text>
+                        </div>
+                      </Group>
+                      <Group gap="xs">
+                        <Badge variant="light" color="blue">
+                          Booking
+                        </Badge>
+                        <ChevronRight size={18} className="text-muted-foreground" />
+                      </Group>
+                    </Group>
+                  </Card>
+                ))
+              )}
+            </Stack>
+          )}
+        </Tabs.Panel>
+      </Tabs>
+    </PageContainer>
+  );
+}

apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestDetailPage.tsx

@@ -6,6 +6,7 @@ import {
   Badge,
   Box,
   Button,
+  Grid,
   Group,
   Loader,
   Modal,
@@ -24,6 +25,12 @@ import type { Freight } from "@edr/types";
 import { PageContainer } from "@/components/page/PageContainer";
 import { PageHeader } from "@/components/page/PageHeader";
 import { SectionCard } from "@/components/bookings/detail/SectionCard";
+import {
+  RequestCustomerCard,
+  RequestContractSummaryCard,
+  RequestRouteCargoCard,
+  RequestServiceTypeCard,
+} from "@/components/contracts/detail/RequestDetailCards";
 import { contractsService } from "@/services/contracts.service";
 
 const fmtDate = (iso?: string | null) =>
@@ -167,49 +174,67 @@ export default function ShipmentRequestDetailPage() {
           }
         />
 
-        <SectionCard icon={CalendarDays} title="Requested shipment">
-          <Stack gap="sm">
-            <Group justify="space-between">
-              <Text size="sm" c="dimmed">
-                Preferred date (informational)
-              </Text>
-              <Text size="sm" fw={600}>
-                {fmtDate(request.scheduledDate)}
-              </Text>
-            </Group>
-            <Box>
-              <Text size="sm" c="dimmed" mb={6}>
-                Quantities
-              </Text>
-              <Stack gap={4}>
-                {lineRows(request.requestedLines ?? {}).map((l, i) => (
-                  <Badge
-                    key={i}
-                    variant="light"
-                    color="edr-green"
-                    radius="sm"
-                    size="lg"
-                  >
-                    {l}
-                  </Badge>
-                ))}
-              </Stack>
-            </Box>
-            {request.notes ? (
-              <Box>
-                <Text size="sm" c="dimmed" mb={4}>
-                  Customer note
-                </Text>
-                <Text size="sm">{request.notes}</Text>
-              </Box>
-            ) : null}
-            {request.reviewNote ? (
-              <Alert color="red" variant="light" radius="md" mt="sm">
-                Rejected: {request.reviewNote}
-              </Alert>
-            ) : null}
-          </Stack>
-        </SectionCard>
+        <Grid gap="lg">
+          {/* LEFT — the request itself + route/cargo scope */}
+          <Grid.Col span={{ base: 12, lg: 7 }}>
+            <Stack gap="lg">
+              <SectionCard icon={CalendarDays} title="Requested shipment">
+                <Stack gap="sm">
+                  <Group justify="space-between">
+                    <Text size="sm" c="dimmed">
+                      Preferred date (informational)
+                    </Text>
+                    <Text size="sm" fw={600}>
+                      {fmtDate(request.scheduledDate)}
+                    </Text>
+                  </Group>
+                  <Box>
+                    <Text size="sm" c="dimmed" mb={6}>
+                      Quantities
+                    </Text>
+                    <Stack gap={4}>
+                      {lineRows(request.requestedLines ?? {}).map((l, i) => (
+                        <Badge
+                          key={i}
+                          variant="light"
+                          color="edr-green"
+                          radius="sm"
+                          size="lg"
+                        >
+                          {l}
+                        </Badge>
+                      ))}
+                    </Stack>
+                  </Box>
+                  {request.notes ? (
+                    <Box>
+                      <Text size="sm" c="dimmed" mb={4}>
+                        Customer note
+                      </Text>
+                      <Text size="sm">{request.notes}</Text>
+                    </Box>
+                  ) : null}
+                  {request.reviewNote ? (
+                    <Alert color="red" variant="light" radius="md" mt="sm">
+                      Rejected: {request.reviewNote}
+                    </Alert>
+                  ) : null}
+                </Stack>
+              </SectionCard>
+
+              <RequestRouteCargoCard contract={request.contract} />
+            </Stack>
+          </Grid.Col>
+
+          {/* RIGHT — customer, contract + service-type context */}
+          <Grid.Col span={{ base: 12, lg: 5 }}>
+            <Stack gap="lg">
+              <RequestCustomerCard contract={request.contract} />
+              <RequestContractSummaryCard contract={request.contract} />
+              <RequestServiceTypeCard contract={request.contract} />
+            </Stack>
+          </Grid.Col>
+        </Grid>
       </Stack>
 
       <Modal

apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx

@@ -1,22 +1,30 @@
 import { useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   ActionIcon,
   Badge,
   Box,
+  Button,
   Group,
+  Modal,
   Stack,
   Text,
+  Textarea,
   TextInput,
 } from "@mantine/core";
-import { ChevronRight, Inbox, PackageSearch, RefreshCw, Search } from "lucide-react";
+import { Inbox, PackageSearch, RefreshCw, Search } from "lucide-react";
 import { DataTable, type ColumnDef } from "@edr/ui-common";
 import type { Freight } from "@edr/types";
 
 import { PageContainer } from "@/components/page/PageContainer";
 import { PageHeader } from "@/components/page/PageHeader";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
+import {
+  getShipmentRejectAction,
+  getShipmentStaffRowAction,
+  type ShipmentListRow,
+} from "@/features/contracts/mapShipmentListRow";
 import { contractsService } from "@/services/contracts.service";
 
 const cellMeta = {
@@ -33,7 +41,6 @@ const fmtDate = (iso?: string | null) =>
       }).format(new Date(iso))
     : "—";
 
-/** Summarize requested quantities for the list row. */
 function summarizeLines(lines: Freight.RequestedShipmentLines): string {
   if (lines.containers?.length) {
     return lines.containers
@@ -49,17 +56,13 @@ function summarizeLines(lines: Freight.RequestedShipmentLines): string {
   return "—";
 }
 
-interface RequestRow {
-  id: string;
-  reference: string;
-  contractReference: string;
-  scheduledDate?: string | null;
-  summary: string;
-}
-
 export default function ShipmentRequestsPage() {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const [query, setQuery] = useState("");
+  const [rejectTarget, setRejectTarget] = useState<ShipmentListRow | null>(null);
+  const [rejectNote, setRejectNote] = useState("");
+  const [acceptTarget, setAcceptTarget] = useState<ShipmentListRow | null>(null);
 
   const { data, isLoading, isError, isFetching, refetch } = useQuery({
     queryKey: ["shipment-request-queue"],
@@ -67,13 +70,26 @@ export default function ShipmentRequestsPage() {
     refetchInterval: 30_000,
   });
 
-  const rows = useMemo<RequestRow[]>(() => {
+  const reject = useMutation({
+    mutationFn: () =>
+      contractsService.rejectBookingRequest(rejectTarget!.id, rejectNote),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["shipment-request-queue"] });
+      setRejectTarget(null);
+      setRejectNote("");
+    },
+  });
+
+  const rows = useMemo<ShipmentListRow[]>(() => {
     const all = (data ?? []).map((r) => ({
       id: r.id,
       reference: r.reference || r.id.slice(0, 8),
+      contractId: r.contractId,
       contractReference: r.contract?.reference ?? r.contractId,
       scheduledDate: r.scheduledDate,
       summary: summarizeLines(r.requestedLines ?? {}),
+      status: r.status,
+      createdBookingId: r.createdBookingId,
     }));
     const q = query.trim().toLowerCase();
     if (!q) return all;
@@ -85,7 +101,7 @@ export default function ShipmentRequestsPage() {
     );
   }, [data, query]);
 
-  const columns = useMemo<ColumnDef<RequestRow>[]>(
+  const columns = useMemo<ColumnDef<ShipmentListRow>[]>(
     () => [
       {
         id: "reference",
@@ -126,16 +142,55 @@ export default function ShipmentRequestsPage() {
         ),
       },
       {
-        id: "go",
-        size: 56,
-        cell: () => (
-          <Group justify="flex-end" pr="xs">
-            <ChevronRight size={16} className="text-muted-foreground" />
-          </Group>
-        ),
+        id: "actions",
+        header: () => <span className={ruleEngineTable.headerCell}>Action</span>,
+        meta: cellMeta,
+        cell: ({ row }) => {
+          const primary = getShipmentStaffRowAction(row.original);
+          const rejectAction = getShipmentRejectAction(row.original);
+          return (
+            <Group gap={6} wrap="nowrap" justify="flex-end">
+              {rejectAction ? (
+                <Button
+                  size="compact-sm"
+                  radius="md"
+                  variant="light"
+                  color="red"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setRejectTarget(row.original);
+                  }}
+                >
+                  {rejectAction.label}
+                </Button>
+              ) : null}
+              {primary.kind === "navigate" ? (
+                <Button
+                  size="compact-sm"
+                  radius="md"
+                  variant={primary.variant === "filled" ? "filled" : primary.variant}
+                  color="edr-green"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (
+                      primary.label === "Accept" &&
+                      row.original.status === "PENDING"
+                    ) {
+                      setAcceptTarget(row.original);
+                    } else {
+                      navigate(primary.to(row.original));
+                    }
+                  }}
+                >
+                  {primary.label}
+                </Button>
+              ) : null}
+            </Group>
+          );
+        },
       },
     ],
-    [],
+    [navigate],
   );
 
   return (
@@ -203,6 +258,95 @@ export default function ShipmentRequestsPage() {
           />
         )}
       </Stack>
+
+      <Modal
+        opened={rejectTarget !== null}
+        onClose={() => {
+          if (!reject.isPending) {
+            setRejectTarget(null);
+            setRejectNote("");
+          }
+        }}
+        title="Reject shipment request"
+        radius="md"
+        centered
+      >
+        <Stack gap="md">
+          <Text size="sm" c="dimmed">
+            Reject request{" "}
+            <Text span fw={600}>
+              {rejectTarget?.reference}
+            </Text>
+            ? The customer will be notified.
+          </Text>
+          <Textarea
+            label="Reason"
+            placeholder="Explain why this request cannot be accepted…"
+            value={rejectNote}
+            onChange={(e) => setRejectNote(e.currentTarget.value)}
+            minRows={3}
+            radius="md"
+          />
+          <Group justify="flex-end" gap="sm">
+            <Button
+              variant="default"
+              radius="md"
+              onClick={() => {
+                setRejectTarget(null);
+                setRejectNote("");
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              color="red"
+              radius="md"
+              loading={reject.isPending}
+              disabled={!rejectNote.trim()}
+              onClick={() => reject.mutate()}
+            >
+              Reject request
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      <Modal
+        opened={acceptTarget !== null}
+        onClose={() => setAcceptTarget(null)}
+        title="Accept shipment request"
+        radius="md"
+        centered
+      >
+        <Stack gap="md">
+          <Text size="sm" c="dimmed">
+            Proceed to create a booking for request{" "}
+            <Text span fw={600}>
+              {acceptTarget?.reference}
+            </Text>
+            ? You will confirm the shipment price before submitting.
+          </Text>
+          <Group justify="flex-end" gap="sm">
+            <Button variant="default" radius="md" onClick={() => setAcceptTarget(null)}>
+              Cancel
+            </Button>
+            <Button
+              color="edr-green"
+              radius="md"
+              onClick={() => {
+                if (!acceptTarget) return;
+                const to = getShipmentStaffRowAction(acceptTarget);
+                if (to.kind === "navigate") {
+                  navigate(to.to(acceptTarget));
+                }
+                setAcceptTarget(null);
+              }}
+            >
+              Continue
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </PageContainer>
   );
 }

apps/edr-freight-web/backoffice/src/pages/fleet/RoutesPage.tsx

@@ -1,5 +1,14 @@
 import { FormEvent, useMemo, useState } from "react";
-import { Ban, CircleCheck, Edit, Eye, Plus, Route as RouteIcon, Trash2 } from "lucide-react";
+import {
+  ArrowRight,
+  Ban,
+  CircleCheck,
+  Edit,
+  Eye,
+  Plus,
+  Route as RouteIcon,
+  Trash2,
+} from "lucide-react";
 import type { ColumnDef } from "@edr/ui-common";
 import {
   ActionIcon,
@@ -7,13 +16,16 @@ import {
   Box,
   Button,
   Card,
+  Divider,
   Group,
   Modal,
+  NumberInput,
   Select,
   SimpleGrid,
   Stack,
   Text,
   TextInput,
+  ThemeIcon,
   Tooltip,
 } from "@mantine/core";
 
@@ -26,22 +38,51 @@ import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import { api } from "@/services/api";
 import { useToast } from "@/hooks/use-toast";
-import type { RouteRecord, YardRef } from "@/services/routes.service";
+import {
+  formatRouteLabel,
+  ROUTE_STATUS_OPTIONS,
+  totalRouteDistanceKm,
+  type RouteRecord,
+  type RouteStatus,
+  type YardRef,
+} from "@/services/routes.service";
 import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
 
+type MilestoneFormRow = { yardId: string; distanceKm: string };
+
 type RouteFormState = {
-  name: string;
-  milestones: string[];
+  status: RouteStatus;
+  milestones: MilestoneFormRow[];
 };
 
-const emptyForm = (): RouteFormState => ({ name: "", milestones: ["", ""] });
+const emptyForm = (): RouteFormState => ({
+  status: "AVAILABLE",
+  milestones: [
+    { yardId: "", distanceKm: "0" },
+    { yardId: "", distanceKm: "" },
+  ],
+});
 
-const yardLabel = (yard?: YardRef | null) => (yard ? `${yard.label} (${yard.code})` : "—");
+const yardLabel = (yard?: YardRef | null) =>
+  yard ? `${yard.label} (${yard.code})` : "—";
 
-const routeStops = (route: RouteRecord) =>
-  (route.milestones ?? [])
-    .sort((left, right) => left.sequenceNo - right.sequenceNo)
-    .map((milestone) => milestone.yard?.label ?? milestone.yard?.code ?? milestone.yardId);
+const statusColor = (status: RouteStatus) => {
+  switch (status) {
+    case "AVAILABLE":
+      return "edr-green";
+    case "MAINTENANCE":
+      return "yellow";
+    case "DAMAGED":
+      return "red";
+    case "STOP_WORKING":
+      return "gray";
+    default:
+      return "gray";
+  }
+};
+
+const statusLabel = (status: RouteStatus) =>
+  ROUTE_STATUS_OPTIONS.find((o) => o.value === status)?.label ?? status;
 
 const normalizeRouteError = (error: unknown) => {
   const responseData = (error as { response?: { data?: unknown } })?.response?.data;
@@ -57,6 +98,60 @@ const normalizeRouteError = (error: unknown) => {
       : "Save failed";
 };
 
+function RouteTimeline({ route }: { route: RouteRecord }) {
+  const stops = [...(route.milestones ?? [])].sort(
+    (a, b) => a.sequenceNo - b.sequenceNo,
+  );
+  const total = totalRouteDistanceKm(route);
+
+  return (
+    <Stack gap="sm">
+      {stops.map((milestone, index) => {
+        const label =
+          milestone.yard?.label ?? milestone.yard?.code ?? milestone.yardId;
+        const role =
+          index === 0
+            ? "Origin"
+            : index === stops.length - 1
+              ? "Destination"
+              : `Milestone ${index}`;
+        const km = Number(milestone.distanceKm ?? 0);
+        return (
+          <Box key={milestone.id ?? `${milestone.yardId}-${index}`}>
+            {index > 0 && (
+              <Group gap={8} pl={18} py={6}>
+                <ThemeIcon size={22} radius="xl" variant="light" color="gray">
+                  <ArrowRight size={12} />
+                </ThemeIcon>
+                <Text size="xs" c="dimmed" fw={600}>
+                  {km} km
+                </Text>
+              </Group>
+            )}
+            <Group gap="sm" wrap="nowrap">
+              <Badge size="sm" variant="light" color={index === 0 ? "teal" : "gray"}>
+                {role}
+              </Badge>
+              <Text size="sm" fw={500}>
+                {label}
+              </Text>
+            </Group>
+          </Box>
+        );
+      })}
+      <Divider />
+      <Group justify="space-between">
+        <Text size="sm" fw={600}>
+          Total distance
+        </Text>
+        <Text size="sm" fw={700}>
+          {total} km
+        </Text>
+      </Group>
+    </Stack>
+  );
+}
+
 export default function RoutesPage() {
   const [search, setSearch] = useState("");
   const [formOpen, setFormOpen] = useState(false);
@@ -78,12 +173,14 @@ export default function RoutesPage() {
     if (!query) return routesQuery.data ?? [];
     return (routesQuery.data ?? []).filter((route) => {
       const searchable = [
-        route.name,
+        formatRouteLabel(route),
         route.originYard?.label,
         route.originYard?.code,
         route.destinationYard?.label,
         route.destinationYard?.code,
-        ...routeStops(route),
+        ...(route.milestones ?? []).map(
+          (m) => m.yard?.label ?? m.yard?.code ?? m.yardId,
+        ),
       ]
         .filter(Boolean)
         .join(" ")
@@ -99,7 +196,7 @@ export default function RoutesPage() {
   }, [filteredRoutes, pagination.pageIndex, pagination.pageSize]);
 
   const allRoutes = routesQuery.data ?? [];
-  const activeCount = allRoutes.filter((route) => route.isActive).length;
+  const availableCount = allRoutes.filter((r) => r.status === "AVAILABLE").length;
 
   const yardOptions = useMemo(
     () =>
@@ -110,6 +207,16 @@ export default function RoutesPage() {
     [yardsQuery.data],
   );
 
+  const formTotalKm = useMemo(
+    () =>
+      form.milestones.reduce(
+        (sum, row, index) =>
+          index === 0 ? sum : sum + Number(row.distanceKm || 0),
+        0,
+      ),
+    [form.milestones],
+  );
+
   const resetForm = () => {
     setFormOpen(false);
     setEditing(null);
@@ -125,41 +232,52 @@ export default function RoutesPage() {
   const openEdit = (route: RouteRecord) => {
     setEditing(route);
     setForm({
-      name: route.name,
-      milestones: (route.milestones ?? [])
-        .sort((left, right) => left.sequenceNo - right.sequenceNo)
-        .map((milestone) => milestone.yardId),
+      status: route.status,
+      milestones: [...(route.milestones ?? [])]
+        .sort((a, b) => a.sequenceNo - b.sequenceNo)
+        .map((m, index) => ({
+          yardId: m.yardId,
+          distanceKm: String(index === 0 ? 0 : (m.distanceKm ?? "")),
+        })),
     });
     setFormOpen(true);
   };
 
-  const setMilestone = (index: number, yardId: string) => {
+  const setMilestone = (index: number, patch: Partial<MilestoneFormRow>) => {
     setForm((current) => ({
       ...current,
-      milestones: current.milestones.map((value, currentIndex) =>
-        currentIndex === index ? yardId : value,
+      milestones: current.milestones.map((row, i) =>
+        i === index ? { ...row, ...patch } : row,
       ),
     }));
   };
 
   const addMilestone = () => {
-    setForm((current) => ({ ...current, milestones: [...current.milestones, ""] }));
+    setForm((current) => ({
+      ...current,
+      milestones: [...current.milestones, { yardId: "", distanceKm: "" }],
+    }));
   };
 
   const removeMilestone = (index: number) => {
     setForm((current) => ({
       ...current,
-      milestones: current.milestones.filter((_, currentIndex) => currentIndex !== index),
+      milestones: current.milestones.filter((_, i) => i !== index),
     }));
   };
 
+  const buildPayload = () => ({
+    status: form.status,
+    milestones: form.milestones.map((row, index) => ({
+      yardId: row.yardId,
+      distanceKm:
+        index === 0 ? 0 : row.distanceKm ? Number(row.distanceKm) : undefined,
+    })),
+  });
+
   const handleSubmit = async (event: FormEvent) => {
     event.preventDefault();
-    if (!form.name.trim()) {
-      toast({ title: "Save failed", description: "Route name is required", variant: "destructive" });
-      return;
-    }
-    if (form.milestones.length < 2 || form.milestones.some((yardId) => !yardId)) {
+    if (form.milestones.length < 2 || form.milestones.some((row) => !row.yardId)) {
       toast({
         title: "Save failed",
         description: "Select at least an origin and destination yard",
@@ -167,13 +285,20 @@ export default function RoutesPage() {
       });
       return;
     }
+    for (let i = 1; i < form.milestones.length; i++) {
+      const km = Number(form.milestones[i].distanceKm);
+      if (!form.milestones[i].distanceKm || Number.isNaN(km) || km < 0) {
+        toast({
+          title: "Save failed",
+          description: `Enter segment KM for stop ${i + 1}`,
+          variant: "destructive",
+        });
+        return;
+      }
+    }
 
     try {
-      const payload = {
-        name: form.name.trim(),
-        milestones: form.milestones.map((yardId) => ({ yardId })),
-        isActive: editing?.isActive ?? true,
-      };
+      const payload = buildPayload();
       if (editing) {
         await updateMutation.mutateAsync({ id: editing.id, data: payload });
         toast({ title: "Route updated" });
@@ -190,9 +315,19 @@ export default function RoutesPage() {
   const handleDeactivate = async (route: RouteRecord) => {
     try {
       await deactivateMutation.mutateAsync(route.id);
-      toast({ title: "Route deactivated" });
+      toast({ title: "Route marked stop working" });
     } catch {
-      toast({ title: "Deactivate failed", description: "Could not deactivate route", variant: "destructive" });
+      toast({ title: "Update failed", description: "Could not update route status", variant: "destructive" });
+    }
+  };
+
+  const handleStatusChange = async (route: RouteRecord, status: RouteStatus) => {
+    try {
+      await updateMutation.mutateAsync({ id: route.id, data: { status } });
+      setViewing((current) => (current?.id === route.id ? { ...current, status } : current));
+      toast({ title: "Status updated" });
+    } catch (error) {
+      toast({ title: "Update failed", description: normalizeRouteError(error), variant: "destructive" });
     }
   };
 
@@ -200,10 +335,14 @@ export default function RoutesPage() {
 
   const availableOptionsForIndex = (index: number) => {
     const selectedByOthers = new Set(
-      form.milestones.filter((value, currentIndex) => currentIndex !== index && value),
+      form.milestones
+        .filter((row, i) => i !== index && row.yardId)
+        .map((row) => row.yardId),
     );
     return yardOptions.filter(
-      (option) => option.value === form.milestones[index] || !selectedByOthers.has(option.value),
+      (option) =>
+        option.value === form.milestones[index]?.yardId ||
+        !selectedByOthers.has(option.value),
     );
   };
 
@@ -217,7 +356,16 @@ export default function RoutesPage() {
     const headerClassName = ruleEngineTable.headerCell;
     const cellClassName = ruleEngineTable.bodyCell;
     return [
-      { id: "name", header: "Name", meta: { headerClassName, cellClassName }, cell: ({ row }) => row.original.name },
+      {
+        id: "corridor",
+        header: "Corridor",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => (
+          <Text fw={600} size="sm">
+            {formatRouteLabel(row.original)}
+          </Text>
+        ),
+      },
       {
         id: "origin",
         header: "Origin",
@@ -231,18 +379,24 @@ export default function RoutesPage() {
         cell: ({ row }) => yardLabel(row.original.destinationYard),
       },
       {
-        id: "milestones",
-        header: "Milestones",
+        id: "distance",
+        header: "Total KM",
         meta: { headerClassName, cellClassName },
-        cell: ({ row }) => Math.max((row.original.milestones?.length ?? 0) - 2, 0),
+        cell: ({ row }) => `${totalRouteDistanceKm(row.original)} km`,
+      },
+      {
+        id: "milestones",
+        header: "Stops",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => row.original.milestones?.length ?? 0,
       },
       {
         id: "status",
         header: "Status",
         meta: { headerClassName, cellClassName },
         cell: ({ row }) => (
-          <Badge color={row.original.isActive ? "edr-green" : "gray"} variant="light" size="sm">
-            {row.original.isActive ? "Active" : "Inactive"}
+          <Badge color={statusColor(row.original.status)} variant="light" size="sm">
+            {statusLabel(row.original.status)}
           </Badge>
         ),
       },
@@ -262,11 +416,11 @@ export default function RoutesPage() {
                 <Edit size={16} />
               </ActionIcon>
             </Tooltip>
-            <Tooltip label="Deactivate">
+            <Tooltip label="Mark stop working">
               <ActionIcon
                 variant="subtle"
                 color="red"
-                disabled={!row.original.isActive || deactivateMutation.isPending}
+                disabled={row.original.status === "STOP_WORKING" || deactivateMutation.isPending}
                 onClick={() => handleDeactivate(row.original)}
               >
                 <Trash2 size={16} />
@@ -282,7 +436,7 @@ export default function RoutesPage() {
     <PageContainer>
       <PageHeader
         title="Routes"
-        subtitle="Define rail corridors and their ordered yard stops used by train scheduling."
+        subtitle="Define rail corridors, segment distances, and operational status for train scheduling."
         action={
           <Button leftSection={<Plus size={18} />} onClick={openCreate}>
             Add route
@@ -294,10 +448,10 @@ export default function RoutesPage() {
         loading={routesQuery.isLoading}
         items={[
           { label: "Total routes", value: allRoutes.length, icon: RouteIcon },
-          { label: "Active", value: activeCount, icon: CircleCheck, color: "edr-green" },
+          { label: "Available", value: availableCount, icon: CircleCheck, color: "edr-green" },
           {
-            label: "Inactive",
-            value: allRoutes.length - activeCount,
+            label: "Unavailable",
+            value: allRoutes.length - availableCount,
             icon: Ban,
             color: "gray",
           },
@@ -310,7 +464,7 @@ export default function RoutesPage() {
             <FleetToolbar
               search={search}
               onSearchChange={setSearch}
-              searchPlaceholder="Search routes…"
+              searchPlaceholder="Search corridors…"
               viewMode={viewMode}
               onViewModeChange={setViewMode}
             />
@@ -359,16 +513,13 @@ export default function RoutesPage() {
                     <Card key={route.id} radius="lg" padding="lg" withBorder>
                       <Stack gap="sm">
                         <Group justify="space-between">
-                          <Text fw={600}>{route.name}</Text>
-                          <Badge color={route.isActive ? "edr-green" : "gray"} variant="light" size="sm">
-                            {route.isActive ? "Active" : "Inactive"}
+                          <Text fw={600}>{formatRouteLabel(route)}</Text>
+                          <Badge color={statusColor(route.status)} variant="light" size="sm">
+                            {statusLabel(route.status)}
                           </Badge>
                         </Group>
                         <Text size="sm" c="dimmed">
-                          {yardLabel(route.originYard)} → {yardLabel(route.destinationYard)}
-                        </Text>
-                        <Text size="xs" c="dimmed">
-                          {Math.max((route.milestones?.length ?? 0) - 2, 0)} intermediate milestones
+                          {totalRouteDistanceKm(route)} km · {route.milestones?.length ?? 0} stops
                         </Text>
                         <Group gap={6} justify="flex-end">
                           <Button variant="light" size="compact-sm" onClick={() => setViewing(route)}>
@@ -405,26 +556,25 @@ export default function RoutesPage() {
       >
         <form onSubmit={handleSubmit}>
           <Stack gap="md">
-            <TextInput
-              label="Name"
-              value={form.name}
-              onChange={(e) => {
-                // Capture the value before the state updater runs — React may
-                // recycle the synthetic event, nulling currentTarget by the time
-                // the updater executes ("Cannot read properties of null").
-                const name = e.currentTarget.value;
-                setForm((current) => ({ ...current, name }));
-              }}
-            />
+            {editing && (
+              <Select
+                label="Status"
+                data={ROUTE_STATUS_OPTIONS}
+                value={form.status}
+                onChange={(value) =>
+                  value && setForm((current) => ({ ...current, status: value as RouteStatus }))
+                }
+              />
+            )}
             <Group justify="space-between">
               <Text size="sm" fw={500}>
-                Stops
+                Stops & segment distances
               </Text>
               <Button type="button" variant="light" size="compact-sm" onClick={addMilestone}>
                 Add milestone
               </Button>
             </Group>
-            {form.milestones.map((yardId, index) => {
+            {form.milestones.map((row, index) => {
               const role =
                 index === 0
                   ? "Origin"
@@ -432,18 +582,32 @@ export default function RoutesPage() {
                     ? "Destination"
                     : "Milestone";
               return (
-                <Group key={`${role}-${index}`} align="flex-end" wrap="nowrap">
-                  <Text w={100} size="sm" fw={500}>
+                <Group key={`${role}-${index}`} align="flex-end" wrap="nowrap" gap="sm">
+                  <Text w={90} size="sm" fw={500}>
                     {role}
                   </Text>
                   <Select
                     style={{ flex: 1 }}
                     data={availableOptionsForIndex(index)}
-                    value={yardId || null}
-                    onChange={(value) => value && setMilestone(index, value)}
+                    value={row.yardId || null}
+                    onChange={(value) => value && setMilestone(index, { yardId: value })}
                     placeholder="Select yard"
                     searchable
                   />
+                  {index > 0 ? (
+                    <NumberInput
+                      w={120}
+                      label="KM"
+                      min={0}
+                      decimalScale={2}
+                      value={row.distanceKm ? Number(row.distanceKm) : ""}
+                      onChange={(value) =>
+                        setMilestone(index, { distanceKm: String(value ?? "") })
+                      }
+                    />
+                  ) : (
+                    <Box w={120} />
+                  )}
                   <ActionIcon
                     variant="subtle"
                     color="red"
@@ -455,6 +619,9 @@ export default function RoutesPage() {
                 </Group>
               );
             })}
+            <Text size="sm" c="dimmed">
+              Total route distance: <strong>{formTotalKm} km</strong>
+            </Text>
             <Group justify="flex-end">
               <Button variant="default" type="button" onClick={resetForm}>
                 Cancel
@@ -470,44 +637,37 @@ export default function RoutesPage() {
       <Modal
         opened={Boolean(viewing)}
         onClose={() => setViewing(null)}
-        title={<Text fw={600}>Route details</Text>}
+        title={<Text fw={600}>{viewing ? formatRouteLabel(viewing) : "Route details"}</Text>}
         radius="lg"
         centered
+        size="md"
       >
         {viewing ? (
-          <Stack gap="sm">
+          <Stack gap="md">
+            <Group justify="space-between" align="flex-end">
+              <div>
+                <Text size="sm" fw={500}>
+                  Status
+                </Text>
+                <Badge mt={4} color={statusColor(viewing.status)} variant="light">
+                  {statusLabel(viewing.status)}
+                </Badge>
+              </div>
+              <Select
+                w={200}
+                label="Update status"
+                data={ROUTE_STATUS_OPTIONS}
+                value={viewing.status}
+                onChange={(value) =>
+                  value && handleStatusChange(viewing, value as RouteStatus)
+                }
+              />
+            </Group>
             <div>
-              <Text size="sm" fw={500}>
-                Name
+              <Text size="sm" fw={500} mb={8}>
+                Road timeline
               </Text>
-              <Text size="sm" c="dimmed">
-                {viewing.name}
-              </Text>
-            </div>
-            <div>
-              <Text size="sm" fw={500}>
-                Status
-              </Text>
-              <Text size="sm" c="dimmed">
-                {viewing.isActive ? "Active" : "Inactive"}
-              </Text>
-            </div>
-            <div>
-              <Text size="sm" fw={500}>
-                Stops
-              </Text>
-              <Stack gap={6} mt={6}>
-                {routeStops(viewing).map((stop, index, stops) => (
-                  <Text key={`${stop}-${index}`} size="sm" c="dimmed">
-                    {index === 0
-                      ? "Origin"
-                      : index === stops.length - 1
-                        ? "Destination"
-                        : `Milestone ${index}`}
-                    : {stop}
-                  </Text>
-                ))}
-              </Stack>
+              <RouteTimeline route={viewing} />
             </div>
           </Stack>
         ) : null}

apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx

@@ -4,6 +4,7 @@ import {
   ChevronRight,
   Eye,
   MoreHorizontal,
+  PackageCheck,
   Printer,
   RefreshCw,
   Ruler,
@@ -36,6 +37,7 @@ import {
 
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import { FirstMileContainerAllocationTable } from "@/components/FirstMileContainerAllocationTable";
+import { ReceiveInventoryModal } from "@/components/warehouses/ReceiveInventoryModal";
 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
 import { useToast } from "@/hooks/use-toast";
 import {
@@ -342,6 +344,8 @@ const FirstMilePage = () => {
   const [distanceValue, setDistanceValue] = useState("");
   const [invoiceOpen, setInvoiceOpen] = useState(false);
   const [invoiceRecord, setInvoiceRecord] = useState<FirstMileRecord | null>(null);
+  const [warehouseReceiveOpen, setWarehouseReceiveOpen] = useState(false);
+  const [warehouseReceiveRecord, setWarehouseReceiveRecord] = useState<FirstMileRecord | null>(null);
 
   const [containerAllocationOpen, setContainerAllocationOpen] = useState(false);
   const [containerAllocationFirstMileId, setContainerAllocationFirstMileId] = useState<string | null>(null);
@@ -550,6 +554,16 @@ const FirstMilePage = () => {
     setInvoiceRecord(null);
   };
 
+  const openWarehouseReceive = (record: FirstMileRecord) => {
+    setWarehouseReceiveRecord(record);
+    setWarehouseReceiveOpen(true);
+  };
+
+  const closeWarehouseReceive = () => {
+    setWarehouseReceiveOpen(false);
+    setWarehouseReceiveRecord(null);
+  };
+
   const openContainerAllocation = (firstMileId: string) => {
     setContainerAllocationFirstMileId(firstMileId);
     setContainerAllocationOpen(true);
@@ -853,6 +867,7 @@ const FirstMilePage = () => {
           const nextStatus = NEXT_STATUS[row.original.status];
           const canPrint = row.original.status !== "PAYMENT_PENDING";
           const isPaid = (row.original as any).paid;
+          const canReceiveToWarehouse = row.original.status === "RECEIVED_TO_PORT";
           return (
             <Group gap={4} justify="flex-end" wrap="nowrap">
               <Menu position="bottom-end" width={200} withinPortal>
@@ -891,6 +906,13 @@ const FirstMilePage = () => {
                   >
                     View detail
                   </Menu.Item>
+                  <Menu.Item
+                    leftSection={<PackageCheck size={15} />}
+                    disabled={!canReceiveToWarehouse}
+                    onClick={() => openWarehouseReceive(row.original)}
+                  >
+                    Receive to warehouse
+                  </Menu.Item>
                   <Menu.Item
                     leftSection={<Ruler size={15} />}
                     onClick={() => openDistance(row.original.id)}
@@ -1101,6 +1123,19 @@ const FirstMilePage = () => {
         </Stack>
       </Modal>
 
+      <ReceiveInventoryModal
+        opened={warehouseReceiveOpen}
+        onClose={closeWarehouseReceive}
+        mode="bulk"
+        direction="EXPORT"
+        bookingId={warehouseReceiveRecord?.bookingId}
+        bookingLabel={warehouseReceiveRecord ? bookingRef(warehouseReceiveRecord) : undefined}
+        onReceived={() => {
+          void qc.invalidateQueries({ queryKey: QUERY_KEYS.FIRST_MILE.list() });
+          closeWarehouseReceive();
+        }}
+      />
+
       {/* Accept Booking modal — step 1: booking list, step 2: details + vehicle */}
       <Modal
         opened={acceptOpen}

apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx

@@ -32,7 +32,7 @@ import {
   TextInput,
   UnstyledButton,
 } from "@mantine/core";
-import type { ArrivalQueueItem } from "@/types/warehouse";
+import type { ArrivalQueueItem, ImportUnloadedItem, WarehouseInventoryItem } from "@/types/warehouse";
 import { warehouseService } from "@/services/warehouse.service";
 
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
@@ -45,8 +45,10 @@ import {
   lastMileService,
 } from "@/services/last-mile.service";
 import { vehiclesService } from "@/services/vehicles.service";
+import { driversService, type Driver } from "@/services/drivers.service";
 import { ratesService } from "@/services/rates.service";
 import { LastMileContainerAllocationTable, type LastMileContainerRow } from "@/components/LastMileContainerAllocationTable";
+import { ReleaseOrderModal, type ReleaseOrderTruckPrefill } from "@/components/warehouses/ReleaseOrderModal";
 import { api } from "@/auth/http";
 
 const formatPrice = (amount: number) =>
@@ -111,6 +113,59 @@ const requestedDate = (r: LastMileRecord) => {
 const serviceTypeName = (r: LastMileRecord) =>
   r.booking?.serviceType?.label ?? r.booking?.serviceType?.name ?? "—";
 
+const toReleaseInventoryItem = (row: ImportUnloadedItem): WarehouseInventoryItem =>
+  ({
+    id: row.id,
+    bookingId: row.bookingId,
+    quantity: 1,
+    weight: Number(row.weight) || 0,
+    grnNumber: row.grnNumber,
+    status: row.currentStatus,
+    arrivedAt: row.arrivalTime,
+    unloadedAt: row.arrivalTime,
+    inspectionStatus: row.inspectionStatus,
+    releaseDate: row.releaseDate,
+    releaseOrderReference: row.releaseOrderReference,
+    handoverDocumentReference: row.handoverDocumentReference,
+    handoverDocumentDate: row.handoverDocumentDate,
+    deliveredAt: row.deliveredAt,
+    booking: row.bookingId
+      ? {
+          id: row.bookingId,
+          reference: row.bookingReference ?? row.bookingId,
+          tradeDirection: "IMPORT",
+          lastMileDeliveryAddress: row.lastMileRequested ? row.pickupOption : null,
+          customerTruckPlateNumber: row.customerTruckPlateNumber,
+          customerTruckDriverName: row.customerTruckDriverName,
+          customerTruckType: row.customerTruckType,
+          customerTruckContainerNumber: row.customerTruckContainerNumber,
+          customerTruckAssignedAt: row.customerTruckAssignedAt,
+        }
+      : null,
+  }) as unknown as WarehouseInventoryItem;
+
+const releasePrefillFromLastMile = (
+  record: LastMileRecord,
+  row?: ImportUnloadedItem | null,
+  driversById?: Map<string, Driver>,
+): ReleaseOrderTruckPrefill => {
+  const vehicle = record.vehicle;
+  const truckType = [vehicle?.manufacturer, vehicle?.model].filter(Boolean).join(" ").trim();
+  const assignedDriver = vehicle?.assignedDriverId ? driversById?.get(vehicle.assignedDriverId) : undefined;
+  const assignedDriverName = assignedDriver
+    ? `${assignedDriver.firstName ?? ""} ${assignedDriver.lastName ?? ""}`.trim()
+    : "";
+  return {
+    truckPlateNumber: vehicle?.powerPlateNo || vehicle?.plateNumber || null,
+    trailerPlateNumber: vehicle?.trailerPlateNo || null,
+    driverName: vehicle?.assignedDriverName || assignedDriverName || null,
+    driverLicense: assignedDriver?.licenseNumber || null,
+    driverPhone: assignedDriver?.phoneNumber || null,
+    truckType: vehicle?.vehicleType || truckType || null,
+    containerNumber: row?.containerNumber ?? null,
+  };
+};
+
 const InfoRow = ({ label, value }: { label: string; value: string }) => (
   <Stack gap={2}>
     <Text size="xs" c="dimmed" tt="uppercase" fw={600}>{label}</Text>
@@ -329,6 +384,8 @@ const LastMilePage = () => {
 
   const [allocationOpen, setAllocationOpen] = useState(false);
   const [allocationContainers, setAllocationContainers] = useState<LastMileContainerRow[]>([]);
+  const [releaseItem, setReleaseItem] = useState<WarehouseInventoryItem | null>(null);
+  const [releaseTruckPrefill, setReleaseTruckPrefill] = useState<ReleaseOrderTruckPrefill | null>(null);
 
   const { data: listData, isLoading } = useQuery({
     queryKey: QUERY_KEYS.LAST_MILE.list(),
@@ -360,6 +417,27 @@ const LastMilePage = () => {
     [records],
   );
 
+  const needsDriverLookup = records.some((record) => record.vehicle?.assignedDriverId);
+
+  const { data: driversData } = useQuery({
+    queryKey: ["drivers", "list", "ACTIVE"],
+    queryFn: async () => {
+      const res = await driversService.getAll({ status: "ACTIVE" });
+      return res.data;
+    },
+    enabled: needsDriverLookup,
+  });
+
+  const driversById = useMemo(
+    () => new Map((driversData ?? []).map((driver) => [driver.id, driver])),
+    [driversData],
+  );
+
+  const { data: pickupReadyRows = [] } = useQuery({
+    queryKey: ["warehouse-inventory", "import-pickup-ready-queue"],
+    queryFn: () => warehouseService.importPickupReadyQueue().then((r) => r.data),
+  });
+
   const vehicleOptions = useMemo(
     () =>
       (Array.isArray(vehiclesData) ? vehiclesData : []).map((v) => {
@@ -556,6 +634,15 @@ const LastMilePage = () => {
     [records, activeId],
   );
 
+  const pickupReadyByBooking = useMemo(() => {
+    const map = new Map<string, ImportUnloadedItem>();
+    for (const row of pickupReadyRows) {
+      if (row.bookingId) map.set(row.bookingId, row);
+      if (row.bookingReference) map.set(row.bookingReference, row);
+    }
+    return map;
+  }, [pickupReadyRows]);
+
   const selectedIds = useMemo(
     () => Object.keys(rowSelection).filter((id) => rowSelection[id]),
     [rowSelection],
@@ -592,6 +679,7 @@ const LastMilePage = () => {
     const term = search.trim().toLowerCase();
     return records.filter((r) => {
       if (!matchesFilter(r)) return false;
+      if (filterPostPaymentPending && !(r.remainingPayment > 0)) return false;
       if (!term) return true;
       return [bookingRef(r), customerName(r), deliveryLocation(r), cargoDesc(r)]
         .join(" ")
@@ -672,6 +760,37 @@ const LastMilePage = () => {
     setTripSlipOpen(true);
   };
 
+  const openTruckArrival = (record: LastMileRecord) => {
+    if (!isAssigned(record)) {
+      toast({
+        title: "Assign a truck first",
+        description: "Truck arrival opens after a last-mile vehicle is assigned.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const row = pickupReadyByBooking.get(record.bookingId) ?? pickupReadyByBooking.get(bookingRef(record));
+    if (!row) {
+      toast({
+        title: "Import inventory is not pickup-ready",
+        description: `${bookingRef(record)} must be unloaded and pass inspection before truck arrival.`,
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setReleaseTruckPrefill(releasePrefillFromLastMile(record, row, driversById));
+    setReleaseItem(toReleaseInventoryItem(row));
+  };
+
+  const closeTruckArrival = () => {
+    setReleaseItem(null);
+    setReleaseTruckPrefill(null);
+    void qc.invalidateQueries({ queryKey: ["warehouse-inventory"] });
+    void qc.invalidateQueries({ queryKey: QUERY_KEYS.LAST_MILE.ROOT });
+  };
+
   const printTripSlip = () => {
     if (!tripSlipRecord) return;
     const win = window.open("", "_blank", "width=820,height=920");
@@ -834,6 +953,9 @@ const LastMilePage = () => {
           const canPrint = row.original.status !== "PAYMENT_PENDING";
           const isPaid = (row.original as any).paid;
           const delivered = row.original.status === "DELIVERED";
+          const releaseRow =
+            pickupReadyByBooking.get(row.original.bookingId) ?? pickupReadyByBooking.get(bookingRef(row.original));
+          const truckArrivalLabel = releaseRow?.releaseOrderReference ? "Truck Leaving" : "Truck Arrival";
           return (
             <Group gap={4} justify="flex-end" wrap="nowrap">
               <Menu position="bottom-end" width={200} withinPortal>
@@ -865,6 +987,13 @@ const LastMilePage = () => {
                   >
                     Reassign
                   </Menu.Item>
+                  <Menu.Item
+                    leftSection={<Truck size={15} />}
+                    disabled={!assigned}
+                    onClick={() => openTruckArrival(row.original)}
+                  >
+                    {truckArrivalLabel}
+                  </Menu.Item>
                   <Menu.Divider />
                   <Menu.Item
                     leftSection={<Eye size={15} />}
@@ -912,7 +1041,7 @@ const LastMilePage = () => {
       },
     ];
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vehicleOptions]);
+  }, [vehicleOptions, pickupReadyByBooking]);
 
   return (
     <Stack gap="md">
@@ -1413,6 +1542,13 @@ const LastMilePage = () => {
           </Group>
         </Stack>
       </Modal>
+
+      <ReleaseOrderModal
+        opened={Boolean(releaseItem)}
+        onClose={closeTruckArrival}
+        item={releaseItem}
+        truckPrefill={releaseTruckPrefill}
+      />
     </Stack>
   );
 };

apps/edr-freight-web/backoffice/src/pages/ruleEngine/CargoTypesPage.tsx

@@ -51,7 +51,6 @@ interface CargoNode extends RuleEngineRecord {
   cargoTypeName?: string;
   code?: string;
   parentGroupId?: string | null;
-  showFreeTextBox?: boolean;
   requiresDirectorApproval?: boolean;
   /** How this cargo is measured (PER_TON / PER_ITEM); null for groups/unset. */
   unitOfMeasure?: string | null;
@@ -80,7 +79,6 @@ const FORM_FIELDS: FormFieldDef[] = [
       { label: "Per item (break-bulk)", value: "PER_ITEM" },
     ],
   },
-  { name: "showFreeTextBox", label: "Show free text box", type: "boolean" },
   { name: "requiresDirectorApproval", label: "Requires director approval", type: "boolean" },
   { name: "isActive", label: "Active", type: "boolean" },
 ];
@@ -474,19 +472,6 @@ function CargoRow({
                   </Badge>
                 </Tooltip>
               ) : null}
-              {node.showFreeTextBox ? (
-                <Tooltip label="Shows a free-text box on booking" withArrow>
-                  <Badge
-                    size="xs"
-                    variant="light"
-                    color="blue"
-                    radius="sm"
-                    leftSection={<FileText size={11} />}
-                  >
-                    Free text
-                  </Badge>
-                </Tooltip>
-              ) : null}
               {node.unitOfMeasure ? (
                 <Tooltip label="How bookings measure this cargo" withArrow>
                   <Badge size="xs" variant="light" color="teal" radius="sm">

apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts

@@ -11,6 +11,7 @@ export type ColumnFormat =
   | "rateStatus"
   | "date"
   | "number"
+  | "currency"
   | "entityLabel"
   | "rateLabel";
 
@@ -36,6 +37,8 @@ export interface FormFieldDef {
   placeholder?: string;
   description?: string;
   disabled?: boolean;
+  /** Trailing unit label shown inside the input (e.g. "USD" on a rate value). */
+  suffix?: string;
   /** Hide this field when another field currently equals one of these values. */
   hideWhen?: { field: string; equals: string[] };
   /**
@@ -174,7 +177,6 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
         optional: true,
         placeholder: "Select parent cargo type (optional)",
       },
-      { name: "showFreeTextBox", label: "Show free text box", type: "boolean" },
       { name: "requiresDirectorApproval", label: "Requires director approval", type: "boolean" },
       { name: "isActive", label: "Active", type: "boolean" },
     ],
@@ -402,7 +404,7 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
     columns: [
       { id: "appliesTo", header: "Applies to", accessorKey: "appliesTo", format: "code" },
       { id: "trigger", header: "Trigger", accessorKey: "trigger" },
-      { id: "rateValue", header: "Value", accessorKey: "rateValue", format: "number" },
+      { id: "rateValue", header: "Value", accessorKey: "rateValue", format: "currency" },
       { id: "rateUnit", header: "Unit", accessorKey: "rateUnit" },
       { id: "status", header: "Status", accessorKey: "status", format: "rateStatus" },
       { id: "effectiveFrom", header: "From", accessorKey: "effectiveFrom", format: "date" },
@@ -454,7 +456,7 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
         placeholder: "Select bulk commodity (optional)",
         showWhen: { field: "appliesTo", equals: ["BULK", "INTERCITY"] },
       },
-      { name: "rateValue", label: "Rate value", type: "number", required: true },
+      { name: "rateValue", label: "Rate value", type: "number", required: true, suffix: "USD" },
       { name: "rateUnit", label: "Rate unit", type: "select", required: true, options: RATE_UNITS },
       { name: "effectiveFrom", label: "Effective from", type: "date", required: true },
       { name: "effectiveTo", label: "Effective to", type: "date" },

apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2DetailPage.tsx

@@ -9,6 +9,8 @@ import {
   RingProgress,
   Stack,
   Text,
+  Textarea,
+  TextInput,
   ThemeIcon,
   Title,
 } from "@mantine/core";
@@ -88,6 +90,10 @@ export default function TrainScheduleV2DetailPage() {
   const [previewResult, setPreviewResult] = useState<TrainSchedulePreviewResponse | null>(null);
   const [containerPlacements, setContainerPlacements] = useState<ContainerPlacement[]>([]);
   const [maintenanceOpen, setMaintenanceOpen] = useState(false);
+  const [gatepassSecuredAt, setGatepassSecuredAt] = useState("");
+  const [gatepassReference, setGatepassReference] = useState("");
+  const [gatepassFileUrl, setGatepassFileUrl] = useState("");
+  const [gatepassNotes, setGatepassNotes] = useState("");
   const autoPreviewedRef = useRef(false);
 
   const detailQuery = useQuery(
@@ -98,6 +104,42 @@ export default function TrainScheduleV2DetailPage() {
   );
   const schedule = detailQuery.data;
   const freightType: FreightType | undefined = schedule?.freightType as FreightType | undefined;
+  const isDjiboutiPort = (value?: string | null) =>
+    ["DJIBOUTI", "DORALEH", "DMP", "DCT", "NAGAD"].some((token) =>
+      (value ?? "").toUpperCase().includes(token),
+    );
+  const gatepassApplies = Boolean(
+    schedule &&
+      ((schedule.direction === "IMPORT" &&
+        isDjiboutiPort(`${schedule.originStation?.code ?? ""} ${schedule.originStation?.label ?? ""}`)) ||
+        (schedule.direction === "EXPORT" &&
+          isDjiboutiPort(`${schedule.destinationStation?.code ?? ""} ${schedule.destinationStation?.label ?? ""}`))),
+  );
+  const gatepassQuery = useQuery({
+    queryKey: ["train-scheduling", "gatepass", scheduleId],
+    queryFn: () => trainSchedulingService.getImportDjiboutiOperation(scheduleId as string),
+    enabled: Boolean(scheduleId && gatepassApplies),
+  });
+  const secureGatepass = useMutation({
+    mutationFn: () =>
+      trainSchedulingService.grantImportDjiboutiGatepass(scheduleId as string, {
+        securedAt: gatepassSecuredAt ? new Date(gatepassSecuredAt).toISOString() : undefined,
+        reference: gatepassReference.trim() || undefined,
+        fileUrl: gatepassFileUrl.trim() || undefined,
+        notes: gatepassNotes.trim() || undefined,
+      }),
+    onSuccess: () => {
+      toast({ title: "Gate pass secured" });
+      void gatepassQuery.refetch();
+    },
+    onError: (error) => {
+      toast({
+        title: "Gate pass failed",
+        description: parseError(error, "Could not secure gate pass"),
+        variant: "destructive",
+      });
+    },
+  });
 
   const eligibleFilters = useMemo(
     () =>
@@ -133,6 +175,16 @@ export default function TrainScheduleV2DetailPage() {
         : trainSchedulingService.downloadImportDjiboutiLoadListDocument(id),
   });
 
+  useEffect(() => {
+    const operation = gatepassQuery.data;
+    if (!operation) return;
+    const secured = operation.gatepassSecuredAt ?? operation.gatepassGrantedAt;
+    setGatepassSecuredAt(secured ? new Date(secured).toISOString().slice(0, 16) : "");
+    setGatepassReference(operation.documents?.GATE_PASS?.reference ?? "");
+    setGatepassFileUrl(operation.documents?.GATE_PASS?.fileUrl ?? "");
+    setGatepassNotes(operation.documents?.GATE_PASS?.notes ?? operation.notes ?? "");
+  }, [gatepassQuery.data]);
+
   const assignedIds = useMemo(
     () => (schedule?.bookings ?? []).map((b) => b.id),
     [schedule?.bookings],
@@ -899,6 +951,83 @@ export default function TrainScheduleV2DetailPage() {
         ]}
       />
 
+      {gatepassApplies ? (
+        <Paper radius="xl" p="lg" withBorder>
+          <Stack gap="md">
+            <Group justify="space-between" align="flex-start" wrap="wrap">
+              <Group gap="md" align="flex-start" wrap="nowrap">
+                <ThemeIcon
+                  size={44}
+                  radius="md"
+                  variant="light"
+                  color={gatepassQuery.data?.gatepassStatus === "SECURED" ? "edr-green" : "orange"}
+                >
+                  <FileText size={22} />
+                </ThemeIcon>
+                <Stack gap={4}>
+                  <Group gap="sm">
+                    <Title order={4} fw={700}>
+                      Djibouti Port gate pass
+                    </Title>
+                    <Badge
+                      color={gatepassQuery.data?.gatepassStatus === "SECURED" ? "green" : "orange"}
+                      variant="light"
+                    >
+                      {gatepassQuery.data?.gatepassStatus ?? "NOT_SECURED"}
+                    </Badge>
+                  </Group>
+                  <Text size="sm" c="dimmed">
+                    {schedule.direction === "IMPORT"
+                      ? "Secure before dispatch from Djibouti."
+                      : "Secure after dispatch before Djibouti Port entry / unloading."}
+                  </Text>
+                </Stack>
+              </Group>
+              {gatepassQuery.isLoading ? <Loader size="sm" /> : null}
+            </Group>
+
+            <Group align="flex-end" grow>
+              <TextInput
+                label="Secured date"
+                type="datetime-local"
+                value={gatepassSecuredAt}
+                onChange={(event) => setGatepassSecuredAt(event.currentTarget.value)}
+              />
+              <TextInput
+                label="Document reference"
+                placeholder="Optional"
+                value={gatepassReference}
+                onChange={(event) => setGatepassReference(event.currentTarget.value)}
+              />
+              <TextInput
+                label="Document URL"
+                placeholder="Optional upload/link"
+                value={gatepassFileUrl}
+                onChange={(event) => setGatepassFileUrl(event.currentTarget.value)}
+              />
+            </Group>
+            <Textarea
+              label="Notes"
+              placeholder="Optional"
+              autosize
+              minRows={2}
+              value={gatepassNotes}
+              onChange={(event) => setGatepassNotes(event.currentTarget.value)}
+            />
+            <Group justify="flex-end">
+              <Button
+                color="edr-green"
+                leftSection={<CheckCircle2 size={16} />}
+                loading={secureGatepass.isPending}
+                onClick={() => secureGatepass.mutate()}
+              >
+                Save as Secured
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      ) : null}
+
       <Paper radius="xl" p="lg">
         <Stack gap="lg">
           {/* Workflow header with ring progress */}

apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2ListPage.tsx

@@ -42,6 +42,7 @@ import {
 } from "@/components/trainScheduling/scheduleVisuals";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { api } from "@/services/api";
+import { formatRouteLabel } from "@/services/routes.service";
 import { useToast } from "@/hooks/use-toast";
 import type { TrainScheduleListItem } from "@/types/trainScheduling";
 import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
@@ -88,7 +89,9 @@ export default function TrainScheduleV2ListPage() {
   const schedulesQuery = useQuery(
     api.trainScheduling.scheduleList.queryOptions({ input: {} }),
   );
-  const routesQuery = useQuery(api.routes.list.queryOptions());
+  const routesQuery = useQuery(
+    api.routes.list.queryOptions({ input: { status: "AVAILABLE" } }),
+  );
   const locomotivesQuery = useQuery(
     api.trainScheduling.availableLocomotives.queryOptions({
       input: { routeId: routeId || undefined },
@@ -97,10 +100,7 @@ export default function TrainScheduleV2ListPage() {
   const create = useMutation(api.trainScheduling.createSchedule.mutationOptions());
   const cancel = useMutation(api.trainScheduling.cancelSchedule.mutationOptions());
 
-  const activeRoutes = useMemo(
-    () => (routesQuery.data ?? []).filter((r) => r.isActive),
-    [routesQuery.data],
-  );
+  const activeRoutes = useMemo(() => routesQuery.data ?? [], [routesQuery.data]);
 
   const selectedRoute = activeRoutes.find((r) => r.id === routeId);
 
@@ -529,7 +529,7 @@ export default function TrainScheduleV2ListPage() {
           <Select
             label="Route"
             placeholder="Select route"
-            data={activeRoutes.map((r) => ({ value: r.id, label: r.name }))}
+            data={activeRoutes.map((r) => ({ value: r.id, label: formatRouteLabel(r) }))}
             value={routeId || null}
             onChange={(v) => setRouteId(v ?? "")}
             searchable

apps/edr-freight-web/backoffice/src/pages/warehouses/ArrivalQueuePage.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import {
   Badge,
   Button,
@@ -6,6 +6,7 @@ import {
   Container,
   Group,
   Loader,
+  Select,
   Stack,
   Table,
   Text,
@@ -21,11 +22,17 @@ import {
 } from '@/components/warehouses';
 import {
   useAutoUnloadArrivedBookings,
+  useAllWarehouseYards,
+  useAllWarehouseZones,
   useImportArriveQueue,
   useImportTrainItems,
+  useWarehouses,
 } from '@/hooks/useWarehouses';
 import { useToast } from '@/hooks/use-toast';
-import type { AutoUnloadArrivedResult, ImportTrain, ImportTrainItem } from '@/types/warehouse';
+import type { AutoUnloadArrivedResult, ImportTrain, ImportTrainItem, Warehouse, WarehouseYard, WarehouseZone } from '@/types/warehouse';
+
+type UnloadAssignment = { bookingId: string; warehouseId: string; yardId: string; zoneId: string };
+type AssignmentDraft = Partial<Omit<UnloadAssignment, 'bookingId'>>;
 
 const getErrorMessage = (error: unknown) => {
   if (error && typeof error === 'object' && 'response' in error) {
@@ -43,8 +50,54 @@ const getPendingUnloadBookings = (train: ImportTrain) =>
 const isFullyUnloaded = (train: ImportTrain) =>
   Boolean(train.fullyUnloaded) || (train.totalBookings > 0 && getPendingUnloadBookings(train) === 0);
 
-function ImportTrainDetailRows({ scheduleId }: { scheduleId: string }) {
+const locationTypesForFreight = (freightType: string | null | undefined) => {
+  const normalized = (freightType ?? '').toUpperCase();
+  if (normalized === 'CONTAINER') {
+    return { yardTypes: ['CONTAINER_YARD', 'GENERAL_CARGO_YARD'], zoneTypes: ['CONTAINER_ZONE', 'GENERAL_CARGO_ZONE'] };
+  }
+  return { yardTypes: ['BULK_YARD', 'GENERAL_CARGO_YARD'], zoneTypes: ['BULK_ZONE', 'GENERAL_CARGO_ZONE'] };
+};
+
+const isContainerFreight = (freightType: string | null | undefined) =>
+  (freightType ?? '').toUpperCase() === 'CONTAINER';
+
+function isUnloadPending(item: ImportTrainItem) {
+  return !item.currentStatus || item.currentStatus === 'RECEIVED';
+}
+
+function ImportTrainDetailRows({
+  scheduleId,
+  warehouses,
+  yards,
+  zones,
+  assignments,
+  onAssignmentChange,
+  onReadyChange,
+}: {
+  scheduleId: string;
+  warehouses: Warehouse[];
+  yards: WarehouseYard[];
+  zones: WarehouseZone[];
+  assignments: Record<string, AssignmentDraft>;
+  onAssignmentChange: (bookingId: string, draft: AssignmentDraft) => void;
+  onReadyChange: (ready: boolean) => void;
+}) {
   const { data: items = [], isLoading } = useImportTrainItems(scheduleId);
+  const warehouseOptions = useMemo(
+    () => warehouses.map((warehouse) => ({ value: warehouse.id, label: `${warehouse.name} (${warehouse.code})` })),
+    [warehouses],
+  );
+
+  useEffect(() => {
+    const pending = items.filter(isUnloadPending);
+    onReadyChange(
+      pending.length > 0 &&
+        pending.every((item) => {
+          const draft = assignments[item.bookingId];
+          return Boolean(draft?.warehouseId && draft.yardId && draft.zoneId);
+        }),
+    );
+  }, [assignments, items]);
 
   if (isLoading) {
     return (
@@ -73,12 +126,26 @@ function ImportTrainDetailRows({ scheduleId }: { scheduleId: string }) {
           <Table.Th>Weight</Table.Th>
           <Table.Th>Arrival</Table.Th>
           <Table.Th>Status</Table.Th>
+          <Table.Th>Warehouse</Table.Th>
+          <Table.Th>Yard</Table.Th>
+          <Table.Th>Zone</Table.Th>
           <Table.Th>Inspection</Table.Th>
           <Table.Th>Pickup</Table.Th>
         </Table.Tr>
       </Table.Thead>
       <Table.Tbody>
-        {items.map((item: ImportTrainItem) => (
+        {items.map((item: ImportTrainItem) => {
+          const draft = assignments[item.bookingId] ?? {};
+          const { yardTypes, zoneTypes } = locationTypesForFreight(item.freightType);
+          const yardOptions = yards
+            .filter((yard) => yard.warehouseId === draft.warehouseId && yardTypes.includes(yard.type))
+            .map((yard) => ({ value: yard.id, label: `${yard.name} (${yard.code})` }));
+          const zoneOptions = zones
+            .filter((zone) => zone.yardId === draft.yardId && zoneTypes.includes(zone.type))
+            .map((zone) => ({ value: zone.id, label: `${zone.name} (${zone.code})` }));
+          const pending = isUnloadPending(item);
+
+          return (
           <Table.Tr key={item.bookingId}>
             <Table.Td>
               <Text size="sm" fw={600}>
@@ -95,6 +162,41 @@ function ImportTrainDetailRows({ scheduleId }: { scheduleId: string }) {
                 {item.currentStatus ?? 'PENDING'}
               </Badge>
             </Table.Td>
+            <Table.Td>
+              <Select
+                placeholder="Warehouse"
+                data={warehouseOptions}
+                value={draft.warehouseId ?? null}
+                onChange={(value) => onAssignmentChange(item.bookingId, { warehouseId: value ?? undefined })}
+                searchable
+                disabled={!pending}
+                w={210}
+              />
+            </Table.Td>
+            <Table.Td>
+              <Select
+                placeholder={isContainerFreight(item.freightType) ? 'Container yard' : 'Bulk yard'}
+                data={yardOptions}
+                value={draft.yardId ?? null}
+                onChange={(value) =>
+                  onAssignmentChange(item.bookingId, { ...draft, yardId: value ?? undefined, zoneId: undefined })
+                }
+                searchable
+                disabled={!pending || !draft.warehouseId}
+                w={190}
+              />
+            </Table.Td>
+            <Table.Td>
+              <Select
+                placeholder={isContainerFreight(item.freightType) ? 'Container zone' : 'Bulk zone'}
+                data={zoneOptions}
+                value={draft.zoneId ?? null}
+                onChange={(value) => onAssignmentChange(item.bookingId, { ...draft, zoneId: value ?? undefined })}
+                searchable
+                disabled={!pending || !draft.yardId}
+                w={190}
+              />
+            </Table.Td>
             <Table.Td>
               <Badge variant="light" color={item.inspectionStatus === 'PASSED' ? 'green' : 'gray'} size="sm">
                 {item.inspectionStatus ?? 'Not inspected'}
@@ -102,7 +204,8 @@ function ImportTrainDetailRows({ scheduleId }: { scheduleId: string }) {
             </Table.Td>
             <Table.Td>{item.pickupOption.replace(/_/g, ' ')}</Table.Td>
           </Table.Tr>
-        ))}
+          );
+        })}
       </Table.Tbody>
     </Table>
   );
@@ -112,11 +215,36 @@ function ImportTrainDetailRows({ scheduleId }: { scheduleId: string }) {
 export default function ArrivalQueuePage() {
   const { toast } = useToast();
   const { data: trains = [], isLoading } = useImportArriveQueue();
+  const { data: warehouses = [], isLoading: warehousesLoading } = useWarehouses({ status: 'ACTIVE' });
+  const { data: yards = [] } = useAllWarehouseYards();
+  const { data: zones = [] } = useAllWarehouseZones();
   const autoUnload = useAutoUnloadArrivedBookings();
   const [openScheduleId, setOpenScheduleId] = useState<string | null>(null);
   const [busyScheduleId, setBusyScheduleId] = useState<string | null>(null);
+  const [assignmentsBySchedule, setAssignmentsBySchedule] = useState<Record<string, Record<string, AssignmentDraft>>>({});
+  const [readyBySchedule, setReadyBySchedule] = useState<Record<string, boolean>>({});
 
   const unloadTrain = async (train: ImportTrain) => {
+    const assignments = Object.entries(assignmentsBySchedule[train.scheduleId] ?? {})
+      .filter((entry): entry is [string, Required<AssignmentDraft>] =>
+        Boolean(entry[1].warehouseId && entry[1].yardId && entry[1].zoneId),
+      )
+      .map(([bookingId, draft]) => ({
+        bookingId,
+        warehouseId: draft.warehouseId,
+        yardId: draft.yardId,
+        zoneId: draft.zoneId,
+      }));
+
+    if (!readyBySchedule[train.scheduleId] || assignments.length === 0) {
+      toast({
+        variant: 'destructive',
+        title: 'Assign locations',
+        description: 'Select warehouse, yard and zone for each pending booking before unloading.',
+      });
+      return;
+    }
+
     if (isFullyUnloaded(train)) {
       toast({
         title: 'Already unloaded',
@@ -127,7 +255,9 @@ export default function ArrivalQueuePage() {
 
     setBusyScheduleId(train.scheduleId);
     try {
-      const res = (await autoUnload.mutateAsync(train.scheduleId)) as { data: AutoUnloadArrivedResult };
+      const res = (await autoUnload.mutateAsync({ scheduleId: train.scheduleId, assignments })) 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;
@@ -169,10 +299,12 @@ export default function ArrivalQueuePage() {
 
         <Card withBorder radius="md" padding="lg">
           <Group justify="space-between" mb="md">
-            <Text fw={600}>{trains.length} arrived import train(s)</Text>
-            <Text size="sm" c="dimmed">
-              Open a train to review assigned bookings, then auto unload it.
-            </Text>
+            <Stack gap={2}>
+              <Text fw={600}>{trains.length} arrived import train(s)</Text>
+              <Text size="sm" c="dimmed">
+                Open a train, assign each booking to a warehouse yard and zone, then unload it.
+              </Text>
+            </Stack>
           </Group>
 
           {isLoading ? (
@@ -254,7 +386,7 @@ export default function ArrivalQueuePage() {
                                 color={fullyUnloaded ? 'gray' : 'orange'}
                                 leftSection={busyScheduleId === train.scheduleId ? <PackageOpen size={14} /> : <Truck size={14} />}
                                 loading={busyScheduleId === train.scheduleId}
-                                disabled={fullyUnloaded || train.totalBookings === 0}
+                                disabled={fullyUnloaded || train.totalBookings === 0 || !readyBySchedule[train.scheduleId] || warehousesLoading}
                                 onClick={() => unloadTrain(train)}
                               >
                                 {fullyUnloaded ? 'Already Unloaded' : 'Auto Unload'}
@@ -265,7 +397,27 @@ export default function ArrivalQueuePage() {
                         {isOpen && (
                           <Table.Tr>
                             <Table.Td colSpan={10} bg="var(--mantine-color-gray-0)">
-                              <ImportTrainDetailRows scheduleId={train.scheduleId} />
+                              <ImportTrainDetailRows
+                                scheduleId={train.scheduleId}
+                                warehouses={warehouses}
+                                yards={yards}
+                                zones={zones}
+                                assignments={assignmentsBySchedule[train.scheduleId] ?? {}}
+                                onAssignmentChange={(bookingId, draft) =>
+                                  setAssignmentsBySchedule((current) => ({
+                                    ...current,
+                                    [train.scheduleId]: {
+                                      ...(current[train.scheduleId] ?? {}),
+                                      [bookingId]: draft.warehouseId
+                                        ? draft
+                                        : {},
+                                    },
+                                  }))
+                                }
+                                onReadyChange={(ready) =>
+                                  setReadyBySchedule((current) => ({ ...current, [train.scheduleId]: ready }))
+                                }
+                              />
                             </Table.Td>
                           </Table.Tr>
                         )}

apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInvoicesPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   ActionIcon,
   Badge,
@@ -29,6 +29,7 @@ import { useToast } from '@/hooks/use-toast';
 import {
   WAREHOUSE_INVOICE_STATUSES,
   type WarehouseFeeInvoice,
+  type WarehouseGatewayPaymentMethod,
   type WarehouseInvoiceStatus,
 } from '@/types/warehouse';
 import { openPdfBlob } from '@/components/warehouses/pdf';
@@ -164,15 +165,23 @@ function InvoiceDetailModal({ id, onClose }: { id: string | null; onClose: () =>
     }),
   );
   const pay = useMutation(api.warehouses.payInvoice.mutationOptions());
+  const payOnline = useMutation(api.warehouses.payInvoiceOnline.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 [gatewayMethod, setGatewayMethod] = useState<WarehouseGatewayPaymentMethod>('TELEBIRR');
+  const [payerAccount, setPayerAccount] = useState('');
 
   const canPay = inv && (inv.status === 'ISSUED' || inv.status === 'PARTIALLY_PAID');
   const canGateClear = inv?.status === 'PAID' && Boolean(inv.inventoryId);
 
+  useEffect(() => {
+    setGatewayMethod(inv?.currency === 'USD' ? 'WAAFI' : 'TELEBIRR');
+    setPayerAccount('');
+  }, [inv?.id, inv?.currency]);
+
   const downloadInvoicePdf = async (invoice: WarehouseFeeInvoice) => {
     const pdfWindow = window.open('', '_blank');
     try {
@@ -302,6 +311,34 @@ function InvoiceDetailModal({ id, onClose }: { id: string | null; onClose: () =>
     }
   };
 
+  const handleOnlinePay = async () => {
+    if (!inv) return;
+    try {
+      const currentUrl = window.location.href;
+      const result = await payOnline.mutateAsync({
+        id: inv.id,
+        payload: {
+          method: gatewayMethod,
+          platform: 'web',
+          payerAccount: payerAccount.trim() || undefined,
+          returnUrl: currentUrl,
+          failureUrl: currentUrl,
+        },
+      });
+      const url = result.clientAction?.url;
+      if (url) {
+        window.location.href = url;
+        return;
+      }
+      toast({
+        title: 'Payment initiated',
+        description: 'No redirect URL was returned by the payment provider.',
+      });
+    } catch (e) {
+      toast({ variant: 'destructive', title: 'Payment failed', description: extractErrorMessage(e) });
+    }
+  };
+
   const handleCancel = async () => {
     if (!inv) return;
     try {
@@ -359,7 +396,31 @@ function InvoiceDetailModal({ id, onClose }: { id: string | null; onClose: () =>
 
           {canPay && (
             <>
-              <Divider label="Record payment" labelPosition="left" />
+              <Divider label="Online payment" labelPosition="left" />
+              <Group align="flex-end">
+                <Select
+                  label="Provider"
+                  value={gatewayMethod}
+                  onChange={(v) => setGatewayMethod((v as WarehouseGatewayPaymentMethod) ?? 'TELEBIRR')}
+                  data={[
+                    { value: 'TELEBIRR', label: 'Telebirr' },
+                    { value: 'WAAFI', label: 'Waafi' },
+                  ]}
+                  style={{ flex: 1 }}
+                />
+                <TextInput
+                  label="Wallet phone / account"
+                  value={payerAccount}
+                  onChange={(e) => setPayerAccount(e.currentTarget.value)}
+                  placeholder="Optional"
+                  style={{ flex: 1 }}
+                />
+                <Button leftSection={<CreditCard size={16} />} loading={payOnline.isPending} onClick={handleOnlinePay}>
+                  Pay with {gatewayMethod === 'WAAFI' ? 'Waafi' : 'Telebirr'}
+                </Button>
+              </Group>
+
+              <Divider label="Record manual payment" labelPosition="left" />
               <Group align="flex-end">
                 <NumberInput
                   label="Amount"

apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx

@@ -18,6 +18,8 @@ import {
 } from '@mantine/core';
 import { Info, Plus, Trash2 } from 'lucide-react';
 
+import { useQuery } from '@tanstack/react-query';
+
 import { PageContainer, PageHeader } from '@/components/page';
 import { useToast } from '@/hooks/use-toast';
 import {
@@ -29,7 +31,9 @@ import {
   useDeleteFeeRule,
   useFeeRules,
 } from '@/hooks/useWarehouses';
+import { api } from '@/services/api';
 import { FEE_RULE_TYPES, type FeeRuleType } from '@/types/warehouse';
+import { extractErrorMessage } from '@/components/warehouses/options';
 
 const FREIGHT = [
   { value: 'CONTAINER', label: 'Container' },
@@ -38,6 +42,7 @@ const FREIGHT = [
 const TRADE = [
   { value: 'IMPORT', label: 'Import' },
   { value: 'EXPORT', label: 'Export' },
+  { value: 'BOTH', label: 'Import & Export' },
   { value: 'DOMESTIC', label: 'Domestic' },
 ];
 const CURRENCIES = [
@@ -53,6 +58,23 @@ const numberValue = (value: string | number, fallback = 0) => {
 };
 const anyLabel = (value: string, label: string) => value.trim() || `Any ${label}`;
 const dash = '-';
+type CodeOptionSource = {
+  id?: string;
+  code?: string;
+  cargoTypeName?: string;
+  label?: string;
+  name?: string;
+};
+
+const codeOptions = (rows: unknown[]) =>
+  (rows as CodeOptionSource[])
+    .filter((row) => row.code)
+    .map((row) => ({
+      value: row.code as string,
+      label: `${row.cargoTypeName ?? row.label ?? row.name ?? row.code} (${row.code})`,
+    }));
+
+const isUnknownTiersError = (error: unknown) => extractErrorMessage(error).includes('property tiers should not exist');
 
 export default function WarehouseRulesPage() {
   return (
@@ -319,6 +341,12 @@ function AllocationRules() {
 function FeeRules() {
   const { toast } = useToast();
   const { data, isLoading } = useFeeRules();
+  const { data: cargoTypes = [], isLoading: cargoTypesLoading } = useQuery(
+    api.cargoTypes.list.queryOptions({ staleTime: Infinity }),
+  );
+  const { data: containerTypes = [], isLoading: containerTypesLoading } = useQuery(
+    api.containerTypes.list.queryOptions({ staleTime: Infinity }),
+  );
   const create = useCreateFeeRule();
   const remove = useDeleteFeeRule();
   const [open, setOpen] = useState(false);
@@ -328,11 +356,56 @@ function FeeRules() {
     freightType: '',
     tradeDirection: '',
     cargoTypeCode: '',
+    containerType: '',
     freeDays: 3,
     ratePerDay: 0,
+    tiers: [] as Array<{ fromDay: number; toDay: number | null; ratePerDay: number }>,
     currency: 'USD',
   });
   const rules = data ?? [];
+  const cargoTypeOptions = codeOptions(cargoTypes);
+  const containerTypeOptions = codeOptions(containerTypes);
+  const isBulkRule = form.freightType === 'BULK';
+  const isContainerRule = form.freightType === 'CONTAINER';
+
+  const resetForm = () =>
+    setForm({
+      name: '',
+      ruleType: 'DEMURRAGE_FEE',
+      freightType: '',
+      tradeDirection: '',
+      cargoTypeCode: '',
+      containerType: '',
+      freeDays: 3,
+      ratePerDay: 0,
+      tiers: [],
+      currency: 'USD',
+    });
+
+  const addTier = () =>
+    setForm((f) => {
+      const last = f.tiers[f.tiers.length - 1];
+      const fromDay = last?.toDay ? last.toDay + 1 : f.tiers.length ? last.fromDay + 1 : f.freeDays + 1;
+      return {
+        ...f,
+        tiers: [...f.tiers, { fromDay, toDay: fromDay, ratePerDay: f.ratePerDay || 0 }],
+      };
+    });
+
+  const updateTier = (
+    index: number,
+    patch: Partial<{ fromDay: number; toDay: number | null; ratePerDay: number }>,
+  ) =>
+    setForm((f) => ({
+      ...f,
+      tiers: f.tiers.map((tier, i) => (i === index ? { ...tier, ...patch } : tier)),
+    }));
+
+  const removeTier = (index: number) =>
+    setForm((f) => ({
+      ...f,
+      tiers: f.tiers.filter((_, i) => i !== index),
+    }));
 
   const submit = async () => {
     if (!form.name.trim()) {
@@ -340,18 +413,68 @@ function FeeRules() {
       return;
     }
 
-    await create.mutateAsync({
+    const tiers = form.tiers.map((tier) => ({
+      fromDay: tier.fromDay,
+      toDay: tier.toDay || null,
+      ratePerDay: tier.ratePerDay,
+    }));
+    for (const [index, tier] of tiers.entries()) {
+      if (!Number.isInteger(tier.fromDay) || tier.fromDay < 1) {
+        toast({ variant: 'destructive', title: `Tier ${index + 1}: from day must be at least 1` });
+        return;
+      }
+      if (tier.toDay != null && tier.toDay < tier.fromDay) {
+        toast({ variant: 'destructive', title: `Tier ${index + 1}: to day must be after from day` });
+        return;
+      }
+      if (tier.ratePerDay < 0) {
+        toast({ variant: 'destructive', title: `Tier ${index + 1}: amount must be zero or greater` });
+        return;
+      }
+    }
+
+    const payload = {
       name: form.name.trim(),
       ruleType: form.ruleType,
       freightType: clean(form.freightType) ?? null,
       tradeDirection: clean(form.tradeDirection) ?? null,
-      cargoTypeCode: clean(form.cargoTypeCode) ?? null,
+      cargoTypeCode: isBulkRule ? (clean(form.cargoTypeCode) ?? null) : null,
+      containerType: isContainerRule ? (clean(form.containerType) ?? null) : null,
       freeDays: form.freeDays,
       ratePerDay: form.ratePerDay,
       currency: form.currency || 'USD',
-    } as never);
-    toast({ title: 'Fee rule created' });
-    setOpen(false);
+      ...(tiers.length ? { tiers } : {}),
+    };
+
+    try {
+      await create.mutateAsync(payload as never);
+      toast({ title: 'Fee rule created' });
+      setOpen(false);
+      resetForm();
+    } catch (error) {
+      if (tiers.length && isUnknownTiersError(error)) {
+        const legacyPayload: Omit<typeof payload, 'tiers'> = {
+          name: payload.name,
+          ruleType: payload.ruleType,
+          freightType: payload.freightType,
+          tradeDirection: payload.tradeDirection,
+          cargoTypeCode: payload.cargoTypeCode,
+          containerType: payload.containerType,
+          freeDays: payload.freeDays,
+          ratePerDay: payload.ratePerDay,
+          currency: payload.currency,
+        };
+        await create.mutateAsync(legacyPayload as never);
+        toast({
+          title: 'Fee rule created without tiers',
+          description: 'The connected API does not support progressive tiers yet. Deploy the warehouse fee tier migration/API to save tier rows.',
+        });
+        setOpen(false);
+        resetForm();
+        return;
+      }
+      toast({ variant: 'destructive', title: 'Create failed', description: extractErrorMessage(error) });
+    }
   };
 
   return (
@@ -370,7 +493,7 @@ function FeeRules() {
           <Loader />
         </Group>
       ) : (
-        <Table.ScrollContainer minWidth={900}>
+        <Table.ScrollContainer minWidth={1100}>
           <Table striped highlightOnHover verticalSpacing="sm">
             <Table.Thead>
               <Table.Tr>
@@ -378,6 +501,9 @@ function FeeRules() {
                 <Table.Th>Name</Table.Th>
                 <Table.Th>Freight</Table.Th>
                 <Table.Th>Trade</Table.Th>
+                <Table.Th>Cargo</Table.Th>
+                <Table.Th>Container</Table.Th>
+                <Table.Th>Location scope</Table.Th>
                 <Table.Th>Free days</Table.Th>
                 <Table.Th>Rate / day</Table.Th>
                 <Table.Th>Active</Table.Th>
@@ -395,6 +521,20 @@ function FeeRules() {
                   <Table.Td>{rule.name}</Table.Td>
                   <Table.Td>{rule.freightType ?? dash}</Table.Td>
                   <Table.Td>{rule.tradeDirection ?? dash}</Table.Td>
+                  <Table.Td>{rule.cargoTypeCode ?? dash}</Table.Td>
+                  <Table.Td>{rule.containerType ?? dash}</Table.Td>
+                  <Table.Td>
+                    {[rule.facilityId, rule.warehouseId, rule.yardId, rule.zoneId].some(Boolean) ? (
+                      <Stack gap={2}>
+                        {rule.facilityId && <Text size="xs">Facility: {rule.facilityId}</Text>}
+                        {rule.warehouseId && <Text size="xs">Warehouse: {rule.warehouseId}</Text>}
+                        {rule.yardId && <Text size="xs">Yard: {rule.yardId}</Text>}
+                        {rule.zoneId && <Text size="xs">Zone: {rule.zoneId}</Text>}
+                      </Stack>
+                    ) : (
+                      dash
+                    )}
+                  </Table.Td>
                   <Table.Td>{rule.freeDays}</Table.Td>
                   <Table.Td>
                     {Number(rule.ratePerDay).toLocaleString()} {rule.currency}
@@ -454,7 +594,14 @@ function FeeRules() {
               label="Freight type"
               data={FREIGHT}
               value={form.freightType || null}
-              onChange={(value) => setForm((f) => ({ ...f, freightType: selectValue(value) }))}
+              onChange={(value) =>
+                setForm((f) => ({
+                  ...f,
+                  freightType: selectValue(value),
+                  cargoTypeCode: value === 'BULK' ? f.cargoTypeCode : '',
+                  containerType: value === 'CONTAINER' ? f.containerType : '',
+                }))
+              }
               clearable
             />
             <Select
@@ -464,15 +611,31 @@ function FeeRules() {
               onChange={(value) => setForm((f) => ({ ...f, tradeDirection: selectValue(value) }))}
               clearable
             />
-            <TextInput
-              label="Cargo type code"
-              value={form.cargoTypeCode}
-              onChange={(e) => {
-                const value = e.currentTarget.value;
-                setForm((f) => ({ ...f, cargoTypeCode: value }));
-              }}
-            />
+            {isBulkRule && (
+              <Select
+                label="Cargo type"
+                placeholder={cargoTypesLoading ? 'Loading cargo types...' : 'Any cargo'}
+                data={cargoTypeOptions}
+                value={form.cargoTypeCode || null}
+                onChange={(value) => setForm((f) => ({ ...f, cargoTypeCode: selectValue(value) }))}
+                searchable
+                clearable
+                disabled={cargoTypesLoading}
+              />
+            )}
           </Group>
+          {isContainerRule && (
+            <Select
+              label="Container type"
+              placeholder={containerTypesLoading ? 'Loading container types...' : 'Any container'}
+              data={containerTypeOptions}
+              value={form.containerType || null}
+              onChange={(value) => setForm((f) => ({ ...f, containerType: selectValue(value) }))}
+              searchable
+              clearable
+              disabled={containerTypesLoading}
+            />
+          )}
           <Group grow>
             <NumberInput
               label="Free days"
@@ -494,6 +657,51 @@ function FeeRules() {
               allowDeselect={false}
             />
           </Group>
+          <Stack gap="xs">
+            <Group justify="space-between">
+              <Text size="sm" fw={600}>
+                Progressive tariff tiers
+              </Text>
+              <Button variant="light" size="xs" leftSection={<Plus size={14} />} onClick={addTier}>
+                Add tier
+              </Button>
+            </Group>
+            {form.tiers.map((tier, index) => (
+              <Group key={index} grow align="end">
+                <NumberInput
+                  label="From day"
+                  min={1}
+                  value={tier.fromDay}
+                  onChange={(value) => updateTier(index, { fromDay: numberValue(value, 1) || 1 })}
+                />
+                <NumberInput
+                  label="To day"
+                  min={tier.fromDay}
+                  value={tier.toDay ?? ''}
+                  placeholder="Open"
+                  onChange={(value) =>
+                    updateTier(index, {
+                      toDay: value === '' ? null : numberValue(value, tier.fromDay),
+                    })
+                  }
+                />
+                <NumberInput
+                  label="Amount / day"
+                  min={0}
+                  value={tier.ratePerDay}
+                  onChange={(value) => updateTier(index, { ratePerDay: numberValue(value) })}
+                />
+                <ActionIcon variant="subtle" color="red" onClick={() => removeTier(index)} title="Remove tier">
+                  <Trash2 size={16} />
+                </ActionIcon>
+              </Group>
+            ))}
+            {form.tiers.length === 0 && (
+              <Text size="xs" c="dimmed">
+                No stepped tiers. The flat rate per day is used after the free days.
+              </Text>
+            )}
+          </Stack>
           <Group justify="flex-end" mt="sm">
             <Button variant="default" onClick={() => setOpen(false)}>
               Cancel

apps/edr-freight-web/backoffice/src/services/api.ts

@@ -84,6 +84,7 @@ import type {
   InventoryInquiryFilter,
   InventoryInquiryResult,
   InventoryMovement,
+  InitiateWarehouseInvoicePaymentPayload,
   LoadableWagon,
   LoadInventoryPayload,
   LoadPassedExportResult,
@@ -102,6 +103,7 @@ import type {
   WarehouseActivityLog,
   WarehouseDashboard,
   WarehouseFeeInvoice,
+  WarehouseInvoicePaymentResponse,
   WarehouseFilter,
   WarehouseInventoryItem,
   WarehouseInvoiceFilter,
@@ -943,12 +945,19 @@ export const api = {
       () => INVENTORY_INVALIDATIONS,
     ),
 
-    autoUnloadArrivedBookings: endpoint<string, AutoUnloadArrivedResult>(
+    autoUnloadArrivedBookings: endpoint<
+      {
+        scheduleId: string;
+        warehouseId?: string;
+        assignments?: { bookingId: string; warehouseId: string; yardId: string; zoneId: string }[];
+      },
+      AutoUnloadArrivedResult
+    >(
       "warehouse-inventory",
       "auto-unload-arrived-bookings",
-      (scheduleId) =>
+      ({ scheduleId, warehouseId, assignments }) =>
         warehouseService
-          .autoUnloadArrivedBookings(scheduleId)
+          .autoUnloadArrivedBookings({ scheduleId, warehouseId, assignments })
           .then((r) => r.data),
       undefined,
       () => INVENTORY_INVALIDATIONS,
@@ -1111,6 +1120,18 @@ export const api = {
       () => [["warehouse-fee-invoices"], ["warehouse-inventory"]],
     ),
 
+    payInvoiceOnline: endpoint<
+      { id: string; payload: InitiateWarehouseInvoicePaymentPayload },
+      WarehouseInvoicePaymentResponse
+    >(
+      "warehouse-fee-invoices",
+      "pay-online",
+      ({ id, payload }) =>
+        warehouseService.payInvoiceOnline(id, payload).then((r) => r.data),
+      undefined,
+      () => [["warehouse-fee-invoices"], ["warehouse-inventory"]],
+    ),
+
     gateClearance: endpoint<string, WarehouseInventoryItem>(
       "warehouse-fee-invoices",
       "gate-clearance",
@@ -1122,8 +1143,14 @@ export const api = {
   },
 
   routes: {
-    list: endpoint<void, RouteRecord[]>("routes", "list", () =>
-      routesService.getAll().then((r) => r.data),
+    list: endpoint<{ status?: import("./routes.service").RouteStatus } | void, RouteRecord[]>(
+      "routes",
+      "list",
+      (input) =>
+        routesService
+          .getAll(input?.status ? { status: input.status } : undefined)
+          .then((r) => r.data),
+      (input) => ["routes", input?.status ?? "all"],
     ),
 
     yards: endpoint<void, YardRef[]>(

apps/edr-freight-web/backoffice/src/services/bookings.service.ts

@@ -301,6 +301,105 @@ export const bookingsService = {
 
   governmentExpedite: (id: string) =>
     postBooking<BookingDetail>(B.GOVERNMENT_EXPEDITE(id)),
+
+  getClearance: async (id: string): Promise<Freight.ClearanceView> => {
+    const response = await client.get(B.CLEARANCE(id));
+    return unwrap(response.data) as Freight.ClearanceView;
+  },
+
+  uploadDeclaration: async (
+    id: string,
+    files: Record<string, File | null>,
+  ): Promise<BookingDetail> => {
+    const form = new FormData();
+    for (const [key, file] of Object.entries(files)) {
+      if (file) form.append(key, file);
+    }
+    const response = await client.post(B.CLEARANCE_DECLARATION(id), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as BookingDetail;
+  },
+
+  adviseDuty: async (
+    id: string,
+    payload: {
+      dutyRequired: boolean;
+      amount?: number;
+      currency?: string;
+      declarationSerial?: string;
+      attachment?: File | null;
+    },
+  ): Promise<BookingDetail> => {
+    const form = new FormData();
+    form.append("dutyRequired", String(payload.dutyRequired));
+    if (payload.amount != null) form.append("amount", String(payload.amount));
+    if (payload.currency) form.append("currency", payload.currency);
+    if (payload.declarationSerial) {
+      form.append("declarationSerial", payload.declarationSerial);
+    }
+    if (payload.attachment) form.append("attachment", payload.attachment);
+    const response = await client.post(B.CLEARANCE_DUTY(id), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as BookingDetail;
+  },
+
+  finalizePreClearance: (id: string) =>
+    postBooking<BookingDetail>(B.CLEARANCE_FINALIZE_PRE(id)),
+
+  uploadTransitPermit: async (
+    id: string,
+    files: Record<string, File | null>,
+  ): Promise<BookingDetail> => {
+    const form = new FormData();
+    for (const [key, file] of Object.entries(files)) {
+      if (file) form.append(key, file);
+    }
+    const response = await client.post(B.CLEARANCE_TRANSIT_PERMIT(id), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as BookingDetail;
+  },
+
+  uploadDeliveryOrder: async (id: string, file: File): Promise<BookingDetail> => {
+    const form = new FormData();
+    form.append("file", file);
+    const response = await client.post(B.CLEARANCE_DELIVERY_ORDER(id), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as BookingDetail;
+  },
+
+  uploadReleaseOrder: async (
+    id: string,
+    file: File,
+    vesselDepartureDate: string,
+  ): Promise<{ hold?: boolean; holdReason?: string }> => {
+    const form = new FormData();
+    form.append("file", file);
+    form.append("vesselDepartureDate", vesselDepartureDate);
+    const response = await client.post(B.CLEARANCE_RELEASE_ORDER(id), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as { hold?: boolean; holdReason?: string };
+  },
+
+  requestRoAmendment: (id: string, note?: string) =>
+    postBooking<BookingDetail>(B.CLEARANCE_RO_AMENDMENT(id), { note }),
+
+  confirmExportRelease: (id: string) =>
+    postBooking<BookingDetail>(B.CLEARANCE_EXPORT_RELEASE(id), {}),
+
+  getEtClearanceQueue: async (): Promise<BookingDetail[]> => {
+    const response = await client.get(B.CLEARANCE_ET_QUEUE);
+    return (unwrap(response.data) ?? []) as BookingDetail[];
+  },
+
+  getDjClearanceQueue: async (): Promise<BookingDetail[]> => {
+    const response = await client.get(B.CLEARANCE_DJ_QUEUE);
+    return (unwrap(response.data) ?? []) as BookingDetail[];
+  },
 };
 
 async function ensurePdfBlob(blob: Blob): Promise<Blob> {

apps/edr-freight-web/backoffice/src/services/contracts.service.ts

@@ -159,6 +159,13 @@ export const contractsService = {
     return unwrap(response.data) as ContractView;
   },
 
+  downloadContractDocument: async (id: string): Promise<Blob> => {
+    const response = await client.get(C.CONTRACT_DOCUMENT(id), {
+      responseType: "blob",
+    });
+    return response.data as Blob;
+  },
+
   signContract: (id: string, payload: SignContractPayload) =>
     postContract<Freight.IContract>(C.CONTRACT_SIGN(id), payload),
 
@@ -200,6 +207,153 @@ export const contractsService = {
   finalizeClearance: (id: string) =>
     postContract<Freight.IContract>(C.CLEARANCE_FINALIZE(id)),
 
+  getEtClearanceQueue: async (): Promise<PaginatedContracts> => {
+    const response = await client.get<PaginatedContracts>(C.CLEARANCE_ET_QUEUE);
+    const data = unwrap(response.data);
+    return {
+      items: (data.items ?? []) as Freight.IContract[],
+      total: data.total ?? 0,
+    };
+  },
+
+  getDjClearanceQueue: async (): Promise<PaginatedContracts> => {
+    const response = await client.get<PaginatedContracts>(C.CLEARANCE_DJ_QUEUE);
+    const data = unwrap(response.data);
+    return {
+      items: (data.items ?? []) as Freight.IContract[],
+      total: data.total ?? 0,
+    };
+  },
+
+  uploadDeclaration: async (
+    id: string,
+    files: Record<string, File | null>,
+  ): Promise<Freight.IContract> => {
+    const form = new FormData();
+    for (const [key, file] of Object.entries(files)) {
+      if (file) form.append(key, file);
+    }
+    const response = await client.post(C.CLEARANCE_DECLARATION(id), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as Freight.IContract;
+  },
+
+  adviseContractDuty: async (
+    id: string,
+    payload: {
+      dutyRequired: boolean;
+      amount?: number;
+      currency?: string;
+      declarationSerial?: string;
+      attachment?: File | null;
+    },
+  ): Promise<Freight.IContract> => {
+    const form = new FormData();
+    form.append("dutyRequired", String(payload.dutyRequired));
+    if (payload.amount != null) form.append("amount", String(payload.amount));
+    if (payload.currency) form.append("currency", payload.currency);
+    if (payload.declarationSerial) {
+      form.append("declarationSerial", payload.declarationSerial);
+    }
+    if (payload.attachment) form.append("attachment", payload.attachment);
+    const response = await client.post(C.CLEARANCE_DUTY(id), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as Freight.IContract;
+  },
+
+  finalizePreClearance: (id: string) =>
+    postContract<Freight.IContract>(C.CLEARANCE_FINALIZE_PRE(id)),
+
+  uploadContractTransitPermit: async (
+    id: string,
+    files: Record<string, File | null>,
+  ): Promise<Freight.IContract> => {
+    const form = new FormData();
+    for (const [key, file] of Object.entries(files)) {
+      if (file) form.append(key, file);
+    }
+    const response = await client.post(C.CLEARANCE_TRANSIT_PERMIT(id), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as Freight.IContract;
+  },
+
+  uploadDeliveryOrder: async (
+    id: string,
+    file: File,
+  ): Promise<Freight.IContract> => {
+    const form = new FormData();
+    form.append("file", file);
+    const response = await client.post(C.CLEARANCE_DELIVERY_ORDER(id), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as Freight.IContract;
+  },
+
+  uploadReleaseOrder: async (
+    id: string,
+    file: File,
+    vesselDepartureDate: string,
+  ): Promise<{ contract: Freight.IContract; hold: boolean; holdReason?: string }> => {
+    const form = new FormData();
+    form.append("file", file);
+    form.append("vesselDepartureDate", vesselDepartureDate);
+    const response = await client.post(C.CLEARANCE_RELEASE_ORDER(id), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as {
+      contract: Freight.IContract;
+      hold: boolean;
+      holdReason?: string;
+    };
+  },
+
+  requestRoAmendment: (id: string, note?: string) =>
+    postContract<Freight.IContract>(C.CLEARANCE_RO_AMENDMENT(id), { note }),
+
+  confirmExportRelease: (id: string) =>
+    postContract<Freight.IContract>(C.CLEARANCE_EXPORT_RELEASE(id)),
+
+  finalizeExportClearance: (id: string) =>
+    postContract<Freight.IContract>(C.CLEARANCE_FINALIZE_EXPORT(id)),
+
+  uploadTransportDocument: async (
+    bookingId: string,
+    files: Record<string, File | null>,
+  ) => {
+    const form = new FormData();
+    for (const [key, file] of Object.entries(files)) {
+      if (file) form.append(key, file);
+    }
+    const response = await client.post(C.BOOKING_TRANSPORT_DOCUMENT(bookingId), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data);
+  },
+
+  /** GL Djibouti uploads T1 transit documents (multi-file, post wagon allocation). */
+  uploadT1Documents: async (
+    bookingId: string,
+    files: Record<string, File | null>,
+  ) => {
+    const form = new FormData();
+    for (const [key, file] of Object.entries(files)) {
+      if (file) form.append(key, file);
+    }
+    const response = await client.post(C.BOOKING_T1_DOCUMENTS(bookingId), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data);
+  },
+
+  /** GL Ethiopia closes (accepts) the T1 document set after the train arrives. */
+  closeT1: async (bookingId: string): Promise<Freight.ClearanceT1State> => {
+    const response = await client.post(C.BOOKING_T1_CLOSE(bookingId));
+    return unwrap(response.data) as Freight.ClearanceT1State;
+  },
+
   // ── Path A self-clearance (Operations review) ──
   getOpsClearanceQueue: async (): Promise<PaginatedContracts> => {
     const response = await client.get<PaginatedContracts>(

apps/edr-freight-web/backoffice/src/services/last-mile.service.ts

@@ -29,9 +29,12 @@ export interface LastMileVehicle {
   plateNumber: string;
   manufacturer: string;
   model: string;
+  vehicleType?: string | null;
   code?: string | null;
   powerPlateNo?: string | null;
   trailerPlateNo?: string | null;
+  assignedDriverId?: string | null;
+  assignedDriverName?: string | null;
 }
 
 export interface LastMileRecord {

apps/edr-freight-web/backoffice/src/services/routes.service.ts

@@ -2,6 +2,8 @@ import { api as apiClient } from '../auth/http';
 
 import { URL_CONSTANTS } from '@/constants/URLS';
 
+export type RouteStatus = 'AVAILABLE' | 'MAINTENANCE' | 'DAMAGED' | 'STOP_WORKING';
+
 export interface YardRef {
   id: string;
   code: string;
@@ -14,32 +16,54 @@ export interface RouteMilestone {
   routeId: string;
   yardId: string;
   sequenceNo: number;
+  distanceKm?: number | null;
   yard?: YardRef | null;
 }
 
 export interface RouteRecord {
   id: string;
-  name: string;
+  status: RouteStatus;
   originYardId: string;
   destinationYardId: string;
-  isActive: boolean;
   originYard?: YardRef | null;
   destinationYard?: YardRef | null;
   milestones?: RouteMilestone[];
 }
 
 export interface SaveRoutePayload {
-  name: string;
-  milestones: Array<{ yardId: string }>;
-  isActive?: boolean;
+  milestones: Array<{ yardId: string; distanceKm?: number }>;
+  status?: RouteStatus;
 }
 
+export function formatRouteLabel(route: RouteRecord): string {
+  const origin =
+    route.originYard?.code ?? route.originYard?.label ?? 'Origin';
+  const dest =
+    route.destinationYard?.code ?? route.destinationYard?.label ?? 'Destination';
+  return `${origin} → ${dest}`;
+}
+
+export function totalRouteDistanceKm(route: RouteRecord): number {
+  return (route.milestones ?? []).reduce(
+    (sum, m) => sum + Number(m.distanceKm ?? 0),
+    0,
+  );
+}
+
+export const ROUTE_STATUS_OPTIONS: Array<{ value: RouteStatus; label: string }> = [
+  { value: 'AVAILABLE', label: 'Available' },
+  { value: 'MAINTENANCE', label: 'Maintenance' },
+  { value: 'DAMAGED', label: 'Damaged' },
+  { value: 'STOP_WORKING', label: 'Stop working' },
+];
+
 interface YardListResponse {
   data: YardRef[];
 }
 
 export const routesService = {
-  getAll: () => apiClient.get<RouteRecord[]>(URL_CONSTANTS.ROUTES.BASE),
+  getAll: (params?: { status?: RouteStatus; search?: string }) =>
+    apiClient.get<RouteRecord[]>(URL_CONSTANTS.ROUTES.BASE, { params }),
   getById: (id: string) => apiClient.get<RouteRecord>(URL_CONSTANTS.ROUTES.BY_ID(id)),
   create: (data: SaveRoutePayload) => apiClient.post(URL_CONSTANTS.ROUTES.BASE, data),
   update: (id: string, data: Partial<SaveRoutePayload>) =>

apps/edr-freight-web/backoffice/src/services/vehicles.service.ts

@@ -29,6 +29,8 @@ export interface Vehicle {
   status: VehicleStatus;
   availability: VehicleAvailability;
   description?: string | null;
+  assignedDriverId?: string | null;
+  assignedDriverName?: string | null;
   code?: string | null;
   powerPlateNo?: string | null;
   trailerPlateNo?: string | null;

apps/edr-freight-web/backoffice/src/services/warehouse.service.ts

@@ -18,6 +18,8 @@ import type {
   WarehouseFeeInvoice,
   WarehouseInvoiceFilter,
   PayInvoicePayload,
+  InitiateWarehouseInvoicePaymentPayload,
+  WarehouseInvoicePaymentResponse,
   BookingScheduleView,
   InventoryFilter,
   InventoryInquiryFilter,
@@ -171,10 +173,14 @@ export const warehouseService = {
     apiClient.get<ImportTrain[]>(URL_CONSTANTS.WAREHOUSE_INVENTORY.IMPORT_ARRIVE_QUEUE),
   importTrainItems: (scheduleId: string) =>
     apiClient.get<ImportTrainItem[]>(URL_CONSTANTS.WAREHOUSE_INVENTORY.IMPORT_TRAIN_ITEMS(scheduleId)),
-  autoUnloadArrivedBookings: (scheduleId: string) =>
+  autoUnloadArrivedBookings: (payload: {
+    scheduleId: string;
+    warehouseId?: string;
+    assignments?: { bookingId: string; warehouseId: string; yardId: string; zoneId: string }[];
+  }) =>
     apiClient.post<AutoUnloadArrivedResult>(
       URL_CONSTANTS.WAREHOUSE_INVENTORY.IMPORT_AUTO_UNLOAD_ARRIVED,
-      { scheduleId },
+      payload,
     ),
   importUnloadedQueue: () =>
     apiClient.get<ImportUnloadedItem[]>(URL_CONSTANTS.WAREHOUSE_INVENTORY.IMPORT_UNLOADED_QUEUE),
@@ -294,6 +300,8 @@ export const warehouseService = {
     apiClient.patch<WarehouseFeeInvoice>(URL_CONSTANTS.WAREHOUSE_INVOICES.CANCEL(id)),
   payInvoice: (id: string, payload: PayInvoicePayload) =>
     apiClient.post<WarehouseFeeInvoice>(URL_CONSTANTS.WAREHOUSE_INVOICES.PAY(id), payload),
+  payInvoiceOnline: (id: string, payload: InitiateWarehouseInvoicePaymentPayload) =>
+    apiClient.post<WarehouseInvoicePaymentResponse>(URL_CONSTANTS.WAREHOUSE_INVOICES.PAY_ONLINE(id), payload),
   gateClearance: (inventoryId: string) =>
     apiClient.post<WarehouseInventoryItem>(URL_CONSTANTS.WAREHOUSE_INVOICES.GATE_CLEARANCE(inventoryId), {}),
 };

apps/edr-freight-web/backoffice/src/types/booking.ts

@@ -177,6 +177,7 @@ export interface BookingDetail {
   equipmentReturn?: string;
   customsClearingEnabled?: boolean;
   customsClearingAgent?: string | null;
+  contractKind?: "ONE_TIME" | "GENERAL" | null;
   contractSummary?: string | null;
   latestChangeRequestNote?: string | null;
   nextStep?: BookingNextStep | null;

apps/edr-freight-web/backoffice/src/types/trainScheduling.ts

@@ -400,6 +400,7 @@ export interface TrainScheduleDetail {
 }
 
 export type ImportDjiboutiDocumentType =
+  | "GATE_PASS"
   | "DELIVERY_ORDER"
   | "PORT_INVOICE"
   | "DJIBOUTI_T1"
@@ -422,6 +423,7 @@ export interface ImportDjiboutiOperation {
   status: {
     documentsComplete: boolean;
     missingDocuments: ImportDjiboutiDocumentType[];
+    gatepassStatus: "SECURED" | "NOT_SECURED";
     gatepassGranted: boolean;
     readyForLoading: boolean;
     loadedOnTrain: boolean;
@@ -430,6 +432,8 @@ export interface ImportDjiboutiOperation {
   };
   documents: Partial<Record<ImportDjiboutiDocumentType, ImportDjiboutiDocumentRecord>>;
   gatepassGrantedAt: string | null;
+  gatepassSecuredAt?: string | null;
+  gatepassStatus: "SECURED" | "NOT_SECURED";
   readyForLoadingAt: string | null;
   loadedOnTrainAt: string | null;
   departedFromDjiboutiAt: string | null;
@@ -448,6 +452,10 @@ export interface UploadImportDjiboutiDocumentPayload {
 }
 
 export interface ImportDjiboutiActionPayload {
+  securedAt?: string;
+  fileId?: string;
+  fileUrl?: string;
+  reference?: string;
   notes?: string;
   performedBy?: string;
 }

apps/edr-freight-web/backoffice/src/types/warehouse.ts

@@ -223,6 +223,11 @@ export interface InventoryBookingRef {
   tradeDirection?: string | null;
   // Present when the customer requested last-mile (door) delivery — gates the Last Mile action.
   lastMileDeliveryAddress?: string | null;
+  customerTruckPlateNumber?: string | null;
+  customerTruckDriverName?: string | null;
+  customerTruckType?: string | null;
+  customerTruckContainerNumber?: string | null;
+  customerTruckAssignedAt?: string | null;
 }
 
 export interface InventoryMovement {
@@ -398,6 +403,11 @@ export interface EligibleBooking {
   firstMileDriverPhone: string | null;
   firstMileDriverLicenseNumber: string | null;
   firstMileTruckType: string | null;
+  customerTruckPlateNumber: string | null;
+  customerTruckDriverName: string | null;
+  customerTruckType: string | null;
+  customerTruckContainerNumber: string | null;
+  customerTruckAssignedAt: string | null;
 }
 
 export interface BulkReceivePayload {
@@ -433,6 +443,7 @@ export interface TruckEntrancePayload {
   packagingType?: string;
   unitCount?: number;
   grossWeightKg?: number;
+  weighingRequired?: boolean;
   netWeightKg?: number;
   volumeDimensions?: string;
   conditionAtReceipt?: string;
@@ -442,7 +453,7 @@ export interface TruckEntrancePayload {
   driverPhone: string;
   driverLicenseNumber?: string;
   truckType?: string;
-  entranceTareWeightKg: number;
+  entranceTareWeightKg?: number;
   exitTareWeightKg?: number;
   driverSignatoryName?: string;
   warehouseManagerName?: string;
@@ -573,6 +584,11 @@ export interface ImportUnloadedItem {
   inspectionStatus: string | null;
   pickupOption: string;
   lastMileRequested: boolean;
+  customerTruckPlateNumber: string | null;
+  customerTruckDriverName: string | null;
+  customerTruckType: string | null;
+  customerTruckContainerNumber: string | null;
+  customerTruckAssignedAt: string | null;
   currentStatus: string;
   releaseDate: string | null;
   releaseOrderReference: string | null;
@@ -589,6 +605,7 @@ export interface ImportTrainItem {
   wagonNumber: string | null;
   sequenceNo: number | null;
   allocatedWeightTons: number | null;
+  freightType: string | null;
   containerNumber: string | null;
   cargoType: string | null;
   weight: number | null;
@@ -738,11 +755,25 @@ export interface FeeRule {
   zoneId?: string | null;
   freeDays: number;
   ratePerDay: number;
+  tiers?: FeeRuleTier[];
   currency: string;
   isActive: boolean;
 }
 export type SaveFeeRulePayload = Omit<FeeRule, 'id'>;
 
+export interface FeeRuleTier {
+  fromDay: number;
+  toDay: number | null;
+  ratePerDay: number;
+}
+
+export interface FeePreviewTier extends FeeRuleTier {
+  appliedFromDay: number;
+  appliedToDay: number;
+  days: number;
+  amount: number;
+}
+
 export interface FeePreview {
   ruleType: FeeRuleType;
   ruleId: string | null;
@@ -760,6 +791,7 @@ export interface FeePreview {
   containerCount: number;
   billableUnits: number;
   amount: number;
+  tiers?: FeePreviewTier[];
 }
 
 export interface AllocationPreviewResult {
@@ -868,6 +900,27 @@ export interface PayInvoicePayload {
   driverPhone?: string;
 }
 
+export type WarehouseGatewayPaymentMethod = 'TELEBIRR' | 'WAAFI';
+
+export interface InitiateWarehouseInvoicePaymentPayload {
+  method: WarehouseGatewayPaymentMethod;
+  platform?: 'web' | 'mobile';
+  payerAccount?: string;
+  returnUrl?: string;
+  failureUrl?: string;
+}
+
+export interface WarehouseInvoicePaymentResponse {
+  intentId: string;
+  status?: string;
+  merchantOrderId?: string;
+  clientAction?: {
+    type?: string;
+    url?: string;
+    [key: string]: unknown;
+  };
+}
+
 // ── Payloads ───────────────────────────────────────────────────────────────
 
 export interface SaveWarehousePayload {