Enhance booking and signature functionalities

- Updated MySignaturePage title to Signature

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">