Enhance booking and signature functionalities

- Updated MySignaturePage title to Signature

apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingCargoCard.tsx

@@ -2,6 +2,7 @@ import { Package } from "lucide-react";
 import { SimpleGrid, Divider, Box, Table, Text } from "@mantine/core";
 
 import type { BookingDetail } from "@/types/booking";
+import { cargoTonsAndItems } from "@/utils/cargoWeight";
 
 import { SectionCard } from "./SectionCard";
 import { MetricTile } from "./MetricTile";
@@ -13,6 +14,7 @@ export interface BookingCargoCardProps {
 /** Cargo specs + container manifest table. */
 export function BookingCargoCard({ booking }: BookingCargoCardProps) {
   const containers = booking.bookingContainers ?? [];
+  const { tons, items } = cargoTonsAndItems(booking);
 
   return (
     <SectionCard icon={Package} title="Cargo specifications" accent="orange">
@@ -21,7 +23,8 @@ export function BookingCargoCard({ booking }: BookingCargoCardProps) {
           label="Cargo type"
           value={booking.cargoType?.label ?? booking.freightType}
         />
-        <MetricTile label="Total VGM" value={`${booking.cargoTotalWeightVgm} tons`} />
+        <MetricTile label="Total VGM" value={`${tons} tons`} />
+        {items != null && <MetricTile label="Items" value={`${items}`} />}
         <MetricTile
           label="Hazardous"
           value={booking.isHazardous ? "Yes" : "No"}

apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingFactsCard.tsx

@@ -3,6 +3,8 @@ import type { ReactNode } from "react";
 import { Hash, Package, Ship, Weight, Clock } from "lucide-react";
 import { Group, Stack, Text, Divider } from "@mantine/core";
 
+import { cargoTonsAndItems } from "@/utils/cargoWeight";
+
 import { SectionCard } from "./SectionCard";
 import { formatDate, type BookingDetailView } from "./booking-detail.styles";
 
@@ -38,7 +40,14 @@ export function BookingFactsCard({ booking }: BookingFactsCardProps) {
     { icon: Hash, label: "PNR Code", value: booking.pnrCode || "—" },
     { icon: Package, label: "Cargo Type", value: booking.cargoType?.label ?? "—" },
     { icon: Ship, label: "Shipping Line", value: booking.shippingLine?.label ?? "—" },
-    { icon: Weight, label: "VGM Weight", value: `${booking.cargoTotalWeightVgm} tons` },
+    {
+      icon: Weight,
+      label: "VGM Weight",
+      value: (() => {
+        const { tons, items } = cargoTonsAndItems(booking);
+        return items != null ? `${tons} tons (${items} items)` : `${tons} tons`;
+      })(),
+    },
     { icon: Clock, label: "Last Updated", value: formatDate(booking.updatedAt) },
   ];
 

apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRequestHero.tsx

@@ -22,6 +22,7 @@ import {
 import type { LucideIcon } from "lucide-react";
 
 import type { BookingDetail } from "@/types/booking";
+import { cargoTonsAndItems } from "@/utils/cargoWeight";
 import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
 import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
 import { ContractReferenceLink } from "@/components/bookings/ContractReferenceLink";
@@ -52,7 +53,7 @@ export function BookingRequestHero({
     (sum, c) => sum + Number(c.quantity ?? 0),
     0,
   );
-  const weight = Number(booking.cargoTotalWeightVgm ?? 0);
+  const { tons: weight, items: itemCount } = cargoTonsAndItems(booking);
 
   return (
     <Paper
@@ -162,7 +163,7 @@ export function BookingRequestHero({
             icon={Weight}
             label="Cargo weight"
             value={`${weight} T`}
-            hint="VGM total"
+            hint={itemCount != null ? `${itemCount} items` : "VGM total"}
             accent="blue"
           />
           <HeroTile

apps/edr-freight-web/backoffice/src/components/profile/MySignatureCard.tsx

@@ -79,7 +79,7 @@ export function MySignatureCard() {
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <FileSignature className="size-4" />
-          My signature
+          Signature &amp; Stamp
         </CardTitle>
         <CardDescription>
           This signature can be reused to sign booking contracts.

apps/edr-freight-web/backoffice/src/components/trainScheduling/AllocateBookingWizard.tsx

@@ -38,6 +38,7 @@ import { formatRouteLabel } from "@/services/routes.service";
 import { useToast } from "@/hooks/use-toast";
 import { trainSchedulingService } from "@/services/trainScheduling.service";
 import type { BookingDetail } from "@/types/booking";
+import { cargoTonsAndItems } from "@/utils/cargoWeight";
 import type {
   ContainerPlacement,
   FreightType,
@@ -416,7 +417,7 @@ export function AllocateBookingWizard({
   const amount = Number(booking.totalAmount);
   const containers = booking.bookingContainers ?? [];
   const containerCount = containers.reduce((sum, c) => sum + Number(c.quantity ?? 0), 0);
-  const weight = Number(booking.cargoTotalWeightVgm ?? 0);
+  const { tons: weight, items: itemCount } = cargoTonsAndItems(booking);
   const holdCountdown = formatCountdown(booking.holdExpiresAt);
 
   const containerComplete =
@@ -945,7 +946,13 @@ export function AllocateBookingWizard({
                 })}`}
                 hint={booking.paymentStatus}
               />
-              <StatTile onDark icon={Weight} label="Cargo weight" value={`${weight} T`} hint="VGM total" />
+              <StatTile
+                onDark
+                icon={Weight}
+                label="Cargo weight"
+                value={`${weight} T`}
+                hint={itemCount != null ? `${itemCount} items` : "VGM total"}
+              />
               <StatTile
                 onDark
                 icon={ContainerIcon}

apps/edr-freight-web/backoffice/src/components/trainScheduling/IntercityRideAlongPanel.tsx

@@ -68,11 +68,27 @@ function CapacityBadges({ capacity }: { capacity: IntercityCapacity | null }) {
   );
 }
 
-function NeedCells({ need }: { need: IntercityCapacity | null }) {
+function NeedCells({ row }: { row: IntercityBookingRow }) {
+  const { need, wagonBreakdown } = row;
   if (!need) return <Table.Td colSpan={3}>—</Table.Td>;
   return (
     <>
-      <Table.Td>{fmt(need.wagons)}</Table.Td>
+      <Table.Td>
+        {wagonBreakdown?.length ? (
+          // Which wagon TYPES this train gives up, not just how many wagons —
+          // a break-bulk booking's count depends on each type's capacity and
+          // its configured items-per-wagon fit, so it differs per train.
+          <Stack gap={2}>
+            {wagonBreakdown.map((entry) => (
+              <Text key={entry.wagonTypeId} size="sm">
+                {entry.wagons} × {entry.code}
+              </Text>
+            ))}
+          </Stack>
+        ) : (
+          fmt(need.wagons)
+        )}
+      </Table.Td>
       <Table.Td>{fmt(need.weightTons)} t</Table.Td>
       <Table.Td>{fmt(need.lengthMeters)} m</Table.Td>
     </>
@@ -285,7 +301,7 @@ export function IntercityRideAlongPanel({
                       <Table.Td>
                         <CorridorCell row={row} />
                       </Table.Td>
-                      <NeedCells need={row.need} />
+                      <NeedCells row={row} />
                       <Table.Td>
                         {row.fits ? (
                           <Badge size="sm" variant="light" color="teal">