Merge branch 'dev' into freight/nati-2

2026-09-09 05:58:18 +00:00 · 2026-08-05 13:27:10 +00:00
parent 8476a6a00e 3c89c04727
commit 4f08b370e1
29 changed files with 709 additions and 35 deletions
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -115,6 +115,7 @@ import TrainScheduleV2DetailPage from "./pages/trainScheduling/TrainScheduleV2De
 import TrainScheduleTrackPage from "./pages/trainScheduling/TrainScheduleTrackPage";
 import TrainSchedulingGlobalRulesPage from "./pages/trainScheduling/TrainSchedulingGlobalRulesPage";
 import TradeAccessPage from "./pages/configuration/TradeAccessPage";
+import ExchangeRateSettingsCard from "./pages/settings/ExchangeRateSettingsCard";
 import ContractValidityPeriodsPage from "./pages/configuration/ContractValidityPeriodsPage";
 import FirstMilePage from "./pages/operations/FirstMilePage";
 import LastMilePage from "./pages/operations/LastMilePage";
@@ -597,6 +598,11 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
            href: "/dashboard/configuration/trade-access",
            permission: FREIGHT_PERMS.admin,
          },
+          {
+            label: "Exchange rate",
+            href: "/dashboard/configuration/exchange-rate",
+            permission: FREIGHT_PERMS.admin,
+          },
        ],
      },
      {
@@ -1628,6 +1634,16 @@ const App = () => {
            </RequirePermission>
          }
        />
+        <Route
+          path="configuration/exchange-rate"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.admin}>
+              <div className="p-4">
+                <ExchangeRateSettingsCard />
+              </div>
+            </RequirePermission>
+          }
+        />
        {/* <Route
          path="configuration/contract-validity-periods"
          element={
--- a/apps/edr-freight-web/backoffice/src/components/customers/badges.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/customers/badges.tsx
@@ -249,6 +249,7 @@ const INVOICE_STATUS_COLOR: Record<Freight.InvoiceStatus, string> = {
  DRAFT: "gray",
  ISSUED: "cyan",
  PENDING: "yellow",
+  PAYMENT_PROCESSING: "indigo",
  PARTIALLY_PAID: "orange",
  PAID: "edr-green",
  OVERDUE: "red",
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx
@@ -14,6 +14,7 @@ import { openPdfBlob } from './pdf';
 const INVOICE_STATUS_COLOR: Record<WarehouseInvoiceStatus, string> = {
  DRAFT: 'gray',
  ISSUED: 'orange',
+  PAYMENT_PROCESSING: 'indigo',
  PARTIALLY_PAID: 'yellow',
  PAID: 'edr-green',
  CANCELLED: 'gray',
--- a/apps/edr-freight-web/backoffice/src/pages/SettingsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/SettingsPage.tsx
@@ -33,7 +33,6 @@ import {
  AlertDialogTitle,
 } from "@/shared/common/ui/alert-dialog";
 import { toast } from "sonner";
-import ExchangeRateSettingsCard from "./settings/ExchangeRateSettingsCard";

 export default function SettingsPage() {
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
@@ -78,8 +77,6 @@ export default function SettingsPage() {

  return (
    <div className="p-6 space-y-6">
-      <ExchangeRateSettingsCard />
-
      <Card className="shadow-lg border-gray-200 dark:border-gray-700">
        <CardHeader>
          <CardTitle className="text-xl font-semibold">
--- a/apps/edr-freight-web/backoffice/src/pages/invoices/InvoicesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/invoices/InvoicesPage.tsx
@@ -183,6 +183,7 @@ export default function InvoicesPage() {
                data={[
                  { label: "All", value: "all" },
                  { label: "Pending", value: "PENDING" },
+                  { label: "Payment processing", value: "PAYMENT_PROCESSING" },
                  { label: "Paid", value: "PAID" },
                  { label: "Overdue", value: "OVERDUE" },
                ]}
--- a/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx
@@ -79,6 +79,7 @@ const INVOICE_STATUS_META: Record<string, { label: string; color: string }> = {
  PAID: { label: "Paid", color: "green" },
  PARTIALLY_PAID: { label: "Partially Paid", color: "teal" },
  PENDING: { label: "Pending", color: "yellow" },
+  PAYMENT_PROCESSING: { label: "Payment Processing", color: "indigo" },
  UNPAID: { label: "Unpaid", color: "yellow" },
  OPEN: { label: "Open", color: "yellow" },
  ISSUED: { label: "Issued", color: "blue" },
--- a/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
@@ -86,6 +86,7 @@ const INVOICE_STATUS_META: Record<string, { label: string; color: string }> = {
  PAID: { label: "Paid", color: "green" },
  PARTIALLY_PAID: { label: "Partially Paid", color: "teal" },
  PENDING: { label: "Pending", color: "yellow" },
+  PAYMENT_PROCESSING: { label: "Payment Processing", color: "indigo" },
  UNPAID: { label: "Unpaid", color: "yellow" },
  OPEN: { label: "Open", color: "yellow" },
  ISSUED: { label: "Issued", color: "blue" },
--- a/apps/edr-freight-web/backoffice/src/pages/reports/reportConfigs.ts
+++ b/apps/edr-freight-web/backoffice/src/pages/reports/reportConfigs.ts
@@ -75,6 +75,7 @@ const CONTRACT_STATUSES = [
 const INVOICE_STATUSES = [
  "ISSUED",
  "PENDING",
+  "PAYMENT_PROCESSING",
  "PARTIALLY_PAID",
  "PAID",
  "OVERDUE",
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInvoicesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInvoicesPage.tsx
@@ -42,6 +42,7 @@ import { extractErrorMessage } from '@/components/warehouses/options';
 const STATUS_COLOR: Record<WarehouseInvoiceStatus, string> = {
  DRAFT: 'gray',
  ISSUED: 'orange',
+  PAYMENT_PROCESSING: 'indigo',
  PARTIALLY_PAID: 'yellow',
  PAID: 'edr-green',
  CANCELLED: 'gray',
--- a/apps/edr-freight-web/backoffice/src/types/warehouse.ts
+++ b/apps/edr-freight-web/backoffice/src/types/warehouse.ts
@@ -907,6 +907,7 @@ export interface AllocationCriteria {
 export const WAREHOUSE_INVOICE_STATUSES = [
  'DRAFT',
  'ISSUED',
+  'PAYMENT_PROCESSING',
  'PARTIALLY_PAID',
  'PAID',
  'CANCELLED',
--- a/apps/edr-freight-web/portal/src/constants/URLS.ts
+++ b/apps/edr-freight-web/portal/src/constants/URLS.ts
@@ -194,6 +194,8 @@ export const URL_CONSTANTS = {
  PAYMENTS: {
    INITIATE: "/api/payments/initiate",
    INTENT: (bookingId: string) => `/api/payments/intents/${bookingId}`,
+    REDIRECT_SUCCESS: (bookingId: string) =>
+      `/api/payments/redirect-success/${bookingId}`,
    CHECKOUT: "/api/payments/checkout",
  },

--- a/apps/edr-freight-web/portal/src/pages/billing/invoice-ui.tsx
+++ b/apps/edr-freight-web/portal/src/pages/billing/invoice-ui.tsx
@@ -21,6 +21,7 @@ const STATUS_STYLE: Record<
  [Freight.InvoiceStatus.Draft]: { label: "Draft", bg: "#EEF2F6", fg: "#64748B" },
  [Freight.InvoiceStatus.Issued]: { label: "Due", bg: "#FEF3E2", fg: "#B45309" },
  [Freight.InvoiceStatus.Pending]: { label: "Due", bg: "#FEF3E2", fg: "#B45309" },
+  [Freight.InvoiceStatus.PaymentProcessing]: { label: "Payment processing", bg: "#EAF1FB", fg: "#2563EB" },
  [Freight.InvoiceStatus.PartiallyPaid]: { label: "Partially paid", bg: "#FEF9E7", fg: "#A16207" },
  [Freight.InvoiceStatus.Paid]: { label: "Paid", bg: "#E6F7EF", fg: "#0A6F4D" },
  [Freight.InvoiceStatus.Overdue]: { label: "Overdue", bg: "#FDECEC", fg: "#C0392B" },
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingClearanceWorkflowBanner.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingClearanceWorkflowBanner.tsx
@@ -41,6 +41,7 @@ const INVOICE_STATUS_LABELS: Record<string, string> = {
  DRAFT: "Draft",
  ISSUED: "Issued",
  PENDING: "Due",
+  PAYMENT_PROCESSING: "Payment processing",
  PARTIALLY_PAID: "Partially paid",
  PAID: "Paid",
  OVERDUE: "Overdue",
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/ReadonlyBookingView.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/ReadonlyBookingView.tsx
@@ -1,5 +1,12 @@
 import { Group, Tabs } from "@mantine/core";
-import { Clock, CreditCard, FileText, LayoutGrid, Truck } from "lucide-react";
+import {
+  Clock,
+  CreditCard,
+  FileText,
+  LayoutGrid,
+  Package,
+  Truck,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";

 import { useFileViewer } from "@/hooks/useFileViewer";
@@ -9,6 +16,7 @@ import { ApproveDeliveryButton } from "../delivery/ApproveDeliveryButton";
 import { ActivityCard } from "./components/ActivityCard";
 import { ClearanceCard } from "./components/ClearanceCard";
 import { BookingClearanceWorkflowBanner } from "@/pages/bookings/BookingClearanceWorkflowBanner";
+import { CargoTab } from "./components/CargoTab";
 import { DocumentsTab } from "./components/DocumentsTab";
 import { CompanyInfoCard } from "./components/CompanyInfoCard";
 import { ContainersCard } from "./components/ContainersCard";
@@ -199,6 +207,9 @@ export function ReadonlyBookingView({
          <Tabs.Tab value="overview" leftSection={<LayoutGrid size={15} />}>
            Overview
          </Tabs.Tab>
+          <Tabs.Tab value="cargo" leftSection={<Package size={15} />}>
+            Cargo
+          </Tabs.Tab>
          <Tabs.Tab value="logistics" leftSection={<Truck size={15} />}>
            Logistics
          </Tabs.Tab>
@@ -254,6 +265,10 @@ export function ReadonlyBookingView({
          </div>
        </Tabs.Panel>

+        <Tabs.Panel value="cargo">
+          <CargoTab booking={booking} />
+        </Tabs.Panel>
+
        <Tabs.Panel value="logistics">
          <div className="flex flex-col gap-6">
            <BodyGrid
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/CargoTab.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/CargoTab.tsx
@@ -0,0 +1,465 @@
+import { Box, Group, SimpleGrid, Table, Text } from "@mantine/core";
+import {
+  AlertTriangle,
+  Box as BoxIcon,
+  Container,
+  Flame,
+  Package,
+  Scale,
+  Snowflake,
+  Undo2,
+} from "lucide-react";
+import type { ReactNode } from "react";
+
+import type {
+  BookingContainerLineDetail,
+  BookingContainerUnitDetail,
+  BookingDetail,
+} from "../booking-detail-types";
+import {
+  commodityLabel,
+  fmtDate,
+  fmtWeight,
+  shippingLineLabel,
+  totalVgmTons,
+} from "../utils";
+import { CardTitle, SectionCard } from "./layout";
+
+// ─── Shared bits ──────────────────────────────────────────────────────────────
+
+function Flag({
+  icon,
+  label,
+  tone = "grey",
+}: {
+  icon: ReactNode;
+  label: string;
+  tone?: "grey" | "amber" | "blue" | "green";
+}) {
+  const palette = {
+    grey: { bg: "#F1F4F7", color: "#475569" },
+    amber: { bg: "#FFFBEB", color: "#92400E" },
+    blue: { bg: "#EAF1FE", color: "#1E40AF" },
+    green: { bg: "#E8F5EF", color: "#0A6F4D" },
+  }[tone];
+  return (
+    <Group
+      component="span"
+      gap={4}
+      align="center"
+      wrap="nowrap"
+      style={{
+        display: "inline-flex",
+        borderRadius: 999,
+        backgroundColor: palette.bg,
+        padding: "3px 9px",
+        fontSize: 11,
+        fontWeight: 700,
+        color: palette.color,
+      }}
+    >
+      {icon}
+      {label}
+    </Group>
+  );
+}
+
+function StatTile({
+  icon,
+  label,
+  value,
+  sub,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: string;
+  sub?: string;
+}) {
+  return (
+    <Box
+      p={14}
+      style={{
+        borderRadius: 12,
+        border: "1px solid #E6ECF2",
+        backgroundColor: "#FAFCFE",
+      }}
+    >
+      <Group gap={6} align="center" mb={6} c="#6B7C8E">
+        {icon}
+        <Text fz="11px" fw={700} tt="uppercase" style={{ letterSpacing: "0.05em" }}>
+          {label}
+        </Text>
+      </Group>
+      <Text fz={18} fw={800} c="#10202F" truncate>
+        {value}
+      </Text>
+      {sub && (
+        <Text fz={12} c="#9AA8B5" mt={2}>
+          {sub}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+function DetailRow({ label, value }: { label: string; value: ReactNode }) {
+  return (
+    <Group justify="space-between" align="baseline" py={11} wrap="nowrap" style={{ borderBottom: "1px solid #F2F5F8" }}>
+      <Text fz={12.5} fw={600} c="#9AA8B5" style={{ flexShrink: 0 }}>
+        {label}
+      </Text>
+      <Text fz={13.5} fw={700} c="#10202F" ta="right">
+        {value}
+      </Text>
+    </Group>
+  );
+}
+
+const th = { color: "#9AA8B5", fontSize: 11 } as const;
+
+// ─── Containers ───────────────────────────────────────────────────────────────
+
+function lineTypeLabel(line: BookingContainerLineDetail): string {
+  const t = line.containerType;
+  if (t?.label) return t.label;
+  if (t?.sizeFt) return `${t.sizeFt}ft${t.isReefer ? " Reefer" : ""} container`;
+  return t?.code ?? "Container";
+}
+
+function UnitRow({ unit }: { unit: BookingContainerUnitDetail }) {
+  return (
+    <Table.Tr>
+      <Table.Td>
+        <Text fz={13} fw={700} c="#10202F" style={{ fontFamily: "monospace" }}>
+          {unit.containerNumber}
+        </Text>
+      </Table.Td>
+      <Table.Td>
+        <Text fz={13} c="#475569">
+          {unit.sealNumber || "—"}
+        </Text>
+      </Table.Td>
+      <Table.Td>
+        <Text fz={13} c="#475569">
+          {Number(unit.vgmTons || 0) ? fmtWeight(Number(unit.vgmTons)) : "—"}
+        </Text>
+      </Table.Td>
+      <Table.Td>
+        <Group gap={4} wrap="wrap">
+          {unit.isHazardous && (
+            <Flag tone="amber" icon={<AlertTriangle size={11} />} label="Hazardous" />
+          )}
+          {unit.isReefer && (
+            <Flag tone="blue" icon={<Snowflake size={11} />} label="Reefer" />
+          )}
+          {unit.isReturn && <Flag icon={<Undo2 size={11} />} label="Return" />}
+          {!unit.isHazardous && !unit.isReefer && !unit.isReturn && (
+            <Text fz={12} c="#9AA8B5">
+              —
+            </Text>
+          )}
+        </Group>
+      </Table.Td>
+      <Table.Td>
+        <Text fz={13} c="#475569">
+          {unit.grnNumber || "—"}
+        </Text>
+      </Table.Td>
+      <Table.Td>
+        {unit.receivedToPort ? (
+          <Box>
+            <Text fz={12.5} fw={700} c="#0A6F4D">
+              Received
+            </Text>
+            {unit.receivedAt && (
+              <Text fz={11.5} c="#9AA8B5">
+                {fmtDate(unit.receivedAt)}
+              </Text>
+            )}
+          </Box>
+        ) : (
+          <Text fz={12.5} fw={600} c="#9AA8B5">
+            Pending
+          </Text>
+        )}
+      </Table.Td>
+    </Table.Tr>
+  );
+}
+
+function ContainerLineCard({ line, index }: { line: BookingContainerLineDetail; index: number }) {
+  const units = line.units ?? [];
+  return (
+    <SectionCard>
+      <Group justify="space-between" align="flex-start" mb={4} wrap="wrap">
+        <Group gap={10} align="center">
+          <Box
+            style={{
+              width: 36,
+              height: 36,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: 10,
+              backgroundColor: "#E8F5EF",
+              color: "#0A6F4D",
+            }}
+          >
+            <Container size={18} />
+          </Box>
+          <Box>
+            <Text fz={15} fw={800} c="#10202F">
+              {lineTypeLabel(line)}
+            </Text>
+            <Text fz={12} c="#9AA8B5">
+              Line {index + 1} · {line.quantity} unit{line.quantity !== 1 ? "s" : ""}
+            </Text>
+          </Box>
+        </Group>
+        <Group gap={4} wrap="wrap" justify="flex-end">
+          {line.isOverweight && (
+            <Flag
+              tone="amber"
+              icon={<AlertTriangle size={11} />}
+              label={
+                Number(line.overweightExcessTons || 0)
+                  ? `Overweight +${Number(line.overweightExcessTons)} t`
+                  : "Overweight"
+              }
+            />
+          )}
+          {!!line.hazardousQuantity && (
+            <Flag tone="amber" icon={<Flame size={11} />} label={`${line.hazardousQuantity} hazardous`} />
+          )}
+          {!!line.reeferQuantity && (
+            <Flag tone="blue" icon={<Snowflake size={11} />} label={`${line.reeferQuantity} reefer`} />
+          )}
+          {!!line.returnQuantity && (
+            <Flag icon={<Undo2 size={11} />} label={`${line.returnQuantity} return`} />
+          )}
+        </Group>
+      </Group>
+
+      <SimpleGrid cols={{ base: 1, sm: 3 }} spacing={10} my="md">
+        <StatTile
+          icon={<BoxIcon size={13} />}
+          label="Quantity"
+          value={`${line.quantity}`}
+          sub={`container${line.quantity !== 1 ? "s" : ""}`}
+        />
+        <StatTile
+          icon={<Scale size={13} />}
+          label="VGM / unit"
+          value={fmtWeight(Number(line.vgmPerUnitTons || 0))}
+        />
+        <StatTile
+          icon={<Scale size={13} />}
+          label="Line total VGM"
+          value={fmtWeight(Number(line.totalVgmTons || 0))}
+        />
+      </SimpleGrid>
+
+      {units.length > 0 && (
+        <Box style={{ overflowX: "auto" }}>
+          <Table verticalSpacing="sm" horizontalSpacing="sm" miw={640}>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th style={th}>Container no.</Table.Th>
+                <Table.Th style={th}>Seal no.</Table.Th>
+                <Table.Th style={th}>VGM</Table.Th>
+                <Table.Th style={th}>Flags</Table.Th>
+                <Table.Th style={th}>GRN</Table.Th>
+                <Table.Th style={th}>Port status</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {units.map((u) => (
+                <UnitRow key={u.id} unit={u} />
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Box>
+      )}
+      {units.length === 0 && (
+        <Text fz={12.5} c="#9AA8B5">
+          Container numbers will appear here once the physical units are assigned.
+        </Text>
+      )}
+    </SectionCard>
+  );
+}
+
+// ─── Bulk ─────────────────────────────────────────────────────────────────────
+
+function BulkCargoCard({ booking }: { booking: BookingDetail }) {
+  const unit = booking.cargoType?.unitOfMeasure;
+  const isPerItem = unit === "PER_ITEM";
+  // Break-bulk (PER_ITEM): cargoTotalWeightVgm holds the ITEM COUNT and the
+  // real tonnage lives in bulkTotalWeightTons; PER_TON stores tons directly.
+  const quantity = Number(booking.cargoTotalWeightVgm || 0);
+  const tons = totalVgmTons(booking);
+
+  return (
+    <SectionCard>
+      <Group gap={10} align="center" mb="md">
+        <Box
+          style={{
+            width: 36,
+            height: 36,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: 10,
+            backgroundColor: "#E8F5EF",
+            color: "#0A6F4D",
+          }}
+        >
+          <Package size={18} />
+        </Box>
+        <Box>
+          <Text fz={15} fw={800} c="#10202F">
+            {commodityLabel(booking)}
+          </Text>
+          <Text fz={12} c="#9AA8B5">
+            Bulk cargo{booking.cargoType?.code ? ` · ${booking.cargoType.code}` : ""}
+          </Text>
+        </Box>
+      </Group>
+
+      <SimpleGrid cols={{ base: 1, sm: isPerItem ? 3 : 2 }} spacing={10} mb="md">
+        {isPerItem && (
+          <StatTile
+            icon={<BoxIcon size={13} />}
+            label="Items"
+            value={quantity ? quantity.toLocaleString() : "—"}
+            sub="declared item count"
+          />
+        )}
+        <StatTile
+          icon={<Scale size={13} />}
+          label="Total weight"
+          value={fmtWeight(tons)}
+          sub={isPerItem ? "actual tonnage" : "declared tonnage"}
+        />
+        <StatTile
+          icon={<Package size={13} />}
+          label="Billing unit"
+          value={isPerItem ? "Per item" : "Per ton"}
+        />
+      </SimpleGrid>
+
+      <Box>
+        <DetailRow label="Commodity" value={commodityLabel(booking)} />
+        {booking.cargoType?.code && (
+          <DetailRow label="Cargo type code" value={booking.cargoType.code} />
+        )}
+        {booking.cargoFreeText && booking.cargoType?.cargoTypeName && (
+          <DetailRow label="Cargo description" value={booking.cargoFreeText} />
+        )}
+        <DetailRow
+          label="Hazardous"
+          value={
+            Number(booking.bulkHazardousQuantity || 0)
+              ? `${Number(booking.bulkHazardousQuantity).toLocaleString()} ${isPerItem ? "items" : "t"}`
+              : booking.isHazardous
+                ? "Yes"
+                : "No"
+          }
+        />
+        <DetailRow
+          label="Refrigerated"
+          value={
+            Number(booking.bulkReeferQuantity || 0)
+              ? `${Number(booking.bulkReeferQuantity).toLocaleString()} ${isPerItem ? "items" : "t"}`
+              : booking.isRefrigerated
+                ? "Yes"
+                : "No"
+          }
+        />
+        <DetailRow
+          label="Equipment return"
+          value={booking.equipmentReturn === "WITH_RETURN" ? "With return" : "Without return"}
+        />
+        <DetailRow label="Shipping line" value={shippingLineLabel(booking)} />
+      </Box>
+    </SectionCard>
+  );
+}
+
+// ─── Tab ──────────────────────────────────────────────────────────────────────
+
+/**
+ * Dedicated cargo breakdown tab: bulk bookings get the full bulk declaration
+ * (commodity, unit of measure, item count vs tonnage, hazardous/reefer
+ * quantities); container bookings get one card per container line with its
+ * per-unit numbers, seals, VGM, GRN and port-arrival status.
+ */
+export function CargoTab({ booking }: { booking: BookingDetail }) {
+  const isBulk = booking.freightType === "BULK";
+  const lines = booking.bookingContainers ?? [];
+  const totalUnits = lines.reduce((s, c) => s + Number(c.quantity || 0), 0);
+  const totalVgm = totalVgmTons(booking);
+  const receivedCount = lines
+    .flatMap((l) => l.units ?? [])
+    .filter((u) => u.receivedToPort).length;
+
+  return (
+    <div className="flex flex-col gap-6" style={{ maxWidth: 980 }}>
+      <SectionCard>
+        <CardTitle>Cargo summary</CardTitle>
+        <SimpleGrid cols={{ base: 2, sm: 4 }} spacing={10} mt="md">
+          <StatTile
+            icon={isBulk ? <Package size={13} /> : <Container size={13} />}
+            label="Freight type"
+            value={isBulk ? "Bulk" : "Container"}
+          />
+          <StatTile
+            icon={<BoxIcon size={13} />}
+            label="Commodity"
+            value={commodityLabel(booking)}
+          />
+          <StatTile
+            icon={<Scale size={13} />}
+            label="Total weight"
+            value={fmtWeight(totalVgm)}
+          />
+          {isBulk ? (
+            <StatTile
+              icon={<Flame size={13} />}
+              label="Special handling"
+              value={
+                [
+                  booking.isHazardous && "Hazardous",
+                  booking.isRefrigerated && "Reefer",
+                ]
+                  .filter(Boolean)
+                  .join(" · ") || "None"
+              }
+            />
+          ) : (
+            <StatTile
+              icon={<Container size={13} />}
+              label="Containers"
+              value={`${totalUnits}`}
+              sub={`${receivedCount} received at port`}
+            />
+          )}
+        </SimpleGrid>
+      </SectionCard>
+
+      {isBulk ? (
+        <BulkCargoCard booking={booking} />
+      ) : lines.length > 0 ? (
+        lines.map((line, i) => (
+          <ContainerLineCard key={line.id ?? i} line={line} index={i} />
+        ))
+      ) : (
+        <SectionCard>
+          <Text fz={13.5} c="#9AA8B5">
+            No container details recorded for this booking yet.
+          </Text>
+        </SectionCard>
+      )}
+    </div>
+  );
+}
--- a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
@@ -292,7 +292,10 @@ export default function NewBookingPage() {
  // physically carry the selected cargo/container type. Quantity is NOT part
  // of this gate — an oversized booking is accepted and gets a partial split
  // offer later. Only selectable days reach the UI; no capacity counts.
-  const gateContainerTypeIds = useMemo(() => {
+  // Computed per render on purpose — NOT useMemo. react-hook-form mutates the
+  // watched containers array in place on nested edits (containers.0.containerType),
+  // so a reference-based dep list never sees per-line changes.
+  const gateContainerTypeIds = (() => {
    if (watchedCargoKind !== "container") return [];
    const groups = referenceData?.containers ?? [];
    const ids = new Set<string>();
@@ -304,7 +307,7 @@ export default function NewBookingPage() {
      }
    }
    return [...ids];
-  }, [watchedCargoKind, watchedContainers, referenceData]);
+  })();
  const gateCargoTypeId =
    watchedCargoKind === "bulk" ? watchedCargoTypePath?.[1] : undefined;
  const gateReady =
--- a/apps/edr-freight-web/portal/src/pages/bookings/booking-display.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/booking-display.tsx
@@ -120,6 +120,7 @@ const PAYMENT_COLORS: Record<string, string> = {
  // Backend emits the long form on some flows; keep the short alias too.
  VERIFICATION_IN_PROGRESS: "yellow",
  PAYMENT_VERIFICATION_IN_PROGRESS: "yellow",
+  PAYMENT_PROCESSING: "yellow",
  OVERDUE: "red",
  REFUNDED: "blue",
  CANCELLED: "gray",
@@ -132,6 +133,7 @@ const PAYMENT_LABELS: Record<string, string> = {
  PNR_GENERATED: "PNR generated",
  VERIFICATION_IN_PROGRESS: "Verifying",
  PAYMENT_VERIFICATION_IN_PROGRESS: "Verifying",
+  PAYMENT_PROCESSING: "Payment processing",
  OVERDUE: "Overdue",
  REFUNDED: "Refunded",
  CANCELLED: "Cancelled",
--- a/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
@@ -1006,9 +1006,11 @@ function ScheduleStep({
  const isContainer = contract.freightType === "CONTAINER";
  const containerLines = form.watch("containers");
  const cargoWeightTons = form.watch("cargoWeightTons");
-  const itemCount = form.watch("itemCount");

-  const cargoQuery = useMemo<Freight.AvailableDaysForCargoQuery | null>(() => {
+  // Computed per render on purpose — NOT useMemo. react-hook-form mutates the
+  // watched containers array in place on nested edits (containers.0.quantity),
+  // so a reference-based dep list never sees manual quantity changes.
+  const cargoQuery = ((): Freight.AvailableDaysForCargoQuery | null => {
    if (!route?.originYardId || !route?.destinationYardId) return null;
    if (isContainer) {
      const containers = (containerLines ?? [])
@@ -1036,17 +1038,7 @@ function ScheduleStep({
          ?.cargoTypeCode ?? undefined,
      totalWeightTons: tons,
    };
-    // Tonnage is the sizing input the day-feasibility endpoint takes, and
-    // PER_ITEM cargo now captures it too — itemCount stays in the deps so the
-    // query still refreshes when only the item count changes.
-  }, [
-    route,
-    isContainer,
-    containerLines,
-    cargoWeightTons,
-    itemCount,
-    contract.pricingBreakdown,
-  ]);
+  })();

  const isIntercity = contract.tradeDirection === "DOMESTIC";
  const { data: availableDays, isLoading } = useQuery({
--- a/apps/edr-freight-web/portal/src/pages/payments/PaymentSuccessPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/payments/PaymentSuccessPage.tsx
@@ -8,10 +8,22 @@ import {
  ThemeIcon,
 } from "@mantine/core";
 import { CheckCircle2, FileText, Home } from "lucide-react";
-import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { paymentsService } from "@/services/payments.service";

 export default function PaymentSuccessPage() {
  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const bookingId = searchParams.get("bookingId");
+
+  // Fire-and-forget ack: payment → processing, invoice → PAYMENT_PROCESSING.
+  // The provider webhook remains the source of truth for the final PAID state.
+  useEffect(() => {
+    if (bookingId) {
+      paymentsService.acknowledgeSuccessRedirect(bookingId).catch(() => {});
+    }
+  }, [bookingId]);

  return (
    <Box
--- a/apps/edr-freight-web/portal/src/services/payments.service.ts
+++ b/apps/edr-freight-web/portal/src/services/payments.service.ts
@@ -107,6 +107,11 @@ export const paymentsService = {
    return data.data ?? data;
  },

+  /** Success-redirect ack: payment → processing, invoice → PAYMENT_PROCESSING. */
+  acknowledgeSuccessRedirect: async (bookingId: string): Promise<void> => {
+    await client.post(P.REDIRECT_SUCCESS(bookingId));
+  },
+
  checkoutUrl: buildCheckoutUrl,
  checkoutUrlForInvoice: buildCheckoutUrlForInvoice,
 };