From 74333e5e4209f07e46829b92ba8c5539ad829f84 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 10:36:44 +0300
Subject: [PATCH 01/13] fix: incorrect NewBookingPage

---
 .../src/pages/bookings/BookingDetailPage.tsx  | 32 +++----------------
 .../src/pages/bookings/BookingsPage.tsx       | 30 ++---------------
 2 files changed, 8 insertions(+), 54 deletions(-)

diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
index cd1bd1e99..7eb038196 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
@@ -14,14 +14,9 @@ import {
 } from "lucide-react";
 
 import Breadcrumbs from "@/components/Breadcrumbs";
-import NewBookingPage from "./NewBookingPage";
 import DeleteBookingDialog from "./DeleteBookingDialog";
 import { getBookingById, type BookingStatus } from "./bookings.mock";
-import {
-  Button,
-  Card,
-  CardContent,
-} from "@edr/ui-common";
+import { Button, Card } from "@edr/ui-common";
 
 export default function BookingDetailPage() {
   const { id } = useParams<{ id: string }>();
@@ -89,26 +84,7 @@ export default function BookingDetailPage() {
             </div>
 
             <div className="flex items-center gap-3">
-              <NewBookingPage
-                mode="edit"
-                booking={{
-                  customerId: booking.customerId,
-                  cargoType: booking.cargoType,
-                  originStation: booking.originStation,
-                  destinationStation: booking.destinationStation,
-                  transportMode: booking.transportMode,
-                  legs: booking.legs,
-                  containerType: booking.containerType,
-                  containerCount: booking.containerCount,
-                  weightTons: booking.weightTons,
-                  requestedDate: booking.requestedDate,
-                  priority: booking.priority,
-                  cargoDescription: booking.cargoDescription,
-                  specialInstructions: booking.specialInstructions,
-                }}
-              >
-                <Button>Edit Booking</Button>
-              </NewBookingPage>
+              <Button>Edit Booking</Button>
 
               <DeleteBookingDialog
                 bookingReference={booking.reference}
@@ -142,7 +118,9 @@ export default function BookingDetailPage() {
           </div>
         </Card>
 
-        {booking.transportMode === "Multimodal" && booking.legs && booking.legs.length > 0 ? (
+        {booking.transportMode === "Multimodal" &&
+          booking.legs &&
+          booking.legs.length > 0 ? (
           <Card className="p-6">
             <div className="mb-4 flex items-center gap-2">
               <Train />
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingsPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingsPage.tsx
index e755c174b..ad7a6cf92 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingsPage.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import {
   ArrowRight,
   Clock,
@@ -15,7 +15,6 @@ import {
 } from "lucide-react";
 
 import Breadcrumbs from "@/components/Breadcrumbs";
-import NewBookingPage from "./NewBookingPage";
 import DeleteBookingDialog from "./DeleteBookingDialog";
 import { bookings, type BookingStatus } from "./bookings.mock";
 import {
@@ -125,29 +124,6 @@ export default function BookingsPage() {
                   <Eye />
                   View
                 </DropdownMenuItem>
-                <NewBookingPage
-                  mode="edit"
-                  booking={{
-                    customerId: booking.customerId,
-                    cargoType: booking.cargoType,
-                    originStation: booking.originStation,
-                    destinationStation: booking.destinationStation,
-                    transportMode: booking.transportMode,
-                    legs: booking.legs,
-                    containerType: booking.containerType,
-                    containerCount: booking.containerCount,
-                    weightTons: booking.weightTons,
-                    requestedDate: booking.requestedDate,
-                    priority: booking.priority,
-                    cargoDescription: booking.cargoDescription,
-                    specialInstructions: booking.specialInstructions,
-                  }}
-                >
-                  <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()}>
-                    <Pencil />
-                    Edit
-                  </DropdownMenuItem>
-                </NewBookingPage>
                 <DropdownMenuSeparator />
                 <DeleteBookingDialog bookingReference={booking.reference}>
                   <DropdownMenuItem
@@ -191,12 +167,12 @@ export default function BookingsPage() {
               />
             </div>
 
-            <NewBookingPage>
+            <Link to="/bookings/new">
               <Button>
                 <Plus />
                 New Booking
               </Button>
-            </NewBookingPage>
+            </Link>
           </div>
         </Card>
 

From 9fbe27e634512d001aa3de2069309dff9ff8e4f0 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 10:45:13 +0300
Subject: [PATCH 02/13] chore: add field component from shadcn to ui-common

---
 packages/ui-common/src/components/field.tsx   | 246 ++++++++++++++++++
 .../ui-common/src/components/separator.tsx    |  28 ++
 packages/ui-common/src/index.ts               |   3 +-
 3 files changed, 276 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui-common/src/components/field.tsx
 create mode 100644 packages/ui-common/src/components/separator.tsx

diff --git a/packages/ui-common/src/components/field.tsx b/packages/ui-common/src/components/field.tsx
new file mode 100644
index 000000000..d90a87c16
--- /dev/null
+++ b/packages/ui-common/src/components/field.tsx
@@ -0,0 +1,246 @@
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Label } from "./label"
+import { Separator } from "./separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/packages/ui-common/src/components/separator.tsx b/packages/ui-common/src/components/separator.tsx
new file mode 100644
index 000000000..8971fe86f
--- /dev/null
+++ b/packages/ui-common/src/components/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/packages/ui-common/src/index.ts b/packages/ui-common/src/index.ts
index 9177eec0f..4b6dd2b94 100644
--- a/packages/ui-common/src/index.ts
+++ b/packages/ui-common/src/index.ts
@@ -1,4 +1,4 @@
-export {  Table } from "./components/table";
+export { Table } from "./components/table";
 export type { TableProps, TableColumn } from "./components/Table/Table";
 
 export { FormField } from "./components/Form";
@@ -30,3 +30,4 @@ export * from "./components/dropdown-menu";
 export * from "./components/data-table";
 export * from "./components/dialog";
 export * from "./components/SmartFileInput";
+export * from "./components/field";

From 47bcc82c881b6f249116b20bc6949babde1c9f95 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 10:47:12 +0300
Subject: [PATCH 03/13] chore: install react-hook-form, zod and
 @hookform/resolvers to freight web portal

---
 apps/edr-freight-web/portal/package.json |  3 ++
 pnpm-lock.yaml                           | 38 ++++++++++++++++++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/apps/edr-freight-web/portal/package.json b/apps/edr-freight-web/portal/package.json
index 81a34f736..9afc896f7 100644
--- a/apps/edr-freight-web/portal/package.json
+++ b/apps/edr-freight-web/portal/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@edr/types": "workspace:*",
     "@edr/ui-common": "workspace:*",
+    "@hookform/resolvers": "^5.4.0",
     "@tanstack/react-query": "^5.59.0",
     "@tria-plc/iamui-common": "1.1.1",
     "axios": "^1.7.7",
@@ -23,9 +24,11 @@
     "radix-ui": "^1.4.3",
     "react": "19.2.6",
     "react-dom": "19.2.6",
+    "react-hook-form": "^7.76.0",
     "react-router-dom": "^6.27.0",
     "recharts": "^3.8.1",
     "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3",
     "zustand": "^5.0.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca17749d4..6aa2017e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -229,6 +229,9 @@ importers:
       '@edr/ui-common':
         specifier: workspace:*
         version: link:../../../packages/ui-common
+      '@hookform/resolvers':
+        specifier: ^5.4.0
+        version: 5.4.0(react-hook-form@7.76.0(react@18.3.1))
       '@tanstack/react-query':
         specifier: ^5.59.0
         version: 5.100.10(react@18.3.1)
@@ -256,6 +259,9 @@ importers:
       react-dom:
         specifier: 18.3.1
         version: 18.3.1(react@18.3.1)
+      react-hook-form:
+        specifier: ^7.76.0
+        version: 7.76.0(react@18.3.1)
       react-router-dom:
         specifier: ^6.27.0
         version: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -265,6 +271,9 @@ importers:
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
+      zod:
+        specifier: ^4.4.3
+        version: 4.4.3
       zustand:
         specifier: ^5.0.0
         version: 5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@18.3.1)(use-sync-external-store@1.6.0(react@18.3.1))
@@ -1324,6 +1333,11 @@ packages:
     peerDependencies:
       react-hook-form: ^7.55.0
 
+  '@hookform/resolvers@5.4.0':
+    resolution: {integrity: sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==}
+    peerDependencies:
+      react-hook-form: ^7.55.0
+
   '@humanwhocodes/config-array@0.13.0':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
     engines: {node: '>=10.10.0'}
@@ -9252,6 +9266,12 @@ packages:
     peerDependencies:
       react: 18.3.1
 
+  react-hook-form@7.76.0:
+    resolution: {integrity: sha512-eKtLGgFeSgkHqQD8J59AMZ9a4uD1D83iSIzt4YlTGD7liDen5rrjcUO1rVIGd9yC1gofryjtHbv+4ny4hkLWlw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: 18.3.1
+
   react-i18next@15.7.4:
     resolution: {integrity: sha512-nyU8iKNrI5uDJch0z9+Y5XEr34b0wkyYj3Rp+tfbahxtlswxSCjcUL9H0nqXo9IR3/t5Y5PKIA3fx3MfUyR9Xw==}
     peerDependencies:
@@ -11449,6 +11469,9 @@ packages:
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
+  zod@4.4.3:
+    resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
+
   zustand@5.0.13:
     resolution: {integrity: sha512-efI2tVaVQPqtOh114loML/Z80Y4NP3yc+Ff0fYiZJPauNeWZeIp/bRFD7I9bfmCOYBh/PHxlglQ9+wvlwnPikQ==}
     engines: {node: '>=12.20.0'}
@@ -12264,6 +12287,11 @@ snapshots:
       '@standard-schema/utils': 0.3.0
       react-hook-form: 7.75.0(react@18.3.1)
 
+  '@hookform/resolvers@5.4.0(react-hook-form@7.76.0(react@18.3.1))':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.76.0(react@18.3.1)
+
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -14897,7 +14925,7 @@ snapshots:
       '@chakra-ui/react': 3.35.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
       '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
-      '@hookform/resolvers': 5.2.2(react-hook-form@7.75.0(react@18.3.1))
+      '@hookform/resolvers': 5.4.0(react-hook-form@7.76.0(react@18.3.1))
       '@lottiefiles/react-lottie-player': 3.6.0(react@18.3.1)
       '@mantine/core': 8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mantine/dates': 8.3.18(@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.3.18(react@18.3.1))(dayjs@1.11.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -14972,7 +15000,7 @@ snapshots:
       react-day-picker: 9.14.0(react@18.3.1)
       react-dom: 18.3.1(react@18.3.1)
       react-dropzone: 14.4.1(react@18.3.1)
-      react-hook-form: 7.75.0(react@18.3.1)
+      react-hook-form: 7.76.0(react@18.3.1)
       react-i18next: 15.7.4(i18next@25.10.10(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
       react-icons: 5.6.0(react@18.3.1)
       react-image-crop: 11.0.10(react@18.3.1)
@@ -21997,6 +22025,10 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  react-hook-form@7.76.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-i18next@15.7.4(i18next@25.10.10(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3):
     dependencies:
       '@babel/runtime': 7.29.2
@@ -24547,6 +24579,8 @@ snapshots:
 
   zod@3.25.76: {}
 
+  zod@4.4.3: {}
+
   zustand@5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@18.3.1)(use-sync-external-store@1.6.0(react@18.3.1)):
     optionalDependencies:
       '@types/react': 18.3.28

From 37916a0cae873c70b0ef344107d28e404f1f5a21 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 11:37:24 +0300
Subject: [PATCH 04/13] chore: add switch component from shadcn to ui-common

---
 packages/ui-common/src/components/switch.tsx | 33 ++++++++++++++++++++
 packages/ui-common/src/index.ts              |  2 ++
 2 files changed, 35 insertions(+)
 create mode 100644 packages/ui-common/src/components/switch.tsx

diff --git a/packages/ui-common/src/components/switch.tsx b/packages/ui-common/src/components/switch.tsx
new file mode 100644
index 000000000..76190b7c9
--- /dev/null
+++ b/packages/ui-common/src/components/switch.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/packages/ui-common/src/index.ts b/packages/ui-common/src/index.ts
index 4b6dd2b94..ca2df73bf 100644
--- a/packages/ui-common/src/index.ts
+++ b/packages/ui-common/src/index.ts
@@ -30,4 +30,6 @@ export * from "./components/dropdown-menu";
 export * from "./components/data-table";
 export * from "./components/dialog";
 export * from "./components/SmartFileInput";
+export * from "./components/select";
+export * from "./components/switch";
 export * from "./components/field";

From e9362abecdebddd35c88286ea427ce9c477de135 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 11:38:22 +0300
Subject: [PATCH 05/13] feat(bookings): Rework New Booking flow to support
 cargo type selection

---
 .../src/pages/bookings/NewBookingPage.tsx     | 876 +++++++++++-------
 1 file changed, 563 insertions(+), 313 deletions(-)

diff --git a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
index 6d127eb70..84a3b9c69 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
@@ -27,7 +27,13 @@ import {
   CardTitle,
   Input,
   Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   SmartFileInput,
+  Switch,
   Textarea,
 } from "@edr/ui-common";
 import Breadcrumbs from "@/components/Breadcrumbs";
@@ -35,22 +41,45 @@ import Breadcrumbs from "@/components/Breadcrumbs";
 // ── Mock Constants ─────────────────────────────────────────────────────────────
 
 const STATIONS = [
-  "Addis Ababa", "Adama", "Mojo", "Awash", "Mieso",
-  "Dire Dawa", "Aysha", "Ali Sabieh", "Holhol", "Djibouti City",
+  "Addis Ababa",
+  "Adama",
+  "Mojo",
+  "Awash",
+  "Mieso",
+  "Dire Dawa",
+  "Aysha",
+  "Ali Sabieh",
+  "Holhol",
+  "Djibouti City",
 ];
 
 const ETHIOPIA_STATIONS = new Set([
-  "Addis Ababa", "Adama", "Mojo", "Awash", "Mieso", "Dire Dawa",
+  "Addis Ababa",
+  "Adama",
+  "Mojo",
+  "Awash",
+  "Mieso",
+  "Dire Dawa",
 ]);
 
 const BULK_COMMODITIES = [
-  "Coffee", "Beans", "Fertilizer", "Sugar", "Oil", "Livestock", "Steel", "Others",
+  "Coffee",
+  "Beans",
+  "Fertilizer",
+  "Sugar",
+  "Oil",
+  "Livestock",
+  "Steel",
+  "Others",
 ];
 
 const BREAK_BULK_TYPES = ["Machinery", "Ro-Ro", "Others"];
 
 const MOCK_VALID_CONTRACTS = [
-  "EDR-2024-10001", "EDR-2024-10002", "EDR-2023-88123", "EDR-2022-55442",
+  "EDR-2024-10001",
+  "EDR-2024-10002",
+  "EDR-2023-88123",
+  "EDR-2022-55442",
 ];
 
 // US-04 compliance documents (TIN, Business License, Registration, National ID, optional PoA)
@@ -66,11 +95,15 @@ const BOOKING_DOCS_SETTING = {
   entity: "booking" as const,
   fields: [
     {
-      id: "f1", createdAt: "", updatedAt: "", deletedAt: null,
+      id: "f1",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
       settingId: "booking-compliance",
       fileKey: "tin_certificate",
       fileLabel: "TIN Certificate",
-      helpText: "Tax Identification Number certificate issued by ERCA (10-digit TIN).",
+      helpText:
+        "Tax Identification Number certificate issued by ERCA (10-digit TIN).",
       isRequired: true,
       isMultiple: false,
       maxFiles: 1,
@@ -79,11 +112,15 @@ const BOOKING_DOCS_SETTING = {
       order: 1,
     },
     {
-      id: "f2", createdAt: "", updatedAt: "", deletedAt: null,
+      id: "f2",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
       settingId: "booking-compliance",
       fileKey: "business_license",
       fileLabel: "Business / Investment License",
-      helpText: "Current business or investment license issued by the relevant government authority.",
+      helpText:
+        "Current business or investment license issued by the relevant government authority.",
       isRequired: true,
       isMultiple: false,
       maxFiles: 1,
@@ -92,7 +129,10 @@ const BOOKING_DOCS_SETTING = {
       order: 2,
     },
     {
-      id: "f3", createdAt: "", updatedAt: "", deletedAt: null,
+      id: "f3",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
       settingId: "booking-compliance",
       fileKey: "business_registration",
       fileLabel: "Business Registration Certificate",
@@ -105,11 +145,15 @@ const BOOKING_DOCS_SETTING = {
       order: 3,
     },
     {
-      id: "f4", createdAt: "", updatedAt: "", deletedAt: null,
+      id: "f4",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
       settingId: "booking-compliance",
       fileKey: "national_id",
       fileLabel: "National ID / Passport",
-      helpText: "Valid government-issued ID or passport of the authorized signatory.",
+      helpText:
+        "Valid government-issued ID or passport of the authorized signatory.",
       isRequired: true,
       isMultiple: false,
       maxFiles: 1,
@@ -118,11 +162,15 @@ const BOOKING_DOCS_SETTING = {
       order: 4,
     },
     {
-      id: "f5", createdAt: "", updatedAt: "", deletedAt: null,
+      id: "f5",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
       settingId: "booking-compliance",
       fileKey: "power_of_attorney",
       fileLabel: "Power of Attorney (PoA)",
-      helpText: "Required only if a representative is signing on behalf of the company.",
+      helpText:
+        "Required only if a representative is signing on behalf of the company.",
       isRequired: false,
       isMultiple: false,
       maxFiles: 1,
@@ -144,8 +192,8 @@ const STEPS = [
   { id: 1, label: "Contract Type", short: "Contract" },
   { id: 2, label: "Service Type", short: "Service" },
   { id: 3, label: "First & Last Mile", short: "Mile" },
-  { id: 4, label: "Route & Cargo", short: "Cargo" },
-  { id: 5, label: "Container Config", short: "Container" },
+  { id: 4, label: "Route", short: "Route" },
+  { id: 5, label: "Cargo Details", short: "Cargo" },
   { id: 6, label: "Wagon Allocation", short: "Wagons" },
   { id: 7, label: "Documents", short: "Docs" },
   { id: 8, label: "Review & Submit", short: "Submit" },
@@ -171,6 +219,7 @@ interface FormData {
   equipmentReturn: EquipmentReturn;
   originYard: string;
   destinationYard: string;
+  cargoType: "container" | "bulk" | "";
   cargoWeight: string;
   freightType: FreightTypeVal;
   bulkCommodity: string;
@@ -200,6 +249,7 @@ const INITIAL_DATA: FormData = {
   equipmentReturn: "with_return",
   originYard: "",
   destinationYard: "",
+  cargoType: "",
   cargoWeight: "",
   freightType: "",
   bulkCommodity: "",
@@ -244,7 +294,8 @@ interface WagonCalcResult {
 }
 
 function calcWagons(type: ContainerTypeVal, qty: number): WagonCalcResult {
-  if (type === "40ft") return { totalWagons: qty, hasOddUnit: false, sharedWagons: qty };
+  if (type === "40ft")
+    return { totalWagons: qty, hasOddUnit: false, sharedWagons: qty };
   const pairs = Math.floor(qty / 2);
   const odd = qty % 2;
   return { totalWagons: pairs + odd, hasOddUnit: odd > 0, sharedWagons: pairs };
@@ -252,29 +303,11 @@ function calcWagons(type: ContainerTypeVal, qty: number): WagonCalcResult {
 
 // ── Shared primitives ──────────────────────────────────────────────────────────
 
-const selectCls =
-  "w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground shadow-xs outline-none transition hover:border-ring/50 focus:border-primary/50 focus:ring-2 focus:ring-primary/20";
-
-function NativeSelect({
-  value, onChange, options, placeholder,
-}: {
-  value: string;
-  onChange: (v: string) => void;
-  options: { value: string; label: string }[];
-  placeholder?: string;
-}) {
-  return (
-    <select value={value} onChange={(e) => onChange(e.target.value)} className={selectCls}>
-      {placeholder && <option value="">{placeholder}</option>}
-      {options.map((o) => (
-        <option key={o.value} value={o.value}>{o.label}</option>
-      ))}
-    </select>
-  );
-}
-
 function OptionCard({
-  selected, onClick, disabled, children,
+  selected,
+  onClick,
+  disabled,
+  children,
 }: {
   selected: boolean;
   onClick?: () => void;
@@ -286,13 +319,12 @@ function OptionCard({
       type="button"
       onClick={onClick}
       disabled={disabled}
-      className={`relative w-full rounded-xl border-2 p-4 text-left transition ${
-        disabled
+      className={`relative w-full rounded-xl border-2 p-4 text-left transition ${disabled
           ? "cursor-not-allowed border-border bg-muted opacity-60"
           : selected
-          ? "border-primary bg-primary/5"
-          : "border-border bg-card hover:border-primary/40"
-      }`}
+            ? "border-primary bg-primary/5"
+            : "border-border bg-card hover:border-primary/40"
+        }`}
     >
       {selected && !disabled && (
         <span className="absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary">
@@ -304,27 +336,10 @@ function OptionCard({
   );
 }
 
-function Toggle({ enabled, onChange }: { enabled: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={enabled}
-      onClick={() => onChange(!enabled)}
-      className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors ${
-        enabled ? "bg-primary" : "bg-input"
-      }`}
-    >
-      <span
-        className={`inline-block h-4 w-4 transform rounded-full bg-background shadow-sm transition-transform ${
-          enabled ? "translate-x-6" : "translate-x-1"
-        }`}
-      />
-    </button>
-  );
-}
-
-function AlertBox({ tone, children }: {
+function AlertBox({
+  tone,
+  children,
+}: {
   tone: "warning" | "error" | "success" | "info";
   children: React.ReactNode;
 }) {
@@ -341,14 +356,22 @@ function AlertBox({ tone, children }: {
     info: <Info className="h-4 w-4 shrink-0 text-sky-500" />,
   };
   return (
-    <div className={`flex items-start gap-3 rounded-xl border p-3 text-sm ${s[tone]}`}>
+    <div
+      className={`flex items-start gap-3 rounded-xl border p-3 text-sm ${s[tone]}`}
+    >
       {icons[tone]}
       <div>{children}</div>
     </div>
   );
 }
 
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
+function Field({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
   return (
     <div className="space-y-1.5">
       <Label className="text-sm font-medium">{label}</Label>
@@ -372,7 +395,11 @@ function StepLabel({ children }: { children: React.ReactNode }) {
 // ── Step 1: Contract Type ──────────────────────────────────────────────────────
 
 function Step1({
-  d, set, renewalValid, renewalValidating, onValidate,
+  d,
+  set,
+  renewalValid,
+  renewalValidating,
+  onValidate,
 }: {
   d: FormData;
   set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
@@ -440,14 +467,18 @@ function Step1({
                 onClick={onValidate}
                 disabled={!d.previousContractRef || renewalValidating}
               >
-                {renewalValidating ? <Loader2 className="h-4 w-4 animate-spin" /> : "Validate"}
+                {renewalValidating ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  "Validate"
+                )}
               </Button>
             </div>
           </Field>
           {renewalValid === true && (
             <AlertBox tone="success">
-              <strong>Contract found.</strong> Company details, route, and wagon preferences will
-              be pre-filled.
+              <strong>Contract found.</strong> Company details, route, and wagon
+              preferences will be pre-filled.
             </AlertBox>
           )}
           {renewalValid === false && (
@@ -465,7 +496,8 @@ function Step1({
 // ── Step 2: Service Type ───────────────────────────────────────────────────────
 
 function Step2({
-  d, set,
+  d,
+  set,
 }: {
   d: FormData;
   set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
@@ -480,13 +512,17 @@ function Step2({
       </div>
 
       <div className="grid gap-3 md:grid-cols-2">
-        <OptionCard selected={d.serviceType === "rail"} onClick={() => set("serviceType", "rail")}>
+        <OptionCard
+          selected={d.serviceType === "rail"}
+          onClick={() => set("serviceType", "rail")}
+        >
           <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100">
             <Train className="h-4 w-4 text-indigo-600" />
           </div>
           <p className="font-semibold">Rail Transport Only</p>
           <p className="mt-0.5 text-xs text-muted-foreground">
-            Rail transport along the EDR corridor, with optional first/last mile trucking.
+            Rail transport along the EDR corridor, with optional first/last mile
+            trucking.
           </p>
           <Badge className="mt-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-100">
             Option A
@@ -502,7 +538,8 @@ function Step2({
           </div>
           <p className="font-semibold">Rail Transport & Freight Forwarding</p>
           <p className="mt-0.5 text-xs text-muted-foreground">
-            Rail transport plus documentation, customs liaison, and a dedicated coordinator.
+            Rail transport plus documentation, customs liaison, and a dedicated
+            coordinator.
           </p>
           <Badge className="mt-2 bg-emerald-100 text-emerald-700 hover:bg-emerald-100">
             Option B
@@ -511,8 +548,8 @@ function Step2({
       </div>
 
       <p className="text-xs text-muted-foreground">
-        Customs and Clearance Service cannot be selected independently — it must be bundled with
-        a Rail Transport service.
+        Customs and Clearance Service cannot be selected independently — it must
+        be bundled with a Rail Transport service.
       </p>
     </div>
   );
@@ -521,7 +558,8 @@ function Step2({
 // ── Step 3: First & Last Mile ──────────────────────────────────────────────────
 
 function Step3({
-  d, set,
+  d,
+  set,
 }: {
   d: FormData;
   set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
@@ -545,7 +583,10 @@ function Step3({
                 Truck pick-up from your premises to the origin rail yard.
               </p>
             </div>
-            <Toggle enabled={d.firstMileEnabled} onChange={(v) => set("firstMileEnabled", v)} />
+            <Switch
+              checked={d.firstMileEnabled}
+              onCheckedChange={(v) => set("firstMileEnabled", v)}
+            />
           </div>
           {d.firstMileEnabled && (
             <div className="mt-3">
@@ -564,10 +605,14 @@ function Step3({
             <div>
               <p className="text-sm font-medium">Last Mile – Delivery</p>
               <p className="mt-0.5 text-xs text-muted-foreground">
-                Truck delivery from the destination rail yard to the final address.
+                Truck delivery from the destination rail yard to the final
+                address.
               </p>
             </div>
-            <Toggle enabled={d.lastMileEnabled} onChange={(v) => set("lastMileEnabled", v)} />
+            <Switch
+              checked={d.lastMileEnabled}
+              onCheckedChange={(v) => set("lastMileEnabled", v)}
+            />
           </div>
           {d.lastMileEnabled && (
             <div className="mt-3">
@@ -584,7 +629,8 @@ function Step3({
         <div className="p-4">
           <p className="mb-3 text-sm font-medium">Equipment Return</p>
           <p className="mb-3 text-xs text-muted-foreground">
-            Declare whether the container asset will be returned after unloading.
+            Declare whether the container asset will be returned after
+            unloading.
           </p>
           <div className="grid gap-2 sm:grid-cols-2">
             <OptionCard
@@ -615,7 +661,8 @@ function Step3({
 // ── Step 4: Route & Cargo ──────────────────────────────────────────────────────
 
 function Step4({
-  d, set,
+  d,
+  set,
 }: {
   d: FormData;
   set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
@@ -635,9 +682,9 @@ function Step4({
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-xl font-bold tracking-tight">Route & Cargo</h2>
+        <h2 className="text-xl font-bold tracking-tight">Route</h2>
         <p className="mt-1 text-sm text-muted-foreground">
-          Define the route, weight, and cargo classification.
+          Select the origin and destination yards.
         </p>
       </div>
 
@@ -646,24 +693,38 @@ function Step4({
         <StepLabel>Route</StepLabel>
         <div className="grid gap-3 sm:grid-cols-2">
           <Field label="Origin Yard *">
-            <NativeSelect
+            <Select
               value={d.originYard}
-              onChange={(v) => set("originYard", v)}
-              options={STATIONS.filter((s) => s !== d.destinationYard).map((s) => ({
-                value: s, label: s,
-              }))}
-              placeholder="Select origin..."
-            />
+              onValueChange={(v) => set("originYard", v)}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select origin..." />
+              </SelectTrigger>
+              <SelectContent>
+                {STATIONS.filter((s) => s !== d.destinationYard).map((s) => (
+                  <SelectItem key={s} value={s}>
+                    {s}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </Field>
           <Field label="Destination Yard *">
-            <NativeSelect
+            <Select
               value={d.destinationYard}
-              onChange={(v) => set("destinationYard", v)}
-              options={STATIONS.filter((s) => s !== d.originYard).map((s) => ({
-                value: s, label: s,
-              }))}
-              placeholder="Select destination..."
-            />
+              onValueChange={(v) => set("destinationYard", v)}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select destination..." />
+              </SelectTrigger>
+              <SelectContent>
+                {STATIONS.filter((s) => s !== d.originYard).map((s) => (
+                  <SelectItem key={s} value={s}>
+                    {s}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </Field>
         </div>
         {direction && (
@@ -678,90 +739,6 @@ function Step4({
 
       <Divider />
 
-      {/* Weight */}
-      <div className="space-y-3">
-        <StepLabel>Weight</StepLabel>
-        <Field label="Total Cargo Weight – VGM (Tons) *">
-          <div className="relative">
-            <Weight className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              type="number"
-              placeholder="0.00"
-              value={d.cargoWeight}
-              onChange={(e) => set("cargoWeight", e.target.value)}
-              className="pl-9"
-              min="0"
-              step="0.01"
-            />
-          </div>
-        </Field>
-      </div>
-
-      <Divider />
-
-      {/* Freight Classification */}
-      <div className="space-y-3">
-        <StepLabel>Freight Type *</StepLabel>
-        <div className="grid gap-3 sm:grid-cols-2">
-          <OptionCard
-            selected={d.freightType === "bulk"}
-            onClick={() => set("freightType", "bulk")}
-          >
-            <p className="font-semibold">Bulk</p>
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              Coffee, fertilizer, grain, ore, etc.
-            </p>
-          </OptionCard>
-          <OptionCard
-            selected={d.freightType === "break_bulk"}
-            onClick={() => set("freightType", "break_bulk")}
-          >
-            <p className="font-semibold">Break-Bulk</p>
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              Machinery, vehicles, project cargo, etc.
-            </p>
-          </OptionCard>
-        </div>
-
-        {d.freightType === "bulk" && (
-          <div className="space-y-2">
-            <NativeSelect
-              value={d.bulkCommodity}
-              onChange={(v) => { set("bulkCommodity", v); if (v !== "Others") set("bulkCommodityOther", ""); }}
-              options={BULK_COMMODITIES.map((c) => ({ value: c, label: c }))}
-              placeholder="Select commodity *"
-            />
-            {d.bulkCommodity === "Others" && (
-              <Input
-                placeholder="Specify commodity *"
-                value={d.bulkCommodityOther}
-                onChange={(e) => set("bulkCommodityOther", e.target.value)}
-              />
-            )}
-          </div>
-        )}
-
-        {d.freightType === "break_bulk" && (
-          <div className="space-y-2">
-            <NativeSelect
-              value={d.breakBulkType}
-              onChange={(v) => { set("breakBulkType", v); if (v !== "Others") set("breakBulkTypeOther", ""); }}
-              options={BREAK_BULK_TYPES.map((c) => ({ value: c, label: c }))}
-              placeholder="Select type *"
-            />
-            {d.breakBulkType === "Others" && (
-              <Input
-                placeholder="Specify break-bulk type *"
-                value={d.breakBulkTypeOther}
-                onChange={(e) => set("breakBulkTypeOther", e.target.value)}
-              />
-            )}
-          </div>
-        )}
-      </div>
-
-      <Divider />
-
       {/* Modifiers */}
       <div className="space-y-0 divide-y divide-border">
         <div className="flex items-center justify-between py-3">
@@ -774,7 +751,10 @@ function Step4({
               </p>
             </div>
           </div>
-          <Toggle enabled={d.isHazardous} onChange={(v) => set("isHazardous", v)} />
+          <Switch
+            checked={d.isHazardous}
+            onCheckedChange={(v) => set("isHazardous", v)}
+          />
         </div>
         <div className="flex items-center justify-between py-3">
           <div className="flex items-center gap-3">
@@ -782,11 +762,15 @@ function Step4({
             <div>
               <p className="text-sm font-medium">Refrigerated Cargo</p>
               <p className="text-xs text-muted-foreground">
-                Temperature-controlled transport — applies a Refrigerator Surcharge.
+                Temperature-controlled transport — applies a Refrigerator
+                Surcharge.
               </p>
             </div>
           </div>
-          <Toggle enabled={d.isRefrigerated} onChange={(v) => set("isRefrigerated", v)} />
+          <Switch
+            checked={d.isRefrigerated}
+            onCheckedChange={(v) => set("isRefrigerated", v)}
+          />
         </div>
       </div>
     </div>
@@ -796,7 +780,9 @@ function Step4({
 // ── Step 5: Container Configuration ───────────────────────────────────────────
 
 function Step5({
-  d, set, direction,
+  d,
+  set,
+  direction,
 }: {
   d: FormData;
   set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
@@ -817,79 +803,247 @@ function Step5({
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-xl font-bold tracking-tight">Container Configuration</h2>
+        <h2 className="text-xl font-bold tracking-tight">Cargo Details</h2>
         <p className="mt-1 text-sm text-muted-foreground">
-          Select container type, quantity, and Verified Gross Mass per container.
+          Define your cargo type, weight, and container configuration.
         </p>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-2">
-        {([
-          {
-            val: "20ft" as const,
-            label: "20ft Container (TEU)",
-            limit: direction === "export" ? "Max 25t per container" : "Max 20t per container",
-          },
-          {
-            val: "40ft" as const,
-            label: "40ft Container (FEU)",
-            limit: "Max 32.5t per container",
-          },
-        ]).map((ct) => (
-          <OptionCard key={ct.val} selected={d.containerType === ct.val} onClick={() => set("containerType", ct.val)}>
-            <div className="mb-1 flex items-center gap-2">
+      {/* Cargo Type */}
+      <div className="space-y-3">
+        <StepLabel>Cargo Type *</StepLabel>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <OptionCard
+            selected={d.cargoType === "container"}
+            onClick={() => set("cargoType", "container")}
+          >
+            <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
               <Package className="h-4 w-4 text-primary" />
-              <p className="font-semibold">{ct.label}</p>
             </div>
-            <p className="text-xs text-muted-foreground">{ct.limit}</p>
+            <p className="font-semibold">Container</p>
+            <p className="mt-0.5 text-xs text-muted-foreground">
+              Pre-packed containerized cargo (20ft / 40ft).
+            </p>
           </OptionCard>
-        ))}
+          <OptionCard
+            selected={d.cargoType === "bulk"}
+            onClick={() => set("cargoType", "bulk")}
+          >
+            <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100">
+              <Weight className="h-4 w-4 text-amber-600" />
+            </div>
+            <p className="font-semibold">Bulk</p>
+            <p className="mt-0.5 text-xs text-muted-foreground">
+              Bulk commodities or break-bulk cargo.
+            </p>
+          </OptionCard>
+        </div>
       </div>
 
-      {direction && (
-        <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
-          <MapPin className="h-3.5 w-3.5" />
-          Route detected as <span className="font-medium capitalize text-foreground">{direction}</span> workflow
-        </p>
+      {/* Bulk section */}
+      {d.cargoType === "bulk" && (
+        <>
+          <Divider />
+          <div className="space-y-3">
+            <StepLabel>Freight Type *</StepLabel>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <OptionCard
+                selected={d.freightType === "bulk"}
+                onClick={() => set("freightType", "bulk")}
+              >
+                <p className="font-semibold">Bulk</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Coffee, fertilizer, grain, ore, etc.
+                </p>
+              </OptionCard>
+              <OptionCard
+                selected={d.freightType === "break_bulk"}
+                onClick={() => set("freightType", "break_bulk")}
+              >
+                <p className="font-semibold">Break-Bulk</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Machinery, vehicles, project cargo, etc.
+                </p>
+              </OptionCard>
+            </div>
+
+            {d.freightType === "bulk" && (
+              <div className="space-y-2">
+                <Select
+                  value={d.bulkCommodity}
+                  onValueChange={(v) => {
+                    set("bulkCommodity", v);
+                    if (v !== "Others") set("bulkCommodityOther", "");
+                  }}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Select commodity *" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {BULK_COMMODITIES.map((c) => (
+                      <SelectItem key={c} value={c}>
+                        {c}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {d.bulkCommodity === "Others" && (
+                  <Input
+                    placeholder="Specify commodity *"
+                    value={d.bulkCommodityOther}
+                    onChange={(e) => set("bulkCommodityOther", e.target.value)}
+                  />
+                )}
+              </div>
+            )}
+
+            {d.freightType === "break_bulk" && (
+              <div className="space-y-2">
+                <Select
+                  value={d.breakBulkType}
+                  onValueChange={(v) => {
+                    set("breakBulkType", v);
+                    if (v !== "Others") set("breakBulkTypeOther", "");
+                  }}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Select type *" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {BREAK_BULK_TYPES.map((c) => (
+                      <SelectItem key={c} value={c}>
+                        {c}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {d.breakBulkType === "Others" && (
+                  <Input
+                    placeholder="Specify break-bulk type *"
+                    value={d.breakBulkTypeOther}
+                    onChange={(e) => set("breakBulkTypeOther", e.target.value)}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+
+          <Divider />
+
+          {/* Weight */}
+          <div className="space-y-3">
+            <StepLabel>Weight</StepLabel>
+            <Field label="Total Cargo Weight – VGM (Tons) *">
+              <div className="relative">
+                <Weight className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  type="number"
+                  placeholder="0.00"
+                  value={d.cargoWeight}
+                  onChange={(e) => set("cargoWeight", e.target.value)}
+                  className="pl-9"
+                  min="0"
+                  step="0.01"
+                />
+              </div>
+            </Field>
+          </div>
+        </>
       )}
 
-      <Divider />
+      {/* Container section */}
+      {d.cargoType === "container" && (
+        <>
+          <Divider />
+          <div className="space-y-3">
+            <StepLabel>Container Configuration</StepLabel>
+            <div className="grid gap-3 sm:grid-cols-2">
+              {[
+                {
+                  val: "20ft" as const,
+                  label: "20ft Container (TEU)",
+                  limit:
+                    direction === "export"
+                      ? "Max 25t per container"
+                      : "Max 20t per container",
+                },
+                {
+                  val: "40ft" as const,
+                  label: "40ft Container (FEU)",
+                  limit: "Max 32.5t per container",
+                },
+              ].map((ct) => (
+                <OptionCard
+                  key={ct.val}
+                  selected={d.containerType === ct.val}
+                  onClick={() => set("containerType", ct.val)}
+                >
+                  <div className="mb-1 flex items-center gap-2">
+                    <Package className="h-4 w-4 text-primary" />
+                    <p className="font-semibold">{ct.label}</p>
+                  </div>
+                  <p className="text-xs text-muted-foreground">{ct.limit}</p>
+                </OptionCard>
+              ))}
+            </div>
 
-      <div className="grid gap-4 sm:grid-cols-2">
-        <Field label="Quantity">
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => set("quantity", String(Math.max(1, qty - 1)))}
-              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
-            >−</button>
-            <Input
-              type="number"
-              value={d.quantity}
-              onChange={(e) => set("quantity", e.target.value)}
-              className="text-center"
-              min="1"
-            />
-            <button
-              type="button"
-              onClick={() => set("quantity", String(qty + 1))}
-              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
-            >+</button>
+            {direction && (
+              <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <MapPin className="h-3.5 w-3.5" />
+                Route detected as{" "}
+                <span className="font-medium capitalize text-foreground">
+                  {direction}
+                </span>{" "}
+                workflow
+              </p>
+            )}
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Field label="Quantity">
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => set("quantity", String(Math.max(1, qty - 1)))}
+                    className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
+                  >
+                    −
+                  </button>
+                  <Input
+                    type="number"
+                    value={d.quantity}
+                    onChange={(e) => set("quantity", e.target.value)}
+                    className="text-center"
+                    min="1"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => set("quantity", String(qty + 1))}
+                    className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
+                  >
+                    +
+                  </button>
+                </div>
+              </Field>
+              <Field label="VGM per Container (Tons) *">
+                <Input
+                  type="number"
+                  placeholder="e.g. 18.5"
+                  value={d.vgm}
+                  onChange={(e) => set("vgm", e.target.value)}
+                  min="0"
+                  step="0.1"
+                />
+              </Field>
+            </div>
           </div>
-        </Field>
-        <Field label="VGM per Container (Tons) *">
-          <Input
-            type="number"
-            placeholder="e.g. 18.5"
-            value={d.vgm}
-            onChange={(e) => set("vgm", e.target.value)}
-            min="0"
-            step="0.1"
-          />
-        </Field>
-      </div>
 
-      {overweightAlert && <AlertBox tone="warning"><strong>Overweight Alert:</strong> {overweightAlert}</AlertBox>}
+          {overweightAlert && (
+            <AlertBox tone="warning">
+              <strong>Overweight Alert:</strong> {overweightAlert}
+            </AlertBox>
+          )}
+        </>
+      )}
     </div>
   );
 }
@@ -897,7 +1051,9 @@ function Step5({
 // ── Step 6: Wagon Allocation ───────────────────────────────────────────────────
 
 function Step6({
-  d, set, wagons,
+  d,
+  set,
+  wagons,
 }: {
   d: FormData;
   set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
@@ -916,18 +1072,25 @@ function Step6({
 
       {!wagons ? (
         <AlertBox tone="info">
-          Complete the container configuration in the previous step to see wagon allocation.
+          Complete the container configuration in the previous step to see wagon
+          allocation.
         </AlertBox>
       ) : (
         <>
           <div className="grid gap-3 sm:grid-cols-3">
             <div className="rounded-xl bg-primary/5 p-4 text-center">
-              <p className="text-3xl font-bold text-primary">{wagons.totalWagons}</p>
-              <p className="mt-1 text-xs text-muted-foreground">Wagons Required</p>
+              <p className="text-3xl font-bold text-primary">
+                {wagons.totalWagons}
+              </p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                Wagons Required
+              </p>
             </div>
             <div className="rounded-xl bg-muted p-4 text-center">
               <p className="text-3xl font-bold">{qty}</p>
-              <p className="mt-1 text-xs text-muted-foreground">{d.containerType} Containers</p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {d.containerType} Containers
+              </p>
             </div>
             <div className="rounded-xl bg-muted p-4 text-center">
               <p className="text-3xl font-bold">{wagons.sharedWagons}</p>
@@ -943,15 +1106,16 @@ function Step6({
                 return (
                   <div
                     key={i}
-                    className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold ${
-                      isOdd
+                    className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold ${isOdd
                         ? "border-amber-300 bg-amber-50 text-amber-700"
                         : "border-primary/30 bg-primary/5 text-primary"
-                    }`}
+                      }`}
                   >
                     {isOdd
                       ? `1 × ${d.containerType} (½)`
-                      : d.containerType === "20ft" ? "2 × 20ft" : "1 × 40ft"}
+                      : d.containerType === "20ft"
+                        ? "2 × 20ft"
+                        : "1 × 40ft"}
                   </div>
                 );
               })}
@@ -971,11 +1135,14 @@ function Step6({
               <div className="space-y-3">
                 <div className="flex items-center gap-2">
                   <AlertTriangle className="h-4 w-4 text-amber-500" />
-                  <p className="text-sm font-medium">Consolidation Option (US-07)</p>
+                  <p className="text-sm font-medium">
+                    Consolidation Option (US-07)
+                  </p>
                 </div>
                 <p className="text-xs text-muted-foreground">
-                  You have 1 unpaired 20ft container. Opt in to share a wagon slot with another
-                  shipper to optimise costs (2 × 20ft = 1 Wagon), or request a dedicated wagon.
+                  You have 1 unpaired 20ft container. Opt in to share a wagon
+                  slot with another shipper to optimise costs (2 × 20ft = 1
+                  Wagon), or request a dedicated wagon.
                 </p>
                 <div className="grid gap-2 sm:grid-cols-2">
                   <OptionCard
@@ -1009,7 +1176,8 @@ function Step6({
 // ── Step 7: Compliance Documents ───────────────────────────────────────────────
 
 function Step7Docs({
-  d, set,
+  d,
+  set,
 }: {
   d: FormData;
   set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
@@ -1023,19 +1191,21 @@ function Step7Docs({
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-xl font-bold tracking-tight">Compliance Documents</h2>
+        <h2 className="text-xl font-bold tracking-tight">
+          Compliance Documents
+        </h2>
         <p className="mt-1 text-sm text-muted-foreground">
-          Upload your company's legal credentials for EDR contract eligibility verification (US-04).
+          Upload your company's legal credentials for EDR contract eligibility
+          verification (US-04).
         </p>
       </div>
 
       <div className="flex items-center gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3">
         <div
-          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold ${
-            uploadedRequired === REQUIRED_DOC_KEYS.length
+          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold ${uploadedRequired === REQUIRED_DOC_KEYS.length
               ? "bg-emerald-100 text-emerald-700"
               : "bg-primary/10 text-primary"
-          }`}
+            }`}
         >
           {uploadedRequired}/{REQUIRED_DOC_KEYS.length}
         </div>
@@ -1058,7 +1228,11 @@ function Step7Docs({
 // ── Step 8: Review & Submit ────────────────────────────────────────────────────
 
 function Step8Review({
-  d, set, setStep, wagons, direction,
+  d,
+  set,
+  setStep,
+  wagons,
+  direction,
 }: {
   d: FormData;
   set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
@@ -1066,7 +1240,15 @@ function Step8Review({
   wagons: WagonCalcResult | null;
   direction: RouteDirection;
 }) {
-  function Row({ label, value, target }: { label: string; value: string; target: number }) {
+  function Row({
+    label,
+    value,
+    target,
+  }: {
+    label: string;
+    value: string;
+    target: number;
+  }) {
     return (
       <div className="flex items-start justify-between gap-4 py-2">
         <div className="min-w-0">
@@ -1088,8 +1270,8 @@ function Step8Review({
     d.freightType === "bulk"
       ? `Bulk — ${d.bulkCommodity === "Others" ? d.bulkCommodityOther : d.bulkCommodity}`
       : d.freightType === "break_bulk"
-      ? `Break-Bulk — ${d.breakBulkType === "Others" ? d.breakBulkTypeOther : d.breakBulkType}`
-      : "";
+        ? `Break-Bulk — ${d.breakBulkType === "Others" ? d.breakBulkTypeOther : d.breakBulkType}`
+        : "";
 
   const uploadedCount = REQUIRED_DOC_KEYS.filter((k) => {
     const f = d.documents[k];
@@ -1114,11 +1296,25 @@ function Step8Review({
             </CardTitle>
           </CardHeader>
           <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row label="Type" value={d.contractType === "new" ? "New Contract" : "Renewal"} target={1} />
-            <Row label="Contract ID" value={d.draftContractId || d.previousContractRef} target={1} />
+            <Row
+              label="Type"
+              value={d.contractType === "new" ? "New Contract" : "Renewal"}
+              target={1}
+            />
+            <Row
+              label="Contract ID"
+              value={d.draftContractId || d.previousContractRef}
+              target={1}
+            />
             <Row
               label="Service"
-              value={d.serviceType === "rail" ? "Rail Only" : d.serviceType === "rail_forwarding" ? "Rail + Forwarding" : ""}
+              value={
+                d.serviceType === "rail"
+                  ? "Rail Only"
+                  : d.serviceType === "rail_forwarding"
+                    ? "Rail + Forwarding"
+                    : ""
+              }
               target={2}
             />
           </CardContent>
@@ -1143,7 +1339,11 @@ function Step8Review({
             />
             <Row
               label="Equipment Return"
-              value={d.equipmentReturn === "with_return" ? "With Return" : "Without Return"}
+              value={
+                d.equipmentReturn === "with_return"
+                  ? "With Return"
+                  : "Without Return"
+              }
               target={3}
             />
           </CardContent>
@@ -1156,13 +1356,36 @@ function Step8Review({
             </CardTitle>
           </CardHeader>
           <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row label="Route" value={`${d.originYard} → ${d.destinationYard}`} target={4} />
-            <Row label="Workflow" value={direction ? direction.charAt(0).toUpperCase() + direction.slice(1) : ""} target={4} />
-            <Row label="Weight (VGM)" value={d.cargoWeight ? `${d.cargoWeight} tons` : ""} target={4} />
-            <Row label="Cargo" value={cargoValue} target={4} />
+            <Row
+              label="Route"
+              value={`${d.originYard} → ${d.destinationYard}`}
+              target={4}
+            />
+            <Row
+              label="Workflow"
+              value={
+                direction
+                  ? direction.charAt(0).toUpperCase() + direction.slice(1)
+                  : ""
+              }
+              target={4}
+            />
+            <Row
+              label="Weight (VGM)"
+              value={d.cargoWeight ? `${d.cargoWeight} tons` : ""}
+              target={5}
+            />
+            <Row label="Cargo" value={cargoValue} target={5} />
             <Row
               label="Modifiers"
-              value={[d.isHazardous && "Hazardous", d.isRefrigerated && "Refrigerated"].filter(Boolean).join(", ") || "None"}
+              value={
+                [
+                  d.isHazardous && "Hazardous",
+                  d.isRefrigerated && "Refrigerated",
+                ]
+                  .filter(Boolean)
+                  .join(", ") || "None"
+              }
               target={4}
             />
           </CardContent>
@@ -1175,11 +1398,23 @@ function Step8Review({
             </CardTitle>
           </CardHeader>
           <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row label="Container" value={`${d.quantity} × ${d.containerType}`} target={5} />
-            <Row label="VGM per Container" value={d.vgm ? `${d.vgm} tons` : ""} target={5} />
+            <Row
+              label="Container"
+              value={`${d.quantity} × ${d.containerType}`}
+              target={5}
+            />
+            <Row
+              label="VGM per Container"
+              value={d.vgm ? `${d.vgm} tons` : ""}
+              target={5}
+            />
             <Row
               label="Wagons"
-              value={wagons ? `${wagons.totalWagons} wagon${wagons.totalWagons > 1 ? "s" : ""}` : ""}
+              value={
+                wagons
+                  ? `${wagons.totalWagons} wagon${wagons.totalWagons > 1 ? "s" : ""}`
+                  : ""
+              }
               target={6}
             />
             <Row
@@ -1207,15 +1442,19 @@ function Step8Review({
           role="checkbox"
           aria-checked={d.termsAccepted}
           onClick={() => set("termsAccepted", !d.termsAccepted)}
-          className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 transition ${
-            d.termsAccepted ? "border-primary bg-primary" : "border-input"
-          }`}
+          className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 transition ${d.termsAccepted ? "border-primary bg-primary" : "border-input"
+            }`}
         >
-          {d.termsAccepted && <Check className="h-3 w-3 text-primary-foreground" />}
+          {d.termsAccepted && (
+            <Check className="h-3 w-3 text-primary-foreground" />
+          )}
         </button>
         <span className="text-sm text-muted-foreground">
           I confirm the information is accurate and agree to EDR's{" "}
-          <span className="text-primary">freight contract terms and conditions</span>.
+          <span className="text-primary">
+            freight contract terms and conditions
+          </span>
+          .
         </span>
       </label>
     </div>
@@ -1250,7 +1489,9 @@ export default function NewBookingPage() {
     setRenewalValid(null);
     setTimeout(() => {
       setRenewalValidating(false);
-      setRenewalValid(MOCK_VALID_CONTRACTS.includes(data.previousContractRef.toUpperCase()));
+      setRenewalValid(
+        MOCK_VALID_CONTRACTS.includes(data.previousContractRef.toUpperCase()),
+      );
     }, 1200);
   }
 
@@ -1267,18 +1508,25 @@ export default function NewBookingPage() {
         if (data.lastMileEnabled && !data.deliveryAddress) return false;
         return true;
       case 4:
-        if (!data.originYard || !data.destinationYard || !data.cargoWeight || !data.freightType)
-          return false;
-        if (data.freightType === "bulk") {
-          if (!data.bulkCommodity) return false;
-          if (data.bulkCommodity === "Others" && !data.bulkCommodityOther) return false;
-        }
-        if (data.freightType === "break_bulk") {
-          if (!data.breakBulkType) return false;
-          if (data.breakBulkType === "Others" && !data.breakBulkTypeOther) return false;
-        }
+        if (!data.originYard || !data.destinationYard) return false;
         return true;
       case 5:
+        if (!data.cargoType) return false;
+        if (data.cargoType === "bulk") {
+          if (!data.freightType) return false;
+          if (data.freightType === "bulk") {
+            if (!data.bulkCommodity) return false;
+            if (data.bulkCommodity === "Others" && !data.bulkCommodityOther)
+              return false;
+          }
+          if (data.freightType === "break_bulk") {
+            if (!data.breakBulkType) return false;
+            if (data.breakBulkType === "Others" && !data.breakBulkTypeOther)
+              return false;
+          }
+          if (!data.cargoWeight) return false;
+          return true;
+        }
         return !!(data.containerType && data.quantity && data.vgm);
       case 6:
         return true;
@@ -1309,8 +1557,8 @@ export default function NewBookingPage() {
           </div>
           <h2 className="text-xl font-bold">Contract Submitted</h2>
           <p className="mt-2 text-sm text-muted-foreground">
-            Your request is queued for review by EDR Line Staff. You will be notified once
-            approved.
+            Your request is queued for review by EDR Line Staff. You will be
+            notified once approved.
           </p>
           <p className="mt-4 font-mono text-sm font-semibold text-primary">
             {data.draftContractId || data.previousContractRef}
@@ -1321,41 +1569,41 @@ export default function NewBookingPage() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex flex-col">
       {/* Sticky step indicator */}
       <div className="sticky top-0 z-20 border-b border-border bg-background">
         <div className="mx-auto max-w-4xl space-y-3 px-6 py-3">
           <Breadcrumbs
-            items={[{ label: "Bookings", href: "/bookings" }, { label: "New Contract Request" }]}
+            items={[
+              { label: "Bookings", href: "/bookings" },
+              { label: "New Contract Request" },
+            ]}
           />
           <div className="flex items-center">
             {STEPS.map((s, idx) => (
               <Fragment key={s.id}>
                 <div className="flex shrink-0 flex-col items-center gap-1">
                   <div
-                    className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition-colors ${
-                      step > s.id
+                    className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition-colors ${step > s.id
                         ? "bg-primary text-primary-foreground"
                         : step === s.id
-                        ? "border-2 border-primary text-primary"
-                        : "bg-muted text-muted-foreground"
-                    }`}
+                          ? "border-2 border-primary text-primary"
+                          : "bg-muted text-muted-foreground"
+                      }`}
                   >
                     {step > s.id ? <Check className="h-3.5 w-3.5" /> : s.id}
                   </div>
                   <span
-                    className={`hidden text-[10px] font-medium lg:block ${
-                      step >= s.id ? "text-foreground" : "text-muted-foreground"
-                    }`}
+                    className={`hidden text-[10px] font-medium lg:block ${step >= s.id ? "text-foreground" : "text-muted-foreground"
+                      }`}
                   >
                     {s.short}
                   </span>
                 </div>
                 {idx < STEPS.length - 1 && (
                   <div
-                    className={`mx-1 h-0.5 flex-1 rounded-full transition-colors ${
-                      step > s.id ? "bg-primary" : "bg-border"
-                    }`}
+                    className={`mx-1 h-0.5 flex-1 rounded-full transition-colors ${step > s.id ? "bg-primary" : "bg-border"
+                      }`}
                   />
                 )}
               </Fragment>
@@ -1406,9 +1654,11 @@ export default function NewBookingPage() {
             Back
           </Button>
           <div className="flex items-center gap-3">
-            <span className="text-xs text-muted-foreground">{step} / {STEPS.length}</span>
             {step < STEPS.length ? (
-              <Button onClick={() => setStep((s) => s + 1)} disabled={!canProceed()}>
+              <Button
+                onClick={() => setStep((s) => s + 1)}
+                disabled={!canProceed()}
+              >
                 Continue
                 <ChevronRight className="ml-1 h-4 w-4" />
               </Button>

From 6287022a536e3d0a0bfd4556d39fb907a2a2b711 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 15:42:56 +0300
Subject: [PATCH 06/13] style: improve the switch component

---
 packages/ui-common/src/components/switch.tsx | 18 +++++++++---------
 packages/ui-common/src/index.ts              |  1 +
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/ui-common/src/components/switch.tsx b/packages/ui-common/src/components/switch.tsx
index 76190b7c9..83829ae92 100644
--- a/packages/ui-common/src/components/switch.tsx
+++ b/packages/ui-common/src/components/switch.tsx
@@ -1,33 +1,33 @@
-import * as React from "react"
-import { Switch as SwitchPrimitive } from "radix-ui"
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
 
-import { cn } from "../lib/utils"
+import { cn } from "../lib/utils";
 
 function Switch({
   className,
   size = "default",
   ...props
 }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
-  size?: "sm" | "default"
+  size?: "sm" | "default" | "lg";
 }) {
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
-        className
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 p-0.5 h-auto data-[size=lg]:w-10 data-[size=default]:w-8 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        className,
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=lg]/switch:size-5 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-7px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
         )}
       />
     </SwitchPrimitive.Root>
-  )
+  );
 }
 
-export { Switch }
+export { Switch };
diff --git a/packages/ui-common/src/index.ts b/packages/ui-common/src/index.ts
index ca2df73bf..b2c2978bd 100644
--- a/packages/ui-common/src/index.ts
+++ b/packages/ui-common/src/index.ts
@@ -32,4 +32,5 @@ export * from "./components/dialog";
 export * from "./components/SmartFileInput";
 export * from "./components/select";
 export * from "./components/switch";
+export * from "./components/separator";
 export * from "./components/field";

From 4691f5ad3f1591e4b11050deec1adc8f95dc10ec Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 15:43:20 +0300
Subject: [PATCH 07/13] feat: enhance the new booking form with RHC

---
 .../src/pages/bookings/NewBookingPage.tsx     | 1718 ++---------------
 .../new-booking-form/StepIndicator.tsx        |   41 +
 .../pages/bookings/new-booking-form/schema.ts |  491 +++++
 .../bookings/new-booking-form/shared.tsx      |  157 ++
 .../pages/bookings/new-booking-form/steps.tsx | 1303 +++++++++++++
 5 files changed, 2124 insertions(+), 1586 deletions(-)
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/StepIndicator.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx

diff --git a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
index 84a3b9c69..2fe104665 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
@@ -1,1549 +1,125 @@
-import { Fragment, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
-import {
-  AlertTriangle,
-  Check,
-  CheckCircle2,
-  ChevronLeft,
-  ChevronRight,
-  FileText,
-  Flame,
-  Info,
-  Loader2,
-  MapPin,
-  Package,
-  RefreshCw,
-  Snowflake,
-  Train,
-  Weight,
-  XCircle,
-} from "lucide-react";
-import {
-  Badge,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Input,
-  Label,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  SmartFileInput,
-  Switch,
-  Textarea,
-} from "@edr/ui-common";
+import { CheckCircle2, ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@edr/ui-common";
 import Breadcrumbs from "@/components/Breadcrumbs";
-
-// ── Mock Constants ─────────────────────────────────────────────────────────────
-
-const STATIONS = [
-  "Addis Ababa",
-  "Adama",
-  "Mojo",
-  "Awash",
-  "Mieso",
-  "Dire Dawa",
-  "Aysha",
-  "Ali Sabieh",
-  "Holhol",
-  "Djibouti City",
-];
-
-const ETHIOPIA_STATIONS = new Set([
-  "Addis Ababa",
-  "Adama",
-  "Mojo",
-  "Awash",
-  "Mieso",
-  "Dire Dawa",
-]);
-
-const BULK_COMMODITIES = [
-  "Coffee",
-  "Beans",
-  "Fertilizer",
-  "Sugar",
-  "Oil",
-  "Livestock",
-  "Steel",
-  "Others",
-];
-
-const BREAK_BULK_TYPES = ["Machinery", "Ro-Ro", "Others"];
-
-const MOCK_VALID_CONTRACTS = [
-  "EDR-2024-10001",
-  "EDR-2024-10002",
-  "EDR-2023-88123",
-  "EDR-2022-55442",
-];
-
-// US-04 compliance documents (TIN, Business License, Registration, National ID, optional PoA)
-const BOOKING_DOCS_SETTING = {
-  id: "booking-compliance",
-  createdAt: "",
-  updatedAt: "",
-  deletedAt: null,
-  code: "booking_compliance_docs",
-  label: "Compliance Documents",
-  description:
-    "Upload your company's legal credentials. All mandatory documents must be submitted before the contract request can be reviewed by EDR Line Staff.",
-  entity: "booking" as const,
-  fields: [
-    {
-      id: "f1",
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: null,
-      settingId: "booking-compliance",
-      fileKey: "tin_certificate",
-      fileLabel: "TIN Certificate",
-      helpText:
-        "Tax Identification Number certificate issued by ERCA (10-digit TIN).",
-      isRequired: true,
-      isMultiple: false,
-      maxFiles: 1,
-      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
-      maxSizeMb: 5,
-      order: 1,
-    },
-    {
-      id: "f2",
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: null,
-      settingId: "booking-compliance",
-      fileKey: "business_license",
-      fileLabel: "Business / Investment License",
-      helpText:
-        "Current business or investment license issued by the relevant government authority.",
-      isRequired: true,
-      isMultiple: false,
-      maxFiles: 1,
-      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
-      maxSizeMb: 5,
-      order: 2,
-    },
-    {
-      id: "f3",
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: null,
-      settingId: "booking-compliance",
-      fileKey: "business_registration",
-      fileLabel: "Business Registration Certificate",
-      helpText: "Certificate of registration from the relevant authority.",
-      isRequired: true,
-      isMultiple: false,
-      maxFiles: 1,
-      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
-      maxSizeMb: 5,
-      order: 3,
-    },
-    {
-      id: "f4",
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: null,
-      settingId: "booking-compliance",
-      fileKey: "national_id",
-      fileLabel: "National ID / Passport",
-      helpText:
-        "Valid government-issued ID or passport of the authorized signatory.",
-      isRequired: true,
-      isMultiple: false,
-      maxFiles: 1,
-      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
-      maxSizeMb: 5,
-      order: 4,
-    },
-    {
-      id: "f5",
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: null,
-      settingId: "booking-compliance",
-      fileKey: "power_of_attorney",
-      fileLabel: "Power of Attorney (PoA)",
-      helpText:
-        "Required only if a representative is signing on behalf of the company.",
-      isRequired: false,
-      isMultiple: false,
-      maxFiles: 1,
-      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
-      maxSizeMb: 5,
-      order: 5,
-    },
-  ],
-};
-
-const REQUIRED_DOC_KEYS = [
-  "tin_certificate",
-  "business_license",
-  "business_registration",
-  "national_id",
-];
-
-const STEPS = [
-  { id: 1, label: "Contract Type", short: "Contract" },
-  { id: 2, label: "Service Type", short: "Service" },
-  { id: 3, label: "First & Last Mile", short: "Mile" },
-  { id: 4, label: "Route", short: "Route" },
-  { id: 5, label: "Cargo Details", short: "Cargo" },
-  { id: 6, label: "Wagon Allocation", short: "Wagons" },
-  { id: 7, label: "Documents", short: "Docs" },
-  { id: 8, label: "Review & Submit", short: "Submit" },
-] as const;
-
-// ── Types ──────────────────────────────────────────────────────────────────────
-
-type ContractTypeVal = "new" | "renewal" | "";
-type ServiceTypeVal = "rail" | "rail_forwarding" | "";
-type FreightTypeVal = "bulk" | "break_bulk" | "";
-type ContainerTypeVal = "20ft" | "40ft" | "";
-type EquipmentReturn = "with_return" | "without_return";
-
-interface FormData {
-  contractType: ContractTypeVal;
-  previousContractRef: string;
-  draftContractId: string;
-  serviceType: ServiceTypeVal;
-  firstMileEnabled: boolean;
-  pickUpAddress: string;
-  lastMileEnabled: boolean;
-  deliveryAddress: string;
-  equipmentReturn: EquipmentReturn;
-  originYard: string;
-  destinationYard: string;
-  cargoType: "container" | "bulk" | "";
-  cargoWeight: string;
-  freightType: FreightTypeVal;
-  bulkCommodity: string;
-  bulkCommodityOther: string;
-  breakBulkType: string;
-  breakBulkTypeOther: string;
-  isHazardous: boolean;
-  isRefrigerated: boolean;
-  containerType: ContainerTypeVal;
-  quantity: string;
-  vgm: string;
-  consolidationEnabled: boolean;
-  documents: Record<string, File | File[] | null>;
-  notes: string;
-  termsAccepted: boolean;
-}
-
-const INITIAL_DATA: FormData = {
-  contractType: "",
-  previousContractRef: "",
-  draftContractId: "",
-  serviceType: "",
-  firstMileEnabled: false,
-  pickUpAddress: "",
-  lastMileEnabled: false,
-  deliveryAddress: "",
-  equipmentReturn: "with_return",
-  originYard: "",
-  destinationYard: "",
-  cargoType: "",
-  cargoWeight: "",
-  freightType: "",
-  bulkCommodity: "",
-  bulkCommodityOther: "",
-  breakBulkType: "",
-  breakBulkTypeOther: "",
-  isHazardous: false,
-  isRefrigerated: false,
-  containerType: "",
-  quantity: "1",
-  vgm: "",
-  consolidationEnabled: false,
-  documents: {},
-  notes: "",
-  termsAccepted: false,
-};
-
-// ── Helpers ────────────────────────────────────────────────────────────────────
-
-function genContractId(): string {
-  const yr = new Date().getFullYear();
-  const n = Math.floor(10000 + Math.random() * 90000);
-  return `EDR-DRAFT-${yr}-${n}`;
-}
-
-type RouteDirection = "import" | "export" | "domestic" | null;
-
-function getRouteDirection(origin: string, dest: string): RouteDirection {
-  if (!origin || !dest) return null;
-  const oEth = ETHIOPIA_STATIONS.has(origin);
-  const dEth = ETHIOPIA_STATIONS.has(dest);
-  if (oEth && !dEth) return "export";
-  if (!oEth && dEth) return "import";
-  if (oEth && dEth) return "domestic";
-  return null;
-}
-
-interface WagonCalcResult {
-  totalWagons: number;
-  hasOddUnit: boolean;
-  sharedWagons: number;
-}
-
-function calcWagons(type: ContainerTypeVal, qty: number): WagonCalcResult {
-  if (type === "40ft")
-    return { totalWagons: qty, hasOddUnit: false, sharedWagons: qty };
-  const pairs = Math.floor(qty / 2);
-  const odd = qty % 2;
-  return { totalWagons: pairs + odd, hasOddUnit: odd > 0, sharedWagons: pairs };
-}
-
-// ── Shared primitives ──────────────────────────────────────────────────────────
-
-function OptionCard({
-  selected,
-  onClick,
-  disabled,
-  children,
-}: {
-  selected: boolean;
-  onClick?: () => void;
-  disabled?: boolean;
-  children: React.ReactNode;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className={`relative w-full rounded-xl border-2 p-4 text-left transition ${disabled
-          ? "cursor-not-allowed border-border bg-muted opacity-60"
-          : selected
-            ? "border-primary bg-primary/5"
-            : "border-border bg-card hover:border-primary/40"
-        }`}
-    >
-      {selected && !disabled && (
-        <span className="absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary">
-          <Check className="h-3 w-3 text-primary-foreground" />
-        </span>
-      )}
-      {children}
-    </button>
-  );
-}
-
-function AlertBox({
-  tone,
-  children,
-}: {
-  tone: "warning" | "error" | "success" | "info";
-  children: React.ReactNode;
-}) {
-  const s = {
-    warning: "bg-amber-50 border-amber-200 text-amber-800",
-    error: "bg-red-50 border-red-200 text-red-800",
-    success: "bg-emerald-50 border-emerald-200 text-emerald-800",
-    info: "bg-sky-50 border-sky-200 text-sky-800",
-  };
-  const icons = {
-    warning: <AlertTriangle className="h-4 w-4 shrink-0 text-amber-500" />,
-    error: <XCircle className="h-4 w-4 shrink-0 text-red-500" />,
-    success: <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-600" />,
-    info: <Info className="h-4 w-4 shrink-0 text-sky-500" />,
-  };
-  return (
-    <div
-      className={`flex items-start gap-3 rounded-xl border p-3 text-sm ${s[tone]}`}
-    >
-      {icons[tone]}
-      <div>{children}</div>
-    </div>
-  );
-}
-
-function Field({
-  label,
-  children,
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="space-y-1.5">
-      <Label className="text-sm font-medium">{label}</Label>
-      {children}
-    </div>
-  );
-}
-
-function Divider() {
-  return <div className="h-px bg-border" />;
-}
-
-function StepLabel({ children }: { children: React.ReactNode }) {
-  return (
-    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-      {children}
-    </p>
-  );
-}
-
-// ── Step 1: Contract Type ──────────────────────────────────────────────────────
-
-function Step1({
-  d,
-  set,
-  renewalValid,
-  renewalValidating,
-  onValidate,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-  renewalValid: boolean | null;
-  renewalValidating: boolean;
-  onValidate: () => void;
-}) {
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Contract Type</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          New contract or renewal of an existing one.
-        </p>
-      </div>
-
-      <div className="grid gap-3 md:grid-cols-2">
-        <OptionCard
-          selected={d.contractType === "new"}
-          onClick={() => {
-            set("contractType", "new");
-            if (!d.draftContractId) set("draftContractId", genContractId());
-          }}
-        >
-          <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
-            <FileText className="h-4 w-4 text-primary" />
-          </div>
-          <p className="font-semibold">New Contract</p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            Blank contract form. A draft ID is auto-generated.
-          </p>
-          {d.contractType === "new" && d.draftContractId && (
-            <p className="mt-2 font-mono text-xs font-semibold text-primary">
-              {d.draftContractId}
-            </p>
-          )}
-        </OptionCard>
-
-        <OptionCard
-          selected={d.contractType === "renewal"}
-          onClick={() => set("contractType", "renewal")}
-        >
-          <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100">
-            <RefreshCw className="h-4 w-4 text-sky-600" />
-          </div>
-          <p className="font-semibold">Contract Renewal</p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            Enter a previous reference to auto-populate historical parameters.
-          </p>
-        </OptionCard>
-      </div>
-
-      {d.contractType === "renewal" && (
-        <div className="space-y-3 pt-1">
-          <Field label="Previous Contract Reference Number">
-            <div className="flex gap-2">
-              <Input
-                placeholder="e.g. EDR-2024-10001"
-                value={d.previousContractRef}
-                onChange={(e) => set("previousContractRef", e.target.value)}
-                className="font-mono"
-              />
-              <Button
-                variant="outline"
-                onClick={onValidate}
-                disabled={!d.previousContractRef || renewalValidating}
-              >
-                {renewalValidating ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                ) : (
-                  "Validate"
-                )}
-              </Button>
-            </div>
-          </Field>
-          {renewalValid === true && (
-            <AlertBox tone="success">
-              <strong>Contract found.</strong> Company details, route, and wagon
-              preferences will be pre-filled.
-            </AlertBox>
-          )}
-          {renewalValid === false && (
-            <AlertBox tone="error">
-              Contract Reference Number not found or unauthorized. Try{" "}
-              <span className="font-mono">EDR-2024-10001</span>.
-            </AlertBox>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── Step 2: Service Type ───────────────────────────────────────────────────────
-
-function Step2({
-  d,
-  set,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-}) {
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Service Type</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Select the service combination you require.
-        </p>
-      </div>
-
-      <div className="grid gap-3 md:grid-cols-2">
-        <OptionCard
-          selected={d.serviceType === "rail"}
-          onClick={() => set("serviceType", "rail")}
-        >
-          <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100">
-            <Train className="h-4 w-4 text-indigo-600" />
-          </div>
-          <p className="font-semibold">Rail Transport Only</p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            Rail transport along the EDR corridor, with optional first/last mile
-            trucking.
-          </p>
-          <Badge className="mt-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-100">
-            Option A
-          </Badge>
-        </OptionCard>
-
-        <OptionCard
-          selected={d.serviceType === "rail_forwarding"}
-          onClick={() => set("serviceType", "rail_forwarding")}
-        >
-          <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
-            <Package className="h-4 w-4 text-primary" />
-          </div>
-          <p className="font-semibold">Rail Transport & Freight Forwarding</p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            Rail transport plus documentation, customs liaison, and a dedicated
-            coordinator.
-          </p>
-          <Badge className="mt-2 bg-emerald-100 text-emerald-700 hover:bg-emerald-100">
-            Option B
-          </Badge>
-        </OptionCard>
-      </div>
-
-      <p className="text-xs text-muted-foreground">
-        Customs and Clearance Service cannot be selected independently — it must
-        be bundled with a Rail Transport service.
-      </p>
-    </div>
-  );
-}
-
-// ── Step 3: First & Last Mile ──────────────────────────────────────────────────
-
-function Step3({
-  d,
-  set,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-}) {
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">First & Last Mile</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Configure trucking and container return options.
-        </p>
-      </div>
-
-      <div className="divide-y divide-border rounded-xl border border-border">
-        {/* First Mile */}
-        <div className="p-4">
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <p className="text-sm font-medium">First Mile – Pick-up</p>
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                Truck pick-up from your premises to the origin rail yard.
-              </p>
-            </div>
-            <Switch
-              checked={d.firstMileEnabled}
-              onCheckedChange={(v) => set("firstMileEnabled", v)}
-            />
-          </div>
-          {d.firstMileEnabled && (
-            <div className="mt-3">
-              <Input
-                placeholder="Pick-up address *"
-                value={d.pickUpAddress}
-                onChange={(e) => set("pickUpAddress", e.target.value)}
-              />
-            </div>
-          )}
-        </div>
-
-        {/* Last Mile */}
-        <div className="p-4">
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <p className="text-sm font-medium">Last Mile – Delivery</p>
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                Truck delivery from the destination rail yard to the final
-                address.
-              </p>
-            </div>
-            <Switch
-              checked={d.lastMileEnabled}
-              onCheckedChange={(v) => set("lastMileEnabled", v)}
-            />
-          </div>
-          {d.lastMileEnabled && (
-            <div className="mt-3">
-              <Input
-                placeholder="Delivery address *"
-                value={d.deliveryAddress}
-                onChange={(e) => set("deliveryAddress", e.target.value)}
-              />
-            </div>
-          )}
-        </div>
-
-        {/* Equipment Return */}
-        <div className="p-4">
-          <p className="mb-3 text-sm font-medium">Equipment Return</p>
-          <p className="mb-3 text-xs text-muted-foreground">
-            Declare whether the container asset will be returned after
-            unloading.
-          </p>
-          <div className="grid gap-2 sm:grid-cols-2">
-            <OptionCard
-              selected={d.equipmentReturn === "with_return"}
-              onClick={() => set("equipmentReturn", "with_return")}
-            >
-              <p className="text-sm font-semibold">With Return</p>
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                Container returned to EDR after unloading.
-              </p>
-            </OptionCard>
-            <OptionCard
-              selected={d.equipmentReturn === "without_return"}
-              onClick={() => set("equipmentReturn", "without_return")}
-            >
-              <p className="text-sm font-semibold">Without Return</p>
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                Container retained by the customer after delivery.
-              </p>
-            </OptionCard>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Step 4: Route & Cargo ──────────────────────────────────────────────────────
-
-function Step4({
-  d,
-  set,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-}) {
-  const direction = getRouteDirection(d.originYard, d.destinationYard);
-  const directionStyle: Record<string, string> = {
-    export: "bg-sky-50 text-sky-800 border-sky-200",
-    import: "bg-amber-50 text-amber-800 border-amber-200",
-    domestic: "bg-muted text-muted-foreground border-border",
-  };
-  const directionLabel: Record<string, string> = {
-    export: "Export workflow (Ethiopia → Djibouti)",
-    import: "Import workflow (Djibouti → Ethiopia)",
-    domestic: "Domestic corridor",
-  };
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Route</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Select the origin and destination yards.
-        </p>
-      </div>
-
-      {/* Route */}
-      <div className="space-y-3">
-        <StepLabel>Route</StepLabel>
-        <div className="grid gap-3 sm:grid-cols-2">
-          <Field label="Origin Yard *">
-            <Select
-              value={d.originYard}
-              onValueChange={(v) => set("originYard", v)}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select origin..." />
-              </SelectTrigger>
-              <SelectContent>
-                {STATIONS.filter((s) => s !== d.destinationYard).map((s) => (
-                  <SelectItem key={s} value={s}>
-                    {s}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </Field>
-          <Field label="Destination Yard *">
-            <Select
-              value={d.destinationYard}
-              onValueChange={(v) => set("destinationYard", v)}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select destination..." />
-              </SelectTrigger>
-              <SelectContent>
-                {STATIONS.filter((s) => s !== d.originYard).map((s) => (
-                  <SelectItem key={s} value={s}>
-                    {s}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </Field>
-        </div>
-        {direction && (
-          <div
-            className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium ${directionStyle[direction]}`}
-          >
-            <MapPin className="h-3.5 w-3.5 shrink-0" />
-            {directionLabel[direction]}
-          </div>
-        )}
-      </div>
-
-      <Divider />
-
-      {/* Modifiers */}
-      <div className="space-y-0 divide-y divide-border">
-        <div className="flex items-center justify-between py-3">
-          <div className="flex items-center gap-3">
-            <Flame className="h-4 w-4 shrink-0 text-red-500" />
-            <div>
-              <p className="text-sm font-medium">Hazardous Material</p>
-              <p className="text-xs text-muted-foreground">
-                Applies a Hazard Surcharge to the final bill.
-              </p>
-            </div>
-          </div>
-          <Switch
-            checked={d.isHazardous}
-            onCheckedChange={(v) => set("isHazardous", v)}
-          />
-        </div>
-        <div className="flex items-center justify-between py-3">
-          <div className="flex items-center gap-3">
-            <Snowflake className="h-4 w-4 shrink-0 text-sky-500" />
-            <div>
-              <p className="text-sm font-medium">Refrigerated Cargo</p>
-              <p className="text-xs text-muted-foreground">
-                Temperature-controlled transport — applies a Refrigerator
-                Surcharge.
-              </p>
-            </div>
-          </div>
-          <Switch
-            checked={d.isRefrigerated}
-            onCheckedChange={(v) => set("isRefrigerated", v)}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Step 5: Container Configuration ───────────────────────────────────────────
-
-function Step5({
-  d,
-  set,
-  direction,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-  direction: RouteDirection;
-}) {
-  const qty = parseInt(d.quantity) || 1;
-  const vgm = parseFloat(d.vgm) || 0;
-
-  let overweightAlert: string | null = null;
-  if (d.containerType === "20ft" && vgm > 0) {
-    const limit = direction === "export" ? 25 : 20;
-    if (vgm > limit)
-      overweightAlert = `VGM ${vgm}t exceeds the ${limit}t ${direction ?? "standard"} limit for a 20ft container. An Overweight Surcharge will apply.`;
-  }
-  if (d.containerType === "40ft" && vgm > 32.5)
-    overweightAlert = `VGM ${vgm}t exceeds the 32.5t global limit for a 40ft container. An Overweight Surcharge will apply.`;
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Cargo Details</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Define your cargo type, weight, and container configuration.
-        </p>
-      </div>
-
-      {/* Cargo Type */}
-      <div className="space-y-3">
-        <StepLabel>Cargo Type *</StepLabel>
-        <div className="grid gap-3 sm:grid-cols-2">
-          <OptionCard
-            selected={d.cargoType === "container"}
-            onClick={() => set("cargoType", "container")}
-          >
-            <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
-              <Package className="h-4 w-4 text-primary" />
-            </div>
-            <p className="font-semibold">Container</p>
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              Pre-packed containerized cargo (20ft / 40ft).
-            </p>
-          </OptionCard>
-          <OptionCard
-            selected={d.cargoType === "bulk"}
-            onClick={() => set("cargoType", "bulk")}
-          >
-            <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100">
-              <Weight className="h-4 w-4 text-amber-600" />
-            </div>
-            <p className="font-semibold">Bulk</p>
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              Bulk commodities or break-bulk cargo.
-            </p>
-          </OptionCard>
-        </div>
-      </div>
-
-      {/* Bulk section */}
-      {d.cargoType === "bulk" && (
-        <>
-          <Divider />
-          <div className="space-y-3">
-            <StepLabel>Freight Type *</StepLabel>
-            <div className="grid gap-3 sm:grid-cols-2">
-              <OptionCard
-                selected={d.freightType === "bulk"}
-                onClick={() => set("freightType", "bulk")}
-              >
-                <p className="font-semibold">Bulk</p>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  Coffee, fertilizer, grain, ore, etc.
-                </p>
-              </OptionCard>
-              <OptionCard
-                selected={d.freightType === "break_bulk"}
-                onClick={() => set("freightType", "break_bulk")}
-              >
-                <p className="font-semibold">Break-Bulk</p>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  Machinery, vehicles, project cargo, etc.
-                </p>
-              </OptionCard>
-            </div>
-
-            {d.freightType === "bulk" && (
-              <div className="space-y-2">
-                <Select
-                  value={d.bulkCommodity}
-                  onValueChange={(v) => {
-                    set("bulkCommodity", v);
-                    if (v !== "Others") set("bulkCommodityOther", "");
-                  }}
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="Select commodity *" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {BULK_COMMODITIES.map((c) => (
-                      <SelectItem key={c} value={c}>
-                        {c}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                {d.bulkCommodity === "Others" && (
-                  <Input
-                    placeholder="Specify commodity *"
-                    value={d.bulkCommodityOther}
-                    onChange={(e) => set("bulkCommodityOther", e.target.value)}
-                  />
-                )}
-              </div>
-            )}
-
-            {d.freightType === "break_bulk" && (
-              <div className="space-y-2">
-                <Select
-                  value={d.breakBulkType}
-                  onValueChange={(v) => {
-                    set("breakBulkType", v);
-                    if (v !== "Others") set("breakBulkTypeOther", "");
-                  }}
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="Select type *" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {BREAK_BULK_TYPES.map((c) => (
-                      <SelectItem key={c} value={c}>
-                        {c}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                {d.breakBulkType === "Others" && (
-                  <Input
-                    placeholder="Specify break-bulk type *"
-                    value={d.breakBulkTypeOther}
-                    onChange={(e) => set("breakBulkTypeOther", e.target.value)}
-                  />
-                )}
-              </div>
-            )}
-          </div>
-
-          <Divider />
-
-          {/* Weight */}
-          <div className="space-y-3">
-            <StepLabel>Weight</StepLabel>
-            <Field label="Total Cargo Weight – VGM (Tons) *">
-              <div className="relative">
-                <Weight className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  type="number"
-                  placeholder="0.00"
-                  value={d.cargoWeight}
-                  onChange={(e) => set("cargoWeight", e.target.value)}
-                  className="pl-9"
-                  min="0"
-                  step="0.01"
-                />
-              </div>
-            </Field>
-          </div>
-        </>
-      )}
-
-      {/* Container section */}
-      {d.cargoType === "container" && (
-        <>
-          <Divider />
-          <div className="space-y-3">
-            <StepLabel>Container Configuration</StepLabel>
-            <div className="grid gap-3 sm:grid-cols-2">
-              {[
-                {
-                  val: "20ft" as const,
-                  label: "20ft Container (TEU)",
-                  limit:
-                    direction === "export"
-                      ? "Max 25t per container"
-                      : "Max 20t per container",
-                },
-                {
-                  val: "40ft" as const,
-                  label: "40ft Container (FEU)",
-                  limit: "Max 32.5t per container",
-                },
-              ].map((ct) => (
-                <OptionCard
-                  key={ct.val}
-                  selected={d.containerType === ct.val}
-                  onClick={() => set("containerType", ct.val)}
-                >
-                  <div className="mb-1 flex items-center gap-2">
-                    <Package className="h-4 w-4 text-primary" />
-                    <p className="font-semibold">{ct.label}</p>
-                  </div>
-                  <p className="text-xs text-muted-foreground">{ct.limit}</p>
-                </OptionCard>
-              ))}
-            </div>
-
-            {direction && (
-              <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                <MapPin className="h-3.5 w-3.5" />
-                Route detected as{" "}
-                <span className="font-medium capitalize text-foreground">
-                  {direction}
-                </span>{" "}
-                workflow
-              </p>
-            )}
-
-            <div className="grid gap-4 sm:grid-cols-2">
-              <Field label="Quantity">
-                <div className="flex items-center gap-2">
-                  <button
-                    type="button"
-                    onClick={() => set("quantity", String(Math.max(1, qty - 1)))}
-                    className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
-                  >
-                    −
-                  </button>
-                  <Input
-                    type="number"
-                    value={d.quantity}
-                    onChange={(e) => set("quantity", e.target.value)}
-                    className="text-center"
-                    min="1"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => set("quantity", String(qty + 1))}
-                    className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
-                  >
-                    +
-                  </button>
-                </div>
-              </Field>
-              <Field label="VGM per Container (Tons) *">
-                <Input
-                  type="number"
-                  placeholder="e.g. 18.5"
-                  value={d.vgm}
-                  onChange={(e) => set("vgm", e.target.value)}
-                  min="0"
-                  step="0.1"
-                />
-              </Field>
-            </div>
-          </div>
-
-          {overweightAlert && (
-            <AlertBox tone="warning">
-              <strong>Overweight Alert:</strong> {overweightAlert}
-            </AlertBox>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-// ── Step 6: Wagon Allocation ───────────────────────────────────────────────────
-
-function Step6({
-  d,
-  set,
-  wagons,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-  wagons: WagonCalcResult | null;
-}) {
-  const qty = parseInt(d.quantity) || 1;
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Wagon Allocation</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          System-calculated wagon requirements based on your container profile.
-        </p>
-      </div>
-
-      {!wagons ? (
-        <AlertBox tone="info">
-          Complete the container configuration in the previous step to see wagon
-          allocation.
-        </AlertBox>
-      ) : (
-        <>
-          <div className="grid gap-3 sm:grid-cols-3">
-            <div className="rounded-xl bg-primary/5 p-4 text-center">
-              <p className="text-3xl font-bold text-primary">
-                {wagons.totalWagons}
-              </p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                Wagons Required
-              </p>
-            </div>
-            <div className="rounded-xl bg-muted p-4 text-center">
-              <p className="text-3xl font-bold">{qty}</p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                {d.containerType} Containers
-              </p>
-            </div>
-            <div className="rounded-xl bg-muted p-4 text-center">
-              <p className="text-3xl font-bold">{wagons.sharedWagons}</p>
-              <p className="mt-1 text-xs text-muted-foreground">Shared Slots</p>
-            </div>
-          </div>
-
-          <div>
-            <StepLabel>Wagon Layout</StepLabel>
-            <div className="mt-2 flex flex-wrap gap-2">
-              {Array.from({ length: wagons.totalWagons }, (_, i) => {
-                const isOdd = wagons.hasOddUnit && i === wagons.totalWagons - 1;
-                return (
-                  <div
-                    key={i}
-                    className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold ${isOdd
-                        ? "border-amber-300 bg-amber-50 text-amber-700"
-                        : "border-primary/30 bg-primary/5 text-primary"
-                      }`}
-                  >
-                    {isOdd
-                      ? `1 × ${d.containerType} (½)`
-                      : d.containerType === "20ft"
-                        ? "2 × 20ft"
-                        : "1 × 40ft"}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          <p className="text-xs text-muted-foreground">
-            Formula:{" "}
-            {d.containerType === "40ft"
-              ? "1 × 40ft = 1 Rail Wagon"
-              : `CEILING(${qty} ÷ 2) = ${wagons.totalWagons} Rail Wagon${wagons.totalWagons > 1 ? "s" : ""} — (2 × 20ft = 1 Wagon)`}
-          </p>
-
-          {wagons.hasOddUnit && (
-            <>
-              <Divider />
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <AlertTriangle className="h-4 w-4 text-amber-500" />
-                  <p className="text-sm font-medium">
-                    Consolidation Option (US-07)
-                  </p>
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  You have 1 unpaired 20ft container. Opt in to share a wagon
-                  slot with another shipper to optimise costs (2 × 20ft = 1
-                  Wagon), or request a dedicated wagon.
-                </p>
-                <div className="grid gap-2 sm:grid-cols-2">
-                  <OptionCard
-                    selected={d.consolidationEnabled}
-                    onClick={() => set("consolidationEnabled", true)}
-                  >
-                    <p className="text-sm font-semibold">Allow Consolidation</p>
-                    <p className="mt-0.5 text-xs text-muted-foreground">
-                      Share a wagon slot — billing split with co-loader.
-                    </p>
-                  </OptionCard>
-                  <OptionCard
-                    selected={!d.consolidationEnabled}
-                    onClick={() => set("consolidationEnabled", false)}
-                  >
-                    <p className="text-sm font-semibold">Dedicated Wagon</p>
-                    <p className="mt-0.5 text-xs text-muted-foreground">
-                      Exclusive slot — standard single-party billing.
-                    </p>
-                  </OptionCard>
-                </div>
-              </div>
-            </>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-// ── Step 7: Compliance Documents ───────────────────────────────────────────────
-
-function Step7Docs({
-  d,
-  set,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-}) {
-  const uploadedRequired = REQUIRED_DOC_KEYS.filter((k) => {
-    const f = d.documents[k];
-    if (!f) return false;
-    return Array.isArray(f) ? f.length > 0 : true;
-  }).length;
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">
-          Compliance Documents
-        </h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Upload your company's legal credentials for EDR contract eligibility
-          verification (US-04).
-        </p>
-      </div>
-
-      <div className="flex items-center gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3">
-        <div
-          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold ${uploadedRequired === REQUIRED_DOC_KEYS.length
-              ? "bg-emerald-100 text-emerald-700"
-              : "bg-primary/10 text-primary"
-            }`}
-        >
-          {uploadedRequired}/{REQUIRED_DOC_KEYS.length}
-        </div>
-        <p className="text-sm text-muted-foreground">
-          {uploadedRequired < REQUIRED_DOC_KEYS.length
-            ? `${REQUIRED_DOC_KEYS.length - uploadedRequired} mandatory document(s) still needed.`
-            : "All mandatory documents uploaded. Power of Attorney is optional."}
-        </p>
-      </div>
-
-      <SmartFileInput
-        file={BOOKING_DOCS_SETTING}
-        value={d.documents}
-        onChange={(val) => set("documents", val)}
-      />
-    </div>
-  );
-}
-
-// ── Step 8: Review & Submit ────────────────────────────────────────────────────
-
-function Step8Review({
-  d,
-  set,
-  setStep,
-  wagons,
-  direction,
-}: {
-  d: FormData;
-  set: <K extends keyof FormData>(k: K, v: FormData[K]) => void;
-  setStep: (n: number) => void;
-  wagons: WagonCalcResult | null;
-  direction: RouteDirection;
-}) {
-  function Row({
-    label,
-    value,
-    target,
-  }: {
-    label: string;
-    value: string;
-    target: number;
-  }) {
-    return (
-      <div className="flex items-start justify-between gap-4 py-2">
-        <div className="min-w-0">
-          <p className="text-xs text-muted-foreground">{label}</p>
-          <p className="mt-0.5 truncate text-sm font-medium">{value || "—"}</p>
-        </div>
-        <button
-          type="button"
-          onClick={() => setStep(target)}
-          className="shrink-0 text-xs font-medium text-primary hover:underline"
-        >
-          Edit
-        </button>
-      </div>
-    );
-  }
-
-  const cargoValue =
-    d.freightType === "bulk"
-      ? `Bulk — ${d.bulkCommodity === "Others" ? d.bulkCommodityOther : d.bulkCommodity}`
-      : d.freightType === "break_bulk"
-        ? `Break-Bulk — ${d.breakBulkType === "Others" ? d.breakBulkTypeOther : d.breakBulkType}`
-        : "";
-
-  const uploadedCount = REQUIRED_DOC_KEYS.filter((k) => {
-    const f = d.documents[k];
-    if (!f) return false;
-    return Array.isArray(f) ? f.length > 0 : true;
-  }).length;
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-xl font-bold tracking-tight">Review & Submit</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Confirm your contract request before sending it for EDR staff review.
-        </p>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2">
-        <Card className="gap-0 py-0 overflow-hidden">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              Contract & Service
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="Type"
-              value={d.contractType === "new" ? "New Contract" : "Renewal"}
-              target={1}
-            />
-            <Row
-              label="Contract ID"
-              value={d.draftContractId || d.previousContractRef}
-              target={1}
-            />
-            <Row
-              label="Service"
-              value={
-                d.serviceType === "rail"
-                  ? "Rail Only"
-                  : d.serviceType === "rail_forwarding"
-                    ? "Rail + Forwarding"
-                    : ""
-              }
-              target={2}
-            />
-          </CardContent>
-        </Card>
-
-        <Card className="gap-0 py-0 overflow-hidden">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              First & Last Mile
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="First Mile"
-              value={d.firstMileEnabled ? d.pickUpAddress : "Not requested"}
-              target={3}
-            />
-            <Row
-              label="Last Mile"
-              value={d.lastMileEnabled ? d.deliveryAddress : "Not requested"}
-              target={3}
-            />
-            <Row
-              label="Equipment Return"
-              value={
-                d.equipmentReturn === "with_return"
-                  ? "With Return"
-                  : "Without Return"
-              }
-              target={3}
-            />
-          </CardContent>
-        </Card>
-
-        <Card className="gap-0 py-0 overflow-hidden">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              Route & Cargo
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="Route"
-              value={`${d.originYard} → ${d.destinationYard}`}
-              target={4}
-            />
-            <Row
-              label="Workflow"
-              value={
-                direction
-                  ? direction.charAt(0).toUpperCase() + direction.slice(1)
-                  : ""
-              }
-              target={4}
-            />
-            <Row
-              label="Weight (VGM)"
-              value={d.cargoWeight ? `${d.cargoWeight} tons` : ""}
-              target={5}
-            />
-            <Row label="Cargo" value={cargoValue} target={5} />
-            <Row
-              label="Modifiers"
-              value={
-                [
-                  d.isHazardous && "Hazardous",
-                  d.isRefrigerated && "Refrigerated",
-                ]
-                  .filter(Boolean)
-                  .join(", ") || "None"
-              }
-              target={4}
-            />
-          </CardContent>
-        </Card>
-
-        <Card className="gap-0 py-0 overflow-hidden">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              Container & Wagons
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="Container"
-              value={`${d.quantity} × ${d.containerType}`}
-              target={5}
-            />
-            <Row
-              label="VGM per Container"
-              value={d.vgm ? `${d.vgm} tons` : ""}
-              target={5}
-            />
-            <Row
-              label="Wagons"
-              value={
-                wagons
-                  ? `${wagons.totalWagons} wagon${wagons.totalWagons > 1 ? "s" : ""}`
-                  : ""
-              }
-              target={6}
-            />
-            <Row
-              label="Documents"
-              value={`${uploadedCount}/${REQUIRED_DOC_KEYS.length} mandatory uploaded`}
-              target={7}
-            />
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="space-y-3">
-        <Label className="text-sm font-medium">Additional Notes</Label>
-        <Textarea
-          placeholder="Any special instructions or notes for EDR operations..."
-          value={d.notes}
-          onChange={(e) => set("notes", e.target.value)}
-          rows={3}
-        />
-      </div>
-
-      <label className="flex cursor-pointer items-start gap-3">
-        <button
-          type="button"
-          role="checkbox"
-          aria-checked={d.termsAccepted}
-          onClick={() => set("termsAccepted", !d.termsAccepted)}
-          className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 transition ${d.termsAccepted ? "border-primary bg-primary" : "border-input"
-            }`}
-        >
-          {d.termsAccepted && (
-            <Check className="h-3 w-3 text-primary-foreground" />
-          )}
-        </button>
-        <span className="text-sm text-muted-foreground">
-          I confirm the information is accurate and agree to EDR's{" "}
-          <span className="text-primary">
-            freight contract terms and conditions
-          </span>
-          .
-        </span>
-      </label>
-    </div>
-  );
-}
-
-// ── Main Page ──────────────────────────────────────────────────────────────────
+import {
+  MOCK_VALID_CONTRACTS,
+  STEPS,
+  bookingFormSchema,
+  calcWagons,
+  getRouteDirection,
+  initialBookingFormValues,
+  stepFields,
+  type BookingFormValues,
+} from "./new-booking-form/schema";
+import { StepIndicator } from "./new-booking-form/StepIndicator";
+import {
+  Step1ContractType,
+  Step2ServiceType,
+  Step3FirstLastMile,
+  Step4Route,
+  Step5CargoDetails,
+  Step6WagonAllocation,
+  Step7Documents,
+  Step8Review,
+} from "./new-booking-form/steps";
 
 export default function NewBookingPage() {
   const navigate = useNavigate();
   const [step, setStep] = useState(1);
-  const [data, setData] = useState<FormData>(INITIAL_DATA);
   const [renewalValidating, setRenewalValidating] = useState(false);
   const [renewalValid, setRenewalValid] = useState<boolean | null>(null);
   const [submitted, setSubmitted] = useState(false);
 
-  const direction = useMemo(
-    () => getRouteDirection(data.originYard, data.destinationYard),
-    [data.originYard, data.destinationYard],
-  );
-  const wagons = useMemo(() => {
-    if (!data.containerType || !data.quantity) return null;
-    return calcWagons(data.containerType, parseInt(data.quantity) || 1);
-  }, [data.containerType, data.quantity]);
+  const form = useForm<BookingFormValues>({
+    resolver: zodResolver(bookingFormSchema),
+    defaultValues: initialBookingFormValues,
+    mode: "onChange",
+  });
 
-  function set<K extends keyof FormData>(k: K, v: FormData[K]) {
-    setData((prev) => ({ ...prev, [k]: v }));
-  }
+  const originYard = form.watch("originYard");
+  const destinationYard = form.watch("destinationYard");
+  const containerType = form.watch("containerType");
+  const quantity = form.watch("quantity");
+  const previousContractRef = form.watch("previousContractRef");
+  const contractId =
+    form.watch("draftContractId") || form.watch("previousContractRef");
+
+  const direction = useMemo(
+    () => getRouteDirection(originYard, destinationYard),
+    [originYard, destinationYard],
+  );
+
+  const wagons = useMemo(() => {
+    if (!containerType || !quantity) return null;
+    return calcWagons(containerType, parseInt(quantity) || 1);
+  }, [containerType, quantity]);
+
+  useEffect(() => {
+    setRenewalValid(null);
+  }, [previousContractRef]);
 
   function validateRenewal() {
+    const previousContractRef = form.getValues("previousContractRef").trim();
+
+    if (!previousContractRef) {
+      form.setError("previousContractRef", {
+        type: "manual",
+        message: "Enter a previous contract reference.",
+      });
+      return;
+    }
+
     setRenewalValidating(true);
     setRenewalValid(null);
     setTimeout(() => {
-      setRenewalValidating(false);
-      setRenewalValid(
-        MOCK_VALID_CONTRACTS.includes(data.previousContractRef.toUpperCase()),
+      const valid = MOCK_VALID_CONTRACTS.includes(
+        previousContractRef.toUpperCase(),
       );
+      setRenewalValidating(false);
+      setRenewalValid(valid);
+      if (!valid) {
+        form.setError("previousContractRef", {
+          type: "manual",
+          message: "Contract Reference Number not found or unauthorized.",
+        });
+      } else {
+        form.clearErrors("previousContractRef");
+      }
     }, 1200);
   }
 
-  function canProceed(): boolean {
-    switch (step) {
-      case 1:
-        if (data.contractType === "new") return !!data.draftContractId;
-        if (data.contractType === "renewal") return renewalValid === true;
-        return false;
-      case 2:
-        return !!data.serviceType;
-      case 3:
-        if (data.firstMileEnabled && !data.pickUpAddress) return false;
-        if (data.lastMileEnabled && !data.deliveryAddress) return false;
-        return true;
-      case 4:
-        if (!data.originYard || !data.destinationYard) return false;
-        return true;
-      case 5:
-        if (!data.cargoType) return false;
-        if (data.cargoType === "bulk") {
-          if (!data.freightType) return false;
-          if (data.freightType === "bulk") {
-            if (!data.bulkCommodity) return false;
-            if (data.bulkCommodity === "Others" && !data.bulkCommodityOther)
-              return false;
-          }
-          if (data.freightType === "break_bulk") {
-            if (!data.breakBulkType) return false;
-            if (data.breakBulkType === "Others" && !data.breakBulkTypeOther)
-              return false;
-          }
-          if (!data.cargoWeight) return false;
-          return true;
-        }
-        return !!(data.containerType && data.quantity && data.vgm);
-      case 6:
-        return true;
-      case 7:
-        return REQUIRED_DOC_KEYS.every((k) => {
-          const f = data.documents[k];
-          if (!f) return false;
-          return Array.isArray(f) ? f.length > 0 : true;
+  async function handleContinue() {
+    const valid = await form.trigger(stepFields[step], { shouldFocus: true });
+    if (!valid) return;
+
+    if (step === 1 && form.getValues("contractType") === "renewal") {
+      if (renewalValid !== true) {
+        form.setError("previousContractRef", {
+          type: "manual",
+          message:
+            "Validate the previous contract reference before continuing.",
         });
-      case 8:
-        return data.termsAccepted;
-      default:
-        return true;
+        return;
+      }
     }
+
+    setStep((currentStep) => Math.min(STEPS.length, currentStep + 1));
   }
 
-  function handleSubmit() {
+  function handleSubmit(data: BookingFormValues) {
+    if (data.contractType === "renewal" && renewalValid !== true) {
+      form.setError("previousContractRef", {
+        type: "manual",
+        message: "Validate the previous contract reference before submitting.",
+      });
+      setStep(1);
+      return;
+    }
+
     setSubmitted(true);
     setTimeout(() => navigate("/bookings"), 2500);
   }
@@ -1561,7 +137,7 @@ export default function NewBookingPage() {
             notified once approved.
           </p>
           <p className="mt-4 font-mono text-sm font-semibold text-primary">
-            {data.draftContractId || data.previousContractRef}
+            {contractId}
           </p>
         </div>
       </div>
@@ -1569,8 +145,11 @@ export default function NewBookingPage() {
   }
 
   return (
-    <div className="flex flex-col">
-      {/* Sticky step indicator */}
+    <form
+      id="new-booking-form"
+      className="flex flex-col"
+      onSubmit={form.handleSubmit(handleSubmit)}
+    >
       <div className="sticky top-0 z-20 border-b border-border bg-background">
         <div className="mx-auto max-w-4xl space-y-3 px-6 py-3">
           <Breadcrumbs
@@ -1579,61 +158,31 @@ export default function NewBookingPage() {
               { label: "New Contract Request" },
             ]}
           />
-          <div className="flex items-center">
-            {STEPS.map((s, idx) => (
-              <Fragment key={s.id}>
-                <div className="flex shrink-0 flex-col items-center gap-1">
-                  <div
-                    className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition-colors ${step > s.id
-                        ? "bg-primary text-primary-foreground"
-                        : step === s.id
-                          ? "border-2 border-primary text-primary"
-                          : "bg-muted text-muted-foreground"
-                      }`}
-                  >
-                    {step > s.id ? <Check className="h-3.5 w-3.5" /> : s.id}
-                  </div>
-                  <span
-                    className={`hidden text-[10px] font-medium lg:block ${step >= s.id ? "text-foreground" : "text-muted-foreground"
-                      }`}
-                  >
-                    {s.short}
-                  </span>
-                </div>
-                {idx < STEPS.length - 1 && (
-                  <div
-                    className={`mx-1 h-0.5 flex-1 rounded-full transition-colors ${step > s.id ? "bg-primary" : "bg-border"
-                      }`}
-                  />
-                )}
-              </Fragment>
-            ))}
-          </div>
+          <StepIndicator step={step} />
         </div>
       </div>
 
-      {/* Content */}
       <div className="flex-1">
         <div className="mx-auto max-w-4xl px-6 py-8">
           {step === 1 && (
-            <Step1
-              d={data}
-              set={set}
+            <Step1ContractType
+              form={form}
               renewalValid={renewalValid}
               renewalValidating={renewalValidating}
               onValidate={validateRenewal}
             />
           )}
-          {step === 2 && <Step2 d={data} set={set} />}
-          {step === 3 && <Step3 d={data} set={set} />}
-          {step === 4 && <Step4 d={data} set={set} />}
-          {step === 5 && <Step5 d={data} set={set} direction={direction} />}
-          {step === 6 && <Step6 d={data} set={set} wagons={wagons} />}
-          {step === 7 && <Step7Docs d={data} set={set} />}
+          {step === 2 && <Step2ServiceType form={form} />}
+          {step === 3 && <Step3FirstLastMile form={form} />}
+          {step === 4 && <Step4Route form={form} />}
+          {step === 5 && (
+            <Step5CargoDetails form={form} direction={direction} />
+          )}
+          {step === 6 && <Step6WagonAllocation form={form} wagons={wagons} />}
+          {step === 7 && <Step7Documents form={form} />}
           {step === 8 && (
             <Step8Review
-              d={data}
-              set={set}
+              form={form}
               setStep={setStep}
               wagons={wagons}
               direction={direction}
@@ -1642,35 +191,32 @@ export default function NewBookingPage() {
         </div>
       </div>
 
-      {/* Sticky footer */}
       <div className="sticky bottom-0 z-20 border-t border-border bg-background px-6 py-4">
         <div className="mx-auto flex max-w-4xl items-center justify-between">
           <Button
+            type="button"
             variant="outline"
-            onClick={() => setStep((s) => Math.max(1, s - 1))}
+            onClick={() =>
+              setStep((currentStep) => Math.max(1, currentStep - 1))
+            }
             disabled={step === 1}
           >
             <ChevronLeft className="mr-1 h-4 w-4" />
             Back
           </Button>
-          <div className="flex items-center gap-3">
-            {step < STEPS.length ? (
-              <Button
-                onClick={() => setStep((s) => s + 1)}
-                disabled={!canProceed()}
-              >
-                Continue
-                <ChevronRight className="ml-1 h-4 w-4" />
-              </Button>
-            ) : (
-              <Button onClick={handleSubmit} disabled={!canProceed()}>
-                <CheckCircle2 className="mr-2 h-4 w-4" />
-                Submit Contract Request
-              </Button>
-            )}
-          </div>
+          {step < STEPS.length ? (
+            <Button type="button" onClick={handleContinue}>
+              Continue
+              <ChevronRight className="ml-1 h-4 w-4" />
+            </Button>
+          ) : (
+            <Button type="submit" form="new-booking-form">
+              <CheckCircle2 className="mr-2 h-4 w-4" />
+              Submit Contract Request
+            </Button>
+          )}
         </div>
       </div>
-    </div>
+    </form>
   );
 }
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/StepIndicator.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/StepIndicator.tsx
new file mode 100644
index 000000000..76ef8e30d
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/StepIndicator.tsx
@@ -0,0 +1,41 @@
+import { Fragment } from "react";
+import { Check } from "lucide-react";
+import { STEPS } from "./schema";
+
+export function StepIndicator({ step }: { step: number }) {
+  return (
+    <div className="flex items-center">
+      {STEPS.map((item, index) => (
+        <Fragment key={item.id}>
+          <div className="flex shrink-0 flex-col items-center gap-1">
+            <div
+              className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition-colors ${
+                step > item.id
+                  ? "bg-primary text-primary-foreground"
+                  : step === item.id
+                    ? "border-2 border-primary text-primary"
+                    : "bg-muted text-muted-foreground"
+              }`}
+            >
+              {step > item.id ? <Check className="h-3.5 w-3.5" /> : item.id}
+            </div>
+            <span
+              className={`hidden text-[10px] font-medium lg:block ${
+                step >= item.id ? "text-foreground" : "text-muted-foreground"
+              }`}
+            >
+              {item.short}
+            </span>
+          </div>
+          {index < STEPS.length - 1 && (
+            <div
+              className={`mx-1 h-0.5 flex-1 rounded-full transition-colors ${
+                step > item.id ? "bg-primary" : "bg-border"
+              }`}
+            />
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
new file mode 100644
index 000000000..a34f716c1
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
@@ -0,0 +1,491 @@
+import * as z from "zod";
+
+export const STATIONS = [
+  "Addis Ababa",
+  "Adama",
+  "Mojo",
+  "Awash",
+  "Mieso",
+  "Dire Dawa",
+  "Aysha",
+  "Ali Sabieh",
+  "Holhol",
+  "Djibouti City",
+] as const;
+
+export const ETHIOPIA_STATIONS = new Set<string>([
+  "Addis Ababa",
+  "Adama",
+  "Mojo",
+  "Awash",
+  "Mieso",
+  "Dire Dawa",
+]);
+
+export const BULK_COMMODITIES = [
+  "Coffee",
+  "Beans",
+  "Fertilizer",
+  "Sugar",
+  "Oil",
+  "Livestock",
+  "Steel",
+  "Others",
+] as const;
+
+export const BREAK_BULK_TYPES = ["Machinery", "Ro-Ro", "Others"] as const;
+
+export const MOCK_VALID_CONTRACTS = [
+  "EDR-2024-10001",
+  "EDR-2024-10002",
+  "EDR-2023-88123",
+  "EDR-2022-55442",
+];
+
+export const REQUIRED_DOC_KEYS = [
+  "tin_certificate",
+  "business_license",
+  "business_registration",
+  "national_id",
+] as const;
+
+export const STEPS = [
+  { id: 1, label: "Contract Type", short: "Contract" },
+  { id: 2, label: "Service Type", short: "Service" },
+  { id: 3, label: "First & Last Mile", short: "Mile" },
+  { id: 4, label: "Route", short: "Route" },
+  { id: 5, label: "Cargo Details", short: "Cargo" },
+  { id: 6, label: "Wagon Allocation", short: "Wagons" },
+  { id: 7, label: "Documents", short: "Docs" },
+  { id: 8, label: "Review & Submit", short: "Submit" },
+] as const;
+
+export const BOOKING_DOCS_SETTING = {
+  id: "booking-compliance",
+  createdAt: "",
+  updatedAt: "",
+  deletedAt: null,
+  code: "booking_compliance_docs",
+  label: "Compliance Documents",
+  description:
+    "Upload your company's legal credentials. All mandatory documents must be submitted before the contract request can be reviewed by EDR Line Staff.",
+  entity: "booking" as const,
+  fields: [
+    {
+      id: "f1",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "booking-compliance",
+      fileKey: "tin_certificate",
+      fileLabel: "TIN Certificate",
+      helpText:
+        "Tax Identification Number certificate issued by ERCA (10-digit TIN).",
+      isRequired: true,
+      isMultiple: false,
+      maxFiles: 1,
+      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+      maxSizeMb: 5,
+      order: 1,
+    },
+    {
+      id: "f2",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "booking-compliance",
+      fileKey: "business_license",
+      fileLabel: "Business / Investment License",
+      helpText:
+        "Current business or investment license issued by the relevant government authority.",
+      isRequired: true,
+      isMultiple: false,
+      maxFiles: 1,
+      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+      maxSizeMb: 5,
+      order: 2,
+    },
+    {
+      id: "f3",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "booking-compliance",
+      fileKey: "business_registration",
+      fileLabel: "Business Registration Certificate",
+      helpText: "Certificate of registration from the relevant authority.",
+      isRequired: true,
+      isMultiple: false,
+      maxFiles: 1,
+      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+      maxSizeMb: 5,
+      order: 3,
+    },
+    {
+      id: "f4",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "booking-compliance",
+      fileKey: "national_id",
+      fileLabel: "National ID / Passport",
+      helpText:
+        "Valid government-issued ID or passport of the authorized signatory.",
+      isRequired: true,
+      isMultiple: false,
+      maxFiles: 1,
+      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+      maxSizeMb: 5,
+      order: 4,
+    },
+    {
+      id: "f5",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: null,
+      settingId: "booking-compliance",
+      fileKey: "power_of_attorney",
+      fileLabel: "Power of Attorney (PoA)",
+      helpText:
+        "Required only if a representative is signing on behalf of the company.",
+      isRequired: false,
+      isMultiple: false,
+      maxFiles: 1,
+      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+      maxSizeMb: 5,
+      order: 5,
+    },
+  ],
+};
+
+const requiredString = (message: string) =>
+  z.string().trim().min(1, { message });
+
+const fileValueSchema = z.union([
+  z.custom<File>(),
+  z.array(z.custom<File>()),
+  z.null(),
+]);
+
+export const bookingFormSchema = z
+  .object({
+    contractType: z.enum(["new", "renewal", ""]),
+    previousContractRef: z.string(),
+    draftContractId: z.string(),
+    serviceType: z.enum(["rail", "rail_forwarding", ""]),
+    firstMileEnabled: z.boolean(),
+    pickUpAddress: z.string(),
+    lastMileEnabled: z.boolean(),
+    deliveryAddress: z.string(),
+    equipmentReturn: z.enum(["with_return", "without_return"]),
+    originYard: z.string(),
+    destinationYard: z.string(),
+    cargoType: z.enum(["container", "bulk", ""]),
+    cargoWeight: z.string(),
+    freightType: z.enum(["bulk", "break_bulk", ""]),
+    bulkCommodity: z.string(),
+    bulkCommodityOther: z.string(),
+    breakBulkType: z.string(),
+    breakBulkTypeOther: z.string(),
+    isHazardous: z.boolean(),
+    isRefrigerated: z.boolean(),
+    containerType: z.enum(["20ft", "40ft", ""]),
+    quantity: z.string(),
+    vgm: z.string(),
+    consolidationEnabled: z.boolean(),
+    documents: z.record(z.string(), fileValueSchema),
+    notes: z.string(),
+    termsAccepted: z.boolean(),
+  })
+  .superRefine((data, ctx) => {
+    if (!data.contractType) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["contractType"],
+        message: "Select a contract type.",
+      });
+    }
+
+    if (data.contractType === "new" && !data.draftContractId.trim()) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["draftContractId"],
+        message: "A draft contract ID is required.",
+      });
+    }
+
+    if (data.contractType === "renewal" && !data.previousContractRef.trim()) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["previousContractRef"],
+        message: "Enter a previous contract reference.",
+      });
+    }
+
+    if (!data.serviceType) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["serviceType"],
+        message: "Select a service type.",
+      });
+    }
+
+    if (data.firstMileEnabled && !data.pickUpAddress.trim()) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["pickUpAddress"],
+        message: "Enter the pick-up address.",
+      });
+    }
+
+    if (data.lastMileEnabled && !data.deliveryAddress.trim()) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["deliveryAddress"],
+        message: "Enter the delivery address.",
+      });
+    }
+
+    if (!data.originYard) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["originYard"],
+        message: "Select an origin yard.",
+      });
+    }
+
+    if (!data.destinationYard) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["destinationYard"],
+        message: "Select a destination yard.",
+      });
+    }
+
+    if (
+      data.originYard &&
+      data.destinationYard &&
+      data.originYard === data.destinationYard
+    ) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["destinationYard"],
+        message: "Destination must be different from origin.",
+      });
+    }
+
+    if (!data.cargoType) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["cargoType"],
+        message: "Select a cargo type.",
+      });
+    }
+
+    if (data.cargoType === "bulk") {
+      if (!data.freightType) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["freightType"],
+          message: "Select a freight type.",
+        });
+      }
+
+      if (data.freightType === "bulk") {
+        if (!data.bulkCommodity) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["bulkCommodity"],
+            message: "Select a commodity.",
+          });
+        }
+        if (
+          data.bulkCommodity === "Others" &&
+          !data.bulkCommodityOther.trim()
+        ) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["bulkCommodityOther"],
+            message: "Specify the commodity.",
+          });
+        }
+      }
+
+      if (data.freightType === "break_bulk") {
+        if (!data.breakBulkType) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["breakBulkType"],
+            message: "Select a break-bulk type.",
+          });
+        }
+        if (
+          data.breakBulkType === "Others" &&
+          !data.breakBulkTypeOther.trim()
+        ) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["breakBulkTypeOther"],
+            message: "Specify the break-bulk type.",
+          });
+        }
+      }
+
+      const cargoWeight = Number(data.cargoWeight);
+      if (!data.cargoWeight || Number.isNaN(cargoWeight) || cargoWeight <= 0) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["cargoWeight"],
+          message: "Enter a cargo weight greater than 0.",
+        });
+      }
+    }
+
+    if (data.cargoType === "container") {
+      if (!data.containerType) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["containerType"],
+          message: "Select a container type.",
+        });
+      }
+
+      const quantity = Number(data.quantity);
+      if (!data.quantity || !Number.isInteger(quantity) || quantity < 1) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["quantity"],
+          message: "Enter at least 1 container.",
+        });
+      }
+
+      const vgm = Number(data.vgm);
+      if (!data.vgm || Number.isNaN(vgm) || vgm <= 0) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["vgm"],
+          message: "Enter VGM greater than 0.",
+        });
+      }
+    }
+
+    for (const key of REQUIRED_DOC_KEYS) {
+      const value = data.documents[key];
+      const hasFile = Array.isArray(value) ? value.length > 0 : Boolean(value);
+      if (!hasFile) {
+        ctx.addIssue({
+          code: "custom",
+          path: ["documents", key],
+          message: "Upload this required document.",
+        });
+      }
+    }
+
+    if (!data.termsAccepted) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["termsAccepted"],
+        message: "Accept the freight contract terms to submit.",
+      });
+    }
+  });
+
+export type BookingFormValues = z.infer<typeof bookingFormSchema>;
+
+export const initialBookingFormValues: BookingFormValues = {
+  contractType: "",
+  previousContractRef: "",
+  draftContractId: "",
+  serviceType: "",
+  firstMileEnabled: false,
+  pickUpAddress: "",
+  lastMileEnabled: false,
+  deliveryAddress: "",
+  equipmentReturn: "with_return",
+  originYard: "",
+  destinationYard: "",
+  cargoType: "",
+  cargoWeight: "",
+  freightType: "",
+  bulkCommodity: "",
+  bulkCommodityOther: "",
+  breakBulkType: "",
+  breakBulkTypeOther: "",
+  isHazardous: false,
+  isRefrigerated: false,
+  containerType: "",
+  quantity: "1",
+  vgm: "",
+  consolidationEnabled: false,
+  documents: {},
+  notes: "",
+  termsAccepted: false,
+};
+
+export const stepFields: Record<number, Array<keyof BookingFormValues>> = {
+  1: ["contractType", "previousContractRef", "draftContractId"],
+  2: ["serviceType"],
+  3: [
+    "firstMileEnabled",
+    "pickUpAddress",
+    "lastMileEnabled",
+    "deliveryAddress",
+    "equipmentReturn",
+  ],
+  4: ["originYard", "destinationYard", "isHazardous", "isRefrigerated"],
+  5: [
+    "cargoType",
+    "cargoWeight",
+    "freightType",
+    "bulkCommodity",
+    "bulkCommodityOther",
+    "breakBulkType",
+    "breakBulkTypeOther",
+    "containerType",
+    "quantity",
+    "vgm",
+  ],
+  6: ["consolidationEnabled"],
+  7: ["documents"],
+  8: ["notes", "termsAccepted"],
+};
+
+export type RouteDirection = "import" | "export" | "domestic" | null;
+
+export interface WagonCalcResult {
+  totalWagons: number;
+  hasOddUnit: boolean;
+  sharedWagons: number;
+}
+
+export function genContractId(): string {
+  const yr = new Date().getFullYear();
+  const n = Math.floor(10000 + Math.random() * 90000);
+  return `EDR-DRAFT-${yr}-${n}`;
+}
+
+export function getRouteDirection(
+  origin: string,
+  dest: string,
+): RouteDirection {
+  if (!origin || !dest) return null;
+  const oEth = ETHIOPIA_STATIONS.has(origin);
+  const dEth = ETHIOPIA_STATIONS.has(dest);
+  if (oEth && !dEth) return "export";
+  if (!oEth && dEth) return "import";
+  if (oEth && dEth) return "domestic";
+  return null;
+}
+
+export function calcWagons(
+  type: BookingFormValues["containerType"],
+  qty: number,
+): WagonCalcResult {
+  if (type === "40ft") {
+    return { totalWagons: qty, hasOddUnit: false, sharedWagons: qty };
+  }
+
+  const pairs = Math.floor(qty / 2);
+  const odd = qty % 2;
+  return { totalWagons: pairs + odd, hasOddUnit: odd > 0, sharedWagons: pairs };
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx
new file mode 100644
index 000000000..298381ba0
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx
@@ -0,0 +1,157 @@
+import type { ReactNode } from "react";
+import type {
+  ControllerRenderProps,
+  FieldError as RhfFieldError,
+} from "react-hook-form";
+import {
+  AlertTriangle,
+  Check,
+  CheckCircle2,
+  Info,
+  XCircle,
+} from "lucide-react";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@edr/ui-common";
+import type { BookingFormValues } from "./schema";
+import { cn } from "@/lib/utils";
+
+export function OptionCard({
+  selected,
+  onClick,
+  disabled,
+  children,
+}: {
+  selected: boolean;
+  onClick?: () => void;
+  disabled?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={`relative w-full rounded-xl border-2 p-4 text-left transition ${disabled
+          ? "cursor-not-allowed border-border bg-muted opacity-60"
+          : selected
+            ? "border-primary bg-primary/5"
+            : "border-border bg-card hover:border-primary/40"
+        }`}
+    >
+      {selected && !disabled && (
+        <span className="absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary">
+          <Check className="h-3 w-3 text-primary-foreground" />
+        </span>
+      )}
+      {children}
+    </button>
+  );
+}
+
+export function AlertBox({
+  tone,
+  children,
+}: {
+  tone: "warning" | "error" | "success" | "info";
+  children: ReactNode;
+}) {
+  const styles = {
+    warning: "bg-amber-50 border-amber-200 text-amber-800",
+    error: "bg-red-50 border-red-200 text-red-800",
+    success: "bg-emerald-50 border-emerald-200 text-emerald-800",
+    info: "bg-sky-50 border-sky-200 text-sky-800",
+  };
+  const icons = {
+    warning: <AlertTriangle className="h-4 w-4 shrink-0 text-amber-500" />,
+    error: <XCircle className="h-4 w-4 shrink-0 text-red-500" />,
+    success: <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-600" />,
+    info: <Info className="h-4 w-4 shrink-0 text-sky-500" />,
+  };
+
+  return (
+    <div
+      className={`flex items-start gap-3 rounded-xl border p-3 text-sm ${styles[tone]}`}
+    >
+      {icons[tone]}
+      <div>{children}</div>
+    </div>
+  );
+}
+
+export function StepLabel({ children }: { children: ReactNode }) {
+  return (
+    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+      {children}
+    </p>
+  );
+}
+
+export function StepHeader({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div>
+      <h2 className="text-xl font-bold tracking-tight">{title}</h2>
+      <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+    </div>
+  );
+}
+
+export function SelectField({
+  field,
+  error,
+  label,
+  placeholder,
+  children,
+}: {
+  field: ControllerRenderProps<BookingFormValues>;
+  error?: RhfFieldError;
+  label: string;
+  placeholder: string;
+  children: ReactNode;
+}) {
+  return (
+    <Field data-invalid={Boolean(error)}>
+      <FieldLabel>{label}</FieldLabel>
+      <Select value={String(field.value)} onValueChange={field.onChange}>
+        <SelectTrigger
+          className={cn("w-full ", error ? "border-destructive!" : "")}
+          aria-invalid={Boolean(error)}
+        >
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>{children}</SelectContent>
+      </Select>
+      <FieldError errors={[error]} />
+    </Field>
+  );
+}
+
+export function SelectOptions({ options }: { options: readonly string[] }) {
+  return (
+    <>
+      {options.map((option) => (
+        <SelectItem key={option} value={option}>
+          {option}
+        </SelectItem>
+      ))}
+    </>
+  );
+}
+
+export function FormFieldDescription({ children }: { children: ReactNode }) {
+  return <FieldDescription>{children}</FieldDescription>;
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx
new file mode 100644
index 000000000..8ad06f17f
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx
@@ -0,0 +1,1303 @@
+import { Controller, type UseFormReturn } from "react-hook-form";
+import {
+  AlertTriangle,
+  Check,
+  FileText,
+  Flame,
+  Loader2,
+  MapPin,
+  Package,
+  RefreshCw,
+  Snowflake,
+  Train,
+  Weight,
+} from "lucide-react";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Field,
+  FieldError,
+  FieldLabel,
+  Input,
+  Separator,
+  SmartFileInput,
+  Switch,
+  Textarea,
+} from "@edr/ui-common";
+import {
+  BOOKING_DOCS_SETTING,
+  BREAK_BULK_TYPES,
+  BULK_COMMODITIES,
+  REQUIRED_DOC_KEYS,
+  STATIONS,
+  genContractId,
+  getRouteDirection,
+  type BookingFormValues,
+  type RouteDirection,
+  type WagonCalcResult,
+} from "./schema";
+import {
+  AlertBox,
+  OptionCard,
+  SelectField,
+  SelectOptions,
+  StepHeader,
+  StepLabel,
+} from "./shared";
+
+type BookingForm = UseFormReturn<BookingFormValues>;
+
+function getUploadedRequiredCount(documents: BookingFormValues["documents"]) {
+  return REQUIRED_DOC_KEYS.filter((key) => {
+    const file = documents[key];
+    return Array.isArray(file) ? file.length > 0 : Boolean(file);
+  }).length;
+}
+
+function OptionFieldError({ error }: { error?: { message?: string } }) {
+  return <FieldError errors={[error]} />;
+}
+
+export function Step1ContractType({
+  form,
+  renewalValid,
+  renewalValidating,
+  onValidate,
+}: {
+  form: BookingForm;
+  renewalValid: boolean | null;
+  renewalValidating: boolean;
+  onValidate: () => void;
+}) {
+  const contractType = form.watch("contractType");
+  const draftContractId = form.watch("draftContractId");
+  const previousContractRef = form.watch("previousContractRef");
+  const errors = form.formState.errors;
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Contract Type"
+        description="New contract or renewal of an existing one."
+      />
+
+      <Controller
+        name="contractType"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <div className="grid gap-3 md:grid-cols-2">
+              <OptionCard
+                selected={field.value === "new"}
+                onClick={() => {
+                  field.onChange("new");
+                  form.clearErrors(["contractType", "previousContractRef"]);
+                  if (!draftContractId) {
+                    form.setValue("draftContractId", genContractId(), {
+                      shouldDirty: true,
+                      shouldValidate: true,
+                    });
+                  }
+                }}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
+                  <FileText className="h-4 w-4 text-primary" />
+                </div>
+                <p className="font-semibold">New Contract</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Blank contract form. A draft ID is auto-generated.
+                </p>
+                {field.value === "new" && draftContractId && (
+                  <p className="mt-2 font-mono text-xs font-semibold text-primary">
+                    {draftContractId}
+                  </p>
+                )}
+              </OptionCard>
+
+              <OptionCard
+                selected={field.value === "renewal"}
+                onClick={() => {
+                  field.onChange("renewal");
+                  form.clearErrors("contractType");
+                }}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100">
+                  <RefreshCw className="h-4 w-4 text-sky-600" />
+                </div>
+                <p className="font-semibold">Contract Renewal</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Enter a previous reference to auto-populate historical
+                  parameters.
+                </p>
+              </OptionCard>
+            </div>
+            <OptionFieldError error={fieldState.error} />
+          </Field>
+        )}
+      />
+
+      {contractType === "renewal" && (
+        <div className="space-y-3 pt-1">
+          <Controller
+            name="previousContractRef"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel htmlFor="previousContractRef">
+                  Previous Contract Reference Number
+                </FieldLabel>
+                <div className="flex gap-2">
+                  <Input
+                    {...field}
+                    id="previousContractRef"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="e.g. EDR-2024-10001"
+                    className="font-mono"
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={onValidate}
+                    disabled={!previousContractRef || renewalValidating}
+                  >
+                    {renewalValidating ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      "Validate"
+                    )}
+                  </Button>
+                </div>
+                <FieldError
+                  errors={[fieldState.error, errors.draftContractId]}
+                />
+              </Field>
+            )}
+          />
+          {renewalValid === true && (
+            <AlertBox tone="success">
+              <strong>Contract found.</strong> Company details, route, and wagon
+              preferences will be pre-filled.
+            </AlertBox>
+          )}
+          {renewalValid === false && (
+            <AlertBox tone="error">
+              Contract Reference Number not found or unauthorized. Try{" "}
+              <span className="font-mono">EDR-2024-10001</span>.
+            </AlertBox>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function Step2ServiceType({ form }: { form: BookingForm }) {
+  const serviceType = form.watch("serviceType");
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Service Type"
+        description="Select the service combination you require."
+      />
+
+      <Controller
+        name="serviceType"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <div className="grid gap-3 md:grid-cols-2">
+              <OptionCard
+                selected={serviceType === "rail"}
+                onClick={() => field.onChange("rail")}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100">
+                  <Train className="h-4 w-4 text-indigo-600" />
+                </div>
+                <p className="font-semibold">Rail Transport Only</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Rail transport along the EDR corridor, with optional
+                  first/last mile trucking.
+                </p>
+                <Badge className="mt-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-100">
+                  Option A
+                </Badge>
+              </OptionCard>
+
+              <OptionCard
+                selected={serviceType === "rail_forwarding"}
+                onClick={() => field.onChange("rail_forwarding")}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
+                  <Package className="h-4 w-4 text-primary" />
+                </div>
+                <p className="font-semibold">
+                  Rail Transport & Freight Forwarding
+                </p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Rail transport plus documentation, customs liaison, and a
+                  dedicated coordinator.
+                </p>
+                <Badge className="mt-2 bg-emerald-100 text-emerald-700 hover:bg-emerald-100">
+                  Option B
+                </Badge>
+              </OptionCard>
+            </div>
+            <OptionFieldError error={fieldState.error} />
+          </Field>
+        )}
+      />
+
+      <p className="text-xs text-muted-foreground">
+        Customs and Clearance Service cannot be selected independently. It must
+        be bundled with a Rail Transport service.
+      </p>
+    </div>
+  );
+}
+
+export function Step3FirstLastMile({ form }: { form: BookingForm }) {
+  const firstMileEnabled = form.watch("firstMileEnabled");
+  const lastMileEnabled = form.watch("lastMileEnabled");
+  const equipmentReturn = form.watch("equipmentReturn");
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="First & Last Mile"
+        description="Configure trucking and container return options."
+      />
+
+      <div className="divide-y divide-border rounded-xl border border-border">
+        <div className="p-4">
+          <Controller
+            name="firstMileEnabled"
+            control={form.control}
+            render={({ field }) => (
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <p className="text-sm font-medium">First Mile - Pick-up</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Truck pick-up from your premises to the origin rail yard.
+                  </p>
+                </div>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={(value) => {
+                    field.onChange(value);
+                    if (!value) {
+                      form.setValue("pickUpAddress", "", {
+                        shouldDirty: true,
+                        shouldValidate: true,
+                      });
+                    }
+                  }}
+                />
+              </div>
+            )}
+          />
+          {firstMileEnabled && (
+            <Controller
+              name="pickUpAddress"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field className="mt-3" data-invalid={fieldState.invalid}>
+                  <Input
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Pick-up address *"
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+          )}
+        </div>
+
+        <div className="p-4">
+          <Controller
+            name="lastMileEnabled"
+            control={form.control}
+            render={({ field }) => (
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <p className="text-sm font-medium">Last Mile - Delivery</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Truck delivery from the destination rail yard to the final
+                    address.
+                  </p>
+                </div>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={(value) => {
+                    field.onChange(value);
+                    if (!value) {
+                      form.setValue("deliveryAddress", "", {
+                        shouldDirty: true,
+                        shouldValidate: true,
+                      });
+                    }
+                  }}
+                />
+              </div>
+            )}
+          />
+          {lastMileEnabled && (
+            <Controller
+              name="deliveryAddress"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field className="mt-3" data-invalid={fieldState.invalid}>
+                  <Input
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Delivery address *"
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+          )}
+        </div>
+
+        <div className="p-4">
+          <p className="mb-3 text-sm font-medium">Equipment Return</p>
+          <p className="mb-3 text-xs text-muted-foreground">
+            Declare whether the container asset will be returned after
+            unloading.
+          </p>
+          <Controller
+            name="equipmentReturn"
+            control={form.control}
+            render={({ field }) => (
+              <div className="grid gap-2 sm:grid-cols-2">
+                <OptionCard
+                  selected={equipmentReturn === "with_return"}
+                  onClick={() => field.onChange("with_return")}
+                >
+                  <p className="text-sm font-semibold">With Return</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Container returned to EDR after unloading.
+                  </p>
+                </OptionCard>
+                <OptionCard
+                  selected={equipmentReturn === "without_return"}
+                  onClick={() => field.onChange("without_return")}
+                >
+                  <p className="text-sm font-semibold">Without Return</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Container retained by the customer after delivery.
+                  </p>
+                </OptionCard>
+              </div>
+            )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Step4Route({ form }: { form: BookingForm }) {
+  const originYard = form.watch("originYard");
+  const destinationYard = form.watch("destinationYard");
+  const direction = getRouteDirection(originYard, destinationYard);
+  const directionStyle: Record<string, string> = {
+    export: "bg-sky-50 text-sky-800 border-sky-200",
+    import: "bg-amber-50 text-amber-800 border-amber-200",
+    domestic: "bg-muted text-muted-foreground border-border",
+  };
+  const directionLabel: Record<string, string> = {
+    export: "Export workflow (Ethiopia to Djibouti)",
+    import: "Import workflow (Djibouti to Ethiopia)",
+    domestic: "Domestic corridor",
+  };
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Route"
+        description="Select the origin and destination yards."
+      />
+
+      <div className="space-y-3">
+        <StepLabel>Route</StepLabel>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <Controller
+            name="originYard"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <SelectField
+                field={field}
+                error={fieldState.error}
+                label="Origin Yard*"
+                placeholder="Select origin..."
+              >
+                <SelectOptions
+                  options={STATIONS.filter((s) => s !== destinationYard)}
+                />
+              </SelectField>
+            )}
+          />
+          <Controller
+            name="destinationYard"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <SelectField
+                field={field}
+                error={fieldState.error}
+                label="Destination Yard *"
+                placeholder="Select destination..."
+              >
+                <SelectOptions
+                  options={STATIONS.filter((s) => s !== originYard)}
+                />
+              </SelectField>
+            )}
+          />
+        </div>
+        {direction && (
+          <div
+            className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium ${directionStyle[direction]}`}
+          >
+            <MapPin className="h-3.5 w-3.5 shrink-0" />
+            {directionLabel[direction]}
+          </div>
+        )}
+      </div>
+
+      <Separator />
+
+      <div className="space-y-0 divide-y divide-border">
+        <Controller
+          name="isHazardous"
+          control={form.control}
+          render={({ field }) => (
+            <div className="flex items-center justify-between py-3">
+              <div className="flex items-center gap-3">
+                <Flame className="h-4 w-4 shrink-0 text-red-500" />
+                <div>
+                  <p className="text-sm font-medium">Hazardous Material</p>
+                  <p className="text-xs text-muted-foreground">
+                    Applies a Hazard Surcharge to the final bill.
+                  </p>
+                </div>
+              </div>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </div>
+          )}
+        />
+        <Controller
+          name="isRefrigerated"
+          control={form.control}
+          render={({ field }) => (
+            <div className="flex items-center justify-between py-3">
+              <div className="flex items-center gap-3">
+                <Snowflake className="h-4 w-4 shrink-0 text-sky-500" />
+                <div>
+                  <p className="text-sm font-medium">Refrigerated Cargo</p>
+                  <p className="text-xs text-muted-foreground">
+                    Temperature-controlled transport applies a Refrigerator
+                    Surcharge.
+                  </p>
+                </div>
+              </div>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </div>
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function Step5CargoDetails({
+  form,
+  direction,
+}: {
+  form: BookingForm;
+  direction: RouteDirection;
+}) {
+  const cargoType = form.watch("cargoType");
+  const freightType = form.watch("freightType");
+  const bulkCommodity = form.watch("bulkCommodity");
+  const breakBulkType = form.watch("breakBulkType");
+  const containerType = form.watch("containerType");
+  const quantityValue = form.watch("quantity");
+  const vgmValue = form.watch("vgm");
+  const qty = parseInt(quantityValue) || 1;
+  const vgm = parseFloat(vgmValue) || 0;
+
+  let overweightAlert: string | null = null;
+  if (containerType === "20ft" && vgm > 0) {
+    const limit = direction === "export" ? 25 : 20;
+    if (vgm > limit) {
+      overweightAlert = `VGM ${vgm}t exceeds the ${limit}t ${direction ?? "standard"} limit for a 20ft container. An Overweight Surcharge will apply.`;
+    }
+  }
+  if (containerType === "40ft" && vgm > 32.5) {
+    overweightAlert = `VGM ${vgm}t exceeds the 32.5t global limit for a 40ft container. An Overweight Surcharge will apply.`;
+  }
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Cargo Details"
+        description="Define your cargo type, weight, and container configuration."
+      />
+
+      <div className="space-y-3">
+        <StepLabel>Cargo Type *</StepLabel>
+        <Controller
+          name="cargoType"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <div className="grid gap-3 sm:grid-cols-2">
+                <OptionCard
+                  selected={cargoType === "container"}
+                  onClick={() => {
+                    field.onChange("container");
+                    form.setValue("freightType", "", { shouldDirty: true });
+                    form.setValue("cargoWeight", "", { shouldDirty: true });
+                  }}
+                >
+                  <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
+                    <Package className="h-4 w-4 text-primary" />
+                  </div>
+                  <p className="font-semibold">Container</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Pre-packed containerized cargo (20ft / 40ft).
+                  </p>
+                </OptionCard>
+                <OptionCard
+                  selected={cargoType === "bulk"}
+                  onClick={() => {
+                    field.onChange("bulk");
+                    form.setValue("containerType", "", { shouldDirty: true });
+                    form.setValue("vgm", "", { shouldDirty: true });
+                  }}
+                >
+                  <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100">
+                    <Weight className="h-4 w-4 text-amber-600" />
+                  </div>
+                  <p className="font-semibold">Bulk</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Bulk commodities or break-bulk cargo.
+                  </p>
+                </OptionCard>
+              </div>
+              <FieldError errors={[fieldState.error]} />
+            </Field>
+          )}
+        />
+      </div>
+
+      {cargoType === "bulk" && (
+        <>
+          <Separator />
+          <div className="space-y-3">
+            <StepLabel>Freight Type *</StepLabel>
+            <Controller
+              name="freightType"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <OptionCard
+                      selected={freightType === "bulk"}
+                      onClick={() => field.onChange("bulk")}
+                    >
+                      <p className="font-semibold">Bulk</p>
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        Coffee, fertilizer, grain, ore, etc.
+                      </p>
+                    </OptionCard>
+                    <OptionCard
+                      selected={freightType === "break_bulk"}
+                      onClick={() => field.onChange("break_bulk")}
+                    >
+                      <p className="font-semibold">Break-Bulk</p>
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        Machinery, vehicles, project cargo, etc.
+                      </p>
+                    </OptionCard>
+                  </div>
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+
+            {freightType === "bulk" && (
+              <div className="space-y-2">
+                <Controller
+                  name="bulkCommodity"
+                  control={form.control}
+                  render={({ field, fieldState }) => (
+                    <SelectField
+                      field={field}
+                      error={fieldState.error}
+                      label="Commodity *"
+                      placeholder="Select commodity *"
+                    >
+                      <SelectOptions options={BULK_COMMODITIES} />
+                    </SelectField>
+                  )}
+                />
+                {bulkCommodity === "Others" && (
+                  <Controller
+                    name="bulkCommodityOther"
+                    control={form.control}
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <Input
+                          {...field}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="Specify commodity *"
+                        />
+                        <FieldError errors={[fieldState.error]} />
+                      </Field>
+                    )}
+                  />
+                )}
+              </div>
+            )}
+
+            {freightType === "break_bulk" && (
+              <div className="space-y-2">
+                <Controller
+                  name="breakBulkType"
+                  control={form.control}
+                  render={({ field, fieldState }) => (
+                    <SelectField
+                      field={field}
+                      error={fieldState.error}
+                      label="Break-bulk type *"
+                      placeholder="Select type *"
+                    >
+                      <SelectOptions options={BREAK_BULK_TYPES} />
+                    </SelectField>
+                  )}
+                />
+                {breakBulkType === "Others" && (
+                  <Controller
+                    name="breakBulkTypeOther"
+                    control={form.control}
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <Input
+                          {...field}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="Specify break-bulk type *"
+                        />
+                        <FieldError errors={[fieldState.error]} />
+                      </Field>
+                    )}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+
+          <Separator />
+
+          <div className="space-y-3">
+            <StepLabel>Weight</StepLabel>
+            <Controller
+              name="cargoWeight"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="cargoWeight">
+                    Total Cargo Weight - VGM (Tons) *
+                  </FieldLabel>
+                  <div className="relative">
+                    <Weight className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      {...field}
+                      id="cargoWeight"
+                      type="number"
+                      aria-invalid={fieldState.invalid}
+                      placeholder="0.00"
+                      className="pl-9"
+                      min="0"
+                      step="0.01"
+                    />
+                  </div>
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+          </div>
+        </>
+      )}
+
+      {cargoType === "container" && (
+        <>
+          <Separator />
+          <div className="space-y-3">
+            <StepLabel>Container Configuration</StepLabel>
+            <Controller
+              name="containerType"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {[
+                      {
+                        val: "20ft" as const,
+                        label: "20ft Container (TEU)",
+                        limit:
+                          direction === "export"
+                            ? "Max 25t per container"
+                            : "Max 20t per container",
+                      },
+                      {
+                        val: "40ft" as const,
+                        label: "40ft Container (FEU)",
+                        limit: "Max 32.5t per container",
+                      },
+                    ].map((ct) => (
+                      <OptionCard
+                        key={ct.val}
+                        selected={containerType === ct.val}
+                        onClick={() => field.onChange(ct.val)}
+                      >
+                        <div className="mb-1 flex items-center gap-2">
+                          <Package className="h-4 w-4 text-primary" />
+                          <p className="font-semibold">{ct.label}</p>
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          {ct.limit}
+                        </p>
+                      </OptionCard>
+                    ))}
+                  </div>
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+
+            {direction && (
+              <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <MapPin className="h-3.5 w-3.5" />
+                Route detected as{" "}
+                <span className="font-medium capitalize text-foreground">
+                  {direction}
+                </span>{" "}
+                workflow
+              </p>
+            )}
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Controller
+                name="quantity"
+                control={form.control}
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor="quantity">Quantity</FieldLabel>
+                    <div className="flex items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={() =>
+                          field.onChange(String(Math.max(1, qty - 1)))
+                        }
+                        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
+                      >
+                        -
+                      </button>
+                      <Input
+                        {...field}
+                        id="quantity"
+                        type="number"
+                        aria-invalid={fieldState.invalid}
+                        className="text-center"
+                        min="1"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => field.onChange(String(qty + 1))}
+                        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
+                      >
+                        +
+                      </button>
+                    </div>
+                    <FieldError errors={[fieldState.error]} />
+                  </Field>
+                )}
+              />
+              <Controller
+                name="vgm"
+                control={form.control}
+                render={({ field, fieldState }) => (
+                  <Field data-invalid={fieldState.invalid}>
+                    <FieldLabel htmlFor="vgm">
+                      VGM per Container (Tons) *
+                    </FieldLabel>
+                    <Input
+                      {...field}
+                      id="vgm"
+                      type="number"
+                      aria-invalid={fieldState.invalid}
+                      placeholder="e.g. 18.5"
+                      min="0"
+                      step="0.1"
+                    />
+                    <FieldError errors={[fieldState.error]} />
+                  </Field>
+                )}
+              />
+            </div>
+          </div>
+
+          {overweightAlert && (
+            <AlertBox tone="warning">
+              <strong>Overweight Alert:</strong> {overweightAlert}
+            </AlertBox>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function Step6WagonAllocation({
+  form,
+  wagons,
+}: {
+  form: BookingForm;
+  wagons: WagonCalcResult | null;
+}) {
+  const quantity = parseInt(form.watch("quantity")) || 1;
+  const containerType = form.watch("containerType");
+  const consolidationEnabled = form.watch("consolidationEnabled");
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Wagon Allocation"
+        description="System-calculated wagon requirements based on your container profile."
+      />
+
+      {!wagons ? (
+        <AlertBox tone="info">
+          Complete the container configuration in the previous step to see wagon
+          allocation.
+        </AlertBox>
+      ) : (
+        <>
+          <div className="grid gap-3 sm:grid-cols-3">
+            <div className="rounded-xl bg-primary/5 p-4 text-center">
+              <p className="text-3xl font-bold text-primary">
+                {wagons.totalWagons}
+              </p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                Wagons Required
+              </p>
+            </div>
+            <div className="rounded-xl bg-muted p-4 text-center">
+              <p className="text-3xl font-bold">{quantity}</p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {containerType} Containers
+              </p>
+            </div>
+            <div className="rounded-xl bg-muted p-4 text-center">
+              <p className="text-3xl font-bold">{wagons.sharedWagons}</p>
+              <p className="mt-1 text-xs text-muted-foreground">Shared Slots</p>
+            </div>
+          </div>
+
+          <div>
+            <StepLabel>Wagon Layout</StepLabel>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {Array.from({ length: wagons.totalWagons }, (_, index) => {
+                const isOdd =
+                  wagons.hasOddUnit && index === wagons.totalWagons - 1;
+                return (
+                  <div
+                    key={index}
+                    className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold ${isOdd
+                        ? "border-amber-300 bg-amber-50 text-amber-700"
+                        : "border-primary/30 bg-primary/5 text-primary"
+                      }`}
+                  >
+                    {isOdd
+                      ? `1 x ${containerType} (1/2)`
+                      : containerType === "20ft"
+                        ? "2 x 20ft"
+                        : "1 x 40ft"}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            Formula:{" "}
+            {containerType === "40ft"
+              ? "1 x 40ft = 1 Rail Wagon"
+              : `CEILING(${quantity} / 2) = ${wagons.totalWagons} Rail Wagon${wagons.totalWagons > 1 ? "s" : ""} - (2 x 20ft = 1 Wagon)`}
+          </p>
+
+          {wagons.hasOddUnit && (
+            <>
+              <Separator />
+              <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <AlertTriangle className="h-4 w-4 text-amber-500" />
+                  <p className="text-sm font-medium">
+                    Consolidation Option (US-07)
+                  </p>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  You have 1 unpaired 20ft container. Opt in to share a wagon
+                  slot with another shipper to optimise costs, or request a
+                  dedicated wagon.
+                </p>
+                <Controller
+                  name="consolidationEnabled"
+                  control={form.control}
+                  render={({ field }) => (
+                    <div className="grid gap-2 sm:grid-cols-2">
+                      <OptionCard
+                        selected={consolidationEnabled}
+                        onClick={() => field.onChange(true)}
+                      >
+                        <p className="text-sm font-semibold">
+                          Allow Consolidation
+                        </p>
+                        <p className="mt-0.5 text-xs text-muted-foreground">
+                          Share a wagon slot. Billing split with co-loader.
+                        </p>
+                      </OptionCard>
+                      <OptionCard
+                        selected={!consolidationEnabled}
+                        onClick={() => field.onChange(false)}
+                      >
+                        <p className="text-sm font-semibold">Dedicated Wagon</p>
+                        <p className="mt-0.5 text-xs text-muted-foreground">
+                          Exclusive slot. Standard single-party billing.
+                        </p>
+                      </OptionCard>
+                    </div>
+                  )}
+                />
+              </div>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function Step7Documents({ form }: { form: BookingForm }) {
+  const documents = form.watch("documents");
+  const uploadedRequired = getUploadedRequiredCount(documents);
+  const documentErrors = form.formState.errors.documents as
+    | Record<string, { message?: string }>
+    | undefined;
+  const smartFileErrors = Object.fromEntries(
+    Object.entries(documentErrors ?? {}).map(([key, value]) => [
+      key,
+      value?.message ?? "",
+    ]),
+  );
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Compliance Documents"
+        description="Upload your company's legal credentials for EDR contract eligibility verification (US-04)."
+      />
+
+      <div className="flex items-center gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3">
+        <div
+          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold ${uploadedRequired === REQUIRED_DOC_KEYS.length
+              ? "bg-emerald-100 text-emerald-700"
+              : "bg-primary/10 text-primary"
+            }`}
+        >
+          {uploadedRequired}/{REQUIRED_DOC_KEYS.length}
+        </div>
+        <p className="text-sm text-muted-foreground">
+          {uploadedRequired < REQUIRED_DOC_KEYS.length
+            ? `${REQUIRED_DOC_KEYS.length - uploadedRequired} mandatory document(s) still needed.`
+            : "All mandatory documents uploaded. Power of Attorney is optional."}
+        </p>
+      </div>
+
+      <Controller
+        name="documents"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <SmartFileInput
+              file={BOOKING_DOCS_SETTING}
+              value={field.value}
+              onChange={(value) => field.onChange(value)}
+              errors={smartFileErrors}
+            />
+            <FieldError errors={[fieldState.error]} />
+          </Field>
+        )}
+      />
+    </div>
+  );
+}
+
+export function Step8Review({
+  form,
+  setStep,
+  wagons,
+  direction,
+}: {
+  form: BookingForm;
+  setStep: (step: number) => void;
+  wagons: WagonCalcResult | null;
+  direction: RouteDirection;
+}) {
+  const values = form.watch();
+  const errors = form.formState.errors;
+
+  function Row({
+    label,
+    value,
+    target,
+  }: {
+    label: string;
+    value: string;
+    target: number;
+  }) {
+    return (
+      <div className="flex items-start justify-between gap-4 py-2">
+        <div className="min-w-0">
+          <p className="text-xs text-muted-foreground">{label}</p>
+          <p className="mt-0.5 truncate text-sm font-medium">{value || "-"}</p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setStep(target)}
+          className="shrink-0 text-xs font-medium text-primary hover:underline"
+        >
+          Edit
+        </button>
+      </div>
+    );
+  }
+
+  const cargoValue =
+    values.cargoType === "container"
+      ? `${values.quantity} x ${values.containerType}`
+      : values.freightType === "bulk"
+        ? `Bulk - ${values.bulkCommodity === "Others" ? values.bulkCommodityOther : values.bulkCommodity}`
+        : values.freightType === "break_bulk"
+          ? `Break-Bulk - ${values.breakBulkType === "Others" ? values.breakBulkTypeOther : values.breakBulkType}`
+          : "";
+  const uploadedCount = getUploadedRequiredCount(values.documents);
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Review & Submit"
+        description="Confirm your contract request before sending it for EDR staff review."
+      />
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Contract & Service
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="Type"
+              value={values.contractType === "new" ? "New Contract" : "Renewal"}
+              target={1}
+            />
+            <Row
+              label="Contract ID"
+              value={values.draftContractId || values.previousContractRef}
+              target={1}
+            />
+            <Row
+              label="Service"
+              value={
+                values.serviceType === "rail"
+                  ? "Rail Only"
+                  : values.serviceType === "rail_forwarding"
+                    ? "Rail + Forwarding"
+                    : ""
+              }
+              target={2}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              First & Last Mile
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="First Mile"
+              value={
+                values.firstMileEnabled ? values.pickUpAddress : "Not requested"
+              }
+              target={3}
+            />
+            <Row
+              label="Last Mile"
+              value={
+                values.lastMileEnabled
+                  ? values.deliveryAddress
+                  : "Not requested"
+              }
+              target={3}
+            />
+            <Row
+              label="Equipment Return"
+              value={
+                values.equipmentReturn === "with_return"
+                  ? "With Return"
+                  : "Without Return"
+              }
+              target={3}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Route & Cargo
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="Route"
+              value={`${values.originYard} -> ${values.destinationYard}`}
+              target={4}
+            />
+            <Row
+              label="Workflow"
+              value={
+                direction
+                  ? direction.charAt(0).toUpperCase() + direction.slice(1)
+                  : ""
+              }
+              target={4}
+            />
+            <Row
+              label="Weight (VGM)"
+              value={values.cargoWeight ? `${values.cargoWeight} tons` : ""}
+              target={5}
+            />
+            <Row label="Cargo" value={cargoValue} target={5} />
+            <Row
+              label="Modifiers"
+              value={
+                [
+                  values.isHazardous && "Hazardous",
+                  values.isRefrigerated && "Refrigerated",
+                ]
+                  .filter(Boolean)
+                  .join(", ") || "None"
+              }
+              target={4}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Container & Wagons
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="Container"
+              value={`${values.quantity} x ${values.containerType}`}
+              target={5}
+            />
+            <Row
+              label="VGM per Container"
+              value={values.vgm ? `${values.vgm} tons` : ""}
+              target={5}
+            />
+            <Row
+              label="Wagons"
+              value={
+                wagons
+                  ? `${wagons.totalWagons} wagon${wagons.totalWagons > 1 ? "s" : ""}`
+                  : ""
+              }
+              target={6}
+            />
+            <Row
+              label="Documents"
+              value={`${uploadedCount}/${REQUIRED_DOC_KEYS.length} mandatory uploaded`}
+              target={7}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Controller
+        name="notes"
+        control={form.control}
+        render={({ field }) => (
+          <Field>
+            <FieldLabel htmlFor="notes">Additional Notes</FieldLabel>
+            <Textarea
+              {...field}
+              id="notes"
+              placeholder="Any special instructions or notes for EDR operations..."
+              rows={3}
+            />
+          </Field>
+        )}
+      />
+
+      <Controller
+        name="termsAccepted"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <label className="flex cursor-pointer items-start gap-3">
+              <button
+                type="button"
+                role="checkbox"
+                aria-checked={field.value}
+                aria-invalid={fieldState.invalid}
+                onClick={() => field.onChange(!field.value)}
+                className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 transition ${field.value ? "border-primary bg-primary" : "border-input"
+                  }`}
+              >
+                {field.value && (
+                  <Check className="h-3 w-3 text-primary-foreground" />
+                )}
+              </button>
+              <span className="text-sm text-muted-foreground">
+                I confirm the information is accurate and agree to EDR's{" "}
+                <span className="text-primary">
+                  freight contract terms and conditions
+                </span>
+                .
+              </span>
+            </label>
+            <FieldError errors={[fieldState.error, errors.termsAccepted]} />
+          </Field>
+        )}
+      />
+    </div>
+  );
+}

From 3b2a0c6ffc9b1311262209afc605a2ba836053d3 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 15:44:21 +0300
Subject: [PATCH 08/13] chore: packages

---
 pnpm-lock.yaml | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6aa2017e8..caa638d8d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1328,11 +1328,6 @@ packages:
     peerDependencies:
       hono: ^4
 
-  '@hookform/resolvers@5.2.2':
-    resolution: {integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==}
-    peerDependencies:
-      react-hook-form: ^7.55.0
-
   '@hookform/resolvers@5.4.0':
     resolution: {integrity: sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==}
     peerDependencies:
@@ -12282,7 +12277,7 @@ snapshots:
     dependencies:
       hono: 4.12.18
 
-  '@hookform/resolvers@5.2.2(react-hook-form@7.75.0(react@18.3.1))':
+  '@hookform/resolvers@5.4.0(react-hook-form@7.75.0(react@18.3.1))':
     dependencies:
       '@standard-schema/utils': 0.3.0
       react-hook-form: 7.75.0(react@18.3.1)
@@ -14787,7 +14782,7 @@ snapshots:
       '@chakra-ui/react': 3.35.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
       '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
-      '@hookform/resolvers': 5.2.2(react-hook-form@7.75.0(react@18.3.1))
+      '@hookform/resolvers': 5.4.0(react-hook-form@7.75.0(react@18.3.1))
       '@lottiefiles/react-lottie-player': 3.6.0(react@18.3.1)
       '@mantine/core': 8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mantine/dates': 8.3.18(@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.3.18(react@18.3.1))(dayjs@1.11.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)

From c9bf3f672693d97caf4ceab6cda1b5f711545d9d Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 15:47:26 +0300
Subject: [PATCH 09/13] fix: react update to v19

---
 package.json   |    4 +-
 pnpm-lock.yaml | 2655 ++++++++++++++++++++++++------------------------
 2 files changed, 1327 insertions(+), 1332 deletions(-)

diff --git a/package.json b/package.json
index e4d55e7e9..31a34c325 100644
--- a/package.json
+++ b/package.json
@@ -29,8 +29,8 @@
     "overrides": {
       "date-fns": "^3.6.0",
       "pdfjs-dist": "^3.11.174",
-      "react": "18.3.1",
-      "react-dom": "18.3.1"
+      "react": "19.2.6",
+      "react-dom": "19.2.6"
     }
   },
   "lint-staged": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index caa638d8d..17ba1698e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,8 +7,8 @@ settings:
 overrides:
   date-fns: ^3.6.0
   pdfjs-dist: ^3.11.174
-  react: 18.3.1
-  react-dom: 18.3.1
+  react: 19.2.6
+  react-dom: 19.2.6
 
 importers:
 
@@ -161,10 +161,10 @@ importers:
         version: link:../../../packages/ui-common
       '@tanstack/react-query':
         specifier: ^5.59.0
-        version: 5.100.10(react@18.3.1)
+        version: 5.100.10(react@19.2.6)
       '@tria-plc/iamui-common':
         specifier: 1.0.3
-        version: 1.0.3(iv2eyyfavqphryq7oznx6tfwre)
+        version: 1.0.3(lb3aniqctq3gezscnhznnk7ife)
       axios:
         specifier: ^1.7.7
         version: 1.16.0
@@ -172,17 +172,17 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1
       react:
-        specifier: 18.3.1
-        version: 18.3.1
+        specifier: 19.2.6
+        version: 19.2.6
       react-dom:
-        specifier: 18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: 19.2.6
+        version: 19.2.6(react@19.2.6)
       react-router-dom:
         specifier: ^6.27.0
-        version: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.30.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       zustand:
         specifier: ^5.0.0
-        version: 5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@18.3.1)(use-sync-external-store@1.6.0(react@18.3.1))
+        version: 5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@19.2.6)(use-sync-external-store@1.6.0(react@19.2.6))
     devDependencies:
       '@edr/eslint-config':
         specifier: workspace:*
@@ -231,13 +231,13 @@ importers:
         version: link:../../../packages/ui-common
       '@hookform/resolvers':
         specifier: ^5.4.0
-        version: 5.4.0(react-hook-form@7.76.0(react@18.3.1))
+        version: 5.4.0(react-hook-form@7.76.0(react@19.2.6))
       '@tanstack/react-query':
         specifier: ^5.59.0
-        version: 5.100.10(react@18.3.1)
+        version: 5.100.10(react@19.2.6)
       '@tria-plc/iamui-common':
         specifier: 1.1.1
-        version: 1.1.1(l3yrqwo7ljy42bdsd6ijtc3cbe)
+        version: 1.1.1(33c6sm4c4ueuo474qk2tvnumee)
       axios:
         specifier: ^1.7.7
         version: 1.16.0
@@ -249,25 +249,25 @@ importers:
         version: 2.1.1
       lucide-react:
         specifier: ^1.14.0
-        version: 1.14.0(react@18.3.1)
+        version: 1.14.0(react@19.2.6)
       radix-ui:
         specifier: ^1.4.3
-        version: 1.4.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.4.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
-        specifier: 18.3.1
-        version: 18.3.1
+        specifier: 19.2.6
+        version: 19.2.6
       react-dom:
-        specifier: 18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: 19.2.6
+        version: 19.2.6(react@19.2.6)
       react-hook-form:
         specifier: ^7.76.0
-        version: 7.76.0(react@18.3.1)
+        version: 7.76.0(react@19.2.6)
       react-router-dom:
         specifier: ^6.27.0
-        version: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.30.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       recharts:
         specifier: ^3.8.1
-        version: 3.8.1(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react-is@19.2.6)(react@18.3.1)(redux@5.0.1)
+        version: 3.8.1(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react-is@19.2.6)(react@19.2.6)(redux@5.0.1)
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
@@ -276,7 +276,7 @@ importers:
         version: 4.4.3
       zustand:
         specifier: ^5.0.0
-        version: 5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@18.3.1)(use-sync-external-store@1.6.0(react@18.3.1))
+        version: 5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@19.2.6)(use-sync-external-store@1.6.0(react@19.2.6))
     devDependencies:
       '@edr/eslint-config':
         specifier: workspace:*
@@ -425,7 +425,7 @@ importers:
         version: link:../../../packages/ui-common
       '@tanstack/react-query':
         specifier: ^5.59.0
-        version: 5.100.10(react@18.3.1)
+        version: 5.100.10(react@19.2.6)
       axios:
         specifier: ^1.7.7
         version: 1.16.0
@@ -433,17 +433,17 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1
       react:
-        specifier: 18.3.1
-        version: 18.3.1
+        specifier: 19.2.6
+        version: 19.2.6
       react-dom:
-        specifier: 18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: 19.2.6
+        version: 19.2.6(react@19.2.6)
       react-router-dom:
         specifier: ^6.27.0
-        version: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.30.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       zustand:
         specifier: ^5.0.0
-        version: 5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@18.3.1)(use-sync-external-store@1.6.0(react@18.3.1))
+        version: 5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@19.2.6)(use-sync-external-store@1.6.0(react@19.2.6))
     devDependencies:
       '@edr/eslint-config':
         specifier: workspace:*
@@ -492,7 +492,7 @@ importers:
         version: link:../../../packages/ui-common
       '@tanstack/react-query':
         specifier: ^5.59.0
-        version: 5.100.10(react@18.3.1)
+        version: 5.100.10(react@19.2.6)
       axios:
         specifier: ^1.7.7
         version: 1.16.0
@@ -500,17 +500,17 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1
       react:
-        specifier: 18.3.1
-        version: 18.3.1
+        specifier: 19.2.6
+        version: 19.2.6
       react-dom:
-        specifier: 18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: 19.2.6
+        version: 19.2.6(react@19.2.6)
       react-router-dom:
         specifier: ^6.27.0
-        version: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.30.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       zustand:
         specifier: ^5.0.0
-        version: 5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@18.3.1)(use-sync-external-store@1.6.0(react@18.3.1))
+        version: 5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@19.2.6)(use-sync-external-store@1.6.0(react@19.2.6))
     devDependencies:
       '@edr/eslint-config':
         specifier: workspace:*
@@ -633,7 +633,7 @@ importers:
         version: link:../types
       '@tanstack/react-table':
         specifier: ^8.21.3
-        version: 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 8.21.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -642,10 +642,10 @@ importers:
         version: 2.1.1
       lucide-react:
         specifier: ^1.14.0
-        version: 1.14.0(react@18.3.1)
+        version: 1.14.0(react@19.2.6)
       radix-ui:
         specifier: ^1.4.3
-        version: 1.4.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.4.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       shadcn:
         specifier: ^4.7.0
         version: 4.7.0(@types/node@24.12.4)(babel-plugin-macros@3.1.0)(typescript@5.9.3)
@@ -675,11 +675,11 @@ importers:
         specifier: ^8.4.47
         version: 8.5.14
       react:
-        specifier: 18.3.1
-        version: 18.3.1
+        specifier: 19.2.6
+        version: 19.2.6
       react-dom:
-        specifier: 18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: 19.2.6
+        version: 19.2.6(react@19.2.6)
       tailwindcss:
         specifier: ^4.3.0
         version: 4.3.0
@@ -714,8 +714,8 @@ packages:
   '@ark-ui/react@5.36.2':
     resolution: {integrity: sha512-2lrZ7+Qtlj7hGx4qU2jZkE892JNrkULg/fUxqUuqmQfv9UGAXhdcw1Hr3N+zBgMDVz3aqip0Qa4v0Mox09MMvg==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@asamuzakjp/css-color@3.2.0':
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
@@ -954,8 +954,8 @@ packages:
     resolution: {integrity: sha512-qzfRNLwxKjxx2IXjBj6uz1nYI+pKsq6uwHxO619+hx1OzNNuwLIjEHJxnDfBzoynO7sPCBlubMwFWb1e1PrXzw==}
     peerDependencies:
       '@emotion/react': '>=11'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@colors/colors@1.5.0':
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
@@ -1094,7 +1094,7 @@ packages:
     resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -1110,7 +1110,7 @@ packages:
     peerDependencies:
       '@emotion/react': ^11.0.0-rc.0
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -1121,7 +1121,7 @@ packages:
   '@emotion/use-insertion-effect-with-fallbacks@1.2.0':
     resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   '@emotion/utils@1.4.2':
     resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
@@ -1304,14 +1304,14 @@ packages:
   '@floating-ui/react-dom@2.1.8':
     resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@floating-ui/react@0.27.19':
     resolution: {integrity: sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
@@ -1636,7 +1636,7 @@ packages:
   '@lottiefiles/react-lottie-player@3.6.0':
     resolution: {integrity: sha512-WK5TriLJT93VF3w4IjSVyveiedraZCnDhKzCPhpbeLgQeMi6zufxa3dXNc4HmAFRXq+LULPAy+Idv1rAfkReMA==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   '@lukeed/csprng@1.1.0':
     resolution: {integrity: sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA==}
@@ -1646,8 +1646,8 @@ packages:
     resolution: {integrity: sha512-9tph1lTVogKPjTx02eUxDUOdXacPzK62UuSqb4TdGliI54/Xgxftq0Dfqu6XuhCxn9J5MDJaNiLDvL/1KRkYqA==}
     peerDependencies:
       '@mantine/hooks': 8.3.18
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@mantine/dates@8.3.18':
     resolution: {integrity: sha512-FHx5teJOhupI0gO2o5evtVYQEdqOjayOkLRhEQfB5Nc5DvcysfPfmNILGkc1Nrp9ZQeQWKLT9qr+CkcCXwHOaw==}
@@ -1655,13 +1655,13 @@ packages:
       '@mantine/core': 8.3.18
       '@mantine/hooks': 8.3.18
       dayjs: '>=1.0.0'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@mantine/hooks@8.3.18':
     resolution: {integrity: sha512-QoWr9+S8gg5050TQ06aTSxtlpGjYOpIllRbjYYXlRvZeTsUqiTbVfvQROLexu4rEaK+yy9Wwriwl9PMRgbLqPw==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   '@mapbox/node-pre-gyp@1.0.11':
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
@@ -1690,8 +1690,8 @@ packages:
     deprecated: This package has been replaced by @base-ui/react
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -1705,7 +1705,7 @@ packages:
     peerDependencies:
       '@mui/material': ^5.0.0
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -1717,8 +1717,8 @@ packages:
       '@emotion/react': ^11.5.0
       '@emotion/styled': ^11.3.0
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@emotion/react':
         optional: true
@@ -1732,7 +1732,7 @@ packages:
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -1743,7 +1743,7 @@ packages:
     peerDependencies:
       '@emotion/react': ^11.4.1
       '@emotion/styled': ^11.3.0
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@emotion/react':
         optional: true
@@ -1757,7 +1757,7 @@ packages:
       '@emotion/react': ^11.5.0
       '@emotion/styled': ^11.3.0
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@emotion/react':
         optional: true
@@ -1779,7 +1779,7 @@ packages:
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -1789,7 +1789,7 @@ packages:
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -1809,8 +1809,8 @@ packages:
       moment: ^2.29.4
       moment-hijri: ^2.1.2
       moment-jalaali: ^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@emotion/react':
         optional: true
@@ -2041,8 +2041,8 @@ packages:
   '@onlyoffice/document-editor-react@2.1.1':
     resolution: {integrity: sha512-b0SnFPmT+OEyJons18PPHpwtFABVCI4nr3gPtAAImar1PhN9tNc9703Yo5KPYsHhIgVq+FqHSWgunI9GJnKa5w==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@open-draft/deferred-promise@2.2.0':
     resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
@@ -2166,8 +2166,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2179,8 +2179,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2192,8 +2192,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2205,8 +2205,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2218,8 +2218,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2231,8 +2231,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2244,8 +2244,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2257,8 +2257,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2270,8 +2270,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2283,8 +2283,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2295,7 +2295,7 @@ packages:
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2305,8 +2305,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2317,7 +2317,7 @@ packages:
     resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2326,7 +2326,7 @@ packages:
     resolution: {integrity: sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2336,8 +2336,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2348,7 +2348,7 @@ packages:
     resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2358,8 +2358,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2371,8 +2371,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2383,7 +2383,7 @@ packages:
     resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2393,8 +2393,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2406,8 +2406,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2419,8 +2419,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2431,7 +2431,7 @@ packages:
     resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2441,8 +2441,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2454,8 +2454,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2467,8 +2467,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2480,8 +2480,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2493,8 +2493,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2506,8 +2506,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2519,8 +2519,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2532,8 +2532,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2545,8 +2545,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2558,8 +2558,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2571,8 +2571,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2584,8 +2584,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2597,8 +2597,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2610,8 +2610,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2623,8 +2623,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2636,8 +2636,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2649,8 +2649,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2662,8 +2662,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2675,8 +2675,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2688,8 +2688,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2701,8 +2701,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2714,8 +2714,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2726,7 +2726,7 @@ packages:
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2735,7 +2735,7 @@ packages:
     resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2745,8 +2745,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2758,8 +2758,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2771,8 +2771,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2784,8 +2784,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2797,8 +2797,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2810,8 +2810,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2823,8 +2823,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2835,7 +2835,7 @@ packages:
     resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2844,7 +2844,7 @@ packages:
     resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2853,7 +2853,7 @@ packages:
     resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2862,7 +2862,7 @@ packages:
     resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2871,7 +2871,7 @@ packages:
     resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2880,7 +2880,7 @@ packages:
     resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2889,7 +2889,7 @@ packages:
     resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2898,7 +2898,7 @@ packages:
     resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2907,7 +2907,7 @@ packages:
     resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2917,8 +2917,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2931,111 +2931,111 @@ packages:
   '@react-pdf-viewer/attachment@3.12.0':
     resolution: {integrity: sha512-mhwrYJSIpCvHdERpLUotqhMgSjhtF+BTY1Yb9Fnzpcq3gLZP+Twp5Rynq21tCrVdDizPaVY7SKu400GkgdMfZw==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/bookmark@3.12.0':
     resolution: {integrity: sha512-i7nEit8vIFMAES8RFGwprZ9cXOOZb9ZStPW6E6yuObJEXcvBj/ctsbBJGZxqUZOGklM0JoB7sjHyxAriHfe92A==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/core@3.12.0':
     resolution: {integrity: sha512-8MsdlQJ4jaw3GT+zpCHS33nwnvzpY0ED6DEahZg9WngG++A5RMhk8LSlxdHelwaFFHFiXBjmOaj2Kpxh50VQRg==}
     peerDependencies:
       pdfjs-dist: ^3.11.174
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/default-layout@3.12.0':
     resolution: {integrity: sha512-K2fS4+TJynHxxCBFuIDiFuAw3nqOh4bkBgtVZ/2pGvnFn9lLg46YGLMnTXCQqtyZzzXYh696jmlFViun3is4pA==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/full-screen@3.12.0':
     resolution: {integrity: sha512-hQouJ26QUaRBCXNMU1aI1zpJn4l4PJRvlHhuE2dZYtLl37ycjl7vBCQYZW1FwnuxMWztZsY47R43DKaZORg0pg==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/get-file@3.12.0':
     resolution: {integrity: sha512-Uhq45n2RWlZ7Ec/BtBJ0WQESRciaYIltveDXHNdWvXgFdOS8XsvB+mnTh/wzm7Cfl9hpPyzfeezifdU9AkQgQg==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/open@3.12.0':
     resolution: {integrity: sha512-vhiDEYsiQLxvZkIKT9VPYHZ1BOnv46x9eCEmRWxO1DJ8fa/GRDTA9ivXmq/ap0dGEJs6t+epleCkCEfllLR/Yw==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/page-navigation@3.12.0':
     resolution: {integrity: sha512-tVEJ48Dd5kajV1nKkrPWijglJRNBiKBTyYDKVexhiRdTHUP1f6QQXiSyDgCUb0IGSZeJzOJb1h7ApKHe8OTtuw==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/print@3.12.0':
     resolution: {integrity: sha512-xJn76CgbU/M2iNaN7wLHTg+sdOekkRMfCakFLwPrE+SR7qD6NUF4vQQKJBSVCCK5bUijzb6cWfKGfo8VA72o4Q==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/properties@3.12.0':
     resolution: {integrity: sha512-dYTCHtVwFNkpDo7QxL2qk/8zAKndLwdD1FFxBftl6jIlQbtvNdxkFfkv1HcQING9Ic+7DBryOiD7W0ze4IERYg==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/rotate@3.12.0':
     resolution: {integrity: sha512-yaxaMYPChvNOjR8+AxRmj0kvojyJKPq4XHEcIB2lJJgBY1Zra3mliDUP3Nlb4yV8BS9+yBqWn9U9mtnopQD+tw==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/scroll-mode@3.12.0':
     resolution: {integrity: sha512-okII7Xqhl6cMvl1izdEvlXNJ+vJVq/qdg53hJIDYVgBCWskLk/cpjUg/ZonBxseG9lIDP3w2VO1McT8Gn11OAg==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/search@3.12.0':
     resolution: {integrity: sha512-jAkLpis49fsDDY/HrbUZIOIhzF5vynONQNA4INQKI38r/MjveblrkNv7qbr9j5lQ/WFic5+gD1e+Mtpf1/7DiA==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/selection-mode@3.12.0':
     resolution: {integrity: sha512-yysWEu2aCtBvzSgbhgI9kT5cq2hf0FU6Z+3B7MMXz14Kxyc3y18wUqxtgbvpFEfWF0bNUUq16JtWRljtxvZ83w==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/theme@3.12.0':
     resolution: {integrity: sha512-cdBi+wR1VOZ6URCcO9plmAZQu4ZGFcd7HJdBe7VIFiGyrvl9I/Of74ONLycnDImSuONt8D3uNjPBLieeaShVeg==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/thumbnail@3.12.0':
     resolution: {integrity: sha512-Vc8j3bO6wumWZV4o6pAbktPWKDSC9tQAzOCJ3cof541u4i44C11ccYC4W9aNcsMMUSO3bNwAGWtP8OFthV5akQ==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/toolbar@3.12.0':
     resolution: {integrity: sha512-qACTU3qXHgtNK8J+T13EWio+0liilj86SJ87BdapqXynhl720OKPlSKOQqskUGqg3oTUJAhrse9XG6SFdHJx+g==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf-viewer/zoom@3.12.0':
     resolution: {integrity: sha512-V0GUTyPM77+LzhoKX+T3XI10/HfGdqRTbgeP7ID60FCzcwu6kXWqJn5tzabjDKLTlFv8mJmn0aa/ppkIU97nfA==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@react-pdf/fns@3.1.3':
     resolution: {integrity: sha512-0I7pApDr1/RLAKbizuLy/IHTEa93LSPy/bEwYniboC3Xqnp6Od8xFJKbKEzGw2wh/5zKFFwl00g4t9RwgIMc3w==}
@@ -3058,7 +3058,7 @@ packages:
   '@react-pdf/reconciler@2.0.0':
     resolution: {integrity: sha512-7zaPRujpbHSmCpIrZ+b9HSTJHthcVZzX0Wx7RzvQGsGBUbHP4p6s5itXrAIOuQuPvDepoHGNOvf6xUuMVvdoyw==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   '@react-pdf/render@4.5.1':
     resolution: {integrity: sha512-IW/N4HWJWtioBXCf7n02IR24VJJ8gbdS3jGypf+vW/rSErEx3/URRzh9UK6Ma8Fpog9+T/W6GE2NHJ5AAKHhVA==}
@@ -3066,7 +3066,7 @@ packages:
   '@react-pdf/renderer@4.5.1':
     resolution: {integrity: sha512-5r1VQrE6FRLXX5wWUxwZzM24E2BJMo6g8AQWuS8WyPs9ugu5yMnb2g8/RpPYka/Z6J+RUEWc32wty2NoUJF42Q==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   '@react-pdf/stylesheet@6.2.1':
     resolution: {integrity: sha512-2+UEk+7e+z8baaWi2l5kPLWmwtJeOI+T5wW9GGeN3iDH7vd3kbTqOpN1yt9mmfNVZFxQsnDHpznFb5v5UF983A==}
@@ -3083,7 +3083,7 @@ packages:
   '@reduxjs/toolkit@2.11.2':
     resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
       react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
     peerDependenciesMeta:
       react:
@@ -3267,7 +3267,7 @@ packages:
   '@tabler/icons-react@3.44.0':
     resolution: {integrity: sha512-8+rvzBbVm/1Z3sG3x7GUNAaxIKxwgz8xaMhRs23nrCnMTKRFAhEC+82zAIFeAA0seXdrAGX5HFCkaLpGK2rVHg==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   '@tabler/icons@3.44.0':
     resolution: {integrity: sha512-Wn0AOZG9sg0L+bjfMqq4eNhC6pQjIrk94LvvWYNYkY8KH8wC3YILRzQlrnVJc4FUeMxH/AK97QsYCX35H3LndA==}
@@ -3376,19 +3376,19 @@ packages:
     resolution: {integrity: sha512-zes0+o9ef5rAZXJ9f/SeaLs2nufJaeVkZkl/Or9NGrWVF41kL9Od9ED9nCwtQlgiF2VGtrzhEw5AU/igAO+aAg==}
     peerDependencies:
       '@tanstack/react-query': ^5.100.10
-      react: 18.3.1
+      react: 19.2.6
 
   '@tanstack/react-query@5.100.10':
     resolution: {integrity: sha512-FLaZf2RCrA/Zgp4aiu5tG3TyasTRO7aZ99skxQpr3Hg/zXOhu6yq5FZCYQ/tRaJtM9ylnoK8tFK7PolXQadv6Q==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   '@tanstack/react-table@8.21.3':
     resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
     engines: {node: '>=12'}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@tanstack/table-core@8.21.3':
     resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
@@ -3397,8 +3397,8 @@ packages:
   '@tinymce/tinymce-react@6.3.0':
     resolution: {integrity: sha512-E++xnn0XzDzpKr40jno2Kj7umfAE6XfINZULEBBeNjTMvbACWzA6CjiR6V8eTDc9yVmdVhIPqVzV4PqD5TZ/4g==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
       tinymce: ^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.1
     peerDependenciesMeta:
       tinymce:
@@ -3572,8 +3572,8 @@ packages:
       '@tiptap/pm': 3.23.1
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
       '@types/react-dom': ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@tiptap/starter-kit@3.23.1':
     resolution: {integrity: sha512-CURePHQagBaZIDJrHH3of4Nmi0VYGpZ6yBlkdFxFHBxY9aeG2/h5kn+oHo8GbzkSFsRV+9olzRgDTOULVgs8pQ==}
@@ -3628,8 +3628,8 @@ packages:
   '@tria-plc/iamui-common@1.1.1':
     resolution: {integrity: sha512-aj9fMxmB/3kwSnN1vl8NvmCrI/1quNjfg9Bb7fJR4HhWEE26foIZC2xeg1ERzQxBll6rMj/R0Zl0+Riv6OONTQ==, tarball: https://npm.pkg.github.com/download/@tria-plc/iamui-common/1.1.1/98fa2e350b807e9d123cab7d75038a027005ef41}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
       react-router-dom: ^7.0.0
 
   '@ts-morph/common@0.27.0':
@@ -4188,8 +4188,8 @@ packages:
   '@zag-js/react@1.40.0':
     resolution: {integrity: sha512-2TFS1HYABYGc0lurC+4WEXvKkpxsVv6vKm+t8QAL7wfoeZnw6HDQWLc91kINp89vln+A2kwCfYqIq8HSm+9EeA==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   '@zag-js/rect-utils@1.40.0':
     resolution: {integrity: sha512-ikgLuE4rLlACm4mGLp6Ga8sJA44uFwohA1nVmb95sQ+VIyx2naf91CEF7SMrZVEwFKHaHpxdKVQSZLRjJqO/dw==}
@@ -5181,8 +5181,8 @@ packages:
   cmdk@1.1.1:
     resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
@@ -6475,8 +6475,8 @@ packages:
     resolution: {integrity: sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@emotion/is-prop-valid':
         optional: true
@@ -8072,12 +8072,12 @@ packages:
   lucide-react@0.513.0:
     resolution: {integrity: sha512-CJZKq2g8Y8yN4Aq002GahSXbG2JpFv9kXwyiOAMvUBv7pxeOFHUWKB0mO7MiY4ZVFCV4aNjv2BJFq/z3DgKPQg==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   lucide-react@1.14.0:
     resolution: {integrity: sha512-+1mdWcfSJVUsaTIjN9zoezmUhfXo5l0vP7ekBMPo3jcS/aIkxHnXqAPsByszMZx/Y8oQBRJxJx5xg+RH3urzxA==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
@@ -8339,8 +8339,8 @@ packages:
       '@mui/material': ^5.13.3
       '@mui/x-date-pickers': ^6.7.0
       date-fns: ^3.6.0
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   multer@2.1.1:
     resolution: {integrity: sha512-mo+QTzKlx8R7E5ylSXxWzGoXoZbOsRMpyitcht8By2KHvMbf3tjwosZ/Mu/XYU6UuJ3VZnODIrak5ZrPiPyB6A==}
@@ -8403,8 +8403,8 @@ packages:
   next-themes@0.4.6:
     resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   next-tick@1.1.0:
     resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
@@ -9189,8 +9189,8 @@ packages:
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -9224,54 +9224,54 @@ packages:
   react-cookie@8.1.2:
     resolution: {integrity: sha512-S45Z1y1dHyYfLEI4bFKQICuP+SwJqTPWbdc2ZpE6aQSdjSVJAjUDfwTPq8B7BWieIsgyyEWMb/QOrudtwJMjXA==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   react-datepicker@8.10.0:
     resolution: {integrity: sha512-JIXuA+g+qP3c4MVJpx24o7n1gnv3WV/8A/D6964HucY1FlSEc30+ITPNUfbKZXYHl5rruCtxYCwi2lzn7gaz7g==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   react-day-picker@9.14.0:
     resolution: {integrity: sha512-tBaoDWjPwe0M5pGrum4H0SR6Lyk+BO9oHnp9JbKpGKW2mlraNPgP9BMfsg5pWpwrssARmeqk7YBl2oXutZTaHA==}
     engines: {node: '>=18'}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
-  react-dom@18.3.1:
-    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+  react-dom@19.2.6:
+    resolution: {integrity: sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   react-dropzone@14.4.1:
     resolution: {integrity: sha512-QDuV76v3uKbHiH34SpwifZ+gOLi1+RdsCO1kl5vxMT4wW8R82+sthjvBw4th3NHF/XX6FBsqDYZVNN+pnhaw0g==}
     engines: {node: '>= 10.13'}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   react-floater@0.7.9:
     resolution: {integrity: sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   react-hook-form@7.75.0:
     resolution: {integrity: sha512-Ovv94H+0p3sJ7B9B5QxPuCP1u8V/cHuVGyH55cSwodYDtoJwK+fqk3vjfIgSX59I2U/bU4z0nRJ9HMLpNiWEmw==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   react-hook-form@7.76.0:
     resolution: {integrity: sha512-eKtLGgFeSgkHqQD8J59AMZ9a4uD1D83iSIzt4YlTGD7liDen5rrjcUO1rVIGd9yC1gofryjtHbv+4ny4hkLWlw==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   react-i18next@15.7.4:
     resolution: {integrity: sha512-nyU8iKNrI5uDJch0z9+Y5XEr34b0wkyYj3Rp+tfbahxtlswxSCjcUL9H0nqXo9IR3/t5Y5PKIA3fx3MfUyR9Xw==}
     peerDependencies:
       i18next: '>= 23.4.0'
-      react: 18.3.1
+      react: 19.2.6
       react-dom: '*'
       react-native: '*'
       typescript: ^5
@@ -9286,24 +9286,24 @@ packages:
   react-icons@5.6.0:
     resolution: {integrity: sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   react-image-crop@11.0.10:
     resolution: {integrity: sha512-+5FfDXUgYLLqBh1Y/uQhIycpHCbXkI50a+nbfkB1C0xXXUTwkisHDo2QCB1SQJyHCqIuia4FeyReqXuMDKWQTQ==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   react-innertext@1.1.5:
     resolution: {integrity: sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==}
     peerDependencies:
       '@types/react': '>=0.0.0 <=99'
-      react: 18.3.1
+      react: 19.2.6
 
   react-intersection-observer@9.16.0:
     resolution: {integrity: sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       react-dom:
         optional: true
@@ -9320,21 +9320,21 @@ packages:
   react-joyride@2.9.3:
     resolution: {integrity: sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   react-number-format@5.4.5:
     resolution: {integrity: sha512-y8O2yHHj3w0aE9XO8d2BCcUOOdQTRSVq+WIuMlLVucAm5XNjJAy+BoOJiuQMldVYVOKTMyvVNfnbl2Oqp+YxGw==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   react-pdf-html@2.1.5:
     resolution: {integrity: sha512-KhmiTUcnUNbLVdZbxMcV/+Rp+PyBt+eVJHu425eNwjSsDUtytvcwS/SBdBbbpM0c4+MnnOQBOs3AiColUesM8A==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
       '@react-pdf/renderer': '>=3.4.4'
-      react: 18.3.1
+      react: 19.2.6
 
   react-pdf-viewer@0.1.0:
     resolution: {integrity: sha512-JO0bZEA6EMtljhTrLNyn9T03nIOXY6/tzK8guOdwfYpImdOpYfACy47G9AKXrVrtob9bEW2d1jR3MkC0NEGajw==}
@@ -9343,8 +9343,8 @@ packages:
     resolution: {integrity: sha512-kS/35staVCBqS29verTQJQZXw7RfsRCPO3fdJoW1KXylcv7A9dw6DZ3vJXC2w+bIBgLw5FN4pOFvKSQtkQhPfA==}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -9353,7 +9353,7 @@ packages:
     resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
     peerDependencies:
       '@types/react': ^18.2.25 || ^19
-      react: 18.3.1
+      react: 19.2.6
       redux: ^5.0.0
     peerDependenciesMeta:
       '@types/react':
@@ -9370,7 +9370,7 @@ packages:
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -9380,7 +9380,7 @@ packages:
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -9388,35 +9388,35 @@ packages:
   react-resizable-panels@3.0.6:
     resolution: {integrity: sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   react-router-dom@6.30.3:
     resolution: {integrity: sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   react-router-dom@7.15.0:
     resolution: {integrity: sha512-VcrVg64Fo8nwBvDscajG8gRTLIuTC6N50nb22l2HOOV4PTOHgoGp8mUjy9wLiHYoYTSYI36tUnXZgasSRFZorQ==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   react-router@6.30.3:
     resolution: {integrity: sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   react-router@7.15.0:
     resolution: {integrity: sha512-HW9vYwuM8f4yx66Izy8xfrzCM+SBJluoZcCbww9A1TySax11S5Vgw6fi3ZjMONw9J4gQwngL7PzkyIpJJpJ7RQ==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       react-dom:
         optional: true
@@ -9427,8 +9427,8 @@ packages:
       '@types/prop-types': ^15.7.3
       '@types/react': 0.14 - 19
       prop-types: ^15.5.8
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
     peerDependenciesMeta:
       '@types/prop-types':
         optional: true
@@ -9440,7 +9440,7 @@ packages:
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -9449,16 +9449,16 @@ packages:
     resolution: {integrity: sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A==}
     engines: {node: '>=10'}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   react-transition-group@4.4.5:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
-  react@18.3.1:
-    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+  react@19.2.6:
+    resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
     engines: {node: '>=0.10.0'}
 
   read-cache@1.0.0:
@@ -9518,8 +9518,8 @@ packages:
     resolution: {integrity: sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg==}
     engines: {node: '>=18'}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
       react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   redent@1.0.0:
@@ -9756,12 +9756,12 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
-  scheduler@0.23.2:
-    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
-
   scheduler@0.25.0-rc-603e6108-20241029:
     resolution: {integrity: sha512-pFwF6H1XrSdYYNLfOcGlM28/j8CGLu8IvdrxqhjWULe2bPcKiKW4CV+OWqR/9fT52mywx65l7ysNkjLKBda7eA==}
 
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
   schema-utils@3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
     engines: {node: '>= 10.13.0'}
@@ -9962,8 +9962,8 @@ packages:
   sonner@2.0.7:
     resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   source-list-map@2.0.1:
     resolution: {integrity: sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==}
@@ -10882,7 +10882,7 @@ packages:
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -10891,7 +10891,7 @@ packages:
     resolution: {integrity: sha512-djviaxuOOh7wkj0paeO1Q/4wMZ8Zrnag5H6yBvzN7AKKe8beOaED9SF5/ByLqsku8NP4zQqsvM2u3ew/tJK8/w==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -10900,7 +10900,7 @@ packages:
     resolution: {integrity: sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -10909,7 +10909,7 @@ packages:
     resolution: {integrity: sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -10919,7 +10919,7 @@ packages:
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': '*'
-      react: 18.3.1
+      react: 19.2.6
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -10927,7 +10927,7 @@ packages:
   use-sync-external-store@1.6.0:
     resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
     peerDependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   use@3.1.1:
     resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
@@ -10991,8 +10991,8 @@ packages:
   vaul@1.1.2:
     resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
     peerDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1
+      react: 19.2.6
+      react-dom: 19.2.6
 
   verror@1.10.0:
     resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
@@ -11473,7 +11473,7 @@ packages:
     peerDependencies:
       '@types/react': '>=18.0.0'
       immer: '>=9.0.6'
-      react: 18.3.1
+      react: 19.2.6
       use-sync-external-store: '>=1.2.0'
     peerDependenciesMeta:
       '@types/react':
@@ -11522,7 +11522,7 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
-  '@ark-ui/react@5.36.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@ark-ui/react@5.36.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@internationalized/date': 3.12.0
       '@zag-js/accordion': 1.40.0
@@ -11572,7 +11572,7 @@ snapshots:
       '@zag-js/qr-code': 1.40.0
       '@zag-js/radio-group': 1.40.0
       '@zag-js/rating-group': 1.40.0
-      '@zag-js/react': 1.40.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@zag-js/react': 1.40.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@zag-js/scroll-area': 1.40.0
       '@zag-js/select': 1.40.0
       '@zag-js/signature-pad': 1.40.0
@@ -11591,8 +11591,8 @@ snapshots:
       '@zag-js/tree-view': 1.40.0
       '@zag-js/types': 1.40.0
       '@zag-js/utils': 1.40.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
@@ -11879,18 +11879,18 @@ snapshots:
 
   '@borewit/text-codec@0.2.2': {}
 
-  '@chakra-ui/react@3.35.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@chakra-ui/react@3.35.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@ark-ui/react': 5.36.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@ark-ui/react': 5.36.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@emotion/is-prop-valid': 1.4.0
-      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@19.2.6)
       '@emotion/serialize': 1.3.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.6)
       '@emotion/utils': 1.4.2
       '@pandacss/is-valid-prop': 1.11.1
       csstype: 3.2.3
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
   '@colors/colors@1.5.0':
     optional: true
@@ -12080,17 +12080,17 @@ snapshots:
 
   '@emotion/memoize@0.9.0': {}
 
-  '@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1)':
+  '@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@emotion/babel-plugin': 11.13.5
       '@emotion/cache': 11.14.0
       '@emotion/serialize': 1.3.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.6)
       '@emotion/utils': 1.4.2
       '@emotion/weak-memoize': 0.4.0
       hoist-non-react-statics: 3.3.2
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
     transitivePeerDependencies:
@@ -12106,16 +12106,16 @@ snapshots:
 
   '@emotion/sheet@1.4.0': {}
 
-  '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)':
+  '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@emotion/babel-plugin': 11.13.5
       '@emotion/is-prop-valid': 1.4.0
-      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@19.2.6)
       '@emotion/serialize': 1.3.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.6)
       '@emotion/utils': 1.4.2
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
     transitivePeerDependencies:
@@ -12123,9 +12123,9 @@ snapshots:
 
   '@emotion/unitless@0.10.0': {}
 
-  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@18.3.1)':
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.2.6)':
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   '@emotion/utils@1.4.2': {}
 
@@ -12253,18 +12253,18 @@ snapshots:
       '@floating-ui/core': 1.7.5
       '@floating-ui/utils': 0.2.11
 
-  '@floating-ui/react-dom@2.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@floating-ui/react-dom@2.1.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@floating-ui/dom': 1.7.6
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
-  '@floating-ui/react@0.27.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@floating-ui/react@0.27.19(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@floating-ui/utils': 0.2.11
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
       tabbable: 6.4.0
 
   '@floating-ui/utils@0.2.11': {}
@@ -12277,15 +12277,15 @@ snapshots:
     dependencies:
       hono: 4.12.18
 
-  '@hookform/resolvers@5.4.0(react-hook-form@7.75.0(react@18.3.1))':
+  '@hookform/resolvers@5.4.0(react-hook-form@7.75.0(react@19.2.6))':
     dependencies:
       '@standard-schema/utils': 0.3.0
-      react-hook-form: 7.75.0(react@18.3.1)
+      react-hook-form: 7.75.0(react@19.2.6)
 
-  '@hookform/resolvers@5.4.0(react-hook-form@7.76.0(react@18.3.1))':
+  '@hookform/resolvers@5.4.0(react-hook-form@7.76.0(react@19.2.6))':
     dependencies:
       '@standard-schema/utils': 0.3.0
-      react-hook-form: 7.76.0(react@18.3.1)
+      react-hook-form: 7.76.0(react@19.2.6)
 
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
@@ -12686,39 +12686,39 @@ snapshots:
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
-  '@lottiefiles/react-lottie-player@3.6.0(react@18.3.1)':
+  '@lottiefiles/react-lottie-player@3.6.0(react@19.2.6)':
     dependencies:
       lottie-web: 5.13.0
-      react: 18.3.1
+      react: 19.2.6
 
   '@lukeed/csprng@1.1.0': {}
 
-  '@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@floating-ui/react': 0.27.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/hooks': 8.3.18(react@18.3.1)
+      '@floating-ui/react': 0.27.19(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mantine/hooks': 8.3.18(react@19.2.6)
       clsx: 2.1.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-number-format: 5.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@18.3.1)
-      react-textarea-autosize: 8.5.9(@types/react@18.3.28)(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-number-format: 5.4.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@19.2.6)
+      react-textarea-autosize: 8.5.9(@types/react@18.3.28)(react@19.2.6)
       type-fest: 4.41.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@mantine/dates@8.3.18(@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.3.18(react@18.3.1))(dayjs@1.11.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mantine/dates@8.3.18(@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@8.3.18(react@19.2.6))(dayjs@1.11.20)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@mantine/core': 8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/hooks': 8.3.18(react@18.3.1)
+      '@mantine/core': 8.3.18(@mantine/hooks@8.3.18(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mantine/hooks': 8.3.18(react@19.2.6)
       clsx: 2.1.1
       dayjs: 1.11.20
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
-  '@mantine/hooks@8.3.18(react@18.3.1)':
+  '@mantine/hooks@8.3.18(react@19.2.6)':
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   '@mapbox/node-pre-gyp@1.0.11':
     dependencies:
@@ -12769,132 +12769,132 @@ snapshots:
       outvariant: 1.4.3
       strict-event-emitter: 0.5.1
 
-  '@mui/base@5.0.0-beta.70(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/base@5.0.0-beta.70(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
-      '@floating-ui/react-dom': 2.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@mui/types': 7.2.24(@types/react@18.3.28)
-      '@mui/utils': 6.4.9(@types/react@18.3.28)(react@18.3.1)
+      '@mui/utils': 6.4.9(@types/react@18.3.28)(react@19.2.6)
       '@popperjs/core': 2.11.8
       clsx: 2.1.1
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
 
   '@mui/core-downloads-tracker@5.18.0': {}
 
-  '@mui/icons-material@5.18.0(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)':
+  '@mui/icons-material@5.18.0(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
-      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
+      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@mui/core-downloads-tracker': 5.18.0
-      '@mui/system': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
+      '@mui/system': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)
       '@mui/types': 7.2.24(@types/react@18.3.28)
-      '@mui/utils': 5.17.1(@types/react@18.3.28)(react@18.3.1)
+      '@mui/utils': 5.17.1(@types/react@18.3.28)(react@19.2.6)
       '@popperjs/core': 2.11.8
       '@types/react-transition-group': 4.4.12(@types/react@18.3.28)
       clsx: 2.1.1
       csstype: 3.2.3
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
       react-is: 19.2.6
-      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@19.2.6)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)
       '@types/react': 18.3.28
 
-  '@mui/private-theming@5.17.1(@types/react@18.3.28)(react@18.3.1)':
+  '@mui/private-theming@5.17.1(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
-      '@mui/utils': 5.17.1(@types/react@18.3.28)(react@18.3.1)
+      '@mui/utils': 5.17.1(@types/react@18.3.28)(react@19.2.6)
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@mui/styled-engine@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(react@18.3.1)':
+  '@mui/styled-engine@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@emotion/cache': 11.14.0
       '@emotion/serialize': 1.3.3
       csstype: 3.2.3
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@19.2.6)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)
 
-  '@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)':
+  '@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
-      '@mui/private-theming': 5.17.1(@types/react@18.3.28)(react@18.3.1)
-      '@mui/styled-engine': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(react@18.3.1)
+      '@mui/private-theming': 5.17.1(@types/react@18.3.28)(react@19.2.6)
+      '@mui/styled-engine': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(react@19.2.6)
       '@mui/types': 7.2.24(@types/react@18.3.28)
-      '@mui/utils': 5.17.1(@types/react@18.3.28)(react@18.3.1)
+      '@mui/utils': 5.17.1(@types/react@18.3.28)(react@19.2.6)
       clsx: 2.1.1
       csstype: 3.2.3
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@19.2.6)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)
       '@types/react': 18.3.28
 
   '@mui/types@7.2.24(@types/react@18.3.28)':
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@mui/utils@5.17.1(@types/react@18.3.28)(react@18.3.1)':
+  '@mui/utils@5.17.1(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@mui/types': 7.2.24(@types/react@18.3.28)
       '@types/prop-types': 15.7.15
       clsx: 2.1.1
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.2.6
       react-is: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@mui/utils@6.4.9(@types/react@18.3.28)(react@18.3.1)':
+  '@mui/utils@6.4.9(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@mui/types': 7.2.24(@types/react@18.3.28)
       '@types/prop-types': 15.7.15
       clsx: 2.1.1
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.2.6
       react-is: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@mui/x-date-pickers@6.20.2(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(date-fns@3.6.0)(dayjs@1.11.20)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/x-date-pickers@6.20.2(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(date-fns@3.6.0)(dayjs@1.11.20)(moment@2.30.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
-      '@mui/base': 5.0.0-beta.70(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/system': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
-      '@mui/utils': 5.17.1(@types/react@18.3.28)(react@18.3.1)
+      '@mui/base': 5.0.0-beta.70(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mui/system': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)
+      '@mui/utils': 5.17.1(@types/react@18.3.28)(react@19.2.6)
       '@types/react-transition-group': 4.4.12(@types/react@18.3.28)
       clsx: 2.1.1
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-transition-group: 4.4.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
     optionalDependencies:
-      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@19.2.6)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)
       date-fns: 3.6.0
       dayjs: 1.11.20
       moment: 2.30.1
@@ -13099,11 +13099,11 @@ snapshots:
     dependencies:
       consola: 3.4.2
 
-  '@onlyoffice/document-editor-react@2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@onlyoffice/document-editor-react@2.1.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       lodash: 4.17.21
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
   '@open-draft/deferred-promise@2.2.0': {}
 
@@ -13193,967 +13193,967 @@ snapshots:
 
   '@radix-ui/primitive@1.1.3': {}
 
-  '@radix-ui/react-accessible-icon@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-accessible-icon@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-accordion@1.2.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-accordion@1.2.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-avatar@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-avatar@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-avatar@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-context': 1.1.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-context-menu@2.2.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-context-menu@2.2.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-context@1.1.2(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-context@1.1.2(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-context@1.1.3(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-context@1.1.3(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-dialog@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
       aria-hidden: 1.2.6
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-direction@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-direction@1.1.1(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-focus-guards@1.1.3(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-form@0.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-form@0.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-label': 2.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-hover-card@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-hover-card@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-id@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-id@1.1.1(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-label@2.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-label@2.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-label@2.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-label@2.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-menu@2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
       aria-hidden: 1.2.6
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-menubar@1.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-menubar@1.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-one-time-password-field@0.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-one-time-password-field@0.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/number': 1.1.1
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-password-toggle-field@0.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-password-toggle-field@0.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
       aria-hidden: 1.2.6
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-popper@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@18.3.1)
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@19.2.6)
       '@radix-ui/rect': 1.1.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-presence@1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-primitive@2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.4(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.4(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-progress@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-progress@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-progress@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-progress@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-context': 1.1.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/number': 1.1.1
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-select@2.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-select@2.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/number': 1.1.1
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       aria-hidden: 1.2.6
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-remove-scroll: 2.7.2(@types/react@18.3.28)(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-separator@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-separator@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-separator@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-slider@1.3.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-slider@1.3.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/number': 1.1.1
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-slot@1.2.3(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-slot@1.2.3(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-slot@1.2.4(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-slot@1.2.4(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-switch@1.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-switch@1.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-tabs@1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-toast@1.2.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-toast@1.2.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-toggle@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-toolbar@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-toolbar@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-separator': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      react: 18.3.1
-      use-sync-external-store: 1.6.0(react@18.3.1)
+      react: 19.2.6
+      use-sync-external-store: 1.6.0(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-previous@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-use-previous@1.1.1(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-use-rect@1.1.1(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
       '@radix-ui/rect': 1.1.1
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@18.3.28)(react@18.3.1)':
+  '@radix-ui/react-use-size@1.1.1(@types/react@18.3.28)(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
   '@radix-ui/rect@1.1.1': {}
 
-  '@react-pdf-viewer/attachment@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/attachment@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/bookmark@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/bookmark@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/core@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/core@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       pdfjs-dist: 3.11.174
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
-  '@react-pdf-viewer/default-layout@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/default-layout@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/attachment': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/bookmark': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/thumbnail': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/toolbar': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/attachment': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/bookmark': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/thumbnail': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/toolbar': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/full-screen@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/full-screen@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/get-file@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/get-file@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/open@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/open@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/page-navigation@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/page-navigation@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/print@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/print@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/properties@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/properties@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/rotate@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/rotate@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/scroll-mode@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/scroll-mode@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/search@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/search@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/selection-mode@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/selection-mode@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/theme@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/theme@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/thumbnail@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/thumbnail@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/toolbar@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/toolbar@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/full-screen': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/get-file': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/open': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/page-navigation': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/print': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/properties': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/rotate': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/scroll-mode': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/search': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/selection-mode': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/theme': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/zoom': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/full-screen': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/get-file': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/open': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/page-navigation': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/print': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/properties': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/rotate': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/scroll-mode': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/search': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/selection-mode': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/theme': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/zoom': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
-  '@react-pdf-viewer/zoom@3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-pdf-viewer/zoom@3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - pdfjs-dist
 
@@ -14199,10 +14199,10 @@ snapshots:
 
   '@react-pdf/primitives@4.3.0': {}
 
-  '@react-pdf/reconciler@2.0.0(react@18.3.1)':
+  '@react-pdf/reconciler@2.0.0(react@19.2.6)':
     dependencies:
       object-assign: 4.1.1
-      react: 18.3.1
+      react: 19.2.6
       scheduler: 0.25.0-rc-603e6108-20241029
 
   '@react-pdf/render@4.5.1':
@@ -14218,7 +14218,7 @@ snapshots:
       parse-svg-path: 0.1.2
       svg-arc-to-cubic-bezier: 3.2.0
 
-  '@react-pdf/renderer@4.5.1(react@18.3.1)':
+  '@react-pdf/renderer@4.5.1(react@19.2.6)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@react-pdf/fns': 3.1.3
@@ -14226,14 +14226,14 @@ snapshots:
       '@react-pdf/layout': 4.6.1
       '@react-pdf/pdfkit': 5.1.1
       '@react-pdf/primitives': 4.3.0
-      '@react-pdf/reconciler': 2.0.0(react@18.3.1)
+      '@react-pdf/reconciler': 2.0.0(react@19.2.6)
       '@react-pdf/render': 4.5.1
       '@react-pdf/types': 2.11.1
       events: 3.3.0
       object-assign: 4.1.1
       prop-types: 15.8.1
       queue: 6.0.2
-      react: 18.3.1
+      react: 19.2.6
 
   '@react-pdf/stylesheet@6.2.1':
     dependencies:
@@ -14261,7 +14261,7 @@ snapshots:
       '@react-pdf/primitives': 4.3.0
       '@react-pdf/stylesheet': 6.2.1
 
-  '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1))(react@18.3.1)':
+  '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@19.2.6)(redux@5.0.1))(react@19.2.6)':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@standard-schema/utils': 0.3.0
@@ -14270,8 +14270,8 @@ snapshots:
       redux-thunk: 3.1.0(redux@5.0.1)
       reselect: 5.1.1
     optionalDependencies:
-      react: 18.3.1
-      react-redux: 9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1)
+      react: 19.2.6
+      react-redux: 9.2.0(@types/react@18.3.28)(react@19.2.6)(redux@5.0.1)
 
   '@remix-run/router@1.23.2': {}
 
@@ -14384,10 +14384,10 @@ snapshots:
 
   '@tabby_ai/hijri-converter@1.0.5': {}
 
-  '@tabler/icons-react@3.44.0(react@18.3.1)':
+  '@tabler/icons-react@3.44.0(react@19.2.6)':
     dependencies:
       '@tabler/icons': 3.44.0
-      react: 18.3.1
+      react: 19.2.6
 
   '@tabler/icons@3.44.0': {}
 
@@ -14473,30 +14473,30 @@ snapshots:
 
   '@tanstack/query-devtools@5.100.10': {}
 
-  '@tanstack/react-query-devtools@5.100.10(@tanstack/react-query@5.100.10(react@18.3.1))(react@18.3.1)':
+  '@tanstack/react-query-devtools@5.100.10(@tanstack/react-query@5.100.10(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@tanstack/query-devtools': 5.100.10
-      '@tanstack/react-query': 5.100.10(react@18.3.1)
-      react: 18.3.1
+      '@tanstack/react-query': 5.100.10(react@19.2.6)
+      react: 19.2.6
 
-  '@tanstack/react-query@5.100.10(react@18.3.1)':
+  '@tanstack/react-query@5.100.10(react@19.2.6)':
     dependencies:
       '@tanstack/query-core': 5.100.10
-      react: 18.3.1
+      react: 19.2.6
 
-  '@tanstack/react-table@8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@tanstack/react-table@8.21.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@tanstack/table-core': 8.21.3
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
   '@tanstack/table-core@8.21.3': {}
 
-  '@tinymce/tinymce-react@6.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tinymce@7.9.2)':
+  '@tinymce/tinymce-react@6.3.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(tinymce@7.9.2)':
     dependencies:
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       tinymce: 7.9.2
 
@@ -14647,7 +14647,7 @@ snapshots:
       prosemirror-transform: 1.12.0
       prosemirror-view: 1.41.8
 
-  '@tiptap/react@3.23.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))(@tiptap/pm@3.23.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@tiptap/react@3.23.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))(@tiptap/pm@3.23.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@tiptap/core': 3.23.1(@tiptap/pm@3.23.1)
       '@tiptap/pm': 3.23.1
@@ -14655,9 +14655,9 @@ snapshots:
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
       '@types/use-sync-external-store': 0.0.6
       fast-equals: 5.4.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      use-sync-external-store: 1.6.0(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      use-sync-external-store: 1.6.0(react@19.2.6)
     optionalDependencies:
       '@tiptap/extension-bubble-menu': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))(@tiptap/pm@3.23.1)
       '@tiptap/extension-floating-menu': 3.23.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))(@tiptap/pm@3.23.1)
@@ -14777,51 +14777,51 @@ snapshots:
       - '@faker-js/faker'
       - supports-color
 
-  '@tria-plc/iamui-common@1.0.3(iv2eyyfavqphryq7oznx6tfwre)':
+  '@tria-plc/iamui-common@1.0.3(lb3aniqctq3gezscnhznnk7ife)':
     dependencies:
-      '@chakra-ui/react': 3.35.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
-      '@hookform/resolvers': 5.4.0(react-hook-form@7.75.0(react@18.3.1))
-      '@lottiefiles/react-lottie-player': 3.6.0(react@18.3.1)
-      '@mantine/core': 8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/dates': 8.3.18(@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.3.18(react@18.3.1))(dayjs@1.11.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/hooks': 8.3.18(react@18.3.1)
-      '@onlyoffice/document-editor-react': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-avatar': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-label': 2.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-popover': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-progress': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-select': 2.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-separator': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slider': 1.3.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.4(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-switch': 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toast': 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/default-layout': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf/renderer': 4.5.1(react@18.3.1)
-      '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1))(react@18.3.1)
-      '@tabler/icons-react': 3.44.0(react@18.3.1)
+      '@chakra-ui/react': 3.35.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@19.2.6)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)
+      '@hookform/resolvers': 5.4.0(react-hook-form@7.75.0(react@19.2.6))
+      '@lottiefiles/react-lottie-player': 3.6.0(react@19.2.6)
+      '@mantine/core': 8.3.18(@mantine/hooks@8.3.18(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mantine/dates': 8.3.18(@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@8.3.18(react@19.2.6))(dayjs@1.11.20)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mantine/hooks': 8.3.18(react@19.2.6)
+      '@onlyoffice/document-editor-react': 2.1.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-avatar': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-label': 2.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-progress': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-select': 2.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-separator': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slider': 1.3.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.4(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-switch': 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toast': 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/default-layout': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf/renderer': 4.5.1(react@19.2.6)
+      '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@19.2.6)(redux@5.0.1))(react@19.2.6)
+      '@tabler/icons-react': 3.44.0(react@19.2.6)
       '@tailwindcss/vite': 4.3.0(vite@5.4.21(@types/node@24.12.4)(lightningcss@1.32.0)(terser@5.47.1))
-      '@tanstack/react-query': 5.100.10(react@18.3.1)
-      '@tanstack/react-query-devtools': 5.100.10(@tanstack/react-query@5.100.10(react@18.3.1))(react@18.3.1)
-      '@tanstack/react-table': 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@tinymce/tinymce-react': 6.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tinymce@7.9.2)
+      '@tanstack/react-query': 5.100.10(react@19.2.6)
+      '@tanstack/react-query-devtools': 5.100.10(@tanstack/react-query@5.100.10(react@19.2.6))(react@19.2.6)
+      '@tanstack/react-table': 8.21.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@tinymce/tinymce-react': 6.3.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(tinymce@7.9.2)
       '@tiptap/extension-color': 3.23.1(@tiptap/extension-text-style@3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1)))
       '@tiptap/extension-highlight': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))
       '@tiptap/extension-image': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))
@@ -14829,21 +14829,21 @@ snapshots:
       '@tiptap/extension-text-align': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))
       '@tiptap/extension-text-style': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))
       '@tiptap/extension-underline': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))
-      '@tiptap/react': 3.23.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))(@tiptap/pm@3.23.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tiptap/react': 3.23.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))(@tiptap/pm@3.23.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@tiptap/starter-kit': 3.23.1
       '@types/node': 24.12.4
       '@types/tinymce': 4.6.9
       axios: 1.16.0
       class-variance-authority: 0.7.1
       clsx: 2.1.1
-      cmdk: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      cmdk: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       date-fns: 3.6.0
       dayjs: 1.11.20
       ethiopian-calendar-date-converter: 2.1.6
       ethiopian-calendar-new: 1.1.0
       file-type: 18.7.0
       force: 0.0.3
-      framer-motion: 12.38.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      framer-motion: 12.38.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       html2canvas: 1.4.1
       i18next: 25.10.10(typescript@5.9.3)
       i18next-browser-languagedetector: 8.2.1
@@ -14852,34 +14852,34 @@ snapshots:
       jspdf: 3.0.4
       loadash: 1.0.0
       lodash: 4.18.1
-      lucide-react: 0.513.0(react@18.3.1)
-      mui-ethiopian-datepicker: 0.3.2(hjxdxgubdlhng5uhyvidfkiyo4)
-      next-themes: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      lucide-react: 0.513.0(react@19.2.6)
+      mui-ethiopian-datepicker: 0.3.2(paybi2fdkyh35y7nbr3nki3zze)
+      next-themes: 0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       path: 0.12.7
       qs: 6.15.1
-      react: 18.3.1
-      react-cookie: 8.1.2(@types/react@18.3.28)(react@18.3.1)
-      react-datepicker: 8.10.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-day-picker: 9.14.0(react@18.3.1)
-      react-dom: 18.3.1(react@18.3.1)
-      react-dropzone: 14.4.1(react@18.3.1)
-      react-hook-form: 7.75.0(react@18.3.1)
-      react-i18next: 15.7.4(i18next@25.10.10(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
-      react-icons: 5.6.0(react@18.3.1)
-      react-image-crop: 11.0.10(react@18.3.1)
-      react-intersection-observer: 9.16.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 19.2.6
+      react-cookie: 8.1.2(@types/react@18.3.28)(react@19.2.6)
+      react-datepicker: 8.10.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-day-picker: 9.14.0(react@19.2.6)
+      react-dom: 19.2.6(react@19.2.6)
+      react-dropzone: 14.4.1(react@19.2.6)
+      react-hook-form: 7.75.0(react@19.2.6)
+      react-i18next: 15.7.4(i18next@25.10.10(typescript@5.9.3))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)
+      react-icons: 5.6.0(react@19.2.6)
+      react-image-crop: 11.0.10(react@19.2.6)
+      react-intersection-observer: 9.16.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react-is: 19.2.6
-      react-joyride: 2.9.3(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-pdf: 10.4.1(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-pdf-html: 2.1.5(@react-pdf/renderer@4.5.1(react@18.3.1))(react@18.3.1)
+      react-joyride: 2.9.3(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-pdf: 10.4.1(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-pdf-html: 2.1.5(@react-pdf/renderer@4.5.1(react@19.2.6))(react@19.2.6)
       react-pdf-viewer: 0.1.0
-      react-redux: 9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1)
-      react-resizable-panels: 3.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-router-dom: 7.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-signature-canvas: 1.1.0-alpha.2(@types/prop-types@15.7.15)(@types/react@18.3.28)(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      recharts: 3.8.1(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react-is@19.2.6)(react@18.3.1)(redux@5.0.1)
+      react-redux: 9.2.0(@types/react@18.3.28)(react@19.2.6)(redux@5.0.1)
+      react-resizable-panels: 3.0.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-router-dom: 7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-signature-canvas: 1.1.0-alpha.2(@types/prop-types@15.7.15)(@types/react@18.3.28)(prop-types@15.8.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      recharts: 3.8.1(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react-is@19.2.6)(react@19.2.6)(redux@5.0.1)
       socket.io-client: 4.8.3
-      sonner: 2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      sonner: 2.0.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       tailwind-merge: 3.6.0
       tailwind-scrollbar-hide: 4.0.0(tailwindcss@4.3.0)
       tailwindcss: 4.3.0
@@ -14887,7 +14887,7 @@ snapshots:
       tesseract.js: 7.0.0
       tinymce: 7.9.2
       url: 0.11.4
-      vaul: 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      vaul: 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       xlsx: 0.18.5
       zod: 3.25.76
     transitivePeerDependencies:
@@ -14915,50 +14915,50 @@ snapshots:
       - webpack-cli
       - webpack-command
 
-  '@tria-plc/iamui-common@1.1.1(l3yrqwo7ljy42bdsd6ijtc3cbe)':
+  '@tria-plc/iamui-common@1.1.1(33c6sm4c4ueuo474qk2tvnumee)':
     dependencies:
-      '@chakra-ui/react': 3.35.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
-      '@hookform/resolvers': 5.4.0(react-hook-form@7.76.0(react@18.3.1))
-      '@lottiefiles/react-lottie-player': 3.6.0(react@18.3.1)
-      '@mantine/core': 8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/dates': 8.3.18(@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.3.18(react@18.3.1))(dayjs@1.11.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/hooks': 8.3.18(react@18.3.1)
-      '@onlyoffice/document-editor-react': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-avatar': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-label': 2.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-popover': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-progress': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-select': 2.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-separator': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slider': 1.3.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.4(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-switch': 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toast': 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf-viewer/default-layout': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-pdf/renderer': 4.5.1(react@18.3.1)
-      '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1))(react@18.3.1)
-      '@tabler/icons-react': 3.44.0(react@18.3.1)
-      '@tanstack/react-query': 5.100.10(react@18.3.1)
-      '@tanstack/react-query-devtools': 5.100.10(@tanstack/react-query@5.100.10(react@18.3.1))(react@18.3.1)
-      '@tanstack/react-table': 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@tinymce/tinymce-react': 6.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tinymce@7.9.2)
+      '@chakra-ui/react': 3.35.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@19.2.6)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)
+      '@hookform/resolvers': 5.4.0(react-hook-form@7.76.0(react@19.2.6))
+      '@lottiefiles/react-lottie-player': 3.6.0(react@19.2.6)
+      '@mantine/core': 8.3.18(@mantine/hooks@8.3.18(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mantine/dates': 8.3.18(@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@8.3.18(react@19.2.6))(dayjs@1.11.20)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mantine/hooks': 8.3.18(react@19.2.6)
+      '@onlyoffice/document-editor-react': 2.1.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-avatar': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-label': 2.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-progress': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-select': 2.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-separator': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slider': 1.3.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.4(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-switch': 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toast': 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/default-layout': 3.12.0(pdfjs-dist@3.11.174)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf/renderer': 4.5.1(react@19.2.6)
+      '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@19.2.6)(redux@5.0.1))(react@19.2.6)
+      '@tabler/icons-react': 3.44.0(react@19.2.6)
+      '@tanstack/react-query': 5.100.10(react@19.2.6)
+      '@tanstack/react-query-devtools': 5.100.10(@tanstack/react-query@5.100.10(react@19.2.6))(react@19.2.6)
+      '@tanstack/react-table': 8.21.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@tinymce/tinymce-react': 6.3.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(tinymce@7.9.2)
       '@tiptap/extension-color': 3.23.1(@tiptap/extension-text-style@3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1)))
       '@tiptap/extension-highlight': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))
       '@tiptap/extension-image': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))
@@ -14966,18 +14966,18 @@ snapshots:
       '@tiptap/extension-text-align': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))
       '@tiptap/extension-text-style': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))
       '@tiptap/extension-underline': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))
-      '@tiptap/react': 3.23.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))(@tiptap/pm@3.23.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tiptap/react': 3.23.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))(@tiptap/pm@3.23.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@tiptap/starter-kit': 3.23.1
       axios: 1.16.0
       class-variance-authority: 0.7.1
       clsx: 2.1.1
-      cmdk: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      cmdk: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       date-fns: 3.6.0
       dayjs: 1.11.20
       ethiopian-calendar-date-converter: 2.1.6
       ethiopian-calendar-new: 1.1.0
       file-type: 18.7.0
-      framer-motion: 12.38.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      framer-motion: 12.38.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       html2canvas: 1.4.1
       i18next: 25.10.10(typescript@5.9.3)
       i18next-browser-languagedetector: 8.2.1
@@ -14985,39 +14985,39 @@ snapshots:
       js-cookie: 3.0.5
       jspdf: 3.0.4
       lodash: 4.18.1
-      lucide-react: 0.513.0(react@18.3.1)
-      mui-ethiopian-datepicker: 0.3.2(hjxdxgubdlhng5uhyvidfkiyo4)
-      next-themes: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      lucide-react: 0.513.0(react@19.2.6)
+      mui-ethiopian-datepicker: 0.3.2(paybi2fdkyh35y7nbr3nki3zze)
+      next-themes: 0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       qs: 6.15.1
-      react: 18.3.1
-      react-cookie: 8.1.2(@types/react@18.3.28)(react@18.3.1)
-      react-datepicker: 8.10.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-day-picker: 9.14.0(react@18.3.1)
-      react-dom: 18.3.1(react@18.3.1)
-      react-dropzone: 14.4.1(react@18.3.1)
-      react-hook-form: 7.76.0(react@18.3.1)
-      react-i18next: 15.7.4(i18next@25.10.10(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
-      react-icons: 5.6.0(react@18.3.1)
-      react-image-crop: 11.0.10(react@18.3.1)
-      react-intersection-observer: 9.16.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 19.2.6
+      react-cookie: 8.1.2(@types/react@18.3.28)(react@19.2.6)
+      react-datepicker: 8.10.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-day-picker: 9.14.0(react@19.2.6)
+      react-dom: 19.2.6(react@19.2.6)
+      react-dropzone: 14.4.1(react@19.2.6)
+      react-hook-form: 7.76.0(react@19.2.6)
+      react-i18next: 15.7.4(i18next@25.10.10(typescript@5.9.3))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)
+      react-icons: 5.6.0(react@19.2.6)
+      react-image-crop: 11.0.10(react@19.2.6)
+      react-intersection-observer: 9.16.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react-is: 19.2.6
-      react-joyride: 2.9.3(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-pdf: 10.4.1(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-pdf-html: 2.1.5(@react-pdf/renderer@4.5.1(react@18.3.1))(react@18.3.1)
-      react-redux: 9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1)
-      react-resizable-panels: 3.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-router-dom: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-signature-canvas: 1.1.0-alpha.2(@types/prop-types@15.7.15)(@types/react@18.3.28)(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      recharts: 3.8.1(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react-is@19.2.6)(react@18.3.1)(redux@5.0.1)
+      react-joyride: 2.9.3(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-pdf: 10.4.1(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-pdf-html: 2.1.5(@react-pdf/renderer@4.5.1(react@19.2.6))(react@19.2.6)
+      react-redux: 9.2.0(@types/react@18.3.28)(react@19.2.6)(redux@5.0.1)
+      react-resizable-panels: 3.0.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-router-dom: 6.30.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-signature-canvas: 1.1.0-alpha.2(@types/prop-types@15.7.15)(@types/react@18.3.28)(prop-types@15.8.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      recharts: 3.8.1(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react-is@19.2.6)(react@19.2.6)(redux@5.0.1)
       socket.io-client: 4.8.3
-      sonner: 2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      sonner: 2.0.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       tailwind-merge: 3.6.0
       tailwind-scrollbar-hide: 4.0.0(tailwindcss@4.3.0)
       tailwindcss: 4.3.0
       tailwindcss-animate: 1.0.7(tailwindcss@4.3.0)
       tesseract.js: 7.0.0
       tinymce: 7.9.2
-      vaul: 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      vaul: 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       xlsx: 0.18.5
       zod: 3.25.76
     transitivePeerDependencies:
@@ -15911,14 +15911,14 @@ snapshots:
       '@zag-js/types': 1.40.0
       '@zag-js/utils': 1.40.0
 
-  '@zag-js/react@1.40.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@zag-js/react@1.40.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@zag-js/core': 1.40.0
       '@zag-js/store': 1.40.0
       '@zag-js/types': 1.40.0
       '@zag-js/utils': 1.40.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
   '@zag-js/rect-utils@1.40.0': {}
 
@@ -17233,14 +17233,14 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  cmdk@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  cmdk@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
@@ -18895,15 +18895,15 @@ snapshots:
     dependencies:
       map-cache: 0.2.2
 
-  framer-motion@12.38.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  framer-motion@12.38.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       motion-dom: 12.38.0
       motion-utils: 12.36.0
       tslib: 2.8.1
     optionalDependencies:
       '@emotion/is-prop-valid': 1.4.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
   fresh@0.5.2: {}
 
@@ -20662,13 +20662,13 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@0.513.0(react@18.3.1):
+  lucide-react@0.513.0(react@19.2.6):
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
 
-  lucide-react@1.14.0(react@18.3.1):
+  lucide-react@1.14.0(react@19.2.6):
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   magic-string@0.30.17:
     dependencies:
@@ -20963,16 +20963,16 @@ snapshots:
     transitivePeerDependencies:
       - '@types/node'
 
-  mui-ethiopian-datepicker@0.3.2(hjxdxgubdlhng5uhyvidfkiyo4):
+  mui-ethiopian-datepicker@0.3.2(paybi2fdkyh35y7nbr3nki3zze):
     dependencies:
-      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
-      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
-      '@mui/icons-material': 5.18.0(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
-      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/x-date-pickers': 6.20.2(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(date-fns@3.6.0)(dayjs@1.11.20)(moment@2.30.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@19.2.6)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)
+      '@mui/icons-material': 5.18.0(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@types/react@18.3.28)(react@19.2.6)
+      '@mui/material': 5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mui/x-date-pickers': 6.20.2(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(react@19.2.6))(@types/react@18.3.28)(date-fns@3.6.0)(dayjs@1.11.20)(moment@2.30.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       date-fns: 3.6.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
   multer@2.1.1:
     dependencies:
@@ -21070,10 +21070,10 @@ snapshots:
       reflect-metadata: 0.1.14
       rxjs: 7.8.2
 
-  next-themes@0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next-themes@0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
   next-tick@1.1.0: {}
 
@@ -21870,65 +21870,65 @@ snapshots:
     dependencies:
       inherits: 2.0.4
 
-  radix-ui@1.4.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  radix-ui@1.4.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-accessible-icon': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-aspect-ratio': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-avatar': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-form': 0.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-label': 2.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-menubar': 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-one-time-password-field': 0.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-password-toggle-field': 0.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-popover': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-progress': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-select': 2.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-separator': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slider': 1.3.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-switch': 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toast': 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toolbar': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-accessible-icon': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-aspect-ratio': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-avatar': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-form': 0.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-menubar': 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-one-time-password-field': 0.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-password-toggle-field': 0.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-progress': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-select': 2.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slider': 1.3.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-switch': 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toast': 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toolbar': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.28)(react@19.2.6)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
@@ -21968,90 +21968,89 @@ snapshots:
       iconv-lite: 0.7.2
       unpipe: 1.0.0
 
-  react-cookie@8.1.2(@types/react@18.3.28)(react@18.3.1):
+  react-cookie@8.1.2(@types/react@18.3.28)(react@19.2.6):
     dependencies:
       '@types/hoist-non-react-statics': 3.3.7(@types/react@18.3.28)
       hoist-non-react-statics: 3.3.2
-      react: 18.3.1
+      react: 19.2.6
       universal-cookie: 8.1.2
     transitivePeerDependencies:
       - '@types/react'
 
-  react-datepicker@8.10.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-datepicker@8.10.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
-      '@floating-ui/react': 0.27.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/react': 0.27.19(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       clsx: 2.1.1
       date-fns: 3.6.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
-  react-day-picker@9.14.0(react@18.3.1):
+  react-day-picker@9.14.0(react@19.2.6):
     dependencies:
       '@date-fns/tz': 1.4.1
       '@tabby_ai/hijri-converter': 1.0.5
       date-fns: 3.6.0
       date-fns-jalali: 4.1.0-0
-      react: 18.3.1
+      react: 19.2.6
 
-  react-dom@18.3.1(react@18.3.1):
+  react-dom@19.2.6(react@19.2.6):
     dependencies:
-      loose-envify: 1.4.0
-      react: 18.3.1
-      scheduler: 0.23.2
+      react: 19.2.6
+      scheduler: 0.27.0
 
-  react-dropzone@14.4.1(react@18.3.1):
+  react-dropzone@14.4.1(react@19.2.6):
     dependencies:
       attr-accept: 2.2.5
       file-selector: 2.1.2
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.2.6
 
-  react-floater@0.7.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-floater@0.7.9(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       deepmerge: 4.3.1
       is-lite: 0.8.2
       popper.js: 1.16.1
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
       tree-changes: 0.9.3
 
-  react-hook-form@7.75.0(react@18.3.1):
+  react-hook-form@7.75.0(react@19.2.6):
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
 
-  react-hook-form@7.76.0(react@18.3.1):
+  react-hook-form@7.76.0(react@19.2.6):
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
 
-  react-i18next@15.7.4(i18next@25.10.10(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3):
+  react-i18next@15.7.4(i18next@25.10.10(typescript@5.9.3))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3):
     dependencies:
       '@babel/runtime': 7.29.2
       html-parse-stringify: 3.0.1
       i18next: 25.10.10(typescript@5.9.3)
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
-      react-dom: 18.3.1(react@18.3.1)
+      react-dom: 19.2.6(react@19.2.6)
       typescript: 5.9.3
 
-  react-icons@5.6.0(react@18.3.1):
+  react-icons@5.6.0(react@19.2.6):
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
 
-  react-image-crop@11.0.10(react@18.3.1):
+  react-image-crop@11.0.10(react@19.2.6):
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
 
-  react-innertext@1.1.5(@types/react@18.3.28)(react@18.3.1):
+  react-innertext@1.1.5(@types/react@18.3.28)(react@19.2.6):
     dependencies:
       '@types/react': 18.3.28
-      react: 18.3.1
+      react: 19.2.6
 
-  react-intersection-observer@9.16.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-intersection-observer@9.16.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
-      react-dom: 18.3.1(react@18.3.1)
+      react-dom: 19.2.6(react@19.2.6)
 
   react-is@16.13.1: {}
 
@@ -22059,16 +22058,16 @@ snapshots:
 
   react-is@19.2.6: {}
 
-  react-joyride@2.9.3(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-joyride@2.9.3(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       '@gilbarbara/deep-equal': 0.3.1
       deep-diff: 1.0.2
       deepmerge: 4.3.1
       is-lite: 1.2.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-floater: 0.7.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-innertext: 1.1.5(@types/react@18.3.28)(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-floater: 0.7.9(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-innertext: 1.1.5(@types/react@18.3.28)(react@19.2.6)
       react-is: 16.13.1
       scroll: 3.0.1
       scrollparent: 2.1.0
@@ -22077,23 +22076,23 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  react-number-format@5.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-number-format@5.4.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
-  react-pdf-html@2.1.5(@react-pdf/renderer@4.5.1(react@18.3.1))(react@18.3.1):
+  react-pdf-html@2.1.5(@react-pdf/renderer@4.5.1(react@19.2.6))(react@19.2.6):
     dependencies:
-      '@react-pdf/renderer': 4.5.1(react@18.3.1)
+      '@react-pdf/renderer': 4.5.1(react@19.2.6)
       css-tree: 1.1.3
       node-html-parser: 6.1.13
-      react: 18.3.1
+      react: 19.2.6
 
   react-pdf-viewer@0.1.0:
     dependencies:
       pdfjs-dist: 3.11.174
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
       webpack: 3.12.0
       webpack-dev-server: 2.11.5(webpack@3.12.0)
     transitivePeerDependencies:
@@ -22102,7 +22101,7 @@ snapshots:
       - webpack-cli
       - webpack-command
 
-  react-pdf@10.4.1(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-pdf@10.4.1(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       clsx: 2.1.1
       dequal: 2.0.3
@@ -22110,8 +22109,8 @@ snapshots:
       make-event-props: 2.0.0
       merge-refs: 2.0.0(@types/react@18.3.28)
       pdfjs-dist: 3.11.174
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
       tiny-invariant: 1.3.3
       warning: 4.0.3
     optionalDependencies:
@@ -22120,109 +22119,107 @@ snapshots:
       - encoding
       - supports-color
 
-  react-redux@9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1):
+  react-redux@9.2.0(@types/react@18.3.28)(react@19.2.6)(redux@5.0.1):
     dependencies:
       '@types/use-sync-external-store': 0.0.6
-      react: 18.3.1
-      use-sync-external-store: 1.6.0(react@18.3.1)
+      react: 19.2.6
+      use-sync-external-store: 1.6.0(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
       redux: 5.0.1
 
   react-refresh@0.17.0: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@18.3.28)(react@18.3.1):
+  react-remove-scroll-bar@2.3.8(@types/react@18.3.28)(react@19.2.6):
     dependencies:
-      react: 18.3.1
-      react-style-singleton: 2.2.3(@types/react@18.3.28)(react@18.3.1)
+      react: 19.2.6
+      react-style-singleton: 2.2.3(@types/react@18.3.28)(react@19.2.6)
       tslib: 2.8.1
     optionalDependencies:
       '@types/react': 18.3.28
 
-  react-remove-scroll@2.7.2(@types/react@18.3.28)(react@18.3.1):
+  react-remove-scroll@2.7.2(@types/react@18.3.28)(react@19.2.6):
     dependencies:
-      react: 18.3.1
-      react-remove-scroll-bar: 2.3.8(@types/react@18.3.28)(react@18.3.1)
-      react-style-singleton: 2.2.3(@types/react@18.3.28)(react@18.3.1)
+      react: 19.2.6
+      react-remove-scroll-bar: 2.3.8(@types/react@18.3.28)(react@19.2.6)
+      react-style-singleton: 2.2.3(@types/react@18.3.28)(react@19.2.6)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@18.3.28)(react@18.3.1)
-      use-sidecar: 1.1.3(@types/react@18.3.28)(react@18.3.1)
+      use-callback-ref: 1.3.3(@types/react@18.3.28)(react@19.2.6)
+      use-sidecar: 1.1.3(@types/react@18.3.28)(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
 
-  react-resizable-panels@3.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-resizable-panels@3.0.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
-  react-router-dom@6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-router-dom@6.30.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       '@remix-run/router': 1.23.2
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-router: 6.30.3(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-router: 6.30.3(react@19.2.6)
 
-  react-router-dom@7.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-router-dom@7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-router: 7.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-router: 7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
 
-  react-router@6.30.3(react@18.3.1):
+  react-router@6.30.3(react@19.2.6):
     dependencies:
       '@remix-run/router': 1.23.2
-      react: 18.3.1
+      react: 19.2.6
 
-  react-router@7.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-router@7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       cookie: 1.1.1
-      react: 18.3.1
+      react: 19.2.6
       set-cookie-parser: 2.7.2
     optionalDependencies:
-      react-dom: 18.3.1(react@18.3.1)
+      react-dom: 19.2.6(react@19.2.6)
 
-  react-signature-canvas@1.1.0-alpha.2(@types/prop-types@15.7.15)(@types/react@18.3.28)(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-signature-canvas@1.1.0-alpha.2(@types/prop-types@15.7.15)(@types/react@18.3.28)(prop-types@15.8.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       '@babel/runtime': 7.29.2
       '@types/signature_pad': 2.3.6
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
       signature_pad: 2.3.2
       trim-canvas: 0.1.2
     optionalDependencies:
       '@types/prop-types': 15.7.15
       '@types/react': 18.3.28
 
-  react-style-singleton@2.2.3(@types/react@18.3.28)(react@18.3.1):
+  react-style-singleton@2.2.3(@types/react@18.3.28)(react@19.2.6):
     dependencies:
       get-nonce: 1.0.1
-      react: 18.3.1
+      react: 19.2.6
       tslib: 2.8.1
     optionalDependencies:
       '@types/react': 18.3.28
 
-  react-textarea-autosize@8.5.9(@types/react@18.3.28)(react@18.3.1):
+  react-textarea-autosize@8.5.9(@types/react@18.3.28)(react@19.2.6):
     dependencies:
       '@babel/runtime': 7.29.2
-      react: 18.3.1
-      use-composed-ref: 1.4.0(@types/react@18.3.28)(react@18.3.1)
-      use-latest: 1.3.0(@types/react@18.3.28)(react@18.3.1)
+      react: 19.2.6
+      use-composed-ref: 1.4.0(@types/react@18.3.28)(react@19.2.6)
+      use-latest: 1.3.0(@types/react@18.3.28)(react@19.2.6)
     transitivePeerDependencies:
       - '@types/react'
 
-  react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-transition-group@4.4.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       '@babel/runtime': 7.29.2
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
-  react@18.3.1:
-    dependencies:
-      loose-envify: 1.4.0
+  react@19.2.6: {}
 
   read-cache@1.0.0:
     dependencies:
@@ -22313,21 +22310,21 @@ snapshots:
       tiny-invariant: 1.3.3
       tslib: 2.8.1
 
-  recharts@3.8.1(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react-is@19.2.6)(react@18.3.1)(redux@5.0.1):
+  recharts@3.8.1(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react-is@19.2.6)(react@19.2.6)(redux@5.0.1):
     dependencies:
-      '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1))(react@18.3.1)
+      '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@19.2.6)(redux@5.0.1))(react@19.2.6)
       clsx: 2.1.1
       decimal.js-light: 2.5.1
       es-toolkit: 1.46.1
       eventemitter3: 5.0.4
       immer: 10.2.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
       react-is: 19.2.6
-      react-redux: 9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1)
+      react-redux: 9.2.0(@types/react@18.3.28)(react@19.2.6)(redux@5.0.1)
       reselect: 5.1.1
       tiny-invariant: 1.3.3
-      use-sync-external-store: 1.6.0(react@18.3.1)
+      use-sync-external-store: 1.6.0(react@19.2.6)
       victory-vendor: 37.3.6
     transitivePeerDependencies:
       - '@types/react'
@@ -22603,12 +22600,10 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
-  scheduler@0.23.2:
-    dependencies:
-      loose-envify: 1.4.0
-
   scheduler@0.25.0-rc-603e6108-20241029: {}
 
+  scheduler@0.27.0: {}
+
   schema-utils@3.3.0:
     dependencies:
       '@types/json-schema': 7.0.15
@@ -22954,10 +22949,10 @@ snapshots:
       faye-websocket: 0.10.0
       uuid: 3.4.0
 
-  sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  sonner@2.0.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
 
   source-list-map@2.0.1: {}
 
@@ -23890,43 +23885,43 @@ snapshots:
       punycode: 1.4.1
       qs: 6.15.1
 
-  use-callback-ref@1.3.3(@types/react@18.3.28)(react@18.3.1):
+  use-callback-ref@1.3.3(@types/react@18.3.28)(react@19.2.6):
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
       tslib: 2.8.1
     optionalDependencies:
       '@types/react': 18.3.28
 
-  use-composed-ref@1.4.0(@types/react@18.3.28)(react@18.3.1):
+  use-composed-ref@1.4.0(@types/react@18.3.28)(react@19.2.6):
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  use-isomorphic-layout-effect@1.2.1(@types/react@18.3.28)(react@18.3.1):
+  use-isomorphic-layout-effect@1.2.1(@types/react@18.3.28)(react@19.2.6):
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
     optionalDependencies:
       '@types/react': 18.3.28
 
-  use-latest@1.3.0(@types/react@18.3.28)(react@18.3.1):
+  use-latest@1.3.0(@types/react@18.3.28)(react@19.2.6):
     dependencies:
-      react: 18.3.1
-      use-isomorphic-layout-effect: 1.2.1(@types/react@18.3.28)(react@18.3.1)
+      react: 19.2.6
+      use-isomorphic-layout-effect: 1.2.1(@types/react@18.3.28)(react@19.2.6)
     optionalDependencies:
       '@types/react': 18.3.28
 
-  use-sidecar@1.1.3(@types/react@18.3.28)(react@18.3.1):
+  use-sidecar@1.1.3(@types/react@18.3.28)(react@19.2.6):
     dependencies:
       detect-node-es: 1.1.0
-      react: 18.3.1
+      react: 19.2.6
       tslib: 2.8.1
     optionalDependencies:
       '@types/react': 18.3.28
 
-  use-sync-external-store@1.6.0(react@18.3.1):
+  use-sync-external-store@1.6.0(react@19.2.6):
     dependencies:
-      react: 18.3.1
+      react: 19.2.6
 
   use@3.1.1: {}
 
@@ -23979,11 +23974,11 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vaul@1.1.2(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  vaul@1.1.2(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
@@ -24576,9 +24571,9 @@ snapshots:
 
   zod@4.4.3: {}
 
-  zustand@5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@18.3.1)(use-sync-external-store@1.6.0(react@18.3.1)):
+  zustand@5.0.13(@types/react@18.3.28)(immer@11.1.8)(react@19.2.6)(use-sync-external-store@1.6.0(react@19.2.6)):
     optionalDependencies:
       '@types/react': 18.3.28
       immer: 11.1.8
-      react: 18.3.1
-      use-sync-external-store: 1.6.0(react@18.3.1)
+      react: 19.2.6
+      use-sync-external-store: 1.6.0(react@19.2.6)

From 80db8f11df6a17eceb84012042ea6cd77b771725 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 16:21:14 +0300
Subject: [PATCH 10/13] refactor

---
 .../src/pages/bookings/NewBookingPage.tsx     |    9 +-
 .../pages/bookings/new-booking-form/schema.ts |  105 +-
 .../bookings/new-booking-form/shared.tsx      |   18 +-
 .../new-booking-form/step1-contract-type.tsx  |  140 ++
 .../new-booking-form/step2-service-type.tsx   |   72 +
 .../step3-first-last-mile.tsx                 |  148 ++
 .../bookings/new-booking-form/step4-route.tsx |  124 ++
 .../new-booking-form/step5-cargo-details.tsx  |  430 ++++++
 .../step6-wagon-allocation.tsx                |  139 ++
 .../new-booking-form/step7-documents.tsx      |   65 +
 .../new-booking-form/step8-review.tsx         |  285 ++++
 .../pages/bookings/new-booking-form/steps.tsx | 1311 +----------------
 12 files changed, 1480 insertions(+), 1366 deletions(-)
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step1-contract-type.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step3-first-last-mile.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step7-documents.tsx
 create mode 100644 apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx

diff --git a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
index 2fe104665..e23b44cb2 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
@@ -42,8 +42,7 @@ export default function NewBookingPage() {
 
   const originYard = form.watch("originYard");
   const destinationYard = form.watch("destinationYard");
-  const containerType = form.watch("containerType");
-  const quantity = form.watch("quantity");
+  const containers = form.watch("containers");
   const previousContractRef = form.watch("previousContractRef");
   const contractId =
     form.watch("draftContractId") || form.watch("previousContractRef");
@@ -54,9 +53,9 @@ export default function NewBookingPage() {
   );
 
   const wagons = useMemo(() => {
-    if (!containerType || !quantity) return null;
-    return calcWagons(containerType, parseInt(quantity) || 1);
-  }, [containerType, quantity]);
+    if (!containers || containers.length === 0) return null;
+    return calcWagons(containers);
+  }, [containers]);
 
   useEffect(() => {
     setRenewalValid(null);
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
index a34f716c1..f1921738d 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
@@ -121,23 +121,6 @@ export const BOOKING_DOCS_SETTING = {
       maxSizeMb: 5,
       order: 3,
     },
-    {
-      id: "f4",
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: null,
-      settingId: "booking-compliance",
-      fileKey: "national_id",
-      fileLabel: "National ID / Passport",
-      helpText:
-        "Valid government-issued ID or passport of the authorized signatory.",
-      isRequired: true,
-      isMultiple: false,
-      maxFiles: 1,
-      allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
-      maxSizeMb: 5,
-      order: 4,
-    },
     {
       id: "f5",
       createdAt: "",
@@ -189,9 +172,13 @@ export const bookingFormSchema = z
     breakBulkTypeOther: z.string(),
     isHazardous: z.boolean(),
     isRefrigerated: z.boolean(),
-    containerType: z.enum(["20ft", "40ft", ""]),
-    quantity: z.string(),
-    vgm: z.string(),
+    containers: z.array(
+      z.object({
+        type: z.enum(["20ft", "40ft"]),
+        qty: z.number(),
+        vgm: z.number(),
+      }),
+    ),
     consolidationEnabled: z.boolean(),
     documents: z.record(z.string(), fileValueSchema),
     notes: z.string(),
@@ -342,31 +329,31 @@ export const bookingFormSchema = z
     }
 
     if (data.cargoType === "container") {
-      if (!data.containerType) {
+      if (data.containers.length === 0) {
         ctx.addIssue({
           code: "custom",
-          path: ["containerType"],
-          message: "Select a container type.",
+          path: ["containers"],
+          message: "Add at least one container.",
         });
       }
 
-      const quantity = Number(data.quantity);
-      if (!data.quantity || !Number.isInteger(quantity) || quantity < 1) {
-        ctx.addIssue({
-          code: "custom",
-          path: ["quantity"],
-          message: "Enter at least 1 container.",
-        });
-      }
+      data.containers.forEach((c, i) => {
+        if (!c.qty || c.qty < 1) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["containers", i, "qty"],
+            message: "Enter at least 1 container.",
+          });
+        }
 
-      const vgm = Number(data.vgm);
-      if (!data.vgm || Number.isNaN(vgm) || vgm <= 0) {
-        ctx.addIssue({
-          code: "custom",
-          path: ["vgm"],
-          message: "Enter VGM greater than 0.",
-        });
-      }
+        if (!c.vgm || c.vgm <= 0) {
+          ctx.addIssue({
+            code: "custom",
+            path: ["containers", i, "vgm"],
+            message: "Enter VGM greater than 0.",
+          });
+        }
+      });
     }
 
     for (const key of REQUIRED_DOC_KEYS) {
@@ -413,9 +400,7 @@ export const initialBookingFormValues: BookingFormValues = {
   breakBulkTypeOther: "",
   isHazardous: false,
   isRefrigerated: false,
-  containerType: "",
-  quantity: "1",
-  vgm: "",
+  containers: [{ type: "20ft", qty: 1, vgm: 0 }],
   consolidationEnabled: false,
   documents: {},
   notes: "",
@@ -441,9 +426,7 @@ export const stepFields: Record<number, Array<keyof BookingFormValues>> = {
     "bulkCommodityOther",
     "breakBulkType",
     "breakBulkTypeOther",
-    "containerType",
-    "quantity",
-    "vgm",
+    "containers",
   ],
   6: ["consolidationEnabled"],
   7: ["documents"],
@@ -452,6 +435,12 @@ export const stepFields: Record<number, Array<keyof BookingFormValues>> = {
 
 export type RouteDirection = "import" | "export" | "domestic" | null;
 
+export interface ContainerConfig {
+  type: "20ft" | "40ft";
+  qty: number;
+  vgm: number;
+}
+
 export interface WagonCalcResult {
   totalWagons: number;
   hasOddUnit: boolean;
@@ -477,15 +466,23 @@ export function getRouteDirection(
   return null;
 }
 
-export function calcWagons(
-  type: BookingFormValues["containerType"],
-  qty: number,
-): WagonCalcResult {
-  if (type === "40ft") {
-    return { totalWagons: qty, hasOddUnit: false, sharedWagons: qty };
+export function calcWagons(containers: ContainerConfig[]): WagonCalcResult {
+  let totalWagons = 0;
+  let hasOddUnit = false;
+  let sharedWagons = 0;
+
+  for (const c of containers) {
+    if (c.type === "40ft") {
+      totalWagons += c.qty;
+      sharedWagons += c.qty;
+    } else {
+      const pairs = Math.floor(c.qty / 2);
+      const odd = c.qty % 2;
+      totalWagons += pairs + odd;
+      sharedWagons += pairs;
+      if (odd > 0) hasOddUnit = true;
+    }
   }
 
-  const pairs = Math.floor(qty / 2);
-  const odd = qty % 2;
-  return { totalWagons: pairs + odd, hasOddUnit: odd > 0, sharedWagons: pairs };
+  return { totalWagons, hasOddUnit, sharedWagons };
 }
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx
index 298381ba0..f9fd5bdda 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx
@@ -22,8 +22,22 @@ import {
   SelectValue,
 } from "@edr/ui-common";
 import type { BookingFormValues } from "./schema";
+import { REQUIRED_DOC_KEYS } from "./schema";
 import { cn } from "@/lib/utils";
 
+export function getUploadedRequiredCount(
+  documents: BookingFormValues["documents"],
+) {
+  return REQUIRED_DOC_KEYS.filter((key) => {
+    const file = documents[key];
+    return Array.isArray(file) ? file.length > 0 : Boolean(file);
+  }).length;
+}
+
+export function OptionFieldError({ error }: { error?: { message?: string } }) {
+  return <FieldError errors={[error]} />;
+}
+
 export function OptionCard({
   selected,
   onClick,
@@ -151,7 +165,3 @@ export function SelectOptions({ options }: { options: readonly string[] }) {
     </>
   );
 }
-
-export function FormFieldDescription({ children }: { children: ReactNode }) {
-  return <FieldDescription>{children}</FieldDescription>;
-}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step1-contract-type.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step1-contract-type.tsx
new file mode 100644
index 000000000..1343bdb2e
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step1-contract-type.tsx
@@ -0,0 +1,140 @@
+import { Controller, type UseFormReturn } from "react-hook-form";
+import { FileText, Loader2, RefreshCw } from "lucide-react";
+import { Button, Field, FieldError, FieldLabel, Input } from "@edr/ui-common";
+import { type BookingFormValues, genContractId } from "./schema";
+import { AlertBox, OptionCard, OptionFieldError, StepHeader } from "./shared";
+
+type BookingForm = UseFormReturn<BookingFormValues>;
+
+export function Step1ContractType({
+  form,
+  renewalValid,
+  renewalValidating,
+  onValidate,
+}: {
+  form: BookingForm;
+  renewalValid: boolean | null;
+  renewalValidating: boolean;
+  onValidate: () => void;
+}) {
+  const contractType = form.watch("contractType");
+  const draftContractId = form.watch("draftContractId");
+  const previousContractRef = form.watch("previousContractRef");
+  const errors = form.formState.errors;
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Contract Type"
+        description="New contract or renewal of an existing one."
+      />
+
+      <Controller
+        name="contractType"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <div className="grid gap-3 md:grid-cols-2">
+              <OptionCard
+                selected={field.value === "new"}
+                onClick={() => {
+                  field.onChange("new");
+                  form.clearErrors(["contractType", "previousContractRef"]);
+                  if (!draftContractId) {
+                    form.setValue("draftContractId", genContractId(), {
+                      shouldDirty: true,
+                      shouldValidate: true,
+                    });
+                  }
+                }}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
+                  <FileText className="h-4 w-4 text-primary" />
+                </div>
+                <p className="font-semibold">New Contract</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Blank contract form. A draft ID is auto-generated.
+                </p>
+                {field.value === "new" && draftContractId && (
+                  <p className="mt-2 font-mono text-xs font-semibold text-primary">
+                    {draftContractId}
+                  </p>
+                )}
+              </OptionCard>
+
+              <OptionCard
+                selected={field.value === "renewal"}
+                onClick={() => {
+                  field.onChange("renewal");
+                  form.clearErrors("contractType");
+                }}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100">
+                  <RefreshCw className="h-4 w-4 text-sky-600" />
+                </div>
+                <p className="font-semibold">Contract Renewal</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Enter a previous reference to auto-populate historical
+                  parameters.
+                </p>
+              </OptionCard>
+            </div>
+            <OptionFieldError error={fieldState.error} />
+          </Field>
+        )}
+      />
+
+      {contractType === "renewal" && (
+        <div className="space-y-3 pt-1">
+          <Controller
+            name="previousContractRef"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid}>
+                <FieldLabel htmlFor="previousContractRef">
+                  Previous Contract Reference Number
+                </FieldLabel>
+                <div className="flex gap-2">
+                  <Input
+                    {...field}
+                    id="previousContractRef"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="e.g. EDR-2024-10001"
+                    className="font-mono"
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={onValidate}
+                    disabled={!previousContractRef || renewalValidating}
+                  >
+                    {renewalValidating ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      "Validate"
+                    )}
+                  </Button>
+                </div>
+                <FieldError
+                  errors={[fieldState.error, errors.draftContractId]}
+                />
+              </Field>
+            )}
+          />
+          {renewalValid === true && (
+            <AlertBox tone="success">
+              <strong>Contract found.</strong> Company details, route, and wagon
+              preferences will be pre-filled.
+            </AlertBox>
+          )}
+          {renewalValid === false && (
+            <AlertBox tone="error">
+              Contract Reference Number not found or unauthorized. Try{" "}
+              <span className="font-mono">EDR-2024-10001</span>.
+            </AlertBox>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx
new file mode 100644
index 000000000..1e4350e1b
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx
@@ -0,0 +1,72 @@
+import { Controller, type UseFormReturn } from "react-hook-form";
+import { Package, Train } from "lucide-react";
+import { Badge, Field, FieldError } from "@edr/ui-common";
+import { type BookingFormValues } from "./schema";
+import { OptionCard, OptionFieldError, StepHeader } from "./shared";
+
+type BookingForm = UseFormReturn<BookingFormValues>;
+
+export function Step2ServiceType({ form }: { form: BookingForm }) {
+  const serviceType = form.watch("serviceType");
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Service Type"
+        description="Select the service combination you require."
+      />
+
+      <Controller
+        name="serviceType"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <div className="grid gap-3 md:grid-cols-2">
+              <OptionCard
+                selected={serviceType === "rail"}
+                onClick={() => field.onChange("rail")}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100">
+                  <Train className="h-4 w-4 text-indigo-600" />
+                </div>
+                <p className="font-semibold">Rail Transport Only</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Rail transport along the EDR corridor, with optional
+                  first/last mile trucking.
+                </p>
+                <Badge className="mt-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-100">
+                  Option A
+                </Badge>
+              </OptionCard>
+
+              <OptionCard
+                selected={serviceType === "rail_forwarding"}
+                onClick={() => field.onChange("rail_forwarding")}
+              >
+                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
+                  <Package className="h-4 w-4 text-primary" />
+                </div>
+                <p className="font-semibold">
+                  Rail Transport & Freight Forwarding
+                </p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Rail transport plus documentation, customs liaison, and a
+                  dedicated coordinator.
+                </p>
+                <Badge className="mt-2 bg-emerald-100 text-emerald-700 hover:bg-emerald-100">
+                  Option B
+                </Badge>
+              </OptionCard>
+            </div>
+            <OptionFieldError error={fieldState.error} />
+          </Field>
+        )}
+      />
+
+      <p className="text-xs text-muted-foreground">
+        Customs and Clearance Service cannot be selected independently. It must
+        be bundled with a Rail Transport service.
+      </p>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step3-first-last-mile.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step3-first-last-mile.tsx
new file mode 100644
index 000000000..369eb03f1
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step3-first-last-mile.tsx
@@ -0,0 +1,148 @@
+import { Controller, type UseFormReturn } from "react-hook-form";
+import { Field, FieldError, Input, Switch } from "@edr/ui-common";
+import { type BookingFormValues } from "./schema";
+import { OptionCard, StepHeader } from "./shared";
+
+type BookingForm = UseFormReturn<BookingFormValues>;
+
+export function Step3FirstLastMile({ form }: { form: BookingForm }) {
+  const firstMileEnabled = form.watch("firstMileEnabled");
+  const lastMileEnabled = form.watch("lastMileEnabled");
+  const equipmentReturn = form.watch("equipmentReturn");
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="First & Last Mile"
+        description="Configure trucking and container return options."
+      />
+
+      <div className="divide-y divide-border rounded-xl border border-border">
+        <div className="p-4">
+          <Controller
+            name="firstMileEnabled"
+            control={form.control}
+            render={({ field }) => (
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <p className="text-sm font-medium">First Mile - Pick-up</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Truck pick-up from your premises to the origin rail yard.
+                  </p>
+                </div>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={(value) => {
+                    field.onChange(value);
+                    if (!value) {
+                      form.setValue("pickUpAddress", "", {
+                        shouldDirty: true,
+                        shouldValidate: true,
+                      });
+                    }
+                  }}
+                />
+              </div>
+            )}
+          />
+          {firstMileEnabled && (
+            <Controller
+              name="pickUpAddress"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field className="mt-3" data-invalid={fieldState.invalid}>
+                  <Input
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Pick-up address *"
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+          )}
+        </div>
+
+        <div className="p-4">
+          <Controller
+            name="lastMileEnabled"
+            control={form.control}
+            render={({ field }) => (
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <p className="text-sm font-medium">Last Mile - Delivery</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Truck delivery from the destination rail yard to the final
+                    address.
+                  </p>
+                </div>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={(value) => {
+                    field.onChange(value);
+                    if (!value) {
+                      form.setValue("deliveryAddress", "", {
+                        shouldDirty: true,
+                        shouldValidate: true,
+                      });
+                    }
+                  }}
+                />
+              </div>
+            )}
+          />
+          {lastMileEnabled && (
+            <Controller
+              name="deliveryAddress"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field className="mt-3" data-invalid={fieldState.invalid}>
+                  <Input
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                    placeholder="Delivery address *"
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+          )}
+        </div>
+
+        <div className="p-4">
+          <p className="mb-3 text-sm font-medium">Equipment Return</p>
+          <p className="mb-3 text-xs text-muted-foreground">
+            Declare whether the container asset will be returned after
+            unloading.
+          </p>
+          <Controller
+            name="equipmentReturn"
+            control={form.control}
+            render={({ field }) => (
+              <div className="grid gap-2 sm:grid-cols-2">
+                <OptionCard
+                  selected={equipmentReturn === "with_return"}
+                  onClick={() => field.onChange("with_return")}
+                >
+                  <p className="text-sm font-semibold">With Return</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Container returned to EDR after unloading.
+                  </p>
+                </OptionCard>
+                <OptionCard
+                  selected={equipmentReturn === "without_return"}
+                  onClick={() => field.onChange("without_return")}
+                >
+                  <p className="text-sm font-semibold">Without Return</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Container retained by the customer after delivery.
+                  </p>
+                </OptionCard>
+              </div>
+            )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx
new file mode 100644
index 000000000..7fc5b7b02
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx
@@ -0,0 +1,124 @@
+import { Controller, type UseFormReturn } from "react-hook-form";
+import { Flame, MapPin, Snowflake } from "lucide-react";
+import { Field, Separator, Switch } from "@edr/ui-common";
+import {
+  type BookingFormValues,
+  getRouteDirection,
+  STATIONS,
+} from "./schema";
+import { SelectField, SelectOptions, StepHeader, StepLabel } from "./shared";
+
+type BookingForm = UseFormReturn<BookingFormValues>;
+
+export function Step4Route({ form }: { form: BookingForm }) {
+  const originYard = form.watch("originYard");
+  const destinationYard = form.watch("destinationYard");
+  const direction = getRouteDirection(originYard, destinationYard);
+  const directionStyle: Record<string, string> = {
+    export: "bg-sky-50 text-sky-800 border-sky-200",
+    import: "bg-amber-50 text-amber-800 border-amber-200",
+    domestic: "bg-muted text-muted-foreground border-border",
+  };
+  const directionLabel: Record<string, string> = {
+    export: "Export workflow (Ethiopia to Djibouti)",
+    import: "Import workflow (Djibouti to Ethiopia)",
+    domestic: "Domestic corridor",
+  };
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Route"
+        description="Select the origin and destination yards."
+      />
+
+      <div className="space-y-3">
+        <StepLabel>Route</StepLabel>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <Controller
+            name="originYard"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <SelectField
+                field={field}
+                error={fieldState.error}
+                label="Origin Yard*"
+                placeholder="Select origin..."
+              >
+                <SelectOptions
+                  options={STATIONS.filter((s) => s !== destinationYard)}
+                />
+              </SelectField>
+            )}
+          />
+          <Controller
+            name="destinationYard"
+            control={form.control}
+            render={({ field, fieldState }) => (
+              <SelectField
+                field={field}
+                error={fieldState.error}
+                label="Destination Yard *"
+                placeholder="Select destination..."
+              >
+                <SelectOptions
+                  options={STATIONS.filter((s) => s !== originYard)}
+                />
+              </SelectField>
+            )}
+          />
+        </div>
+        {direction && (
+          <div
+            className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium ${directionStyle[direction]}`}
+          >
+            <MapPin className="h-3.5 w-3.5 shrink-0" />
+            {directionLabel[direction]}
+          </div>
+        )}
+      </div>
+
+      <Separator />
+
+      <div className="space-y-0 divide-y divide-border">
+        <Controller
+          name="isHazardous"
+          control={form.control}
+          render={({ field }) => (
+            <div className="flex items-center justify-between py-3">
+              <div className="flex items-center gap-3">
+                <Flame className="h-4 w-4 shrink-0 text-red-500" />
+                <div>
+                  <p className="text-sm font-medium">Hazardous Material</p>
+                  <p className="text-xs text-muted-foreground">
+                    Applies a Hazard Surcharge to the final bill.
+                  </p>
+                </div>
+              </div>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </div>
+          )}
+        />
+        <Controller
+          name="isRefrigerated"
+          control={form.control}
+          render={({ field }) => (
+            <div className="flex items-center justify-between py-3">
+              <div className="flex items-center gap-3">
+                <Snowflake className="h-4 w-4 shrink-0 text-sky-500" />
+                <div>
+                  <p className="text-sm font-medium">Refrigerated Cargo</p>
+                  <p className="text-xs text-muted-foreground">
+                    Temperature-controlled transport applies a Refrigerator
+                    Surcharge.
+                  </p>
+                </div>
+              </div>
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            </div>
+          )}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
new file mode 100644
index 000000000..f4fee0bf8
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
@@ -0,0 +1,430 @@
+import { Controller, useFieldArray, type UseFormReturn } from "react-hook-form";
+import { MapPin, Package, Plus, Trash2, Weight } from "lucide-react";
+import { Button, Field, FieldError, FieldLabel, Input, Separator } from "@edr/ui-common";
+import {
+  BREAK_BULK_TYPES,
+  BULK_COMMODITIES,
+  type BookingFormValues,
+  type RouteDirection,
+} from "./schema";
+import {
+  AlertBox,
+  OptionCard,
+  SelectField,
+  SelectOptions,
+  StepHeader,
+  StepLabel,
+} from "./shared";
+
+type BookingForm = UseFormReturn<BookingFormValues>;
+
+export function Step5CargoDetails({
+  form,
+  direction,
+}: {
+  form: BookingForm;
+  direction: RouteDirection;
+}) {
+  const cargoType = form.watch("cargoType");
+  const freightType = form.watch("freightType");
+  const bulkCommodity = form.watch("bulkCommodity");
+  const breakBulkType = form.watch("breakBulkType");
+  const containers = form.watch("containers");
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "containers",
+  });
+
+  function getOverweightAlert(
+    type: "20ft" | "40ft",
+    vgm: number,
+  ): string | null {
+    if (type === "20ft" && vgm > 0) {
+      const limit = direction === "export" ? 25 : 20;
+      if (vgm > limit) {
+        return `VGM ${vgm}t exceeds the ${limit}t ${direction ?? "standard"} limit for a 20ft container. An Overweight Surcharge will apply.`;
+      }
+    }
+    if (type === "40ft" && vgm > 32.5) {
+      return `VGM ${vgm}t exceeds the 32.5t global limit for a 40ft container. An Overweight Surcharge will apply.`;
+    }
+    return null;
+  }
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Cargo Details"
+        description="Define your cargo type, weight, and container configuration."
+      />
+
+      <div className="space-y-3">
+        <StepLabel>Cargo Type *</StepLabel>
+        <Controller
+          name="cargoType"
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <div className="grid gap-3 sm:grid-cols-2">
+                <OptionCard
+                  selected={cargoType === "container"}
+                  onClick={() => {
+                    field.onChange("container");
+                    form.setValue("freightType", "", { shouldDirty: true });
+                    form.setValue("cargoWeight", "", { shouldDirty: true });
+                  }}
+                >
+                  <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
+                    <Package className="h-4 w-4 text-primary" />
+                  </div>
+                  <p className="font-semibold">Container</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Pre-packed containerized cargo (20ft / 40ft).
+                  </p>
+                </OptionCard>
+                <OptionCard
+                  selected={cargoType === "bulk"}
+                  onClick={() => {
+                    field.onChange("bulk");
+                    form.setValue("containers", [{ type: "20ft", qty: 1, vgm: 0 }], { shouldDirty: true });
+                  }}
+                >
+                  <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100">
+                    <Weight className="h-4 w-4 text-amber-600" />
+                  </div>
+                  <p className="font-semibold">Bulk</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    Bulk commodities or break-bulk cargo.
+                  </p>
+                </OptionCard>
+              </div>
+              <FieldError errors={[fieldState.error]} />
+            </Field>
+          )}
+        />
+      </div>
+
+      {cargoType === "bulk" && (
+        <>
+          <Separator />
+          <div className="space-y-3">
+            <StepLabel>Freight Type *</StepLabel>
+            <Controller
+              name="freightType"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <OptionCard
+                      selected={freightType === "bulk"}
+                      onClick={() => field.onChange("bulk")}
+                    >
+                      <p className="font-semibold">Bulk</p>
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        Coffee, fertilizer, grain, ore, etc.
+                      </p>
+                    </OptionCard>
+                    <OptionCard
+                      selected={freightType === "break_bulk"}
+                      onClick={() => field.onChange("break_bulk")}
+                    >
+                      <p className="font-semibold">Break-Bulk</p>
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        Machinery, vehicles, project cargo, etc.
+                      </p>
+                    </OptionCard>
+                  </div>
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+
+            {freightType === "bulk" && (
+              <div className="space-y-2">
+                <Controller
+                  name="bulkCommodity"
+                  control={form.control}
+                  render={({ field, fieldState }) => (
+                    <SelectField
+                      field={field}
+                      error={fieldState.error}
+                      label="Commodity *"
+                      placeholder="Select commodity *"
+                    >
+                      <SelectOptions options={BULK_COMMODITIES} />
+                    </SelectField>
+                  )}
+                />
+                {bulkCommodity === "Others" && (
+                  <Controller
+                    name="bulkCommodityOther"
+                    control={form.control}
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <Input
+                          {...field}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="Specify commodity *"
+                        />
+                        <FieldError errors={[fieldState.error]} />
+                      </Field>
+                    )}
+                  />
+                )}
+              </div>
+            )}
+
+            {freightType === "break_bulk" && (
+              <div className="space-y-2">
+                <Controller
+                  name="breakBulkType"
+                  control={form.control}
+                  render={({ field, fieldState }) => (
+                    <SelectField
+                      field={field}
+                      error={fieldState.error}
+                      label="Break-bulk type *"
+                      placeholder="Select type *"
+                    >
+                      <SelectOptions options={BREAK_BULK_TYPES} />
+                    </SelectField>
+                  )}
+                />
+                {breakBulkType === "Others" && (
+                  <Controller
+                    name="breakBulkTypeOther"
+                    control={form.control}
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <Input
+                          {...field}
+                          aria-invalid={fieldState.invalid}
+                          placeholder="Specify break-bulk type *"
+                        />
+                        <FieldError errors={[fieldState.error]} />
+                      </Field>
+                    )}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+
+          <Separator />
+
+          <div className="space-y-3">
+            <StepLabel>Weight</StepLabel>
+            <Controller
+              name="cargoWeight"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="cargoWeight">
+                    Total Cargo Weight - VGM (Tons) *
+                  </FieldLabel>
+                  <div className="relative">
+                    <Weight className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      {...field}
+                      id="cargoWeight"
+                      type="number"
+                      aria-invalid={fieldState.invalid}
+                      placeholder="0.00"
+                      className="pl-9"
+                      min="0"
+                      step="0.01"
+                    />
+                  </div>
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            />
+          </div>
+        </>
+      )}
+
+      {cargoType === "container" && (
+        <>
+          <Separator />
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <StepLabel>Container Configuration</StepLabel>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => append({ type: "20ft", qty: 1, vgm: 0 })}
+              >
+                <Plus className="mr-1 h-3.5 w-3.5" />
+                Add Container
+              </Button>
+            </div>
+
+            {direction && (
+              <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <MapPin className="h-3.5 w-3.5" />
+                Route detected as{" "}
+                <span className="font-medium capitalize text-foreground">
+                  {direction}
+                </span>{" "}
+                workflow
+              </p>
+            )}
+
+            {fields.map((field, index) => {
+              const containerType = containers[index]?.type;
+              const vgm = containers[index]?.vgm ?? 0;
+              const alert = getOverweightAlert(containerType, vgm);
+
+              return (
+                <div
+                  key={field.id}
+                  className="space-y-3 rounded-xl border border-border p-4"
+                >
+                  <div className="flex items-center justify-between">
+                    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Container #{index + 1}
+                    </p>
+                    {fields.length > 1 && (
+                      <button
+                        type="button"
+                        onClick={() => remove(index)}
+                        className="text-xs text-destructive hover:underline"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </button>
+                    )}
+                  </div>
+
+                  <Controller
+                    name={`containers.${index}.type`}
+                    control={form.control}
+                    render={({ field: typeField, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel>Container Type *</FieldLabel>
+                        <div className="grid gap-2 sm:grid-cols-2">
+                          {[
+                            {
+                              val: "20ft" as const,
+                              label: "20ft Container (TEU)",
+                              limit:
+                                direction === "export"
+                                  ? "Max 25t per container"
+                                  : "Max 20t per container",
+                            },
+                            {
+                              val: "40ft" as const,
+                              label: "40ft Container (FEU)",
+                              limit: "Max 32.5t per container",
+                            },
+                          ].map((ct) => (
+                            <OptionCard
+                              key={ct.val}
+                              selected={typeField.value === ct.val}
+                              onClick={() => typeField.onChange(ct.val)}
+                            >
+                              <div className="mb-1 flex items-center gap-2">
+                                <Package className="h-4 w-4 text-primary" />
+                                <p className="font-semibold">{ct.label}</p>
+                              </div>
+                              <p className="text-xs text-muted-foreground">
+                                {ct.limit}
+                              </p>
+                            </OptionCard>
+                          ))}
+                        </div>
+                        <FieldError errors={[fieldState.error]} />
+                      </Field>
+                    )}
+                  />
+
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <Controller
+                      name={`containers.${index}.qty`}
+                      control={form.control}
+                      render={({ field: qtyField, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel>Quantity *</FieldLabel>
+                          <div className="flex items-center gap-2">
+                            <button
+                              type="button"
+                              onClick={() =>
+                                qtyField.onChange(
+                                  Math.max(1, (qtyField.value ?? 1) - 1),
+                                )
+                              }
+                              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
+                            >
+                              -
+                            </button>
+                            <Input
+                              value={qtyField.value ?? 1}
+                              onChange={(e) =>
+                                qtyField.onChange(
+                                  Math.max(1, parseInt(e.target.value) || 1),
+                                )
+                              }
+                              onBlur={qtyField.onBlur}
+                              type="number"
+                              aria-invalid={fieldState.invalid}
+                              className="text-center"
+                              min="1"
+                            />
+                            <button
+                              type="button"
+                              onClick={() =>
+                                qtyField.onChange(
+                                  (qtyField.value ?? 1) + 1,
+                                )
+                              }
+                              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
+                            >
+                              +
+                            </button>
+                          </div>
+                          <FieldError errors={[fieldState.error]} />
+                        </Field>
+                      )}
+                    />
+
+                    <Controller
+                      name={`containers.${index}.vgm`}
+                      control={form.control}
+                      render={({ field: vgmField, fieldState }) => (
+                        <Field data-invalid={fieldState.invalid}>
+                          <FieldLabel>VGM (Tons) *</FieldLabel>
+                          <Input
+                            value={vgmField.value ?? 0}
+                            onChange={(e) =>
+                              vgmField.onChange(
+                                parseFloat(e.target.value) || 0,
+                              )
+                            }
+                            onBlur={vgmField.onBlur}
+                            type="number"
+                            aria-invalid={fieldState.invalid}
+                            placeholder="e.g. 18.5"
+                            min="0"
+                            step="0.1"
+                          />
+                          <FieldError errors={[fieldState.error]} />
+                        </Field>
+                      )}
+                    />
+                  </div>
+
+                  {alert && (
+                    <AlertBox tone="warning">
+                      <strong>Overweight Alert:</strong> {alert}
+                    </AlertBox>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx
new file mode 100644
index 000000000..0bae2917e
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx
@@ -0,0 +1,139 @@
+import { Controller, type UseFormReturn } from "react-hook-form";
+import { AlertTriangle } from "lucide-react";
+import { Separator } from "@edr/ui-common";
+import {
+  type BookingFormValues,
+  type WagonCalcResult,
+} from "./schema";
+import { AlertBox, OptionCard, StepHeader, StepLabel } from "./shared";
+
+type BookingForm = UseFormReturn<BookingFormValues>;
+
+export function Step6WagonAllocation({
+  form,
+  wagons,
+}: {
+  form: BookingForm;
+  wagons: WagonCalcResult | null;
+}) {
+  const containers = form.watch("containers") ?? [];
+  const totalContainers = containers.reduce((sum, c) => sum + (c.qty || 0), 0);
+  const containerSummary = containers
+    .filter((c) => c.qty > 0)
+    .map((c) => `${c.qty} × ${c.type}`)
+    .join(", ");
+  const consolidationEnabled = form.watch("consolidationEnabled");
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Wagon Allocation"
+        description="System-calculated wagon requirements based on your container profile."
+      />
+
+      {!wagons ? (
+        <AlertBox tone="info">
+          Complete the container configuration in the previous step to see wagon
+          allocation.
+        </AlertBox>
+      ) : (
+        <>
+          <div className="grid gap-3 sm:grid-cols-3">
+            <div className="rounded-xl bg-primary/5 p-4 text-center">
+              <p className="text-3xl font-bold text-primary">
+                {wagons.totalWagons}
+              </p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                Wagons Required
+              </p>
+            </div>
+            <div className="rounded-xl bg-muted p-4 text-center">
+              <p className="text-3xl font-bold">{totalContainers}</p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {containerSummary || "Containers"}
+              </p>
+            </div>
+            <div className="rounded-xl bg-muted p-4 text-center">
+              <p className="text-3xl font-bold">{wagons.sharedWagons}</p>
+              <p className="mt-1 text-xs text-muted-foreground">Shared Slots</p>
+            </div>
+          </div>
+
+          <div>
+            <StepLabel>Wagon Layout</StepLabel>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {Array.from({ length: wagons.totalWagons }, (_, index) => {
+                const isOdd =
+                  wagons.hasOddUnit && index === wagons.totalWagons - 1;
+                return (
+                  <div
+                    key={index}
+                    className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold ${isOdd
+                        ? "border-amber-300 bg-amber-50 text-amber-700"
+                        : "border-primary/30 bg-primary/5 text-primary"
+                      }`}
+                  >
+                    {isOdd ? "1 × 20ft (1/2)" : "2 × 20ft"}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            {containers.some((c) => c.type === "40ft")
+              ? "1 × 40ft = 1 Rail Wagon"
+              : `CEILING(${totalContainers} / 2) = ${wagons.totalWagons} Rail Wagon${wagons.totalWagons > 1 ? "s" : ""} — 2 × 20ft = 1 Wagon`}
+          </p>
+
+          {wagons.hasOddUnit && (
+            <>
+              <Separator />
+              <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <AlertTriangle className="h-4 w-4 text-amber-500" />
+                  <p className="text-sm font-medium">
+                    Consolidation Option (US-07)
+                  </p>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  You have 1 unpaired 20ft container. Opt in to share a wagon
+                  slot with another shipper to optimise costs, or request a
+                  dedicated wagon.
+                </p>
+                <Controller
+                  name="consolidationEnabled"
+                  control={form.control}
+                  render={({ field }) => (
+                    <div className="grid gap-2 sm:grid-cols-2">
+                      <OptionCard
+                        selected={consolidationEnabled}
+                        onClick={() => field.onChange(true)}
+                      >
+                        <p className="text-sm font-semibold">
+                          Allow Consolidation
+                        </p>
+                        <p className="mt-0.5 text-xs text-muted-foreground">
+                          Share a wagon slot. Billing split with co-loader.
+                        </p>
+                      </OptionCard>
+                      <OptionCard
+                        selected={!consolidationEnabled}
+                        onClick={() => field.onChange(false)}
+                      >
+                        <p className="text-sm font-semibold">Dedicated Wagon</p>
+                        <p className="mt-0.5 text-xs text-muted-foreground">
+                          Exclusive slot. Standard single-party billing.
+                        </p>
+                      </OptionCard>
+                    </div>
+                  )}
+                />
+              </div>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step7-documents.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step7-documents.tsx
new file mode 100644
index 000000000..a4ac23a4b
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step7-documents.tsx
@@ -0,0 +1,65 @@
+import { Controller, type UseFormReturn } from "react-hook-form";
+import { Field, FieldError, SmartFileInput } from "@edr/ui-common";
+import {
+  BOOKING_DOCS_SETTING,
+  REQUIRED_DOC_KEYS,
+  type BookingFormValues,
+} from "./schema";
+import { getUploadedRequiredCount, StepHeader } from "./shared";
+
+type BookingForm = UseFormReturn<BookingFormValues>;
+
+export function Step7Documents({ form }: { form: BookingForm }) {
+  const documents = form.watch("documents");
+  const uploadedRequired = getUploadedRequiredCount(documents);
+  const documentErrors = form.formState.errors.documents as
+    | Record<string, { message?: string }>
+    | undefined;
+  const smartFileErrors = Object.fromEntries(
+    Object.entries(documentErrors ?? {}).map(([key, value]) => [
+      key,
+      value?.message ?? "",
+    ]),
+  );
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Compliance Documents"
+        description="Upload your company's legal credentials for EDR contract eligibility verification (US-04)."
+      />
+
+      <div className="flex items-center gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3">
+        <div
+          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold ${uploadedRequired === REQUIRED_DOC_KEYS.length
+              ? "bg-emerald-100 text-emerald-700"
+              : "bg-primary/10 text-primary"
+            }`}
+        >
+          {uploadedRequired}/{REQUIRED_DOC_KEYS.length}
+        </div>
+        <p className="text-sm text-muted-foreground">
+          {uploadedRequired < REQUIRED_DOC_KEYS.length
+            ? `${REQUIRED_DOC_KEYS.length - uploadedRequired} mandatory document(s) still needed.`
+            : "All mandatory documents uploaded. Power of Attorney is optional."}
+        </p>
+      </div>
+
+      <Controller
+        name="documents"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <SmartFileInput
+              file={BOOKING_DOCS_SETTING}
+              value={field.value}
+              onChange={(value) => field.onChange(value)}
+              errors={smartFileErrors}
+            />
+            <FieldError errors={[fieldState.error]} />
+          </Field>
+        )}
+      />
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx
new file mode 100644
index 000000000..75a18fe9a
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx
@@ -0,0 +1,285 @@
+import { Controller, type UseFormReturn } from "react-hook-form";
+import { Check } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Field,
+  FieldError,
+  FieldLabel,
+  Textarea,
+} from "@edr/ui-common";
+import {
+  REQUIRED_DOC_KEYS,
+  type BookingFormValues,
+  type RouteDirection,
+  type WagonCalcResult,
+} from "./schema";
+import { getUploadedRequiredCount, StepHeader } from "./shared";
+
+type BookingForm = UseFormReturn<BookingFormValues>;
+
+export function Step8Review({
+  form,
+  setStep,
+  wagons,
+  direction,
+}: {
+  form: BookingForm;
+  setStep: (step: number) => void;
+  wagons: WagonCalcResult | null;
+  direction: RouteDirection;
+}) {
+  const values = form.watch();
+  const errors = form.formState.errors;
+
+  function Row({
+    label,
+    value,
+    target,
+  }: {
+    label: string;
+    value: string;
+    target: number;
+  }) {
+    return (
+      <div className="flex items-start justify-between gap-4 py-2">
+        <div className="min-w-0">
+          <p className="text-xs text-muted-foreground">{label}</p>
+          <p className="mt-0.5 truncate text-sm font-medium">{value || "-"}</p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setStep(target)}
+          className="shrink-0 text-xs font-medium text-primary hover:underline"
+        >
+          Edit
+        </button>
+      </div>
+    );
+  }
+
+  const containerSummary =
+    values.cargoType === "container" && values.containers.length > 0
+      ? values.containers
+          .filter((c) => c.qty > 0)
+          .map((c) => `${c.qty} × ${c.type}`)
+          .join(", ")
+      : "";
+  const totalVgm =
+    values.cargoType === "container"
+      ? values.containers.reduce((sum, c) => sum + (c.qty || 0) * (c.vgm || 0), 0)
+      : 0;
+
+  const cargoValue =
+    values.cargoType === "container"
+      ? containerSummary
+      : values.freightType === "bulk"
+        ? `Bulk - ${values.bulkCommodity === "Others" ? values.bulkCommodityOther : values.bulkCommodity}`
+        : values.freightType === "break_bulk"
+          ? `Break-Bulk - ${values.breakBulkType === "Others" ? values.breakBulkTypeOther : values.breakBulkType}`
+          : "";
+  const uploadedCount = getUploadedRequiredCount(values.documents);
+
+  return (
+    <div className="space-y-6">
+      <StepHeader
+        title="Review & Submit"
+        description="Confirm your contract request before sending it for EDR staff review."
+      />
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Contract & Service
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="Type"
+              value={values.contractType === "new" ? "New Contract" : "Renewal"}
+              target={1}
+            />
+            <Row
+              label="Contract ID"
+              value={values.draftContractId || values.previousContractRef}
+              target={1}
+            />
+            <Row
+              label="Service"
+              value={
+                values.serviceType === "rail"
+                  ? "Rail Only"
+                  : values.serviceType === "rail_forwarding"
+                    ? "Rail + Forwarding"
+                    : ""
+              }
+              target={2}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              First & Last Mile
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="First Mile"
+              value={
+                values.firstMileEnabled ? values.pickUpAddress : "Not requested"
+              }
+              target={3}
+            />
+            <Row
+              label="Last Mile"
+              value={
+                values.lastMileEnabled
+                  ? values.deliveryAddress
+                  : "Not requested"
+              }
+              target={3}
+            />
+            <Row
+              label="Equipment Return"
+              value={
+                values.equipmentReturn === "with_return"
+                  ? "With Return"
+                  : "Without Return"
+              }
+              target={3}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Route & Cargo
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="Route"
+              value={`${values.originYard} -> ${values.destinationYard}`}
+              target={4}
+            />
+            <Row
+              label="Workflow"
+              value={
+                direction
+                  ? direction.charAt(0).toUpperCase() + direction.slice(1)
+                  : ""
+              }
+              target={4}
+            />
+            <Row
+              label="Weight (VGM)"
+              value={values.cargoWeight ? `${values.cargoWeight} tons` : ""}
+              target={5}
+            />
+            <Row label="Cargo" value={cargoValue} target={5} />
+            <Row
+              label="Modifiers"
+              value={
+                [
+                  values.isHazardous && "Hazardous",
+                  values.isRefrigerated && "Refrigerated",
+                ]
+                  .filter(Boolean)
+                  .join(", ") || "None"
+              }
+              target={4}
+            />
+          </CardContent>
+        </Card>
+
+        <Card className="gap-0 overflow-hidden py-0">
+          <CardHeader className="border-b px-5 py-3">
+            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              Container & Wagons
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
+            <Row
+              label="Containers"
+              value={containerSummary || "-"}
+              target={5}
+            />
+            <Row
+              label="Total VGM"
+              value={totalVgm > 0 ? `${totalVgm.toFixed(1)} tons` : ""}
+              target={5}
+            />
+            <Row
+              label="Wagons"
+              value={
+                wagons
+                  ? `${wagons.totalWagons} wagon${wagons.totalWagons > 1 ? "s" : ""}`
+                  : ""
+              }
+              target={6}
+            />
+            <Row
+              label="Documents"
+              value={`${uploadedCount}/${REQUIRED_DOC_KEYS.length} mandatory uploaded`}
+              target={7}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Controller
+        name="notes"
+        control={form.control}
+        render={({ field }) => (
+          <Field>
+            <FieldLabel htmlFor="notes">Additional Notes</FieldLabel>
+            <Textarea
+              {...field}
+              id="notes"
+              placeholder="Any special instructions or notes for EDR operations..."
+              rows={3}
+            />
+          </Field>
+        )}
+      />
+
+      <Controller
+        name="termsAccepted"
+        control={form.control}
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <label className="flex cursor-pointer items-start gap-3">
+              <button
+                type="button"
+                role="checkbox"
+                aria-checked={field.value}
+                aria-invalid={fieldState.invalid}
+                onClick={() => field.onChange(!field.value)}
+                className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 transition ${field.value ? "border-primary bg-primary" : "border-input"
+                  }`}
+              >
+                {field.value && (
+                  <Check className="h-3 w-3 text-primary-foreground" />
+                )}
+              </button>
+              <span className="text-sm text-muted-foreground">
+                I confirm the information is accurate and agree to EDR's{" "}
+                <span className="text-primary">
+                  freight contract terms and conditions
+                </span>
+                .
+              </span>
+            </label>
+            <FieldError errors={[fieldState.error, errors.termsAccepted]} />
+          </Field>
+        )}
+      />
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx
index 8ad06f17f..609825922 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx
@@ -1,1303 +1,8 @@
-import { Controller, type UseFormReturn } from "react-hook-form";
-import {
-  AlertTriangle,
-  Check,
-  FileText,
-  Flame,
-  Loader2,
-  MapPin,
-  Package,
-  RefreshCw,
-  Snowflake,
-  Train,
-  Weight,
-} from "lucide-react";
-import {
-  Badge,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Field,
-  FieldError,
-  FieldLabel,
-  Input,
-  Separator,
-  SmartFileInput,
-  Switch,
-  Textarea,
-} from "@edr/ui-common";
-import {
-  BOOKING_DOCS_SETTING,
-  BREAK_BULK_TYPES,
-  BULK_COMMODITIES,
-  REQUIRED_DOC_KEYS,
-  STATIONS,
-  genContractId,
-  getRouteDirection,
-  type BookingFormValues,
-  type RouteDirection,
-  type WagonCalcResult,
-} from "./schema";
-import {
-  AlertBox,
-  OptionCard,
-  SelectField,
-  SelectOptions,
-  StepHeader,
-  StepLabel,
-} from "./shared";
-
-type BookingForm = UseFormReturn<BookingFormValues>;
-
-function getUploadedRequiredCount(documents: BookingFormValues["documents"]) {
-  return REQUIRED_DOC_KEYS.filter((key) => {
-    const file = documents[key];
-    return Array.isArray(file) ? file.length > 0 : Boolean(file);
-  }).length;
-}
-
-function OptionFieldError({ error }: { error?: { message?: string } }) {
-  return <FieldError errors={[error]} />;
-}
-
-export function Step1ContractType({
-  form,
-  renewalValid,
-  renewalValidating,
-  onValidate,
-}: {
-  form: BookingForm;
-  renewalValid: boolean | null;
-  renewalValidating: boolean;
-  onValidate: () => void;
-}) {
-  const contractType = form.watch("contractType");
-  const draftContractId = form.watch("draftContractId");
-  const previousContractRef = form.watch("previousContractRef");
-  const errors = form.formState.errors;
-
-  return (
-    <div className="space-y-6">
-      <StepHeader
-        title="Contract Type"
-        description="New contract or renewal of an existing one."
-      />
-
-      <Controller
-        name="contractType"
-        control={form.control}
-        render={({ field, fieldState }) => (
-          <Field data-invalid={fieldState.invalid}>
-            <div className="grid gap-3 md:grid-cols-2">
-              <OptionCard
-                selected={field.value === "new"}
-                onClick={() => {
-                  field.onChange("new");
-                  form.clearErrors(["contractType", "previousContractRef"]);
-                  if (!draftContractId) {
-                    form.setValue("draftContractId", genContractId(), {
-                      shouldDirty: true,
-                      shouldValidate: true,
-                    });
-                  }
-                }}
-              >
-                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
-                  <FileText className="h-4 w-4 text-primary" />
-                </div>
-                <p className="font-semibold">New Contract</p>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  Blank contract form. A draft ID is auto-generated.
-                </p>
-                {field.value === "new" && draftContractId && (
-                  <p className="mt-2 font-mono text-xs font-semibold text-primary">
-                    {draftContractId}
-                  </p>
-                )}
-              </OptionCard>
-
-              <OptionCard
-                selected={field.value === "renewal"}
-                onClick={() => {
-                  field.onChange("renewal");
-                  form.clearErrors("contractType");
-                }}
-              >
-                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100">
-                  <RefreshCw className="h-4 w-4 text-sky-600" />
-                </div>
-                <p className="font-semibold">Contract Renewal</p>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  Enter a previous reference to auto-populate historical
-                  parameters.
-                </p>
-              </OptionCard>
-            </div>
-            <OptionFieldError error={fieldState.error} />
-          </Field>
-        )}
-      />
-
-      {contractType === "renewal" && (
-        <div className="space-y-3 pt-1">
-          <Controller
-            name="previousContractRef"
-            control={form.control}
-            render={({ field, fieldState }) => (
-              <Field data-invalid={fieldState.invalid}>
-                <FieldLabel htmlFor="previousContractRef">
-                  Previous Contract Reference Number
-                </FieldLabel>
-                <div className="flex gap-2">
-                  <Input
-                    {...field}
-                    id="previousContractRef"
-                    aria-invalid={fieldState.invalid}
-                    placeholder="e.g. EDR-2024-10001"
-                    className="font-mono"
-                  />
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={onValidate}
-                    disabled={!previousContractRef || renewalValidating}
-                  >
-                    {renewalValidating ? (
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                    ) : (
-                      "Validate"
-                    )}
-                  </Button>
-                </div>
-                <FieldError
-                  errors={[fieldState.error, errors.draftContractId]}
-                />
-              </Field>
-            )}
-          />
-          {renewalValid === true && (
-            <AlertBox tone="success">
-              <strong>Contract found.</strong> Company details, route, and wagon
-              preferences will be pre-filled.
-            </AlertBox>
-          )}
-          {renewalValid === false && (
-            <AlertBox tone="error">
-              Contract Reference Number not found or unauthorized. Try{" "}
-              <span className="font-mono">EDR-2024-10001</span>.
-            </AlertBox>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function Step2ServiceType({ form }: { form: BookingForm }) {
-  const serviceType = form.watch("serviceType");
-
-  return (
-    <div className="space-y-6">
-      <StepHeader
-        title="Service Type"
-        description="Select the service combination you require."
-      />
-
-      <Controller
-        name="serviceType"
-        control={form.control}
-        render={({ field, fieldState }) => (
-          <Field data-invalid={fieldState.invalid}>
-            <div className="grid gap-3 md:grid-cols-2">
-              <OptionCard
-                selected={serviceType === "rail"}
-                onClick={() => field.onChange("rail")}
-              >
-                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100">
-                  <Train className="h-4 w-4 text-indigo-600" />
-                </div>
-                <p className="font-semibold">Rail Transport Only</p>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  Rail transport along the EDR corridor, with optional
-                  first/last mile trucking.
-                </p>
-                <Badge className="mt-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-100">
-                  Option A
-                </Badge>
-              </OptionCard>
-
-              <OptionCard
-                selected={serviceType === "rail_forwarding"}
-                onClick={() => field.onChange("rail_forwarding")}
-              >
-                <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
-                  <Package className="h-4 w-4 text-primary" />
-                </div>
-                <p className="font-semibold">
-                  Rail Transport & Freight Forwarding
-                </p>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  Rail transport plus documentation, customs liaison, and a
-                  dedicated coordinator.
-                </p>
-                <Badge className="mt-2 bg-emerald-100 text-emerald-700 hover:bg-emerald-100">
-                  Option B
-                </Badge>
-              </OptionCard>
-            </div>
-            <OptionFieldError error={fieldState.error} />
-          </Field>
-        )}
-      />
-
-      <p className="text-xs text-muted-foreground">
-        Customs and Clearance Service cannot be selected independently. It must
-        be bundled with a Rail Transport service.
-      </p>
-    </div>
-  );
-}
-
-export function Step3FirstLastMile({ form }: { form: BookingForm }) {
-  const firstMileEnabled = form.watch("firstMileEnabled");
-  const lastMileEnabled = form.watch("lastMileEnabled");
-  const equipmentReturn = form.watch("equipmentReturn");
-
-  return (
-    <div className="space-y-6">
-      <StepHeader
-        title="First & Last Mile"
-        description="Configure trucking and container return options."
-      />
-
-      <div className="divide-y divide-border rounded-xl border border-border">
-        <div className="p-4">
-          <Controller
-            name="firstMileEnabled"
-            control={form.control}
-            render={({ field }) => (
-              <div className="flex items-start justify-between gap-4">
-                <div>
-                  <p className="text-sm font-medium">First Mile - Pick-up</p>
-                  <p className="mt-0.5 text-xs text-muted-foreground">
-                    Truck pick-up from your premises to the origin rail yard.
-                  </p>
-                </div>
-                <Switch
-                  checked={field.value}
-                  onCheckedChange={(value) => {
-                    field.onChange(value);
-                    if (!value) {
-                      form.setValue("pickUpAddress", "", {
-                        shouldDirty: true,
-                        shouldValidate: true,
-                      });
-                    }
-                  }}
-                />
-              </div>
-            )}
-          />
-          {firstMileEnabled && (
-            <Controller
-              name="pickUpAddress"
-              control={form.control}
-              render={({ field, fieldState }) => (
-                <Field className="mt-3" data-invalid={fieldState.invalid}>
-                  <Input
-                    {...field}
-                    aria-invalid={fieldState.invalid}
-                    placeholder="Pick-up address *"
-                  />
-                  <FieldError errors={[fieldState.error]} />
-                </Field>
-              )}
-            />
-          )}
-        </div>
-
-        <div className="p-4">
-          <Controller
-            name="lastMileEnabled"
-            control={form.control}
-            render={({ field }) => (
-              <div className="flex items-start justify-between gap-4">
-                <div>
-                  <p className="text-sm font-medium">Last Mile - Delivery</p>
-                  <p className="mt-0.5 text-xs text-muted-foreground">
-                    Truck delivery from the destination rail yard to the final
-                    address.
-                  </p>
-                </div>
-                <Switch
-                  checked={field.value}
-                  onCheckedChange={(value) => {
-                    field.onChange(value);
-                    if (!value) {
-                      form.setValue("deliveryAddress", "", {
-                        shouldDirty: true,
-                        shouldValidate: true,
-                      });
-                    }
-                  }}
-                />
-              </div>
-            )}
-          />
-          {lastMileEnabled && (
-            <Controller
-              name="deliveryAddress"
-              control={form.control}
-              render={({ field, fieldState }) => (
-                <Field className="mt-3" data-invalid={fieldState.invalid}>
-                  <Input
-                    {...field}
-                    aria-invalid={fieldState.invalid}
-                    placeholder="Delivery address *"
-                  />
-                  <FieldError errors={[fieldState.error]} />
-                </Field>
-              )}
-            />
-          )}
-        </div>
-
-        <div className="p-4">
-          <p className="mb-3 text-sm font-medium">Equipment Return</p>
-          <p className="mb-3 text-xs text-muted-foreground">
-            Declare whether the container asset will be returned after
-            unloading.
-          </p>
-          <Controller
-            name="equipmentReturn"
-            control={form.control}
-            render={({ field }) => (
-              <div className="grid gap-2 sm:grid-cols-2">
-                <OptionCard
-                  selected={equipmentReturn === "with_return"}
-                  onClick={() => field.onChange("with_return")}
-                >
-                  <p className="text-sm font-semibold">With Return</p>
-                  <p className="mt-0.5 text-xs text-muted-foreground">
-                    Container returned to EDR after unloading.
-                  </p>
-                </OptionCard>
-                <OptionCard
-                  selected={equipmentReturn === "without_return"}
-                  onClick={() => field.onChange("without_return")}
-                >
-                  <p className="text-sm font-semibold">Without Return</p>
-                  <p className="mt-0.5 text-xs text-muted-foreground">
-                    Container retained by the customer after delivery.
-                  </p>
-                </OptionCard>
-              </div>
-            )}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function Step4Route({ form }: { form: BookingForm }) {
-  const originYard = form.watch("originYard");
-  const destinationYard = form.watch("destinationYard");
-  const direction = getRouteDirection(originYard, destinationYard);
-  const directionStyle: Record<string, string> = {
-    export: "bg-sky-50 text-sky-800 border-sky-200",
-    import: "bg-amber-50 text-amber-800 border-amber-200",
-    domestic: "bg-muted text-muted-foreground border-border",
-  };
-  const directionLabel: Record<string, string> = {
-    export: "Export workflow (Ethiopia to Djibouti)",
-    import: "Import workflow (Djibouti to Ethiopia)",
-    domestic: "Domestic corridor",
-  };
-
-  return (
-    <div className="space-y-6">
-      <StepHeader
-        title="Route"
-        description="Select the origin and destination yards."
-      />
-
-      <div className="space-y-3">
-        <StepLabel>Route</StepLabel>
-        <div className="grid gap-3 sm:grid-cols-2">
-          <Controller
-            name="originYard"
-            control={form.control}
-            render={({ field, fieldState }) => (
-              <SelectField
-                field={field}
-                error={fieldState.error}
-                label="Origin Yard*"
-                placeholder="Select origin..."
-              >
-                <SelectOptions
-                  options={STATIONS.filter((s) => s !== destinationYard)}
-                />
-              </SelectField>
-            )}
-          />
-          <Controller
-            name="destinationYard"
-            control={form.control}
-            render={({ field, fieldState }) => (
-              <SelectField
-                field={field}
-                error={fieldState.error}
-                label="Destination Yard *"
-                placeholder="Select destination..."
-              >
-                <SelectOptions
-                  options={STATIONS.filter((s) => s !== originYard)}
-                />
-              </SelectField>
-            )}
-          />
-        </div>
-        {direction && (
-          <div
-            className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium ${directionStyle[direction]}`}
-          >
-            <MapPin className="h-3.5 w-3.5 shrink-0" />
-            {directionLabel[direction]}
-          </div>
-        )}
-      </div>
-
-      <Separator />
-
-      <div className="space-y-0 divide-y divide-border">
-        <Controller
-          name="isHazardous"
-          control={form.control}
-          render={({ field }) => (
-            <div className="flex items-center justify-between py-3">
-              <div className="flex items-center gap-3">
-                <Flame className="h-4 w-4 shrink-0 text-red-500" />
-                <div>
-                  <p className="text-sm font-medium">Hazardous Material</p>
-                  <p className="text-xs text-muted-foreground">
-                    Applies a Hazard Surcharge to the final bill.
-                  </p>
-                </div>
-              </div>
-              <Switch checked={field.value} onCheckedChange={field.onChange} />
-            </div>
-          )}
-        />
-        <Controller
-          name="isRefrigerated"
-          control={form.control}
-          render={({ field }) => (
-            <div className="flex items-center justify-between py-3">
-              <div className="flex items-center gap-3">
-                <Snowflake className="h-4 w-4 shrink-0 text-sky-500" />
-                <div>
-                  <p className="text-sm font-medium">Refrigerated Cargo</p>
-                  <p className="text-xs text-muted-foreground">
-                    Temperature-controlled transport applies a Refrigerator
-                    Surcharge.
-                  </p>
-                </div>
-              </div>
-              <Switch checked={field.value} onCheckedChange={field.onChange} />
-            </div>
-          )}
-        />
-      </div>
-    </div>
-  );
-}
-
-export function Step5CargoDetails({
-  form,
-  direction,
-}: {
-  form: BookingForm;
-  direction: RouteDirection;
-}) {
-  const cargoType = form.watch("cargoType");
-  const freightType = form.watch("freightType");
-  const bulkCommodity = form.watch("bulkCommodity");
-  const breakBulkType = form.watch("breakBulkType");
-  const containerType = form.watch("containerType");
-  const quantityValue = form.watch("quantity");
-  const vgmValue = form.watch("vgm");
-  const qty = parseInt(quantityValue) || 1;
-  const vgm = parseFloat(vgmValue) || 0;
-
-  let overweightAlert: string | null = null;
-  if (containerType === "20ft" && vgm > 0) {
-    const limit = direction === "export" ? 25 : 20;
-    if (vgm > limit) {
-      overweightAlert = `VGM ${vgm}t exceeds the ${limit}t ${direction ?? "standard"} limit for a 20ft container. An Overweight Surcharge will apply.`;
-    }
-  }
-  if (containerType === "40ft" && vgm > 32.5) {
-    overweightAlert = `VGM ${vgm}t exceeds the 32.5t global limit for a 40ft container. An Overweight Surcharge will apply.`;
-  }
-
-  return (
-    <div className="space-y-6">
-      <StepHeader
-        title="Cargo Details"
-        description="Define your cargo type, weight, and container configuration."
-      />
-
-      <div className="space-y-3">
-        <StepLabel>Cargo Type *</StepLabel>
-        <Controller
-          name="cargoType"
-          control={form.control}
-          render={({ field, fieldState }) => (
-            <Field data-invalid={fieldState.invalid}>
-              <div className="grid gap-3 sm:grid-cols-2">
-                <OptionCard
-                  selected={cargoType === "container"}
-                  onClick={() => {
-                    field.onChange("container");
-                    form.setValue("freightType", "", { shouldDirty: true });
-                    form.setValue("cargoWeight", "", { shouldDirty: true });
-                  }}
-                >
-                  <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
-                    <Package className="h-4 w-4 text-primary" />
-                  </div>
-                  <p className="font-semibold">Container</p>
-                  <p className="mt-0.5 text-xs text-muted-foreground">
-                    Pre-packed containerized cargo (20ft / 40ft).
-                  </p>
-                </OptionCard>
-                <OptionCard
-                  selected={cargoType === "bulk"}
-                  onClick={() => {
-                    field.onChange("bulk");
-                    form.setValue("containerType", "", { shouldDirty: true });
-                    form.setValue("vgm", "", { shouldDirty: true });
-                  }}
-                >
-                  <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100">
-                    <Weight className="h-4 w-4 text-amber-600" />
-                  </div>
-                  <p className="font-semibold">Bulk</p>
-                  <p className="mt-0.5 text-xs text-muted-foreground">
-                    Bulk commodities or break-bulk cargo.
-                  </p>
-                </OptionCard>
-              </div>
-              <FieldError errors={[fieldState.error]} />
-            </Field>
-          )}
-        />
-      </div>
-
-      {cargoType === "bulk" && (
-        <>
-          <Separator />
-          <div className="space-y-3">
-            <StepLabel>Freight Type *</StepLabel>
-            <Controller
-              name="freightType"
-              control={form.control}
-              render={({ field, fieldState }) => (
-                <Field data-invalid={fieldState.invalid}>
-                  <div className="grid gap-3 sm:grid-cols-2">
-                    <OptionCard
-                      selected={freightType === "bulk"}
-                      onClick={() => field.onChange("bulk")}
-                    >
-                      <p className="font-semibold">Bulk</p>
-                      <p className="mt-0.5 text-xs text-muted-foreground">
-                        Coffee, fertilizer, grain, ore, etc.
-                      </p>
-                    </OptionCard>
-                    <OptionCard
-                      selected={freightType === "break_bulk"}
-                      onClick={() => field.onChange("break_bulk")}
-                    >
-                      <p className="font-semibold">Break-Bulk</p>
-                      <p className="mt-0.5 text-xs text-muted-foreground">
-                        Machinery, vehicles, project cargo, etc.
-                      </p>
-                    </OptionCard>
-                  </div>
-                  <FieldError errors={[fieldState.error]} />
-                </Field>
-              )}
-            />
-
-            {freightType === "bulk" && (
-              <div className="space-y-2">
-                <Controller
-                  name="bulkCommodity"
-                  control={form.control}
-                  render={({ field, fieldState }) => (
-                    <SelectField
-                      field={field}
-                      error={fieldState.error}
-                      label="Commodity *"
-                      placeholder="Select commodity *"
-                    >
-                      <SelectOptions options={BULK_COMMODITIES} />
-                    </SelectField>
-                  )}
-                />
-                {bulkCommodity === "Others" && (
-                  <Controller
-                    name="bulkCommodityOther"
-                    control={form.control}
-                    render={({ field, fieldState }) => (
-                      <Field data-invalid={fieldState.invalid}>
-                        <Input
-                          {...field}
-                          aria-invalid={fieldState.invalid}
-                          placeholder="Specify commodity *"
-                        />
-                        <FieldError errors={[fieldState.error]} />
-                      </Field>
-                    )}
-                  />
-                )}
-              </div>
-            )}
-
-            {freightType === "break_bulk" && (
-              <div className="space-y-2">
-                <Controller
-                  name="breakBulkType"
-                  control={form.control}
-                  render={({ field, fieldState }) => (
-                    <SelectField
-                      field={field}
-                      error={fieldState.error}
-                      label="Break-bulk type *"
-                      placeholder="Select type *"
-                    >
-                      <SelectOptions options={BREAK_BULK_TYPES} />
-                    </SelectField>
-                  )}
-                />
-                {breakBulkType === "Others" && (
-                  <Controller
-                    name="breakBulkTypeOther"
-                    control={form.control}
-                    render={({ field, fieldState }) => (
-                      <Field data-invalid={fieldState.invalid}>
-                        <Input
-                          {...field}
-                          aria-invalid={fieldState.invalid}
-                          placeholder="Specify break-bulk type *"
-                        />
-                        <FieldError errors={[fieldState.error]} />
-                      </Field>
-                    )}
-                  />
-                )}
-              </div>
-            )}
-          </div>
-
-          <Separator />
-
-          <div className="space-y-3">
-            <StepLabel>Weight</StepLabel>
-            <Controller
-              name="cargoWeight"
-              control={form.control}
-              render={({ field, fieldState }) => (
-                <Field data-invalid={fieldState.invalid}>
-                  <FieldLabel htmlFor="cargoWeight">
-                    Total Cargo Weight - VGM (Tons) *
-                  </FieldLabel>
-                  <div className="relative">
-                    <Weight className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                    <Input
-                      {...field}
-                      id="cargoWeight"
-                      type="number"
-                      aria-invalid={fieldState.invalid}
-                      placeholder="0.00"
-                      className="pl-9"
-                      min="0"
-                      step="0.01"
-                    />
-                  </div>
-                  <FieldError errors={[fieldState.error]} />
-                </Field>
-              )}
-            />
-          </div>
-        </>
-      )}
-
-      {cargoType === "container" && (
-        <>
-          <Separator />
-          <div className="space-y-3">
-            <StepLabel>Container Configuration</StepLabel>
-            <Controller
-              name="containerType"
-              control={form.control}
-              render={({ field, fieldState }) => (
-                <Field data-invalid={fieldState.invalid}>
-                  <div className="grid gap-3 sm:grid-cols-2">
-                    {[
-                      {
-                        val: "20ft" as const,
-                        label: "20ft Container (TEU)",
-                        limit:
-                          direction === "export"
-                            ? "Max 25t per container"
-                            : "Max 20t per container",
-                      },
-                      {
-                        val: "40ft" as const,
-                        label: "40ft Container (FEU)",
-                        limit: "Max 32.5t per container",
-                      },
-                    ].map((ct) => (
-                      <OptionCard
-                        key={ct.val}
-                        selected={containerType === ct.val}
-                        onClick={() => field.onChange(ct.val)}
-                      >
-                        <div className="mb-1 flex items-center gap-2">
-                          <Package className="h-4 w-4 text-primary" />
-                          <p className="font-semibold">{ct.label}</p>
-                        </div>
-                        <p className="text-xs text-muted-foreground">
-                          {ct.limit}
-                        </p>
-                      </OptionCard>
-                    ))}
-                  </div>
-                  <FieldError errors={[fieldState.error]} />
-                </Field>
-              )}
-            />
-
-            {direction && (
-              <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                <MapPin className="h-3.5 w-3.5" />
-                Route detected as{" "}
-                <span className="font-medium capitalize text-foreground">
-                  {direction}
-                </span>{" "}
-                workflow
-              </p>
-            )}
-
-            <div className="grid gap-4 sm:grid-cols-2">
-              <Controller
-                name="quantity"
-                control={form.control}
-                render={({ field, fieldState }) => (
-                  <Field data-invalid={fieldState.invalid}>
-                    <FieldLabel htmlFor="quantity">Quantity</FieldLabel>
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        onClick={() =>
-                          field.onChange(String(Math.max(1, qty - 1)))
-                        }
-                        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
-                      >
-                        -
-                      </button>
-                      <Input
-                        {...field}
-                        id="quantity"
-                        type="number"
-                        aria-invalid={fieldState.invalid}
-                        className="text-center"
-                        min="1"
-                      />
-                      <button
-                        type="button"
-                        onClick={() => field.onChange(String(qty + 1))}
-                        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
-                      >
-                        +
-                      </button>
-                    </div>
-                    <FieldError errors={[fieldState.error]} />
-                  </Field>
-                )}
-              />
-              <Controller
-                name="vgm"
-                control={form.control}
-                render={({ field, fieldState }) => (
-                  <Field data-invalid={fieldState.invalid}>
-                    <FieldLabel htmlFor="vgm">
-                      VGM per Container (Tons) *
-                    </FieldLabel>
-                    <Input
-                      {...field}
-                      id="vgm"
-                      type="number"
-                      aria-invalid={fieldState.invalid}
-                      placeholder="e.g. 18.5"
-                      min="0"
-                      step="0.1"
-                    />
-                    <FieldError errors={[fieldState.error]} />
-                  </Field>
-                )}
-              />
-            </div>
-          </div>
-
-          {overweightAlert && (
-            <AlertBox tone="warning">
-              <strong>Overweight Alert:</strong> {overweightAlert}
-            </AlertBox>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-export function Step6WagonAllocation({
-  form,
-  wagons,
-}: {
-  form: BookingForm;
-  wagons: WagonCalcResult | null;
-}) {
-  const quantity = parseInt(form.watch("quantity")) || 1;
-  const containerType = form.watch("containerType");
-  const consolidationEnabled = form.watch("consolidationEnabled");
-
-  return (
-    <div className="space-y-6">
-      <StepHeader
-        title="Wagon Allocation"
-        description="System-calculated wagon requirements based on your container profile."
-      />
-
-      {!wagons ? (
-        <AlertBox tone="info">
-          Complete the container configuration in the previous step to see wagon
-          allocation.
-        </AlertBox>
-      ) : (
-        <>
-          <div className="grid gap-3 sm:grid-cols-3">
-            <div className="rounded-xl bg-primary/5 p-4 text-center">
-              <p className="text-3xl font-bold text-primary">
-                {wagons.totalWagons}
-              </p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                Wagons Required
-              </p>
-            </div>
-            <div className="rounded-xl bg-muted p-4 text-center">
-              <p className="text-3xl font-bold">{quantity}</p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                {containerType} Containers
-              </p>
-            </div>
-            <div className="rounded-xl bg-muted p-4 text-center">
-              <p className="text-3xl font-bold">{wagons.sharedWagons}</p>
-              <p className="mt-1 text-xs text-muted-foreground">Shared Slots</p>
-            </div>
-          </div>
-
-          <div>
-            <StepLabel>Wagon Layout</StepLabel>
-            <div className="mt-2 flex flex-wrap gap-2">
-              {Array.from({ length: wagons.totalWagons }, (_, index) => {
-                const isOdd =
-                  wagons.hasOddUnit && index === wagons.totalWagons - 1;
-                return (
-                  <div
-                    key={index}
-                    className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold ${isOdd
-                        ? "border-amber-300 bg-amber-50 text-amber-700"
-                        : "border-primary/30 bg-primary/5 text-primary"
-                      }`}
-                  >
-                    {isOdd
-                      ? `1 x ${containerType} (1/2)`
-                      : containerType === "20ft"
-                        ? "2 x 20ft"
-                        : "1 x 40ft"}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          <p className="text-xs text-muted-foreground">
-            Formula:{" "}
-            {containerType === "40ft"
-              ? "1 x 40ft = 1 Rail Wagon"
-              : `CEILING(${quantity} / 2) = ${wagons.totalWagons} Rail Wagon${wagons.totalWagons > 1 ? "s" : ""} - (2 x 20ft = 1 Wagon)`}
-          </p>
-
-          {wagons.hasOddUnit && (
-            <>
-              <Separator />
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <AlertTriangle className="h-4 w-4 text-amber-500" />
-                  <p className="text-sm font-medium">
-                    Consolidation Option (US-07)
-                  </p>
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  You have 1 unpaired 20ft container. Opt in to share a wagon
-                  slot with another shipper to optimise costs, or request a
-                  dedicated wagon.
-                </p>
-                <Controller
-                  name="consolidationEnabled"
-                  control={form.control}
-                  render={({ field }) => (
-                    <div className="grid gap-2 sm:grid-cols-2">
-                      <OptionCard
-                        selected={consolidationEnabled}
-                        onClick={() => field.onChange(true)}
-                      >
-                        <p className="text-sm font-semibold">
-                          Allow Consolidation
-                        </p>
-                        <p className="mt-0.5 text-xs text-muted-foreground">
-                          Share a wagon slot. Billing split with co-loader.
-                        </p>
-                      </OptionCard>
-                      <OptionCard
-                        selected={!consolidationEnabled}
-                        onClick={() => field.onChange(false)}
-                      >
-                        <p className="text-sm font-semibold">Dedicated Wagon</p>
-                        <p className="mt-0.5 text-xs text-muted-foreground">
-                          Exclusive slot. Standard single-party billing.
-                        </p>
-                      </OptionCard>
-                    </div>
-                  )}
-                />
-              </div>
-            </>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-export function Step7Documents({ form }: { form: BookingForm }) {
-  const documents = form.watch("documents");
-  const uploadedRequired = getUploadedRequiredCount(documents);
-  const documentErrors = form.formState.errors.documents as
-    | Record<string, { message?: string }>
-    | undefined;
-  const smartFileErrors = Object.fromEntries(
-    Object.entries(documentErrors ?? {}).map(([key, value]) => [
-      key,
-      value?.message ?? "",
-    ]),
-  );
-
-  return (
-    <div className="space-y-6">
-      <StepHeader
-        title="Compliance Documents"
-        description="Upload your company's legal credentials for EDR contract eligibility verification (US-04)."
-      />
-
-      <div className="flex items-center gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3">
-        <div
-          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold ${uploadedRequired === REQUIRED_DOC_KEYS.length
-              ? "bg-emerald-100 text-emerald-700"
-              : "bg-primary/10 text-primary"
-            }`}
-        >
-          {uploadedRequired}/{REQUIRED_DOC_KEYS.length}
-        </div>
-        <p className="text-sm text-muted-foreground">
-          {uploadedRequired < REQUIRED_DOC_KEYS.length
-            ? `${REQUIRED_DOC_KEYS.length - uploadedRequired} mandatory document(s) still needed.`
-            : "All mandatory documents uploaded. Power of Attorney is optional."}
-        </p>
-      </div>
-
-      <Controller
-        name="documents"
-        control={form.control}
-        render={({ field, fieldState }) => (
-          <Field data-invalid={fieldState.invalid}>
-            <SmartFileInput
-              file={BOOKING_DOCS_SETTING}
-              value={field.value}
-              onChange={(value) => field.onChange(value)}
-              errors={smartFileErrors}
-            />
-            <FieldError errors={[fieldState.error]} />
-          </Field>
-        )}
-      />
-    </div>
-  );
-}
-
-export function Step8Review({
-  form,
-  setStep,
-  wagons,
-  direction,
-}: {
-  form: BookingForm;
-  setStep: (step: number) => void;
-  wagons: WagonCalcResult | null;
-  direction: RouteDirection;
-}) {
-  const values = form.watch();
-  const errors = form.formState.errors;
-
-  function Row({
-    label,
-    value,
-    target,
-  }: {
-    label: string;
-    value: string;
-    target: number;
-  }) {
-    return (
-      <div className="flex items-start justify-between gap-4 py-2">
-        <div className="min-w-0">
-          <p className="text-xs text-muted-foreground">{label}</p>
-          <p className="mt-0.5 truncate text-sm font-medium">{value || "-"}</p>
-        </div>
-        <button
-          type="button"
-          onClick={() => setStep(target)}
-          className="shrink-0 text-xs font-medium text-primary hover:underline"
-        >
-          Edit
-        </button>
-      </div>
-    );
-  }
-
-  const cargoValue =
-    values.cargoType === "container"
-      ? `${values.quantity} x ${values.containerType}`
-      : values.freightType === "bulk"
-        ? `Bulk - ${values.bulkCommodity === "Others" ? values.bulkCommodityOther : values.bulkCommodity}`
-        : values.freightType === "break_bulk"
-          ? `Break-Bulk - ${values.breakBulkType === "Others" ? values.breakBulkTypeOther : values.breakBulkType}`
-          : "";
-  const uploadedCount = getUploadedRequiredCount(values.documents);
-
-  return (
-    <div className="space-y-6">
-      <StepHeader
-        title="Review & Submit"
-        description="Confirm your contract request before sending it for EDR staff review."
-      />
-
-      <div className="grid gap-4 md:grid-cols-2">
-        <Card className="gap-0 overflow-hidden py-0">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              Contract & Service
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="Type"
-              value={values.contractType === "new" ? "New Contract" : "Renewal"}
-              target={1}
-            />
-            <Row
-              label="Contract ID"
-              value={values.draftContractId || values.previousContractRef}
-              target={1}
-            />
-            <Row
-              label="Service"
-              value={
-                values.serviceType === "rail"
-                  ? "Rail Only"
-                  : values.serviceType === "rail_forwarding"
-                    ? "Rail + Forwarding"
-                    : ""
-              }
-              target={2}
-            />
-          </CardContent>
-        </Card>
-
-        <Card className="gap-0 overflow-hidden py-0">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              First & Last Mile
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="First Mile"
-              value={
-                values.firstMileEnabled ? values.pickUpAddress : "Not requested"
-              }
-              target={3}
-            />
-            <Row
-              label="Last Mile"
-              value={
-                values.lastMileEnabled
-                  ? values.deliveryAddress
-                  : "Not requested"
-              }
-              target={3}
-            />
-            <Row
-              label="Equipment Return"
-              value={
-                values.equipmentReturn === "with_return"
-                  ? "With Return"
-                  : "Without Return"
-              }
-              target={3}
-            />
-          </CardContent>
-        </Card>
-
-        <Card className="gap-0 overflow-hidden py-0">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              Route & Cargo
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="Route"
-              value={`${values.originYard} -> ${values.destinationYard}`}
-              target={4}
-            />
-            <Row
-              label="Workflow"
-              value={
-                direction
-                  ? direction.charAt(0).toUpperCase() + direction.slice(1)
-                  : ""
-              }
-              target={4}
-            />
-            <Row
-              label="Weight (VGM)"
-              value={values.cargoWeight ? `${values.cargoWeight} tons` : ""}
-              target={5}
-            />
-            <Row label="Cargo" value={cargoValue} target={5} />
-            <Row
-              label="Modifiers"
-              value={
-                [
-                  values.isHazardous && "Hazardous",
-                  values.isRefrigerated && "Refrigerated",
-                ]
-                  .filter(Boolean)
-                  .join(", ") || "None"
-              }
-              target={4}
-            />
-          </CardContent>
-        </Card>
-
-        <Card className="gap-0 overflow-hidden py-0">
-          <CardHeader className="border-b px-5 py-3">
-            <CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              Container & Wagons
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="divide-y divide-border px-5 pb-2 pt-0">
-            <Row
-              label="Container"
-              value={`${values.quantity} x ${values.containerType}`}
-              target={5}
-            />
-            <Row
-              label="VGM per Container"
-              value={values.vgm ? `${values.vgm} tons` : ""}
-              target={5}
-            />
-            <Row
-              label="Wagons"
-              value={
-                wagons
-                  ? `${wagons.totalWagons} wagon${wagons.totalWagons > 1 ? "s" : ""}`
-                  : ""
-              }
-              target={6}
-            />
-            <Row
-              label="Documents"
-              value={`${uploadedCount}/${REQUIRED_DOC_KEYS.length} mandatory uploaded`}
-              target={7}
-            />
-          </CardContent>
-        </Card>
-      </div>
-
-      <Controller
-        name="notes"
-        control={form.control}
-        render={({ field }) => (
-          <Field>
-            <FieldLabel htmlFor="notes">Additional Notes</FieldLabel>
-            <Textarea
-              {...field}
-              id="notes"
-              placeholder="Any special instructions or notes for EDR operations..."
-              rows={3}
-            />
-          </Field>
-        )}
-      />
-
-      <Controller
-        name="termsAccepted"
-        control={form.control}
-        render={({ field, fieldState }) => (
-          <Field data-invalid={fieldState.invalid}>
-            <label className="flex cursor-pointer items-start gap-3">
-              <button
-                type="button"
-                role="checkbox"
-                aria-checked={field.value}
-                aria-invalid={fieldState.invalid}
-                onClick={() => field.onChange(!field.value)}
-                className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 transition ${field.value ? "border-primary bg-primary" : "border-input"
-                  }`}
-              >
-                {field.value && (
-                  <Check className="h-3 w-3 text-primary-foreground" />
-                )}
-              </button>
-              <span className="text-sm text-muted-foreground">
-                I confirm the information is accurate and agree to EDR's{" "}
-                <span className="text-primary">
-                  freight contract terms and conditions
-                </span>
-                .
-              </span>
-            </label>
-            <FieldError errors={[fieldState.error, errors.termsAccepted]} />
-          </Field>
-        )}
-      />
-    </div>
-  );
-}
+export { Step1ContractType } from "./step1-contract-type";
+export { Step2ServiceType } from "./step2-service-type";
+export { Step3FirstLastMile } from "./step3-first-last-mile";
+export { Step4Route } from "./step4-route";
+export { Step5CargoDetails } from "./step5-cargo-details";
+export { Step6WagonAllocation } from "./step6-wagon-allocation";
+export { Step7Documents } from "./step7-documents";
+export { Step8Review } from "./step8-review";

From 1949bed303735bd62d8c67ec554cc602cc2de2fc Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 16:35:21 +0300
Subject: [PATCH 11/13] fix: the muliple wagon validation

---
 .../pages/bookings/new-booking-form/schema.ts |  61 +++++----
 .../bookings/new-booking-form/step4-route.tsx |   7 +-
 .../new-booking-form/step5-cargo-details.tsx  |  36 ++++--
 .../step6-wagon-allocation.tsx                | 120 +++++++-----------
 4 files changed, 106 insertions(+), 118 deletions(-)

diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
index f1921738d..04f3f6621 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
@@ -175,8 +175,14 @@ export const bookingFormSchema = z
     containers: z.array(
       z.object({
         type: z.enum(["20ft", "40ft"]),
-        qty: z.number(),
-        vgm: z.number(),
+        qty: z
+          .string()
+          .refine((q) => !isNaN(+q), "Enter a valid Number")
+          .refine((qty) => Number(qty) >= 1, "Must be greater than 0"),
+        vgm: z
+          .string()
+          .refine((vgm) => !isNaN(+vgm), "Enter a valid Number")
+          .refine((vgm) => Number(vgm) >= 0, "Must be greater than 0"),
       }),
     ),
     consolidationEnabled: z.boolean(),
@@ -338,7 +344,7 @@ export const bookingFormSchema = z
       }
 
       data.containers.forEach((c, i) => {
-        if (!c.qty || c.qty < 1) {
+        if (!c.qty || +c.qty < 1) {
           ctx.addIssue({
             code: "custom",
             path: ["containers", i, "qty"],
@@ -346,7 +352,7 @@ export const bookingFormSchema = z
           });
         }
 
-        if (!c.vgm || c.vgm <= 0) {
+        if (!c.vgm || +c.vgm <= 0) {
           ctx.addIssue({
             code: "custom",
             path: ["containers", i, "vgm"],
@@ -400,7 +406,7 @@ export const initialBookingFormValues: BookingFormValues = {
   breakBulkTypeOther: "",
   isHazardous: false,
   isRefrigerated: false,
-  containers: [{ type: "20ft", qty: 1, vgm: 0 }],
+  containers: [{ type: "20ft", qty: "1", vgm: "" }],
   consolidationEnabled: false,
   documents: {},
   notes: "",
@@ -437,14 +443,21 @@ export type RouteDirection = "import" | "export" | "domestic" | null;
 
 export interface ContainerConfig {
   type: "20ft" | "40ft";
-  qty: number;
-  vgm: number;
+  qty: string;
+  vgm: string;
+}
+
+export interface WagonConfig {
+  type: "20ft" | "40ft";
 }
 
 export interface WagonCalcResult {
   totalWagons: number;
   hasOddUnit: boolean;
   sharedWagons: number;
+  wagonLayout: WagonConfig[];
+  ft40Wagons: number;
+  ft20Wagons: number;
 }
 
 export function genContractId(): string {
@@ -467,22 +480,22 @@ export function getRouteDirection(
 }
 
 export function calcWagons(containers: ContainerConfig[]): WagonCalcResult {
-  let totalWagons = 0;
-  let hasOddUnit = false;
-  let sharedWagons = 0;
+  const Ft40Wagons = containers
+    .filter((c) => c.type === "40ft")
+    .reduce((sum, c) => sum + Number(c.qty), 0);
+  const Ft20Wagons = containers
+    .filter((c) => c.type === "20ft")
+    .reduce((sum, c) => sum + Number(c.qty), 0);
+  const wagonLayout: WagonConfig[] = [];
+  let hasOddUnit = Ft20Wagons % 2 === 1;
+  let sharedWagons = Math.floor(Ft20Wagons / 2);
 
-  for (const c of containers) {
-    if (c.type === "40ft") {
-      totalWagons += c.qty;
-      sharedWagons += c.qty;
-    } else {
-      const pairs = Math.floor(c.qty / 2);
-      const odd = c.qty % 2;
-      totalWagons += pairs + odd;
-      sharedWagons += pairs;
-      if (odd > 0) hasOddUnit = true;
-    }
-  }
-
-  return { totalWagons, hasOddUnit, sharedWagons };
+  return {
+    totalWagons: sharedWagons + Ft40Wagons,
+    hasOddUnit,
+    sharedWagons,
+    ft40Wagons: Ft40Wagons,
+    ft20Wagons: Ft20Wagons,
+    wagonLayout,
+  };
 }
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx
index 7fc5b7b02..d0c8b7b9a 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx
@@ -1,11 +1,7 @@
 import { Controller, type UseFormReturn } from "react-hook-form";
 import { Flame, MapPin, Snowflake } from "lucide-react";
 import { Field, Separator, Switch } from "@edr/ui-common";
-import {
-  type BookingFormValues,
-  getRouteDirection,
-  STATIONS,
-} from "./schema";
+import { type BookingFormValues, getRouteDirection, STATIONS } from "./schema";
 import { SelectField, SelectOptions, StepHeader, StepLabel } from "./shared";
 
 type BookingForm = UseFormReturn<BookingFormValues>;
@@ -33,7 +29,6 @@ export function Step4Route({ form }: { form: BookingForm }) {
       />
 
       <div className="space-y-3">
-        <StepLabel>Route</StepLabel>
         <div className="grid gap-3 sm:grid-cols-2">
           <Controller
             name="originYard"
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
index f4fee0bf8..9f02e3ced 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
@@ -1,6 +1,13 @@
 import { Controller, useFieldArray, type UseFormReturn } from "react-hook-form";
 import { MapPin, Package, Plus, Trash2, Weight } from "lucide-react";
-import { Button, Field, FieldError, FieldLabel, Input, Separator } from "@edr/ui-common";
+import {
+  Button,
+  Field,
+  FieldError,
+  FieldLabel,
+  Input,
+  Separator,
+} from "@edr/ui-common";
 import {
   BREAK_BULK_TYPES,
   BULK_COMMODITIES,
@@ -87,7 +94,11 @@ export function Step5CargoDetails({
                   selected={cargoType === "bulk"}
                   onClick={() => {
                     field.onChange("bulk");
-                    form.setValue("containers", [{ type: "20ft", qty: 1, vgm: 0 }], { shouldDirty: true });
+                    form.setValue(
+                      "containers",
+                      [{ type: "20ft", qty: "1", vgm: "0" }],
+                      { shouldDirty: true },
+                    );
                   }}
                 >
                   <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100">
@@ -254,7 +265,7 @@ export function Step5CargoDetails({
                 type="button"
                 variant="outline"
                 size="sm"
-                onClick={() => append({ type: "20ft", qty: 1, vgm: 0 })}
+                onClick={() => append({ type: "20ft", qty: "1", vgm: "0" })}
               >
                 <Plus className="mr-1 h-3.5 w-3.5" />
                 Add Container
@@ -275,7 +286,7 @@ export function Step5CargoDetails({
             {fields.map((field, index) => {
               const containerType = containers[index]?.type;
               const vgm = containers[index]?.vgm ?? 0;
-              const alert = getOverweightAlert(containerType, vgm);
+              const alert = getOverweightAlert(containerType, +vgm);
 
               return (
                 <div
@@ -351,7 +362,10 @@ export function Step5CargoDetails({
                               type="button"
                               onClick={() =>
                                 qtyField.onChange(
-                                  Math.max(1, (qtyField.value ?? 1) - 1),
+                                  Math.max(
+                                    1,
+                                    Number(qtyField.value ?? 1) - 1,
+                                  ).toString(),
                                 )
                               }
                               className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
@@ -361,9 +375,7 @@ export function Step5CargoDetails({
                             <Input
                               value={qtyField.value ?? 1}
                               onChange={(e) =>
-                                qtyField.onChange(
-                                  Math.max(1, parseInt(e.target.value) || 1),
-                                )
+                                qtyField.onChange(e.target.value)
                               }
                               onBlur={qtyField.onBlur}
                               type="number"
@@ -375,7 +387,7 @@ export function Step5CargoDetails({
                               type="button"
                               onClick={() =>
                                 qtyField.onChange(
-                                  (qtyField.value ?? 1) + 1,
+                                  (Number(qtyField.value ?? 1) + 1).toString(),
                                 )
                               }
                               className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
@@ -396,11 +408,7 @@ export function Step5CargoDetails({
                           <FieldLabel>VGM (Tons) *</FieldLabel>
                           <Input
                             value={vgmField.value ?? 0}
-                            onChange={(e) =>
-                              vgmField.onChange(
-                                parseFloat(e.target.value) || 0,
-                              )
-                            }
+                            onChange={(e) => vgmField.onChange(e.target.value)}
                             onBlur={vgmField.onBlur}
                             type="number"
                             aria-invalid={fieldState.invalid}
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx
index 0bae2917e..c58b34241 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx
@@ -1,11 +1,6 @@
-import { Controller, type UseFormReturn } from "react-hook-form";
-import { AlertTriangle } from "lucide-react";
-import { Separator } from "@edr/ui-common";
-import {
-  type BookingFormValues,
-  type WagonCalcResult,
-} from "./schema";
-import { AlertBox, OptionCard, StepHeader, StepLabel } from "./shared";
+import { type UseFormReturn } from "react-hook-form";
+import { type BookingFormValues, type WagonCalcResult } from "./schema";
+import { AlertBox, StepHeader, StepLabel } from "./shared";
 
 type BookingForm = UseFormReturn<BookingFormValues>;
 
@@ -17,13 +12,14 @@ export function Step6WagonAllocation({
   wagons: WagonCalcResult | null;
 }) {
   const containers = form.watch("containers") ?? [];
-  const totalContainers = containers.reduce((sum, c) => sum + (c.qty || 0), 0);
+  const totalContainers = containers.reduce(
+    (sum, c) => sum + Number(c.qty || 0),
+    0,
+  );
   const containerSummary = containers
-    .filter((c) => c.qty > 0)
+    .filter((c) => +c.qty > 0)
     .map((c) => `${c.qty} × ${c.type}`)
     .join(", ");
-  const consolidationEnabled = form.watch("consolidationEnabled");
-
   return (
     <div className="space-y-6">
       <StepHeader
@@ -62,74 +58,50 @@ export function Step6WagonAllocation({
           <div>
             <StepLabel>Wagon Layout</StepLabel>
             <div className="mt-2 flex flex-wrap gap-2">
-              {Array.from({ length: wagons.totalWagons }, (_, index) => {
-                const isOdd =
-                  wagons.hasOddUnit && index === wagons.totalWagons - 1;
-                return (
-                  <div
-                    key={index}
-                    className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold ${isOdd
-                        ? "border-amber-300 bg-amber-50 text-amber-700"
-                        : "border-primary/30 bg-primary/5 text-primary"
-                      }`}
-                  >
-                    {isOdd ? "1 × 20ft (1/2)" : "2 × 20ft"}
-                  </div>
-                );
-              })}
+              {new Array(wagons.ft40Wagons).fill(0).map((_, index) => (
+                <div
+                  key={index}
+                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold 
+border-primary/30 bg-primary/5 text-primary `}
+                >
+                  1 × 40ft
+                </div>
+              ))}
+              {new Array(wagons.sharedWagons).fill(0).map((_, index) => (
+                <div
+                  key={index}
+                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold 
+ border-amber-300 bg-amber-50 text-amber-700
+`}
+                >
+                  2 × 20ft
+                </div>
+              ))}
+              {wagons.hasOddUnit && (
+                <div
+                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold border-destructive! bg-destructive/10 text-destructive `}
+                >
+                  1 × 20ft
+                </div>
+              )}
             </div>
           </div>
 
-          <p className="text-xs text-muted-foreground">
-            {containers.some((c) => c.type === "40ft")
-              ? "1 × 40ft = 1 Rail Wagon"
-              : `CEILING(${totalContainers} / 2) = ${wagons.totalWagons} Rail Wagon${wagons.totalWagons > 1 ? "s" : ""} — 2 × 20ft = 1 Wagon`}
-          </p>
-
           {wagons.hasOddUnit && (
             <>
-              <Separator />
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <AlertTriangle className="h-4 w-4 text-amber-500" />
-                  <p className="text-sm font-medium">
-                    Consolidation Option (US-07)
-                  </p>
+              <AlertBox tone="warning">
+                <div className="flex items-start gap-2">
+                  <div>
+                    <p className="font-semibold">Unpaired 20ft Container</p>
+                    <p className="mt-1 text-xs">
+                      One 20ft container occupies only half a wagon. The wagon
+                      will depart once a co-loader is found to fill the
+                      remaining slot, which <strong>may delay departure</strong>{" "}
+                      beyond the standard lead time.
+                    </p>
+                  </div>
                 </div>
-                <p className="text-xs text-muted-foreground">
-                  You have 1 unpaired 20ft container. Opt in to share a wagon
-                  slot with another shipper to optimise costs, or request a
-                  dedicated wagon.
-                </p>
-                <Controller
-                  name="consolidationEnabled"
-                  control={form.control}
-                  render={({ field }) => (
-                    <div className="grid gap-2 sm:grid-cols-2">
-                      <OptionCard
-                        selected={consolidationEnabled}
-                        onClick={() => field.onChange(true)}
-                      >
-                        <p className="text-sm font-semibold">
-                          Allow Consolidation
-                        </p>
-                        <p className="mt-0.5 text-xs text-muted-foreground">
-                          Share a wagon slot. Billing split with co-loader.
-                        </p>
-                      </OptionCard>
-                      <OptionCard
-                        selected={!consolidationEnabled}
-                        onClick={() => field.onChange(false)}
-                      >
-                        <p className="text-sm font-semibold">Dedicated Wagon</p>
-                        <p className="mt-0.5 text-xs text-muted-foreground">
-                          Exclusive slot. Standard single-party billing.
-                        </p>
-                      </OptionCard>
-                    </div>
-                  )}
-                />
-              </div>
+              </AlertBox>
             </>
           )}
         </>

From 724a99a2fc0c944dbe39e2f5b0a0a348cdf8aa5e Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 17:31:26 +0300
Subject: [PATCH 12/13] chore: add the dropdown service to the api repo

---
 .../portal/src/services/api.ts                | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/apps/edr-freight-web/portal/src/services/api.ts b/apps/edr-freight-web/portal/src/services/api.ts
index 999bf6ced..e368ed675 100644
--- a/apps/edr-freight-web/portal/src/services/api.ts
+++ b/apps/edr-freight-web/portal/src/services/api.ts
@@ -12,6 +12,15 @@ import { bookingsService } from "./bookings.service";
 import { consignmentsService } from "./consignments.service";
 import { trackingService } from "./tracking.service";
 import { fileUploadSettingsService } from "./fileUploadSettings.service";
+import { dropdownSettingsService } from "./dropdownSettings.service";
+import {
+  CreateDropdownOptionDto,
+  CreateDropdownSettingDto,
+  DropdownOption,
+  DropdownSetting,
+  UpdateDropdownOptionDto,
+  UpdateDropdownSettingDto,
+} from "@/types/dropdownSettings";
 
 // ---------------------------------------------------------------------------
 // API definition
@@ -135,4 +144,69 @@ export const api = {
       ({ fieldId }) => fileUploadSettingsService.removeField(fieldId),
     ),
   },
+
+  dropdownSettings: {
+    list: endpoint<void, DropdownSetting[]>(
+      "dropdown-settings",
+      "list",
+      dropdownSettingsService.list,
+    ),
+
+    getById: endpoint<{ id: string }, DropdownSetting>(
+      "dropdown-settings",
+      "getById",
+      ({ id }) => dropdownSettingsService.getById(id),
+    ),
+
+    getByCode: endpoint<{ code: string }, DropdownSetting>(
+      "dropdown-settings",
+      "getByCode",
+      ({ code }) => dropdownSettingsService.getByCode(code),
+    ),
+
+    create: endpoint<CreateDropdownSettingDto, DropdownSetting>(
+      "dropdown-settings",
+      "create",
+      (payload) => dropdownSettingsService.create(payload),
+    ),
+
+    update: endpoint<
+      { id: string; dto: UpdateDropdownSettingDto },
+      DropdownSetting
+    >("dropdown-settings", "update", ({ id, dto }) =>
+      dropdownSettingsService.update(id, dto),
+    ),
+
+    remove: endpoint<{ id: string }, void>(
+      "dropdown-settings",
+      "remove",
+      ({ id }) => dropdownSettingsService.remove(id),
+    ),
+    replaceOptions: endpoint<
+      { id: string; options: CreateDropdownOptionDto[] },
+      DropdownOption[]
+    >("dropdown-settings", "replaceOptions", ({ id, options }) =>
+      dropdownSettingsService.replaceOptions(id, options),
+    ),
+
+    addOption: endpoint<
+      { id: string; dto: CreateDropdownOptionDto },
+      DropdownOption
+    >("dropdown-settings", "addOption", ({ id, dto }) =>
+      dropdownSettingsService.addOption(id, dto),
+    ),
+
+    updateOption: endpoint<
+      { optionId: string; dto: UpdateDropdownOptionDto },
+      DropdownOption
+    >("dropdown-settings", "updateOption", ({ optionId, dto }) =>
+      dropdownSettingsService.updateOption(optionId, dto),
+    ),
+
+    removeOption: endpoint<{ optionId: string }, void>(
+      "dropdown-settings",
+      "removeOption",
+      ({ optionId }) => dropdownSettingsService.removeOption(optionId),
+    ),
+  },
 };

From bf4d9550f16303a1dc77f4e98f6b6296f7298367 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 22 May 2026 17:32:35 +0300
Subject: [PATCH 13/13] feat: implemented dynamic select

---
 .../dynamic-select/DynamicSelect.tsx          | 99 +++++++++++++++++++
 .../src/components/dynamic-select/index.ts    |  2 +
 2 files changed, 101 insertions(+)
 create mode 100644 apps/edr-freight-web/portal/src/components/dynamic-select/DynamicSelect.tsx
 create mode 100644 apps/edr-freight-web/portal/src/components/dynamic-select/index.ts

diff --git a/apps/edr-freight-web/portal/src/components/dynamic-select/DynamicSelect.tsx b/apps/edr-freight-web/portal/src/components/dynamic-select/DynamicSelect.tsx
new file mode 100644
index 000000000..2003457f0
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/components/dynamic-select/DynamicSelect.tsx
@@ -0,0 +1,99 @@
+import { useQuery } from "@tanstack/react-query";
+import { cn } from "@/lib/utils";
+import { api } from "@/services/api";
+import { Loader2, AlertCircle } from "lucide-react";
+import * as React from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@edr/ui-common";
+
+export interface DynamicSelectProps {
+  code: string;
+  placeholder?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function DynamicSelect({
+  code,
+  placeholder,
+  value,
+  onValueChange,
+  disabled,
+  className,
+}: DynamicSelectProps) {
+  const { data, isLoading, isError } = useQuery(
+    api.dropdownSettings.getByCode.queryOptions({ input: { code } }),
+  );
+
+  if (isLoading) {
+    return (
+      <div
+        className={cn(
+          "flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm text-muted-foreground",
+          className,
+        )}
+      >
+        <Loader2 className="size-4 animate-spin" />
+        Loading...
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <div
+        className={cn(
+          "flex h-9 w-full items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+          className,
+        )}
+      >
+        <AlertCircle className="size-4 shrink-0" />
+        Failed to load options
+      </div>
+    );
+  }
+
+  const options = [...data.children].sort((a, b) => a.order - b.order);
+
+  return (
+    <Select
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled}
+    >
+      <SelectTrigger className={cn("w-full", className)}>
+        <SelectValue placeholder={placeholder ?? `Select ${data.label}`} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.length === 0 ? (
+          <div className="p-2 text-center text-sm text-muted-foreground">
+            No options available
+          </div>
+        ) : (
+          options.map((option) => (
+            <SelectItem
+              key={option.id}
+              value={option.value}
+              disabled={option.disabled}
+            >
+              {option.label}
+              {option.note ? (
+                <span className="ml-1 text-xs text-muted-foreground">
+                  {option.note}
+                </span>
+              ) : null}
+            </SelectItem>
+          ))
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/components/dynamic-select/index.ts b/apps/edr-freight-web/portal/src/components/dynamic-select/index.ts
new file mode 100644
index 000000000..4e6c58b62
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/components/dynamic-select/index.ts
@@ -0,0 +1,2 @@
+export { DynamicSelect } from "./DynamicSelect";
+export type { DynamicSelectProps } from "./DynamicSelect";