feat: add more statuses to the booking deailt page and added handling of request approval

2026-08-27 00:52:50 +00:00 · 2026-06-05 11:40:44 +03:00
parent f77dd54390
commit 2760e715c7
2 changed files with 145 additions and 15 deletions
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
@@ -59,10 +59,11 @@ import { cn } from "@/lib/utils";
 import useAuth from "@/hooks/useAuth";

 const PROGRESS_STAGES = [
-  { 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"] },
+  { label: "Request", icon: FileText, statuses: ["DRAFT", "CHANGES_REQUESTED"] },
+  { label: "Submitted", icon: ClipboardCheck, statuses: ["SUBMITTED", "PENDING_APPROVAL"] },
+  { label: "Approved", icon: ShieldCheck, statuses: ["APPROVED_PENDING_SIGNATURE", "APPROVED", "CONTRACT_READY", "SIGNED_CUSTOMER", "FULLY_EXECUTED"] },
+  { label: "In Transit", icon: Train, statuses: ["PNR_GENERATED", "PAYMENT_VERIFICATION_IN_PROGRESS", "PAID", "IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"] },
+  { label: "Complete", icon: PackageCheck, statuses: ["COMPLETED", "DELIVERED"] },
 ];

 const STATUS_MAP: Record<
@@ -75,23 +76,107 @@ const STATUS_MAP: Record<
    color: "text-muted-foreground",
    stage: 0,
  },
-  CONFIRMED: {
-    title: "Booking Confirmed",
-    description: "Booking has been confirmed and approved.",
+  CHANGES_REQUESTED: {
+    title: "Changes Requested",
+    description: "Staff has requested changes. Please review and resubmit.",
+    color: "text-amber-600",
+    stage: 0,
+  },
+  SUBMITTED: {
+    title: "Submitted",
+    description: "Your booking has been submitted for review.",
    color: "text-primary",
    stage: 1,
  },
+  PENDING_APPROVAL: {
+    title: "Pending Approval",
+    description: "Booking is in the approval process.",
+    color: "text-primary",
+    stage: 1,
+  },
+  APPROVED_PENDING_SIGNATURE: {
+    title: "Awaiting Signature",
+    description: "Approved — pending contract signature.",
+    color: "text-primary",
+    stage: 2,
+  },
+  APPROVED: {
+    title: "Approved",
+    description: "Booking has been fully approved.",
+    color: "text-primary",
+    stage: 2,
+  },
+  CONTRACT_READY: {
+    title: "Contract Ready",
+    description: "Contract is available for review and signature.",
+    color: "text-primary",
+    stage: 2,
+  },
+  SIGNED_CUSTOMER: {
+    title: "Customer Signed",
+    description: "Customer has signed. Awaiting staff signature.",
+    color: "text-primary",
+    stage: 2,
+  },
+  FULLY_EXECUTED: {
+    title: "Fully Executed",
+    description: "Contract has been fully signed and executed.",
+    color: "text-primary",
+    stage: 2,
+  },
+  PNR_GENERATED: {
+    title: "PNR Generated",
+    description: "Payment reference number generated.",
+    color: "text-primary",
+    stage: 3,
+  },
+  PAYMENT_VERIFICATION_IN_PROGRESS: {
+    title: "Payment Verification",
+    description: "Payment is being verified.",
+    color: "text-primary",
+    stage: 3,
+  },
+  PAID: {
+    title: "Paid",
+    description: "Payment has been confirmed.",
+    color: "text-primary",
+    stage: 3,
+  },
  IN_TRANSIT: {
    title: "Cargo Moving",
    description: "Shipment is currently moving through the rail network.",
    color: "text-primary",
-    stage: 2,
+    stage: 3,
+  },
+  PENDING_CONSOLIDATION: {
+    title: "Pending Consolidation",
+    description: "Awaiting consolidation partner.",
+    color: "text-primary",
+    stage: 3,
+  },
+  CONSOLIDATED: {
+    title: "Consolidated",
+    description: "Cargo has been consolidated with partner shipment.",
+    color: "text-primary",
+    stage: 3,
+  },
+  COMPLETED: {
+    title: "Service Complete",
+    description: "Cargo delivered and service successfully terminated.",
+    color: "text-primary",
+    stage: 4,
  },
  DELIVERED: {
    title: "Service Complete",
    description: "Cargo delivered and service successfully terminated.",
    color: "text-primary",
-    stage: 3,
+    stage: 4,
+  },
+  REJECTED: {
+    title: "Rejected",
+    description: "This booking request has been rejected.",
+    color: "text-destructive",
+    stage: -1,
  },
  CANCELLED: {
    title: "Cancelled",
@@ -178,7 +263,7 @@ export default function BookingDetailPage() {
    );
  }

-  if (booking.status === "DRAFT") {
+  if (booking.status === "DRAFT" || booking.status === "CHANGES_REQUESTED") {
    return (
      <DraftBookingView booking={booking} onBookingUpdated={refetchBooking} />
    );
@@ -309,10 +394,12 @@ function DraftBookingView({
                  <h1 className="text-2xl font-black tracking-tight text-foreground">
                    {booking.reference}
                  </h1>
-                  <StatusBadge status="DRAFT" />
+                  <StatusBadge status={booking.status} />
                </div>
                <p className="text-xs text-muted-foreground">
-                  Complete the steps below to submit your booking request.
+                  {booking.status === "CHANGES_REQUESTED"
+                    ? "Staff has requested changes. Please review, update, and resubmit."
+                    : "Complete the steps below to submit your booking request."}
                </p>
              </div>

@@ -334,6 +421,16 @@ function DraftBookingView({
          </CardHeader>
        </Card>

+        {booking.status === "CHANGES_REQUESTED" && booking.latestChangeRequestNote && (
+          <div className="flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
+            <div>
+              <p className="font-semibold">Changes Requested by Staff</p>
+              <p className="mt-1 text-amber-700">{booking.latestChangeRequestNote}</p>
+            </div>
+          </div>
+        )}
+
        {pricingQuery.isError && (
          <div className="flex items-start gap-3 rounded-xl border border-destructive/20 bg-destructive/10 p-4 text-sm text-destructive">
            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
@@ -747,8 +844,9 @@ function ReadonlyBookingView({ booking }: { booking: Freight.IBooking }) {
          </CardHeader>
        </Card>

-        {(booking.status === "CONFIRMED" ||
-          booking.status === "IN_TRANSIT") && (
+        {(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>
@@ -1173,9 +1271,24 @@ function InfoItem({
 function StatusBadge({ status }: { status: string }) {
  const statusColors: Record<string, string> = {
    DRAFT: "bg-muted text-muted-foreground border-border",
+    CHANGES_REQUESTED: "bg-amber-50 text-amber-700 border-amber-200",
+    SUBMITTED: "bg-primary/10 text-primary border-primary/20",
+    PENDING_APPROVAL: "bg-primary/10 text-primary border-primary/20",
+    APPROVED_PENDING_SIGNATURE: "bg-primary/10 text-primary border-primary/20",
+    APPROVED: "bg-primary/10 text-primary border-primary/20",
+    CONTRACT_READY: "bg-primary/10 text-primary border-primary/20",
+    SIGNED_CUSTOMER: "bg-primary/10 text-primary border-primary/20",
+    FULLY_EXECUTED: "bg-primary/10 text-primary border-primary/20",
+    PNR_GENERATED: "bg-primary/10 text-primary border-primary/20",
+    PAYMENT_VERIFICATION_IN_PROGRESS: "bg-primary/10 text-primary border-primary/20",
+    PAID: "bg-primary/10 text-primary border-primary/20",
    CONFIRMED: "bg-primary/10 text-primary border-primary/20",
    IN_TRANSIT: "bg-primary/10 text-primary border-primary/20",
+    PENDING_CONSOLIDATION: "bg-primary/10 text-primary border-primary/20",
+    CONSOLIDATED: "bg-primary/10 text-primary border-primary/20",
+    COMPLETED: "bg-muted text-foreground border-border",
    DELIVERED: "bg-muted text-foreground border-border",
+    REJECTED: "bg-destructive/10 text-destructive border-destructive/20",
    CANCELLED: "bg-destructive/10 text-destructive border-destructive/20",
  };

--- a/packages/types/src/freight/index.ts
+++ b/packages/types/src/freight/index.ts
@@ -34,10 +34,24 @@ export enum FreightType {

 export enum BookingStatus {
  Draft = "DRAFT",
-  Confirmed = "CONFIRMED",
+  Submitted = "SUBMITTED",
+  ChangesRequested = "CHANGES_REQUESTED",
+  PendingApproval = "PENDING_APPROVAL",
+  ApprovedPendingSignature = "APPROVED_PENDING_SIGNATURE",
+  Approved = "APPROVED",
+  ContractReady = "CONTRACT_READY",
+  SignedCustomer = "SIGNED_CUSTOMER",
+  FullyExecuted = "FULLY_EXECUTED",
+  PnrGenerated = "PNR_GENERATED",
+  PaymentVerificationInProgress = "PAYMENT_VERIFICATION_IN_PROGRESS",
+  Paid = "PAID",
  InTransit = "IN_TRANSIT",
+  Completed = "COMPLETED",
  Delivered = "DELIVERED",
+  Rejected = "REJECTED",
  Cancelled = "CANCELLED",
+  PendingConsolidation = "PENDING_CONSOLIDATION",
+  Consolidated = "CONSOLIDATED",
 }

 export enum ConsignmentStatus {
@@ -227,6 +241,9 @@ export interface IBooking extends BaseEntity {
    resource: string;
    signedUrl?: string | null;
  }>;
+
+  latestChangeRequestNote?: string | null;
+  contractSummary?: string | null;
 }

 export interface IInvoice extends BaseEntity {