feat(bookings): add clearance review functionality and update UI components

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

@@ -1,11 +1,18 @@
-import { useNavigate, useParams } from "react-router-dom";
-import { ArrowLeft, FileSignature, Package } from "lucide-react";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import {
+  ArrowLeft,
+  FileSignature,
+  LayoutGrid,
+  Package,
+  ShieldCheck,
+} from "lucide-react";
 import {
   Container,
   Stack,
   Grid,
   Center,
   Loader,
+  Tabs,
   Text,
   Paper,
   Button,
@@ -34,6 +41,7 @@ import {
 import { WarehouseInfoCard } from "@/components/warehouses";
 import { getStatusMeta } from "@/features/bookings/booking-status.config";
 import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
+import type { BookingDetail } from "@/types/booking";
 import { downloadBookingFile } from "@/services/files.service";
 import {
   useBookingDetail,
@@ -53,6 +61,7 @@ const SIGNATURE_FILE_CODES = new Set([
 export default function BookingRequestDetailPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
   const {
     data: booking,
     isLoading,
@@ -143,6 +152,23 @@ export default function BookingRequestDetailPage() {
     booking.status === "PENDING_APPROVAL" ||
     booking.status === "APPROVED_PENDING_SIGNATURE";
 
+  // Non-customs clearance is reviewed here by Marketing in its own tab; customs
+  // bookings are handled in the Global Logistics clearance queue instead.
+  const showClearanceTab =
+    !booking.customsClearingEnabled &&
+    ["AWAITING_DOCUMENTS", "DOCUMENTS_UNDER_REVIEW", "CLEARANCE_READY"].includes(
+      booking.status,
+    );
+  const requestedTab = searchParams.get("tab");
+  const activeTab =
+    requestedTab === "clearance" && showClearanceTab ? "clearance" : "overview";
+  const setActiveTab = (tab: string | null) => {
+    const next = new URLSearchParams(searchParams);
+    if (tab && tab !== "overview") next.set("tab", tab);
+    else next.delete("tab");
+    setSearchParams(next, { replace: true });
+  };
+
   return (
     <PageContainer>
       <Breadcrumbs
@@ -173,37 +199,52 @@ export default function BookingRequestDetailPage() {
         )}
 
         <Grid gap="lg">
-          {/* LEFT — primary content */}
+          {/* LEFT — primary content, split into tabs to keep each view focused */}
           <Grid.Col span={{ base: 12, lg: 8 }}>
-            <Stack gap="lg">
-              {/* Non-customs clearance is reviewed here by Marketing; customs
-                  bookings are handled in the Global Logistics clearance queue. */}
-              {!booking.customsClearingEnabled &&
-              ["AWAITING_DOCUMENTS", "DOCUMENTS_UNDER_REVIEW"].includes(
-                booking.status,
-              ) ? (
-                <ClearanceReviewSection
-                  bookingId={booking.id}
-                  onChanged={() => refetch()}
-                />
-              ) : null}
-              <BookingRouteServiceCard
+            {showClearanceTab ? (
+              <Tabs
+                value={activeTab}
+                onChange={setActiveTab}
+                variant="pills"
+                color="edr-blue"
+                keepMounted={false}
+              >
+                <Tabs.List mb="lg">
+                  <Tabs.Tab
+                    value="overview"
+                    leftSection={<LayoutGrid size={16} />}
+                  >
+                    Overview
+                  </Tabs.Tab>
+                  <Tabs.Tab
+                    value="clearance"
+                    leftSection={<ShieldCheck size={16} />}
+                  >
+                    Customer clearance
+                  </Tabs.Tab>
+                </Tabs.List>
+
+                <Tabs.Panel value="overview">
+                  <OverviewPanel
+                    booking={booking}
+                    row={row}
+                    onDownload={handleDownloadFile}
+                  />
+                </Tabs.Panel>
+                <Tabs.Panel value="clearance">
+                  <ClearanceReviewSection
+                    bookingId={booking.id}
+                    onChanged={() => refetch()}
+                  />
+                </Tabs.Panel>
+              </Tabs>
+            ) : (
+              <OverviewPanel
                 booking={booking}
-                originLabel={row.originLabel}
-                destinationLabel={row.destinationLabel}
-              />
-              <BookingMileServicesCard booking={booking} />
-              <BookingCargoCard booking={booking} />
-              {booking.contractSummary && (
-                <BookingContractSummaryCard summary={booking.contractSummary} />
-              )}
-              <BookingDocumentsCard
-                files={(booking.files ?? []).filter(
-                  (f) => !SIGNATURE_FILE_CODES.has(f.code ?? ""),
-                )}
+                row={row}
                 onDownload={handleDownloadFile}
               />
-            </Stack>
+            )}
           </Grid.Col>
 
           {/* RIGHT — sticky action / summary rail */}
@@ -245,3 +286,35 @@ export default function BookingRequestDetailPage() {
     </PageContainer>
   );
 }
+
+/** The booking's primary detail cards — route, services, cargo, contract, docs. */
+function OverviewPanel({
+  booking,
+  row,
+  onDownload,
+}: {
+  booking: BookingDetail;
+  row: ReturnType<typeof toBookingListRow>;
+  onDownload: (file: BookingFileView) => void;
+}) {
+  return (
+    <Stack gap="lg">
+      <BookingRouteServiceCard
+        booking={booking}
+        originLabel={row.originLabel}
+        destinationLabel={row.destinationLabel}
+      />
+      <BookingMileServicesCard booking={booking} />
+      <BookingCargoCard booking={booking} />
+      {booking.contractSummary && (
+        <BookingContractSummaryCard summary={booking.contractSummary} />
+      )}
+      <BookingDocumentsCard
+        files={(booking.files ?? []).filter(
+          (f) => !SIGNATURE_FILE_CODES.has(f.code ?? ""),
+        )}
+        onDownload={onDownload}
+      />
+    </Stack>
+  );
+}

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

@@ -64,7 +64,7 @@ export default function DocumentClearanceDetailPage() {
     return (
       <PageContainer>
         <Group justify="center" py={80} gap={10}>
-          <Loader color="edr-green" />
+          <Loader color="edr-blue" />
           <Text c="dimmed">Loading clearance…</Text>
         </Group>
       </PageContainer>
@@ -103,7 +103,7 @@ export default function DocumentClearanceDetailPage() {
             clearance.allApproved ? (
               <Badge
                 variant="light"
-                color="edr-green"
+                color="edr-blue"
                 radius="sm"
                 leftSection={<CheckCircle2 size={13} />}
               >
@@ -112,7 +112,7 @@ export default function DocumentClearanceDetailPage() {
             ) : (
               <Badge
                 variant="light"
-                color="edr-blue"
+                color="edr-accent"
                 radius="sm"
                 leftSection={<Clock size={13} />}
               >
@@ -133,13 +133,13 @@ export default function DocumentClearanceDetailPage() {
           {/* RIGHT — sticky progress gauge */}
           <Grid.Col span={{ base: 12, lg: 4 }}>
             <Box style={{ position: "sticky", top: 24 }}>
-              <SectionCard icon={PackageCheck} title="Review progress">
+              <SectionCard icon={PackageCheck} title="Review progress" accent="blue">
                 <Stack align="center" gap="sm">
                   <RingProgress
                     size={140}
                     thickness={12}
                     roundCaps
-                    sections={[{ value: stats.pct, color: "edr-green" }]}
+                    sections={[{ value: stats.pct, color: "edr-blue" }]}
                     label={
                       <Stack gap={0} align="center">
                         <Text fw={800} fz={26} lh={1}>
@@ -153,7 +153,7 @@ export default function DocumentClearanceDetailPage() {
                   />
                   <Group gap="lg" justify="center">
                     <ProgressStat
-                      color="edr-green"
+                      color="edr-blue"
                       label="Approved"
                       value={stats.approved}
                     />
@@ -163,7 +163,7 @@ export default function DocumentClearanceDetailPage() {
                       value={stats.queried}
                     />
                     <ProgressStat
-                      color="edr-slate"
+                      color="edr-accent"
                       label="Pending"
                       value={stats.pending}
                     />
@@ -199,7 +199,7 @@ function ClearanceHero({
     <Paper withBorder radius="md" p="lg">
       <Group justify="space-between" align="flex-start" wrap="wrap" gap="lg">
         <Group gap="md" wrap="nowrap" style={{ minWidth: 0 }}>
-          <ThemeIcon variant="light" color="edr-green" radius="md" size={52}>
+          <ThemeIcon variant="light" color="edr-blue" radius="md" size={52}>
             <ShieldCheck size={26} />
           </ThemeIcon>
           <Box style={{ minWidth: 0 }}>
@@ -219,7 +219,7 @@ function ClearanceHero({
                 <Badge
                   size="sm"
                   variant="light"
-                  color="edr-green"
+                  color="edr-accent"
                   radius="sm"
                   leftSection={<ShieldCheck size={12} />}
                 >
@@ -248,7 +248,7 @@ function ClearanceHero({
               {stats.approved}/{stats.total}
             </Text>
           </Group>
-          <Progress value={stats.pct} color="edr-green" radius="xl" size="md" />
+          <Progress value={stats.pct} color="edr-blue" radius="xl" size="md" />
         </Box>
       </Group>
     </Paper>