fix issue, add transit flow, fix cancellation

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

@@ -30,6 +30,13 @@ export function BookingCargoCard({ booking }: BookingCargoCardProps) {
   );
 
   const isBulk = booking.freightType === "BULK";
+  // NUMBER_OF_WAGONS cargo is booked by a wagon COUNT, not by tonnage — the
+  // count the customer fixed is what allocation and per-wagon pricing use, so
+  // it belongs on the card next to the weight.
+  const requestedWagons =
+    isBulk && booking.cargoType?.unitOfMeasure === "NUMBER_OF_WAGONS"
+      ? Number(booking.bulkRequestedWagons ?? 0) || null
+      : null;
   // Bulk: the commodity itself (Wheat, Steel…) is the headline. Containers:
   // the freight kind, with the shipper's own description alongside.
   const cargoHeadline = isBulk
@@ -46,6 +53,11 @@ export function BookingCargoCard({ booking }: BookingCargoCardProps) {
         <Badge variant="light" color={isBulk ? "orange" : "blue"} radius="sm">
           {isBulk ? "Bulk" : "Container"}
         </Badge>
+        {requestedWagons != null ? (
+          <Badge variant="light" color="grape" radius="sm">
+            {requestedWagons} wagon{requestedWagons === 1 ? "" : "s"}
+          </Badge>
+        ) : null}
         {cargoDescription ? (
           <Text size="sm" c="dimmed">
             — {cargoDescription}
@@ -62,6 +74,9 @@ export function BookingCargoCard({ booking }: BookingCargoCardProps) {
           }
         />
         <MetricTile label="Total VGM" value={`${tons} tons`} />
+        {requestedWagons != null && (
+          <MetricTile label="Wagons booked" value={`${requestedWagons}`} />
+        )}
         {items != null && <MetricTile label="Items" value={`${items}`} />}
         <MetricTile
           label="Hazardous"