enhance gate pass and freight payment handling in train scheduling

- Updated the logic in  to ensure that a booking only earns its gate pass once the freight charges are settled.
- Added logging for bookings that have not settled freight payment when securing gate passes.
- Modified seeders to ensure that bookings have associated company profiles to prevent data inconsistencies.
- Updated freight permissions to include new clearance actions for bookings.
- Enhanced the UI to reflect changes in the clearance process, including new shipment request pages and improved status handling in the clearance action panel.
- Adjusted the contract clearance list to accommodate both customs contracts and shipment bookings.
- Improved the handling of GENERAL contracts in various components to ensure proper booking flow and visibility.

apps/edr-freight-web/backoffice/src/App.tsx

@@ -53,11 +53,11 @@ import ContractClearanceListPage from "./pages/contracts/ContractClearanceListPa
 import ContractClearanceDetailPage from "./pages/contracts/ContractClearanceDetailPage";
 import GlDjiboutiClearanceListPage from "./pages/contracts/GlDjiboutiClearanceListPage";
 import GlClearanceDetailPage from "./pages/contracts/GlClearanceDetailPage";
-// Hidden for now — Shipment Requests pages disabled (imports kept commented).
-// import ShipmentRequestsPage from "./pages/contracts/ShipmentRequestsPage";
-// import ShipmentRequestDetailPage from "./pages/contracts/ShipmentRequestDetailPage";
+import ShipmentRequestsPage from "./pages/contracts/ShipmentRequestsPage";
+import ShipmentRequestDetailPage from "./pages/contracts/ShipmentRequestDetailPage";
 import GlCreateBookingForm from "./components/contracts/GlCreateBookingForm";
 import DocumentClearanceDetailPage from "./pages/bookings/DocumentClearanceDetailPage";
+import DocumentClearanceListPage from "./pages/bookings/DocumentClearanceListPage";
 import CustomerDetailPage from "./pages/customers/CustomerDetailPage";
 import CustomersPage from "./pages/customers/CustomersPage";
 import InvoiceDetailPage from "./pages/invoices/InvoiceDetailPage";
@@ -187,13 +187,18 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
           FREIGHT_PERMS.contracts.clearanceEtActions,
         ],
       },
-      // Hidden for now — Shipment Requests nav item disabled.
-      // {
-      //   label: "Shipment Requests",
-      //   href: "/dashboard/shipment-requests",
-      //   icon: <Send />,
-      //   permission: FREIGHT_PERMS.contracts.createBooking,
-      // },
+      {
+        label: "Shipment Requests",
+        href: "/dashboard/shipment-requests",
+        icon: <Send />,
+        permission: FREIGHT_PERMS.contracts.createBooking,
+      },
+      {
+        label: "Self-Clearance Review",
+        href: "/dashboard/contracts/ops-clearance",
+        icon: <ShieldCheck />,
+        permission: FREIGHT_PERMS.contracts.opsClearanceReview,
+      },
       {
         label: "GL Djibouti Clearance",
         href: "/dashboard/gl-djibouti/clearance",
@@ -752,7 +757,6 @@ const App = () => {
             </RequirePermission>
           }
         />
-        {/* Hidden for now — Shipment Requests pages disabled.
         <Route
           path="shipment-requests"
           element={
@@ -773,7 +777,6 @@ const App = () => {
             </RequirePermission>
           }
         />
-        */}
         {/* GL (Path B) contract clearance review hub */}
         <Route
           path="contracts/clearance"
@@ -829,10 +832,17 @@ const App = () => {
             </RequirePermission>
           }
         />
-        {/* Path A ops queue out of scope for now → fold into the GL hub. */}
+        {/* Path A — Operations reviews per-booking self-clearance documents
+            (GENERAL contracts without customs). */}
         <Route
           path="contracts/ops-clearance"
-          element={<Navigate to="/dashboard/contracts/clearance" replace />}
+          element={
+            <RequirePermission
+              permission={FREIGHT_PERMS.contracts.opsClearanceReview}
+            >
+              <DocumentClearanceListPage opsMode />
+            </RequirePermission>
+          }
         />
         <Route
           path="contracts/:id/create-booking"

apps/edr-freight-web/backoffice/src/components/contracts/PhasedClearanceActionPanel.tsx

@@ -99,6 +99,7 @@ function computeImportActiveStep(
   bookingCreated: boolean,
   bookingMilestones: MilestoneRow[],
   t1Uploaded: boolean,
+  freightPaid: boolean,
 ): number {
   if (!isMilestoneDone(clearance.milestones, "DOCUMENTS_APPROVED")) return 0;
   if (!isMilestoneDone(clearance.milestones, "DECLARED")) return 1;
@@ -119,9 +120,12 @@ function computeImportActiveStep(
   if (!clearance.preClearanceFinalized) return 5;
   if (!isMilestoneDone(clearance.milestones, "DO_COLLECTED")) return 6;
   if (!bookingCreated) return 7;
-  if (!clearance.gatepassGranted) return 8;
-  if (!t1Uploaded && !clearance.t1?.closed) return 9;
-  if (!clearance.t1?.closed) return 10;
+  // The customer pays the train/freight charges on the booking. Until that
+  // settles the gate pass is not granted for this booking, so the flow stops here.
+  if (!freightPaid) return 8;
+  if (!clearance.gatepassGranted) return 9;
+  if (!t1Uploaded && !clearance.t1?.closed) return 10;
+  if (!clearance.t1?.closed) return 11;
   // Risk is "assigned" when the booking milestone says so OR the clearance view
   // already carries a riskLevel. The ET page derives its bookingMilestones from a
   // separately-fetched booking id that can lag or mismatch the booking carrying
@@ -129,15 +133,15 @@ function computeImportActiveStep(
   const riskAssigned =
     Boolean(clearance.riskLevel) ||
     isBookingMilestoneDone(bookingMilestones, "RISK_ASSIGNED");
-  if (!riskAssigned) return 11;
+  if (!riskAssigned) return 12;
   // Additional duty round is optional — resolved once skipped or paid.
   const secondDutyResolved =
     clearance.secondDuty?.skipped ||
     clearance.secondDuty?.paid ||
     isBookingMilestoneDone(bookingMilestones, "SECOND_DUTY_PAID");
-  if (!secondDutyResolved) return 12;
-  if (!clearance.importReleaseGranted) return 13;
-  return 14;
+  if (!secondDutyResolved) return 13;
+  if (!clearance.importReleaseGranted) return 14;
+  return 15;
 }
 
 function t1FilesFromWorkflow(
@@ -243,6 +247,13 @@ export function PhasedClearanceActionPanel({
   const riskAssigned =
     Boolean(clearance.riskLevel) ||
     isBookingMilestoneDone(bookingMilestones, "RISK_ASSIGNED");
+  // Freight (train + service) charges settled on the booking. The gate pass is
+  // only granted to a booking that has paid, so a granted gate pass is server
+  // proof of payment — it keeps the stepper moving on a page whose
+  // bookingMilestones have not loaded yet or point at a different booking.
+  const freightPaid =
+    isBookingMilestoneDone(bookingMilestones, "FREIGHT_PAYMENT_SETTLED") ||
+    Boolean(clearance.gatepassGranted);
   const activeStep = useMemo(
     () =>
       isImport
@@ -251,9 +262,17 @@ export function PhasedClearanceActionPanel({
             effectiveBookingCreated,
             bookingMilestones,
             t1Uploaded,
+            freightPaid,
           )
         : 0,
-    [clearance, isImport, effectiveBookingCreated, bookingMilestones, t1Uploaded],
+    [
+      clearance,
+      isImport,
+      effectiveBookingCreated,
+      bookingMilestones,
+      t1Uploaded,
+      freightPaid,
+    ],
   );
 
   if (isImport) {
@@ -554,14 +573,26 @@ export function PhasedClearanceActionPanel({
               )}
             </Stepper.Step>
 
+            <Stepper.Step
+              label="Freight payment"
+              description="Customer pays the train and service charges"
+              icon={freightPaid ? <CheckCircle2 size={14} /> : <Receipt size={14} />}
+            >
+              <StepStatus
+                done={freightPaid}
+                pendingLabel="Waiting for the customer to pay the train and service charges. The gate pass is not granted until this settles."
+                doneLabel="Train and service charges settled."
+              />
+            </Stepper.Step>
+
             <Stepper.Step
               label="Gate pass"
-              description="Secured on the train schedule after wagon allocation"
+              description="Secured on the train schedule after payment and wagon allocation"
               icon={
                 clearance.gatepassGranted ? <CheckCircle2 size={14} /> : <Truck size={14} />
               }
             >
-              <ImportGatepassStep clearance={clearance} />
+              <ImportGatepassStep clearance={clearance} freightPaid={freightPaid} />
             </Stepper.Step>
 
             <Stepper.Step
@@ -927,8 +958,16 @@ function ImportT1CloseStep({
 /**
  * Gate pass status, read-only. Secured on the train schedule's "Save as
  * Secured" action (train-scheduling-v2) — clearance no longer grants it directly.
+ * The train may be secured while this booking still owes freight charges; the
+ * booking only picks the gate pass up once its payment settles.
  */
-function ImportGatepassStep({ clearance }: { clearance: ClearanceViewLike }) {
+function ImportGatepassStep({
+  clearance,
+  freightPaid,
+}: {
+  clearance: ClearanceViewLike;
+  freightPaid: boolean;
+}) {
   const scheduleId = clearance.train?.scheduleId ?? null;
 
   if (clearance.gatepassGranted) {
@@ -943,6 +982,16 @@ function ImportGatepassStep({ clearance }: { clearance: ClearanceViewLike }) {
     );
   }
 
+  if (!freightPaid) {
+    return (
+      <StepStatus
+        done={false}
+        pendingLabel="Blocked — the customer must pay the train and service charges before the gate pass is granted for this shipment."
+        doneLabel=""
+      />
+    );
+  }
+
   const wagonAllocated = Boolean(clearance.train?.wagonAllocated);
 
   return (
@@ -1015,6 +1064,18 @@ function RiskStep({
     );
   }
 
+  // Customs cannot rate cargo still under transit — the server rejects the
+  // assignment until the T1 is closed, so do not offer the control yet.
+  if (!clearance.t1?.closed) {
+    return (
+      <StepStatus
+        done={false}
+        pendingLabel="Available once the T1 is closed."
+        doneLabel=""
+      />
+    );
+  }
+
   if (!canAct || !bookingId) {
     return (
       <StepStatus

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

@@ -128,7 +128,16 @@ function DirectionIcon({ direction }: { direction: string }) {
   );
 }
 
-export default function DocumentClearanceListPage() {
+export default function DocumentClearanceListPage({
+  opsMode = false,
+}: {
+  /**
+   * true → Operations self-clearance queue: NON-customs bookings whose
+   * per-booking clearance docs the operations team reviews (GENERAL Path A).
+   * false → legacy GL queue: customs bookings only.
+   */
+  opsMode?: boolean;
+}) {
   const navigate = useNavigate();
   const [pageTab, setPageTab] = useState<PageTab>("queue");
   const [activeTab, setActiveTab] = useState<ClearanceTabKey>("all");
@@ -139,7 +148,7 @@ export default function DocumentClearanceListPage() {
   const isHistory = pageTab === "history";
 
   const { data, isLoading, isError, isFetching, refetch } = useQuery({
-    queryKey: ["clearance", "list", isHistory],
+    queryKey: ["clearance", "list", isHistory, opsMode],
     queryFn: () =>
       bookingsService.list({
         status: isHistory ? CLEARANCE_HISTORY_STATUS : CLEARANCE_REVIEW_STATUS,
@@ -148,8 +157,10 @@ export default function DocumentClearanceListPage() {
   });
 
   const allRows = useMemo(() => {
-    // GL clearance queue: customs bookings only
-    const rows = (data?.items ?? []).map(toClearanceRow).filter((r) => r.hasCustoms);
+    // opsMode: self-clearance (non-customs) bookings; else customs bookings only.
+    const rows = (data?.items ?? [])
+      .map(toClearanceRow)
+      .filter((r) => (opsMode ? !r.hasCustoms : r.hasCustoms));
 
     if (isHistory) {
       return [...rows].sort((a, b) => {
@@ -159,7 +170,7 @@ export default function DocumentClearanceListPage() {
       });
     }
     return rows;
-  }, [data?.items, isHistory]);
+  }, [data?.items, isHistory, opsMode]);
 
   const tabCounts = useMemo(
     () => ({
@@ -310,8 +321,12 @@ export default function DocumentClearanceListPage() {
     <PageContainer>
       <Stack gap="lg">
         <PageHeader
-          title="Document Clearance"
-          subtitle="Review customer documents, raise queries, and finalize clearance for each booking."
+          title={opsMode ? "Self-Clearance Review" : "Document Clearance"}
+          subtitle={
+            opsMode
+              ? "Review the customer's own clearance documents per shipment booking, raise queries, and finalize."
+              : "Review customer documents, raise queries, and finalize clearance for each booking."
+          }
           meta={statusBadge}
           action={
             <ActionIcon

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

@@ -25,6 +25,7 @@ import {
   PackagePlus,
   RefreshCw,
   Search,
+  Send,
   ShieldCheck,
   ShipWheel,
   Table as TableIcon,
@@ -49,11 +50,13 @@ import {
   useContractClearanceQueue,
   useEtClearanceQueue,
 } from "@/hooks/contracts/useContracts";
+import { useBookingEtClearanceQueue } from "@/hooks/bookings/useBookings";
+import type { BookingDetail } from "@/types/booking";
 import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
 import { GlUpcomingWindowsSection } from "@/components/contracts/GlUpcomingWindowsSection";
 
 type ViewMode = "table" | "cards";
-type QueueTab = "all" | "et";
+type QueueTab = "all" | "et" | "shipments";
 
 interface ClearanceRow {
   id: string;
@@ -194,6 +197,10 @@ export default function ContractClearanceListPage() {
   const { user } = useAuth();
   const canReview = hasPermission(user, FREIGHT_PERMS.contracts.clearanceReview);
   const canEt = hasPermission(user, FREIGHT_PERMS.contracts.clearanceEtActions);
+  const canCreateBooking = hasPermission(
+    user,
+    FREIGHT_PERMS.contracts.createBooking,
+  );
 
   const defaultQueue: QueueTab = canReview ? "all" : "et";
   const [queueTab, setQueueTab] = useState<QueueTab>(defaultQueue);
@@ -202,16 +209,29 @@ export default function ContractClearanceListPage() {
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
 
   const { data: allData, isLoading: allLoading, isError: allError, isFetching: allFetching, refetch: refetchAll } =
-    useContractClearanceQueue(queueTab === "all");
+    useContractClearanceQueue(queueTab === "all" || queueTab === "shipments");
   const { data: etData, isLoading: etLoading, isError: etError, isFetching: etFetching, refetch: refetchEt } =
     useEtClearanceQueue(queueTab === "et");
+  const {
+    data: bookingQueue,
+    isLoading: bookingsLoading,
+    isError: bookingsError,
+    isFetching: bookingsFetching,
+    refetch: refetchBookings,
+  } = useBookingEtClearanceQueue(queueTab === "shipments");
 
   const data = queueTab === "et" ? etData : allData;
   const isLoading = queueTab === "et" ? etLoading : allLoading;
   const isError = queueTab === "et" ? etError : allError;
-  const isFetching = queueTab === "et" ? etFetching : allFetching;
+  const isFetching =
+    queueTab === "et"
+      ? etFetching
+      : queueTab === "shipments"
+        ? bookingsFetching
+        : allFetching;
   const refetch = () => {
     if (queueTab === "et") void refetchEt();
+    else if (queueTab === "shipments") void refetchBookings();
     else void refetchAll();
   };
 
@@ -239,9 +259,43 @@ export default function ContractClearanceListPage() {
         ),
       });
     }
+    if (canReview || canEt) {
+      opts.push({
+        value: "shipments",
+        label: (
+          <Group gap={6} wrap="nowrap">
+            <PackageCheck size={15} />
+            <Box visibleFrom="sm">Shipments</Box>
+          </Group>
+        ),
+      });
+    }
     return opts;
   }, [canReview, canEt]);
 
+  // GENERAL-contract shipment bookings in per-booking clearance (ET queue).
+  const bookingRows = useMemo(() => {
+    const rows = (bookingQueue ?? []).map((b: BookingDetail) => ({
+      id: b.id,
+      reference: b.reference,
+      customerLabel: b.company?.name ?? b.governmentInstitution ?? "—",
+      originLabel: b.originYard?.name ?? "—",
+      destinationLabel: b.destinationYard?.name ?? "—",
+      tradeDirection: b.tradeDirection ?? "—",
+      freightType: b.freightType ?? "—",
+      status: b.status,
+    }));
+    const q = query.trim().toLowerCase();
+    if (!q) return rows;
+    return rows.filter(
+      (r) =>
+        r.reference.toLowerCase().includes(q) ||
+        r.customerLabel.toLowerCase().includes(q) ||
+        r.originLabel.toLowerCase().includes(q) ||
+        r.destinationLabel.toLowerCase().includes(q),
+    );
+  }, [bookingQueue, query]);
+
   const allRows = useMemo(
     () => (data?.items ?? []).map(toClearanceRow),
     [data?.items],
@@ -269,7 +323,7 @@ export default function ContractClearanceListPage() {
     );
   }, [allRows, query]);
 
-  const total = rows.length;
+  const total = queueTab === "shipments" ? bookingRows.length : rows.length;
   const pageCount = Math.max(1, Math.ceil(total / pagination.pageSize));
 
   const pagedRows = useMemo(() => {
@@ -410,16 +464,29 @@ export default function ContractClearanceListPage() {
             </Badge>
           }
           action={
-            <ActionIcon
-              variant="default"
-              size="lg"
-              radius="md"
-              onClick={() => refetch()}
-              loading={isFetching}
-              aria-label="Refresh"
-            >
-              <RefreshCw size={16} />
-            </ActionIcon>
+            <Group gap="sm" wrap="nowrap">
+              {canCreateBooking ? (
+                <Button
+                  variant="filled"
+                  color="edr-green"
+                  radius="md"
+                  leftSection={<Send size={15} />}
+                  onClick={() => navigate("/dashboard/shipment-requests")}
+                >
+                  Shipment requests
+                </Button>
+              ) : null}
+              <ActionIcon
+                variant="default"
+                size="lg"
+                radius="md"
+                onClick={() => refetch()}
+                loading={isFetching}
+                aria-label="Refresh"
+              >
+                <RefreshCw size={16} />
+              </ActionIcon>
+            </Group>
           }
         />
 
@@ -528,7 +595,14 @@ export default function ContractClearanceListPage() {
               </Group>
             </Box>
 
-            {view === "table" ? (
+            {queueTab === "shipments" ? (
+              <ShipmentBookingsTable
+                rows={bookingRows}
+                loading={bookingsLoading}
+                error={bookingsError}
+                onOpen={(id) => navigate(`/dashboard/clearance/${id}`)}
+              />
+            ) : view === "table" ? (
               <Box style={{ overflowX: "auto" }} px="xs" pb="xs">
                 <DataTable<ClearanceRow, unknown>
                   columns={columns}
@@ -567,6 +641,143 @@ export default function ContractClearanceListPage() {
   );
 }
 
+interface ShipmentBookingRow {
+  id: string;
+  reference: string;
+  customerLabel: string;
+  originLabel: string;
+  destinationLabel: string;
+  tradeDirection: string;
+  freightType: string;
+  status: string;
+}
+
+const prettyStatus = (s: string) =>
+  s
+    .toLowerCase()
+    .replace(/_/g, " ")
+    .replace(/^\w/, (c) => c.toUpperCase());
+
+const shipmentStatusColor = (s: string) => {
+  if (s === "AWAITING_DOCUMENTS") return "yellow";
+  if (s === "DOCUMENTS_UNDER_REVIEW") return "blue";
+  if (s === "CLEARANCE_READY") return "edr-green";
+  return "gray";
+};
+
+/** GENERAL-contract shipment bookings currently in per-booking clearance. */
+function ShipmentBookingsTable({
+  rows,
+  loading,
+  error,
+  onOpen,
+}: {
+  rows: ShipmentBookingRow[];
+  loading: boolean;
+  error: boolean;
+  onOpen: (id: string) => void;
+}) {
+  const columns = useMemo<ColumnDef<ShipmentBookingRow>[]>(
+    () => [
+      {
+        id: "booking",
+        header: () => <span className={bookingTable.headerCell}>Booking</span>,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-3 py-1.5">
+            <div className={bookingTable.rowIcon}>
+              <PackageCheck className="size-4" strokeWidth={1.75} />
+            </div>
+            <div className="min-w-0">
+              <p className="truncate font-medium text-foreground">
+                {row.original.reference}
+              </p>
+              <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
+                <User className="size-3 shrink-0 opacity-70" />
+                {row.original.customerLabel}
+              </p>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: "route",
+        header: () => <span className={bookingTable.headerCell}>Route</span>,
+        cell: ({ row }) => (
+          <Group gap={6} wrap="nowrap">
+            <Text size="sm" className="truncate">
+              {row.original.originLabel}
+            </Text>
+            <ArrowRight size={13} className="shrink-0 text-muted-foreground" />
+            <Text size="sm" className="truncate">
+              {row.original.destinationLabel}
+            </Text>
+          </Group>
+        ),
+      },
+      {
+        id: "kind",
+        header: () => <span className={bookingTable.headerCell}>Type</span>,
+        cell: ({ row }) => (
+          <Group gap={6} wrap="nowrap">
+            <Badge variant="light" color="gray" radius="sm">
+              {prettyStatus(row.original.tradeDirection)}
+            </Badge>
+            <Badge variant="outline" color="gray" radius="sm">
+              {prettyStatus(row.original.freightType)}
+            </Badge>
+          </Group>
+        ),
+      },
+      {
+        id: "status",
+        header: () => <span className={bookingTable.headerCell}>Status</span>,
+        cell: ({ row }) => (
+          <Badge
+            variant="light"
+            color={shipmentStatusColor(row.original.status)}
+            radius="sm"
+          >
+            {prettyStatus(row.original.status)}
+          </Badge>
+        ),
+      },
+      {
+        id: "chevron",
+        header: "",
+        cell: () => (
+          <Group justify="flex-end" pr="xs">
+            <ChevronRight size={16} className="text-muted-foreground" />
+          </Group>
+        ),
+      },
+    ],
+    [],
+  );
+
+  if (!loading && !error && rows.length === 0) {
+    return (
+      <Stack align="center" gap={8} py={48}>
+        <ThemeIcon variant="light" color="gray" radius="xl" size={48}>
+          <Inbox size={22} />
+        </ThemeIcon>
+        <Text c="dimmed">No shipment bookings in clearance.</Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <Box style={{ overflowX: "auto" }} px="xs" pb="xs">
+      <DataTable<ShipmentBookingRow, unknown>
+        columns={columns}
+        data={rows}
+        status={loading ? "loading" : error ? "error" : "success"}
+        onRowClick={(row) => onOpen(row.id)}
+        containerClassName="border-0 shadow-none bg-transparent"
+      />
+    </Box>
+  );
+}
+
 function ClearanceCardGrid({
   rows,
   loading,

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

@@ -1,62 +1,99 @@
 import { useNavigate } from "react-router-dom";
 import { Badge, Card, Group, Loader, Stack, Text } from "@mantine/core";
-import { ChevronRight, Ship } from "lucide-react";
+import { ChevronRight, PackageCheck, Ship } from "lucide-react";
 
 import { PageContainer } from "@/components/page/PageContainer";
 import { PageHeader } from "@/components/page/PageHeader";
 import { useDjClearanceQueue } from "@/hooks/contracts/useContracts";
+import { useBookingDjClearanceQueue } from "@/hooks/bookings/useBookings";
 
 export default function GlDjiboutiClearanceListPage() {
   const navigate = useNavigate();
   const { data: contractQueue, isLoading: contractsLoading } = useDjClearanceQueue();
+  const { data: bookingQueue, isLoading: bookingsLoading } =
+    useBookingDjClearanceQueue();
 
   const contractItems = contractQueue?.items ?? [];
+  const bookingItems = bookingQueue ?? [];
 
   return (
     <PageContainer>
       <PageHeader
         title="GL Djibouti — Clearance"
-        subtitle="Customs contracts handed off to Djibouti GL."
+        subtitle="Customs contracts and shipment bookings handed off to Djibouti GL."
       />
-      {contractsLoading ? (
+      {contractsLoading || bookingsLoading ? (
         <Group justify="center" py={60}>
           <Loader color="edr-green" />
         </Group>
       ) : (
         <Stack gap="sm">
-          {contractItems.length === 0 ? (
+          {contractItems.length === 0 && bookingItems.length === 0 ? (
             <Text c="dimmed" ta="center" py="xl">
-              No Djibouti customs contracts yet.
+              No Djibouti customs work yet.
             </Text>
           ) : (
-            contractItems.map((c) => (
-              <Card
-                key={c.id}
-                withBorder
-                radius="md"
-                padding="md"
-                style={{ cursor: "pointer" }}
-                onClick={() => navigate(`/dashboard/gl-djibouti/clearance/${c.id}`)}
-              >
-                <Group justify="space-between" wrap="nowrap">
-                  <Group gap="sm">
-                    <Ship size={18} className="text-[color:var(--freight-brand)]" />
-                    <div>
-                      <Text fw={700}>{c.reference}</Text>
-                      <Text size="sm" c="dimmed">
-                        {c.tradeDirection} · {c.status}
-                      </Text>
-                    </div>
+            <>
+              {contractItems.map((c) => (
+                <Card
+                  key={c.id}
+                  withBorder
+                  radius="md"
+                  padding="md"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => navigate(`/dashboard/gl-djibouti/clearance/${c.id}`)}
+                >
+                  <Group justify="space-between" wrap="nowrap">
+                    <Group gap="sm">
+                      <Ship size={18} className="text-[color:var(--freight-brand)]" />
+                      <div>
+                        <Text fw={700}>{c.reference}</Text>
+                        <Text size="sm" c="dimmed">
+                          {c.tradeDirection} · {c.status}
+                        </Text>
+                      </div>
+                    </Group>
+                    <Group gap="xs">
+                      <Badge variant="light" color="edr-green">
+                        Contract
+                      </Badge>
+                      <ChevronRight size={18} className="text-muted-foreground" />
+                    </Group>
                   </Group>
-                  <Group gap="xs">
-                    <Badge variant="light" color="edr-green">
-                      Contract
-                    </Badge>
-                    <ChevronRight size={18} className="text-muted-foreground" />
+                </Card>
+              ))}
+              {bookingItems.map((b) => (
+                <Card
+                  key={b.id}
+                  withBorder
+                  radius="md"
+                  padding="md"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => navigate(`/dashboard/clearance/${b.id}`)}
+                >
+                  <Group justify="space-between" wrap="nowrap">
+                    <Group gap="sm">
+                      <PackageCheck
+                        size={18}
+                        className="text-[color:var(--freight-brand)]"
+                      />
+                      <div>
+                        <Text fw={700}>{b.reference}</Text>
+                        <Text size="sm" c="dimmed">
+                          {b.tradeDirection} · {b.status}
+                        </Text>
+                      </div>
+                    </Group>
+                    <Group gap="xs">
+                      <Badge variant="light" color="blue">
+                        Shipment
+                      </Badge>
+                      <ChevronRight size={18} className="text-muted-foreground" />
+                    </Group>
                   </Group>
-                </Group>
-              </Card>
-            ))
+                </Card>
+              ))}
+            </>
           )}
         </Stack>
       )}