fix: the muliple wagon validation

apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts

@@ -175,8 +175,14 @@ export const bookingFormSchema = z
     containers: z.array(
       z.object({
         type: z.enum(["20ft", "40ft"]),
-        qty: z.number(),
+        qty: z
-        vgm: z.number(),
+          .string()
+          .refine((q) => !isNaN(+q), "Enter a valid Number")
+          .refine((qty) => Number(qty) >= 1, "Must be greater than 0"),
+        vgm: z
+          .string()
+          .refine((vgm) => !isNaN(+vgm), "Enter a valid Number")
+          .refine((vgm) => Number(vgm) >= 0, "Must be greater than 0"),
       }),
     ),
     consolidationEnabled: z.boolean(),
@@ -338,7 +344,7 @@ export const bookingFormSchema = z
       }
 
       data.containers.forEach((c, i) => {
-        if (!c.qty || c.qty < 1) {
+        if (!c.qty || +c.qty < 1) {
           ctx.addIssue({
             code: "custom",
             path: ["containers", i, "qty"],
@@ -346,7 +352,7 @@ export const bookingFormSchema = z
           });
         }
 
-        if (!c.vgm || c.vgm <= 0) {
+        if (!c.vgm || +c.vgm <= 0) {
           ctx.addIssue({
             code: "custom",
             path: ["containers", i, "vgm"],
@@ -400,7 +406,7 @@ export const initialBookingFormValues: BookingFormValues = {
   breakBulkTypeOther: "",
   isHazardous: false,
   isRefrigerated: false,
-  containers: [{ type: "20ft", qty: 1, vgm: 0 }],
+  containers: [{ type: "20ft", qty: "1", vgm: "" }],
   consolidationEnabled: false,
   documents: {},
   notes: "",
@@ -437,14 +443,21 @@ export type RouteDirection = "import" | "export" | "domestic" | null;
 
 export interface ContainerConfig {
   type: "20ft" | "40ft";
-  qty: number;
+  qty: string;
-  vgm: number;
+  vgm: string;
+}
+
+export interface WagonConfig {
+  type: "20ft" | "40ft";
 }
 
 export interface WagonCalcResult {
   totalWagons: number;
   hasOddUnit: boolean;
   sharedWagons: number;
+  wagonLayout: WagonConfig[];
+  ft40Wagons: number;
+  ft20Wagons: number;
 }
 
 export function genContractId(): string {
@@ -467,22 +480,22 @@ export function getRouteDirection(
 }
 
 export function calcWagons(containers: ContainerConfig[]): WagonCalcResult {
-  let totalWagons = 0;
+  const Ft40Wagons = containers
-  let hasOddUnit = false;
+    .filter((c) => c.type === "40ft")
-  let sharedWagons = 0;
+    .reduce((sum, c) => sum + Number(c.qty), 0);
+  const Ft20Wagons = containers
+    .filter((c) => c.type === "20ft")
+    .reduce((sum, c) => sum + Number(c.qty), 0);
+  const wagonLayout: WagonConfig[] = [];
+  let hasOddUnit = Ft20Wagons % 2 === 1;
+  let sharedWagons = Math.floor(Ft20Wagons / 2);
 
-  for (const c of containers) {
+  return {
-    if (c.type === "40ft") {
+    totalWagons: sharedWagons + Ft40Wagons,
-      totalWagons += c.qty;
+    hasOddUnit,
-      sharedWagons += c.qty;
+    sharedWagons,
-    } else {
+    ft40Wagons: Ft40Wagons,
-      const pairs = Math.floor(c.qty / 2);
+    ft20Wagons: Ft20Wagons,
-      const odd = c.qty % 2;
+    wagonLayout,
-      totalWagons += pairs + odd;
+  };
-      sharedWagons += pairs;
-      if (odd > 0) hasOddUnit = true;
-    }
-  }
-
-  return { totalWagons, hasOddUnit, sharedWagons };
 }

apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx

@@ -1,11 +1,7 @@
 import { Controller, type UseFormReturn } from "react-hook-form";
 import { Flame, MapPin, Snowflake } from "lucide-react";
 import { Field, Separator, Switch } from "@edr/ui-common";
-import {
+import { type BookingFormValues, getRouteDirection, STATIONS } from "./schema";
-  type BookingFormValues,
-  getRouteDirection,
-  STATIONS,
-} from "./schema";
 import { SelectField, SelectOptions, StepHeader, StepLabel } from "./shared";
 
 type BookingForm = UseFormReturn<BookingFormValues>;
@@ -33,7 +29,6 @@ export function Step4Route({ form }: { form: BookingForm }) {
       />
 
       <div className="space-y-3">
-        <StepLabel>Route</StepLabel>
         <div className="grid gap-3 sm:grid-cols-2">
           <Controller
             name="originYard"

apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx

@@ -1,6 +1,13 @@
 import { Controller, useFieldArray, type UseFormReturn } from "react-hook-form";
 import { MapPin, Package, Plus, Trash2, Weight } from "lucide-react";
-import { Button, Field, FieldError, FieldLabel, Input, Separator } from "@edr/ui-common";
+import {
+  Button,
+  Field,
+  FieldError,
+  FieldLabel,
+  Input,
+  Separator,
+} from "@edr/ui-common";
 import {
   BREAK_BULK_TYPES,
   BULK_COMMODITIES,
@@ -87,7 +94,11 @@ export function Step5CargoDetails({
                   selected={cargoType === "bulk"}
                   onClick={() => {
                     field.onChange("bulk");
-                    form.setValue("containers", [{ type: "20ft", qty: 1, vgm: 0 }], { shouldDirty: true });
+                    form.setValue(
+                      "containers",
+                      [{ type: "20ft", qty: "1", vgm: "0" }],
+                      { shouldDirty: true },
+                    );
                   }}
                 >
                   <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100">
@@ -254,7 +265,7 @@ export function Step5CargoDetails({
                 type="button"
                 variant="outline"
                 size="sm"
-                onClick={() => append({ type: "20ft", qty: 1, vgm: 0 })}
+                onClick={() => append({ type: "20ft", qty: "1", vgm: "0" })}
               >
                 <Plus className="mr-1 h-3.5 w-3.5" />
                 Add Container
@@ -275,7 +286,7 @@ export function Step5CargoDetails({
             {fields.map((field, index) => {
               const containerType = containers[index]?.type;
               const vgm = containers[index]?.vgm ?? 0;
-              const alert = getOverweightAlert(containerType, vgm);
+              const alert = getOverweightAlert(containerType, +vgm);
 
               return (
                 <div
@@ -351,7 +362,10 @@ export function Step5CargoDetails({
                               type="button"
                               onClick={() =>
                                 qtyField.onChange(
-                                  Math.max(1, (qtyField.value ?? 1) - 1),
+                                  Math.max(
+                                    1,
+                                    Number(qtyField.value ?? 1) - 1,
+                                  ).toString(),
                                 )
                               }
                               className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
@@ -361,9 +375,7 @@ export function Step5CargoDetails({
                             <Input
                               value={qtyField.value ?? 1}
                               onChange={(e) =>
-                                qtyField.onChange(
+                                qtyField.onChange(e.target.value)
-                                  Math.max(1, parseInt(e.target.value) || 1),
-                                )
                               }
                               onBlur={qtyField.onBlur}
                               type="number"
@@ -375,7 +387,7 @@ export function Step5CargoDetails({
                               type="button"
                               onClick={() =>
                                 qtyField.onChange(
-                                  (qtyField.value ?? 1) + 1,
+                                  (Number(qtyField.value ?? 1) + 1).toString(),
                                 )
                               }
                               className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
@@ -396,11 +408,7 @@ export function Step5CargoDetails({
                           <FieldLabel>VGM (Tons) *</FieldLabel>
                           <Input
                             value={vgmField.value ?? 0}
-                            onChange={(e) =>
+                            onChange={(e) => vgmField.onChange(e.target.value)}
-                              vgmField.onChange(
-                                parseFloat(e.target.value) || 0,
-                              )
-                            }
                             onBlur={vgmField.onBlur}
                             type="number"
                             aria-invalid={fieldState.invalid}

apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx

@@ -1,11 +1,6 @@
-import { Controller, type UseFormReturn } from "react-hook-form";
+import { type UseFormReturn } from "react-hook-form";
-import { AlertTriangle } from "lucide-react";
+import { type BookingFormValues, type WagonCalcResult } from "./schema";
-import { Separator } from "@edr/ui-common";
+import { AlertBox, StepHeader, StepLabel } from "./shared";
-import {
-  type BookingFormValues,
-  type WagonCalcResult,
-} from "./schema";
-import { AlertBox, OptionCard, StepHeader, StepLabel } from "./shared";
 
 type BookingForm = UseFormReturn<BookingFormValues>;
 
@@ -17,13 +12,14 @@ export function Step6WagonAllocation({
   wagons: WagonCalcResult | null;
 }) {
   const containers = form.watch("containers") ?? [];
-  const totalContainers = containers.reduce((sum, c) => sum + (c.qty || 0), 0);
+  const totalContainers = containers.reduce(
+    (sum, c) => sum + Number(c.qty || 0),
+    0,
+  );
   const containerSummary = containers
-    .filter((c) => c.qty > 0)
+    .filter((c) => +c.qty > 0)
     .map((c) => `${c.qty} × ${c.type}`)
     .join(", ");
-  const consolidationEnabled = form.watch("consolidationEnabled");
-
   return (
     <div className="space-y-6">
       <StepHeader
@@ -62,74 +58,50 @@ export function Step6WagonAllocation({
           <div>
             <StepLabel>Wagon Layout</StepLabel>
             <div className="mt-2 flex flex-wrap gap-2">
-              {Array.from({ length: wagons.totalWagons }, (_, index) => {
+              {new Array(wagons.ft40Wagons).fill(0).map((_, index) => (
-                const isOdd =
+                <div
-                  wagons.hasOddUnit && index === wagons.totalWagons - 1;
+                  key={index}
-                return (
+                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold 
-                  <div
+border-primary/30 bg-primary/5 text-primary `}
-                    key={index}
+                >
-                    className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold ${isOdd
+                  1 × 40ft
-                        ? "border-amber-300 bg-amber-50 text-amber-700"
+                </div>
-                        : "border-primary/30 bg-primary/5 text-primary"
+              ))}
-                      }`}
+              {new Array(wagons.sharedWagons).fill(0).map((_, index) => (
-                  >
+                <div
-                    {isOdd ? "1 × 20ft (1/2)" : "2 × 20ft"}
+                  key={index}
-                  </div>
+                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold 
-                );
+ border-amber-300 bg-amber-50 text-amber-700
-              })}
+`}
+                >
+                  2 × 20ft
+                </div>
+              ))}
+              {wagons.hasOddUnit && (
+                <div
+                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold border-destructive! bg-destructive/10 text-destructive `}
+                >
+                  1 × 20ft
+                </div>
+              )}
             </div>
           </div>
 
-          <p className="text-xs text-muted-foreground">
-            {containers.some((c) => c.type === "40ft")
-              ? "1 × 40ft = 1 Rail Wagon"
-              : `CEILING(${totalContainers} / 2) = ${wagons.totalWagons} Rail Wagon${wagons.totalWagons > 1 ? "s" : ""} — 2 × 20ft = 1 Wagon`}
-          </p>
-
           {wagons.hasOddUnit && (
             <>
-              <Separator />
+              <AlertBox tone="warning">
-              <div className="space-y-3">
+                <div className="flex items-start gap-2">
-                <div className="flex items-center gap-2">
+                  <div>
-                  <AlertTriangle className="h-4 w-4 text-amber-500" />
+                    <p className="font-semibold">Unpaired 20ft Container</p>
-                  <p className="text-sm font-medium">
+                    <p className="mt-1 text-xs">
-                    Consolidation Option (US-07)
+                      One 20ft container occupies only half a wagon. The wagon
-                  </p>
+                      will depart once a co-loader is found to fill the
+                      remaining slot, which <strong>may delay departure</strong>{" "}
+                      beyond the standard lead time.
+                    </p>
+                  </div>
                 </div>
-                <p className="text-xs text-muted-foreground">
+              </AlertBox>
-                  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>
             </>
           )}
         </>