feat: ui status updates

2026-08-27 00:52:50 +00:00 · 2026-06-16 08:29:40 +00:00
parent adba481f23
commit 05da2ce27a
3 changed files with 223 additions and 29 deletions
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingDetailPage.tsx
@@ -1,21 +1,20 @@
-import { useParams, useNavigate } from "react-router-dom";
-import { Container, Stack, Grid } from "@mantine/core";
+import { Container, Grid, Stack } from "@mantine/core";
+import { useNavigate, useParams } from "react-router-dom";

-import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import {
-  detailStyles,
-  type BookingDetailView,
-  BookingDetailToolbar,
-  BookingDetailHeader,
-  BookingLifecycleStepper,
-  BookingRouteCard,
-  BookingContainersCard,
  BookingApprovalCard,
-  BookingReviewNotesCard,
-  BookingPaymentCard,
-  BookingFactsCard,
+  BookingContainersCard,
+  BookingDetailToolbar,
  BookingDocumentsCard,
+  BookingFactsCard,
+  BookingLifecycleStepper,
+  BookingPaymentCard,
+  BookingReviewNotesCard,
+  BookingRouteCard,
+  detailStyles,
+  type BookingDetailView
 } from "@/components/bookings/detail";
+import Breadcrumbs from "@/components/ui/Breadcrumbs";

 const BookingDetailPage = () => {
  const { id } = useParams<{ id: string }>();
--- a/apps/edr-freight-web/portal/src/App.tsx
+++ b/apps/edr-freight-web/portal/src/App.tsx
@@ -79,8 +79,6 @@ function RequireCompany({path}: {path: string}) {
  const { customerQuery } = useAuth();

  if (customerQuery.isPending) return <FullScreenSpinner />;
-  if (customerQuery.isSuccess && !customerQuery.data && path !== "/portal")
-    return <Navigate to="/onboarding" replace />;
  return <Outlet />;
 }

--- a/apps/edr-freight-web/portal/src/pages/MyPortalPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/MyPortalPage.tsx
@@ -1,5 +1,4 @@
 import {
-  Alert,
  Box,
  Grid,
  Group,
@@ -91,19 +90,162 @@ const STATUS_CONFIG: Record<string, StageConfig> = {
    badgeDot: "edr-blue-dot",
    action: { label: "View", kind: "outline" },
  },
+  CHANGES_REQUESTED: {
+    stage: 1,
+    icon: FilePen,
+    iconColor: "edr-amber-text",
+    tile: "edr-amber-soft",
+    hint: "Changes requested · please update",
+    step: "edr-accent",
+    badgeLabel: "Revise",
+    badgeBg: "edr-amber-soft",
+    badgeText: "edr-amber-text",
+    badgeDot: "edr-accent",
+    action: { label: "Update", kind: "dark" },
+  },
  PENDING_APPROVAL: {
+    stage: 2,
+    icon: FileCheck2,
+    iconColor: "edr-blue",
+    tile: "edr-blue-soft",
+    hint: "Pending internal approval",
+    step: "edr-blue-dot",
+    badgeLabel: "Pending",
+    badgeBg: "edr-blue-soft",
+    badgeText: "edr-blue",
+    badgeDot: "edr-blue-dot",
+    action: { label: "View", kind: "outline" },
+  },
+  APPROVED_PENDING_SIGNATURE: {
+    stage: 2,
+    icon: FileCheck2,
+    iconColor: "edr-blue",
+    tile: "edr-blue-soft",
+    hint: "Approved · awaiting signature",
+    step: "edr-blue-dot",
+    badgeLabel: "For Signature",
+    badgeBg: "edr-blue-soft",
+    badgeText: "edr-blue",
+    badgeDot: "edr-blue-dot",
+    action: { label: "Review", kind: "outline" },
+  },
+  APPROVED: {
+    stage: 2,
+    icon: CheckCircle2,
+    iconColor: "edr-green.7",
+    tile: "edr-soft",
+    hint: "Quote approved · ready to sign",
+    step: "edr-green.5",
+    badgeLabel: "Approved",
+    badgeBg: "edr-soft",
+    badgeText: "edr-green.7",
+    badgeDot: "edr-green.5",
+    action: { label: "View", kind: "outline" },
+  },
+  CONTRACT_READY: {
+    stage: 2,
+    icon: CheckCircle2,
+    iconColor: "edr-green.7",
+    tile: "edr-soft",
+    hint: "Contract ready · awaiting signature",
+    step: "edr-green.5",
+    badgeLabel: "Contract Ready",
+    badgeBg: "edr-soft",
+    badgeText: "edr-green.7",
+    badgeDot: "edr-green.5",
+    action: { label: "Review", kind: "outline" },
+  },
+  SIGNED_CUSTOMER: {
+    stage: 3,
+    icon: CheckCircle2,
+    iconColor: "edr-green.7",
+    tile: "edr-soft",
+    hint: "Signed by customer · internal processing",
+    step: "edr-green.5",
+    badgeLabel: "Signed",
+    badgeBg: "edr-soft",
+    badgeText: "edr-green.7",
+    badgeDot: "edr-green.5",
+    action: { label: "View", kind: "outline" },
+  },
+  FULLY_EXECUTED: {
+    stage: 3,
+    icon: CheckCircle2,
+    iconColor: "edr-green.7",
+    tile: "edr-soft",
+    hint: "Fully executed · generating PNR",
+    step: "edr-green.5",
+    badgeLabel: "Executed",
+    badgeBg: "edr-soft",
+    badgeText: "edr-green.7",
+    badgeDot: "edr-green.5",
+    action: { label: "View", kind: "outline" },
+  },
+  PNR_GENERATED: {
+    stage: 3,
+    icon: FileCheck2,
+    iconColor: "edr-blue",
+    tile: "edr-blue-soft",
+    hint: "PNR generated · awaiting payment verification",
+    step: "edr-blue-dot",
+    badgeLabel: "PNR Ready",
+    badgeBg: "edr-blue-soft",
+    badgeText: "edr-blue",
+    badgeDot: "edr-blue-dot",
+    action: { label: "View", kind: "outline" },
+  },
+  PAYMENT_VERIFICATION_IN_PROGRESS: {
+    stage: 2,
+    icon: Clock3,
+    iconColor: "edr-amber-text",
+    tile: "edr-amber-soft",
+    hint: "Verifying payment · please wait",
+    step: "edr-accent",
+    badgeLabel: "Verifying",
+    badgeBg: "edr-amber-soft",
+    badgeText: "edr-amber-text",
+    badgeDot: "edr-accent",
+    action: { label: "View", kind: "outline" },
+  },
+  SELECTED_FOR_BATCH: {
    stage: 2,
    icon: Wallet,
    iconColor: "edr-amber-text",
    tile: "edr-amber-soft",
-    hint: "Quote ready · awaiting payment",
+    hint: "Selected for batch · payment due within 1 hour",
    step: "edr-accent",
-    badgeLabel: "Awaiting Payment",
+    badgeLabel: "Pay Now",
    badgeBg: "edr-amber-soft",
    badgeText: "edr-amber-text",
    badgeDot: "edr-accent",
    action: { label: "Pay now", kind: "amber", icon: ArrowRight },
  },
+  EXPIRED: {
+    stage: 1,
+    icon: Clock3,
+    iconColor: "edr-red",
+    tile: "edr-red-soft",
+    hint: "Payment window expired · contact support",
+    step: "edr-red",
+    badgeLabel: "Expired",
+    badgeBg: "edr-red-soft",
+    badgeText: "edr-red",
+    badgeDot: "edr-red",
+    action: { label: "Contact", kind: "outline" },
+  },
+  PAID: {
+    stage: 3,
+    icon: CheckCircle2,
+    iconColor: "edr-green.7",
+    tile: "edr-soft",
+    hint: "Payment received · awaiting dispatch",
+    step: "edr-green.5",
+    badgeLabel: "Paid",
+    badgeBg: "edr-soft",
+    badgeText: "edr-green.7",
+    badgeDot: "edr-green.5",
+    action: { label: "View", kind: "outline" },
+  },
  IN_TRANSIT: {
    stage: 3,
    icon: Truck,
@@ -118,6 +260,19 @@ const STATUS_CONFIG: Record<string, StageConfig> = {
    action: { label: "Track", kind: "outline", icon: MapPin },
  },
  COMPLETED: {
+    stage: 4,
+    icon: CheckCircle2,
+    iconColor: "edr-slate",
+    tile: "edr-slate-soft2",
+    hint: "Completed · awaiting delivery",
+    step: "edr-green.5",
+    badgeLabel: "Completed",
+    badgeBg: "edr-slate-soft2",
+    badgeText: "edr-slate",
+    badgeDot: "edr-step",
+    action: { label: "View", kind: "outline" },
+  },
+  DELIVERED: {
    stage: 4,
    icon: CheckCircle2,
    iconColor: "edr-slate",
@@ -148,12 +303,38 @@ const STATUS_CONFIG: Record<string, StageConfig> = {
    icon: FilePen,
    iconColor: "edr-red",
    tile: "edr-red-soft",
-    hint: "Rejected",
+    hint: "Rejected · contact support",
    step: "edr-red",
    badgeLabel: "Rejected",
    badgeBg: "edr-red-soft",
    badgeText: "edr-red",
    badgeDot: "edr-red",
+    action: { label: "Contact", kind: "outline" },
+  },
+  PENDING_CONSOLIDATION: {
+    stage: 3,
+    icon: Clock3,
+    iconColor: "edr-blue",
+    tile: "edr-blue-soft",
+    hint: "Awaiting consolidation",
+    step: "edr-blue-dot",
+    badgeLabel: "Consolidating",
+    badgeBg: "edr-blue-soft",
+    badgeText: "edr-blue",
+    badgeDot: "edr-blue-dot",
+    action: { label: "View", kind: "outline" },
+  },
+  CONSOLIDATED: {
+    stage: 3,
+    icon: CheckCircle2,
+    iconColor: "edr-green.7",
+    tile: "edr-soft",
+    hint: "Consolidated · ready for dispatch",
+    step: "edr-green.5",
+    badgeLabel: "Consolidated",
+    badgeBg: "edr-soft",
+    badgeText: "edr-green.7",
+    badgeDot: "edr-green.5",
    action: { label: "View", kind: "outline" },
  },
 };
@@ -256,16 +437,32 @@ export default function MyPortalPage() {
          </Group>
        </Link>
      </Group>
-      
-      <Alert>
-        <Text fz={13} c="edr-muted">
-        Setup your Company Profile to start booking shipments and managing invoices.
-          <Link to="/onboarding" className="font-medium text-edr-green.7"> 
-            Get started 
-          </Link>
-          .
-        </Text>
-      </Alert>
+
+      {!customer&& (
+        <Box className="rounded-2xl border border-edr-border bg-gradient-to-r from-edr-blue/5 to-edr-green/5 px-7 py-6">
+          <Group justify="space-between" align="center" wrap="nowrap">
+            <Box className="flex-1">
+              <Text fz={15} fw={700} c="edr-text" mb={6}>
+                Setup your Company Profile
+              </Text>
+              <Text fz={13} c="edr-muted" mb={12}>
+                Complete your company information to unlock all features and start booking shipments.
+              </Text>
+              <Link to="/onboarding" className="no-underline">
+                <Group gap={8} align="center" className="w-fit">
+                  <Text fz={13} fw={600} c="edr-green.7">
+                    Complete Setup
+                  </Text>
+                  <ArrowRight size={16} color={cv("edr-green.7")} />
+                </Group>
+              </Link>
+            </Box>
+            <Box className="hidden shrink-0 sm:block">
+              <Truck size={48} color={cv("edr-blue")} opacity={0.3} />
+            </Box>
+          </Group>
+        </Box>
+      )}


      {/* ── Stats Strip ───────────────────────────────────────────────────── */}