Merge branch 'dev' into freight/nati-2

Conflict in ClearanceDocumentsPage: this branch migrated the page to the pill FilterBar, dev added filters to the Select stack it replaced. Kept the FilterBar and carried dev's additions across as a "Booked by" (customerKind) FilterDef plus the shipping-line search placeholder; dev's startOfDayIso/endOfDayIso went away because dateRangeParams already does that. The Ship icon import is needed by dev's shipping-line customer cell, which merged cleanly on its own.
2026-08-30 11:08:12 +00:00 · 2026-08-17 12:43:35 +00:00
parent 7143ba1040 9eb2dc6649
commit 7aa4405423
117 changed files with 6115 additions and 830 deletions
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
@@ -13,12 +13,14 @@ import {
  MoreHorizontal,
  Package,
  RefreshCw,
+  Ship,
  Truck,
  Wallet,
  Weight,
 } from "lucide-react";
 import {
  ActionIcon,
+  Badge,
  Box,
  Button,
  Center,
@@ -174,7 +176,14 @@ export default function BookingRequestDetailPage() {
  };

  const company = booking.company;
+  const shippingLine = booking.shippingLineCompany ?? null;
  const customerName = toBookingListRow(booking).customerLabel;
+  // What is being shipped, in words: bulk → the commodity (Wheat, Steel…);
+  // containers → the shipper's own description when given.
+  const cargoLabel =
+    booking.freightType === "BULK"
+      ? (booking.cargoType?.label ?? booking.cargoType?.name ?? null)
+      : (booking.cargoFreeText?.trim() || null);

  const amount = Number(booking.totalAmount);
  const containers = booking.bookingContainers ?? [];
@@ -237,10 +246,27 @@ export default function BookingRequestDetailPage() {
        }
        subtitle={
          <Group gap={6} wrap="wrap">
-            <EntityLink
-              to={company?.id ? `/dashboard/customers/${company.id}` : null}
-              label={customerName ?? "—"}
-            />
+            {shippingLine ? (
+              <Group gap={6} wrap="nowrap">
+                <Ship size={14} />
+                <Text size="sm" fw={600}>
+                  {shippingLine.name}
+                </Text>
+                <Badge size="xs" radius="sm" variant="light" color="teal">
+                  Shipping line
+                </Badge>
+              </Group>
+            ) : (
+              <EntityLink
+                to={company?.id ? `/dashboard/customers/${company.id}` : null}
+                label={customerName ?? "—"}
+              />
+            )}
+            {cargoLabel ? (
+              <Text size="sm" c="dimmed">
+                · {cargoLabel}
+              </Text>
+            ) : null}
            <Text size="sm" c="dimmed">
              · Scheduled {booking.scheduledDate}
            </Text>
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
@@ -18,6 +18,7 @@ import {
  Package,
  Plus,
  RefreshCw,
+  Ship,
  User,
 } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
@@ -62,6 +63,12 @@ const BOOKING_KIND_OPTIONS: { value: BookingKind; label: string }[] = [
  { value: "GENERAL_CONTRACT", label: "General booking" },
 ];

+/** Who booked: shipping lines own bookings via `shippingLineCompanyId`, not a customer company. */
+const CUSTOMER_KIND_OPTIONS = [
+  { value: "SHIPPING_LINE", label: "Shipping line" },
+  { value: "CUSTOMER", label: "Customer" },
+];
+
 /** Status options for the filter select — built from the shared status styles. */
 const STATUS_OPTIONS = Object.entries(BOOKING_STATUS_STYLES).map(
  ([value, { label }]) => ({ value, label }),
@@ -132,6 +139,7 @@ export default function BookingRequestsPage() {
  // split), so a deep link can never land behind "More filters" unseen.
  const bookingFilterDefs: FilterDef[] = useMemo(
    () => [
+      { key: "customerKind", label: "Booked by", type: "enum", multiple: false, options: CUSTOMER_KIND_OPTIONS },
      { key: "bookingType", label: "Kind", type: "enum", multiple: false, options: BOOKING_KIND_OPTIONS },
      { key: "statuses", label: "Status", type: "enum", options: STATUS_OPTIONS },
      {
@@ -301,8 +309,17 @@ export default function BookingRequestsPage() {
                </Badge>
              </div>
              <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
-                <User className="size-3 shrink-0 opacity-70" />
+                {b.isShippingLine ? (
+                  <Ship className="size-3 shrink-0 opacity-70" />
+                ) : (
+                  <User className="size-3 shrink-0 opacity-70" />
+                )}
                {b.customerLabel}
+                {b.isShippingLine ? (
+                  <Badge variant="secondary" className="h-4 shrink-0 px-1 text-[9px] font-medium">
+                    Shipping line
+                  </Badge>
+                ) : null}
              </p>
            </div>
          </div>
@@ -483,7 +500,7 @@ export default function BookingRequestsPage() {
                <FilterBar
                  defs={bookingFilterDefs}
                  controls={controls}
-                  searchPlaceholder="Search booking, contract or customer…"
+                  searchPlaceholder="Search booking, contract, customer or shipping line…"
                  viewId="booking-requests"
                />
              </Box>
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ClearanceDocumentsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ClearanceDocumentsPage.tsx
@@ -8,7 +8,7 @@ import {
  ThemeIcon,
 } from "@mantine/core";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { FileText, Inbox, RefreshCw, User } from "lucide-react";
+import { FileText, Inbox, RefreshCw, Ship, User } from "lucide-react";
 import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";

@@ -67,6 +67,12 @@ const OWNERSHIP_OPTIONS = [
  { value: "false", label: "Private" },
 ];

+/** Who booked: shipping lines own bookings via `shippingLineCompanyId`, not a customer company. */
+const CUSTOMER_KIND_OPTIONS = [
+  { value: "SHIPPING_LINE", label: "Shipping line" },
+  { value: "CUSTOMER", label: "Customer" },
+];
+
 export default function ClearanceDocumentsPage() {
  const navigate = useNavigate();
  const { filterOptions } = useMyTradeAccess();
@@ -91,6 +97,7 @@ export default function ClearanceDocumentsPage() {
        options: filterOptions(TRADE_DIRECTION_OPTIONS),
      },
      { key: "freightType", label: "Freight", type: "enum", multiple: false, options: FREIGHT_TYPE_OPTIONS },
+      { key: "customerKind", label: "Booked by", type: "enum", multiple: false, options: CUSTOMER_KIND_OPTIONS },
      { key: "isGovernment", label: "Ownership", type: "enum", multiple: false, options: OWNERSHIP_OPTIONS },
      {
        key: "created",
@@ -131,17 +138,29 @@ export default function ClearanceDocumentsPage() {
        header: () => <span className={bookingTable.headerCell}>Customer</span>,
        cell: ({ row }) => {
          const b = row.original;
-          const customer = b.isGovernment
-            ? (b.governmentInstitution ?? "Government")
-            : (b.company?.name ?? "—");
+          const isShippingLine = Boolean(b.shippingLineCompany ?? b.shippingLineCompanyId);
+          const customer = isShippingLine
+            ? (b.shippingLineCompany?.name ?? "Shipping line")
+            : b.isGovernment
+              ? (b.governmentInstitution ?? "Government")
+              : (b.company?.name ?? "—");
          return (
            <div className="flex items-center gap-3 py-1.5">
              <div className={bookingTable.rowIcon}>
-                <User className="size-4" strokeWidth={1.75} />
+                {isShippingLine ? (
+                  <Ship className="size-4" strokeWidth={1.75} />
+                ) : (
+                  <User className="size-4" strokeWidth={1.75} />
+                )}
              </div>
              <div className="min-w-0">
-                <p className="font-medium text-foreground">
+                <p className="flex items-center gap-1.5 font-medium text-foreground">
                  {customer}
+                  {isShippingLine ? (
+                    <Badge variant="secondary" className="h-4 shrink-0 px-1 text-[9px] font-medium">
+                      Shipping line
+                    </Badge>
+                  ) : null}
                </p>
                <p className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
                  <FileText className="size-3 shrink-0 opacity-70" />
@@ -245,7 +264,7 @@ export default function ClearanceDocumentsPage() {
              <FilterBar
                defs={filterDefs}
                controls={controls}
-                searchPlaceholder="Search booking, contract or customer…"
+                searchPlaceholder="Search booking, contract, customer or shipping line…"
                viewId="clearance-documents"
              />
            </Box>
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceListPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceListPage.tsx
@@ -52,6 +52,47 @@ import {
  summarizeRequestedCargo,
 } from "@/features/clearance/requestedCargo";
 import { contractsService } from "@/services/contracts.service";
+import "./contract-clearance-table.css";
+
+/** Yards carry `label` (API) — older shapes used `name`/`code`. */
+function yardLabel(
+  yard?: { label?: string; code?: string; name?: string } | null,
+): string {
+  if (!yard) return "—";
+  return yard.label ?? yard.name ?? yard.code ?? "—";
+}
+
+/**
+ * "Origin → Destination", wrapping past 120px as "Addis Ababa" /
+ * "→ Djibouti": the arrow is glued to the destination with an nbsp, and
+ * text wraps normally (the table's cells are otherwise nowrap) so a long
+ * lane never spills into the next column.
+ */
+function RouteLabel({
+  origin,
+  destination,
+}: {
+  origin: string;
+  destination: string;
+}) {
+  return (
+    <Text
+      size="sm"
+      maw={120}
+      lh={1.35}
+      style={{ whiteSpace: "normal", overflowWrap: "anywhere" }}
+    >
+      {origin}{" "}
+      <ArrowRight
+        size={13}
+        className="text-muted-foreground"
+        style={{ display: "inline-block", verticalAlign: "-2px" }}
+      />
+      {"\u00A0"}
+      {destination}
+    </Text>
+  );
+}

 function CustomsBadge({ customs }: { customs: boolean }) {
  return customs ? (
@@ -118,8 +159,8 @@ export default function ContractClearanceListPage() {
      id: b.id,
      reference: b.reference,
      customerLabel: b.company?.name ?? b.governmentInstitution ?? "—",
-      originLabel: b.originYard?.name ?? "—",
-      destinationLabel: b.destinationYard?.name ?? "—",
+      originLabel: yardLabel(b.originYard),
+      destinationLabel: yardLabel(b.destinationYard),
      tradeDirection: b.tradeDirection ?? "—",
      freightType: b.freightType ?? "—",
      status: b.status,
@@ -430,11 +471,10 @@ function ShipmentBookingsTable({
        id: "route",
        header: () => <span className={bookingTable.headerCell}>Route</span>,
        cell: ({ row }) => (
-          <Group gap={6} wrap="nowrap">
-            <Text size="sm">{row.original.originLabel}</Text>
-            <ArrowRight size={13} className="shrink-0 text-muted-foreground" />
-            <Text size="sm">{row.original.destinationLabel}</Text>
-          </Group>
+          <RouteLabel
+            origin={row.original.originLabel}
+            destination={row.original.destinationLabel}
+          />
        ),
      },
      {
@@ -600,13 +640,13 @@ function ShipmentBookingsTable({
  }

  return (
-    <Box style={{ overflowX: "auto" }} px="xs" pb="xs">
+    <Box w="100%" miw={0} style={{ overflowX: "auto" }}>
      <DataTable<ShipmentBookingRow, unknown>
        columns={columns}
        data={rows}
        status={loading ? "loading" : error ? "error" : "success"}
        onRowClick={(row) => onOpen(row.id)}
-        containerClassName="border-0 shadow-none bg-transparent [&_th]:max-w-[100px] [&_td]:max-w-[100px] [&_td]:break-words"
+        containerClassName="edr-clearance-table border-0 shadow-none rounded-none bg-transparent"
      />
    </Box>
  );
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx
@@ -45,6 +45,7 @@ import { KpiStrip } from "@/components/page/KpiStrip";
 import { bookingTable } from "@/components/bookings/booking-ui.styles";
 import { useBookingDjClearanceQueue } from "@/hooks/bookings/useBookings";
 import type { BookingDetail } from "@/types/booking";
+import "./contract-clearance-table.css";

 const prettyStatus = (s?: string | null) =>
  (s ?? "")
@@ -214,15 +215,24 @@ function RouteCell({
 }) {
  return (
    <Stack gap={4} py={2}>
-      <Group gap={6} wrap="nowrap">
-        <Text size="sm" fw={500}>
-          {origin}
-        </Text>
-        <ArrowRight size={14} className="shrink-0 text-muted-foreground" />
-        <Text size="sm" fw={500}>
-          {destination}
-        </Text>
-      </Group>
+      {/* Wraps past 120px as "Addis Ababa" / "→ Djibouti"; text wraps
+          normally (cells are otherwise nowrap) so it never spills over. */}
+      <Text
+        size="sm"
+        fw={500}
+        maw={120}
+        lh={1.35}
+        style={{ whiteSpace: "normal", overflowWrap: "anywhere" }}
+      >
+        {origin}{" "}
+        <ArrowRight
+          size={13}
+          className="text-muted-foreground"
+          style={{ display: "inline-block", verticalAlign: "-2px" }}
+        />
+        {"\u00A0"}
+        {destination}
+      </Text>
      <Group gap={8} align="center">
        <DirectionIcon direction={direction} />
        <Badge size="xs" variant="default" radius="sm">
@@ -676,7 +686,7 @@ export default function GlDjiboutiClearanceListPage() {
                ) : null}
              </Stack>
            ) : (
-              <Box style={{ overflowX: "auto" }} px="xs" pb="xs">
+              <Box w="100%" miw={0} style={{ overflowX: "auto" }}>
                <DataTable<ShipmentRow, unknown>
                  columns={shipmentColumns}
                  data={pagedShipmentRows}
@@ -694,7 +704,7 @@ export default function GlDjiboutiClearanceListPage() {
                    manualPagination: true,
                    pageCount,
                  }}
-                  containerClassName="border-0 shadow-none bg-transparent [&_th]:max-w-[100px] [&_td]:max-w-[100px] [&_td]:break-words"
+                  containerClassName="edr-clearance-table border-0 shadow-none rounded-none bg-transparent"
                  footer={DataTableFooter}
                />
              </Box>
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/contract-clearance-table.css
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/contract-clearance-table.css
@@ -0,0 +1,94 @@
+/*
+ * Scoped to .edr-clearance-table — the DataTable container div on the
+ * Document Clearance hubs (GL Ethiopia + GL Djibouti). Mirrors the portal's /bookings table
+ * (bookings-table.css): content-sized columns with a 100px floor, no
+ * truncation, horizontal scroll when the table outgrows the card, sticky
+ * header row and a sticky shadowed action column.
+ */
+.edr-clearance-table {
+  overflow-x: auto;
+  max-width: 100%;
+  min-width: 0;
+}
+
+/*
+ * width: max-content — the table is exactly as wide as its columns' content
+ * needs, never squeezed to fit the viewport; the container scrolls instead.
+ * min-width: 100% keeps it filling the card when content is narrow.
+ */
+.edr-clearance-table table {
+  table-layout: auto;
+  width: max-content;
+  min-width: 100%;
+}
+
+/* 100px floor, no ceiling: cells grow to fit their text, nothing is clipped. */
+.edr-clearance-table th,
+.edr-clearance-table td:not([colspan]) {
+  min-width: 100px;
+  max-width: none;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+/*
+ * Mantine Badge caps itself at max-width: 100%; inside an auto-layout table
+ * cell that resolves against min-content and clips the label. Let badges size
+ * to their text so the column grows to fit them.
+ */
+.edr-clearance-table .mantine-Badge-root {
+  max-width: none;
+}
+
+/*
+ * Mantine Group's preventGrowOverflow caps every child at 100%/N of the cell.
+ * In an auto-width table cell that resolves against min-content and collapses
+ * the badges/text in the Type, Route and Status columns to nothing. Let group
+ * children size to their content; the column grows and the container scrolls.
+ */
+.edr-clearance-table .mantine-Group-root > * {
+  max-width: none;
+  flex-shrink: 0;
+}
+
+/* Sticky header row. */
+.edr-clearance-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+/*
+ * Sticky action column, shrunk to its content. The width overrides the inline
+ * width DataTable stamps from tanstack's column size — hence !important.
+ * `:not([colspan])` keeps the full-width error/empty rows out.
+ */
+.edr-clearance-table th:last-child,
+.edr-clearance-table td:last-child:not([colspan]) {
+  width: 1% !important;
+  min-width: 0;
+  position: sticky;
+  right: 0;
+  box-shadow: -12px 0 16px -6px rgba(16, 32, 47, 0.3);
+}
+
+/*
+ * Sticky cells sit above the scrolling ones, so they need their own opaque
+ * background or the columns underneath show through.
+ */
+.edr-clearance-table td:last-child:not([colspan]) {
+  background: #f5f8fb;
+  z-index: 2;
+}
+
+/* Row hover uses the tailwind `hover:bg-accent` class on the <tr>. */
+.edr-clearance-table tbody tr:hover td:last-child:not([colspan]) {
+  background: var(--accent, #f4fbf8);
+}
+
+/* Header cell is sticky on both axes — it must outrank the body's sticky column. */
+.edr-clearance-table th:last-child {
+  background: #f4f7fa;
+  z-index: 3;
+}
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/config/resources.ts
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/config/resources.ts
@@ -353,6 +353,10 @@ export const FLEET_RESOURCES: FleetResourceConfig[] = [
      { id: "importTrainNumber", header: "Import train no.", accessorKey: "importTrainNumber", format: "code" },
      { id: "currentYard", header: "Current Yard", accessorKey: "currentYard", format: "entityLabel" },
      { id: "status", header: "Status", accessorKey: "status", format: "statusBadge" },
+      // From the status-flip log: last time the wagon went to maintenance, and
+      // last time it became available again (dash = never logged).
+      { id: "lastMaintenanceAt", header: "Last to maintenance", accessorKey: "lastMaintenanceAt", format: "date" },
+      { id: "lastAvailableAt", header: "Available since", accessorKey: "lastAvailableAt", format: "date" },
    ],
    formFields: [
      // Run numbers are optional — a wagon sits in the fleet unassigned to any
--- a/apps/edr-freight-web/backoffice/src/pages/invoices/FinanceHubPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/invoices/FinanceHubPage.tsx
@@ -1,5 +1,5 @@
 import { Tabs } from "@mantine/core";
-import { Landmark, Receipt, Wallet } from "lucide-react";
+import { Landmark, Receipt } from "lucide-react";
 import { useSearchParams } from "react-router-dom";

 import { useAuth } from "@/auth/useAuth";
@@ -8,13 +8,15 @@ import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";

 import InvoicesPanel from "./InvoicesPage";
 import UsdPaymentsPanel from "./UsdPaymentsPage";
-import PaymentsPanel from "../payments/PaymentsPage";

 /**
- * Invoices, Payments, and USD Payments used to be three separate routes/pages
- * with near-identical chrome. They're merged here as URL-linkable tabs
- * (`?tab=`) on one page — each tab keeps the permission it was individually
- * gated on before, and just doesn't render if the user lacks it.
+ * Invoices and USD Payments used to be separate routes/pages with
+ * near-identical chrome. They're merged here as URL-linkable tabs (`?tab=`)
+ * on one page — each tab keeps the permission it was individually gated on
+ * before, and just doesn't render if the user lacks it.
+ *
+ * The Payments tab was removed; its summary (total collected, ETB/USD) now
+ * lives as a card at the top of the Invoices tab instead.
 */
 const TABS = [
  {
@@ -27,21 +29,13 @@ const TABS = [
    Panel: InvoicesPanel,
  },
  {
-    key: "payments",
-    label: "Payments",
-    icon: Wallet,
-    permission: FREIGHT_PERMS.payments.view,
-    subtitle: "View and reconcile booking payment transactions.",
-    Panel: PaymentsPanel,
-  },
-  {
-    key: "usd-payments",
-    label: "USD Payments",
+    key: "manual-payments",
+    label: "Manual Payments",
    icon: Landmark,
    // Same gate as Invoices, not a dedicated key — mirrors the old route.
    permission: FREIGHT_PERMS.invoices.view,
    subtitle:
-      "USD invoices are paid by bank transfer. Upload the customer's slip and confirm the payment before the pay window closes.",
+      "Import and export invoices in USD or ETB that Finance settles by hand (bank transfer or counter). Upload the customer's slip and confirm the payment before the pay window closes.",
    Panel: UsdPaymentsPanel,
  },
 ] as const;
--- a/apps/edr-freight-web/backoffice/src/pages/invoices/InvoiceDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/invoices/InvoiceDetailPage.tsx
@@ -8,16 +8,18 @@ import {
  Grid,
  Group,
  Loader,
+  Menu,
  SimpleGrid,
  Stack,
  Table,
  Text,
 } from "@mantine/core";
 import { useQuery } from "@tanstack/react-query";
-import { ArrowLeft, Building2, Download, FileText } from "lucide-react";
+import { ArrowLeft, Building2, Download, FileText, Printer } from "lucide-react";
 import { useAuth } from "@/auth/useAuth";
 import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
 import { EimsFilingCard } from "@/components/invoices/EimsFilingCard";
+import { useToast } from "@/hooks/use-toast";
 import { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";

@@ -77,9 +79,31 @@ function InfoField({
  );
 }

-/** Billed-to company, with its contact/registration details as quick-info rows. */
+/**
+ * Billed-to party: a customer company, or — for shipping-line credit invoices
+ * (`companyId` null) — the shipping line itself. The two payers are mutually
+ * exclusive (DB-enforced), so exactly one branch has data.
+ */
 function RecipientCard({ invoice }: { invoice: Invoice }) {
  const company = invoice.company;
+  const shippingLine = invoice.shippingLineCompany;
+
+  if (!company && shippingLine) {
+    const rows: FieldRowProps[] = [
+      { label: "Phone", value: shippingLine.phoneNumber },
+      { label: "Email", value: shippingLine.email },
+    ];
+    return (
+      <LinkedEntityCard
+        icon={Building2}
+        title="Billed to"
+        name={shippingLine.name}
+        rows={rows}
+        emptyMessage="No additional shipping line details available."
+      />
+    );
+  }
+
  const rows: FieldRowProps[] = [
    { label: "Profile", value: invoice.companyProfile?.reference },
    { label: "TIN", value: company?.tin },
@@ -91,7 +115,7 @@ function RecipientCard({ invoice }: { invoice: Invoice }) {
  return (
    <LinkedEntityCard
      icon={Building2}
-      title="Recipient"
+      title="Billed to"
      name={company?.name ?? "Unnamed company"}
      to={invoice.companyId ? `/dashboard/customers/${invoice.companyId}` : null}
      rows={rows}
@@ -145,6 +169,7 @@ export default function InvoiceDetailPage() {
  const canExport = hasPermission(user, FREIGHT_PERMS.invoices.export);
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
+  const { toast } = useToast();
  const [downloading, setDownloading] = useState(false);

  const { data: invoice, isLoading } = useQuery(
@@ -154,12 +179,27 @@ export default function InvoiceDetailPage() {
    }),
  );

-  const downloadDocument = async () => {
+  const downloadDocument = async (format?: "a4" | "thermal") => {
    if (!id) return;
    setDownloading(true);
    try {
-      const { data } = await invoicesService.downloadDocument(id);
-      openPdfBlob(data, `${invoice?.invoiceNumber ?? "invoice"}.pdf`);
+      const { data } = await invoicesService.downloadDocument(id, format);
+      const suffix = format === "thermal" ? "-thermal" : "";
+      openPdfBlob(data, `${invoice?.invoiceNumber ?? "invoice"}${suffix}.pdf`);
+    } catch (error) {
+      // Thermal rendering deliberately fails loudly rather than silently returning an A4-shaped,
+      // QR-less document (see PdfRenderService's `noFallback`) — surface that here rather than
+      // let it become a silent unhandled rejection with just a spinner stopping.
+      toast({
+        title: format === "thermal" ? "Could not generate the thermal invoice" : "Could not download the invoice",
+        description:
+          format === "thermal"
+            ? "Thermal rendering requires Chromium on the server. The A4 PDF is still available."
+            : error instanceof Error
+              ? error.message
+              : undefined,
+        variant: "destructive",
+      });
    } finally {
      setDownloading(false);
    }
@@ -202,17 +242,34 @@ export default function InvoiceDetailPage() {
        subtitle={humanize(invoice.source)}
        meta={<InvoiceStatusBadge status={invoice.status} />}
        action={
-          <ActionIcon
-            variant="default"
-            size="lg"
-            radius="md"
-            aria-label="Download invoice"
-            disabled={!canExport}
-            loading={downloading}
-            onClick={() => void downloadDocument()}
-          >
-            <Download size={16} />
-          </ActionIcon>
+          <Menu position="bottom-end" withinPortal>
+            <Menu.Target>
+              <ActionIcon
+                variant="default"
+                size="lg"
+                radius="md"
+                aria-label="Download invoice"
+                disabled={!canExport}
+                loading={downloading}
+              >
+                <Download size={16} />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Item
+                leftSection={<Download size={14} />}
+                onClick={() => void downloadDocument("a4")}
+              >
+                Download PDF (A4)
+              </Menu.Item>
+              <Menu.Item
+                leftSection={<Printer size={14} />}
+                onClick={() => void downloadDocument("thermal")}
+              >
+                Download thermal invoice (80mm)
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
        }
      />

--- a/apps/edr-freight-web/backoffice/src/pages/invoices/InvoicesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/invoices/InvoicesPage.tsx
@@ -11,7 +11,14 @@ import {
 } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useQuery } from "@tanstack/react-query";
-import { RefreshCw, Search, X } from "lucide-react";
+import {
+  Banknote,
+  CircleDollarSign,
+  Landmark,
+  RefreshCw,
+  Search,
+  X,
+} from "lucide-react";
 import { useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";

@@ -21,7 +28,9 @@ import {
  formatMoney,
  humanize,
 } from "@/components/customers";
+import { KpiStrip } from "@/components/page";
 import CreditInvoiceActions from "@/components/shipping-lines/CreditInvoiceActions";
+import { useExchangeSettingsQuery } from "@/hooks/useExchangeSettings";
 import { api } from "@/services/api";
 import type { Invoice } from "@/types/invoice";
 import {
@@ -79,6 +88,21 @@ export default function InvoicesPanel() {
    [pendingActions],
  );

+  // Summary card: total collected (paidAmount) across every invoice matching
+  // the current search/status filters, not just the visible page.
+  const { data: summary, isLoading: summaryLoading } = useQuery(
+    api.invoices.collectedSummary.queryOptions({
+      input: {
+        filter: { search: debouncedQuery, status: statusFilter || undefined },
+      },
+    }),
+  );
+  const { data: exchangeSettings } = useExchangeSettingsQuery();
+  const etbCollected = summary?.ETB ?? 0;
+  const usdCollected = summary?.USD ?? 0;
+  const rate = exchangeSettings?.feed?.rate ?? exchangeSettings?.fallbackRate;
+  const etbFromUsd = rate ? usdCollected * rate : null;
+
  const columns: ColumnDef<Invoice>[] = useMemo(
    () => [
      {
@@ -95,7 +119,9 @@ export default function InvoicesPanel() {
        header: "Billed to",
        cell: ({ row }) => (
          <Text size="sm" c="edr-text" truncate maw={200}>
-            {row.original.company?.name ?? "—"}
+            {row.original.company?.name ??
+              row.original.shippingLineCompany?.name ??
+              "—"}
          </Text>
        ),
      },
@@ -170,7 +196,33 @@ export default function InvoicesPanel() {
  );

  return (
-    <Card p={0}>
+    <Stack gap="md">
+      <KpiStrip
+        loading={summaryLoading}
+        items={[
+          {
+            label: "Total collected",
+            hint: etbFromUsd !== null ? "ETB + USD" : "ETB only",
+            value: formatMoney(etbCollected + (etbFromUsd ?? 0), "ETB"),
+            icon: CircleDollarSign,
+            color: "edr-green",
+          },
+          {
+            label: "Collected in ETB",
+            value: formatMoney(etbCollected, "ETB"),
+            icon: Banknote,
+            color: "blue",
+          },
+          {
+            label: "Collected in USD",
+            value: formatMoney(usdCollected, "USD"),
+            icon: Landmark,
+            color: "violet",
+          },
+        ]}
+      />
+
+      <Card p={0}>
      <Stack gap={0}>
        <Box px="md" pt="md" pb="sm" w="100%">
          <Group justify="space-between" gap="md" wrap="wrap">
@@ -264,6 +316,7 @@ export default function InvoicesPanel() {
          </Box>
        </Box>
      </Stack>
-    </Card>
+      </Card>
+    </Stack>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/pages/invoices/UsdPaymentsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/invoices/UsdPaymentsPage.tsx
@@ -11,6 +11,7 @@ import {
  Stack,
  Text,
  TextInput,
+  Tooltip,
 } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -55,14 +56,19 @@ function formatRemaining(deadlineMs: number, now: number): string | null {
    : `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
 }

-function PayWindowCell({ deadline }: { deadline: string | null }) {
+/** Ticks once a second while a deadline is set, so window state updates live. */
+function useNow(deadline: string | null): number {
  const [now, setNow] = useState(() => Date.now());
-
  useEffect(() => {
    if (!deadline) return;
    const interval = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(interval);
  }, [deadline]);
+  return now;
+}
+
+function PayWindowCell({ deadline }: { deadline: string | null }) {
+  const now = useNow(deadline);

  if (!deadline) {
    return (
@@ -88,13 +94,56 @@ function PayWindowCell({ deadline }: { deadline: string | null }) {
  );
 }

-/** True once the pay window has closed — the API refuses confirmation then. */
-function windowClosed(row: OfflineUsdInvoice): boolean {
-  const deadline = row.booking?.paymentDeadline;
-  return Boolean(deadline && new Date(deadline).getTime() <= Date.now());
+/**
+ * "Confirm paid" for one row. Booking invoices are only confirmable while the
+ * booking's pay window is open (the API refuses otherwise): no window yet →
+ * no button; window closed → button disabled with the reason, and it flips
+ * live the second the countdown hits zero. Non-booking invoices (warehouse,
+ * clearance…) have no window and stay confirmable.
+ */
+function ConfirmCell({
+  row,
+  onConfirm,
+}: {
+  row: OfflineUsdInvoice;
+  onConfirm: (row: OfflineUsdInvoice) => void;
+}) {
+  const deadline = row.booking?.paymentDeadline ?? null;
+  const now = useNow(deadline);
+
+  if (row.booking && !deadline) return null;
+  const closed = Boolean(deadline && new Date(deadline).getTime() <= now);
+
+  return (
+    <Tooltip
+      label="Pay window closed — the booking can no longer be confirmed as paid."
+      disabled={!closed}
+      withArrow
+    >
+      <span>
+        <Button
+          size="compact-sm"
+          color="edr-green"
+          leftSection={<CheckCircle2 size={14} />}
+          disabled={closed}
+          onClick={(e) => {
+            e.stopPropagation();
+            onConfirm(row);
+          }}
+        >
+          Confirm paid
+        </Button>
+      </span>
+    </Tooltip>
+  );
 }

-/** USD Payments tab body of `FinanceHubPage` — page chrome lives in the parent. */
+/**
+ * Manual Payments tab body of `FinanceHubPage` — page chrome lives in the
+ * parent. Lists open USD and ETB invoices (import and export alike) that
+ * Finance settles by hand; confirming records the payment the same way an
+ * online payment would, so the booking advances identically.
+ */
 export default function UsdPaymentsPanel() {
  const navigate = useNavigate();
  const { pagination, setPagination } = usePagination({ pageSize: 10 });
@@ -103,6 +152,7 @@ export default function UsdPaymentsPanel() {
  const [statusFilter, setStatusFilter] = useState<"" | Freight.InvoiceStatus>(
    "",
  );
+  const [currency, setCurrency] = useState<"" | "USD" | "ETB">("");
  const [confirming, setConfirming] = useState<OfflineUsdInvoice | null>(null);
  const [slip, setSlip] = useState<File | null>(null);
  const [reference, setReference] = useState("");
@@ -119,8 +169,15 @@ export default function UsdPaymentsPanel() {
      pageSize: pagination.pageSize,
      search: debouncedQuery,
      status: statusFilter || undefined,
+      currency: currency || undefined,
    }),
-    [pagination.pageIndex, pagination.pageSize, debouncedQuery, statusFilter],
+    [
+      pagination.pageIndex,
+      pagination.pageSize,
+      debouncedQuery,
+      statusFilter,
+      currency,
+    ],
  );

  const { data, isLoading, isError, refetch, isFetching } = useQuery(
@@ -170,7 +227,9 @@ export default function UsdPaymentsPanel() {
        header: "Customer",
        cell: ({ row }) => (
          <Text size="sm" c="edr-text" truncate maw={200}>
-            {row.original.company?.name ?? "—"}
+            {row.original.company?.name ??
+              row.original.shippingLineCompany?.name ??
+              "—"}
          </Text>
        ),
      },
@@ -179,6 +238,28 @@ export default function UsdPaymentsPanel() {
        header: "Booking",
        cell: ({ row }) => {
          const booking = row.original.booking;
+          const bookings = row.original.bookings ?? [];
+          if (!booking && bookings.length) {
+            // Shipping-line credit invoice: one link per billed booking.
+            return (
+              <Group gap={4} wrap="wrap" maw={280}>
+                {bookings.map((b) => (
+                  <Button
+                    key={b.id}
+                    variant="subtle"
+                    size="compact-xs"
+                    rightSection={<ExternalLink size={11} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      navigate(`/dashboard/booking-requests/${b.id}`);
+                    }}
+                  >
+                    {b.reference}
+                  </Button>
+                ))}
+              </Group>
+            );
+          }
          if (!booking) {
            return (
              <Text size="sm" c="dimmed">
@@ -187,20 +268,41 @@ export default function UsdPaymentsPanel() {
            );
          }
          return (
-            <Button
-              variant="subtle"
-              size="compact-sm"
-              rightSection={<ExternalLink size={13} />}
-              onClick={(e) => {
-                e.stopPropagation();
-                navigate(`/dashboard/booking-requests/${booking.id}`);
-              }}
-            >
-              {booking.reference}
-            </Button>
+            <Group gap={6} wrap="nowrap">
+              <Button
+                variant="subtle"
+                size="compact-sm"
+                rightSection={<ExternalLink size={13} />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigate(`/dashboard/booking-requests/${booking.id}`);
+                }}
+              >
+                {booking.reference}
+              </Button>
+              {booking.tradeDirection && (
+                <Badge size="xs" variant="light" radius="sm" color="gray">
+                  {humanize(booking.tradeDirection)}
+                </Badge>
+              )}
+            </Group>
          );
        },
      },
+      {
+        id: "currency",
+        header: "Currency",
+        cell: ({ row }) => (
+          <Badge
+            size="sm"
+            variant="light"
+            radius="sm"
+            color={row.original.currency?.toUpperCase() === "USD" ? "blue" : "teal"}
+          >
+            {row.original.currency}
+          </Badge>
+        ),
+      },
      {
        id: "status",
        header: "Status",
@@ -239,22 +341,8 @@ export default function UsdPaymentsPanel() {
        header: "",
        meta: { headerClassName: "text-right", cellClassName: "text-right" },
        cell: ({ row }) => {
-          const paid = row.original.status === "PAID";
-          if (paid || !canConfirm) return null;
-          return (
-            <Button
-              size="compact-sm"
-              color="edr-green"
-              leftSection={<CheckCircle2 size={14} />}
-              disabled={windowClosed(row.original)}
-              onClick={(e) => {
-                e.stopPropagation();
-                setConfirming(row.original);
-              }}
-            >
-              Confirm paid
-            </Button>
-          );
+          if (row.original.status === "PAID" || !canConfirm) return null;
+          return <ConfirmCell row={row.original} onConfirm={setConfirming} />;
        },
      },
    ],
@@ -288,6 +376,20 @@ export default function UsdPaymentsPanel() {
                style={{ flex: 1, minWidth: "240px" }}
                radius="lg"
              />
+              <SegmentedControl
+                size="sm"
+                radius="md"
+                value={currency || "all"}
+                onChange={(v) => {
+                  setCurrency(v === "all" ? "" : (v as "USD" | "ETB"));
+                  setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+                }}
+                data={[
+                  { label: "All", value: "all" },
+                  { label: "ETB", value: "ETB" },
+                  { label: "USD", value: "USD" },
+                ]}
+              />
              <SegmentedControl
                size="sm"
                radius="md"
@@ -318,7 +420,7 @@ export default function UsdPaymentsPanel() {
          </Box>

          <Box style={{ overflowX: "auto" }} w="100%">
-            <Box miw={1040}>
+            <Box miw={1160}>
              <DataTable
                columns={columns}
                data={rows}
@@ -326,13 +428,13 @@ export default function UsdPaymentsPanel() {
                onRowClick={(row) => navigate(`/dashboard/invoices/${row.id}`)}
                emptyMessage={
                  debouncedQuery
-                    ? "No USD invoices match your search."
-                    : "No USD invoices awaiting confirmation."
+                    ? "No invoices match your search."
+                    : "No invoices awaiting manual payment confirmation."
                }
                error={
                  isError
                    ? {
-                        message: "Failed to load USD invoices.",
+                        message: "Failed to load invoices.",
                        onRetry: () => void refetch(),
                      }
                    : undefined
@@ -361,7 +463,7 @@ export default function UsdPaymentsPanel() {
        opened={confirming !== null}
        onClose={closeConfirm}
        title={
-          <Text fw={700}>Confirm bank transfer payment</Text>
+          <Text fw={700}>Confirm manual payment</Text>
        }
        radius="md"
        size="md"
@@ -371,20 +473,21 @@ export default function UsdPaymentsPanel() {
            <Text size="sm" c="dimmed">
              Confirming settles {confirming.invoiceNumber} in full (
              {formatMoney(confirming.balanceAmount, confirming.currency)}) and
-              marks the booking as paid. Upload the customer&apos;s bank slip
-              first — this cannot be undone.
+              marks the booking as paid — exactly as if the customer had paid
+              online. Upload the customer&apos;s bank slip or receipt first —
+              this cannot be undone.
            </Text>

            <PhasedFileDropzone
-              label="Bank payment slip"
-              description="PDF or image of the customer's transfer slip."
+              label="Payment slip / receipt"
+              description="PDF or image of the customer's bank transfer slip or payment receipt."
              value={slip}
              onChange={setSlip}
            />

            <TextInput
-              label="Bank reference"
-              description="Optional — the transfer reference from the slip."
+              label="Payment reference"
+              description="Optional — the transfer or receipt reference from the slip."
              placeholder="e.g. FT24091234567"
              value={reference}
              onChange={(e) => setReference(e.target.value)}
--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx
@@ -580,14 +580,10 @@ const RuleEngineResourcePage = () => {
              config={config}
              layout="row"
              readOnly={!canUpdateControls}
-              onEdit={
-                config.slug === "container-types"
-                  ? undefined
-                  : (record) => {
-                      setEditing(record);
-                      setFormOpen(true);
-                    }
-              }
+              onEdit={(record) => {
+                setEditing(record);
+                setFormOpen(true);
+              }}
              onDelete={setDeleteTarget}
              onViewChain={
                config.slug === "approval-rules"
@@ -958,9 +954,7 @@ const RuleEngineResourcePage = () => {
              totalCount={totalCount}
              onPaginationChange={setPagination}
              readOnly={!canUpdate && !canDelete}
-              onEdit={
-                canUpdate && config.slug !== "container-types" ? openEdit : undefined
-              }
+              onEdit={canUpdate ? openEdit : undefined}
              onDelete={canDelete ? setDeleteTarget : undefined}
              onViewChain={
                config.slug === "approval-rules"
--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
+++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
@@ -187,7 +187,7 @@ const RATE_TRIGGERS = [
  { label: "Shipping line mapped", value: "SHIPPING_LINE" },
  { label: "Penalty", value: "CONSOLIDATION" },
  { label: "Lashing (bulk, per cargo type)", value: "LASHING" },
-  { label: "Cancellation", value: "CANCELLATION" },
+  { label: "Cancellation (per wagon, per direction + cargo type)", value: "CANCELLATION" },
  { label: "Shipping line extra fee (PIL)", value: "PIL_EXTRA_FEE" },
  { label: "Customs clearance service fee (billed with the booking)", value: "CUSTOMS_CLEARANCE" },
  { label: "Fuel (per lane + cargo type)", value: "FUEL" },
@@ -265,6 +265,13 @@ const isRouteScopedRate = (values: Record<string, unknown>) =>
  (String(values.appliesTo ?? "") === "OTHER" &&
    ["CUSTOMS_CLEARANCE", "WITH_RETURN", "FUEL"].includes(String(values.trigger ?? "")));

+/**
+ * Surcharges sold per cargo kind: the admin says container or bulk, then names
+ * the container type or bulk commodity the fee covers.
+ */
+const isCargoKindTrigger = (values: Record<string, unknown>) =>
+  ["CUSTOMS_CLEARANCE", "CANCELLATION"].includes(String(values.trigger ?? ""));
+
 const unitOption = (value: string) => ({ label: value.replace(/_/g, " "), value });

 /**
@@ -304,7 +311,8 @@ const unitsForShape = (
        // Container-only service — per returned container, per wagon, or flat.
        return ["PER_CONTAINER", "PER_WAGON", "FLAT"];
      case "CANCELLATION":
-        return ["FLAT", "PER_INVOICE"];
+        // Wagon cancellation fee — scales with the cancelled wagons only.
+        return ["PER_WAGON"];
      case "CUSTOMS_CLEARANCE":
        // Per cargo kind: container fees per box/wagon, bulk per ton/wagon.
        return cargoKind === "BULK"
@@ -1054,9 +1062,10 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
        showIf: (v) =>
          hasShippingLine(v) && v.shippingLineRateKind === "SURCHARGE",
      },
-      // ── Trade direction — Bulk & Container base freight, plus the route-
-      // scoped surcharges (customs clearance; empty-container return, which is
-      // import-only for now so export is not offered) ────────────────────────
+      // ── Trade direction — Bulk & Container base freight, plus the directed
+      // surcharges (customs clearance, cancellation, lashing, fuel; empty-
+      // container return, which is import-only for now so export is not
+      // offered) ─────────────────────────────────────────────────────────────
      {
        name: "tradeDirection",
        label: "Trade direction",
@@ -1074,9 +1083,13 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
          !isShippingLineRate(v) &&
          (["BULK", "CONTAINER"].includes(String(v.appliesTo ?? "")) ||
            (String(v.appliesTo ?? "") === "OTHER" &&
-              ["CUSTOMS_CLEARANCE", "WITH_RETURN", "LASHING", "FUEL"].includes(
-                String(v.trigger ?? ""),
-              ))),
+              [
+                "CUSTOMS_CLEARANCE",
+                "CANCELLATION",
+                "WITH_RETURN",
+                "LASHING",
+                "FUEL",
+              ].includes(String(v.trigger ?? "")))),
      },
      // Shipping lines only ever ship import — the export leg is sold through
      // the customer's contract — so the direction is stated, not asked. Shown
@@ -1097,8 +1110,9 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
        computeValue: () => "IMPORT",
        showIf: hasShippingLine,
      },
-      // ── Cargo kind — customs clearance is priced separately for containers
-      // (one rate per container type) and bulk ───────────────────────────────
+      // ── Cargo kind — customs clearance and the cancellation fee are priced
+      // separately for containers (one rate per container type) and bulk (one
+      // rate per commodity) ──────────────────────────────────────────────────
      {
        name: "cargoKind",
        label: "Cargo kind",
@@ -1107,11 +1121,10 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
        options: INTERCITY_KINDS,
        placeholder: "Is this fee for containers or bulk?",
        description:
-          "Container fees bill per box or wagon (one rate per container type); bulk fees bill per ton or wagon.",
-        showIf: (v) =>
-          v.appliesTo === "OTHER" && v.trigger === "CUSTOMS_CLEARANCE",
+          "Container fees are set per container type; bulk fees per commodity. Customs: container per box or wagon, bulk per ton or wagon. Cancellation: per wagon.",
+        showIf: (v) => v.appliesTo === "OTHER" && isCargoKindTrigger(v),
        // Not a stored column: a container fee carries its containerTypeId, a
-        // bulk fee carries none.
+        // bulk fee its cargoTypeId.
        getInitialValue: (record) =>
          record.containerTypeId ? "CONTAINER" : "BULK",
      },
@@ -1124,10 +1137,10 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
        placeholder: "Which container type this fee covers",
        showIf: (v) =>
          v.appliesTo === "OTHER" &&
-          v.trigger === "CUSTOMS_CLEARANCE" &&
+          isCargoKindTrigger(v) &&
          v.cargoKind === "CONTAINER",
      },
-      // ── Bulk cargo type — the bulk customs fee names its commodity ────────
+      // ── Bulk cargo type — the bulk fee names its commodity ────────────────
      {
        name: "cargoTypeId",
        label: "Bulk cargo type",
@@ -1136,7 +1149,7 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
        placeholder: "Which bulk commodity this fee covers",
        showIf: (v) =>
          v.appliesTo === "OTHER" &&
-          v.trigger === "CUSTOMS_CLEARANCE" &&
+          isCargoKindTrigger(v) &&
          v.cargoKind === "BULK",
      },
      // ── Cargo type — a fuel rate names the commodity it covers (different
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleTrackPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleTrackPage.tsx
@@ -10,6 +10,7 @@ import {
  MapPin,
  Navigation,
  PackageCheck,
+  Pencil,
  Train,
 } from "lucide-react";
 import {
@@ -29,9 +30,10 @@ import {
 } from "@mantine/core";

 import { PageContainer } from "@/components/page";
+import { CheckpointTimeModal } from "@/components/trainScheduling/CheckpointTimeModal";
 import { LogPassYardWorkModal } from "@/components/trainScheduling/LogPassYardWorkModal";
 import { RouteCorridorTrack } from "@/components/trainScheduling/RouteCorridorTrack";
-import type { TrackStation } from "@/types/trainScheduling";
+import type { TrackStation, TrainCheckpoint } from "@/types/trainScheduling";
 import {
  RouteCorridor,
  StatusPill,
@@ -156,6 +158,16 @@ export default function TrainScheduleTrackPage() {
  const recordCheckpoint = useMutation(
    api.trainScheduling.recordCheckpoint.mutationOptions(),
  );
+  const updateCheckpoint = useMutation(
+    api.trainScheduling.updateCheckpoint.mutationOptions(),
+  );
+  // Time-entry dialogs: logging a pass at a yard with no work (the yard-work
+  // modal carries its own picker), and correcting an already-logged leg.
+  const [logModal, setLogModal] = useState<{
+    station: TrackStation;
+    isFinal: boolean;
+  } | null>(null);
+  const [editModal, setEditModal] = useState<TrainCheckpoint | null>(null);
  // Yard work drives the log-pass modal: which bookings board/alight per stop.
  const yardWorkQuery = useQuery(
    api.trainScheduling.yardWork.queryOptions({
@@ -241,15 +253,30 @@ export default function TrainScheduleTrackPage() {

  const handleLog = (sequenceNo: number) => {
    const station = track.stations.find((s) => s.sequenceNo === sequenceNo);
+    if (!station) return;
    const isFinal = sequenceNo === track.stations[totalStations - 1]?.sequenceNo;
-    if (station && stationHasWork(station)) {
+    if (stationHasWork(station)) {
      setYardModal({ station, isFinal, alreadyLogged: false });
      return;
    }
+    setLogModal({ station, isFinal });
+  };
+
+  const submitLog = (values: { occurredAt: string; note: string }) => {
+    if (!logModal) return;
+    const { station, isFinal } = logModal;
    recordCheckpoint.mutate(
-      { id: scheduleId, payload: { sequenceNo } },
+      {
+        id: scheduleId,
+        payload: {
+          sequenceNo: station.sequenceNo,
+          occurredAt: values.occurredAt,
+          ...(values.note ? { note: values.note } : {}),
+        },
+      },
      {
        onSuccess: () => {
+          setLogModal(null);
          toast({
            title: isFinal
              ? "Train arrived — assets freed, moved to destination yard"
@@ -266,6 +293,32 @@ export default function TrainScheduleTrackPage() {
    );
  };

+  const submitEdit = (values: { occurredAt: string; note: string }) => {
+    if (!editModal) return;
+    updateCheckpoint.mutate(
+      {
+        id: scheduleId,
+        sequenceNo: editModal.sequenceNo,
+        payload: { occurredAt: values.occurredAt, note: values.note || null },
+      },
+      {
+        onSuccess: () => {
+          setEditModal(null);
+          toast({ title: "Checkpoint updated" });
+        },
+        onError: (err) =>
+          toast({
+            title: "Could not update checkpoint",
+            description: parseError(err, "Please try again"),
+            variant: "destructive",
+          }),
+      },
+    );
+  };
+  // Legs stay correctable for as long as the journey exists — while rolling
+  // and after arrival.
+  const canEdit = track.status === "DISPATCHED" || track.status === "ARRIVED";
+
  // "Forgot to load" catch: while the train sits at the current station, any
  // boarder there that is still unloaded can be loaded until the next pass.
  const currentStationObj = track.stations.find(
@@ -502,6 +555,7 @@ export default function TrainScheduleTrackPage() {
                : null
            }
            onLogCheckpoint={handleLog}
+            onEditCheckpoint={canEdit ? setEditModal : undefined}
          />

          {/* Cargo the operator forgot: boarders at the CURRENT station stay
@@ -595,24 +649,38 @@ export default function TrainScheduleTrackPage() {
                  )
                }
                title={
-                  <Group gap="sm">
-                    <Text fw={700} size="sm">
-                      {cp.label ?? `Station ${cp.sequenceNo}`}
-                    </Text>
-                    <Badge
-                      size="xs"
-                      radius="sm"
-                      variant="light"
-                      color={
-                        cp.kind === "ARRIVED"
-                          ? "teal"
-                          : cp.kind === "DEPARTED"
-                            ? "blue"
-                            : "edr-green"
-                      }
-                    >
-                      {cp.kind}
-                    </Badge>
+                  <Group gap="sm" justify="space-between" wrap="nowrap">
+                    <Group gap="sm">
+                      <Text fw={700} size="sm">
+                        {cp.label ?? `Station ${cp.sequenceNo}`}
+                      </Text>
+                      <Badge
+                        size="xs"
+                        radius="sm"
+                        variant="light"
+                        color={
+                          cp.kind === "ARRIVED"
+                            ? "teal"
+                            : cp.kind === "DEPARTED"
+                              ? "blue"
+                              : "edr-green"
+                        }
+                      >
+                        {cp.kind}
+                      </Badge>
+                    </Group>
+                    {canEdit ? (
+                      <Button
+                        size="compact-xs"
+                        radius="md"
+                        variant="light"
+                        color="gray"
+                        leftSection={<Pencil size={12} />}
+                        onClick={() => setEditModal(cp)}
+                      >
+                        Edit
+                      </Button>
+                    ) : null}
                  </Group>
                }
              >
@@ -630,6 +698,39 @@ export default function TrainScheduleTrackPage() {
        )}
      </Paper>

+      <CheckpointTimeModal
+        opened={logModal !== null}
+        onClose={() => setLogModal(null)}
+        title={
+          logModal?.isFinal
+            ? `Mark arrived at ${logModal.station.label}`
+            : `Log pass at ${logModal?.station.label ?? "station"}`
+        }
+        icon={logModal?.isFinal ? <Flag size={18} /> : <MapPin size={18} />}
+        description={
+          logModal?.isFinal
+            ? "Marks the train arrived: remaining bookings arrive, assets are freed."
+            : undefined
+        }
+        submitLabel={logModal?.isFinal ? "Mark arrived" : "Log pass"}
+        submitColor={logModal?.isFinal ? "teal" : "edr-green"}
+        loading={recordCheckpoint.isPending}
+        onSubmit={submitLog}
+      />
+
+      <CheckpointTimeModal
+        opened={editModal !== null}
+        onClose={() => setEditModal(null)}
+        title={`Edit ${editModal?.label ?? "checkpoint"}`}
+        icon={<Pencil size={18} />}
+        description="Corrects this leg's time and note only — nothing else changes."
+        initialOccurredAt={editModal?.occurredAt}
+        initialNote={editModal?.note}
+        submitLabel="Save"
+        loading={updateCheckpoint.isPending}
+        onSubmit={submitEdit}
+      />
+
      <LogPassYardWorkModal
        opened={yardModal !== null}
        onClose={() => setYardModal(null)}
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2DetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2DetailPage.tsx
@@ -34,6 +34,7 @@ import {
  Navigation,
  Package,
  PackageCheck,
+  Grid3x3,
  Route as RouteIcon,
  Ruler,
  Send,
@@ -41,6 +42,7 @@ import {
  Weight,
  Workflow as WorkflowIcon,
 } from "lucide-react";
+import { DateTimePicker } from "@mantine/dates";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link, useParams } from "react-router-dom";

@@ -57,6 +59,7 @@ import { ContainerPlacementGrid } from "@/components/trainScheduling/ContainerPl
 import { FleetAvailabilitySummary } from "@/components/trainScheduling/FleetAvailabilitySummary";
 import { IntercityRideAlongPanel } from "@/components/trainScheduling/IntercityRideAlongPanel";
 import { LegCapacityPanel } from "@/components/trainScheduling/LegCapacityPanel";
+import { LegLoadBoardPanel } from "@/components/trainScheduling/LegLoadBoardPanel";
 import { LoadEmptyContainersModal } from "@/components/trainScheduling/LoadEmptyContainersModal";
 import MergeScheduleTrainModal from "@/components/trainScheduling/MergeScheduleTrainModal";
 import ScheduleHistoryPanel from "@/components/trainScheduling/ScheduleHistoryPanel";
@@ -125,6 +128,13 @@ export default function TrainScheduleV2DetailPage() {
  const [gatepassFileUrl, setGatepassFileUrl] = useState("");
  const [gatepassNotes, setGatepassNotes] = useState("");
  const [dispatchConfirmOpen, setDispatchConfirmOpen] = useState(false);
+  // Actual departure — staff often dispatch on paper first and record it later,
+  // so the time is picked (defaults to now when the dialog opens).
+  const [dispatchAt, setDispatchAt] = useState<Date | null>(null);
+  const openDispatchConfirm = () => {
+    setDispatchAt(new Date());
+    setDispatchConfirmOpen(true);
+  };
  const [switchTarget, setSwitchTarget] = useState<EligibleContainerBooking | null>(null);
  const [visualization3DOpen, setVisualization3DOpen] = useState(false);
  const [loadEmptiesOpen, setLoadEmptiesOpen] = useState(false);
@@ -477,7 +487,10 @@ export default function TrainScheduleV2DetailPage() {
  const runDispatch = async () => {
    setDispatchConfirmOpen(false);
    try {
-      await dispatch.mutateAsync(scheduleId);
+      await dispatch.mutateAsync({
+        id: scheduleId,
+        payload: dispatchAt ? { actualDepartureAt: dispatchAt.toISOString() } : {},
+      });
      await openMarshallingDocument({
        title: "Train dispatched",
        successDescription: "Marshalling document generated for the dispatched train.",
@@ -873,7 +886,7 @@ export default function TrainScheduleV2DetailPage() {
              radius="md"
              leftSection={<Send size={18} />}
              loading={dispatch.isPending}
-              onClick={() => setDispatchConfirmOpen(true)}
+              onClick={openDispatchConfirm}
            >
              Dispatch train
            </Button>
@@ -1271,6 +1284,9 @@ export default function TrainScheduleV2DetailPage() {
          <Tabs.Tab value="legs" leftSection={<RouteIcon size={16} />}>
            Leg capacity
          </Tabs.Tab>
+          <Tabs.Tab value="leg-board" leftSection={<Grid3x3 size={16} />}>
+            Leg board
+          </Tabs.Tab>
          <Tabs.Tab value="history" leftSection={<HistoryIcon size={16} />}>
            History
          </Tabs.Tab>
@@ -1359,6 +1375,13 @@ export default function TrainScheduleV2DetailPage() {
          <LegCapacityPanel schedule={schedule} />
        </Tabs.Panel>

+        <Tabs.Panel value="leg-board">
+          <LegLoadBoardPanel
+            schedule={schedule}
+            onChanged={() => void detailQuery.refetch()}
+          />
+        </Tabs.Panel>
+
        <Tabs.Panel value="history">
          {scheduleId ? <ScheduleHistoryPanel scheduleId={scheduleId} /> : null}
        </Tabs.Panel>
@@ -1444,6 +1467,17 @@ export default function TrainScheduleV2DetailPage() {
            undone.
          </Text>

+          <DateTimePicker
+            label="Actual departure"
+            description="When the train left — defaults to now; a past time is fine."
+            value={dispatchAt}
+            onChange={(v) => setDispatchAt(v ? new Date(v) : null)}
+            maxDate={new Date()}
+            valueFormat="DD MMM YYYY HH:mm"
+            clearable={false}
+            radius="md"
+          />
+
          {hasDispatchWarnings ? (
            <Alert
              color="orange"
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2ListPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2ListPage.tsx
@@ -18,6 +18,7 @@ import {
  TextInput,
  ThemeIcon,
 } from "@mantine/core";
+import { DateTimePicker } from "@mantine/dates";
 import { useDebouncedValue } from "@mantine/hooks";
 import { isAxiosError } from "axios";
 import {
@@ -134,6 +135,8 @@ export default function TrainScheduleV2ListPage() {
  // confirmation.
  const [dispatchTarget, setDispatchTarget] =
    useState<TrainScheduleListItem | null>(null);
+  // Actual departure — defaults to now when the dialog opens; past is fine.
+  const [dispatchAt, setDispatchAt] = useState<Date | null>(null);
  // Cancelling is likewise irreversible — confirmed before the mutation fires.
  const [cancelTarget, setCancelTarget] =
    useState<TrainScheduleListItem | null>(null);
@@ -362,6 +365,7 @@ export default function TrainScheduleV2ListPage() {
                  {row.original.direction}
                </Badge>
              ) : null}
+              <ShippingLineBadge schedule={row.original} />
            </Group>
            <Box maw={220}>
              <RouteCorridor
@@ -507,7 +511,10 @@ export default function TrainScheduleV2ListPage() {
                  {canDispatch && schedule.status === "SCHEDULED" ? (
                    <Menu.Item
                      leftSection={<Play size={15} />}
-                      onClick={() => setDispatchTarget(schedule)}
+                      onClick={() => {
+                        setDispatchAt(new Date());
+                        setDispatchTarget(schedule);
+                      }}
                    >
                      Start (dispatch) train
                    </Menu.Item>
@@ -742,7 +749,11 @@ export default function TrainScheduleV2ListPage() {
              onRowClick={(schedule) =>
                navigate(`/dashboard/operations/train-scheduling-v2/${schedule.id}`)
              }
-              rowStyle={(schedule) => directionRowStyle(schedule.direction)}
+              rowStyle={(schedule) =>
+                schedule.shippingLineCompanyId
+                  ? SHIPPING_LINE_ROW_STYLE
+                  : directionRowStyle(schedule.direction)
+              }
              error={
                schedulesQuery.isError
                  ? {
@@ -954,6 +965,16 @@ export default function TrainScheduleV2ListPage() {
            wagons or cargo not yet marked loaded — those warnings are shown
            there, not here.
          </Text>
+          <DateTimePicker
+            label="Actual departure"
+            description="When the train left — defaults to now; a past time is fine."
+            value={dispatchAt}
+            onChange={(v) => setDispatchAt(v ? new Date(v) : null)}
+            maxDate={new Date()}
+            valueFormat="DD MMM YYYY HH:mm"
+            clearable={false}
+            radius="md"
+          />
          <Group justify="flex-end" gap="sm">
            <Button variant="default" onClick={() => setDispatchTarget(null)}>
              Cancel
@@ -965,7 +986,12 @@ export default function TrainScheduleV2ListPage() {
              onClick={async () => {
                if (!dispatchTarget) return;
                try {
-                  await dispatchSchedule.mutateAsync(dispatchTarget.id);
+                  await dispatchSchedule.mutateAsync({
+                    id: dispatchTarget.id,
+                    payload: dispatchAt
+                      ? { actualDepartureAt: dispatchAt.toISOString() }
+                      : {},
+                  });
                  toast({ title: "Train dispatched" });
                  setDispatchTarget(null);
                  void schedulesQuery.refetch();
@@ -1052,6 +1078,20 @@ export default function TrainScheduleV2ListPage() {
 * bookings that have not paid yet — that space is claimed, so it is not
 * bookable.
 */
+/** Green tint for departures dedicated to a shipping line (overrides direction tint). */
+const SHIPPING_LINE_ROW_STYLE = {
+  backgroundColor: "var(--mantine-color-edr-green-0)",
+} as const;
+
+function ShippingLineBadge({ schedule }: { schedule: TrainScheduleListItem }) {
+  if (!schedule.shippingLineCompanyId) return null;
+  return (
+    <Badge size="xs" variant="light" color="edr-green">
+      {schedule.shippingLineCompanyName ?? "Shipping line"}
+    </Badge>
+  );
+}
+
 function WagonChips({ schedule }: { schedule: TrainScheduleListItem }) {
  // Pre-deploy API rows carry only wagonCount; fall back so the chip still
  // renders rather than reading 0 used on every train.
@@ -1133,6 +1173,7 @@ function ScheduleCard({
      withBorder
      onClick={onOpen}
      className="cursor-pointer overflow-hidden transition-[transform,border-color] duration-150 hover:-translate-y-0.5 hover:border-edr-primary!"
+      style={schedule.shippingLineCompanyId ? SHIPPING_LINE_ROW_STYLE : undefined}
    >
      <Stack gap="sm" p="md">
        <Group justify="space-between" align="flex-start" wrap="nowrap">
@@ -1182,6 +1223,7 @@ function ScheduleCard({
                {schedule.direction}
              </Badge>
            ) : null}
+            <ShippingLineBadge schedule={schedule} />
          </Group>
          <Group gap={6} wrap="nowrap">
            <MetricChip value={schedule.bookingsCount} label="bkg" />
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/ContainerReturnsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/ContainerReturnsPage.tsx
@@ -961,6 +961,7 @@ interface StandaloneReturnModalProps {

 function StandaloneReturnModal({ opened, onClose, onSubmit, loading }: StandaloneReturnModalProps) {
  const [containerNumber, setContainerNumber] = useState<string>("");
+  const [containerSize, setContainerSize] = useState<EmptyContainerSize | null>(null);
  const [returnedBy, setReturnedBy] = useState<"EDR" | "CUSTOMER" | null>(null);
  const [returnDate, setReturnDate] = useState<string>(new Date().toISOString().split("T")[0]);
  const [warehouse, setWarehouse] = useState<string | null>(null);
@@ -1021,6 +1022,7 @@ function StandaloneReturnModal({ opened, onClose, onSubmit, loading }: Standalon
          containers: [
            {
              containerNumber,
+              containerSize: containerSize ?? undefined,
              returnDate,
              warehouse: selectedWarehouse?.name || warehouse,
              yard: selectedYard?.name,
@@ -1034,6 +1036,7 @@ function StandaloneReturnModal({ opened, onClose, onSubmit, loading }: Standalon
    });

    setContainerNumber("");
+    setContainerSize(null);
    setReturnedBy(null);
    setReturnDate(new Date().toISOString().split("T")[0]);
    setWarehouse(null);
@@ -1071,6 +1074,17 @@ function StandaloneReturnModal({ opened, onClose, onSubmit, loading }: Standalon
          required
        />

+        <Select
+          label="Container Type"
+          placeholder="Select container size"
+          value={containerSize}
+          onChange={(val) => setContainerSize(val as EmptyContainerSize | null)}
+          data={[
+            { value: "20", label: "20 ft" },
+            { value: "40", label: "40 ft" },
+          ]}
+        />
+
        <Select
          label="Return Warehouse"
          placeholder="Select warehouse for container return"