add contract clearance detail page and enhance contract requests filtering and ui fix

apps/edr-freight-api/src/modules/contracts/phased-clearance.util.ts

@@ -256,6 +256,11 @@ export const PHASED_CUSTOMS_CONTRACT_QUEUE_STATUSES = [
   'FULLY_EXECUTED',
   'CONTRACT_ACTIVE',
   'CONTRACT_CLOSED',
+  // Terminal contracts stay on the list — the clearance hub is GL's history of
+  // everything that passed through, not just the live work queue.
+  'EXPIRED',
+  'CANCELLED',
+  'REJECTED',
 ] as const;
 
 /** Whether a customs clearance item belongs on the persistent GL Ethiopia list. */
@@ -275,12 +280,22 @@ export const PHASED_CUSTOMS_BOOKING_QUEUE_STATUSES = [
   'OPERATION_REQUEST_PENDING',
   'OPERATION_CHANGES_REQUESTED',
   'ROAD_DISPATCH_PENDING',
+  // Payment phase — the booking is selected/awaiting the customer's payment.
+  'SELECTED_FOR_BATCH',
+  'PNR_GENERATED',
+  'AWAITING_PAYMENT',
+  'PAYMENT_VERIFICATION_IN_PROGRESS',
   'IN_TRANSIT',
   'ARRIVED',
   'PAID',
   'COMPLETED',
   'CONTRACT_ACTIVE',
   'CONTRACT_CLOSED',
+  // Terminal bookings stay on the list — EXPIRED especially: GL rebooks it
+  // from here, and the hub doubles as clearance history.
+  'EXPIRED',
+  'CANCELLED',
+  'REJECTED',
 ] as const;
 
 /** Booking statuses that may appear on the GL Djibouti clearance list (includes post-clearance). */

apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceListPage.tsx

@@ -197,6 +197,29 @@ function DirectionIcon({ direction }: { direction: string }) {
 }
 
 function StatusBadge({ row }: { row: ClearanceRow }) {
+  // Terminal contracts stay listed as history — badge the terminal state
+  // instead of falling through to "Under review".
+  if (["EXPIRED", "CANCELLED", "REJECTED"].includes(row.status)) {
+    return (
+      <Tooltip
+        label="This contract is no longer active — kept here for clearance history."
+        withArrow
+      >
+        <Badge
+          size="sm"
+          variant="light"
+          color={row.status === "EXPIRED" ? "orange" : "red"}
+          radius="sm"
+        >
+          {row.status === "EXPIRED"
+            ? "Contract expired"
+            : row.status === "CANCELLED"
+              ? "Cancelled"
+              : "Rejected"}
+        </Badge>
+      </Tooltip>
+    );
+  }
   if (row.paymentExpired) {
     return (
       <Tooltip
@@ -817,6 +840,17 @@ const shipmentStatusColor = (s: string) => {
   if (s === "AWAITING_DOCUMENTS") return "yellow";
   if (s === "DOCUMENTS_UNDER_REVIEW") return "blue";
   if (s === "CLEARANCE_READY") return "edr-green";
+  if (
+    [
+      "SELECTED_FOR_BATCH",
+      "PNR_GENERATED",
+      "AWAITING_PAYMENT",
+      "PAYMENT_VERIFICATION_IN_PROGRESS",
+    ].includes(s)
+  )
+    return "violet";
+  if (s === "EXPIRED") return "orange";
+  if (s === "CANCELLED" || s === "REJECTED") return "red";
   return "gray";
 };
 

apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx

@@ -106,6 +106,18 @@ function statusColor(status: string): string {
     case "ACTIVE_SHIPMENT_IN_PROGRESS":
     case "IN_TRANSIT":
       return "teal";
+    // Payment phase — booking selected / awaiting the customer's payment.
+    case "SELECTED_FOR_BATCH":
+    case "PNR_GENERATED":
+    case "AWAITING_PAYMENT":
+    case "PAYMENT_VERIFICATION_IN_PROGRESS":
+      return "violet";
+    // Terminal rows kept as clearance history.
+    case "EXPIRED":
+      return "orange";
+    case "CANCELLED":
+    case "REJECTED":
+      return "red";
     default:
       return "gray";
   }