From 4691f5ad3f1591e4b11050deec1adc8f95dc10ec Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 15:43:20 +0300
Subject: [PATCH] feat: enhance the new booking form with RHC

---
 .../src/pages/bookings/NewBookingPage.tsx     | 1718 ++---------------
 .../new-booking-form/StepIndicator.tsx        |   41 +
 .../pages/bookings/new-booking-form/schema.ts |  491 +++++
 .../bookings/new-booking-form/shared.tsx      |  157 ++
 .../pages/bookings/new-booking-form/steps.tsx | 1303 +++++++++++++
 5 files changed, 2124 insertions(+), 1586 deletions(-)
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/StepIndicator.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx

diff --git a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
index 84a3b9c69..2fe104665 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
@@ -1,1549 +1,125 @@
-import { Fragment, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
-import {
-  AlertTriangle,
-  Check,
-  CheckCircle2,
-  ChevronLeft,
-  ChevronRight,
-  FileText,
-  Flame,
-  Info,
-  Loader2,
-  MapPin,
-  Package,
-  RefreshCw,
-  Snowflake,
-  Train,
-  Weight,
-  XCircle,
-} from "lucide-react";
-import {
-  Badge,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Input,
-  Label,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  SmartFileInput,
-  Switch,
-  Textarea,
-} from "@edr/ui-common";
+import { CheckCircle2, ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@edr/ui-common";
 import Breadcrumbs from "@/components/Breadcrumbs";
-
-// ── Mock Constants ─────────────────────────────────────────────────────────────
-
-const STATIONS = [
-  "Addis Ababa",
-  "Adama",
-  "Mojo",
-  "Awash",
-  "Mieso",
-  "Dire Dawa",
-  "Aysha",
-  "Ali Sabieh",
-  "Holhol",
-  "Djibouti City",
-];
-
-const ETHIOPIA_STATIONS = new Set([
-  "Addis Ababa",
-  "Adama",
-  "Mojo",
-  "Awash",
-  "Mieso",
-  "Dire Dawa",
-]);
-
-const BULK_COMMODITIES = [
-  "Coffee",
-  "Beans",
-  "Fertilizer",
-  "Sugar",
-  "Oil",
-  "Livestock",
-  "Steel",
-  "Others",
-];
-
-const BREAK_BULK_TYPES = ["Machinery", "Ro-Ro", "Others"];
-
-const MOCK_VALID_CONTRACTS = [
-  "EDR-2024-10001",
-  "EDR-2024-10002",
-  "EDR-2023-88123",
-  "EDR-2022-55442",
-];
-
-// US-04 compliance documents (TIN, Business License, Registration, National ID, optional PoA)
-const BOOKING_DOCS_SETTING = {
-  id: "booking-compliance",
-  createdAt: "",
-  updatedAt: "",
-  deletedAt: null,
-  code: "booking_compliance_docs",
-  label: "Compliance Documents",
-  description:
-    "Upload your company's legal credentials. All mandatory documents must be submitted before the contract request can be reviewed by EDR Line Staff.",
-  entity: "booking" as const,
-  fields: [
-    {
-      id: "f1",
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: null,
-      settingId: "booking-compliance",
-      fileKey: "tin_certificate",
-      fileLabel: "TIN Certificate",
-      helpText:
-        "Tax Identification Number certificate issued by ERCA (10-digit TIN).",
-      isRequired: true,
-      isMultiple: false,
-      maxFiles: 1,
-      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
-      maxSizeMb: 5,
-      order: 1,
-    },
-    {
-      id: "f2",
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: null,
-      settingId: "booking-compliance",
-      fileKey: "business_license",
-      fileLabel: "Business / Investment License",
-      helpText:
-        "Current business or investment license issued by the relevant government authority.",
-      isRequired: true,
-      isMultiple: false,
-      maxFiles: 1,
-      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
-      maxSizeMb: 5,
-      order: 2,
-    },
-    {
-      id: "f3",
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: null,
-      settingId: "booking-compliance",
-      fileKey: "business_registration",
-      fileLabel: "Business Registration Certificate",
-      helpText: "Certificate of registration from the relevant authority.",
-      isRequired: true,
-      isMultiple: false,
-      maxFiles: 1,
-      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
-      maxSizeMb: 5,
-      order: 3,
-    },
-    {
-      id: "f4",
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: null,
-      settingId: "booking-compliance",
-      fileKey: "national_id",
-      fileLabel: "National ID / Passport",
-      helpText:
-        "Valid government-issued ID or passport of the authorized signatory.",
-      isRequired: true,
-      isMultiple: false,
-      maxFiles: 1,
-      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
-      maxSizeMb: 5,
-      order: 4,
-    },
-    {
-      id: "f5",
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: null,
-      settingId: "booking-compliance",
-      fileKey: "power_of_attorney",
-      fileLabel: "Power of Attorney (PoA)",
-      helpText:
-        "Required only if a representative is signing on behalf of the company.",
-      isRequired: false,
-      isMultiple: false,
-      maxFiles: 1,
-      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
-      maxSizeMb: 5,
-      order: 5,
-    },
-  ],
-};
-
-const REQUIRED_DOC_KEYS = [
-  "tin_certificate",
-  "business_license",
-  "business_registration",
-  "national_id",
-];
-
-const STEPS = [
-  { id: 1, label: "Contract Type", short: "Contract" },
-  { id: 2, label: "Service Type", short: "Service" },
-  { id: 3, label: "First & Last Mile", short: "Mile" },
-  { id: 4, label: "Route", short: "Route" },
-  { id: 5, label: "Cargo Details", short: "Cargo" },
-  { id: 6, label: "Wagon Allocation", short: "Wagons" },
-  { id: 7, label: "Documents", short: "Docs" },
-  { id: 8, label: "Review & Submit", short: "Submit" },
-] as const;
-
-// ── Types ──────────────────────────────────────────────────────────────────────
-
-type ContractTypeVal = "new" | "renewal" | "";
-type ServiceTypeVal = "rail" | "rail_forwarding" | "";
-type FreightTypeVal = "bulk" | "break_bulk" | "";
-type ContainerTypeVal = "20ft" | "40ft" | "";
-type EquipmentReturn = "with_return" | "without_return";
-
-interface FormData {
-  contractType: ContractTypeVal;
-  previousContractRef: string;
-  draftContractId: string;
-  serviceType: ServiceTypeVal;
-  firstMileEnabled: boolean;
-  pickUpAddress: string;
-  lastMileEnabled: boolean;
-  deliveryAddress: string;
-  equipmentReturn: EquipmentReturn;
-  originYard: string;
-  destinationYard: string;
-  cargoType: "container" | "bulk" | "";
-  cargoWeight: string;
-  freightType: FreightTypeVal;
-  bulkCommodity: string;
-  bulkCommodityOther: string;
-  breakBulkType: string;
-  breakBulkTypeOther: string;
-  isHazardous: boolean;
-  isRefrigerated: boolean;
-  containerType: ContainerTypeVal;
-  quantity: string;
-  vgm: string;
-  consolidationEnabled: boolean;
-  documents: Record<string, File | File[] | null>;
-  notes: string;
-  termsAccepted: boolean;
-}
-
-const INITIAL_DATA: FormData = {
-  contractType: "",
-  previousContractRef: "",
-  draftContractId: "",
-  serviceType: "",
-  firstMileEnabled: false,
-  pickUpAddress: "",
-  lastMileEnabled: false,
-  deliveryAddress: "",
-  equipmentReturn: "with_return",
-  originYard: "",
-  destinationYard: "",
-  cargoType: "",
-  cargoWeight: "",
-  freightType: "",
-  bulkCommodity: "",
-  bulkCommodityOther: "",
-  breakBulkType: "",
-  breakBulkTypeOther: "",
-  isHazardous: false,
-  isRefrigerated: false,
-  containerType: "",
-  quantity: "1",
-  vgm: "",
-  consolidationEnabled: false,
-  documents: {},
-  notes: "",
-  termsAccepted: false,
-};
-
-// ── Helpers ────────────────────────────────────────────────────────────────────
-
-function genContractId(): string {
-  const yr = new Date().getFullYear();
-  const n = Math.floor(10000 + Math.random() * 90000);
-  return `EDR-DRAFT-${yr}-${n}`;
-}
-
-type RouteDirection = "import" | "export" | "domestic" | null;
-
-function getRouteDirection(origin: string, dest: string): RouteDirection {
-  if (!origin || !dest) return null;
-  const oEth = ETHIOPIA_STATIONS.has(origin);
-  const dEth = ETHIOPIA_STATIONS.has(dest);
-  if (oEth && !dEth) return "export";
-  if (!oEth && dEth) return "import";
-  if (oEth && dEth) return "domestic";
-  return null;
-}
-
-interface WagonCalcResult {
-  totalWagons: number;
-  hasOddUnit: boolean;
-  sharedWagons: number;
-}
-
-function calcWagons(type: ContainerTypeVal, qty: number): WagonCalcResult {
-  if (type === "40ft")
-    return { totalWagons: qty, hasOddUnit: false, sharedWagons: qty };
-  const pairs = Math.floor(qty / 2);
-  const odd = qty % 2;
-  return { totalWagons: pairs + odd, hasOddUnit: odd > 0, sharedWagons: pairs };
-}
-
-// ── Shared primitives ──────────────────────────────────────────────────────────
-
-function OptionCard({
-  selected,
-  onClick,
-  disabled,
-  children,
-}: {
-  selected: boolean;
-  onClick?: () => void;
-  disabled?: boolean;
-  children: React.ReactNode;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className={`relative w-full rounded-xl border-2 p-4 text-left transition ${disabled
-          ? "cursor-not-allowed border-border bg-muted opacity-60"
-          : selected
-            ? "border-primary bg-primary/5"
-            : "border-border bg-card hover:border-primary/40"
-        }`}
-    >
-      {selected && !disabled && (
-        <span className="absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary">
-          <Check className="h-3 w-3 text-primary-foreground" />
-        </span>
-      )}
-      {children}
-    </button>
-  );
-}
-
-function AlertBox({
-  tone,
-  children,
-}: {
-  tone: "warning" | "error" | "success" | "info";
-  children: React.ReactNode;
-}) {
-  const s = {
-    warning: "bg-amber-50 border-amber-200 text-amber-800",
-    error: "bg-red-50 border-red-200 text-red-800",
-    success: "bg-emerald-50 border-emerald-200 text-emerald-800",
-    info: "bg-sky-50 border-sky-200 text-sky-800",
-  };
-  const icons = {
-    warning: <AlertTriangle className="h-4 w-4 shrink-0 text-amber-500" />,
-    error: <XCircle className="h-4 w-4 shrink-0 text-red-500" />,
-    success: <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-600" />,
-    info: <Info className="h-4 w-4 shrink-0 text-sky-500" />,
-  };
-  return (
-    <div
-      className={`flex items-start gap-3 rounded-xl border p-3 text-sm ${s[tone]}`}
-    >
-      {icons[tone]}
-      <div>{children}</div>
-    </div>
-  );
-}
-
-function Field({
-  label,
-  children,
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="space-y-1.5">
-      <Label className="text-sm font-medium">{label}</Label>
-      {children}
-    </div>
-  );
-}
-
-function Divider() {
-  return <div className="h-px bg-border" />;
-}
-
-function StepLabel({ children }: { children: React.ReactNode }) {
-  return (
-    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-      {children}
-    </p>
-  );
-}
-
-// ── Step 1: Contract Type ──────────────────────────────────────────────────────
-
-function Step1({
-  d,
-  set,
-  renewalValid,
-  renewalValidating,
-  onValidate,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-  renewalValid: boolean | null;
-  renewalValidating: boolean;
-  onValidate: () => void;
-}) {
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Contract Type</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          New contract or renewal of an existing one.
-        </p>
-      </div>
-
-      <div className="grid gap-3 md:grid-cols-2">
-        <OptionCard
-          selected={d.contractType === "new"}
-          onClick={() => {
-            set("contractType", "new");
-            if (!d.draftContractId) set("draftContractId", genContractId());
-          }}
-        >
-          <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
-            <FileText className="h-4 w-4 text-primary" />
-          </div>
-          <p className="font-semibold">New Contract</p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            Blank contract form. A draft ID is auto-generated.
-          </p>
-          {d.contractType === "new" && d.draftContractId && (
-            <p className="mt-2 font-mono text-xs font-semibold text-primary">
-              {d.draftContractId}
-            </p>
-          )}
-        </OptionCard>
-
-        <OptionCard
-          selected={d.contractType === "renewal"}
-          onClick={() => set("contractType", "renewal")}
-        >
-          <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100">
-            <RefreshCw className="h-4 w-4 text-sky-600" />
-          </div>
-          <p className="font-semibold">Contract Renewal</p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            Enter a previous reference to auto-populate historical parameters.
-          </p>
-        </OptionCard>
-      </div>
-
-      {d.contractType === "renewal" && (
-        <div className="space-y-3 pt-1">
-          <Field label="Previous Contract Reference Number">
-            <div className="flex gap-2">
-              <Input
-                placeholder="e.g. EDR-2024-10001"
-                value={d.previousContractRef}
-                onChange={(e) => set("previousContractRef", e.target.value)}
-                className="font-mono"
-              />
-              <Button
-                variant="outline"
-                onClick={onValidate}
-                disabled={!d.previousContractRef || renewalValidating}
-              >
-                {renewalValidating ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                ) : (
-                  "Validate"
-                )}
-              </Button>
-            </div>
-          </Field>
-          {renewalValid === true && (
-            <AlertBox tone="success">
-              <strong>Contract found.</strong> Company details, route, and wagon
-              preferences will be pre-filled.
-            </AlertBox>
-          )}
-          {renewalValid === false && (
-            <AlertBox tone="error">
-              Contract Reference Number not found or unauthorized. Try{" "}
-              <span className="font-mono">EDR-2024-10001</span>.
-            </AlertBox>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── Step 2: Service Type ───────────────────────────────────────────────────────
-
-function Step2({
-  d,
-  set,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-}) {
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Service Type</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Select the service combination you require.
-        </p>
-      </div>
-
-      <div className="grid gap-3 md:grid-cols-2">
-        <OptionCard
-          selected={d.serviceType === "rail"}
-          onClick={() => set("serviceType", "rail")}
-        >
-          <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100">
-            <Train className="h-4 w-4 text-indigo-600" />
-          </div>
-          <p className="font-semibold">Rail Transport Only</p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            Rail transport along the EDR corridor, with optional first/last mile
-            trucking.
-          </p>
-          <Badge className="mt-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-100">
-            Option A
-          </Badge>
-        </OptionCard>
-
-        <OptionCard
-          selected={d.serviceType === "rail_forwarding"}
-          onClick={() => set("serviceType", "rail_forwarding")}
-        >
-          <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
-            <Package className="h-4 w-4 text-primary" />
-          </div>
-          <p className="font-semibold">Rail Transport & Freight Forwarding</p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            Rail transport plus documentation, customs liaison, and a dedicated
-            coordinator.
-          </p>
-          <Badge className="mt-2 bg-emerald-100 text-emerald-700 hover:bg-emerald-100">
-            Option B
-          </Badge>
-        </OptionCard>
-      </div>
-
-      <p className="text-xs text-muted-foreground">
-        Customs and Clearance Service cannot be selected independently — it must
-        be bundled with a Rail Transport service.
-      </p>
-    </div>
-  );
-}
-
-// ── Step 3: First & Last Mile ──────────────────────────────────────────────────
-
-function Step3({
-  d,
-  set,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-}) {
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">First & Last Mile</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Configure trucking and container return options.
-        </p>
-      </div>
-
-      <div className="divide-y divide-border rounded-xl border border-border">
-        {/* First Mile */}
-        <div className="p-4">
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <p className="text-sm font-medium">First Mile – Pick-up</p>
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                Truck pick-up from your premises to the origin rail yard.
-              </p>
-            </div>
-            <Switch
-              checked={d.firstMileEnabled}
-              onCheckedChange={(v) => set("firstMileEnabled", v)}
-            />
-          </div>
-          {d.firstMileEnabled && (
-            <div className="mt-3">
-              <Input
-                placeholder="Pick-up address *"
-                value={d.pickUpAddress}
-                onChange={(e) => set("pickUpAddress", e.target.value)}
-              />
-            </div>
-          )}
-        </div>
-
-        {/* Last Mile */}
-        <div className="p-4">
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <p className="text-sm font-medium">Last Mile – Delivery</p>
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                Truck delivery from the destination rail yard to the final
-                address.
-              </p>
-            </div>
-            <Switch
-              checked={d.lastMileEnabled}
-              onCheckedChange={(v) => set("lastMileEnabled", v)}
-            />
-          </div>
-          {d.lastMileEnabled && (
-            <div className="mt-3">
-              <Input
-                placeholder="Delivery address *"
-                value={d.deliveryAddress}
-                onChange={(e) => set("deliveryAddress", e.target.value)}
-              />
-            </div>
-          )}
-        </div>
-
-        {/* Equipment Return */}
-        <div className="p-4">
-          <p className="mb-3 text-sm font-medium">Equipment Return</p>
-          <p className="mb-3 text-xs text-muted-foreground">
-            Declare whether the container asset will be returned after
-            unloading.
-          </p>
-          <div className="grid gap-2 sm:grid-cols-2">
-            <OptionCard
-              selected={d.equipmentReturn === "with_return"}
-              onClick={() => set("equipmentReturn", "with_return")}
-            >
-              <p className="text-sm font-semibold">With Return</p>
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                Container returned to EDR after unloading.
-              </p>
-            </OptionCard>
-            <OptionCard
-              selected={d.equipmentReturn === "without_return"}
-              onClick={() => set("equipmentReturn", "without_return")}
-            >
-              <p className="text-sm font-semibold">Without Return</p>
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                Container retained by the customer after delivery.
-              </p>
-            </OptionCard>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Step 4: Route & Cargo ──────────────────────────────────────────────────────
-
-function Step4({
-  d,
-  set,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-}) {
-  const direction = getRouteDirection(d.originYard, d.destinationYard);
-  const directionStyle: Record<string, string> = {
-    export: "bg-sky-50 text-sky-800 border-sky-200",
-    import: "bg-amber-50 text-amber-800 border-amber-200",
-    domestic: "bg-muted text-muted-foreground border-border",
-  };
-  const directionLabel: Record<string, string> = {
-    export: "Export workflow (Ethiopia → Djibouti)",
-    import: "Import workflow (Djibouti → Ethiopia)",
-    domestic: "Domestic corridor",
-  };
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Route</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Select the origin and destination yards.
-        </p>
-      </div>
-
-      {/* Route */}
-      <div className="space-y-3">
-        <StepLabel>Route</StepLabel>
-        <div className="grid gap-3 sm:grid-cols-2">
-          <Field label="Origin Yard *">
-            <Select
-              value={d.originYard}
-              onValueChange={(v) => set("originYard", v)}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select origin..." />
-              </SelectTrigger>
-              <SelectContent>
-                {STATIONS.filter((s) => s !== d.destinationYard).map((s) => (
-                  <SelectItem key={s} value={s}>
-                    {s}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </Field>
-          <Field label="Destination Yard *">
-            <Select
-              value={d.destinationYard}
-              onValueChange={(v) => set("destinationYard", v)}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select destination..." />
-              </SelectTrigger>
-              <SelectContent>
-                {STATIONS.filter((s) => s !== d.originYard).map((s) => (
-                  <SelectItem key={s} value={s}>
-                    {s}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </Field>
-        </div>
-        {direction && (
-          <div
-            className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium ${directionStyle[direction]}`}
-          >
-            <MapPin className="h-3.5 w-3.5 shrink-0" />
-            {directionLabel[direction]}
-          </div>
-        )}
-      </div>
-
-      <Divider />
-
-      {/* Modifiers */}
-      <div className="space-y-0 divide-y divide-border">
-        <div className="flex items-center justify-between py-3">
-          <div className="flex items-center gap-3">
-            <Flame className="h-4 w-4 shrink-0 text-red-500" />
-            <div>
-              <p className="text-sm font-medium">Hazardous Material</p>
-              <p className="text-xs text-muted-foreground">
-                Applies a Hazard Surcharge to the final bill.
-              </p>
-            </div>
-          </div>
-          <Switch
-            checked={d.isHazardous}
-            onCheckedChange={(v) => set("isHazardous", v)}
-          />
-        </div>
-        <div className="flex items-center justify-between py-3">
-          <div className="flex items-center gap-3">
-            <Snowflake className="h-4 w-4 shrink-0 text-sky-500" />
-            <div>
-              <p className="text-sm font-medium">Refrigerated Cargo</p>
-              <p className="text-xs text-muted-foreground">
-                Temperature-controlled transport — applies a Refrigerator
-                Surcharge.
-              </p>
-            </div>
-          </div>
-          <Switch
-            checked={d.isRefrigerated}
-            onCheckedChange={(v) => set("isRefrigerated", v)}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Step 5: Container Configuration ───────────────────────────────────────────
-
-function Step5({
-  d,
-  set,
-  direction,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-  direction: RouteDirection;
-}) {
-  const qty = parseInt(d.quantity) || 1;
-  const vgm = parseFloat(d.vgm) || 0;
-
-  let overweightAlert: string | null = null;
-  if (d.containerType === "20ft" && vgm > 0) {
-    const limit = direction === "export" ? 25 : 20;
-    if (vgm > limit)
-      overweightAlert = `VGM ${vgm}t exceeds the ${limit}t ${direction ?? "standard"} limit for a 20ft container. An Overweight Surcharge will apply.`;
-  }
-  if (d.containerType === "40ft" && vgm > 32.5)
-    overweightAlert = `VGM ${vgm}t exceeds the 32.5t global limit for a 40ft container. An Overweight Surcharge will apply.`;
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Cargo Details</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Define your cargo type, weight, and container configuration.
-        </p>
-      </div>
-
-      {/* Cargo Type */}
-      <div className="space-y-3">
-        <StepLabel>Cargo Type *</StepLabel>
-        <div className="grid gap-3 sm:grid-cols-2">
-          <OptionCard
-            selected={d.cargoType === "container"}
-            onClick={() => set("cargoType", "container")}
-          >
-            <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
-              <Package className="h-4 w-4 text-primary" />
-            </div>
-            <p className="font-semibold">Container</p>
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              Pre-packed containerized cargo (20ft / 40ft).
-            </p>
-          </OptionCard>
-          <OptionCard
-            selected={d.cargoType === "bulk"}
-            onClick={() => set("cargoType", "bulk")}
-          >
-            <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100">
-              <Weight className="h-4 w-4 text-amber-600" />
-            </div>
-            <p className="font-semibold">Bulk</p>
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              Bulk commodities or break-bulk cargo.
-            </p>
-          </OptionCard>
-        </div>
-      </div>
-
-      {/* Bulk section */}
-      {d.cargoType === "bulk" && (
-        <>
-          <Divider />
-          <div className="space-y-3">
-            <StepLabel>Freight Type *</StepLabel>
-            <div className="grid gap-3 sm:grid-cols-2">
-              <OptionCard
-                selected={d.freightType === "bulk"}
-                onClick={() => set("freightType", "bulk")}
-              >
-                <p className="font-semibold">Bulk</p>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  Coffee, fertilizer, grain, ore, etc.
-                </p>
-              </OptionCard>
-              <OptionCard
-                selected={d.freightType === "break_bulk"}
-                onClick={() => set("freightType", "break_bulk")}
-              >
-                <p className="font-semibold">Break-Bulk</p>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  Machinery, vehicles, project cargo, etc.
-                </p>
-              </OptionCard>
-            </div>
-
-            {d.freightType === "bulk" && (
-              <div className="space-y-2">
-                <Select
-                  value={d.bulkCommodity}
-                  onValueChange={(v) => {
-                    set("bulkCommodity", v);
-                    if (v !== "Others") set("bulkCommodityOther", "");
-                  }}
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="Select commodity *" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {BULK_COMMODITIES.map((c) => (
-                      <SelectItem key={c} value={c}>
-                        {c}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                {d.bulkCommodity === "Others" && (
-                  <Input
-                    placeholder="Specify commodity *"
-                    value={d.bulkCommodityOther}
-                    onChange={(e) => set("bulkCommodityOther", e.target.value)}
-                  />
-                )}
-              </div>
-            )}
-
-            {d.freightType === "break_bulk" && (
-              <div className="space-y-2">
-                <Select
-                  value={d.breakBulkType}
-                  onValueChange={(v) => {
-                    set("breakBulkType", v);
-                    if (v !== "Others") set("breakBulkTypeOther", "");
-                  }}
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="Select type *" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {BREAK_BULK_TYPES.map((c) => (
-                      <SelectItem key={c} value={c}>
-                        {c}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                {d.breakBulkType === "Others" && (
-                  <Input
-                    placeholder="Specify break-bulk type *"
-                    value={d.breakBulkTypeOther}
-                    onChange={(e) => set("breakBulkTypeOther", e.target.value)}
-                  />
-                )}
-              </div>
-            )}
-          </div>
-
-          <Divider />
-
-          {/* Weight */}
-          <div className="space-y-3">
-            <StepLabel>Weight</StepLabel>
-            <Field label="Total Cargo Weight – VGM (Tons) *">
-              <div className="relative">
-                <Weight className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  type="number"
-                  placeholder="0.00"
-                  value={d.cargoWeight}
-                  onChange={(e) => set("cargoWeight", e.target.value)}
-                  className="pl-9"
-                  min="0"
-                  step="0.01"
-                />
-              </div>
-            </Field>
-          </div>
-        </>
-      )}
-
-      {/* Container section */}
-      {d.cargoType === "container" && (
-        <>
-          <Divider />
-          <div className="space-y-3">
-            <StepLabel>Container Configuration</StepLabel>
-            <div className="grid gap-3 sm:grid-cols-2">
-              {[
-                {
-                  val: "20ft" as const,
-                  label: "20ft Container (TEU)",
-                  limit:
-                    direction === "export"
-                      ? "Max 25t per container"
-                      : "Max 20t per container",
-                },
-                {
-                  val: "40ft" as const,
-                  label: "40ft Container (FEU)",
-                  limit: "Max 32.5t per container",
-                },
-              ].map((ct) => (
-                <OptionCard
-                  key={ct.val}
-                  selected={d.containerType === ct.val}
-                  onClick={() => set("containerType", ct.val)}
-                >
-                  <div className="mb-1 flex items-center gap-2">
-                    <Package className="h-4 w-4 text-primary" />
-                    <p className="font-semibold">{ct.label}</p>
-                  </div>
-                  <p className="text-xs text-muted-foreground">{ct.limit}</p>
-                </OptionCard>
-              ))}
-            </div>
-
-            {direction && (
-              <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                <MapPin className="h-3.5 w-3.5" />
-                Route detected as{" "}
-                <span className="font-medium capitalize text-foreground">
-                  {direction}
-                </span>{" "}
-                workflow
-              </p>
-            )}
-
-            <div className="grid gap-4 sm:grid-cols-2">
-              <Field label="Quantity">
-                <div className="flex items-center gap-2">
-                  <button
-                    type="button"
-                    onClick={() => set("quantity", String(Math.max(1, qty - 1)))}
-                    className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
-                  >
-                    −
-                  </button>
-                  <Input
-                    type="number"
-                    value={d.quantity}
-                    onChange={(e) => set("quantity", e.target.value)}
-                    className="text-center"
-                    min="1"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => set("quantity", String(qty + 1))}
-                    className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
-                  >
-                    +
-                  </button>
-                </div>
-              </Field>
-              <Field label="VGM per Container (Tons) *">
-                <Input
-                  type="number"
-                  placeholder="e.g. 18.5"
-                  value={d.vgm}
-                  onChange={(e) => set("vgm", e.target.value)}
-                  min="0"
-                  step="0.1"
-                />
-              </Field>
-            </div>
-          </div>
-
-          {overweightAlert && (
-            <AlertBox tone="warning">
-              <strong>Overweight Alert:</strong> {overweightAlert}
-            </AlertBox>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-// ── Step 6: Wagon Allocation ───────────────────────────────────────────────────
-
-function Step6({
-  d,
-  set,
-  wagons,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-  wagons: WagonCalcResult | null;
-}) {
-  const qty = parseInt(d.quantity) || 1;
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Wagon Allocation</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          System-calculated wagon requirements based on your container profile.
-        </p>
-      </div>
-
-      {!wagons ? (
-        <AlertBox tone="info">
-          Complete the container configuration in the previous step to see wagon
-          allocation.
-        </AlertBox>
-      ) : (
-        <>
-          <div className="grid gap-3 sm:grid-cols-3">
-            <div className="rounded-xl bg-primary/5 p-4 text-center">
-              <p className="text-3xl font-bold text-primary">
-                {wagons.totalWagons}
-              </p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                Wagons Required
-              </p>
-            </div>
-            <div className="rounded-xl bg-muted p-4 text-center">
-              <p className="text-3xl font-bold">{qty}</p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                {d.containerType} Containers
-              </p>
-            </div>
-            <div className="rounded-xl bg-muted p-4 text-center">
-              <p className="text-3xl font-bold">{wagons.sharedWagons}</p>
-              <p className="mt-1 text-xs text-muted-foreground">Shared Slots</p>
-            </div>
-          </div>
-
-          <div>
-            <StepLabel>Wagon Layout</StepLabel>
-            <div className="mt-2 flex flex-wrap gap-2">
-              {Array.from({ length: wagons.totalWagons }, (_, i) => {
-                const isOdd = wagons.hasOddUnit && i === wagons.totalWagons - 1;
-                return (
-                  <div
-                    key={i}
-                    className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold ${isOdd
-                        ? "border-amber-300 bg-amber-50 text-amber-700"
-                        : "border-primary/30 bg-primary/5 text-primary"
-                      }`}
-                  >
-                    {isOdd
-                      ? `1 × ${d.containerType} (½)`
-                      : d.containerType === "20ft"
-                        ? "2 × 20ft"
-                        : "1 × 40ft"}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          <p className="text-xs text-muted-foreground">
-            Formula:{" "}
-            {d.containerType === "40ft"
-              ? "1 × 40ft = 1 Rail Wagon"
-              : `CEILING(${qty} ÷ 2) = ${wagons.totalWagons} Rail Wagon${wagons.totalWagons > 1 ? "s" : ""} — (2 × 20ft = 1 Wagon)`}
-          </p>
-
-          {wagons.hasOddUnit && (
-            <>
-              <Divider />
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <AlertTriangle className="h-4 w-4 text-amber-500" />
-                  <p className="text-sm font-medium">
-                    Consolidation Option (US-07)
-                  </p>
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  You have 1 unpaired 20ft container. Opt in to share a wagon
-                  slot with another shipper to optimise costs (2 × 20ft = 1
-                  Wagon), or request a dedicated wagon.
-                </p>
-                <div className="grid gap-2 sm:grid-cols-2">
-                  <OptionCard
-                    selected={d.consolidationEnabled}
-                    onClick={() => set("consolidationEnabled", true)}
-                  >
-                    <p className="text-sm font-semibold">Allow Consolidation</p>
-                    <p className="mt-0.5 text-xs text-muted-foreground">
-                      Share a wagon slot — billing split with co-loader.
-                    </p>
-                  </OptionCard>
-                  <OptionCard
-                    selected={!d.consolidationEnabled}
-                    onClick={() => set("consolidationEnabled", false)}
-                  >
-                    <p className="text-sm font-semibold">Dedicated Wagon</p>
-                    <p className="mt-0.5 text-xs text-muted-foreground">
-                      Exclusive slot — standard single-party billing.
-                    </p>
-                  </OptionCard>
-                </div>
-              </div>
-            </>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-// ── Step 7: Compliance Documents ───────────────────────────────────────────────
-
-function Step7Docs({
-  d,
-  set,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-}) {
-  const uploadedRequired = REQUIRED_DOC_KEYS.filter((k) => {
-    const f = d.documents[k];
-    if (!f) return false;
-    return Array.isArray(f) ? f.length > 0 : true;
-  }).length;
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">
-          Compliance Documents
-        </h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Upload your company's legal credentials for EDR contract eligibility
-          verification (US-04).
-        </p>
-      </div>
-
-      <div className="flex items-center gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3">
-        <div
-          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold ${uploadedRequired === REQUIRED_DOC_KEYS.length
-              ? "bg-emerald-100 text-emerald-700"
-              : "bg-primary/10 text-primary"
-            }`}
-        >
-          {uploadedRequired}/{REQUIRED_DOC_KEYS.length}
-        </div>
-        <p className="text-sm text-muted-foreground">
-          {uploadedRequired < REQUIRED_DOC_KEYS.length
-            ? `${REQUIRED_DOC_KEYS.length - uploadedRequired} mandatory document(s) still needed.`
-            : "All mandatory documents uploaded. Power of Attorney is optional."}
-        </p>
-      </div>
-
-      <SmartFileInput
-        file={BOOKING_DOCS_SETTING}
-        value={d.documents}
-        onChange={(val) => set("documents", val)}
-      />
-    </div>
-  );
-}
-
-// ── Step 8: Review & Submit ────────────────────────────────────────────────────
-
-function Step8Review({
-  d,
-  set,
-  setStep,
-  wagons,
-  direction,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-  setStep: (n: number) => void;
-  wagons: WagonCalcResult | null;
-  direction: RouteDirection;
-}) {
-  function Row({
-    label,
-    value,
-    target,
-  }: {
-    label: string;
-    value: string;
-    target: number;
-  }) {
-    return (
-      <div className="flex items-start justify-between gap-4 py-2">
-        <div className="min-w-0">
-          <p className="text-xs text-muted-foreground">{label}</p>
-          <p className="mt-0.5 truncate text-sm font-medium">{value || "—"}</p>
-        </div>
-        <button
-          type="button"
-          onClick={() => setStep(target)}
-          className="shrink-0 text-xs font-medium text-primary hover:underline"
-        >
-          Edit
-        </button>
-      </div>
-    );
-  }
-
-  const cargoValue =
-    d.freightType === "bulk"
-      ? `Bulk — ${d.bulkCommodity === "Others" ? d.bulkCommodityOther : d.bulkCommodity}`
-      : d.freightType === "break_bulk"
-        ? `Break-Bulk — ${d.breakBulkType === "Others" ? d.breakBulkTypeOther : d.breakBulkType}`
-        : "";
-
-  const uploadedCount = REQUIRED_DOC_KEYS.filter((k) => {
-    const f = d.documents[k];
-    if (!f) return false;
-    return Array.isArray(f) ? f.length > 0 : true;
-  }).length;
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Review & Submit</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Confirm your contract request before sending it for EDR staff review.
-        </p>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2">
-        <Card className="gap-0 py-0 overflow-hidden">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              Contract & Service
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="Type"
-              value={d.contractType === "new" ? "New Contract" : "Renewal"}
-              target={1}
-            />
-            <Row
-              label="Contract ID"
-              value={d.draftContractId || d.previousContractRef}
-              target={1}
-            />
-            <Row
-              label="Service"
-              value={
-                d.serviceType === "rail"
-                  ? "Rail Only"
-                  : d.serviceType === "rail_forwarding"
-                    ? "Rail + Forwarding"
-                    : ""
-              }
-              target={2}
-            />
-          </CardContent>
-        </Card>
-
-        <Card className="gap-0 py-0 overflow-hidden">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              First & Last Mile
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="First Mile"
-              value={d.firstMileEnabled ? d.pickUpAddress : "Not requested"}
-              target={3}
-            />
-            <Row
-              label="Last Mile"
-              value={d.lastMileEnabled ? d.deliveryAddress : "Not requested"}
-              target={3}
-            />
-            <Row
-              label="Equipment Return"
-              value={
-                d.equipmentReturn === "with_return"
-                  ? "With Return"
-                  : "Without Return"
-              }
-              target={3}
-            />
-          </CardContent>
-        </Card>
-
-        <Card className="gap-0 py-0 overflow-hidden">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              Route & Cargo
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="Route"
-              value={`${d.originYard} → ${d.destinationYard}`}
-              target={4}
-            />
-            <Row
-              label="Workflow"
-              value={
-                direction
-                  ? direction.charAt(0).toUpperCase() + direction.slice(1)
-                  : ""
-              }
-              target={4}
-            />
-            <Row
-              label="Weight (VGM)"
-              value={d.cargoWeight ? `${d.cargoWeight} tons` : ""}
-              target={5}
-            />
-            <Row label="Cargo" value={cargoValue} target={5} />
-            <Row
-              label="Modifiers"
-              value={
-                [
-                  d.isHazardous && "Hazardous",
-                  d.isRefrigerated && "Refrigerated",
-                ]
-                  .filter(Boolean)
-                  .join(", ") || "None"
-              }
-              target={4}
-            />
-          </CardContent>
-        </Card>
-
-        <Card className="gap-0 py-0 overflow-hidden">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              Container & Wagons
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="Container"
-              value={`${d.quantity} × ${d.containerType}`}
-              target={5}
-            />
-            <Row
-              label="VGM per Container"
-              value={d.vgm ? `${d.vgm} tons` : ""}
-              target={5}
-            />
-            <Row
-              label="Wagons"
-              value={
-                wagons
-                  ? `${wagons.totalWagons} wagon${wagons.totalWagons > 1 ? "s" : ""}`
-                  : ""
-              }
-              target={6}
-            />
-            <Row
-              label="Documents"
-              value={`${uploadedCount}/${REQUIRED_DOC_KEYS.length} mandatory uploaded`}
-              target={7}
-            />
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="space-y-3">
-        <Label className="text-sm font-medium">Additional Notes</Label>
-        <Textarea
-          placeholder="Any special instructions or notes for EDR operations..."
-          value={d.notes}
-          onChange={(e) => set("notes", e.target.value)}
-          rows={3}
-        />
-      </div>
-
-      <label className="flex cursor-pointer items-start gap-3">
-        <button
-          type="button"
-          role="checkbox"
-          aria-checked={d.termsAccepted}
-          onClick={() => set("termsAccepted", !d.termsAccepted)}
-          className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 transition ${d.termsAccepted ? "border-primary bg-primary" : "border-input"
-            }`}
-        >
-          {d.termsAccepted && (
-            <Check className="h-3 w-3 text-primary-foreground" />
-          )}
-        </button>
-        <span className="text-sm text-muted-foreground">
-          I confirm the information is accurate and agree to EDR's{" "}
-          <span className="text-primary">
-            freight contract terms and conditions
-          </span>
-          .
-        </span>
-      </label>
-    </div>
-  );
-}
-
-// ── Main Page ──────────────────────────────────────────────────────────────────
+import {
+  MOCK_VALID_CONTRACTS,
+  STEPS,
+  bookingFormSchema,
+  calcWagons,
+  getRouteDirection,
+  initialBookingFormValues,
+  stepFields,
+  type BookingFormValues,
+} from "./new-booking-form/schema";
+import { StepIndicator } from "./new-booking-form/StepIndicator";
+import {
+  Step1ContractType,
+  Step2ServiceType,
+  Step3FirstLastMile,
+  Step4Route,
+  Step5CargoDetails,
+  Step6WagonAllocation,
+  Step7Documents,
+  Step8Review,
+} from "./new-booking-form/steps";
 
 export default function NewBookingPage() {
   const navigate = useNavigate();
   const [step, setStep] = useState(1);
-  const [data, setData] = useState<FormData>(INITIAL_DATA);
   const [renewalValidating, setRenewalValidating] = useState(false);
   const [renewalValid, setRenewalValid] = useState<boolean | null>(null);
   const [submitted, setSubmitted] = useState(false);
 
-  const direction = useMemo(
-    () => getRouteDirection(data.originYard, data.destinationYard),
-    [data.originYard, data.destinationYard],
-  );
-  const wagons = useMemo(() => {
-    if (!data.containerType || !data.quantity) return null;
-    return calcWagons(data.containerType, parseInt(data.quantity) || 1);
-  }, [data.containerType, data.quantity]);
+  const form = useForm<BookingFormValues>({
+    resolver: zodResolver(bookingFormSchema),
+    defaultValues: initialBookingFormValues,
+    mode: "onChange",
+  });
 
-  function set<K extends keyof FormData>(k: K, v: FormData[K]) {
-    setData((prev) => ({ ...prev, [k]: v }));
-  }
+  const originYard = form.watch("originYard");
+  const destinationYard = form.watch("destinationYard");
+  const containerType = form.watch("containerType");
+  const quantity = form.watch("quantity");
+  const previousContractRef = form.watch("previousContractRef");
+  const contractId =
+    form.watch("draftContractId") || form.watch("previousContractRef");
+
+  const direction = useMemo(
+    () => getRouteDirection(originYard, destinationYard),
+    [originYard, destinationYard],
+  );
+
+  const wagons = useMemo(() => {
+    if (!containerType || !quantity) return null;
+    return calcWagons(containerType, parseInt(quantity) || 1);
+  }, [containerType, quantity]);
+
+  useEffect(() => {
+    setRenewalValid(null);
+  }, [previousContractRef]);
 
   function validateRenewal() {
+    const previousContractRef = form.getValues("previousContractRef").trim();
+
+    if (!previousContractRef) {
+      form.setError("previousContractRef", {
+        type: "manual",
+        message: "Enter a previous contract reference.",
+      });
+      return;
+    }
+
     setRenewalValidating(true);
     setRenewalValid(null);
     setTimeout(() => {
-      setRenewalValidating(false);
-      setRenewalValid(
-        MOCK_VALID_CONTRACTS.includes(data.previousContractRef.toUpperCase()),
+      const valid = MOCK_VALID_CONTRACTS.includes(
+        previousContractRef.toUpperCase(),
       );
+      setRenewalValidating(false);
+      setRenewalValid(valid);
+      if (!valid) {
+        form.setError("previousContractRef", {
+          type: "manual",
+          message: "Contract Reference Number not found or unauthorized.",
+        });
+      } else {
+        form.clearErrors("previousContractRef");
+      }
     }, 1200);
   }
 
-  function canProceed(): boolean {
-    switch (step) {
-      case 1:
-        if (data.contractType === "new") return !!data.draftContractId;
-        if (data.contractType === "renewal") return renewalValid === true;
-        return false;
-      case 2:
-        return !!data.serviceType;
-      case 3:
-        if (data.firstMileEnabled && !data.pickUpAddress) return false;
-        if (data.lastMileEnabled && !data.deliveryAddress) return false;
-        return true;
-      case 4:
-        if (!data.originYard || !data.destinationYard) return false;
-        return true;
-      case 5:
-        if (!data.cargoType) return false;
-        if (data.cargoType === "bulk") {
-          if (!data.freightType) return false;
-          if (data.freightType === "bulk") {
-            if (!data.bulkCommodity) return false;
-            if (data.bulkCommodity === "Others" && !data.bulkCommodityOther)
-              return false;
-          }
-          if (data.freightType === "break_bulk") {
-            if (!data.breakBulkType) return false;
-            if (data.breakBulkType === "Others" && !data.breakBulkTypeOther)
-              return false;
-          }
-          if (!data.cargoWeight) return false;
-          return true;
-        }
-        return !!(data.containerType && data.quantity && data.vgm);
-      case 6:
-        return true;
-      case 7:
-        return REQUIRED_DOC_KEYS.every((k) => {
-          const f = data.documents[k];
-          if (!f) return false;
-          return Array.isArray(f) ? f.length > 0 : true;
+  async function handleContinue() {
+    const valid = await form.trigger(stepFields[step], { shouldFocus: true });
+    if (!valid) return;
+
+    if (step === 1 && form.getValues("contractType") === "renewal") {
+      if (renewalValid !== true) {
+        form.setError("previousContractRef", {
+          type: "manual",
+          message:
+            "Validate the previous contract reference before continuing.",
         });
-      case 8:
-        return data.termsAccepted;
-      default:
-        return true;
+        return;
+      }
     }
+
+    setStep((currentStep) => Math.min(STEPS.length, currentStep + 1));
   }
 
-  function handleSubmit() {
+  function handleSubmit(data: BookingFormValues) {
+    if (data.contractType === "renewal" && renewalValid !== true) {
+      form.setError("previousContractRef", {
+        type: "manual",
+        message: "Validate the previous contract reference before submitting.",
+      });
+      setStep(1);
+      return;
+    }
+
     setSubmitted(true);
     setTimeout(() => navigate("/bookings"), 2500);
   }
@@ -1561,7 +137,7 @@ export default function NewBookingPage() {
             notified once approved.
           </p>
           <p className="mt-4 font-mono text-sm font-semibold text-primary">
-            {data.draftContractId || data.previousContractRef}
+            {contractId}
           </p>
         </div>
       </div>
@@ -1569,8 +145,11 @@ export default function NewBookingPage() {
   }
 
   return (
-    <div className="flex flex-col">
-      {/* Sticky step indicator */}
+    <form
+      id="new-booking-form"
+      className="flex flex-col"
+      onSubmit={form.handleSubmit(handleSubmit)}
+    >
       <div className="sticky top-0 z-20 border-b border-border bg-background">
         <div className="mx-auto max-w-4xl space-y-3 px-6 py-3">
           <Breadcrumbs
@@ -1579,61 +158,31 @@ export default function NewBookingPage() {
               { label: "New Contract Request" },
             ]}
           />
-          <div className="flex items-center">
-            {STEPS.map((s, idx) => (
-              <Fragment key={s.id}>
-                <div className="flex shrink-0 flex-col items-center gap-1">
-                  <div
-                    className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition-colors ${step > s.id
-                        ? "bg-primary text-primary-foreground"
-                        : step === s.id
-                          ? "border-2 border-primary text-primary"
-                          : "bg-muted text-muted-foreground"
-                      }`}
-                  >
-                    {step > s.id ? <Check className="h-3.5 w-3.5" /> : s.id}
-                  </div>
-                  <span
-                    className={`hidden text-[10px] font-medium lg:block ${step >= s.id ? "text-foreground" : "text-muted-foreground"
-                      }`}
-                  >
-                    {s.short}
-                  </span>
-                </div>
-                {idx < STEPS.length - 1 && (
-                  <div
-                    className={`mx-1 h-0.5 flex-1 rounded-full transition-colors ${step > s.id ? "bg-primary" : "bg-border"
-                      }`}
-                  />
-                )}
-              </Fragment>
-            ))}
-          </div>
+          <StepIndicator step={step} />
         </div>
       </div>
 
-      {/* Content */}
       <div className="flex-1">
         <div className="mx-auto max-w-4xl px-6 py-8">
           {step === 1 && (
-            <Step1
-              d={data}
-              set={set}
+            <Step1ContractType
+              form={form}
               renewalValid={renewalValid}
               renewalValidating={renewalValidating}
               onValidate={validateRenewal}
             />
           )}
-          {step === 2 && <Step2 d={data} set={set} />}
-          {step === 3 && <Step3 d={data} set={set} />}
-          {step === 4 && <Step4 d={data} set={set} />}
-          {step === 5 && <Step5 d={data} set={set} direction={direction} />}
-          {step === 6 && <Step6 d={data} set={set} wagons={wagons} />}
-          {step === 7 && <Step7Docs d={data} set={set} />}
+          {step === 2 && <Step2ServiceType form={form} />}
+          {step === 3 && <Step3FirstLastMile form={form} />}
+          {step === 4 && <Step4Route form={form} />}
+          {step === 5 && (
+            <Step5CargoDetails form={form} direction={direction} />
+          )}
+          {step === 6 && <Step6WagonAllocation form={form} wagons={wagons} />}
+          {step === 7 && <Step7Documents form={form} />}
           {step === 8 && (
             <Step8Review
-              d={data}
-              set={set}
+              form={form}
               setStep={setStep}
               wagons={wagons}
               direction={direction}
@@ -1642,35 +191,32 @@ export default function NewBookingPage() {
         </div>
       </div>
 
-      {/* Sticky footer */}
       <div className="sticky bottom-0 z-20 border-t border-border bg-background px-6 py-4">
         <div className="mx-auto flex max-w-4xl items-center justify-between">
           <Button
+            type="button"
             variant="outline"
-            onClick={() => setStep((s) => Math.max(1, s - 1))}
+            onClick={() =>
+              setStep((currentStep) => Math.max(1, currentStep - 1))
+            }
             disabled={step === 1}
           >
             <ChevronLeft className="mr-1 h-4 w-4" />
             Back
           </Button>
-          <div className="flex items-center gap-3">
-            {step < STEPS.length ? (
-              <Button
-                onClick={() => setStep((s) => s + 1)}
-                disabled={!canProceed()}
-              >
-                Continue
-                <ChevronRight className="ml-1 h-4 w-4" />
-              </Button>
-            ) : (
-              <Button onClick={handleSubmit} disabled={!canProceed()}>
-                <CheckCircle2 className="mr-2 h-4 w-4" />
-                Submit Contract Request
-              </Button>
-            )}
-          </div>
+          {step < STEPS.length ? (
+            <Button type="button" onClick={handleContinue}>
+              Continue
+              <ChevronRight className="ml-1 h-4 w-4" />
+            </Button>
+          ) : (
+            <Button type="submit" form="new-booking-form">
+              <CheckCircle2 className="mr-2 h-4 w-4" />
+              Submit Contract Request
+            </Button>
+          )}
         </div>
       </div>
-    </div>
+    </form>
   );
 }
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/StepIndicator.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/StepIndicator.tsx
new file mode 100644
index 000000000..76ef8e30d
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/StepIndicator.tsx
@@ -0,0 +1,41 @@
+import { Fragment } from "react";
+import { Check } from "lucide-react";
+import { STEPS } from "./schema";
+
+export function StepIndicator({ step }: { step: number }) {
+  return (
+    <div className="flex items-center">
+      {STEPS.map((item, index) => (
+        <Fragment key={item.id}>
+          <div className="flex shrink-0 flex-col items-center gap-1">
+            <div
+              className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition-colors ${
+                step > item.id
+                  ? "bg-primary text-primary-foreground"
+                  : step === item.id
+                    ? "border-2 border-primary text-primary"
+                    : "bg-muted text-muted-foreground"
+              }`}
+            >
+              {step > item.id ? <Check className="h-3.5 w-3.5" /> : item.id}
+            </div>
+            <span
+              className={`hidden text-[10px] font-medium lg:block ${
+                step >= item.id ? "text-foreground" : "text-muted-foreground"
+              }`}
+            >
+              {item.short}
+            </span>
+          </div>
+          {index < STEPS.length - 1 && (
+            <div
+              className={`mx-1 h-0.5 flex-1 rounded-full transition-colors ${
+                step > item.id ? "bg-primary" : "bg-border"
+              }`}
+            />
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
new file mode 100644
index 000000000..a34f716c1
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
@@ -0,0 +1,491 @@
+import * as z from "zod";
+
+export const STATIONS = [
+  "Addis Ababa",
+  "Adama",
+  "Mojo",
+  "Awash",
+  "Mieso",
+  "Dire Dawa",
+  "Aysha",
+  "Ali Sabieh",
+  "Holhol",
+  "Djibouti City",
+] as const;
+
+export const ETHIOPIA_STATIONS = new Set<string>([
+  "Addis Ababa",
+  "Adama",
+  "Mojo",
+  "Awash",
+  "Mieso",
+  "Dire Dawa",
+]);
+
+export const BULK_COMMODITIES = [
+  "Coffee",
+  "Beans",
+  "Fertilizer",
+  "Sugar",
+  "Oil",
+  "Livestock",
+  "Steel",
+  "Others",
+] as const;
+
+export const BREAK_BULK_TYPES = ["Machinery", "Ro-Ro", "Others"] as const;
+
+export const MOCK_VALID_CONTRACTS = [
+  "EDR-2024-10001",
+  "EDR-2024-10002",
+  "EDR-2023-88123",
+  "EDR-2022-55442",
+];
+
+export const REQUIRED_DOC_KEYS = [
+  "tin_certificate",
+  "business_license",
+  "business_registration",
+  "national_id",
+] as const;
+
+export const STEPS = [
+  { id: 1, label: "Contract Type", short: "Contract" },
+  { id: 2, label: "Service Type", short: "Service" },
+  { id: 3, label: "First & Last Mile", short: "Mile" },
+  { id: 4, label: "Route", short: "Route" },
+  { id: 5, label: "Cargo Details", short: "Cargo" },
+  { id: 6, label: "Wagon Allocation", short: "Wagons" },
+  { id: 7, label: "Documents", short: "Docs" },
+  { id: 8, label: "Review & Submit", short: "Submit" },
+] as const;
+
+export const BOOKING_DOCS_SETTING = {
+  id: "booking-compliance",
+  createdAt: "",
+  updatedAt: "",
+  deletedAt: null,
+  code: "booking_compliance_docs",
+  label: "Compliance Documents",
+  description:
+    "Upload your company's legal credentials. All mandatory documents must be submitted before the contract request can be reviewed by EDR Line Staff.",
+  entity: "booking" as const,
+  fields: [
+    {
+      id: "f1",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "booking-compliance",
+      fileKey: "tin_certificate",
+      fileLabel: "TIN Certificate",
+      helpText:
+        "Tax Identification Number certificate issued by ERCA (10-digit TIN).",
+      isRequired: true,
+      isMultiple: false,
+      maxFiles: 1,
+      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+      maxSizeMb: 5,
+      order: 1,
+    },
+    {
+      id: "f2",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "booking-compliance",
+      fileKey: "business_license",
+      fileLabel: "Business / Investment License",
+      helpText:
+        "Current business or investment license issued by the relevant government authority.",
+      isRequired: true,
+      isMultiple: false,
+      maxFiles: 1,
+      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+      maxSizeMb: 5,
+      order: 2,
+    },
+    {
+      id: "f3",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "booking-compliance",
+      fileKey: "business_registration",
+      fileLabel: "Business Registration Certificate",
+      helpText: "Certificate of registration from the relevant authority.",
+      isRequired: true,
+      isMultiple: false,
+      maxFiles: 1,
+      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+      maxSizeMb: 5,
+      order: 3,
+    },
+    {
+      id: "f4",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "booking-compliance",
+      fileKey: "national_id",
+      fileLabel: "National ID / Passport",
+      helpText:
+        "Valid government-issued ID or passport of the authorized signatory.",
+      isRequired: true,
+      isMultiple: false,
+      maxFiles: 1,
+      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+      maxSizeMb: 5,
+      order: 4,
+    },
+    {
+      id: "f5",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "booking-compliance",
+      fileKey: "power_of_attorney",
+      fileLabel: "Power of Attorney (PoA)",
+      helpText:
+        "Required only if a representative is signing on behalf of the company.",
+      isRequired: false,
+      isMultiple: false,
+      maxFiles: 1,
+      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+      maxSizeMb: 5,
+      order: 5,
+    },
+  ],
+};
+
+const requiredString = (message: string) =>
+  z.string().trim().min(1, { message });
+
+const fileValueSchema = z.union([
+  z.custom<File>(),
+  z.array(z.custom<File>()),
+  z.null(),
+]);
+
+export const bookingFormSchema = z
+  .object({
+    contractType: z.enum(["new", "renewal", ""]),
+    previousContractRef: z.string(),
+    draftContractId: z.string(),
+    serviceType: z.enum(["rail", "rail_forwarding", ""]),
+    firstMileEnabled: z.boolean(),
+    pickUpAddress: z.string(),
+    lastMileEnabled: z.boolean(),
+    deliveryAddress: z.string(),
+    equipmentReturn: z.enum(["with_return", "without_return"]),
+    originYard: z.string(),
+    destinationYard: z.string(),
+    cargoType: z.enum(["container", "bulk", ""]),
+    cargoWeight: z.string(),
+    freightType: z.enum(["bulk", "break_bulk", ""]),
+    bulkCommodity: z.string(),
+    bulkCommodityOther: z.string(),
+    breakBulkType: z.string(),
+    breakBulkTypeOther: z.string(),
+    isHazardous: z.boolean(),
+    isRefrigerated: z.boolean(),
+    containerType: z.enum(["20ft", "40ft", ""]),
+    quantity: z.string(),
+    vgm: z.string(),
+    consolidationEnabled: z.boolean(),
+    documents: z.record(z.string(), fileValueSchema),
+    notes: z.string(),
+    termsAccepted: z.boolean(),
+  })
+  .superRefine((data, ctx) => {
+    if (!data.contractType) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["contractType"],
+        message: "Select a contract type.",
+      });
+    }
+
+    if (data.contractType === "new" && !data.draftContractId.trim()) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["draftContractId"],
+        message: "A draft contract ID is required.",
+      });
+    }
+
+    if (data.contractType === "renewal" && !data.previousContractRef.trim()) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["previousContractRef"],
+        message: "Enter a previous contract reference.",
+      });
+    }
+
+    if (!data.serviceType) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["serviceType"],
+        message: "Select a service type.",
+      });
+    }
+
+    if (data.firstMileEnabled && !data.pickUpAddress.trim()) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["pickUpAddress"],
+        message: "Enter the pick-up address.",
+      });
+    }
+
+    if (data.lastMileEnabled && !data.deliveryAddress.trim()) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["deliveryAddress"],
+        message: "Enter the delivery address.",
+      });
+    }
+
+    if (!data.originYard) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["originYard"],
+        message: "Select an origin yard.",
+      });
+    }
+
+    if (!data.destinationYard) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["destinationYard"],
+        message: "Select a destination yard.",
+      });
+    }
+
+    if (
+      data.originYard &&
+      data.destinationYard &&
+      data.originYard === data.destinationYard
+    ) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["destinationYard"],
+        message: "Destination must be different from origin.",
+      });
+    }
+
+    if (!data.cargoType) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["cargoType"],
+        message: "Select a cargo type.",
+      });
+    }
+
+    if (data.cargoType === "bulk") {
+      if (!data.freightType) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["freightType"],
+          message: "Select a freight type.",
+        });
+      }
+
+      if (data.freightType === "bulk") {
+        if (!data.bulkCommodity) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["bulkCommodity"],
+            message: "Select a commodity.",
+          });
+        }
+        if (
+          data.bulkCommodity === "Others" &&
+          !data.bulkCommodityOther.trim()
+        ) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["bulkCommodityOther"],
+            message: "Specify the commodity.",
+          });
+        }
+      }
+
+      if (data.freightType === "break_bulk") {
+        if (!data.breakBulkType) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["breakBulkType"],
+            message: "Select a break-bulk type.",
+          });
+        }
+        if (
+          data.breakBulkType === "Others" &&
+          !data.breakBulkTypeOther.trim()
+        ) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["breakBulkTypeOther"],
+            message: "Specify the break-bulk type.",
+          });
+        }
+      }
+
+      const cargoWeight = Number(data.cargoWeight);
+      if (!data.cargoWeight || Number.isNaN(cargoWeight) || cargoWeight <= 0) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["cargoWeight"],
+          message: "Enter a cargo weight greater than 0.",
+        });
+      }
+    }
+
+    if (data.cargoType === "container") {
+      if (!data.containerType) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["containerType"],
+          message: "Select a container type.",
+        });
+      }
+
+      const quantity = Number(data.quantity);
+      if (!data.quantity || !Number.isInteger(quantity) || quantity < 1) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["quantity"],
+          message: "Enter at least 1 container.",
+        });
+      }
+
+      const vgm = Number(data.vgm);
+      if (!data.vgm || Number.isNaN(vgm) || vgm <= 0) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["vgm"],
+          message: "Enter VGM greater than 0.",
+        });
+      }
+    }
+
+    for (const key of REQUIRED_DOC_KEYS) {
+      const value = data.documents[key];
+      const hasFile = Array.isArray(value) ? value.length > 0 : Boolean(value);
+      if (!hasFile) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["documents", key],
+          message: "Upload this required document.",
+        });
+      }
+    }
+
+    if (!data.termsAccepted) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["termsAccepted"],
+        message: "Accept the freight contract terms to submit.",
+      });
+    }
+  });
+
+export type BookingFormValues = z.infer<typeof bookingFormSchema>;
+
+export const initialBookingFormValues: BookingFormValues = {
+  contractType: "",
+  previousContractRef: "",
+  draftContractId: "",
+  serviceType: "",
+  firstMileEnabled: false,
+  pickUpAddress: "",
+  lastMileEnabled: false,
+  deliveryAddress: "",
+  equipmentReturn: "with_return",
+  originYard: "",
+  destinationYard: "",
+  cargoType: "",
+  cargoWeight: "",
+  freightType: "",
+  bulkCommodity: "",
+  bulkCommodityOther: "",
+  breakBulkType: "",
+  breakBulkTypeOther: "",
+  isHazardous: false,
+  isRefrigerated: false,
+  containerType: "",
+  quantity: "1",
+  vgm: "",
+  consolidationEnabled: false,
+  documents: {},
+  notes: "",
+  termsAccepted: false,
+};
+
+export const stepFields: Record<number, Array<keyof BookingFormValues>> = {
+  1: ["contractType", "previousContractRef", "draftContractId"],
+  2: ["serviceType"],
+  3: [
+    "firstMileEnabled",
+    "pickUpAddress",
+    "lastMileEnabled",
+    "deliveryAddress",
+    "equipmentReturn",
+  ],
+  4: ["originYard", "destinationYard", "isHazardous", "isRefrigerated"],
+  5: [
+    "cargoType",
+    "cargoWeight",
+    "freightType",
+    "bulkCommodity",
+    "bulkCommodityOther",
+    "breakBulkType",
+    "breakBulkTypeOther",
+    "containerType",
+    "quantity",
+    "vgm",
+  ],
+  6: ["consolidationEnabled"],
+  7: ["documents"],
+  8: ["notes", "termsAccepted"],
+};
+
+export type RouteDirection = "import" | "export" | "domestic" | null;
+
+export interface WagonCalcResult {
+  totalWagons: number;
+  hasOddUnit: boolean;
+  sharedWagons: number;
+}
+
+export function genContractId(): string {
+  const yr = new Date().getFullYear();
+  const n = Math.floor(10000 + Math.random() * 90000);
+  return `EDR-DRAFT-${yr}-${n}`;
+}
+
+export function getRouteDirection(
+  origin: string,
+  dest: string,
+): RouteDirection {
+  if (!origin || !dest) return null;
+  const oEth = ETHIOPIA_STATIONS.has(origin);
+  const dEth = ETHIOPIA_STATIONS.has(dest);
+  if (oEth && !dEth) return "export";
+  if (!oEth && dEth) return "import";
+  if (oEth && dEth) return "domestic";
+  return null;
+}
+
+export function calcWagons(
+  type: BookingFormValues["containerType"],
+  qty: number,
+): WagonCalcResult {
+  if (type === "40ft") {
+    return { totalWagons: qty, hasOddUnit: false, sharedWagons: qty };
+  }
+
+  const pairs = Math.floor(qty / 2);
+  const odd = qty % 2;
+  return { totalWagons: pairs + odd, hasOddUnit: odd > 0, sharedWagons: pairs };
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx
new file mode 100644
index 000000000..298381ba0
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx
@@ -0,0 +1,157 @@
+import type { ReactNode } from "react";
+import type {
+  ControllerRenderProps,
+  FieldError as RhfFieldError,
+} from "react-hook-form";
+import {
+  AlertTriangle,
+  Check,
+  CheckCircle2,
+  Info,
+  XCircle,
+} from "lucide-react";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@edr/ui-common";
+import type { BookingFormValues } from "./schema";
+import { cn } from "@/lib/utils";
+
+export function OptionCard({
+  selected,
+  onClick,
+  disabled,
+  children,
+}: {
+  selected: boolean;
+  onClick?: () => void;
+  disabled?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={`relative w-full rounded-xl border-2 p-4 text-left transition ${disabled
+          ? "cursor-not-allowed border-border bg-muted opacity-60"
+          : selected
+            ? "border-primary bg-primary/5"
+            : "border-border bg-card hover:border-primary/40"
+        }`}
+    >
+      {selected && !disabled && (
+        <span className="absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary">
+          <Check className="h-3 w-3 text-primary-foreground" />
+        </span>
+      )}
+      {children}
+    </button>
+  );
+}
+
+export function AlertBox({
+  tone,
+  children,
+}: {
+  tone: "warning" | "error" | "success" | "info";
+  children: ReactNode;
+}) {
+  const styles = {
+    warning: "bg-amber-50 border-amber-200 text-amber-800",
+    error: "bg-red-50 border-red-200 text-red-800",
+    success: "bg-emerald-50 border-emerald-200 text-emerald-800",
+    info: "bg-sky-50 border-sky-200 text-sky-800",
+  };
+  const icons = {
+    warning: <AlertTriangle className="h-4 w-4 shrink-0 text-amber-500" />,
+    error: <XCircle className="h-4 w-4 shrink-0 text-red-500" />,
+    success: <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-600" />,
+    info: <Info className="h-4 w-4 shrink-0 text-sky-500" />,
+  };
+
+  return (
+    <div
+      className={`flex items-start gap-3 rounded-xl border p-3 text-sm ${styles[tone]}`}
+    >
+      {icons[tone]}
+      <div>{children}</div>
+    </div>
+  );
+}
+
+export function StepLabel({ children }: { children: ReactNode }) {
+  return (
+    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+      {children}
+    </p>
+  );
+}
+
+export function StepHeader({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div>
+      <h2 className="text-xl font-bold tracking-tight">{title}</h2>
+      <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+    </div>
+  );
+}
+
+export function SelectField({
+  field,
+  error,
+  label,
+  placeholder,
+  children,
+}: {
+  field: ControllerRenderProps<BookingFormValues>;
+  error?: RhfFieldError;
+  label: string;
+  placeholder: string;
+  children: ReactNode;
+}) {
+  return (
+    <Field data-invalid={Boolean(error)}>
+      <FieldLabel>{label}</FieldLabel>
+      <Select value={String(field.value)} onValueChange={field.onChange}>
+        <SelectTrigger
+          className={cn("w-full ", error ? "border-destructive!" : "")}
+          aria-invalid={Boolean(error)}
+        >
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>{children}</SelectContent>
+      </Select>
+      <FieldError errors={[error]} />
+    </Field>
+  );
+}
+
+export function SelectOptions({ options }: { options: readonly string[] }) {
+  return (
+    <>
+      {options.map((option) => (
+        <SelectItem key={option} value={option}>
+          {option}
+        </SelectItem>
+      ))}
+    </>
+  );
+}
+
+export function FormFieldDescription({ children }: { children: ReactNode }) {
+  return <FieldDescription>{children}</FieldDescription>;
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx
new file mode 100644
index 000000000..8ad06f17f
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx
@@ -0,0 +1,1303 @@
+import { Controller, type UseFormReturn } from "react-hook-form";
+import {
+  AlertTriangle,
+  Check,
+  FileText,
+  Flame,
+  Loader2,
+  MapPin,
+  Package,
+  RefreshCw,
+  Snowflake,
+  Train,
+  Weight,
+} from "lucide-react";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Field,
+  FieldError,
+  FieldLabel,
+  Input,
+  Separator,
+  SmartFileInput,
+  Switch,
+  Textarea,
+} from "@edr/ui-common";
+import {
+  BOOKING_DOCS_SETTING,
+  BREAK_BULK_TYPES,
+  BULK_COMMODITIES,
+  REQUIRED_DOC_KEYS,
+  STATIONS,
+  genContractId,
+  getRouteDirection,
+  type BookingFormValues,
+  type RouteDirection,
+  type WagonCalcResult,
+} from "./schema";
+import {
+  AlertBox,
+  OptionCard,
+  SelectField,
+  SelectOptions,
+  StepHeader,
+  StepLabel,
+} from "./shared";
+
+type BookingForm = UseFormReturn<BookingFormValues>;
+
+function getUploadedRequiredCount(documents: BookingFormValues["documents"]) {
+  return REQUIRED_DOC_KEYS.filter((key) => {
+    const file = documents[key];
+    return Array.isArray(file) ? file.length > 0 : Boolean(file);
+  }).length;
+}
+
+function OptionFieldError({ error }: { error?: { message?: string } }) {
+  return <FieldError errors={[error]} />;
+}
+
+export function Step1ContractType({
+  form,
+  renewalValid,
+  renewalValidating,
+  onValidate,
+}: {
+  form: BookingForm;
+  renewalValid: boolean | null;
+  renewalValidating: boolean;
+  onValidate: () => void;
+}) {
+  const contractType = form.watch("contractType");
+  const draftContractId = form.watch("draftContractId");
+  const previousContractRef = form.watch("previousContractRef");
+  const errors = form.formState.errors;
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Contract Type"
+        description="New contract or renewal of an existing one."
+      />
+
+      <Controller
+        name="contractType"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <div className="grid gap-3 md:grid-cols-2">
+              <OptionCard
+                selected={field.value === "new"}
+                onClick={() => {
+                  field.onChange("new");
+                  form.clearErrors(["contractType", "previousContractRef"]);
+                  if (!draftContractId) {
+                    form.setValue("draftContractId", genContractId(), {
+                      shouldDirty: true,
+                      shouldValidate: true,
+                    });
+                  }
+                }}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
+                  <FileText className="h-4 w-4 text-primary" />
+                </div>
+                <p className="font-semibold">New Contract</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Blank contract form. A draft ID is auto-generated.
+                </p>
+                {field.value === "new" && draftContractId && (
+                  <p className="mt-2 font-mono text-xs font-semibold text-primary">
+                    {draftContractId}
+                  </p>
+                )}
+              </OptionCard>
+
+              <OptionCard
+                selected={field.value === "renewal"}
+                onClick={() => {
+                  field.onChange("renewal");
+                  form.clearErrors("contractType");
+                }}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100">
+                  <RefreshCw className="h-4 w-4 text-sky-600" />
+                </div>
+                <p className="font-semibold">Contract Renewal</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Enter a previous reference to auto-populate historical
+                  parameters.
+                </p>
+              </OptionCard>
+            </div>
+            <OptionFieldError error={fieldState.error} />
+          </Field>
+        )}
+      />
+
+      {contractType === "renewal" && (
+        <div className="space-y-3 pt-1">
+          <Controller
+            name="previousContractRef"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel htmlFor="previousContractRef">
+                  Previous Contract Reference Number
+                </FieldLabel>
+                <div className="flex gap-2">
+                  <Input
+                    {...field}
+                    id="previousContractRef"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="e.g. EDR-2024-10001"
+                    className="font-mono"
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={onValidate}
+                    disabled={!previousContractRef || renewalValidating}
+                  >
+                    {renewalValidating ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      "Validate"
+                    )}
+                  </Button>
+                </div>
+                <FieldError
+                  errors={[fieldState.error, errors.draftContractId]}
+                />
+              </Field>
+            )}
+          />
+          {renewalValid === true && (
+            <AlertBox tone="success">
+              <strong>Contract found.</strong> Company details, route, and wagon
+              preferences will be pre-filled.
+            </AlertBox>
+          )}
+          {renewalValid === false && (
+            <AlertBox tone="error">
+              Contract Reference Number not found or unauthorized. Try{" "}
+              <span className="font-mono">EDR-2024-10001</span>.
+            </AlertBox>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function Step2ServiceType({ form }: { form: BookingForm }) {
+  const serviceType = form.watch("serviceType");
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Service Type"
+        description="Select the service combination you require."
+      />
+
+      <Controller
+        name="serviceType"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <div className="grid gap-3 md:grid-cols-2">
+              <OptionCard
+                selected={serviceType === "rail"}
+                onClick={() => field.onChange("rail")}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100">
+                  <Train className="h-4 w-4 text-indigo-600" />
+                </div>
+                <p className="font-semibold">Rail Transport Only</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Rail transport along the EDR corridor, with optional
+                  first/last mile trucking.
+                </p>
+                <Badge className="mt-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-100">
+                  Option A
+                </Badge>
+              </OptionCard>
+
+              <OptionCard
+                selected={serviceType === "rail_forwarding"}
+                onClick={() => field.onChange("rail_forwarding")}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
+                  <Package className="h-4 w-4 text-primary" />
+                </div>
+                <p className="font-semibold">
+                  Rail Transport & Freight Forwarding
+                </p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Rail transport plus documentation, customs liaison, and a
+                  dedicated coordinator.
+                </p>
+                <Badge className="mt-2 bg-emerald-100 text-emerald-700 hover:bg-emerald-100">
+                  Option B
+                </Badge>
+              </OptionCard>
+            </div>
+            <OptionFieldError error={fieldState.error} />
+          </Field>
+        )}
+      />
+
+      <p className="text-xs text-muted-foreground">
+        Customs and Clearance Service cannot be selected independently. It must
+        be bundled with a Rail Transport service.
+      </p>
+    </div>
+  );
+}
+
+export function Step3FirstLastMile({ form }: { form: BookingForm }) {
+  const firstMileEnabled = form.watch("firstMileEnabled");
+  const lastMileEnabled = form.watch("lastMileEnabled");
+  const equipmentReturn = form.watch("equipmentReturn");
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="First & Last Mile"
+        description="Configure trucking and container return options."
+      />
+
+      <div className="divide-y divide-border rounded-xl border border-border">
+        <div className="p-4">
+          <Controller
+            name="firstMileEnabled"
+            control={form.control}
+            render={({ field }) => (
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <p className="text-sm font-medium">First Mile - Pick-up</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Truck pick-up from your premises to the origin rail yard.
+                  </p>
+                </div>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={(value) => {
+                    field.onChange(value);
+                    if (!value) {
+                      form.setValue("pickUpAddress", "", {
+                        shouldDirty: true,
+                        shouldValidate: true,
+                      });
+                    }
+                  }}
+                />
+              </div>
+            )}
+          />
+          {firstMileEnabled && (
+            <Controller
+              name="pickUpAddress"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field className="mt-3" data-invalid={fieldState.invalid}>
+                  <Input
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Pick-up address *"
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+          )}
+        </div>
+
+        <div className="p-4">
+          <Controller
+            name="lastMileEnabled"
+            control={form.control}
+            render={({ field }) => (
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <p className="text-sm font-medium">Last Mile - Delivery</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Truck delivery from the destination rail yard to the final
+                    address.
+                  </p>
+                </div>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={(value) => {
+                    field.onChange(value);
+                    if (!value) {
+                      form.setValue("deliveryAddress", "", {
+                        shouldDirty: true,
+                        shouldValidate: true,
+                      });
+                    }
+                  }}
+                />
+              </div>
+            )}
+          />
+          {lastMileEnabled && (
+            <Controller
+              name="deliveryAddress"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field className="mt-3" data-invalid={fieldState.invalid}>
+                  <Input
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Delivery address *"
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+          )}
+        </div>
+
+        <div className="p-4">
+          <p className="mb-3 text-sm font-medium">Equipment Return</p>
+          <p className="mb-3 text-xs text-muted-foreground">
+            Declare whether the container asset will be returned after
+            unloading.
+          </p>
+          <Controller
+            name="equipmentReturn"
+            control={form.control}
+            render={({ field }) => (
+              <div className="grid gap-2 sm:grid-cols-2">
+                <OptionCard
+                  selected={equipmentReturn === "with_return"}
+                  onClick={() => field.onChange("with_return")}
+                >
+                  <p className="text-sm font-semibold">With Return</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Container returned to EDR after unloading.
+                  </p>
+                </OptionCard>
+                <OptionCard
+                  selected={equipmentReturn === "without_return"}
+                  onClick={() => field.onChange("without_return")}
+                >
+                  <p className="text-sm font-semibold">Without Return</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Container retained by the customer after delivery.
+                  </p>
+                </OptionCard>
+              </div>
+            )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Step4Route({ form }: { form: BookingForm }) {
+  const originYard = form.watch("originYard");
+  const destinationYard = form.watch("destinationYard");
+  const direction = getRouteDirection(originYard, destinationYard);
+  const directionStyle: Record<string, string> = {
+    export: "bg-sky-50 text-sky-800 border-sky-200",
+    import: "bg-amber-50 text-amber-800 border-amber-200",
+    domestic: "bg-muted text-muted-foreground border-border",
+  };
+  const directionLabel: Record<string, string> = {
+    export: "Export workflow (Ethiopia to Djibouti)",
+    import: "Import workflow (Djibouti to Ethiopia)",
+    domestic: "Domestic corridor",
+  };
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Route"
+        description="Select the origin and destination yards."
+      />
+
+      <div className="space-y-3">
+        <StepLabel>Route</StepLabel>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <Controller
+            name="originYard"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <SelectField
+                field={field}
+                error={fieldState.error}
+                label="Origin Yard*"
+                placeholder="Select origin..."
+              >
+                <SelectOptions
+                  options={STATIONS.filter((s) => s !== destinationYard)}
+                />
+              </SelectField>
+            )}
+          />
+          <Controller
+            name="destinationYard"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <SelectField
+                field={field}
+                error={fieldState.error}
+                label="Destination Yard *"
+                placeholder="Select destination..."
+              >
+                <SelectOptions
+                  options={STATIONS.filter((s) => s !== originYard)}
+                />
+              </SelectField>
+            )}
+          />
+        </div>
+        {direction && (
+          <div
+            className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium ${directionStyle[direction]}`}
+          >
+            <MapPin className="h-3.5 w-3.5 shrink-0" />
+            {directionLabel[direction]}
+          </div>
+        )}
+      </div>
+
+      <Separator />
+
+      <div className="space-y-0 divide-y divide-border">
+        <Controller
+          name="isHazardous"
+          control={form.control}
+          render={({ field }) => (
+            <div className="flex items-center justify-between py-3">
+              <div className="flex items-center gap-3">
+                <Flame className="h-4 w-4 shrink-0 text-red-500" />
+                <div>
+                  <p className="text-sm font-medium">Hazardous Material</p>
+                  <p className="text-xs text-muted-foreground">
+                    Applies a Hazard Surcharge to the final bill.
+                  </p>
+                </div>
+              </div>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </div>
+          )}
+        />
+        <Controller
+          name="isRefrigerated"
+          control={form.control}
+          render={({ field }) => (
+            <div className="flex items-center justify-between py-3">
+              <div className="flex items-center gap-3">
+                <Snowflake className="h-4 w-4 shrink-0 text-sky-500" />
+                <div>
+                  <p className="text-sm font-medium">Refrigerated Cargo</p>
+                  <p className="text-xs text-muted-foreground">
+                    Temperature-controlled transport applies a Refrigerator
+                    Surcharge.
+                  </p>
+                </div>
+              </div>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </div>
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function Step5CargoDetails({
+  form,
+  direction,
+}: {
+  form: BookingForm;
+  direction: RouteDirection;
+}) {
+  const cargoType = form.watch("cargoType");
+  const freightType = form.watch("freightType");
+  const bulkCommodity = form.watch("bulkCommodity");
+  const breakBulkType = form.watch("breakBulkType");
+  const containerType = form.watch("containerType");
+  const quantityValue = form.watch("quantity");
+  const vgmValue = form.watch("vgm");
+  const qty = parseInt(quantityValue) || 1;
+  const vgm = parseFloat(vgmValue) || 0;
+
+  let overweightAlert: string | null = null;
+  if (containerType === "20ft" && vgm > 0) {
+    const limit = direction === "export" ? 25 : 20;
+    if (vgm > limit) {
+      overweightAlert = `VGM ${vgm}t exceeds the ${limit}t ${direction ?? "standard"} limit for a 20ft container. An Overweight Surcharge will apply.`;
+    }
+  }
+  if (containerType === "40ft" && vgm > 32.5) {
+    overweightAlert = `VGM ${vgm}t exceeds the 32.5t global limit for a 40ft container. An Overweight Surcharge will apply.`;
+  }
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Cargo Details"
+        description="Define your cargo type, weight, and container configuration."
+      />
+
+      <div className="space-y-3">
+        <StepLabel>Cargo Type *</StepLabel>
+        <Controller
+          name="cargoType"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <div className="grid gap-3 sm:grid-cols-2">
+                <OptionCard
+                  selected={cargoType === "container"}
+                  onClick={() => {
+                    field.onChange("container");
+                    form.setValue("freightType", "", { shouldDirty: true });
+                    form.setValue("cargoWeight", "", { shouldDirty: true });
+                  }}
+                >
+                  <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
+                    <Package className="h-4 w-4 text-primary" />
+                  </div>
+                  <p className="font-semibold">Container</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Pre-packed containerized cargo (20ft / 40ft).
+                  </p>
+                </OptionCard>
+                <OptionCard
+                  selected={cargoType === "bulk"}
+                  onClick={() => {
+                    field.onChange("bulk");
+                    form.setValue("containerType", "", { shouldDirty: true });
+                    form.setValue("vgm", "", { shouldDirty: true });
+                  }}
+                >
+                  <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100">
+                    <Weight className="h-4 w-4 text-amber-600" />
+                  </div>
+                  <p className="font-semibold">Bulk</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Bulk commodities or break-bulk cargo.
+                  </p>
+                </OptionCard>
+              </div>
+              <FieldError errors={[fieldState.error]} />
+            </Field>
+          )}
+        />
+      </div>
+
+      {cargoType === "bulk" && (
+        <>
+          <Separator />
+          <div className="space-y-3">
+            <StepLabel>Freight Type *</StepLabel>
+            <Controller
+              name="freightType"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <OptionCard
+                      selected={freightType === "bulk"}
+                      onClick={() => field.onChange("bulk")}
+                    >
+                      <p className="font-semibold">Bulk</p>
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        Coffee, fertilizer, grain, ore, etc.
+                      </p>
+                    </OptionCard>
+                    <OptionCard
+                      selected={freightType === "break_bulk"}
+                      onClick={() => field.onChange("break_bulk")}
+                    >
+                      <p className="font-semibold">Break-Bulk</p>
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        Machinery, vehicles, project cargo, etc.
+                      </p>
+                    </OptionCard>
+                  </div>
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+
+            {freightType === "bulk" && (
+              <div className="space-y-2">
+                <Controller
+                  name="bulkCommodity"
+                  control={form.control}
+                  render={({ field, fieldState }) => (
+                    <SelectField
+                      field={field}
+                      error={fieldState.error}
+                      label="Commodity *"
+                      placeholder="Select commodity *"
+                    >
+                      <SelectOptions options={BULK_COMMODITIES} />
+                    </SelectField>
+                  )}
+                />
+                {bulkCommodity === "Others" && (
+                  <Controller
+                    name="bulkCommodityOther"
+                    control={form.control}
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <Input
+                          {...field}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="Specify commodity *"
+                        />
+                        <FieldError errors={[fieldState.error]} />
+                      </Field>
+                    )}
+                  />
+                )}
+              </div>
+            )}
+
+            {freightType === "break_bulk" && (
+              <div className="space-y-2">
+                <Controller
+                  name="breakBulkType"
+                  control={form.control}
+                  render={({ field, fieldState }) => (
+                    <SelectField
+                      field={field}
+                      error={fieldState.error}
+                      label="Break-bulk type *"
+                      placeholder="Select type *"
+                    >
+                      <SelectOptions options={BREAK_BULK_TYPES} />
+                    </SelectField>
+                  )}
+                />
+                {breakBulkType === "Others" && (
+                  <Controller
+                    name="breakBulkTypeOther"
+                    control={form.control}
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <Input
+                          {...field}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="Specify break-bulk type *"
+                        />
+                        <FieldError errors={[fieldState.error]} />
+                      </Field>
+                    )}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+
+          <Separator />
+
+          <div className="space-y-3">
+            <StepLabel>Weight</StepLabel>
+            <Controller
+              name="cargoWeight"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="cargoWeight">
+                    Total Cargo Weight - VGM (Tons) *
+                  </FieldLabel>
+                  <div className="relative">
+                    <Weight className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      {...field}
+                      id="cargoWeight"
+                      type="number"
+                      aria-invalid={fieldState.invalid}
+                      placeholder="0.00"
+                      className="pl-9"
+                      min="0"
+                      step="0.01"
+                    />
+                  </div>
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+          </div>
+        </>
+      )}
+
+      {cargoType === "container" && (
+        <>
+          <Separator />
+          <div className="space-y-3">
+            <StepLabel>Container Configuration</StepLabel>
+            <Controller
+              name="containerType"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {[
+                      {
+                        val: "20ft" as const,
+                        label: "20ft Container (TEU)",
+                        limit:
+                          direction === "export"
+                            ? "Max 25t per container"
+                            : "Max 20t per container",
+                      },
+                      {
+                        val: "40ft" as const,
+                        label: "40ft Container (FEU)",
+                        limit: "Max 32.5t per container",
+                      },
+                    ].map((ct) => (
+                      <OptionCard
+                        key={ct.val}
+                        selected={containerType === ct.val}
+                        onClick={() => field.onChange(ct.val)}
+                      >
+                        <div className="mb-1 flex items-center gap-2">
+                          <Package className="h-4 w-4 text-primary" />
+                          <p className="font-semibold">{ct.label}</p>
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          {ct.limit}
+                        </p>
+                      </OptionCard>
+                    ))}
+                  </div>
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+
+            {direction && (
+              <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <MapPin className="h-3.5 w-3.5" />
+                Route detected as{" "}
+                <span className="font-medium capitalize text-foreground">
+                  {direction}
+                </span>{" "}
+                workflow
+              </p>
+            )}
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Controller
+                name="quantity"
+                control={form.control}
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor="quantity">Quantity</FieldLabel>
+                    <div className="flex items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={() =>
+                          field.onChange(String(Math.max(1, qty - 1)))
+                        }
+                        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
+                      >
+                        -
+                      </button>
+                      <Input
+                        {...field}
+                        id="quantity"
+                        type="number"
+                        aria-invalid={fieldState.invalid}
+                        className="text-center"
+                        min="1"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => field.onChange(String(qty + 1))}
+                        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
+                      >
+                        +
+                      </button>
+                    </div>
+                    <FieldError errors={[fieldState.error]} />
+                  </Field>
+                )}
+              />
+              <Controller
+                name="vgm"
+                control={form.control}
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor="vgm">
+                      VGM per Container (Tons) *
+                    </FieldLabel>
+                    <Input
+                      {...field}
+                      id="vgm"
+                      type="number"
+                      aria-invalid={fieldState.invalid}
+                      placeholder="e.g. 18.5"
+                      min="0"
+                      step="0.1"
+                    />
+                    <FieldError errors={[fieldState.error]} />
+                  </Field>
+                )}
+              />
+            </div>
+          </div>
+
+          {overweightAlert && (
+            <AlertBox tone="warning">
+              <strong>Overweight Alert:</strong> {overweightAlert}
+            </AlertBox>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function Step6WagonAllocation({
+  form,
+  wagons,
+}: {
+  form: BookingForm;
+  wagons: WagonCalcResult | null;
+}) {
+  const quantity = parseInt(form.watch("quantity")) || 1;
+  const containerType = form.watch("containerType");
+  const consolidationEnabled = form.watch("consolidationEnabled");
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Wagon Allocation"
+        description="System-calculated wagon requirements based on your container profile."
+      />
+
+      {!wagons ? (
+        <AlertBox tone="info">
+          Complete the container configuration in the previous step to see wagon
+          allocation.
+        </AlertBox>
+      ) : (
+        <>
+          <div className="grid gap-3 sm:grid-cols-3">
+            <div className="rounded-xl bg-primary/5 p-4 text-center">
+              <p className="text-3xl font-bold text-primary">
+                {wagons.totalWagons}
+              </p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                Wagons Required
+              </p>
+            </div>
+            <div className="rounded-xl bg-muted p-4 text-center">
+              <p className="text-3xl font-bold">{quantity}</p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {containerType} Containers
+              </p>
+            </div>
+            <div className="rounded-xl bg-muted p-4 text-center">
+              <p className="text-3xl font-bold">{wagons.sharedWagons}</p>
+              <p className="mt-1 text-xs text-muted-foreground">Shared Slots</p>
+            </div>
+          </div>
+
+          <div>
+            <StepLabel>Wagon Layout</StepLabel>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {Array.from({ length: wagons.totalWagons }, (_, index) => {
+                const isOdd =
+                  wagons.hasOddUnit && index === wagons.totalWagons - 1;
+                return (
+                  <div
+                    key={index}
+                    className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold ${isOdd
+                        ? "border-amber-300 bg-amber-50 text-amber-700"
+                        : "border-primary/30 bg-primary/5 text-primary"
+                      }`}
+                  >
+                    {isOdd
+                      ? `1 x ${containerType} (1/2)`
+                      : containerType === "20ft"
+                        ? "2 x 20ft"
+                        : "1 x 40ft"}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            Formula:{" "}
+            {containerType === "40ft"
+              ? "1 x 40ft = 1 Rail Wagon"
+              : `CEILING(${quantity} / 2) = ${wagons.totalWagons} Rail Wagon${wagons.totalWagons > 1 ? "s" : ""} - (2 x 20ft = 1 Wagon)`}
+          </p>
+
+          {wagons.hasOddUnit && (
+            <>
+              <Separator />
+              <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <AlertTriangle className="h-4 w-4 text-amber-500" />
+                  <p className="text-sm font-medium">
+                    Consolidation Option (US-07)
+                  </p>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  You have 1 unpaired 20ft container. Opt in to share a wagon
+                  slot with another shipper to optimise costs, or request a
+                  dedicated wagon.
+                </p>
+                <Controller
+                  name="consolidationEnabled"
+                  control={form.control}
+                  render={({ field }) => (
+                    <div className="grid gap-2 sm:grid-cols-2">
+                      <OptionCard
+                        selected={consolidationEnabled}
+                        onClick={() => field.onChange(true)}
+                      >
+                        <p className="text-sm font-semibold">
+                          Allow Consolidation
+                        </p>
+                        <p className="mt-0.5 text-xs text-muted-foreground">
+                          Share a wagon slot. Billing split with co-loader.
+                        </p>
+                      </OptionCard>
+                      <OptionCard
+                        selected={!consolidationEnabled}
+                        onClick={() => field.onChange(false)}
+                      >
+                        <p className="text-sm font-semibold">Dedicated Wagon</p>
+                        <p className="mt-0.5 text-xs text-muted-foreground">
+                          Exclusive slot. Standard single-party billing.
+                        </p>
+                      </OptionCard>
+                    </div>
+                  )}
+                />
+              </div>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function Step7Documents({ form }: { form: BookingForm }) {
+  const documents = form.watch("documents");
+  const uploadedRequired = getUploadedRequiredCount(documents);
+  const documentErrors = form.formState.errors.documents as
+    | Record<string, { message?: string }>
+    | undefined;
+  const smartFileErrors = Object.fromEntries(
+    Object.entries(documentErrors ?? {}).map(([key, value]) => [
+      key,
+      value?.message ?? "",
+    ]),
+  );
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Compliance Documents"
+        description="Upload your company's legal credentials for EDR contract eligibility verification (US-04)."
+      />
+
+      <div className="flex items-center gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3">
+        <div
+          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold ${uploadedRequired === REQUIRED_DOC_KEYS.length
+              ? "bg-emerald-100 text-emerald-700"
+              : "bg-primary/10 text-primary"
+            }`}
+        >
+          {uploadedRequired}/{REQUIRED_DOC_KEYS.length}
+        </div>
+        <p className="text-sm text-muted-foreground">
+          {uploadedRequired < REQUIRED_DOC_KEYS.length
+            ? `${REQUIRED_DOC_KEYS.length - uploadedRequired} mandatory document(s) still needed.`
+            : "All mandatory documents uploaded. Power of Attorney is optional."}
+        </p>
+      </div>
+
+      <Controller
+        name="documents"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <SmartFileInput
+              file={BOOKING_DOCS_SETTING}
+              value={field.value}
+              onChange={(value) => field.onChange(value)}
+              errors={smartFileErrors}
+            />
+            <FieldError errors={[fieldState.error]} />
+          </Field>
+        )}
+      />
+    </div>
+  );
+}
+
+export function Step8Review({
+  form,
+  setStep,
+  wagons,
+  direction,
+}: {
+  form: BookingForm;
+  setStep: (step: number) => void;
+  wagons: WagonCalcResult | null;
+  direction: RouteDirection;
+}) {
+  const values = form.watch();
+  const errors = form.formState.errors;
+
+  function Row({
+    label,
+    value,
+    target,
+  }: {
+    label: string;
+    value: string;
+    target: number;
+  }) {
+    return (
+      <div className="flex items-start justify-between gap-4 py-2">
+        <div className="min-w-0">
+          <p className="text-xs text-muted-foreground">{label}</p>
+          <p className="mt-0.5 truncate text-sm font-medium">{value || "-"}</p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setStep(target)}
+          className="shrink-0 text-xs font-medium text-primary hover:underline"
+        >
+          Edit
+        </button>
+      </div>
+    );
+  }
+
+  const cargoValue =
+    values.cargoType === "container"
+      ? `${values.quantity} x ${values.containerType}`
+      : values.freightType === "bulk"
+        ? `Bulk - ${values.bulkCommodity === "Others" ? values.bulkCommodityOther : values.bulkCommodity}`
+        : values.freightType === "break_bulk"
+          ? `Break-Bulk - ${values.breakBulkType === "Others" ? values.breakBulkTypeOther : values.breakBulkType}`
+          : "";
+  const uploadedCount = getUploadedRequiredCount(values.documents);
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Review & Submit"
+        description="Confirm your contract request before sending it for EDR staff review."
+      />
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Contract & Service
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="Type"
+              value={values.contractType === "new" ? "New Contract" : "Renewal"}
+              target={1}
+            />
+            <Row
+              label="Contract ID"
+              value={values.draftContractId || values.previousContractRef}
+              target={1}
+            />
+            <Row
+              label="Service"
+              value={
+                values.serviceType === "rail"
+                  ? "Rail Only"
+                  : values.serviceType === "rail_forwarding"
+                    ? "Rail + Forwarding"
+                    : ""
+              }
+              target={2}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              First & Last Mile
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="First Mile"
+              value={
+                values.firstMileEnabled ? values.pickUpAddress : "Not requested"
+              }
+              target={3}
+            />
+            <Row
+              label="Last Mile"
+              value={
+                values.lastMileEnabled
+                  ? values.deliveryAddress
+                  : "Not requested"
+              }
+              target={3}
+            />
+            <Row
+              label="Equipment Return"
+              value={
+                values.equipmentReturn === "with_return"
+                  ? "With Return"
+                  : "Without Return"
+              }
+              target={3}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Route & Cargo
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="Route"
+              value={`${values.originYard} -> ${values.destinationYard}`}
+              target={4}
+            />
+            <Row
+              label="Workflow"
+              value={
+                direction
+                  ? direction.charAt(0).toUpperCase() + direction.slice(1)
+                  : ""
+              }
+              target={4}
+            />
+            <Row
+              label="Weight (VGM)"
+              value={values.cargoWeight ? `${values.cargoWeight} tons` : ""}
+              target={5}
+            />
+            <Row label="Cargo" value={cargoValue} target={5} />
+            <Row
+              label="Modifiers"
+              value={
+                [
+                  values.isHazardous && "Hazardous",
+                  values.isRefrigerated && "Refrigerated",
+                ]
+                  .filter(Boolean)
+                  .join(", ") || "None"
+              }
+              target={4}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Container & Wagons
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="Container"
+              value={`${values.quantity} x ${values.containerType}`}
+              target={5}
+            />
+            <Row
+              label="VGM per Container"
+              value={values.vgm ? `${values.vgm} tons` : ""}
+              target={5}
+            />
+            <Row
+              label="Wagons"
+              value={
+                wagons
+                  ? `${wagons.totalWagons} wagon${wagons.totalWagons > 1 ? "s" : ""}`
+                  : ""
+              }
+              target={6}
+            />
+            <Row
+              label="Documents"
+              value={`${uploadedCount}/${REQUIRED_DOC_KEYS.length} mandatory uploaded`}
+              target={7}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Controller
+        name="notes"
+        control={form.control}
+        render={({ field }) => (
+          <Field>
+            <FieldLabel htmlFor="notes">Additional Notes</FieldLabel>
+            <Textarea
+              {...field}
+              id="notes"
+              placeholder="Any special instructions or notes for EDR operations..."
+              rows={3}
+            />
+          </Field>
+        )}
+      />
+
+      <Controller
+        name="termsAccepted"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <label className="flex cursor-pointer items-start gap-3">
+              <button
+                type="button"
+                role="checkbox"
+                aria-checked={field.value}
+                aria-invalid={fieldState.invalid}
+                onClick={() => field.onChange(!field.value)}
+                className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 transition ${field.value ? "border-primary bg-primary" : "border-input"
+                  }`}
+              >
+                {field.value && (
+                  <Check className="h-3 w-3 text-primary-foreground" />
+                )}
+              </button>
+              <span className="text-sm text-muted-foreground">
+                I confirm the information is accurate and agree to EDR's{" "}
+                <span className="text-primary">
+                  freight contract terms and conditions
+                </span>
+                .
+              </span>
+            </label>
+            <FieldError errors={[fieldState.error, errors.termsAccepted]} />
+          </Field>
+        )}
+      />
+    </div>
+  );
+}