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

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

@@ -8,6 +8,7 @@ import { useAuth } from "@/auth/useAuth";
 import {
   getNextPendingApprovalStep,
   isAllocateAction,
+  isClearanceNavAction,
   isContractNavAction,
   listRowHasActions,
   type BookingActionContext,
@@ -38,6 +39,7 @@ export function BookingActionsMenu({
     reference: row.reference,
     approvalSteps: row.approvalSteps,
     schedulingStatus: row.schedulingStatus,
+    customsClearingEnabled: row.customsClearingEnabled,
   };
 
   const flow = useBookingActionDialog(row.id, context);
@@ -46,10 +48,15 @@ export function BookingActionsMenu({
   const goToContract = () =>
     navigate(`/dashboard/booking-requests/${row.id}/contract`);
 
+  const goToClearanceTab = () =>
+    navigate(`/dashboard/booking-requests/${row.id}?tab=clearance`);
+
   const handleAction = (action: (typeof actions)[number]) => {
     onSuppressRowClick?.();
     if (isContractNavAction(action.id)) {
       goToContract();
+    } else if (isClearanceNavAction(action.id)) {
+      goToClearanceTab();
     } else if (isAllocateAction(action.id)) {
       onAllocateBooking?.();
     } else {

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

@@ -44,9 +44,9 @@ const STATUS_META: Record<
   Freight.DocumentReviewStatus,
   { label: string; color: string }
 > = {
-  APPROVED: { label: "Approved", color: "edr-green" },
+  APPROVED: { label: "Approved", color: "edr-blue" },
   QUERIED: { label: "Queried", color: "red" },
-  PENDING: { label: "Pending", color: "edr-slate" },
+  PENDING: { label: "Pending", color: "edr-accent" },
 };
 
 /**
@@ -142,7 +142,7 @@ export function ClearanceReviewSection({
   if (isLoading || !clearance) {
     return (
       <Group justify="center" py="xl" gap={10}>
-        <Loader size="sm" color="edr-green" />
+        <Loader size="sm" color="edr-blue" />
         <Text c="dimmed">Loading clearance…</Text>
       </Group>
     );
@@ -165,15 +165,15 @@ export function ClearanceReviewSection({
             <Box>
               <Progress
                 value={stats.pct}
-                color="edr-green"
+                color="edr-blue"
                 radius="xl"
                 size="sm"
                 mb={6}
               />
               <Group gap="lg">
-                <StatPill color="edr-green" label="Approved" value={stats.approved} />
+                <StatPill color="edr-blue" label="Approved" value={stats.approved} />
                 <StatPill color="red" label="Queried" value={stats.queried} />
-                <StatPill color="edr-slate" label="Pending" value={stats.pending} />
+                <StatPill color="edr-accent" label="Pending" value={stats.pending} />
               </Group>
             </Box>
           )}
@@ -219,13 +219,13 @@ export function ClearanceReviewSection({
           icon={Upload}
           title="Customs output documents"
           subtitle="Upload the cleared/customs paperwork to hand back to the customer."
-          accent="edr-blue"
+          accent="edr-accent"
         >
           <Stack gap={10}>
             {glDocs.map((doc) => (
               <Group key={doc.fileKey} justify="space-between" wrap="nowrap">
                 <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
-                  <FileText size={16} color="var(--mantine-color-edr-blue-6)" />
+                  <FileText size={16} color="var(--mantine-color-edr-accent-6)" />
                   <Text fz="13px" c="edr-text" truncate>
                     {doc.label}
                     {doc.required ? " *" : ""}
@@ -239,7 +239,7 @@ export function ClearanceReviewSection({
                         href={doc.file.url}
                         target="_blank"
                         rel="noreferrer"
-                        c="edr-blue"
+                        c="edr-accent"
                         style={{ display: "flex" }}
                       >
                         <Download size={15} />
@@ -261,7 +261,7 @@ export function ClearanceReviewSection({
                         {...props}
                         size="compact-xs"
                         variant="light"
-                        color="edr-green"
+                        color="edr-accent"
                         leftSection={<Upload size={13} />}
                       >
                         {outputFiles[doc.fileKey] ? "Selected" : "Upload"}
@@ -275,7 +275,7 @@ export function ClearanceReviewSection({
           <Group justify="flex-end" mt="md">
             <Button
               variant="light"
-              color="edr-green"
+              color="edr-accent"
               radius="md"
               leftSection={<Upload size={15} />}
               disabled={Object.keys(outputFiles).length === 0}
@@ -301,7 +301,7 @@ export function ClearanceReviewSection({
           <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
             <ThemeIcon
               variant="light"
-              color={clearance.allApproved ? "edr-green" : "gray"}
+              color={clearance.allApproved ? "edr-blue" : "gray"}
               radius="md"
               size={28}
             >
@@ -314,7 +314,7 @@ export function ClearanceReviewSection({
             </Text>
           </Group>
           <Button
-            color="edr-green"
+            color="edr-blue"
             radius="md"
             leftSection={<CheckCircle2 size={16} />}
             disabled={!clearance.allApproved}
@@ -391,7 +391,7 @@ function DocReviewCard({
           status === "QUERIED"
             ? "var(--mantine-color-red-2)"
             : status === "APPROVED"
-              ? "var(--mantine-color-edr-green-2)"
+              ? "var(--mantine-color-edr-blue-2)"
               : "var(--mantine-color-edr-border-6)",
       }}
     >
@@ -471,7 +471,7 @@ function DocReviewCard({
               </Button>
               <Button
                 size="compact-sm"
-                color="edr-green"
+                color="edr-blue"
                 radius="md"
                 leftSection={<CheckCircle2 size={14} />}
                 disabled={busy}