Merge branch 'freight_feature/profile' of github.com:Tria-plc/edr-platform into freight_feature/profile

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

@@ -0,0 +1,260 @@
+import { useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  Badge,
+  Box,
+  Card,
+  Center,
+  Group,
+  Loader,
+  Progress,
+  RingProgress,
+  Stack,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import { ChevronRight, Inbox, PackageCheck } from "lucide-react";
+
+import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
+import {
+  useContractOrders,
+  useContractPool,
+} from "@/hooks/bookings/useContractOrders";
+import type { Freight } from "@edr/types";
+
+export interface ContractOrdersPanelProps {
+  /** The general-contract booking whose drawdown orders are listed. */
+  contractBookingId: string;
+  /** Whether the contract is container-based (affects quantity labels). */
+  isContainer: boolean;
+}
+
+/** Format a contracted/remaining quantity with its unit. */
+function formatQuantity(
+  qty: number,
+  unit: Freight.ContractQuantityLine["unitOfMeasure"],
+  isContainerLine: boolean,
+): string {
+  const rounded = Number.isInteger(qty) ? qty : Number(qty.toFixed(2));
+  if (isContainerLine) return `${rounded} containers`;
+  if (unit === "PER_ITEM") return `${rounded} items`;
+  return `${rounded} tons`;
+}
+
+/** Summarise an order's lines, e.g. "2 20FT, 1 40FT" or "15". */
+function summariseLines(lines: Freight.IBookingOrderLine[]): string {
+  return lines
+    .map((l) => {
+      const qty = Number(l.quantity);
+      const label = Number.isInteger(qty) ? `${qty}` : qty.toFixed(2);
+      return `${label}${l.containerTypeName ? ` ${l.containerTypeName}` : ""}`;
+    })
+    .join(", ");
+}
+
+/**
+ * Backoffice "Orders" tab for a general contract: shows the drawdown pool and
+ * lists each order placed against the contract. Each order links to its child
+ * booking's detail page, where staff approve it and review clearance/customer
+ * documents independently (same screen as a one-time booking).
+ */
+export function ContractOrdersPanel({
+  contractBookingId,
+  isContainer,
+}: ContractOrdersPanelProps) {
+  const navigate = useNavigate();
+  const { data: orders, isLoading: ordersLoading } =
+    useContractOrders(contractBookingId);
+  const { data: pool, isLoading: poolLoading } =
+    useContractPool(contractBookingId);
+
+  const poolLines = pool ?? [];
+
+  const totals = useMemo(() => {
+    const contracted = poolLines.reduce(
+      (s, l) => s + (l.contractedQuantity || 0),
+      0,
+    );
+    const ordered = poolLines.reduce((s, l) => s + (l.orderedQuantity || 0), 0);
+    const pct = contracted > 0 ? Math.round((ordered / contracted) * 100) : 0;
+    return { contracted, ordered, pct };
+  }, [poolLines]);
+
+  if (ordersLoading || poolLoading) {
+    return (
+      <Center mih={240}>
+        <Loader color="gray" />
+      </Center>
+    );
+  }
+
+  return (
+    <Stack gap="lg">
+      {/* Drawdown pool */}
+      <Card withBorder radius="md" p="lg">
+        <Group justify="space-between" align="flex-start" wrap="nowrap" mb="lg">
+          <Box>
+            <Text fw={700} fz={16}>
+              Contracted quantity
+            </Text>
+            <Text fz={13} c="dimmed" mt={2}>
+              How much of this contract has been ordered versus what remains.
+            </Text>
+          </Box>
+          {totals.contracted > 0 && (
+            <RingProgress
+              size={72}
+              thickness={7}
+              roundCaps
+              sections={[{ value: totals.pct, color: "edr-green" }]}
+              label={
+                <Text ta="center" fz={13} fw={800}>
+                  {totals.pct}%
+                </Text>
+              }
+            />
+          )}
+        </Group>
+        <Stack gap="lg">
+          {poolLines.length === 0 && (
+            <Text fz={13} c="dimmed">
+              No quantity pool available.
+            </Text>
+          )}
+          {poolLines.map((line, i) => {
+            const pct =
+              line.contractedQuantity > 0
+                ? Math.min(
+                    100,
+                    (line.orderedQuantity / line.contractedQuantity) * 100,
+                  )
+                : 0;
+            const label = isContainer
+              ? (line.containerTypeName ?? "Containers")
+              : line.unitOfMeasure === "PER_ITEM"
+                ? "Items"
+                : "Tons";
+            const depleted = line.remainingQuantity <= 0;
+            return (
+              <div key={line.containerTypeId ?? `bulk-${i}`}>
+                <Group justify="space-between" mb={6}>
+                  <Group gap={8} align="center">
+                    <Text fz={14} fw={600}>
+                      {label}
+                    </Text>
+                    {depleted && (
+                      <Badge size="xs" variant="light" color="gray" radius="sm">
+                        Fully ordered
+                      </Badge>
+                    )}
+                  </Group>
+                  <Text fz={13} c="dimmed">
+                    <Text span fw={700} c={depleted ? "dimmed" : "edr-green"}>
+                      {formatQuantity(
+                        line.remainingQuantity,
+                        line.unitOfMeasure,
+                        isContainer,
+                      )}
+                    </Text>{" "}
+                    remaining of{" "}
+                    {formatQuantity(
+                      line.contractedQuantity,
+                      line.unitOfMeasure,
+                      isContainer,
+                    )}
+                  </Text>
+                </Group>
+                <Progress
+                  value={pct}
+                  color={depleted ? "gray" : "edr-green"}
+                  size="md"
+                  radius="xl"
+                />
+              </div>
+            );
+          })}
+        </Stack>
+      </Card>
+
+      {/* Orders */}
+      <Card withBorder radius="md" p="lg">
+        <Group justify="space-between" align="center" mb="md">
+          <Text fw={700} fz={16}>
+            Orders
+          </Text>
+          <Badge variant="light" color="violet" radius="sm">
+            {orders?.length ?? 0}
+          </Badge>
+        </Group>
+        {!orders || orders.length === 0 ? (
+          <Stack align="center" gap={8} py="xl">
+            <ThemeIcon size={48} radius="xl" variant="light" color="gray">
+              <Inbox size={22} />
+            </ThemeIcon>
+            <Text fz={13} c="dimmed" ta="center" maw={360}>
+              No orders have been placed against this contract yet.
+            </Text>
+          </Stack>
+        ) : (
+          <Stack gap={10}>
+            {orders.map((order) => {
+              const childId = order.bookingId;
+              const clickable = Boolean(childId);
+              return (
+                <Group
+                  key={order.id}
+                  justify="space-between"
+                  wrap="nowrap"
+                  p="sm"
+                  style={{
+                    borderRadius: 12,
+                    border: "1px solid var(--mantine-color-gray-3)",
+                    cursor: clickable ? "pointer" : "default",
+                  }}
+                  onClick={
+                    clickable
+                      ? () =>
+                          navigate(`/dashboard/booking-requests/${childId}`)
+                      : undefined
+                  }
+                >
+                  <Group gap={12} wrap="nowrap" style={{ minWidth: 0 }}>
+                    <ThemeIcon
+                      size={38}
+                      radius="md"
+                      variant="light"
+                      color="violet"
+                    >
+                      <PackageCheck size={18} />
+                    </ThemeIcon>
+                    <Box style={{ minWidth: 0 }}>
+                      <Text fz={14} fw={700} truncate>
+                        {order.reference}
+                      </Text>
+                      <Text fz={12} c="dimmed" truncate>
+                        Ship{" "}
+                        {new Date(order.scheduledDate).toLocaleDateString()}
+                        {order.lines.length > 0
+                          ? ` · ${summariseLines(order.lines)}`
+                          : ""}
+                      </Text>
+                    </Box>
+                  </Group>
+                  <Group gap={8} wrap="nowrap">
+                    <BookingStatusBadge status={order.status} />
+                    {clickable && (
+                      <ChevronRight
+                        size={16}
+                        color="var(--mantine-color-gray-5)"
+                      />
+                    )}
+                  </Group>
+                </Group>
+              );
+            })}
+          </Stack>
+        )}
+      </Card>
+    </Stack>
+  );
+}

apps/edr-freight-web/backoffice/src/components/bookings/detail/index.ts

@@ -1,6 +1,7 @@
 export * from "./booking-detail.styles";
 export * from "./SectionCard";
 export * from "./ClearanceReviewSection";
+export * from "./ContractOrdersPanel";
 export * from "./MetricTile";
 export * from "./BookingDetailToolbar";
 export * from "./BookingDetailHeader";

apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts

@@ -45,6 +45,14 @@ export const QUERY_KEYS = {
     byId: (id: string) => ["bookings", "detail", id] as const,
   },
 
+  BOOKING_ORDERS: {
+    ROOT: ["booking-orders"] as const,
+    byContract: (contractBookingId: string) =>
+      ["booking-orders", "by-contract", contractBookingId] as const,
+    pool: (contractBookingId: string) =>
+      ["booking-orders", "pool", contractBookingId] as const,
+  },
+
   TRAIN_SCHEDULING: {
     ROOT: ["train-scheduling"] as const,
     eligible: (freightType?: string, filters?: TrainScheduleFilters) =>

apps/edr-freight-web/backoffice/src/hooks/bookings/useContractOrders.ts

@@ -0,0 +1,28 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
+import { bookingOrdersService } from "@/services/booking-orders.service";
+
+/** Orders placed against a general contract (id = the contract booking id). */
+export function useContractOrders(
+  contractBookingId: string | undefined,
+  enabled = true,
+) {
+  return useQuery({
+    queryKey: QUERY_KEYS.BOOKING_ORDERS.byContract(contractBookingId ?? ""),
+    queryFn: () => bookingOrdersService.listByContract(contractBookingId!),
+    enabled: Boolean(contractBookingId) && enabled,
+  });
+}
+
+/** Contracted / ordered / remaining drawdown pool for a general contract. */
+export function useContractPool(
+  contractBookingId: string | undefined,
+  enabled = true,
+) {
+  return useQuery({
+    queryKey: QUERY_KEYS.BOOKING_ORDERS.pool(contractBookingId ?? ""),
+    queryFn: () => bookingOrdersService.pool(contractBookingId!),
+    enabled: Boolean(contractBookingId) && enabled,
+  });
+}

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx

@@ -2,6 +2,7 @@ import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import {
   ArrowLeft,
   FileSignature,
+  Layers,
   LayoutGrid,
   Package,
   ShieldCheck,
@@ -36,6 +37,7 @@ import {
   BookingContractSummaryCard,
   BookingDocumentsCard,
   ClearanceReviewSection,
+  ContractOrdersPanel,
   type BookingFileView,
 } from "@/components/bookings/detail";
 import { WarehouseInfoCard } from "@/components/warehouses";
@@ -159,9 +161,17 @@ export default function BookingRequestDetailPage() {
     ["AWAITING_DOCUMENTS", "DOCUMENTS_UNDER_REVIEW", "CLEARANCE_READY"].includes(
       booking.status,
     );
+  // A general contract drives an "Orders" tab: each drawdown order spawns a
+  // child booking that staff manage (clearance/approval) independently.
+  const isGeneralContract = booking.bookingType === "GENERAL_CONTRACT";
+  const showTabs = showClearanceTab || isGeneralContract;
   const requestedTab = searchParams.get("tab");
   const activeTab =
-    requestedTab === "clearance" && showClearanceTab ? "clearance" : "overview";
+    requestedTab === "clearance" && showClearanceTab
+      ? "clearance"
+      : requestedTab === "orders" && isGeneralContract
+        ? "orders"
+        : "overview";
   const setActiveTab = (tab: string | null) => {
     const next = new URLSearchParams(searchParams);
     if (tab && tab !== "overview") next.set("tab", tab);
@@ -201,7 +211,7 @@ export default function BookingRequestDetailPage() {
         <Grid gap="lg">
           {/* LEFT — primary content, split into tabs to keep each view focused */}
           <Grid.Col span={{ base: 12, lg: 8 }}>
-            {showClearanceTab ? (
+            {showTabs ? (
               <Tabs
                 value={activeTab}
                 onChange={setActiveTab}
@@ -216,12 +226,19 @@ export default function BookingRequestDetailPage() {
                   >
                     Overview
                   </Tabs.Tab>
-                  <Tabs.Tab
-                    value="clearance"
-                    leftSection={<ShieldCheck size={16} />}
-                  >
-                    Customer clearance
-                  </Tabs.Tab>
+                  {isGeneralContract && (
+                    <Tabs.Tab value="orders" leftSection={<Layers size={16} />}>
+                      Orders
+                    </Tabs.Tab>
+                  )}
+                  {showClearanceTab && (
+                    <Tabs.Tab
+                      value="clearance"
+                      leftSection={<ShieldCheck size={16} />}
+                    >
+                      Customer clearance
+                    </Tabs.Tab>
+                  )}
                 </Tabs.List>
 
                 <Tabs.Panel value="overview">
@@ -231,12 +248,22 @@ export default function BookingRequestDetailPage() {
                     onDownload={handleDownloadFile}
                   />
                 </Tabs.Panel>
-                <Tabs.Panel value="clearance">
-                  <ClearanceReviewSection
-                    bookingId={booking.id}
-                    onChanged={() => refetch()}
-                  />
-                </Tabs.Panel>
+                {isGeneralContract && (
+                  <Tabs.Panel value="orders">
+                    <ContractOrdersPanel
+                      contractBookingId={booking.id}
+                      isContainer={booking.freightType === "CONTAINER"}
+                    />
+                  </Tabs.Panel>
+                )}
+                {showClearanceTab && (
+                  <Tabs.Panel value="clearance">
+                    <ClearanceReviewSection
+                      bookingId={booking.id}
+                      onChanged={() => refetch()}
+                    />
+                  </Tabs.Panel>
+                )}
               </Tabs>
             ) : (
               <OverviewPanel

apps/edr-freight-web/backoffice/src/services/booking-orders.service.ts

@@ -0,0 +1,30 @@
+import { api as client } from "../auth/http";
+import { unwrap } from "@/utils/endpoint";
+import type { Freight } from "@edr/types";
+
+/**
+ * Drawdown orders placed against a general contract (a booking with
+ * bookingType = GENERAL_CONTRACT). Each order spawns a child ONE_TIME booking
+ * that carries its own clearance/approval — managed on the child's detail page.
+ */
+export const bookingOrdersService = {
+  /** Orders placed against a general contract, with their lines + child status. */
+  listByContract: async (
+    contractBookingId: string,
+  ): Promise<Freight.IBookingOrder[]> => {
+    const response = await client.get("/booking-orders", {
+      params: { contractBookingId },
+    });
+    return unwrap(response.data) as Freight.IBookingOrder[];
+  },
+
+  /** Contracted / ordered / remaining quantities for a general contract. */
+  pool: async (
+    contractBookingId: string,
+  ): Promise<Freight.ContractQuantityLine[]> => {
+    const response = await client.get(
+      `/booking-orders/contract/${contractBookingId}/pool`,
+    );
+    return unwrap(response.data) as Freight.ContractQuantityLine[];
+  },
+};

apps/edr-freight-web/backoffice/src/types/booking.ts

@@ -132,6 +132,10 @@ export interface BookingDetail {
   isGovernment?: boolean;
   governmentInstitution?: string | null;
   status: BookingStatus;
+  /** ONE_TIME shipment vs an umbrella GENERAL_CONTRACT drawn down by orders. */
+  bookingType?: "ONE_TIME" | "GENERAL_CONTRACT";
+  /** General contracts only: when the ordering window closes. */
+  expiresAt?: string | null;
   scheduledDate: string;
   totalAmount: number;
   adjustedTotalAmount?: number | null;