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