streamline booking detail components and enhance journey visualization

- Removed the BookingClearanceWorkflowBanner from ClearanceCard as the clearance progress is now integrated into the unified journey wizard.
- Eliminated the MilestoneTimeline component from DocumentsTab, consolidating customs progress into the JourneyWizard.
- Updated PageHeader to include a ContractReferenceLink for better navigation to contract details.
- Simplified ShipmentTrackingCard to focus on duty/tax payment slip upload, removing unnecessary milestone display.
- Integrated JourneyWizard component to visualize the booking journey, replacing the previous progress tracker.
- Enhanced ContractDetailPage to better categorize documents and improve user experience with clearer sections for profile, business license, clearance, and other documents.
- Introduced CSS for contracts table to manage column sizing and sticky headers effectively.
- Added ContractReferenceLink component for backoffice to link to contract details, ensuring consistent navigation across applications.

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

@@ -0,0 +1,43 @@
+import { Link } from "react-router-dom";
+
+/**
+ * The parent contract's reference, linking to that contract's detail page.
+ *
+ * Backoffice-local on purpose: the contract detail route differs per app
+ * (`/dashboard/contract-requests/:id` here vs `/contracts/:id` in the portal),
+ * so the portal keeps its own copy in `pages/bookings/booking-display.tsx`
+ * rather than the two sharing a component that would have to take the route as
+ * a prop at every call site.
+ *
+ * Renders nothing when either field is missing: `contractId` is nullable on the
+ * booking, and only the bookings list/detail endpoints join `contractReference`
+ * — other endpoints (warehouse, fleet, payments) return booking rows without it,
+ * and a link with no id would be a dead one.
+ *
+ * `stopPropagation` matters: booking rows are click-to-navigate, so without it a
+ * click here would race the row handler and land on the booking instead.
+ */
+export function ContractReferenceLink({
+  contractId,
+  contractReference,
+  className,
+}: {
+  contractId?: string | null;
+  contractReference?: string | null;
+  className?: string;
+}) {
+  if (!contractId || !contractReference) return null;
+
+  return (
+    <Link
+      to={`/dashboard/contract-requests/${contractId}`}
+      onClick={(e) => e.stopPropagation()}
+      className={
+        className ??
+        "block truncate font-mono text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
+      }
+    >
+      {contractReference}
+    </Link>
+  );
+}

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

@@ -24,6 +24,7 @@ import type { LucideIcon } from "lucide-react";
 import type { BookingDetail } from "@/types/booking";
 import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
 import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
+import { ContractReferenceLink } from "@/components/bookings/ContractReferenceLink";
 import { SchedulingStatusBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
 import { NextStepBanner } from "@/components/bookings/NextStepBanner";
 
@@ -94,9 +95,15 @@ export function BookingRequestHero({
               Booking reference
             </Text>
             <Group gap="sm" align="center" wrap="wrap">
-              <Title order={2} fw={700} style={{ letterSpacing: "-0.4px" }}>
-                {booking.reference}
-              </Title>
+              <Stack gap={2} miw={0}>
+                <Title order={2} fw={700} style={{ letterSpacing: "-0.4px" }}>
+                  {booking.reference}
+                </Title>
+                <ContractReferenceLink
+                  contractId={booking.contractId}
+                  contractReference={booking.contractReference}
+                />
+              </Stack>
               <BookingStatusBadge status={booking.status} />
               <BookingPriorityBadge score={booking.priorityScore} />
               {booking.schedulingStatus ? (