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

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

@@ -0,0 +1,32 @@
+import { ArrowRight } from "lucide-react";
+
+import type { BookingNextStep } from "@/types/booking";
+import { bookingGlass } from "./booking-ui.styles";
+import { cn } from "@/lib/utils";
+
+interface NextStepBannerProps {
+  nextStep: BookingNextStep;
+  className?: string;
+}
+
+export function NextStepBanner({ nextStep, className }: NextStepBannerProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-start gap-3 rounded-xl px-4 py-3 text-sm",
+        bookingGlass.activeTab,
+        className,
+      )}
+      role="status"
+    >
+      <ArrowRight className="mt-0.5 size-4 shrink-0 text-black" aria-hidden />
+      <div className="min-w-0 space-y-0.5">
+        <p className="font-semibold text-black">
+          Next: {nextStep.action.replace(/_/g, " ")}
+          {nextStep.requiredRole ? ` (${nextStep.requiredRole})` : ""}
+        </p>
+        <p className="text-muted-foreground">{nextStep.description}</p>
+      </div>
+    </div>
+  );
+}