Merge branch 'dev' into freight/feat/fixes-v1

2026-08-29 23:28:11 +00:00 · 2026-07-20 08:20:34 +00:00
parent a45e1008fa d51e2e4042
commit 2c7a4b7112
178 changed files with 11076 additions and 3168 deletions
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -846,6 +846,16 @@ const App = () => {
            </RequirePermission>
          }
        />
+        <Route
+          path="contracts/clearance-documents/:id"
+          element={
+            <RequirePermission
+              permission={FREIGHT_PERMS.contracts.opsClearanceReview}
+            >
+              <ContractClearanceDetailPage />
+            </RequirePermission>
+          }
+        />
        {/* GL (Path B) contract clearance review hub */}
        <Route
          path="contracts/clearance"
--- a/apps/edr-freight-web/backoffice/src/auth/http.ts
+++ b/apps/edr-freight-web/backoffice/src/auth/http.ts
@@ -15,10 +15,23 @@ import {
 } from "./cookies";
 import type { AuthTokens } from "./types";

+declare module "axios" {
+  export interface AxiosRequestConfig {
+    /**
+     * When true, the response interceptor does NOT raise the global error modal
+     * for this request's failure. For calls the caller handles itself — e.g. a
+     * probe that is expected to 404 before falling back (GL clearance detail
+     * tries /contracts/:id then /bookings/:id). The rejection still propagates.
+     */
+    suppressErrorModal?: boolean;
+  }
+}
+
 type RetriableRequest = {
  _retry?: boolean;
  headers?: Record<string, string>;
  url?: string;
+  suppressErrorModal?: boolean;
 };

 const api = axios.create({
@@ -100,8 +113,13 @@ api.interceptors.response.use(
      originalRequest.url?.includes("/auth/refresh-token")
    ) {
      // Surface the server's actual error message in the global error modal
-      // (401s are handled by the session-refresh flow, so skip them).
-      if (error.response && error.response.status !== 401) {
+      // (401s are handled by the session-refresh flow, so skip them). A request
+      // may opt out via `suppressErrorModal` when it handles the failure itself.
+      if (
+        error.response &&
+        error.response.status !== 401 &&
+        !originalRequest?.suppressErrorModal
+      ) {
        const payload = extractApiErrorPayload(error);
        if (payload) emitApiError(payload);
      }
--- a/apps/edr-freight-web/backoffice/src/components/bookings/ContractReferenceLink.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/ContractReferenceLink.tsx
@@ -0,0 +1,43 @@
+import { Link } from "react-router-dom";
+
+/**
+ * The parent contract's reference, linking to that contract's detail page.
+ *
+ * Backoffice-local on purpose: the contract detail route differs per app
+ * (`/dashboard/contract-requests/:id` here vs `/contracts/:id` in the portal),
+ * so the portal keeps its own copy in `pages/bookings/booking-display.tsx`
+ * rather than the two sharing a component that would have to take the route as
+ * a prop at every call site.
+ *
+ * Renders nothing when either field is missing: `contractId` is nullable on the
+ * booking, and only the bookings list/detail endpoints join `contractReference`
+ * — other endpoints (warehouse, fleet, payments) return booking rows without it,
+ * and a link with no id would be a dead one.
+ *
+ * `stopPropagation` matters: booking rows are click-to-navigate, so without it a
+ * click here would race the row handler and land on the booking instead.
+ */
+export function ContractReferenceLink({
+  contractId,
+  contractReference,
+  className,
+}: {
+  contractId?: string | null;
+  contractReference?: string | null;
+  className?: string;
+}) {
+  if (!contractId || !contractReference) return null;
+
+  return (
+    <Link
+      to={`/dashboard/contract-requests/${contractId}`}
+      onClick={(e) => e.stopPropagation()}
+      className={
+        className ??
+        "block truncate font-mono text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
+      }
+    >
+      {contractReference}
+    </Link>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRequestHero.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRequestHero.tsx
@@ -24,6 +24,7 @@ import type { LucideIcon } from "lucide-react";
 import type { BookingDetail } from "@/types/booking";
 import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
 import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
+import { ContractReferenceLink } from "@/components/bookings/ContractReferenceLink";
 import { SchedulingStatusBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
 import { NextStepBanner } from "@/components/bookings/NextStepBanner";

@@ -94,9 +95,15 @@ export function BookingRequestHero({
              Booking reference
            </Text>
            <Group gap="sm" align="center" wrap="wrap">
-              <Title order={2} fw={700} style={{ letterSpacing: "-0.4px" }}>
-                {booking.reference}
-              </Title>
+              <Stack gap={2} miw={0}>
+                <Title order={2} fw={700} style={{ letterSpacing: "-0.4px" }}>
+                  {booking.reference}
+                </Title>
+                <ContractReferenceLink
+                  contractId={booking.contractId}
+                  contractReference={booking.contractReference}
+                />
+              </Stack>
              <BookingStatusBadge status={booking.status} />
              <BookingPriorityBadge score={booking.priorityScore} />
              {booking.schedulingStatus ? (
--- a/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx
@@ -4,6 +4,7 @@ import {
  useRef,
  useState,
  type KeyboardEvent,
+  type ReactNode,
 } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -37,10 +38,12 @@ import {
  FileDown,
  FileText,
  FileUp,
+  Flame,
  MapPin,
  Package,
  Receipt,
  Repeat,
+  Snowflake,
  X,
 } from "lucide-react";
 import type { Freight } from "@edr/types";
@@ -128,6 +131,10 @@ interface UnitDraft {
  containerNumber: string;
  sealNumber: string;
  vgmTons: string;
+  /** Handling is per physical container; the line counts roll these up. */
+  isHazardous: boolean;
+  isReefer: boolean;
+  isReturn: boolean;
 }

 /** Mirrors the portal shipment form's container line: line-level quantity +
@@ -150,7 +157,14 @@ interface BulkDraft {
 }

 function emptyUnit(): UnitDraft {
-  return { containerNumber: "", sealNumber: "", vgmTons: "" };
+  return {
+    containerNumber: "",
+    sealNumber: "",
+    vgmTons: "",
+    isHazardous: false,
+    isReefer: false,
+    isReturn: false,
+  };
 }

 function emptyLine(size: string): ContainerLineDraft {
@@ -285,6 +299,41 @@ export default function GlCreateBookingForm() {
  // Legacy contracts (no equipment return chosen at creation) keep the old
  // booking-level toggle.
  const legacyReturnToggle = isContainer && !contract?.equipmentReturn;
+  /**
+   * Handling switches offered on each container row — only the services this
+   * contract was created with, since the server rejects the others.
+   */
+  const handlingColumns = (
+    [
+      contract?.isHazardous && {
+        key: "isHazardous",
+        label: "Hazardous",
+        icon: <Flame size={14} />,
+        color: "#C0392B",
+      },
+      contract?.isReefer && {
+        key: "isReefer",
+        label: "Refrigerated",
+        icon: <Snowflake size={14} />,
+        color: "#2E5B96",
+      },
+      contractWithReturn && {
+        key: "isReturn",
+        label: "With return",
+        icon: <Repeat size={14} />,
+        color: "#0A6F4D",
+      },
+    ] as Array<
+      | false
+      | undefined
+      | { key: keyof UnitDraft; label: string; icon: ReactNode; color: string }
+    >
+  ).filter(Boolean) as Array<{
+    key: "isHazardous" | "isReefer" | "isReturn";
+    label: string;
+    icon: ReactNode;
+    color: string;
+  }>;
  // Intercity shipments ride a passing import/export train staff pick at
  // finalize time — no shipment day is chosen and no window gate applies.
  const isIntercity = contract?.tradeDirection === "DOMESTIC";
@@ -358,6 +407,9 @@ export default function GlCreateBookingForm() {

  useEffect(() => {
    if (!bookingRequest || prefilled) return;
+    // A rebook (?copyFrom=) seeds from the expired booking's real cargo —
+    // richer than the request's bare quantities. Let that seed win the race.
+    if (copyFromParam) return;
    setPrefilled(true);
    const lines = bookingRequest.requestedLines ?? {};
    if (lines.containers?.length) {
@@ -399,13 +451,27 @@ export default function GlCreateBookingForm() {
    setContainerLines(
      lines.map((c) => {
        const qty = Math.max(1, c.quantity);
+        // Carry the persisted per-unit details (numbers, seals, VGM, handling)
+        // when the source booking has them — a rebooked EXPIRED booking does,
+        // and its cargo is fixed server-side anyway.
+        const units: UnitDraft[] =
+          c.units?.length === qty
+            ? c.units.map((u) => ({
+                containerNumber: u.containerNumber ?? "",
+                sealNumber: u.sealNumber ?? "",
+                vgmTons: u.vgmTons != null ? String(u.vgmTons) : "",
+                isHazardous: Boolean(u.isHazardous),
+                isReefer: Boolean(u.isReefer),
+                isReturn: Boolean(u.isReturn),
+              }))
+            : Array.from({ length: qty }, emptyUnit);
        return {
          containerSize: String(c.containerType?.sizeFt ?? ""),
          quantity: String(qty),
-          hazardousQuantity: "0",
-          reeferQuantity: "0",
-          returnQuantity: "0",
-          units: Array.from({ length: qty }, emptyUnit),
+          hazardousQuantity: String(units.filter((u) => u.isHazardous).length),
+          reeferQuantity: String(units.filter((u) => u.isReefer).length),
+          returnQuantity: String(units.filter((u) => u.isReturn).length),
+          units,
        };
      }),
    );
@@ -488,6 +554,18 @@ export default function GlCreateBookingForm() {
    enabled: cargoQuery !== null && !isIntercity,
  });

+  /**
+   * Line handling totals are a roll-up of the per-container switches — the
+   * count is however many containers ticked each service. Recomputed on every
+   * unit change so the price estimate and payload follow the switches.
+   */
+  const withDerivedCounts = (line: ContainerLineDraft): ContainerLineDraft => ({
+    ...line,
+    hazardousQuantity: String(line.units.filter((u) => u.isHazardous).length),
+    reeferQuantity: String(line.units.filter((u) => u.isReefer).length),
+    returnQuantity: String(line.units.filter((u) => u.isReturn).length),
+  });
+
  // Keep the units array length in sync with the entered quantity.
  const syncUnits = (lineIdx: number, qty: number) => {
    setContainerLines((prev) =>
@@ -496,7 +574,7 @@ export default function GlCreateBookingForm() {
        const next = [...line.units];
        while (next.length < qty) next.push(emptyUnit());
        next.length = Math.max(0, qty);
-        return { ...line, units: next };
+        return withDerivedCounts({ ...line, units: next });
      }),
    );
  };
@@ -511,11 +589,16 @@ export default function GlCreateBookingForm() {
    unitIdx: number,
    patch: Partial<UnitDraft>,
  ) =>
-    patchLine(lineIdx, {
-      units: containerLines[lineIdx].units.map((u, i) =>
-        i === unitIdx ? { ...u, ...patch } : u,
+    setContainerLines((prev) =>
+      prev.map((l, i) =>
+        i === lineIdx
+          ? withDerivedCounts({
+              ...l,
+              units: l.units.map((u, j) => (j === unitIdx ? { ...u, ...patch } : u)),
+            })
+          : l,
      ),
-    });
+    );

  // Same client-side validation as the customer portal shipment form
  // (new-shipment-form/schema.ts): ISO container numbers unique within the
@@ -560,10 +643,15 @@ export default function GlCreateBookingForm() {
          hazardousQuantity: String(imported.filter((r) => r.hazardous).length),
          reeferQuantity: String(imported.filter((r) => r.reefer).length),
          returnQuantity: String(imported.filter((r) => r.withReturn).length),
+          // The spreadsheet marks handling per row — carry it onto the
+          // container it belongs to rather than collapsing it to a line count.
          units: imported.map((r) => ({
            containerNumber: r.containerNumber,
            sealNumber: r.sealNumber,
            vgmTons: String(r.vgmTons),
+            isHazardous: Boolean(r.hazardous),
+            isReefer: Boolean(r.reefer),
+            isReturn: Boolean(r.withReturn),
          })),
        };
      }),
@@ -742,6 +830,11 @@ export default function GlCreateBookingForm() {
            containerNumber: u.containerNumber.trim().toUpperCase(),
            ...(u.sealNumber ? { sealNumber: u.sealNumber } : {}),
            vgmTons: Number(u.vgmTons) || 0,
+            // Per-container handling — the server rolls these into the line
+            // counts and bills each surcharge on the ticked containers only.
+            isHazardous: Boolean(u.isHazardous),
+            isReefer: Boolean(u.isReefer),
+            ...(contractWithReturn ? { isReturn: Boolean(u.isReturn) } : {}),
          })),
        }));
    } else {
@@ -1175,78 +1268,60 @@ export default function GlCreateBookingForm() {
                        radius={10}
                        styles={fieldStyles}
                      />
-                      {contract.isHazardous && (
-                        <TextInput
-                          type="number"
-                          onKeyDown={blockNegative}
-                          label="Hazardous qty"
-                          min={0}
-                          value={line.hazardousQuantity}
-                          error={
-                            showErrors
-                              ? lineErrors[lineIdx]?.hazardousQuantity
-                              : undefined
-                          }
-                          onChange={(e) =>
-                            patchLine(lineIdx, {
-                              hazardousQuantity: e.currentTarget.value,
-                            })
-                          }
-                          radius={10}
-                          styles={fieldStyles}
-                        />
-                      )}
-                      {contract.isReefer && (
-                        <TextInput
-                          type="number"
-                          onKeyDown={blockNegative}
-                          label="Reefer qty"
-                          min={0}
-                          value={line.reeferQuantity}
-                          error={
-                            showErrors
-                              ? lineErrors[lineIdx]?.reeferQuantity
-                              : undefined
-                          }
-                          onChange={(e) =>
-                            patchLine(lineIdx, {
-                              reeferQuantity: e.currentTarget.value,
-                            })
-                          }
-                          radius={10}
-                          styles={fieldStyles}
-                        />
-                      )}
-                      {contractWithReturn && (
-                        <TextInput
-                          type="number"
-                          onKeyDown={blockNegative}
-                          label="With return qty"
-                          description="Containers EDR returns empty"
-                          min={0}
-                          value={line.returnQuantity}
-                          error={
-                            showErrors
-                              ? lineErrors[lineIdx]?.returnQuantity
-                              : undefined
-                          }
-                          onChange={(e) =>
-                            patchLine(lineIdx, {
-                              returnQuantity: e.currentTarget.value,
-                            })
-                          }
-                          radius={10}
-                          styles={fieldStyles}
-                        />
-                      )}
                    </Group>

                    <StepLabel>Per-container details</StepLabel>
+                    {handlingColumns.length > 0 ? (
+                      <Text fz={11} c="dimmed" mt={4}>
+                        Tick the services each individual container needs —
+                        charges apply only to the containers ticked
+                        {handlingColumns
+                          .map((col) => {
+                            const count = line.units.filter(
+                              (u) => u[col.key],
+                            ).length;
+                            return count > 0 ? ` · ${count} ${col.label.toLowerCase()}` : "";
+                          })
+                          .join("")}
+                        .
+                      </Text>
+                    ) : null}
                    <Stack gap={10} mt={8}>
+                      {/* Header row — input labels + handling-service labels,
+                          one aligned grid shared by every unit row below.
+                          Same layout as the portal shipment form. */}
+                      {line.units.length > 0 && (
+                        <Group gap={10} wrap="nowrap" align="flex-end">
+                          <Text fz={12} fw={600} c="#10202F" style={{ flex: 1 }}>
+                            Container number *
+                          </Text>
+                          <Text fz={12} fw={600} c="#10202F" style={{ flex: 1 }}>
+                            Seal number
+                          </Text>
+                          <Text fz={12} fw={600} c="#10202F" style={{ flex: 1 }}>
+                            VGM (tons) *
+                          </Text>
+                          {handlingColumns.map((col) => (
+                            <Group
+                              key={col.key}
+                              gap={4}
+                              wrap="nowrap"
+                              justify="center"
+                              style={{ width: 96, flexShrink: 0 }}
+                            >
+                              <span style={{ color: col.color, display: "flex" }}>
+                                {col.icon}
+                              </span>
+                              <Text fz={12} fw={600} c="#10202F">
+                                {col.label}
+                              </Text>
+                            </Group>
+                          ))}
+                        </Group>
+                      )}
                      {line.units.map((unit, unitIdx) => (
-                        <Group key={unitIdx} gap={10} grow align="flex-start">
+                        <Group key={unitIdx} gap={10} wrap="nowrap" align="flex-start">
                          <TextInput
-                            label={unitIdx === 0 ? "Container number *" : undefined}
                            placeholder="e.g. MSCU1234567"
                            value={unit.containerNumber}
                            error={
@@ -1262,9 +1337,9 @@ export default function GlCreateBookingForm() {
                            }
                            radius={10}
                            styles={fieldStyles}
+                            style={{ flex: 1 }}
                          />
                          <TextInput
-                            label={unitIdx === 0 ? "Seal number" : undefined}
                            placeholder="Optional"
                            value={unit.sealNumber}
                            onChange={(e) =>
@@ -1274,11 +1349,11 @@ export default function GlCreateBookingForm() {
                            }
                            radius={10}
                            styles={fieldStyles}
+                            style={{ flex: 1 }}
                          />
                          <TextInput
                            type="number"
                            onKeyDown={blockNegative}
-                            label={unitIdx === 0 ? "VGM (tons) *" : undefined}
                            placeholder="e.g. 24.5"
                            min={0}
                            step={0.01}
@@ -1295,7 +1370,32 @@ export default function GlCreateBookingForm() {
                            }
                            radius={10}
                            styles={fieldStyles}
+                            style={{ flex: 1 }}
                          />
+                          {handlingColumns.map((col) => (
+                            <Box
+                              key={col.key}
+                              style={{
+                                width: 96,
+                                flexShrink: 0,
+                                height: 42,
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                              }}
+                            >
+                              <Switch
+                                checked={Boolean(unit[col.key])}
+                                aria-label={`${col.label} — container ${unitIdx + 1}`}
+                                onChange={(e) =>
+                                  patchUnit(lineIdx, unitIdx, {
+                                    [col.key]: e.currentTarget.checked,
+                                  })
+                                }
+                                size="sm"
+                              />
+                            </Box>
+                          ))}
                        </Group>
                      ))}
                    </Stack>
--- a/apps/edr-freight-web/backoffice/src/components/contracts/PhasedClearanceActionPanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/PhasedClearanceActionPanel.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
  Alert,
  Badge,
@@ -72,6 +72,7 @@ export type ClearanceViewLike = Pick<
  | "linkedBookingId"
  | "riskLevel"
  | "riskAssignedAt"
+  | "riskHistory"
  | "secondDuty"
  | "importReleaseGranted"
 > & { operationReady?: boolean };
@@ -1040,11 +1041,28 @@ function RiskStep({
  done: boolean;
  onChanged?: () => void;
 }) {
-  const [level, setLevel] = useState<string>("GREEN");
+  const assigned = done || Boolean(clearance.riskLevel);
+  // Duty is advised off the risk level, so once that is done the decision is
+  // final. Until then a mis-assigned level must stay correctable — the server
+  // overwrites the milestone metadata on reassignment. Mirrors AssignRiskCard.
+  const locked = isMilestoneDone(clearance.milestones, "DUTY_TAXES_ADVISED");
+
+  const [level, setLevel] = useState<string>(clearance.riskLevel ?? "GREEN");
  const [loading, setLoading] = useState(false);

-  if (done || clearance.riskLevel) {
-    return (
+  // The clearance view loads (and refetches after a reassignment) after first
+  // render, so mirror the persisted level onto the control whenever it changes —
+  // otherwise reopening the step offers GREEN whatever is actually assigned.
+  useEffect(() => {
+    if (clearance.riskLevel) setLevel(clearance.riskLevel);
+  }, [clearance.riskLevel]);
+
+  // Only the decisions before the current one — the badge above already states
+  // the level in force, so repeating it as a trail entry reads as a duplicate.
+  const priorDecisions = (clearance.riskHistory ?? []).slice(0, -1);
+
+  const assignedSummary = assigned ? (
+    <Stack gap={6}>
      <Group gap="sm">
        <Badge
          color={RISK_LEVEL_COLOR[clearance.riskLevel ?? ""] ?? "gray"}
@@ -1061,12 +1079,35 @@ function RiskStep({
          . The customer can see this level.
        </Text>
      </Group>
-    );
+      {priorDecisions.length > 0 ? (
+        <Stack gap={2} pl="xs">
+          <Text size="xs" c="dimmed" fw={600}>
+            Previously
+          </Text>
+          {priorDecisions.map((entry, index) => (
+            <Text key={`${entry.assignedAt}-${index}`} size="xs" c="dimmed">
+              {entry.level}
+              {" · "}
+              {new Date(entry.assignedAt).toLocaleString()}
+              {entry.assignedBy ? ` · ${entry.assignedBy}` : ""}
+              {entry.note ? ` · ${entry.note}` : ""}
+            </Text>
+          ))}
+        </Stack>
+      ) : null}
+    </Stack>
+  ) : null;
+
+  // Assigned and final: the badge is all that is left to show.
+  if (assigned && (locked || !canAct || !bookingId)) {
+    return assignedSummary;
  }

  // Customs cannot rate cargo still under transit — the server rejects the
-  // assignment until the T1 is closed, so do not offer the control yet.
-  if (!clearance.t1?.closed) {
+  // assignment until the T1 is closed, so do not offer the control yet. Skipped
+  // once a level exists: risk cannot have been assigned without a closed T1, so
+  // a still-open T1 here is stale data and must not hide the assigned badge.
+  if (!assigned && !clearance.t1?.closed) {
    return (
      <StepStatus
        done={false}
@@ -1088,6 +1129,7 @@ function RiskStep({

  return (
    <Stack gap="sm">
+      {assignedSummary}
      <SegmentedControl
        fullWidth
        value={level}
@@ -1100,19 +1142,24 @@ function RiskStep({
      />
      <Group justify="space-between">
        <Text size="xs" c="dimmed">
-          The customer sees the assigned risk level.
+          {assigned
+            ? "Correctable until duty is advised. The customer sees the assigned risk level."
+            : "The customer sees the assigned risk level."}
        </Text>
        <Button
          size="compact-sm"
          color="edr-green"
          loading={loading}
+          disabled={assigned && level === clearance.riskLevel}
          onClick={async () => {
            setLoading(true);
            try {
              await contractsService.assignRisk(bookingId, {
                riskLevel: level as Freight.CustomsRiskLevel,
              });
-              toast.success("Customs risk assigned");
+              toast.success(
+                assigned ? "Customs risk reassigned" : "Customs risk assigned",
+              );
              onChanged?.();
            } catch (e) {
              toast.error(e instanceof Error ? e.message : "Failed");
@@ -1121,7 +1168,7 @@ function RiskStep({
            }
          }}
        >
-          Assign risk
+          {assigned ? "Reassign risk" : "Assign risk"}
        </Button>
      </Group>
    </Stack>
--- a/apps/edr-freight-web/backoffice/src/components/errors/ApiErrorModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/errors/ApiErrorModal.tsx
@@ -104,6 +104,11 @@ export function ApiErrorModal() {
      onClose={close}
      centered
      radius="md"
+      // Mounted at the app root, so its portal is FIRST in <body> — at the
+      // default z-index (200) any page modal opened later (create schedule,
+      // allocation wizard, …) paints over it and the error hides underneath.
+      // Hoist above every Mantine overlay and the react-hot-toast layer (9999).
+      zIndex={10000}
      title={
        <Group gap="xs">
          <AlertTriangle size={18} color="var(--mantine-color-red-6)" />
--- a/apps/edr-freight-web/backoffice/src/components/trainBuilder/BuildTrainModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainBuilder/BuildTrainModal.tsx
@@ -16,7 +16,8 @@ import { useEffect, useState } from "react";
 import { api } from "@/services/api";
 import type { TrainComposition } from "@/services/trainBuilder.service";
 import { useToast } from "@/hooks/use-toast";
-import { IMPORT_TRAIN_OPTIONS, exportRunFor } from "@/constants/trainRuns";
+import { useImportTrainNumberOptions } from "@/hooks/useImportTrainNumberOptions";
+import { exportRunFor } from "@/constants/trainRuns";

 const parseError = (error: unknown, fallback: string) => {
  if (isAxiosError(error)) {
@@ -42,6 +43,9 @@ export default function BuildTrainModal({ opened, onClose, onBuilt }: BuildTrain
  const [notes, setNotes] = useState("");

  const yardsQuery = useQuery(api.routes.yards.queryOptions({ staleTime: 5 * 60_000 }));
+  // Admin-managed run list (dropdown settings); numbers already on a train
+  // come back disabled so they cannot be picked twice.
+  const importNumbers = useImportTrainNumberOptions();
  // Only serviceable locomotives standing in the selected yard can be coupled.
  const locomotivesQuery = useQuery(
    api.locomotives.listFiltered.queryOptions({
@@ -150,12 +154,13 @@ export default function BuildTrainModal({ opened, onClose, onBuilt }: BuildTrain
          <Select
            label="Import train number"
            description="Even — Djibouti → Ethiopia runs"
-            placeholder="e.g. 8002"
-            data={IMPORT_TRAIN_OPTIONS}
+            placeholder={importNumbers.isLoading ? "Loading…" : "e.g. 8002"}
+            data={importNumbers.options}
            value={importTrainNumber || null}
            onChange={(value) => setImportTrainNumber(value ?? "")}
            searchable
            clearable
+            nothingFoundMessage="No free run numbers — add more in Dropdown Settings"
          />
        </Group>
        <Select
--- a/apps/edr-freight-web/backoffice/src/components/trainBuilder/EditTrainDetailsModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainBuilder/EditTrainDetailsModal.tsx
@@ -1,9 +1,11 @@
-import { Button, Group, Modal, Stack, Text, TextInput } from "@mantine/core";
+import { Button, Group, Modal, Select, Stack, Text, TextInput } from "@mantine/core";
 import { useMutation } from "@tanstack/react-query";
 import { Pencil } from "lucide-react";
 import { useEffect, useState } from "react";

+import { exportRunFor } from "@/constants/trainRuns";
 import { useToast } from "@/hooks/use-toast";
+import { useImportTrainNumberOptions } from "@/hooks/useImportTrainNumberOptions";
 import { api } from "@/services/api";
 import type { BuiltTrainSummary } from "@/services/trainBuilder.service";

@@ -15,9 +17,11 @@ export interface EditTrainDetailsModalProps {

 /**
 * Edit a built train's display identity from the list: its name and its fixed
- * import/export run numbers. Composition (yard, locomotives, wagons) is edited
- * on the detail page. Number collisions come back as a 409 with the owning
- * train's code and surface verbatim.
+ * import/export run numbers. The import number comes from the admin-managed
+ * dropdown setting (numbers on other trains are disabled; this train's own
+ * number stays pickable) and the export number follows it. Composition (yard,
+ * locomotives, wagons) is edited on the detail page. Number collisions come
+ * back as a 409 with the owning train's code and surface verbatim.
 */
 const EditTrainDetailsModal = ({ train, onClose }: EditTrainDetailsModalProps) => {
  const { toast } = useToast();
@@ -25,6 +29,8 @@ const EditTrainDetailsModal = ({ train, onClose }: EditTrainDetailsModalProps) =
  const [importNo, setImportNo] = useState("");
  const [exportNo, setExportNo] = useState("");

+  const importNumbers = useImportTrainNumberOptions(train?.importTrainNumber);
+
  useEffect(() => {
    if (train) {
      setName(train.trainName ?? "");
@@ -86,20 +92,29 @@ const EditTrainDetailsModal = ({ train, onClose }: EditTrainDetailsModalProps) =
          radius="md"
        />
        <Group grow>
-          <TextInput
+          <Select
            label="Import train no."
-            placeholder="e.g. 8002"
-            value={importNo}
-            onChange={(e) => setImportNo(e.currentTarget.value)}
-            maxLength={20}
+            placeholder={importNumbers.isLoading ? "Loading…" : "e.g. 8002"}
+            data={importNumbers.options}
+            value={importNo || null}
+            onChange={(value) => {
+              // Clearing keeps the stored numbers (empty inputs are dropped on
+              // save); a pick re-derives the paired export run.
+              setImportNo(value ?? "");
+              setExportNo(value ? exportRunFor(value) : (train?.exportTrainNumber ?? ""));
+            }}
+            searchable
+            clearable
+            nothingFoundMessage="No free run numbers — add more in Dropdown Settings"
            radius="md"
          />
          <TextInput
            label="Export train no."
+            description="Follows the import run"
            placeholder="e.g. 8001"
            value={exportNo}
-            onChange={(e) => setExportNo(e.currentTarget.value)}
-            maxLength={20}
+            readOnly
+            variant="filled"
            radius="md"
          />
        </Group>
--- a/apps/edr-freight-web/backoffice/src/components/trainBuilder/trainStatus.ts
+++ b/apps/edr-freight-web/backoffice/src/components/trainBuilder/trainStatus.ts
@@ -15,6 +15,8 @@ export const trainStatusColor = (status: BuiltTrainStatus | string): string => {
      return "yellow";
    case "OUT_OF_SERVICE":
      return "red";
+    case "DEACTIVATED":
+      return "gray";
    default:
      return "gray";
  }
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleWarningsAlert.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleWarningsAlert.tsx
@@ -40,17 +40,21 @@ export function PreviewSummary({
  summary?: {
    totalBookings: number;
    totalWeightTons: number;
+    grossWeightTons?: number;
+    totalTareTons?: number;
    wagonType: string;
    wagonsNeeded: number;
    totalLengthMeters: number;
  };
 }) {
  if (!summary) return null;
+  // GROSS — the axis every train limit is spent against.
+  const gross = summary.grossWeightTons ?? summary.totalWeightTons;
  const stats = [
    { label: "Bookings", value: String(summary.totalBookings) },
    { label: "Wagons", value: String(summary.wagonsNeeded) },
    { label: "Wagon type", value: summary.wagonType },
-    { label: "Total weight", value: `${summary.totalWeightTons}T` },
+    { label: "Gross weight", value: `${gross}T` },
    { label: "Train length", value: `${summary.totalLengthMeters}m` },
  ];
  return (
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleWorkspacePanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleWorkspacePanel.tsx
@@ -99,9 +99,8 @@ function usedWeight(schedule: TrainScheduleDetail): number {
 /**
 * Pull capacity of the set = the WEAKEST locomotive's max pull weight (0 when
 * unknown). The API caps at the weakest loco, not the sum of all locos — a
- * consist can only pull as hard as its weakest engine. Note: the API also adds
- * the consist tare to the used weight when it checks this cap; tare isn't
- * available client-side, so this meter compares cargo-only load against pull.
+ * consist can only pull as hard as its weakest engine. Both sides of this meter
+ * are gross: `usedWeight` sums per-booking gross (cargo + wagon tare).
 */
 function pullCapacity(schedule: TrainScheduleDetail): number {
  const set = schedule.trainSet;
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/TrainCompositionDiagram.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/TrainCompositionDiagram.tsx
@@ -46,6 +46,8 @@ type NormalizedWagon = {

 const CAR_WIDTH = 150; // car body + coupler footprint

+const round1 = (n: number) => Math.round(n * 10) / 10;
+
 function normalizeWagon(w: DiagramWagonInput, freightType?: string | null): NormalizedWagon {
  const allocations = w.allocations ?? [];
  const firstLoad = (
@@ -268,10 +270,11 @@ const CONTAINER_BORDERS = [
 ];

 function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
+  // GROSS on both sides: cargo + tare vs rated payload + tare.
+  const grossTons = round1(wagon.assignedWeightTons + wagon.tareWeightTons);
+  const maxGrossTons = round1(wagon.capacityTons + wagon.tareWeightTons);
  const utilization =
-    wagon.capacityTons > 0
-      ? Math.min(100, Math.round((wagon.assignedWeightTons / wagon.capacityTons) * 100))
-      : 0;
+    maxGrossTons > 0 ? Math.min(100, Math.round((grossTons / maxGrossTons) * 100)) : 0;
  const accent = wagon.isEmpty ? "gray" : wagon.isBulk ? "orange" : "cyan";
  const accentVar = `var(--mantine-color-${accent}-6)`;

@@ -281,8 +284,8 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
        wagon.bookingRefs.length ? wagon.bookingRefs.join(", ") : ""
      }${
        wagon.containerNumbers.length ? `\nContainers: ${wagon.containerNumbers.join(", ")}` : ""
-      }${wagon.cargoDescription ? `\n${wagon.cargoDescription}` : ""}\nLoad: ${wagon.assignedWeightTons}/${wagon.capacityTons}T (${utilization}%)${
-        wagon.tareWeightTons ? `\nTare: ${wagon.tareWeightTons}T` : ""
+      }${wagon.cargoDescription ? `\n${wagon.cargoDescription}` : ""}\nGross: ${grossTons}/${maxGrossTons}T (${utilization}%)\nCargo: ${wagon.assignedWeightTons}T${
+        wagon.tareWeightTons ? ` · Tare: ${wagon.tareWeightTons}T` : ""
      }`;

  // container blocks: one per container number (cap visual at 2 = TEU per wagon)
@@ -369,7 +372,7 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
                  />
                </Box>
                <Text size="9px" c="dimmed" ta="center" fw={600}>
-                  {wagon.assignedWeightTons}/{wagon.capacityTons}T
+                  {grossTons}/{maxGrossTons}T
                </Text>
              </Stack>
            ) : (
@@ -442,7 +445,7 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
              </Text>
              {!wagon.isEmpty ? (
                <Text size="8px" c="gray.6" fw={700} style={{ whiteSpace: "nowrap" }}>
-                  {wagon.assignedWeightTons}T
+                  {grossTons}T
                </Text>
              ) : null}
            </Group>
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/WagonPlanGrid.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/WagonPlanGrid.tsx
@@ -6,6 +6,7 @@ type WagonSlot = (WagonPlanRow & { physicalWagonNumber?: string | null }) | {
  sequenceNo: number;
  capacityTons: number;
  assignedWeightTons: number;
+  tareWeightTons?: number | null;
  slotLoadType?: string;
  wagonType?: { code: string } | null;
  wagonTypeCode?: string;
@@ -21,6 +22,8 @@ type WagonSlot = (WagonPlanRow & { physicalWagonNumber?: string | null }) | {
  }>;
 };

+const round1 = (n: number) => Math.round(n * 10) / 10;
+
 function loadTypeColor(loadType: string | undefined, freightType?: string | null) {
  const normalized = loadType?.toUpperCase() ?? "";
  if (normalized.includes("BULK")) return "orange";
@@ -68,8 +71,16 @@ export function WagonPlanGrid({
    );
  }

-  const totalCapacity = wagonPlan.reduce((sum, w) => sum + w.capacityTons, 0);
-  const totalAssigned = wagonPlan.reduce((sum, w) => sum + w.assignedWeightTons, 0);
+  // GROSS on both sides: cargo + tare vs rated payload + tare.
+  const totalTare = round1(
+    wagonPlan.reduce((sum, w) => sum + (Number(w.tareWeightTons) || 0), 0),
+  );
+  const totalCapacity = round1(
+    wagonPlan.reduce((sum, w) => sum + w.capacityTons, 0) + totalTare,
+  );
+  const totalAssigned = round1(
+    wagonPlan.reduce((sum, w) => sum + w.assignedWeightTons, 0) + totalTare,
+  );
  const usedSlots = wagonPlan.filter((w) => (w.allocations?.length ?? 0) > 0).length;

  const isBulk = freightType === "BULK" || wagonPlan.every((w) => w.slotLoadType === "BULK" || (!w.slotLoadType && w.allocations?.[0]?.loadType === "Bulk"));
@@ -82,7 +93,7 @@ export function WagonPlanGrid({
        </Text>
        {isBulk ? (
          <Text size="sm" c="dimmed">
-            Load: <strong>{totalAssigned}</strong> / {totalCapacity}T
+            Gross: <strong>{totalAssigned}</strong> / {totalCapacity}T
          </Text>
        ) : null}
      </Group>
@@ -90,8 +101,9 @@ export function WagonPlanGrid({
      <SimpleGrid cols={{ base: 1, sm: 2, xl: 3 }} spacing="md">
        {wagonPlan.map((wagon) => {
          const seq = wagon.sequenceNo;
-          const capacity = wagon.capacityTons;
-          const assigned = wagon.assignedWeightTons;
+          const tare = Number(wagon.tareWeightTons) || 0;
+          const capacity = round1(wagon.capacityTons + tare);
+          const assigned = round1(wagon.assignedWeightTons + tare);
          const allocations = wagon.allocations ?? [];
          const utilization = capacity > 0 ? Math.min(100, Math.round((assigned / capacity) * 100)) : 0;
          const label = slotLabel(wagon, freightType);
@@ -149,7 +161,7 @@ export function WagonPlanGrid({
                            </Text>
                            {label === "BULK" ? (
                              <Text size="xs" c="dimmed">
-                                {alloc.allocatedWeightTons}T
+                                {alloc.allocatedWeightTons}T cargo
                              </Text>
                            ) : null}
                          </Group>
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/BookingDetailModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/BookingDetailModal.tsx
@@ -132,7 +132,7 @@ export const BookingDetailModal = ({
          />
          <InfoRow
            icon={<Weight size={15} />}
-            label="Weight"
+            label="Gross weight"
            value={
              <Text size="sm" fw={700}>
                {booking.weightTons != null ? `${booking.weightTons.toFixed(1)} T` : "—"}
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/InteractiveTrainConsist.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/InteractiveTrainConsist.tsx
@@ -161,8 +161,11 @@ function WagonCar({
  const allocation = wagon.allocations?.[0];
  const isEmpty = !allocation;
  const isBulk = (allocation?.loadType ?? "").toUpperCase().includes("BULK");
-  const assigned = allocation?.allocatedWeightTons ?? wagon.assignedWeightTons ?? 0;
-  const capacity = wagon.capacityTons ?? 0;
+  // GROSS on both sides: cargo + tare vs rated payload + tare.
+  const tare = wagon.tareWeightTons ?? 0;
+  const assigned =
+    (allocation?.allocatedWeightTons ?? wagon.assignedWeightTons ?? 0) + tare;
+  const capacity = (wagon.capacityTons ?? 0) + tare;
  const utilization = capacity > 0 ? Math.min(100, Math.round((assigned / capacity) * 100)) : 0;
  const accent = isEmpty ? "gray" : isBulk ? "orange" : "cyan";
  const accentVar = `var(--mantine-color-${accent}-6)`;
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/RemoveBookingModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/RemoveBookingModal.tsx
@@ -21,6 +21,8 @@ export const RemoveBookingModal = ({
  if (!wagon || !wagon.allocations?.[0]) return null;

  const allocation = wagon.allocations[0];
+  // GROSS: allocated cargo + the tare of the wagon it sits on.
+  const grossTons = (allocation.allocatedWeightTons ?? 0) + (wagon.tareWeightTons ?? 0);

  return (
    <Modal opened={opened} onClose={onClose} title="Confirm Booking Removal" centered>
@@ -40,7 +42,7 @@ export const RemoveBookingModal = ({
              </Badge>
            </Text>
            <Text size="sm">
-              <strong>Weight:</strong> {allocation.allocatedWeightTons?.toFixed(2) || 0} T
+              <strong>Gross weight:</strong> {grossTons.toFixed(2)} T
            </Text>
            <Text size="sm">
              <strong>Wagon Slot:</strong> #{wagon.sequenceNo}
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/TrainConsistView.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/TrainConsistView.tsx
@@ -93,10 +93,14 @@ export const TrainConsistView = ({
    }
  };

-  const weightUsed = wagons.reduce(
-    (sum, w) => sum + (w.allocations?.[0]?.allocatedWeightTons ?? 0),
+  // GROSS: cargo on every allocation + the tare of every wagon in the consist.
+  // maxPullWeightTons is a gross limit, so the numerator must be gross too.
+  const cargoUsed = wagons.reduce(
+    (sum, w) => sum + (w.allocations ?? []).reduce((a, al) => a + (al.allocatedWeightTons ?? 0), 0),
    0,
  );
+  const tareUsed = wagons.reduce((sum, w) => sum + (w.tareWeightTons ?? 0), 0);
+  const weightUsed = cargoUsed + tareUsed;
  const lengthUsed = wagons.reduce((sum, w) => sum + (w.lengthMeters ?? 0), 0);

  return (
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/TrainStatsBar.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/TrainStatsBar.tsx
@@ -98,7 +98,7 @@ export const TrainStatsBar = ({
      <SimpleGrid cols={{ base: 1, xs: 3 }} spacing="lg">
        <StatTile
          icon={<Weight size={15} />}
-          label="Weight"
+          label="Gross weight"
          pct={weightPct}
          current={weightUsed.toFixed(1)}
          max={weightMax?.toFixed(1) ?? "∞"}
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/UnassignedBookingsPanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/UnassignedBookingsPanel.tsx
@@ -130,7 +130,9 @@ export const UnassignedBookingsPanel = ({

      {bookings.map((booking) => {
        const isActive = selectedBookingId === booking.id;
-        const weight = Number(booking.cargoTotalWeightVgm ?? 0);
+        // GROSS (cargo + wagon tare) so this badge shares the axis every other
+        // weight on the page uses — cargo-only here read ~25% light.
+        const weight = Number(booking.grossWeightTons ?? booking.cargoTotalWeightVgm ?? 0);
        const fits = booking.canAssign;
        const blockReason = booking.blockReason;

--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/WagonCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/WagonCard.tsx
@@ -36,8 +36,12 @@ export const WagonCard = ({
  const hasAllocations = Boolean(allocation);
  const isBulk = (allocation?.loadType ?? "").toUpperCase().includes("BULK");

-  const weightUsed = allocation?.allocatedWeightTons ?? 0;
-  const weightMax = wagon.capacityTons ?? 0;
+  // GROSS on both sides: loaded cargo + wagon tare, against the wagon's max
+  // gross (rated payload + tare). Keeps the wagon axis identical to the train
+  // axis in TrainStatsBar.
+  const tare = wagon.tareWeightTons ?? 0;
+  const weightUsed = (allocation?.allocatedWeightTons ?? 0) + tare;
+  const weightMax = (wagon.capacityTons ?? 0) + tare;
  const weightPercent = weightMax ? (weightUsed / weightMax) * 100 : 0;

  const wagonType = wagon.wagonType?.code || "UNKNOWN";
--- a/apps/edr-freight-web/backoffice/src/constants/trainRuns.ts
+++ b/apps/edr-freight-web/backoffice/src/constants/trainRuns.ts
@@ -54,10 +54,26 @@ export const TRAIN_RUN_FILTER_OPTIONS = Object.entries(TRAIN_RUN_PAIRS).map(
  }),
 );

-/** The import run implied by an export run; empty string when unset/unknown. */
-export const importRunFor = (exportRun: unknown): string =>
-  TRAIN_RUN_PAIRS[String(exportRun ?? "")] ?? "";
+/**
+ * The import run implied by an export run; empty string when unset/unknown.
+ * Runs outside the hardcoded pairs (admin-added via dropdown settings) fall
+ * back to the numeric convention: import = export + 1.
+ */
+export const importRunFor = (exportRun: unknown): string => {
+  const run = String(exportRun ?? "");
+  const paired = TRAIN_RUN_PAIRS[run];
+  if (paired) return paired;
+  return /^\d*[13579]$/.test(run) ? String(Number(run) + 1) : "";
+};

-/** The export run implied by an import run; empty string when unset/unknown. */
-export const exportRunFor = (importRun: unknown): string =>
-  EXPORT_BY_IMPORT[String(importRun ?? "")] ?? "";
+/**
+ * The export run implied by an import run; empty string when unset/unknown.
+ * Runs outside the hardcoded pairs (admin-added via dropdown settings) fall
+ * back to the numeric convention: export = import − 1.
+ */
+export const exportRunFor = (importRun: unknown): string => {
+  const run = String(importRun ?? "");
+  const paired = EXPORT_BY_IMPORT[run];
+  if (paired) return paired;
+  return /^\d*[02468]$/.test(run) && Number(run) > 0 ? String(Number(run) - 1) : "";
+};
--- a/apps/edr-freight-web/backoffice/src/features/bookings/mapBookingListRow.ts
+++ b/apps/edr-freight-web/backoffice/src/features/bookings/mapBookingListRow.ts
@@ -19,6 +19,7 @@ export function toBookingListRow(booking: BookingDetail): BookingListRow {
    id: booking.id,
    reference: booking.reference,
    contractReference: booking.contractReference ?? null,
+    contractId: booking.contractId ?? null,
    approvalSteps: booking.approvalSteps,
    customerLabel: booking.isGovernment
      ? (booking.governmentInstitution ?? "Government")
--- a/apps/edr-freight-web/backoffice/src/hooks/useImportTrainNumberOptions.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useImportTrainNumberOptions.ts
@@ -0,0 +1,67 @@
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+import { IMPORT_TRAIN_OPTIONS } from "@/constants/trainRuns";
+import { api } from "@/services/api";
+
+/** Dropdown-settings code holding the admin-managed IMPORT run numbers. */
+export const IMPORT_TRAIN_NUMBERS_CODE = "import_train_numbers";
+
+export interface ImportTrainNumberOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+/**
+ * Selectable IMPORT run numbers for the Train Builder, sourced from the
+ * admin-managed `import_train_numbers` dropdown setting (admins add new runs
+ * from the Dropdown Settings editor). Falls back to the legacy hardcoded run
+ * list while the setting is missing or has no options.
+ *
+ * Numbers already claimed by an existing train are kept in the list but
+ * disabled and tagged "in use". Pass `currentNumber` when editing a train so
+ * its own number stays pickable, and so a legacy number that was removed from
+ * the setting still renders.
+ */
+export function useImportTrainNumberOptions(currentNumber?: string | null) {
+  const settingQuery = useQuery(
+    api.dropdownSettings.getByCode.queryOptions({
+      input: { code: IMPORT_TRAIN_NUMBERS_CODE },
+      staleTime: 5 * 60_000,
+      retry: false,
+    }),
+  );
+  const usedQuery = useQuery(
+    api.trainBuilder.usedTrainNumbers.queryOptions({ staleTime: 30_000 }),
+  );
+
+  const options = useMemo<ImportTrainNumberOption[]>(() => {
+    const configured = [...(settingQuery.data?.children ?? [])]
+      .filter((option) => !option.disabled)
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+      .map((option) => ({
+        value: option.value,
+        label: option.label || option.value,
+      }));
+    const base = configured.length ? configured : IMPORT_TRAIN_OPTIONS;
+
+    const used = new Set(usedQuery.data?.importTrainNumbers ?? []);
+    if (currentNumber) used.delete(currentNumber);
+
+    const items: ImportTrainNumberOption[] = base.map((option) =>
+      used.has(option.value)
+        ? { ...option, label: `${option.label} — in use`, disabled: true }
+        : option,
+    );
+    if (currentNumber && !items.some((option) => option.value === currentNumber)) {
+      items.unshift({ value: currentNumber, label: currentNumber });
+    }
+    return items;
+  }, [settingQuery.data, usedQuery.data, currentNumber]);
+
+  return {
+    options,
+    isLoading: settingQuery.isLoading || usedQuery.isLoading,
+  };
+}
--- a/apps/edr-freight-web/backoffice/src/lib/queryClient.ts
+++ b/apps/edr-freight-web/backoffice/src/lib/queryClient.ts
@@ -27,7 +27,8 @@ export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
-      staleTime: 30_000,
+      // staleTime: 30_000,
+      staleTime:0,
      // Data freshness is driven by mutation invalidation (MutationCache above),
      // socket pushes, and explicit polling — not by tab focus. Focus refetch
      // just re-fires every mounted query each time the window is refocused.
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
@@ -48,6 +48,7 @@ import {
  useBookingList,
  useBookingListSummary,
 } from "@/hooks/bookings/useBookings";
+import { ContractReferenceLink } from "@/components/bookings/ContractReferenceLink";
 import { api } from "@/services/api";
 import type { BookingListFilter } from "@/services/bookings.service";
 import type { BookingListRow } from "@/types/booking";
@@ -308,7 +309,17 @@ export default function BookingRequestsPage() {
        return (
          <div className="py-1">
            {ref ? (
-              <span className="truncate font-mono text-xs text-foreground">{ref}</span>
+              // Fall back to plain text when the id is missing — the reference is
+              // still worth showing, it just has nowhere to link to.
+              (row.original.contractId ? (
+                <ContractReferenceLink
+                  contractId={row.original.contractId}
+                  contractReference={ref}
+                  className="truncate font-mono text-xs text-foreground underline underline-offset-2 hover:text-primary"
+                />
+              ) : (
+                <span className="truncate font-mono text-xs text-foreground">{ref}</span>
+              ))
            ) : (
              <span className="text-xs text-muted-foreground">—</span>
            )}
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/DocumentClearanceDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/DocumentClearanceDetailPage.tsx
@@ -23,6 +23,7 @@ import {
  Clock,
  PackageCheck,
  PackagePlus,
+  RotateCcw,
  ShieldCheck,
 } from "lucide-react";
 import type { Freight } from "@edr/types";
@@ -110,6 +111,16 @@ export default function DocumentClearanceDetailPage() {
    hasPermission(user, FREIGHT_PERMS.contracts.createBooking) &&
    !isDjiboutiGl(user);

+  // The completed booking expired unpaid at train dispatch. Its per-booking
+  // clearance is finished, so GL rebooks it onto a new day — the customer never
+  // re-requests the shipment or pays the clearance fee again.
+  const canRebookExpired =
+    booking?.status === "EXPIRED" &&
+    Boolean(booking?.contractId) &&
+    Number(booking?.totalAmount ?? 0) > 0 &&
+    hasPermission(user, FREIGHT_PERMS.contracts.createBooking) &&
+    !isDjiboutiGl(user);
+
  const docsPhaseComplete =
    clearance?.milestones?.some(
      (m) => m.milestoneCode === "DOCUMENTS_APPROVED" && m.status === "COMPLETED",
@@ -194,6 +205,19 @@ export default function DocumentClearanceDetailPage() {
              >
                Create booking
              </Button>
+            ) : canRebookExpired ? (
+              <Button
+                color="edr-green"
+                radius="md"
+                leftSection={<RotateCcw size={16} />}
+                onClick={() =>
+                  navigate(
+                    `/dashboard/contracts/${booking!.contractId}/bookings/${id}/complete?copyFrom=${id}`,
+                  )
+                }
+              >
+                Rebook shipment
+              </Button>
            ) : undefined
          }
        />
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ClearanceDocumentsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ClearanceDocumentsPage.tsx
@@ -452,7 +452,9 @@ export default function ClearanceDocumentsPage() {
                    data={contractRows}
                    status={tableStatus}
                    onRowClick={(row) =>
-                      navigate(`/dashboard/contracts/clearance/${row.id}`)
+                      navigate(
+                        `/dashboard/contracts/clearance-documents/${row.id}`,
+                      )
                    }
                    pagination={{
                      pageIndex: pagination.pageIndex,
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceDetailPage.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import {
  Alert,
  Badge,
@@ -52,9 +52,21 @@ import {

 export default function ContractClearanceDetailPage() {
  const { id } = useParams<{ id: string }>();
+  const { pathname } = useLocation();
  const { view, viewer } = useFileViewer();
  const { user } = useAuth();

+  // The same detail page serves two hubs: the GL "Document Clearance" list and
+  // the Operations "Clearance Documents" list. Point back-navigation at
+  // whichever hub the user came through.
+  const fromOpsHub = pathname.startsWith(
+    "/dashboard/contracts/clearance-documents",
+  );
+  const hubHref = fromOpsHub
+    ? "/dashboard/contracts/clearance-documents"
+    : "/dashboard/contracts/clearance";
+  const hubLabel = fromOpsHub ? "Clearance Documents" : "Document Clearance";
+
  const { data: contract, refetch: refetchContract } = useContractDetail(id);
  const {
    data: clearance,
@@ -153,12 +165,9 @@ export default function ContractClearanceDetailPage() {
      <PageContainer>
        <PageHeader
          title="Clearance not found"
-          backTo="/dashboard/contracts/clearance"
+          backTo={hubHref}
          breadcrumbs={[
-            {
-              label: "Document Clearance",
-              href: "/dashboard/contracts/clearance",
-            },
+            { label: hubLabel, href: hubHref },
            { label: "Not found" },
          ]}
        />
@@ -176,12 +185,9 @@ export default function ContractClearanceDetailPage() {
      <Stack gap="lg">
        <PageHeader
          title={reference}
-          backTo="/dashboard/contracts/clearance"
+          backTo={hubHref}
          breadcrumbs={[
-            {
-              label: "Document Clearance",
-              href: "/dashboard/contracts/clearance",
-            },
+            { label: hubLabel, href: hubHref },
            { label: reference },
          ]}
          meta={
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceListPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceListPage.tsx
@@ -197,6 +197,29 @@ function DirectionIcon({ direction }: { direction: string }) {
 }

 function StatusBadge({ row }: { row: ClearanceRow }) {
+  // Terminal contracts stay listed as history — badge the terminal state
+  // instead of falling through to "Under review".
+  if (["EXPIRED", "CANCELLED", "REJECTED"].includes(row.status)) {
+    return (
+      <Tooltip
+        label="This contract is no longer active — kept here for clearance history."
+        withArrow
+      >
+        <Badge
+          size="sm"
+          variant="light"
+          color={row.status === "EXPIRED" ? "orange" : "red"}
+          radius="sm"
+        >
+          {row.status === "EXPIRED"
+            ? "Contract expired"
+            : row.status === "CANCELLED"
+              ? "Cancelled"
+              : "Rejected"}
+        </Badge>
+      </Tooltip>
+    );
+  }
  if (row.paymentExpired) {
    return (
      <Tooltip
@@ -727,8 +750,12 @@ export default function ContractClearanceListPage() {
                  )
                }
                onRebook={(row) =>
+                  // Re-complete the SAME expired booking (new day, same finished
+                  // per-booking clearance) — a fresh create-booking would spawn a
+                  // new instance and force the customer through clearance + fee
+                  // again.
                  navigate(
-                    `/dashboard/contracts/${row.contractId}/create-booking?copyFrom=${row.id}`,
+                    `/dashboard/contracts/${row.contractId}/bookings/${row.id}/complete?copyFrom=${row.id}`,
                  )
                }
                onViewContract={(contractId) =>
@@ -813,6 +840,17 @@ const shipmentStatusColor = (s: string) => {
  if (s === "AWAITING_DOCUMENTS") return "yellow";
  if (s === "DOCUMENTS_UNDER_REVIEW") return "blue";
  if (s === "CLEARANCE_READY") return "edr-green";
+  if (
+    [
+      "SELECTED_FOR_BATCH",
+      "PNR_GENERATED",
+      "AWAITING_PAYMENT",
+      "PAYMENT_VERIFICATION_IN_PROGRESS",
+    ].includes(s)
+  )
+    return "violet";
+  if (s === "EXPIRED") return "orange";
+  if (s === "CANCELLED" || s === "REJECTED") return "red";
  return "gray";
 };

--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
@@ -4,11 +4,14 @@ import {
  Button,
  Card,
  Group,
+  MultiSelect,
+  Select,
  Stack,
  Text,
  TextInput,
  ThemeIcon,
 } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
 import { useDebouncedValue } from "@mantine/hooks";
 import {
  AlertTriangle,
@@ -17,6 +20,7 @@ import {
  CheckCircle2,
  Clock,
  FileText,
+  FilterX,
  Inbox,
  LayoutList,
  RefreshCw,
@@ -36,7 +40,10 @@ import {
 } from "@/components/contracts/ContractStatusTabs";
 import { bookingTable } from "@/components/bookings/booking-ui.styles";
 import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
-import { CONTRACT_LIST_TABS } from "@/features/contracts/contract-status.config";
+import {
+  CONTRACT_LIST_TABS,
+  CONTRACT_STATUS_STYLES,
+} from "@/features/contracts/contract-status.config";
 import {
  getStaffRowAction,
  toContractListRow,
@@ -61,6 +68,63 @@ function getStatusesForTab(tab: ContractStatusTabKey): string | undefined {
  return match.statuses.join(",");
 }

+/** Statuses selectable in the status filter for a given tab ("all" → every tab status). */
+function getStatusOptionsForTab(
+  tab: ContractStatusTabKey,
+): { value: string; label: string }[] {
+  const match = CONTRACT_LIST_TABS.find((t) => t.key === tab);
+  const statuses = match?.statuses?.length
+    ? match.statuses
+    : CONTRACT_LIST_TABS.flatMap((t) => t.statuses ?? []);
+  return statuses.map((s) => ({
+    value: s,
+    label: CONTRACT_STATUS_STYLES[s]?.label ?? s,
+  }));
+}
+
+const TRADE_DIRECTION_OPTIONS = [
+  { value: "IMPORT", label: "Import" },
+  { value: "EXPORT", label: "Export" },
+  { value: "DOMESTIC", label: "Domestic" },
+];
+
+const FREIGHT_TYPE_OPTIONS = [
+  { value: "CONTAINER", label: "Container" },
+  { value: "BULK", label: "Bulk" },
+];
+
+const CONTRACT_KIND_OPTIONS = [
+  { value: "GENERAL", label: "General (recurring)" },
+  { value: "ONE_TIME", label: "One-time" },
+];
+
+const CURRENCY_OPTIONS = [
+  { value: "ETB", label: "ETB" },
+  { value: "USD", label: "USD" },
+];
+
+/** value = `${sortBy}:${sortOrder}` for the sort Select. */
+const SORT_OPTIONS = [
+  { value: "createdAt:DESC", label: "Newest first" },
+  { value: "createdAt:ASC", label: "Oldest first" },
+  { value: "contractValidUntil:ASC", label: "Expiring soonest" },
+  { value: "contractValidUntil:DESC", label: "Expiring latest" },
+];
+
+/** Local start-of-day → ISO, for inclusive "from" date filters. */
+function startOfDayIso(d: Date): string {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x.toISOString();
+}
+
+/** Local end-of-day → ISO, for inclusive "to" date filters. */
+function endOfDayIso(d: Date): string {
+  const x = new Date(d);
+  x.setHours(23, 59, 59, 999);
+  return x.toISOString();
+}
+
 function formatDate(value: string | null | undefined): string {
  if (!value) return "—";
  const d = new Date(value);
@@ -79,32 +143,86 @@ export default function ContractRequestsPage() {
  const [query, setQuery] = useState("");
  const [debouncedQuery] = useDebouncedValue(query, 300);
  const [activeTab, setActiveTab] = useState<ContractStatusTabKey>("all");
+  // Filter controls (empty/null = "all").
+  const [statusFilter, setStatusFilter] = useState<string[]>([]);
+  const [directionFilter, setDirectionFilter] = useState<string | null>(null);
+  const [freightTypeFilter, setFreightTypeFilter] = useState<string | null>(
+    null,
+  );
+  const [kindFilter, setKindFilter] = useState<string | null>(null);
+  const [currencyFilter, setCurrencyFilter] = useState<string | null>(null);
+  const [createdFrom, setCreatedFrom] = useState<Date | null>(null);
+  const [createdTo, setCreatedTo] = useState<Date | null>(null);
+  const [sort, setSort] = useState<string>("createdAt:DESC");

  const tabStatuses = getStatusesForTab(activeTab);
+  const statusOptions = useMemo(
+    () => getStatusOptionsForTab(activeTab),
+    [activeTab],
+  );

  const resetPage = useCallback(() => {
    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
  }, [setPagination, pagination.pageSize]);

-  const filter: ContractListFilter = useMemo(
-    () => ({
+  const filter: ContractListFilter = useMemo(() => {
+    const [sortBy, sortOrder] = sort.split(":") as [string, "ASC" | "DESC"];
+    return {
      page: pagination.pageIndex + 1,
      pageSize: pagination.pageSize,
-      sortBy: "createdAt",
-      sortOrder: "DESC",
+      sortBy,
+      sortOrder,
      tab: activeTab,
      // Server-side free-text search (contract reference, customer name).
      ...(debouncedQuery.trim() ? { search: debouncedQuery.trim() } : {}),
-      ...(tabStatuses ? { statuses: tabStatuses } : {}),
-    }),
-    [
-      pagination.pageIndex,
-      pagination.pageSize,
-      activeTab,
-      tabStatuses,
-      debouncedQuery,
-    ],
-  );
+      // Explicit status picks narrow within the tab; otherwise the tab's
+      // status group applies.
+      ...(statusFilter.length
+        ? { statuses: statusFilter.join(",") }
+        : tabStatuses
+          ? { statuses: tabStatuses }
+          : {}),
+      ...(directionFilter ? { tradeDirection: directionFilter } : {}),
+      ...(freightTypeFilter ? { freightType: freightTypeFilter } : {}),
+      ...(kindFilter ? { contractKind: kindFilter } : {}),
+      ...(currencyFilter ? { paymentCurrency: currencyFilter } : {}),
+      ...(createdFrom ? { createdFrom: startOfDayIso(createdFrom) } : {}),
+      ...(createdTo ? { createdTo: endOfDayIso(createdTo) } : {}),
+    };
+  }, [
+    pagination.pageIndex,
+    pagination.pageSize,
+    activeTab,
+    tabStatuses,
+    debouncedQuery,
+    statusFilter,
+    directionFilter,
+    freightTypeFilter,
+    kindFilter,
+    currencyFilter,
+    createdFrom,
+    createdTo,
+    sort,
+  ]);
+
+  const activeFilterCount =
+    (statusFilter.length ? 1 : 0) +
+    (directionFilter ? 1 : 0) +
+    (freightTypeFilter ? 1 : 0) +
+    (kindFilter ? 1 : 0) +
+    (currencyFilter ? 1 : 0) +
+    (createdFrom || createdTo ? 1 : 0);
+
+  const clearFilters = useCallback(() => {
+    setStatusFilter([]);
+    setDirectionFilter(null);
+    setFreightTypeFilter(null);
+    setKindFilter(null);
+    setCurrencyFilter(null);
+    setCreatedFrom(null);
+    setCreatedTo(null);
+    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+  }, [setPagination, pagination.pageSize]);

  const { data, isLoading, isError, refetch, isFetching } =
    useContractList(filter);
@@ -341,6 +459,8 @@ export default function ContractRequestsPage() {
          active={activeTab}
          onChange={(tab) => {
            setActiveTab(tab);
+            // Status picks belong to the previous tab's option set — reset.
+            setStatusFilter([]);
            setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
          }}
          counts={tabCounts}
@@ -349,38 +469,159 @@ export default function ContractRequestsPage() {
        <Card p={0}>
          <Stack gap={0}>
            <Box px="md" pt="md" pb="sm" w="100%">
-              <Group justify="space-between" gap="md" wrap="wrap">
-                <TextInput
-                  placeholder="Search reference or customer…"
-                  leftSection={<Search size={18} />}
-                  value={query}
-                  onChange={(e) => {
-                    setQuery(e.target.value);
-                    resetPage();
-                  }}
-                  rightSection={
-                    query && (
-                      <ActionIcon
-                        size="sm"
-                        color="gray"
-                        radius="md"
-                        variant="transparent"
-                        onClick={() => {
-                          setQuery("");
-                          resetPage();
-                        }}
-                      >
-                        <X size={16} />
-                      </ActionIcon>
-                    )
-                  }
-                  style={{ flex: 1, minWidth: "200px" }}
-                  radius="lg"
-                />
-                <Text size="sm" c="dimmed">
-                  {total} record{total !== 1 ? "s" : ""}
-                </Text>
-              </Group>
+              <Stack gap="sm">
+                <Group justify="space-between" gap="md" wrap="wrap">
+                  <TextInput
+                    placeholder="Search reference or customer…"
+                    leftSection={<Search size={18} />}
+                    value={query}
+                    onChange={(e) => {
+                      setQuery(e.target.value);
+                      resetPage();
+                    }}
+                    rightSection={
+                      query && (
+                        <ActionIcon
+                          size="sm"
+                          color="gray"
+                          radius="md"
+                          variant="transparent"
+                          onClick={() => {
+                            setQuery("");
+                            resetPage();
+                          }}
+                        >
+                          <X size={16} />
+                        </ActionIcon>
+                      )
+                    }
+                    style={{ flex: 1, minWidth: "200px" }}
+                    radius="lg"
+                  />
+                  <Select
+                    data={SORT_OPTIONS}
+                    value={sort}
+                    onChange={(v) => {
+                      setSort(v ?? "createdAt:DESC");
+                      resetPage();
+                    }}
+                    allowDeselect={false}
+                    radius="lg"
+                    style={{ minWidth: 170 }}
+                    aria-label="Sort contracts"
+                  />
+                  <Text size="sm" c="dimmed">
+                    {total} record{total !== 1 ? "s" : ""}
+                  </Text>
+                </Group>
+                <Group gap="sm" wrap="wrap">
+                  <MultiSelect
+                    placeholder={
+                      statusFilter.length ? undefined : "All statuses"
+                    }
+                    data={statusOptions}
+                    value={statusFilter}
+                    onChange={(v) => {
+                      setStatusFilter(v);
+                      resetPage();
+                    }}
+                    clearable
+                    searchable
+                    radius="lg"
+                    style={{ minWidth: 220 }}
+                    aria-label="Filter by status"
+                  />
+                  <Select
+                    placeholder="All directions"
+                    data={TRADE_DIRECTION_OPTIONS}
+                    value={directionFilter}
+                    onChange={(v) => {
+                      setDirectionFilter(v);
+                      resetPage();
+                    }}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 150 }}
+                    aria-label="Filter by trade direction"
+                  />
+                  <Select
+                    placeholder="All freight types"
+                    data={FREIGHT_TYPE_OPTIONS}
+                    value={freightTypeFilter}
+                    onChange={(v) => {
+                      setFreightTypeFilter(v);
+                      resetPage();
+                    }}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 160 }}
+                    aria-label="Filter by freight type"
+                  />
+                  <Select
+                    placeholder="All kinds"
+                    data={CONTRACT_KIND_OPTIONS}
+                    value={kindFilter}
+                    onChange={(v) => {
+                      setKindFilter(v);
+                      resetPage();
+                    }}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 160 }}
+                    aria-label="Filter by contract kind"
+                  />
+                  <Select
+                    placeholder="All currencies"
+                    data={CURRENCY_OPTIONS}
+                    value={currencyFilter}
+                    onChange={(v) => {
+                      setCurrencyFilter(v);
+                      resetPage();
+                    }}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 140 }}
+                    aria-label="Filter by payment currency"
+                  />
+                  <DateInput
+                    placeholder="Created from"
+                    value={createdFrom}
+                    onChange={(v) => {
+                      setCreatedFrom(v ? new Date(v) : null);
+                      resetPage();
+                    }}
+                    maxDate={createdTo ?? undefined}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 140 }}
+                    aria-label="Created from"
+                  />
+                  <DateInput
+                    placeholder="Created to"
+                    value={createdTo}
+                    onChange={(v) => {
+                      setCreatedTo(v ? new Date(v) : null);
+                      resetPage();
+                    }}
+                    minDate={createdFrom ?? undefined}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 140 }}
+                    aria-label="Created to"
+                  />
+                  {activeFilterCount > 0 ? (
+                    <Button
+                      variant="subtle"
+                      color="gray"
+                      radius="lg"
+                      leftSection={<FilterX size={16} />}
+                      onClick={clearFilters}
+                    >
+                      Clear filters ({activeFilterCount})
+                    </Button>
+                  ) : null}
+                </Group>
+              </Stack>
            </Box>

            {showEmpty ? (
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/GlClearanceDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/GlClearanceDetailPage.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import {
  Alert,
  Badge,
@@ -18,7 +18,6 @@ import {
  AlertCircle,
  ClipboardList,
  FileText,
-  PackagePlus,
  Upload,
 } from "lucide-react";
 import type { Freight } from "@edr/types";
@@ -61,9 +60,12 @@ type GlClearanceDetail =

 async function loadGlClearanceDetail(id: string): Promise<GlClearanceDetail> {
  try {
+    // Probe the contract endpoints first; a booking-id row 404s here by design
+    // and falls back to the booking lookup below. Suppress the global error
+    // modal so that expected 404 never surfaces to the user.
    const [clearance, contract] = await Promise.all([
-      contractsService.getClearance(id),
-      contractsService.getById(id),
+      contractsService.getClearance(id, { suppressErrorModal: true }),
+      contractsService.getById(id, { suppressErrorModal: true }),
    ]);
    return {
      kind: "contract",
@@ -89,7 +91,6 @@ async function loadGlClearanceDetail(id: string): Promise<GlClearanceDetail> {
 /** Djibouti GL clearance detail — RO/DO upload and read-only upstream context. */
 export default function GlClearanceDetailPage() {
  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
  const { user } = useAuth();
  const { view, viewer } = useFileViewer();
  const [uploadKind, setUploadKind] = useState<GlClearanceUploadKind | null>(null);
@@ -197,19 +198,6 @@ export default function GlClearanceDetailPage() {
                  {hasRo ? "Replace RO" : "Upload RO"}
                </Button>
              )}
-              {canCompleteBooking && shipmentBooking ? (
-                <Button
-                  color="edr-green"
-                  leftSection={<PackagePlus size={16} />}
-                  onClick={() =>
-                    navigate(
-                      `/dashboard/contracts/${shipmentBooking.contractId}/bookings/${id}/complete`,
-                    )
-                  }
-                >
-                  Create booking
-                </Button>
-              ) : null}
            </Group>
          }
        />
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx
@@ -106,6 +106,18 @@ function statusColor(status: string): string {
    case "ACTIVE_SHIPMENT_IN_PROGRESS":
    case "IN_TRANSIT":
      return "teal";
+    // Payment phase — booking selected / awaiting the customer's payment.
+    case "SELECTED_FOR_BATCH":
+    case "PNR_GENERATED":
+    case "AWAITING_PAYMENT":
+    case "PAYMENT_VERIFICATION_IN_PROGRESS":
+      return "violet";
+    // Terminal rows kept as clearance history.
+    case "EXPIRED":
+      return "orange";
+    case "CANCELLED":
+    case "REJECTED":
+      return "red";
    default:
      return "gray";
  }
--- a/apps/edr-freight-web/backoffice/src/pages/trainBuilder/TrainBuilderDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainBuilder/TrainBuilderDetailPage.tsx
@@ -18,6 +18,8 @@ import {
  CalendarClock,
  MapPin,
  MoreHorizontal,
+  Power,
+  PowerOff,
  Replace,
  Ruler,
  Trash2,
@@ -70,6 +72,7 @@ export default function TrainBuilderDetailPage() {
  const [locoModalOpen, setLocoModalOpen] = useState(false);
  const [yardModalOpen, setYardModalOpen] = useState(false);
  const [disbandOpen, setDisbandOpen] = useState(false);
+  const [deactivateOpen, setDeactivateOpen] = useState(false);

  const compositionQuery = useQuery(
    api.trainBuilder.composition.queryOptions({ input: { id }, enabled: Boolean(id) }),
@@ -81,6 +84,8 @@ export default function TrainBuilderDetailPage() {
  );
  const reorderWagons = useMutation(api.trainBuilder.reorderWagons.mutationOptions());
  const disband = useMutation(api.trainBuilder.disband.mutationOptions());
+  const deactivate = useMutation(api.trainBuilder.deactivate.mutationOptions());
+  const activate = useMutation(api.trainBuilder.activate.mutationOptions());

  const composition = compositionQuery.data;
  const busy =
@@ -172,6 +177,27 @@ export default function TrainBuilderDetailPage() {
              >
                Change yard
              </Menu.Item>
+              {composition.status === "DEACTIVATED" ? (
+                <Menu.Item
+                  leftSection={<Power size={15} />}
+                  onClick={() =>
+                    void withToast(async () => {
+                      await activate.mutateAsync(composition.id);
+                      toast({ title: `Train ${composition.code} reactivated` });
+                    }, "Could not reactivate train")
+                  }
+                >
+                  Reactivate train
+                </Menu.Item>
+              ) : (
+                <Menu.Item
+                  leftSection={<PowerOff size={15} />}
+                  disabled={composition.activeSchedules.length > 0}
+                  onClick={() => setDeactivateOpen(true)}
+                >
+                  Deactivate train
+                </Menu.Item>
+              )}
              <Menu.Item
                color="red"
                leftSection={<Trash2 size={15} />}
@@ -356,6 +382,39 @@ export default function TrainBuilderDetailPage() {
        onClose={() => setYardModalOpen(false)}
      />

+      <Modal
+        opened={deactivateOpen}
+        onClose={() => setDeactivateOpen(false)}
+        title={<Text fw={600}>Deactivate train {composition.code}?</Text>}
+        radius="lg"
+        centered
+      >
+        <Stack gap="md">
+          <Text size="sm" c="dimmed">
+            The train is parked and cannot be picked for new schedules until it is
+            reactivated. Its locomotives and wagons stay coupled.
+          </Text>
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setDeactivateOpen(false)}>
+              Keep active
+            </Button>
+            <Button
+              color="gray"
+              loading={deactivate.isPending}
+              onClick={() =>
+                void withToast(async () => {
+                  await deactivate.mutateAsync(composition.id);
+                  toast({ title: `Train ${composition.code} deactivated` });
+                  setDeactivateOpen(false);
+                }, "Could not deactivate train")
+              }
+            >
+              Deactivate
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
      <Modal
        opened={disbandOpen}
        onClose={() => setDisbandOpen(false)}
--- a/apps/edr-freight-web/backoffice/src/pages/trainBuilder/TrainBuilderListPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainBuilder/TrainBuilderListPage.tsx
@@ -315,6 +315,7 @@ export default function TrainBuilderListPage() {
                  { value: "IN_SERVICE", label: "In service" },
                  { value: "UNDER_MAINTENANCE", label: "Under maintenance" },
                  { value: "OUT_OF_SERVICE", label: "Out of service" },
+                  { value: "DEACTIVATED", label: "Deactivated" },
                ]}
                w={180}
                styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchScheduleDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchScheduleDetailPage.tsx
@@ -66,8 +66,8 @@ import { useToast } from "@/hooks/use-toast";
 import type {
  BatchBoardBookingDetail,
  BatchBoardBookingState,
+  BatchBoardCounts,
  BatchBoardScheduleDetail,
-  BatchWindowGroup,
  BookingAllocationStatus,
 } from "@/types/trainScheduling";

@@ -398,7 +398,7 @@ const BookingTable = memo(function BookingTable({
  );
 });

-function WindowCountChips({ counts }: { counts: BatchWindowGroup["counts"] }) {
+function WindowCountChips({ counts }: { counts: BatchBoardCounts }) {
  const chips: Array<{ value: number; color: string; label: string }> = [
    { value: counts.allocated, color: "edr-green", label: "allocated" },
    { value: counts.selectedForBatch, color: "orange", label: "selected" },
@@ -609,9 +609,7 @@ export default function BatchScheduleDetailPage() {
  const hasAssignedWagons = useMemo(
    () =>
      Boolean(
-        data?.windows.some((w) =>
-          w.bookings.some((b) => b.allocationStatus === "ASSIGNED"),
-        ) ||
+        data?.bookings.some((b) => b.allocationStatus === "ASSIGNED") ||
        data?.pendingContract.bookings.some(
          (b) => b.allocationStatus === "ASSIGNED",
        ),
@@ -619,36 +617,33 @@ export default function BatchScheduleDetailPage() {
    [data],
  );

+  const [activeTab, setActiveTab] = useState<string | null>("overview");
+
  const scheduleDetailQuery = useQuery(
    api.trainScheduling.scheduleDetail.queryOptions({
      input: { id: scheduleId ?? "", freightType: "CONTAINER" },
-      enabled: Boolean(scheduleId),
+      // The heavy composition graph is only rendered by the composition tab and
+      // the overview diagram (which needs assigned wagons) — don't fetch it
+      // until one of them can actually show something.
+      enabled:
+        Boolean(scheduleId) &&
+        (hasAssignedWagons || activeTab === "composition"),
      // Composition data only changes through mutations, which invalidate the
      // whole train-scheduling root — no need to refetch on remounts in between.
      staleTime: 5 * 60_000,
    }),
  );

-  // Every booking on this schedule, flattened across windows + pending-contract,
-  // de-duplicated (a booking only appears once). Feeds the management table.
+  // Every booking on this schedule: in-window + pending-contract (the two
+  // buckets are disjoint). Feeds the management table.
  const allBookings = useMemo(() => {
    if (!data) return [] as BatchBoardBookingDetail[];
-    const merged = [
-      ...data.windows.flatMap((w) => w.bookings),
-      ...data.pendingContract.bookings,
-    ];
-    const byId = new Map<string, BatchBoardBookingDetail>();
-    for (const b of merged) if (!byId.has(b.id)) byId.set(b.id, b);
-    return [...byId.values()];
+    return [...data.bookings, ...data.pendingContract.bookings];
  }, [data]);

-  // All bookings that fall inside the schedule's booking window (every window
-  // cycle, flattened) — the window is one booking day, so these belong to the
-  // single window panel above.
-  const windowBookings = useMemo(
-    () => (data?.windows ?? []).flatMap((w) => w.bookings),
-    [data?.windows],
-  );
+  // Bookings inside the schedule's booking window — they belong to the single
+  // window panel above.
+  const windowBookings = data?.bookings ?? [];

  const windowCounts = useMemo(() => {
    const counts = {
@@ -684,7 +679,6 @@ export default function BatchScheduleDetailPage() {
    [data?.status],
  );

-  const [activeTab, setActiveTab] = useState<string | null>("overview");
  const [adjustConsistOpen, setAdjustConsistOpen] = useState(false);
  const [selectedBookingId, setSelectedBookingId] = useState<string | null>(
    null,
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/IntercityPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/IntercityPage.tsx
@@ -40,16 +40,29 @@ const isWaiting = (r: IntercityRideAlongRow) =>
 const isRiding = (r: IntercityRideAlongRow) => r.status === "IN_TRANSIT";
 const isDone = (r: IntercityRideAlongRow) => r.status === "COMPLETED";

-/** Yards with no equipment can never load/unload — surface it before the train arrives. */
-function FacilityCell({ yard, has }: { yard: string | null; has: boolean | null }) {
+/**
+ * A yard that can't handle THIS booking's cargo can never work it — surface that
+ * while the train is still coming, not when the load is refused. Containers need
+ * a facility with a stacker (Indode, Modjo, Dire Dawa); bulk is handled at all of
+ * them.
+ */
+function FacilityCell({
+  yard,
+  has,
+  freightType,
+}: {
+  yard: string | null;
+  has: boolean | null;
+  freightType: string | null;
+}) {
  if (!yard) return <Text size="sm">—</Text>;
  if (has) return <Text size="sm">{yard}</Text>;
  return (
    <Tooltip
-      label="This yard has no load/unload facility — cargo cannot be handled here"
+      label={`${yard} cannot handle ${(freightType ?? "this").toLowerCase()} cargo — no facility here, or no equipment for it`}
      withArrow
      multiline
-      w={240}
+      w={260}
    >
      <Group gap={4} wrap="nowrap">
        <AlertTriangle size={13} color="var(--mantine-color-red-6)" />
@@ -95,7 +108,7 @@ function Rows({ rows }: { rows: IntercityRideAlongRow[] }) {
              <Table.Td>{r.customer ?? "—"}</Table.Td>
              <Table.Td>
                <Group gap={6} wrap="nowrap">
-                  <FacilityCell yard={r.origin} has={r.originHasFacility} />
+                  <FacilityCell yard={r.origin} has={r.originHasFacility} freightType={r.freightType} />
                  {atOrigin(r) && isWaiting(r) && (
                    <Badge size="xs" color="edr-green" variant="light">
                      train here
@@ -105,7 +118,7 @@ function Rows({ rows }: { rows: IntercityRideAlongRow[] }) {
              </Table.Td>
              <Table.Td>
                <Group gap={6} wrap="nowrap">
-                  <FacilityCell yard={r.destination} has={r.destinationHasFacility} />
+                  <FacilityCell yard={r.destination} has={r.destinationHasFacility} freightType={r.freightType} />
                  {atDestination(r) && isRiding(r) && (
                    <Badge size="xs" color="edr-green" variant="light">
                      train here
@@ -215,7 +228,7 @@ export default function IntercityPage() {
            <Stat icon={<Warehouse size={18} />} label="Completed" value={done.length} />
            <Stat
              icon={<AlertTriangle size={18} />}
-              label="No facility"
+              label="Cannot handle"
              value={blocked.length}
              color={blocked.length > 0 ? "red" : undefined}
            />
@@ -229,8 +242,9 @@ export default function IntercityPage() {
              title={`${blocked.length} booking${blocked.length === 1 ? "" : "s"} cannot be handled`}
              mb="md"
            >
-              Their origin or destination yard has no load/unload facility. Mark the yard as
-              a facility in Configuration → Yards, or the cargo can never be worked there.
+              Their origin or destination yard cannot handle that cargo — no facility, or no
+              equipment for it. Containers need Indode, Modjo or Dire Dawa; bulk is handled at
+              any facility. Adjust the yard in Configuration → Yards.
            </Alert>
          )}

--- a/apps/edr-freight-web/backoffice/src/services/api.ts
+++ b/apps/edr-freight-web/backoffice/src/services/api.ts
@@ -193,6 +193,7 @@ import {
  type ScheduleConsist,
  type TrainComposition,
  type UpdateTrainDetailsPayload,
+  type UsedTrainNumbers,
 } from "./trainBuilder.service";
 import { trainSchedulingService } from "./trainScheduling.service";
 import { wagonTypesService, type WagonType } from "./wagon-types.service";
@@ -1825,6 +1826,14 @@ export const api = {
      ({ id }) => QUERY_KEYS.TRAIN_BUILDER.composition(id),
    ),

+    // Key derives to ["train-builder", "usedTrainNumbers"], so the shared
+    // TRAIN_BUILDER.ROOT invalidation refreshes it after every build/edit.
+    usedTrainNumbers: endpoint<void, UsedTrainNumbers>(
+      "train-builder",
+      "usedTrainNumbers",
+      () => trainBuilderService.usedTrainNumbers().then((r) => r.data),
+    ),
+
    build: endpoint<BuildTrainPayload, TrainComposition>(
      "train-builder",
      "build",
@@ -1902,6 +1911,22 @@ export const api = {
      () => TRAIN_BUILDER_INVALIDATIONS,
    ),

+    deactivate: endpoint<string, TrainComposition>(
+      "train-builder",
+      "deactivate",
+      (id) => trainBuilderService.deactivate(id).then((r) => r.data),
+      undefined,
+      () => TRAIN_BUILDER_INVALIDATIONS,
+    ),
+
+    activate: endpoint<string, TrainComposition>(
+      "train-builder",
+      "activate",
+      (id) => trainBuilderService.activate(id).then((r) => r.data),
+      undefined,
+      () => TRAIN_BUILDER_INVALIDATIONS,
+    ),
+
    disband: endpoint<string, void>(
      "train-builder",
      "disband",
--- a/apps/edr-freight-web/backoffice/src/services/contracts.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/contracts.service.ts
@@ -16,6 +16,9 @@ export interface ContractListFilter {
  tradeDirection?: string;
  contractKind?: string;
  paymentCurrency?: string;
+  /** Created-at range (ISO strings, inclusive). */
+  createdFrom?: string;
+  createdTo?: string;
  /** Server-side free-text search (contract reference, company name). */
  search?: string;
  page?: number;
@@ -139,6 +142,8 @@ function buildListParams(filter?: ContractListFilter) {
    if (filter.tradeDirection) params.tradeDirection = filter.tradeDirection;
    if (filter.contractKind) params.contractKind = filter.contractKind;
    if (filter.paymentCurrency) params.paymentCurrency = filter.paymentCurrency;
+    if (filter.createdFrom) params.createdFrom = filter.createdFrom;
+    if (filter.createdTo) params.createdTo = filter.createdTo;
  }
  return params;
 }
@@ -164,8 +169,11 @@ export const contractsService = {
    };
  },

-  getById: async (id: string): Promise<Freight.IContract> => {
-    const response = await client.get<Freight.IContract>(C.BY_ID(id));
+  getById: async (
+    id: string,
+    opts?: { suppressErrorModal?: boolean },
+  ): Promise<Freight.IContract> => {
+    const response = await client.get<Freight.IContract>(C.BY_ID(id), opts);
    return unwrap(response.data) as Freight.IContract;
  },

@@ -258,8 +266,11 @@ export const contractsService = {
    };
  },

-  getClearance: async (id: string): Promise<Freight.ContractClearanceView> => {
-    const response = await client.get(C.CLEARANCE(id));
+  getClearance: async (
+    id: string,
+    opts?: { suppressErrorModal?: boolean },
+  ): Promise<Freight.ContractClearanceView> => {
+    const response = await client.get(C.CLEARANCE(id), opts);
    return unwrap(response.data) as Freight.ContractClearanceView;
  },

--- a/apps/edr-freight-web/backoffice/src/services/trainBuilder.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/trainBuilder.service.ts
@@ -9,7 +9,8 @@ export type BuiltTrainStatus =
  | "SCHEDULED"
  | "IN_SERVICE"
  | "UNDER_MAINTENANCE"
-  | "OUT_OF_SERVICE";
+  | "OUT_OF_SERVICE"
+  | "DEACTIVATED";

 export interface YardRefLite {
  id: string;
@@ -140,6 +141,12 @@ export interface BuildTrainPayload {
  notes?: string;
 }

+/** Run numbers already claimed by existing (non-deleted) trains. */
+export interface UsedTrainNumbers {
+  importTrainNumbers: string[];
+  exportTrainNumbers: string[];
+}
+
 /** Edit a built train's display identity; omitted fields keep their value. */
 export interface UpdateTrainDetailsPayload {
  /** Empty string clears the name. */
@@ -261,6 +268,8 @@ export const trainBuilderService = {
  list: (filters: BuiltTrainListFilters = {}) =>
    apiClient.get<BuiltTrainListResponse>(`${BASE}${toQuery(filters)}`),
  getComposition: (id: string) => apiClient.get<TrainComposition>(`${BASE}/${id}`),
+  /** Import/export run numbers already claimed by existing trains. */
+  usedTrainNumbers: () => apiClient.get<UsedTrainNumbers>(`${BASE}/used-train-numbers`),
  build: (payload: BuildTrainPayload) => apiClient.post<TrainComposition>(BASE, payload),
  setLocomotives: (id: string, locomotiveIds: string[]) =>
    apiClient.put<TrainComposition>(`${BASE}/${id}/locomotives`, { locomotiveIds }),
@@ -279,6 +288,11 @@ export const trainBuilderService = {
    apiClient.post<TrainComposition>(`${BASE}/${id}/wagons/${wagonId}/maintenance`),
  reorderWagons: (id: string, wagonIds: string[]) =>
    apiClient.post<TrainComposition>(`${BASE}/${id}/reorder-wagons`, { wagonIds }),
+  /** Park the train indefinitely — only allowed with no active schedule. */
+  deactivate: (id: string) =>
+    apiClient.post<TrainComposition>(`${BASE}/${id}/deactivate`),
+  /** Bring a DEACTIVATED train back to AVAILABLE. */
+  activate: (id: string) => apiClient.post<TrainComposition>(`${BASE}/${id}/activate`),
  disband: (id: string) => apiClient.delete<void>(`${BASE}/${id}`),
  /** Built trains schedulable on a route (train-scheduling picker). */
  availableTrains: (routeId: string) =>
--- a/apps/edr-freight-web/backoffice/src/types/booking.ts
+++ b/apps/edr-freight-web/backoffice/src/types/booking.ts
@@ -79,6 +79,8 @@ export interface BookingContainerUnit {
  vgmTons: number;
  isHazardous?: boolean;
  isReefer?: boolean;
+  /** This container ships back empty after unloading (equipment return). */
+  isReturn?: boolean;
  sortOrder?: number;
 }

@@ -231,6 +233,8 @@ export interface BookingListRow {
  id: string;
  reference: string;
  contractReference?: string | null;
+  /** Needed to link the reference to the contract's detail page. */
+  contractId?: string | null;
  customerLabel: string;
  approvalSteps?: BookingApprovalStep[];
  status: BookingStatus;
--- a/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
+++ b/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
@@ -134,7 +134,11 @@ export interface TrainSchedulePreviewResponse {
  deferredBookings?: DeferredBookingRow[];
  summary: {
    totalBookings: number;
+    /** Cargo VGM only — display gross instead. */
    totalWeightTons: number;
+    /** GROSS: cargo + the tare of every wagon in the plan. */
+    grossWeightTons: number;
+    totalTareTons: number;
    wagonType: string;
    wagonsNeeded: number;
    totalLengthMeters: number;
@@ -396,23 +400,18 @@ export interface BatchBoardBookingDetail extends BatchBoardBooking {
  consolidationPartnerRef: string | null;
 }

-export interface BatchWindowGroup {
-  key: string;
-  label: string;
-  /** EAT calendar day as ISO `YYYY-MM-DD` (empty for the pending-contract bucket). */
-  date: string;
-  /** Human label for the day, e.g. `Thu, 05 Jun` (empty for pending-contract). */
-  dateLabel: string;
-  start: string;
-  end: string;
-  counts: {
-    allocated: number;
-    selectedForBatch: number;
-    ready: number;
-    waiting: number;
-    expired: number;
-    pendingContract: number;
-  };
+export interface BatchBoardCounts {
+  allocated: number;
+  selectedForBatch: number;
+  ready: number;
+  waiting: number;
+  expired: number;
+  pendingContract: number;
+}
+
+/** A booking bucket on the detail board (in-window vs pending-contract). */
+export interface BatchBoardBucket {
+  counts: BatchBoardCounts;
  bookings: BatchBoardBookingDetail[];
 }

@@ -439,8 +438,9 @@ export interface BatchBoardScheduleDetail {
  locomotive: BatchBoardSchedule["locomotive"];
  capacity: BatchBoardSchedule["capacity"];
  counts: BatchBoardSchedule["counts"];
-  windows: BatchWindowGroup[];
-  pendingContract: BatchWindowGroup;
+  /** Bookings inside the schedule's booking window (fully-executed contracts). */
+  bookings: BatchBoardBookingDetail[];
+  pendingContract: BatchBoardBucket;
  allocationViolations: string[];
 }

@@ -845,6 +845,8 @@ export interface CompositionUnassignedBooking {
  freightType: FreightType | null;
  priorityScore: number;
  cargoTotalWeightVgm: number;
+  /** GROSS: cargo VGM + tare of every wagon the booking occupies. */
+  grossWeightTons: number;
  status: string | null;
  schedulingStatus: SchedulingStatus | null;
  wagonsRequired: number;