booking flow,summtion, approval, contract, mock payemnt and integration to back office, and also add permissions

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

@@ -2,7 +2,9 @@ import { useMemo } from "react";
 import { ShieldCheck } from "lucide-react";
 
 import type { BookingApprovalStep, BookingDetail } from "@/types/booking";
+import { formatApprovalProgress } from "@/features/bookings/approval-progress";
 import { getNextPendingApprovalStep } from "@/features/bookings/booking-actions.config";
+import { bookingGlass, bookingSurface } from "./booking-ui.styles";
 import { Badge } from "@edr/ui-common";
 import { cn } from "@/lib/utils";
 
@@ -21,31 +23,32 @@ export function ApprovalStepsCard({ booking }: ApprovalStepsCardProps) {
   );
 
   const nextPending = getNextPendingApprovalStep(steps);
+  const summary = formatApprovalProgress(booking.status, steps);
 
   return (
-    <div className="overflow-hidden rounded-xl border border-amber-200/80 bg-gradient-to-b from-amber-50/40 to-card shadow-sm dark:from-amber-950/20">
-      <div className="flex items-center gap-3 border-b border-amber-200/50 bg-amber-50/50 px-5 py-4 dark:bg-amber-950/30">
-        <div className="flex size-9 items-center justify-center rounded-lg bg-amber-500/15 text-amber-800 dark:text-amber-300">
-          <ShieldCheck className="size-4" />
+    <div className={cn(bookingSurface.sectionCard, bookingGlass.activeTab)}>
+      <div className={bookingSurface.sectionHeader}>
+        <div className={bookingSurface.sectionIcon}>
+          <ShieldCheck className="size-4" strokeWidth={1.75} />
         </div>
         <div>
           <h2 className="text-sm font-semibold text-foreground">
             Approval chain
           </h2>
           <p className="text-xs text-muted-foreground">
-            Next:{" "}
-            {nextPending
-              ? `${nextPending.requiredRole} · step ${nextPending.stepOrder}`
-              : steps.length
-                ? "All steps complete"
-                : "Accept submission to begin"}
+            {summary.detail ||
+              (nextPending
+                ? `Next: ${nextPending.requiredRole} · step ${nextPending.stepOrder}`
+                : steps.length
+                  ? "All steps complete"
+                  : "Accept submission to begin")}
           </p>
         </div>
       </div>
 
       <div className="px-5 py-5">
         {steps.length === 0 ? (
-          <p className="rounded-lg border border-dashed border-border bg-muted/20 px-4 py-6 text-center text-sm text-muted-foreground">
+          <p className="rounded-lg border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-center text-sm text-muted-foreground backdrop-blur-sm">
             Use <strong className="font-semibold text-foreground">Accept for approval</strong>{" "}
             in staff actions to instantiate steps.
           </p>
@@ -74,24 +77,31 @@ function StepRow({
 }) {
   const statusStyles =
     step.status === "APPROVED"
-      ? "bg-emerald-500/15 text-emerald-800 dark:text-emerald-300"
+      ? "border-emerald-500/25 bg-emerald-500/10 text-black"
       : step.status === "REJECTED"
-        ? "bg-red-500/15 text-red-800 dark:text-red-300"
+        ? "bg-red-500/10 text-red-800 dark:text-red-300"
         : isNext
-          ? "bg-amber-500/15 text-amber-800 dark:text-amber-300"
-          : "bg-muted text-muted-foreground";
+          ? "border-emerald-500/25 bg-emerald-500/10 text-black"
+          : "bg-muted/40 text-muted-foreground";
 
   return (
     <li
       className={cn(
-        "flex items-center justify-between gap-3 rounded-lg border px-4 py-3 transition-colors",
+        "flex items-center justify-between gap-3 rounded-lg border px-4 py-3 transition-colors backdrop-blur-sm",
         isNext
-          ? "border-primary/30 bg-primary/[0.03] shadow-sm"
-          : "border-border/60 bg-card",
+          ? bookingGlass.activeTab
+          : "border-border/50 bg-card/60",
       )}
     >
       <div className="flex min-w-0 items-center gap-3">
-        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-xs font-bold text-muted-foreground">
+        <span
+          className={cn(
+            "flex size-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold",
+            isNext
+              ? cn(bookingGlass.iconWellGreen, "text-black")
+              : "bg-muted/40 text-muted-foreground",
+          )}
+        >
           {step.stepOrder}
         </span>
         <div className="min-w-0">
@@ -107,7 +117,7 @@ function StepRow({
       </div>
       <Badge
         variant="outline"
-        className={cn("shrink-0 text-[9px] uppercase", statusStyles)}
+        className={cn("shrink-0 border text-[9px] uppercase", statusStyles)}
       >
         {step.status}
       </Badge>