From c650a2dcbd18563b36d8ddb679e400466526f752 Mon Sep 17 00:00:00 2001
From: Marshal <marshal@example.com>
Date: Sat, 4 Jul 2026 04:26:14 +0000
Subject: [PATCH]  update joins in repository services to use entity classes
 and enhance booking form with hazardous/reefer toggles

---
 .../contracts/ContractRequestDetailPage.tsx   | 67 ++++++++++++++-----
 packages/types/src/freight/contracts.ts       |  7 ++
 2 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx
index 6a451ba56..c81f5b919 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx
@@ -596,21 +596,58 @@ export default function ContractRequestDetailPage() {
                     No cargo scope lines.
                   </Text>
                 ) : (
-                  <Stack gap="xs">
-                    {(contract.cargoScope ?? []).map((s) => (
-                      <Group key={s.id} gap={8} wrap="nowrap">
-                        <BoxIcon
-                          size={15}
-                          color="var(--mantine-color-edr-green-6)"
-                        />
-                        <Text size="sm">
-                          {s.containerSize ??
-                            s.cargoFreeText ??
-                            s.cargoTypeId ??
-                            "Cargo"}
-                        </Text>
-                      </Group>
-                    ))}
+                  <Stack gap="sm">
+                    {(contract.cargoScope ?? []).map((s) => {
+                      const isContainer = Boolean(s.containerSize);
+                      // Bulk lines carry their commodity detail (name + unit);
+                      // container lines carry the size (20ft / 40ft).
+                      const title = isContainer
+                        ? `${s.containerSize} container`
+                        : (s.cargoType?.cargoTypeName ??
+                          s.cargoFreeText ??
+                          s.cargoType?.code ??
+                          "Bulk cargo");
+                      // quantityCap unit: containers for a size line, else the
+                      // cargo type's unit of measure (tons / items / …), default tons.
+                      const capUnit = isContainer
+                        ? "containers"
+                        : (s.cargoType?.unitOfMeasure?.toLowerCase() ?? "tons");
+                      return (
+                        <Group key={s.id} gap={8} wrap="nowrap" align="flex-start">
+                          <BoxIcon
+                            size={15}
+                            color="var(--mantine-color-edr-green-6)"
+                            style={{ marginTop: 2, flexShrink: 0 }}
+                          />
+                          <div>
+                            <Text size="sm" fw={500}>
+                              {title}
+                            </Text>
+                            <Group gap={6} mt={2}>
+                              <Badge
+                                variant="light"
+                                color={isContainer ? "blue" : "grape"}
+                                radius="sm"
+                                size="xs"
+                                tt="uppercase"
+                              >
+                                {isContainer ? "Container" : "Bulk"}
+                              </Badge>
+                              {s.cargoType?.code ? (
+                                <Text size="xs" c="dimmed">
+                                  Code: {s.cargoType.code}
+                                </Text>
+                              ) : null}
+                              <Text size="xs" c="dimmed">
+                                {s.quantityCap != null
+                                  ? `Cap: ${s.quantityCap} ${capUnit}`
+                                  : "Cap: uncapped"}
+                              </Text>
+                            </Group>
+                          </div>
+                        </Group>
+                      );
+                    })}
                   </Stack>
                 )}
               </SectionCard>
diff --git a/packages/types/src/freight/contracts.ts b/packages/types/src/freight/contracts.ts
index e62b410ba..fe653573d 100644
--- a/packages/types/src/freight/contracts.ts
+++ b/packages/types/src/freight/contracts.ts
@@ -132,6 +132,13 @@ export interface IContractCargoScope {
   /** "20ft" | "40ft"; null for bulk. */
   containerSize?: string | null;
   cargoTypeId?: string | null;
+  /** Bulk cargo type detail (name + unit), loaded on the contract detail. */
+  cargoType?: {
+    id: string;
+    code?: string | null;
+    cargoTypeName?: string | null;
+    unitOfMeasure?: string | null;
+  } | null;
   cargoFreeText?: string | null;
   /**
    * GENERAL contracts: total quantity bookable across all shipments on this line