feat(bookings): Integrate booking list and detail pages with API

apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx

@@ -1,4 +1,5 @@
 import { useNavigate, useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import {
   Calendar,
   MapPin,
@@ -22,10 +23,12 @@ import {
   CreditCard,
   FileSignature,
   PackageCheck,
+  LoaderCircle,
 } from "lucide-react";
 
 import Breadcrumbs from "@/components/Breadcrumbs";
-import { getBookingById } from "./bookings.mock";
+import { api } from "@/services/api";
+import type { Freight } from "@edr/types";
 import { 
   Card, 
   CardHeader, 
@@ -37,45 +40,67 @@ import {
 } from "@edr/ui-common";
 import { cn } from "@/lib/utils";
 
-// Grouping the 15 granular statuses into 6 logical progress stages for the UI tracker
 const PROGRESS_STAGES = [
-  { label: "Request", icon: FileText, statuses: ["DRAFT", "RFQ_SUBMITTED"] },
-  { label: "Quotation", icon: ClipboardCheck, statuses: ["QUOTATION_SENT", "QUOTATION_APPROVED", "QUOTATION_REJECTED"] },
-  { label: "Approval", icon: ShieldCheck, statuses: ["PENDING_APPROVAL", "APPROVED"] },
-  { label: "Execution", icon: FileSignature, statuses: ["SIGNED_CUSTOMER", "FULLY_EXECUTED", "PAID"] },
-  { label: "In Transit", icon: Train, statuses: ["IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"] },
-  { label: "Complete", icon: PackageCheck, statuses: ["COMPLETED"] },
+  { label: "Request", icon: FileText, statuses: ["DRAFT"] },
+  { label: "Approval", icon: ClipboardCheck, statuses: ["CONFIRMED"] },
+  { label: "In Transit", icon: Train, statuses: ["IN_TRANSIT"] },
+  { label: "Complete", icon: PackageCheck, statuses: ["DELIVERED"] },
 ];
 
 const STATUS_MAP: Record<string, { title: string; description: string; color: string; stage: number }> = {
   DRAFT: { title: "Drafting Request", description: "Booking is being prepared and has not been submitted.", color: "text-slate-500", stage: 0 },
-  RFQ_SUBMITTED: { title: "RFQ Submitted", description: "Request for Quotation has been sent to the operations team.", color: "text-amber-600", stage: 0 },
-  QUOTATION_SENT: { title: "Quotation Received", description: "EDR has sent a formal quotation for your review.", color: "text-sky-600", stage: 1 },
-  QUOTATION_APPROVED: { title: "Quotation Approved", description: "You have accepted the quotation terms.", color: "text-emerald-600", stage: 1 },
-  QUOTATION_REJECTED: { title: "Quotation Rejected", description: "The quotation was not accepted.", color: "text-red-600", stage: 1 },
-  PENDING_APPROVAL: { title: "Internal Approval", description: "Booking is undergoing final administrative review.", color: "text-amber-600", stage: 2 },
-  APPROVED: { title: "Booking Approved", description: "Request is fully approved and ready for execution.", color: "text-emerald-600", stage: 2 },
-  SIGNED_CUSTOMER: { title: "Customer Signed", description: "Contract has been signed by the customer.", color: "text-sky-600", stage: 3 },
-  FULLY_EXECUTED: { title: "Contract Executed", description: "All parties have signed. Operational setup in progress.", color: "text-indigo-600", stage: 3 },
-  PAID: { title: "Payment Received", description: "Initial payments confirmed. Cargo ready for dispatch.", color: "text-emerald-600", stage: 3 },
-  IN_TRANSIT: { title: "Cargo Moving", description: "Shipment is currently moving through the rail network.", color: "text-sky-600", stage: 4 },
-  PENDING_CONSOLIDATION: { title: "Consolidation Node", description: "Cargo is waiting to be consolidated with other shipments.", color: "text-amber-500", stage: 4 },
-  CONSOLIDATED: { title: "Load Consolidated", description: "Cargo has been successfully merged into a larger shipment.", color: "text-indigo-500", stage: 4 },
-  COMPLETED: { title: "Service Complete", description: "Cargo delivered and service successfully terminated.", color: "text-emerald-600", stage: 5 },
+  CONFIRMED: { title: "Booking Confirmed", description: "Booking has been confirmed and approved.", color: "text-emerald-600", stage: 1 },
+  IN_TRANSIT: { title: "Cargo Moving", description: "Shipment is currently moving through the rail network.", color: "text-sky-600", stage: 2 },
+  DELIVERED: { title: "Service Complete", description: "Cargo delivered and service successfully terminated.", color: "text-emerald-600", stage: 3 },
   CANCELLED: { title: "Cancelled", description: "This booking process has been terminated.", color: "text-red-600", stage: -1 },
 };
 
 export default function BookingDetailPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
-  const booking = id ? getBookingById(id) : undefined;
+
+  const { data: booking, isLoading, isError, error } = useQuery(
+    api.bookings.get.queryOptions({
+      input: { id: id! },
+      enabled: !!id,
+    }),
+  );
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto flex items-center justify-center p-12">
+        <div className="flex flex-col items-center gap-4">
+          <LoaderCircle className="size-8 animate-spin text-primary" />
+          <p className="text-sm text-muted-foreground">Loading booking details…</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="container mx-auto p-6">
+        <Card className="flex flex-col items-center p-12 text-center">
+          <div className="flex size-16 items-center justify-center rounded-full bg-red-50 text-red-400">
+            <AlertTriangle className="size-8" />
+          </div>
+          <h1 className="mt-4 text-2xl font-bold text-slate-900">
+            Failed to load booking
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            {error instanceof Error ? error.message : "An unexpected error occurred."}
+          </p>
+        </Card>
+      </div>
+    );
+  }
 
   if (!booking) {
     return (
       <div className="container mx-auto p-6">
         <Card className="flex flex-col items-center p-12 text-center">
           <div className="flex size-16 items-center justify-center rounded-full bg-slate-100 text-slate-400">
-             <Package className="size-8" />
+            <Package className="size-8" />
           </div>
           <h1 className="mt-4 text-2xl font-bold text-slate-900">
             Booking not found
@@ -85,16 +110,17 @@ export default function BookingDetailPage() {
     );
   }
 
-  // Normalize status to upper case for mapping
-  const normalizedStatus = (booking.status === "In Transit" ? "IN_TRANSIT" : booking.status === "Pending" ? "RFQ_SUBMITTED" : booking.status.toUpperCase()) as keyof typeof STATUS_MAP;
+  const normalizedStatus = booking.status as keyof typeof STATUS_MAP;
   const statusConfig = STATUS_MAP[normalizedStatus] || STATUS_MAP.DRAFT;
   const currentStageIndex = statusConfig.stage;
 
+  const containerCount = booking.containers?.reduce((sum, c) => sum + c.qty, 0) ?? 0;
+  const containerType = booking.containers?.[0]?.type ?? null;
+
   return (
     <div className="container mx-auto max-w-7xl px-4 py-8">
       <div className="flex flex-col gap-8">
         
-        {/* Breadcrumbs Restored */}
         <Breadcrumbs
           items={[
             { label: "Bookings", href: "/bookings" },
@@ -102,7 +128,6 @@ export default function BookingDetailPage() {
           ]}
         />
 
-        {/* Compact Header Card */}
         <Card>
           <CardHeader>
             <div className="flex items-center gap-6">
@@ -117,11 +142,9 @@ export default function BookingDetailPage() {
                   <StatusBadge status={normalizedStatus} />
                 </div>
                 <div className="flex items-center gap-3 text-xs text-muted-foreground">
-                  <span className="font-semibold">{booking.customer}</span>
-                  <Separator orientation="vertical" className="h-3" />
                   <span className="flex items-center gap-1">
                     <Calendar className="size-3" />
-                    {booking.requestedDate}
+                    {booking.scheduledDate ?? booking.createdAt}
                   </span>
                 </div>
               </div>
@@ -129,7 +152,6 @@ export default function BookingDetailPage() {
           </CardHeader>
         </Card>
 
-        {/* Granular Status Lifecycle */}
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center gap-2 text-base">
@@ -140,7 +162,6 @@ export default function BookingDetailPage() {
           </CardHeader>
           <CardContent className="flex flex-col gap-8">
             <div className="relative flex w-full justify-between px-2">
-              {/* Progress Line */}
               <div className="absolute top-4 left-0 h-0.5 w-full bg-muted">
                 <div 
                   className="h-full bg-primary transition-all duration-500" 
@@ -185,7 +206,7 @@ export default function BookingDetailPage() {
                     {statusConfig.description}
                   </p>
                </div>
-               {normalizedStatus !== "CANCELLED" && normalizedStatus !== "COMPLETED" && (
+               {normalizedStatus !== "CANCELLED" && normalizedStatus !== "DELIVERED" && (
                  <div className="ml-auto flex items-center gap-4 border-l border-border pl-6">
                     <div className="flex flex-col">
                        <p className="text-[9px] font-bold uppercase text-muted-foreground">Est. Waiting</p>
@@ -200,7 +221,6 @@ export default function BookingDetailPage() {
 
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
           <div className="flex flex-col gap-8 lg:col-span-2">
-            {/* Route & Core Service Card */}
             <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-base">
@@ -232,14 +252,13 @@ export default function BookingDetailPage() {
                 </div>
 
                 <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-                  <InfoItem icon={<Layers />} label="Service" value="Rail & Forwarding" />
-                  <InfoItem icon={<ShieldCheck />} label="Return" value="With Return" />
-                  <InfoItem icon={<FileText />} label="Customs" value="Enabled" />
+                  <InfoItem icon={<Layers />} label="Service" value={booking.serviceType === "RAIL_AND_FORWARDING" ? "Rail & Forwarding" : "Rail Only"} />
+                  <InfoItem icon={<ShieldCheck />} label="Return" value={booking.equipmentReturn === "WITH_RETURN" ? "With Return" : "Without Return"} />
+                  <InfoItem icon={<FileText />} label="Trade" value={booking.tradeDirection === "IMPORT" ? "Import" : "Export"} />
                 </div>
               </CardContent>
             </Card>
 
-            {/* Mile Services Card */}
             <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-base">
@@ -252,18 +271,19 @@ export default function BookingDetailPage() {
                   <h3 className="border-l-4 border-primary pl-3 text-xs font-bold uppercase tracking-wide text-foreground">
                     First Mile
                   </h3>
-                  <InfoItem label="Address" value="Inside Addis Ababa Yard, Gate 2" />
+                  <InfoItem label="Address" value={booking.firstMileEnabled && booking.firstMilePickupAddress ? booking.firstMilePickupAddress : "Not requested"} />
                 </div>
                 <div className="flex flex-col gap-3">
                   <h3 className="border-l-4 border-primary pl-3 text-xs font-bold uppercase tracking-wide text-foreground">
                     Last Mile
                   </h3>
-                  <p className="pl-4 text-xs text-muted-foreground italic">Not requested</p>
+                  <p className="pl-4 text-xs text-muted-foreground italic">
+                    {booking.lastMileEnabled && booking.lastMileDeliveryAddress ? booking.lastMileDeliveryAddress : "Not requested"}
+                  </p>
                 </div>
               </CardContent>
             </Card>
 
-            {/* Cargo Specifications Card */}
             <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-base">
@@ -273,40 +293,44 @@ export default function BookingDetailPage() {
               </CardHeader>
               <CardContent className="flex flex-col gap-6">
                 <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-                  <InfoItem icon={<Package />} label="Category" value={booking.cargoType} />
-                  <InfoItem icon={<Weight />} label="Weight" value={`${booking.weightTons} Tons`} />
-                  <InfoItem icon={<Ship />} label="Shipping Line" value="MSC" />
+                  <InfoItem icon={<Package />} label="Freight Type" value={booking.freightType === "BULK" ? "Bulk" : "Break Bulk"} />
+                  <InfoItem icon={<Weight />} label="Weight (VGM)" value={`${booking.cargoTotalWeightVgm} Tons`} />
+                  <InfoItem icon={<Ship />} label="Currency" value={booking.paymentCurrency} />
                 </div>
 
-                <Separator />
-
-                <div className="flex flex-col gap-3">
-                  <h3 className="text-xs font-bold uppercase tracking-wide text-foreground">Load Details</h3>
-                  <div className="rounded-lg border overflow-hidden">
-                      <table className="w-full text-left text-xs">
-                        <thead className="bg-muted text-muted-foreground">
-                          <tr>
-                            <th className="px-3 py-2 font-semibold">Description</th>
-                            <th className="px-3 py-2 font-semibold text-center">Unit</th>
-                            <th className="px-3 py-2 font-semibold text-right">Value</th>
-                          </tr>
-                        </thead>
-                        <tbody className="divide-y">
-                          <tr>
-                            <td className="px-3 py-2 font-medium">Main Equipment</td>
-                            <td className="px-3 py-2 text-center">20FT Container</td>
-                            <td className="px-3 py-2 text-right">4 Units</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                  </div>
-                </div>
+                {booking.containers && booking.containers.length > 0 && (
+                  <>
+                    <Separator />
+                    <div className="flex flex-col gap-3">
+                      <h3 className="text-xs font-bold uppercase tracking-wide text-foreground">Load Details</h3>
+                      <div className="rounded-lg border overflow-hidden">
+                        <table className="w-full text-left text-xs">
+                          <thead className="bg-muted text-muted-foreground">
+                            <tr>
+                              <th className="px-3 py-2 font-semibold">Type</th>
+                              <th className="px-3 py-2 font-semibold text-center">Quantity</th>
+                              <th className="px-3 py-2 font-semibold text-right">VGM (Tons)</th>
+                            </tr>
+                          </thead>
+                          <tbody className="divide-y">
+                            {booking.containers.map((c, i) => (
+                              <tr key={i}>
+                                <td className="px-3 py-2 font-medium">{c.type}</td>
+                                <td className="px-3 py-2 text-center">{c.qty} Units</td>
+                                <td className="px-3 py-2 text-right">{c.vgm}t</td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  </>
+                )}
               </CardContent>
             </Card>
           </div>
 
           <div className="flex flex-col gap-8">
-            {/* Contract Card */}
             <Card className="border-primary/20 bg-primary/[0.02]">
               <CardHeader>
                 <CardTitle className="flex items-center gap-2 text-base">
@@ -315,40 +339,48 @@ export default function BookingDetailPage() {
                 </CardTitle>
               </CardHeader>
               <CardContent className="flex flex-col gap-4">
-                <InfoItem label="Type" value="Renewal" />
-                <InfoItem label="Ref" value="EDR-2024-88123" />
+                <InfoItem label="Type" value={booking.contractType === "RENEWAL" ? "Renewal" : "New"} />
+                <InfoItem label="Customer ID" value={booking.customerId} />
                 <Separator />
                 <div className="flex flex-wrap gap-2">
                   <Badge variant="outline" className="bg-background text-[9px]">
-                    Hazardous: No
+                    Hazardous: {booking.isHazardous ? "Yes" : "No"}
                   </Badge>
                   <Badge variant="outline" className="bg-background text-[9px]">
-                    Refrigerated: No
+                    Refrigerated: {booking.isRefrigerated ? "Yes" : "No"}
                   </Badge>
                 </div>
               </CardContent>
             </Card>
 
-            {/* Notes Card */}
             <Card>
               <CardHeader>
                 <CardTitle className="text-base">Additional Info</CardTitle>
               </CardHeader>
               <CardContent className="flex flex-col gap-4">
-                <div className="flex flex-col gap-1">
-                   <p className="text-[9px] font-bold uppercase tracking-tight text-muted-foreground">Description</p>
-                   <p className="text-xs text-foreground leading-relaxed italic">"{booking.cargoDescription}"</p>
-                </div>
-                <Separator />
-                <div className="flex flex-col gap-1">
-                   <p className="text-[9px] font-bold uppercase tracking-tight text-muted-foreground">Instructions</p>
-                   <div className="rounded-lg bg-amber-50/50 border border-amber-100 p-2">
-                      <p className="text-xs text-amber-900 flex gap-2">
-                        <StickyNote className="size-3 shrink-0 mt-0.5 text-amber-500" />
-                        {booking.specialInstructions}
-                      </p>
-                   </div>
-                </div>
+                {booking.freightSubtype && (
+                  <div className="flex flex-col gap-1">
+                    <p className="text-[9px] font-bold uppercase tracking-tight text-muted-foreground">Cargo Description</p>
+                    <p className="text-xs text-foreground leading-relaxed italic">"{booking.freightSubtype}"</p>
+                  </div>
+                )}
+                {booking.financialTerms && (
+                  <>
+                    <Separator />
+                    <div className="flex flex-col gap-1">
+                      <p className="text-[9px] font-bold uppercase tracking-tight text-muted-foreground">Financial Terms</p>
+                      <div className="rounded-lg bg-amber-50/50 border border-amber-100 p-2">
+                        <p className="text-xs text-amber-900 flex gap-2">
+                          <StickyNote className="size-3 shrink-0 mt-0.5 text-amber-500" />
+                          {booking.financialTerms}
+                        </p>
+                      </div>
+                    </div>
+                  </>
+                )}
+                {!booking.freightSubtype && !booking.financialTerms && (
+                  <p className="text-xs text-muted-foreground italic">No additional information provided.</p>
+                )}
               </CardContent>
             </Card>
           </div>
@@ -396,7 +428,7 @@ function InfoItem({
       {icon && <div className="mt-0.5 text-muted-foreground [&_svg]:size-3.5">{icon}</div>}
       <div className="flex flex-col">
         <p className="text-[9px] font-bold uppercase tracking-tight text-muted-foreground">{label}</p>
-        <p className="text-xs font-bold text-foreground">{value || "—"}</p>
+        <p className="text-xs font-bold text-foreground">{value ?? "—"}</p>
       </div>
     </div>
   );
@@ -405,20 +437,10 @@ function InfoItem({
 function StatusBadge({ status }: { status: string }) {
   const statusColors: Record<string, string> = {
     DRAFT: "bg-slate-50 text-slate-700 border-slate-200",
-    RFQ_SUBMITTED: "bg-amber-50 text-amber-700 border-amber-200",
-    QUOTATION_SENT: "bg-sky-50 text-sky-700 border-sky-200",
-    QUOTATION_APPROVED: "bg-emerald-50 text-emerald-700 border-emerald-200",
-    QUOTATION_REJECTED: "bg-red-50 text-red-700 border-red-200",
-    PENDING_APPROVAL: "bg-amber-50 text-amber-700 border-amber-200",
-    APPROVED: "bg-emerald-50 text-emerald-700 border-emerald-200",
-    SIGNED_CUSTOMER: "bg-sky-50 text-sky-700 border-sky-200",
-    FULLY_EXECUTED: "bg-indigo-50 text-indigo-700 border-indigo-200",
-    PAID: "bg-emerald-50 text-emerald-700 border-emerald-200",
+    CONFIRMED: "bg-emerald-50 text-emerald-700 border-emerald-200",
     IN_TRANSIT: "bg-sky-50 text-sky-700 border-sky-200",
-    COMPLETED: "bg-indigo-50 text-indigo-700 border-indigo-200",
+    DELIVERED: "bg-indigo-50 text-indigo-700 border-indigo-200",
     CANCELLED: "bg-red-50 text-red-700 border-red-200",
-    PENDING_CONSOLIDATION: "bg-amber-50 text-amber-700 border-amber-200",
-    CONSOLIDATED: "bg-indigo-50 text-indigo-700 border-indigo-200",
   };
 
   return (

apps/edr-freight-web/portal/src/pages/bookings/MyBookings.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import {
   ArrowRight,
   Clock,
@@ -9,13 +10,11 @@ import {
   Package,
   Plus,
   Search,
-  Trash2,
   Truck,
 } from "lucide-react";
 
-import DeleteBookingDialog from "./DeleteBookingDialog";
-import { getMyBookings } from "@/lib/currentCustomer";
-import { deleteBooking, type Booking, type BookingStatus } from "./bookings.mock";
+import { api } from "@/services/api";
+import type { Freight } from "@edr/types";
 import {
   DataTable,
   DataTableFooter,
@@ -32,32 +31,30 @@ import {
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
 } from "@edr/ui-common";
 
 export default function MyBookings() {
   const navigate = useNavigate();
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [searchTerm, setSearchTerm] = useState("");
-  const [myBookings, setMyBookings] = useState(() => getMyBookings());
 
-  const handleDeleteConfirm = (id: number) => {
-    deleteBooking(id);
-    setMyBookings(getMyBookings());
-  };
+  const { data, isLoading, isError } = useQuery(
+    api.bookings.list.queryOptions(),
+  );
+
+  const bookings = data?.items ?? [];
 
   const filteredData = useMemo(() => {
-    return myBookings.filter((b) => {
+    return bookings.filter((b) => {
       const term = searchTerm.toLowerCase();
       return (
         b.reference.toLowerCase().includes(term) ||
         b.originStation.toLowerCase().includes(term) ||
         b.destinationStation.toLowerCase().includes(term) ||
-        b.cargoDescription.toLowerCase().includes(term) ||
         b.status.toLowerCase().includes(term)
       );
     });
-  }, [myBookings, searchTerm]);
+  }, [bookings, searchTerm]);
 
   const total = filteredData.length;
   const pageCount = Math.ceil(total / pagination.pageSize);
@@ -67,16 +64,16 @@ export default function MyBookings() {
   const paginatedData = useMemo(() => filteredData.slice(start, end), [filteredData, start, end]);
 
   const activeCount = useMemo(() => {
-    return myBookings.filter(
-      (b) => b.status === "Confirmed" || b.status === "In Transit",
+    return bookings.filter(
+      (b) => b.status === "CONFIRMED" || b.status === "IN_TRANSIT",
     ).length;
-  }, [myBookings]);
+  }, [bookings]);
 
   const pendingCount = useMemo(() => {
-    return myBookings.filter((b) => b.status === "Pending").length;
-  }, [myBookings]);
+    return bookings.filter((b) => b.status === "DRAFT").length;
+  }, [bookings]);
 
-  const columns: ColumnDef<Booking>[] = [
+  const columns: ColumnDef<Freight.IBooking>[] = [
     {
       accessorKey: "reference",
       header: "Reference",
@@ -89,7 +86,7 @@ export default function MyBookings() {
             </div>
             <div>
               <p className="font-medium text-slate-900">{booking.reference}</p>
-              <p className="text-sm text-slate-500">{booking.requestedDate}</p>
+              <p className="text-sm text-slate-500">{booking.scheduledDate ?? booking.createdAt}</p>
             </div>
           </div>
         );
@@ -111,22 +108,24 @@ export default function MyBookings() {
       header: "Cargo",
       cell: ({ row }) => {
         const b = row.original;
+        const containerCount = b.containers?.reduce((sum, c) => sum + c.qty, 0) ?? 0;
+        const containerType = b.containers?.[0]?.type ?? null;
         return (
           <div className="text-sm text-slate-700">
-            <p>{b.cargoType}</p>
+            <p>{b.freightType === "BULK" ? "Bulk" : "Break Bulk"}</p>
             <p className="text-xs text-slate-500">
-              {b.containerCount > 0 ? `${b.containerCount} × ${b.containerType} · ` : ""}{b.weightTons}t
+              {containerType && containerCount > 0 ? `${containerCount} × ${containerType} · ` : ""}{b.cargoTotalWeightVgm}t
             </p>
           </div>
         );
       },
     },
     {
-      accessorKey: "transportMode",
+      id: "transportMode",
       header: "Transport",
       cell: ({ row }) => (
         <span className="text-sm text-slate-700">
-          {row.original.transportMode}
+          {row.original.serviceType === "RAIL_AND_FORWARDING" ? "Rail & Forwarding" : "Rail"}
         </span>
       ),
     },
@@ -158,19 +157,6 @@ export default function MyBookings() {
                   <Eye />
                   View
                 </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DeleteBookingDialog
-                  bookingReference={booking.reference}
-                  onConfirm={() => handleDeleteConfirm(booking.id)}
-                >
-                  <DropdownMenuItem
-                    onSelect={(e: Event) => e.preventDefault()}
-                    variant="destructive"
-                  >
-                    <Trash2 />
-                    Delete
-                  </DropdownMenuItem>
-                </DeleteBookingDialog>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
@@ -179,10 +165,11 @@ export default function MyBookings() {
     },
   ];
 
+  const dataTableStatus = isLoading ? "loading" : isError ? "error" : "success";
+
   return (
     <div className="min-h-screen p-6">
       <div className="space-y-6">
-        {/* Header Section Card */}
         <Card className="p-6 flex-row justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight text-slate-900">
@@ -214,14 +201,13 @@ export default function MyBookings() {
           </div>
         </Card>
 
-        {/* Stat Cards */}
         <div className="grid gap-4 md:grid-cols-3">
           <Card>
             <CardContent className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-slate-500">Total Bookings</p>
                 <h3 className="mt-2 text-3xl font-bold text-slate-900">
-                  {myBookings.length}
+                  {bookings.length}
                 </h3>
               </div>
               <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
@@ -259,7 +245,6 @@ export default function MyBookings() {
           </Card>
         </div>
 
-        {/* Data Table */}
         <Card className="gap-0">
           <CardHeader className="flex flex-row items-center justify-between border-b">
             <div>
@@ -276,7 +261,7 @@ export default function MyBookings() {
           </CardHeader>
 
           <CardContent className="px-0">
-            {total === 0 ? (
+            {total === 0 && dataTableStatus === "success" ? (
               <div className="flex flex-col items-center justify-center py-12 px-6 text-center">
                 <Package className="h-12 w-12 text-slate-300 mb-4" />
                 <h3 className="text-sm font-semibold text-slate-900">No bookings found</h3>
@@ -288,8 +273,8 @@ export default function MyBookings() {
               <DataTable
                 columns={columns}
                 data={paginatedData}
-                status="success"
-                onRowClick={(row) => navigate(`/bookings/${(row as Booking).id}`)}
+                status={dataTableStatus}
+                onRowClick={(row) => navigate(`/bookings/${(row as Freight.IBooking).id}`)}
                 pagination={{
                   pageIndex: pagination.pageIndex,
                   pageSize: pagination.pageSize,
@@ -311,20 +296,20 @@ export default function MyBookings() {
   );
 }
 
-function StatusBadge({ status }: { status: BookingStatus }) {
-  const styles: Record<BookingStatus, string> = {
-    Pending: "bg-amber-100 text-amber-700",
-    Confirmed: "bg-sky-100 text-sky-700",
-    "In Transit": "bg-indigo-100 text-indigo-700",
-    Delivered: "bg-emerald-100 text-emerald-700",
-    Cancelled: "bg-red-100 text-red-700",
+function StatusBadge({ status }: { status: string }) {
+  const styles: Record<string, string> = {
+    DRAFT: "bg-amber-100 text-amber-700",
+    CONFIRMED: "bg-sky-100 text-sky-700",
+    IN_TRANSIT: "bg-indigo-100 text-indigo-700",
+    DELIVERED: "bg-emerald-100 text-emerald-700",
+    CANCELLED: "bg-red-100 text-red-700",
   };
 
   return (
     <span
-      className={`inline-flex rounded-full px-3 py-1 text-xs font-medium ${styles[status]}`}
+      className={`inline-flex rounded-full px-3 py-1 text-xs font-medium ${styles[status] ?? "bg-slate-100 text-slate-700"}`}
     >
-      {status}
+      {status.replace(/_/g, ' ')}
     </span>
   );
 }

apps/edr-freight-web/portal/src/services/bookings.service.ts

@@ -6,22 +6,22 @@ export type CreateBookingPayload = Freight.CreateBookingDto;
 
 export const bookingsService = {
   list: async (): Promise<PaginatedResponse<Freight.IBooking>> => {
-    const { data } = await client.get("/bookings");
+    const { data } = await client.get("/api/bookings");
     return data.data;
   },
   get: async (id: string): Promise<Freight.IBooking> => {
-    const { data } = await client.get(`/bookings/${id}`);
+    const { data } = await client.get(`/api/bookings/${id}`);
     return data.data;
   },
   create: async (payload: CreateBookingPayload): Promise<Freight.IBooking> => {
     const { data } = await client.post("/api/bookings", payload);
-    return data.data;
+    return data.data.booking;
   },
   getReferenceData: async (): Promise<Freight.BookingReferenceData> => {
     const { data } = await client.get("/api/bookings/reference-data");
     return data.data;
   },
   remove: async (id: string): Promise<void> => {
-    await client.delete(`/bookings/${id}`);
+    await client.delete(`/api/bookings/${id}`);
   },
 };