From da0f1e4cc9778c1e5bd394635e18fbe6b05a98cd Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Sat, 6 Jun 2026 09:11:13 +0300
Subject: [PATCH] feat(bookings): enhance contract viewer and backoffice UI
 consistency

---
 .../components/bookings/booking-ui.styles.ts  | 11 +--
 .../layout/FreightDashboardHeader.tsx         | 45 +++++++--
 .../layout/FreightDashboardLayout.tsx         | 15 +--
 .../src/components/layout/FreightSidebar.tsx  | 48 +++++++---
 .../pages/bookings/BookingContractPage.tsx    | 27 +++---
 .../src/pages/bookings/BookingDetailPage.tsx  | 95 ++++++++++++++-----
 apps/edr-freight-web/portal/src/utils/api.ts  | 29 +++---
 7 files changed, 185 insertions(+), 85 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts b/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts
index c2330977e..6a955237c 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts
@@ -1,12 +1,10 @@
 /** Shared surfaces for booking list & detail — frosted glass, neutral accents. */
 
 export const bookingGlass = {
-  card:
-    "border border-border/50 bg-card/75 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/60",
+  card: "border border-border/50 bg-card/75 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/60",
   panel:
     "border border-border/50 bg-card/80 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/65",
-  rail:
-    "border border-border/40 bg-muted/20 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/15",
+  rail: "border border-border/40 bg-muted/20 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/15",
   iconWell:
     "border border-border/50 bg-background/70 text-foreground/75 shadow-sm backdrop-blur-sm supports-[backdrop-filter]:bg-background/50",
   iconWellHero:
@@ -22,9 +20,8 @@ export const bookingGlass = {
 } as const;
 
 export const bookingSurface = {
-  page:
-    "min-h-screen bg-gradient-to-b from-muted/30 via-background to-background",
-  pageInner: "mx-auto max-w-[1600px] space-y-5 p-6 lg:p-8",
+  page: "min-h-screen bg-background ",
+  pageInner: "mx-auto max-w-[1600px] space-y-5 ",
   hero: `relative overflow-hidden rounded-2xl ${bookingGlass.card}`,
   heroGlow:
     "pointer-events-none absolute -right-24 -top-24 size-72 rounded-full bg-muted/40 blur-3xl",
diff --git a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx
index 48f13f4ff..64be337b1 100644
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx
@@ -56,7 +56,10 @@ const FreightDashboardHeader = ({
     if (!isUserMenuOpen) return;
 
     const handlePointerDown = (event: MouseEvent) => {
-      if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) {
+      if (
+        userMenuRef.current &&
+        !userMenuRef.current.contains(event.target as Node)
+      ) {
         setIsUserMenuOpen(false);
       }
     };
@@ -74,10 +77,14 @@ const FreightDashboardHeader = ({
   }, [isUserMenuOpen]);
 
   return (
-    <header className="flex h-[82px] shrink-0 items-center justify-between gap-4 px-6">
+    <header className="flex h-20 shrink-0 items-center justify-between gap-4 px-6">
       <div className="min-w-0">
-        <h1 className="truncate text-xl font-bold tracking-tight text-gray-900">{pageMeta.title}</h1>
-        <p className="mt-0.5 truncate text-sm text-gray-500">{pageMeta.subtitle}</p>
+        <h1 className="truncate text-xl font-bold tracking-tight text-foreground">
+          {pageMeta.title}
+        </h1>
+        <p className="mt-0.5 truncate text-sm text-secondary-foreground">
+          {pageMeta.subtitle}
+        </p>
       </div>
 
       <div className="flex shrink-0 items-center gap-2">
@@ -85,14 +92,24 @@ const FreightDashboardHeader = ({
           <button
             type="button"
             onClick={onToggleTheme}
-            aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+            aria-label={
+              theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+            }
             className={iconButtonClass}
           >
-            {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+            {theme === "dark" ? (
+              <Sun className="h-5 w-5" />
+            ) : (
+              <Moon className="h-5 w-5" />
+            )}
           </button>
         ) : null}
 
-        <button type="button" aria-label="Change language" className={iconButtonClass}>
+        <button
+          type="button"
+          aria-label="Change language"
+          className={iconButtonClass}
+        >
           <Languages className="h-5 w-5" />
         </button>
 
@@ -101,7 +118,11 @@ const FreightDashboardHeader = ({
           <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-red-500 ring-2 ring-white" />
         </button>
 
-        <button type="button" aria-label="Notifications" className={iconButtonClass}>
+        <button
+          type="button"
+          aria-label="Notifications"
+          className={iconButtonClass}
+        >
           <Bell className="h-5 w-5" />
           <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-red-500 ring-2 ring-white" />
         </button>
@@ -136,8 +157,12 @@ const FreightDashboardHeader = ({
               className="absolute right-0 top-full z-50 mt-2 w-52 overflow-hidden rounded-xl border border-gray-200 bg-white py-1 shadow-lg"
             >
               <div className="border-b border-gray-100 px-4 py-3">
-                <p className="text-sm font-semibold text-gray-900">{userName}</p>
-                {userEmail ? <p className="text-xs text-gray-500">{userEmail}</p> : null}
+                <p className="text-sm font-semibold text-gray-900">
+                  {userName}
+                </p>
+                {userEmail ? (
+                  <p className="text-xs text-gray-500">{userEmail}</p>
+                ) : null}
               </div>
               <a
                 href="#profile"
diff --git a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx
index 657b56ea7..7fc480138 100644
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx
@@ -12,7 +12,9 @@ function getInitialTheme(): Theme {
   if (typeof window === "undefined") return "light";
   const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
   if (stored === "dark" || stored === "light") return stored;
-  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
 }
 
 export interface FreightDashboardLayoutProps {
@@ -29,7 +31,7 @@ export interface FreightDashboardLayoutProps {
 }
 
 const panelClass =
-  "rounded-2xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.06)]";
+  "rounded-lg border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.06)]";
 
 const FreightDashboardLayout = ({
   sidebarSections,
@@ -59,7 +61,8 @@ const FreightDashboardLayout = ({
     window.localStorage.setItem(THEME_STORAGE_KEY, theme);
   }, [theme, enableThemeToggle]);
 
-  const toggleTheme = () => setTheme((current) => (current === "dark" ? "light" : "dark"));
+  const toggleTheme = () =>
+    setTheme((current) => (current === "dark" ? "light" : "dark"));
 
   return (
     <>
@@ -71,17 +74,17 @@ const FreightDashboardLayout = ({
       />
 
       <div
-        className="flex h-[100dvh] overflow-hidden bg-[#eceef2] p-3 antialiased md:p-4"
+        className="flex h-[100dvh] overflow-hidden bg-[#eceef2] p-2 antialiased"
         style={{ fontFamily: "'Outfit', var(--font-sans)" }}
       >
-        <div className="flex h-full min-h-0 w-full gap-3 md:gap-3">
+        <div className="flex h-full min-h-0 w-full gap-2">
           <FreightSidebar
             sections={sidebarSections}
             activeHref={activeHref}
             onNavigate={onNavigate}
           />
 
-          <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col gap-3 md:gap-3">
+          <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col gap-2">
             <div className={`shrink-0 ${panelClass}`}>
               <FreightDashboardHeader
                 pageMeta={pageMeta}
diff --git a/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx b/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
index 399f61778..6f3098177 100644
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
@@ -1,4 +1,10 @@
-import { type MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
+import {
+  type MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 
 import { cn } from "@/lib/utils";
@@ -20,21 +26,28 @@ const collectSidebarHrefs = (items: SidebarItem[]): string[] =>
   items.flatMap((item) => {
     const hrefs: string[] = [];
     if (item.href) hrefs.push(item.href.toLowerCase());
-    if (item.children?.length) hrefs.push(...collectSidebarHrefs(item.children));
+    if (item.children?.length)
+      hrefs.push(...collectSidebarHrefs(item.children));
     return hrefs;
   });
 
 const flattenSectionItems = (sections: SidebarSection[]) =>
   sections.flatMap((section) => section.items);
 
-const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProps) => {
+const FreightSidebar = ({
+  sections,
+  activeHref,
+  onNavigate,
+}: FreightSidebarProps) => {
   const items = useMemo(() => flattenSectionItems(sections), [sections]);
   const activePath = activeHref?.toLowerCase() ?? "";
 
   const isHrefActive = useCallback(
     (href: string) => {
       const normalized = href.toLowerCase();
-      return activePath === normalized || activePath.startsWith(`${normalized}/`);
+      return (
+        activePath === normalized || activePath.startsWith(`${normalized}/`)
+      );
     },
     [activePath],
   );
@@ -72,7 +85,8 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp
     return acc;
   }, [activePath, branchContainsActive, isHrefActive, items]);
 
-  const [expanded, setExpanded] = useState<Record<string, boolean>>(defaultExpanded);
+  const [expanded, setExpanded] =
+    useState<Record<string, boolean>>(defaultExpanded);
 
   useEffect(() => {
     setExpanded((current) => ({ ...defaultExpanded, ...current }));
@@ -108,7 +122,11 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp
           : "text-gray-900",
     );
 
-  const renderNavBranch = (children: SidebarItem[], depth: number, parentKey: string) =>
+  const renderNavBranch = (
+    children: SidebarItem[],
+    depth: number,
+    parentKey: string,
+  ) =>
     children.map((child) => {
       const key = sidebarItemKey(child, parentKey);
       const isGroup = Boolean(child.children?.length) && !child.href;
@@ -181,7 +199,9 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp
 
     const hasChildren = Boolean(item.children?.length);
     const itemHref = item.href.toLowerCase();
-    const childActive = hasChildren ? branchContainsActive(item.children!) : false;
+    const childActive = hasChildren
+      ? branchContainsActive(item.children!)
+      : false;
     const isCurrentItem = hasChildren
       ? activePath === itemHref
       : isHrefActive(itemHref);
@@ -206,10 +226,12 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp
             href={item.href}
             onClick={(event) => navigateTo(event, item.href!)}
             aria-current={isCurrentItem ? "page" : undefined}
-            className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2.5 text-base font-medium leading-snug"
+            className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2.5 text-sm leading-snug"
           >
             {item.icon ? (
-              <span className={iconClass(leafActive, isActive)}>{item.icon}</span>
+              <span className={iconClass(leafActive, isActive)}>
+                {item.icon}
+              </span>
             ) : null}
             <span className="truncate">{item.label}</span>
           </a>
@@ -257,10 +279,12 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp
   };
 
   return (
-    <aside className="flex h-full max-h-full w-[340px] shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
+    <aside className="flex h-full max-h-full w-[280px] shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
       <div className="flex shrink-0 items-center gap-2.5 border-b border-gray-100 px-5 py-5">
         <img src={EDR_LOGO} alt="EDR Freight" className="h-9 w-auto" />
-        <span className="text-lg font-semibold tracking-tight text-gray-900">EDR Freight</span>
+        <span className="text-lg font-semibold tracking-tight text-gray-900">
+          EDR Freight
+        </span>
       </div>
 
       <nav className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto overscroll-contain px-3 py-4">
@@ -270,7 +294,7 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp
               className={cn(
                 "px-3 pb-1 text-xs font-semibold uppercase tracking-wide",
                 // Use a very light gray for ALL section titles, not just when mutedTitle is specified
-                "text-gray-400"
+                "text-sidebar-secondary-foreground",
               )}
             >
               {section.title}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingContractPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingContractPage.tsx
index a8742c9b1..dd1916093 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingContractPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingContractPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -21,6 +21,7 @@ export default function BookingContractPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const qc = useQueryClient();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
   const [signOpen, setSignOpen] = useState(false);
   const [signerName, setSignerName] = useState("");
   const [signatureData, setSignatureData] = useState<string | null>(null);
@@ -58,6 +59,12 @@ export default function BookingContractPage() {
     }
   }, [id, data?.reference]);
 
+  const handlePrint = useCallback(() => {
+    if (iframeRef.current?.contentWindow) {
+      iframeRef.current.contentWindow.print();
+    }
+  }, []);
+
   if (isLoading) {
     return (
       <div className="flex min-h-[40vh] items-center justify-center">
@@ -77,8 +84,6 @@ export default function BookingContractPage() {
     );
   }
 
-  const bodyHtml = extractBodyHtml(data.html);
-
   return (
     <div className="min-h-screen bg-muted/30 p-4 md:p-8">
       <div className="mx-auto max-w-4xl">
@@ -88,7 +93,7 @@ export default function BookingContractPage() {
             Back to booking
           </Button>
           <div className="flex flex-wrap gap-2">
-            <Button variant="outline" size="sm" onClick={() => window.print()}>
+            <Button variant="outline" size="sm" onClick={handlePrint}>
               <Printer className="mr-2 size-4" />
               Print
             </Button>
@@ -105,9 +110,12 @@ export default function BookingContractPage() {
           </div>
         </div>
 
-        <article
-          className="contract-document rounded-lg border bg-white p-6 shadow-sm print:shadow-none md:p-10"
-          dangerouslySetInnerHTML={{ __html: bodyHtml }}
+        <iframe
+          ref={iframeRef}
+          srcDoc={data.html}
+          className="w-full rounded-lg border bg-white shadow-sm"
+          style={{ minHeight: "80vh" }}
+          title="Contract document"
         />
       </div>
 
@@ -158,8 +166,3 @@ export default function BookingContractPage() {
     </div>
   );
 }
-
-function extractBodyHtml(fullHtml: string): string {
-  const match = fullHtml.match(/<body[^>]*>([\s\S]*)<\/body>/i);
-  return match ? match[1] : fullHtml;
-}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
index fc725c368..fd69b68f0 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
@@ -844,28 +844,7 @@ function ReadonlyBookingView({ booking }: { booking: Freight.IBooking }) {
           </CardHeader>
         </Card>
 
-        {(booking.status === "CONTRACT_READY" ||
-          booking.status === "SIGNED_CUSTOMER" ||
-          booking.status === "FULLY_EXECUTED") && (
-            <Card className="border-primary/30 bg-primary/5">
-              <CardContent className="flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between">
-                <div>
-                  <p className="font-semibold text-foreground">Contract ready</p>
-                  <p className="text-sm text-muted-foreground">
-                    Review the agreement and apply your digital signature.
-                  </p>
-                </div>
-                <button
-                  type="button"
-                  className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground"
-                  onClick={() => navigate(`/bookings/${booking.id}/contract`)}
-                >
-                  <FileSignature className="size-4" />
-                  View &amp; sign contract
-                </button>
-              </CardContent>
-            </Card>
-          )}
+        {renderContractCard(booking, navigate)}
 
         <Card>
           <CardHeader>
@@ -1218,6 +1197,78 @@ function ReadonlyBookingView({ booking }: { booking: Freight.IBooking }) {
   );
 }
 
+function renderContractCard(
+  booking: Freight.IBooking,
+  navigate: ReturnType<typeof useNavigate>,
+) {
+  const s = booking.status;
+  if (
+    s !== "APPROVED_PENDING_SIGNATURE" &&
+    s !== "CONTRACT_READY" &&
+    s !== "SIGNED_CUSTOMER" &&
+    s !== "FULLY_EXECUTED"
+  ) {
+    return null;
+  }
+
+  const config: Record<
+    string,
+    { title: string; description: string; buttonLabel?: string }
+  > = {
+    APPROVED_PENDING_SIGNATURE: {
+      title: "Contract being prepared",
+      description:
+        "Your booking has been approved. The contract is being generated and will be available shortly.",
+    },
+    CONTRACT_READY: {
+      title: "Contract ready for signature",
+      description:
+        "Review the agreement and apply your digital signature.",
+      buttonLabel: "View & sign contract",
+    },
+    SIGNED_CUSTOMER: {
+      title: "You have signed the contract",
+      description:
+        "Your signature has been submitted. Awaiting staff signature to finalize.",
+      buttonLabel: "View contract",
+    },
+    FULLY_EXECUTED: {
+      title: "Contract fully executed",
+      description:
+        "The contract has been fully signed and executed by all parties.",
+      buttonLabel: "View contract",
+    },
+  };
+
+  const c = config[s];
+
+  return (
+    <Card
+      className={cn(
+        "border-primary/30 bg-primary/5",
+        s === "FULLY_EXECUTED" && "border-emerald-300 bg-emerald-50",
+      )}
+    >
+      <CardContent className="flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <p className="font-semibold text-foreground">{c.title}</p>
+          <p className="text-sm text-muted-foreground">{c.description}</p>
+        </div>
+        {c.buttonLabel && (
+          <button
+            type="button"
+            className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground"
+            onClick={() => navigate(`/bookings/${booking.id}/contract`)}
+          >
+            <FileSignature className="size-4" />
+            {c.buttonLabel}
+          </button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
 function RouteEndpoint({
   label,
   station,
diff --git a/apps/edr-freight-web/portal/src/utils/api.ts b/apps/edr-freight-web/portal/src/utils/api.ts
index d152e6aad..2523eb94c 100644
--- a/apps/edr-freight-web/portal/src/utils/api.ts
+++ b/apps/edr-freight-web/portal/src/utils/api.ts
@@ -1,7 +1,4 @@
-import {
-  UseQueryOptions,
-  QueryObserverOptions,
-} from "@tanstack/react-query";
+import { UseQueryOptions, QueryObserverOptions } from "@tanstack/react-query";
 import axios, { AxiosError, InternalAxiosRequestConfig } from "axios";
 import { URL_CONSTANTS } from "@/constants/URLS";
 
@@ -23,11 +20,15 @@ function setCookie(name: string, value: string, days: number) {
 }
 
 function clearAuthCookies() {
-  ["auth-token", "refresh-token", "auth-user", "current-position-id", "selected-position-id"].forEach(
-    (name) => {
-      document.cookie = `${name}=; Max-Age=0; path=/`;
-    },
-  );
+  [
+    "auth-token",
+    "refresh-token",
+    "auth-user",
+    "current-position-id",
+    "selected-position-id",
+  ].forEach((name) => {
+    document.cookie = `${name}=; Max-Age=0; path=/`;
+  });
 }
 
 // Attach auth token to every request
@@ -96,17 +97,13 @@ client.interceptors.response.use(
     if (!refreshToken) {
       isRefreshing = false;
       clearAuthCookies();
-      if (window.location.pathname !== "/login") {
-        window.location.href = "/login";
-      }
       return Promise.reject(error);
     }
 
     try {
-      const { data } = await client.post<{ data: { token: string; refreshToken: string } }>(
-        URL_CONSTANTS.AUTH.REFRESH_TOKEN,
-        { refreshToken },
-      );
+      const { data } = await client.post<{
+        data: { token: string; refreshToken: string };
+      }>(URL_CONSTANTS.AUTH.REFRESH_TOKEN, { refreshToken });
       const { token, refreshToken: newRefreshToken } = data.data;
       setCookie("auth-token", token, 7);
       setCookie("refresh-token", newRefreshToken, 7);