From e1aa01724f9cc3d684b963cf27dac19eee509320 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Wed, 20 May 2026 12:03:15 +0300
Subject: [PATCH 1/5] style: add components

---
 packages/ui-common/src/components/label.tsx   | 22 +++++++++++++++++++
 .../ui-common/src/components/textarea.tsx     | 18 +++++++++++++++
 packages/ui-common/src/index.ts               |  3 ++-
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui-common/src/components/label.tsx
 create mode 100644 packages/ui-common/src/components/textarea.tsx

diff --git a/packages/ui-common/src/components/label.tsx b/packages/ui-common/src/components/label.tsx
new file mode 100644
index 000000000..79709edc3
--- /dev/null
+++ b/packages/ui-common/src/components/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/packages/ui-common/src/components/textarea.tsx b/packages/ui-common/src/components/textarea.tsx
new file mode 100644
index 000000000..d3e680bc3
--- /dev/null
+++ b/packages/ui-common/src/components/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/packages/ui-common/src/index.ts b/packages/ui-common/src/index.ts
index b2381a38d..6f047a6f2 100644
--- a/packages/ui-common/src/index.ts
+++ b/packages/ui-common/src/index.ts
@@ -20,7 +20,8 @@ export type {
 
 export * from "./components/button";
 export * from "./components/input";
-
+export * from "./components/textarea";
+export * from "./components/label";
 export * from "./components/card";
 
 export * from "./components/data-table";

From 059e555dc9cf59d5d44af072a1e34fb7d725191f Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Wed, 20 May 2026 12:04:07 +0300
Subject: [PATCH 2/5] style: update the pages to use global theme

---
 .../src/pages/admin/DropdownSettingsPage.tsx  | 460 ++++++-----
 .../portal/src/pages/billing/BillingPage.tsx  | 512 +++++-------
 .../src/pages/bookings/BookingDetailPage.tsx  | 107 ++-
 .../src/pages/bookings/BookingsPage.tsx       | 503 +++++-------
 .../consignments/ConsignmentDetailPage.tsx    |  92 +--
 .../pages/consignments/ConsignmentsPage.tsx   | 584 ++++++-------
 .../src/pages/customers/CustomersPage.tsx     |  20 +-
 .../pages/customers/DeleteCustomerDialog.tsx  |   2 +-
 .../src/pages/customers/NewCustomerPage.tsx   |  13 +-
 .../src/pages/dashboard/DashboardPage.tsx     | 183 ++---
 .../src/pages/documents/DocumentsPage.tsx     | 775 ++++++++----------
 .../src/pages/tracking/TrackingPage.tsx       | 586 +++++++------
 .../portal/src/pages/trains/TrainsPage.tsx    | 490 +++++------
 13 files changed, 1897 insertions(+), 2430 deletions(-)

diff --git a/apps/edr-freight-web/portal/src/pages/admin/DropdownSettingsPage.tsx b/apps/edr-freight-web/portal/src/pages/admin/DropdownSettingsPage.tsx
index 1b50ca786..93d466006 100644
--- a/apps/edr-freight-web/portal/src/pages/admin/DropdownSettingsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/admin/DropdownSettingsPage.tsx
@@ -18,8 +18,22 @@ import EditDropdownSettingDialog from "./EditDropdownSettingDialog";
 import ManageDropdownOptionsDialog from "./ManageDropdownOptionsDialog";
 import DeleteDropdownSettingDialog from "./DeleteDropdownSettingDialog";
 import { dropdownSettings } from "./dropdownSettings.mock";
+import {
+  DataTable,
+  DataTableFooter,
+  type ColumnDef,
+  usePagination,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Input,
+} from "@edr/ui-common";
 
 export default function DropdownSettingsPage() {
+  const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [query, setQuery] = useState("");
 
   const filtered = useMemo(() => {
@@ -33,6 +47,16 @@ export default function DropdownSettingsPage() {
     );
   }, [query]);
 
+  const total = filtered.length;
+  const pageCount = Math.ceil(total / pagination.pageSize);
+  const start = pagination.pageIndex * pagination.pageSize;
+  const end = Math.min(start + pagination.pageSize, total);
+
+  const paginatedData = useMemo(
+    () => filtered.slice(start, end),
+    [start, end, filtered],
+  );
+
   const totalOptions = dropdownSettings.reduce(
     (sum, s) => sum + s.children.length,
     0,
@@ -42,9 +66,132 @@ export default function DropdownSettingsPage() {
     (s) => s.meta?.searchable,
   ).length;
 
+  const columns: ColumnDef<(typeof dropdownSettings)[number]>[] = [
+    {
+      id: "setting",
+      header: "Setting",
+      cell: ({ row }) => {
+        const s = row.original;
+        return (
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
+              <Settings />
+            </div>
+            <div>
+              <p className="font-medium text-slate-900">{s.label}</p>
+              <p className="text-xs text-slate-500">
+                {s.description ?? "No description"}
+              </p>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      id: "code",
+      header: "Code",
+      cell: ({ row }) => (
+        <span className="rounded-md bg-slate-100 px-2 py-1 font-mono text-xs text-slate-700">
+          {row.original.code}
+        </span>
+      ),
+    },
+    {
+      id: "options",
+      header: "Options",
+      cell: ({ row }) => {
+        const s = row.original;
+        return (
+          <div className="flex items-center gap-2 text-sm text-slate-700">
+            <Boxes />
+            <span className="font-medium">{s.children.length}</span>
+          </div>
+        );
+      },
+    },
+    {
+      id: "behavior",
+      header: "Behavior",
+      cell: ({ row }) => {
+        const s = row.original;
+        return (
+          <div className="flex flex-wrap gap-1">
+            {s.multiple ? (
+              <BehaviorChip label="Multi" />
+            ) : (
+              <BehaviorChip label="Single" muted />
+            )}
+            {s.meta?.searchable ? (
+              <BehaviorChip label="Searchable" />
+            ) : null}
+            {s.meta?.clearable ? (
+              <BehaviorChip label="Clearable" />
+            ) : null}
+          </div>
+        );
+      },
+    },
+    {
+      id: "permissions",
+      header: "Permissions",
+      cell: ({ row }) => {
+        const s = row.original;
+        return (
+          <div className="flex flex-wrap items-center gap-1">
+            {(s.meta?.permissions ?? []).length === 0 ? (
+              <span className="text-xs text-slate-400">—</span>
+            ) : (
+              (s.meta?.permissions ?? []).map((p) => (
+                <span
+                  key={p}
+                  className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
+                >
+                  <Shield />
+                  {p}
+                </span>
+              ))
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      id: "actions",
+      header: () => <div className="text-right">Actions</div>,
+      cell: ({ row }) => {
+        const setting = row.original;
+        return (
+          <div className="flex justify-end gap-2">
+            <ManageDropdownOptionsDialog setting={setting}>
+              <Button variant="outline" size="sm">
+                <CheckCircle2 />
+                Options
+              </Button>
+            </ManageDropdownOptionsDialog>
+
+            <EditDropdownSettingDialog mode="edit" setting={setting}>
+              <Button variant="outline" size="icon">
+                <Pencil />
+              </Button>
+            </EditDropdownSettingDialog>
+
+            <DeleteDropdownSettingDialog
+              settingLabel={setting.label}
+              settingCode={setting.code}
+            >
+              <Button variant="outline" size="icon">
+                <Trash2 />
+              </Button>
+            </DeleteDropdownSettingDialog>
+          </div>
+        );
+      },
+    },
+  ];
+
   return (
-    <div className="min-h-screen bg-slate-50 p-6">
-      <div className="mx-auto max-w-7xl space-y-6">
+    <div className="min-h-screen p-6">
+      <div className="space-y-6">
         <Breadcrumbs
           items={[
             { label: "Admin", href: "/admin" },
@@ -52,13 +199,12 @@ export default function DropdownSettingsPage() {
           ]}
         />
 
-        {/* Header */}
-        <div className="flex flex-col gap-4 rounded-3xl bg-white p-6 shadow-sm md:flex-row md:items-center md:justify-between">
+        <Card className="p-6 flex-row justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight text-slate-900">
               Dropdown Settings
             </h1>
-            <p className="mt-1 text-sm text-slate-500">
+            <p className="mt-1 text-sm text-secondary-foreground">
               Manage every dynamic dropdown across the platform — labels,
               options, ordering, and permissions.
             </p>
@@ -66,208 +212,122 @@ export default function DropdownSettingsPage() {
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-              <input
+              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Input
                 type="search"
                 value={query}
-                onChange={(e) => setQuery(e.target.value)}
+                onChange={(e) => {
+                  setQuery(e.target.value);
+                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                }}
                 placeholder="Search by code, label, description..."
-                className="h-10 w-full rounded-2xl border border-slate-200 bg-white pl-10 pr-4 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
+                className="pl-8!"
               />
             </div>
 
             <EditDropdownSettingDialog mode="create">
-              <button
-                type="button"
-                className="inline-flex items-center justify-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
-              >
-                <Plus className="h-4 w-4" />
+              <Button>
+                <Plus />
                 New Setting
-              </button>
+              </Button>
             </EditDropdownSettingDialog>
           </div>
-        </div>
+        </Card>
 
-        {/* Stats */}
         <div className="grid gap-4 md:grid-cols-4">
-          <StatCard
-            title="Settings"
-            value={String(dropdownSettings.length)}
-            icon={<Settings className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Total Options"
-            value={String(totalOptions)}
-            icon={<Boxes className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Multi-select"
-            value={String(multipleCount)}
-            icon={<ListOrdered className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Searchable"
-            value={String(searchableCount)}
-            icon={<Sparkles className="h-5 w-5" />}
-          />
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Settings</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {dropdownSettings.length}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Settings />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Total Options</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {totalOptions}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Boxes />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Multi-select</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {multipleCount}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <ListOrdered />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Searchable</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {searchableCount}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Sparkles />
+              </div>
+            </CardContent>
+          </Card>
         </div>
 
-        {/* Table */}
-        <div className="overflow-hidden rounded-3xl bg-white shadow-sm">
-          <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
+        <Card className="gap-0">
+          <CardHeader className="flex flex-row items-center justify-between border-b">
             <div>
-              <h2 className="text-lg font-semibold text-slate-900">
-                Registered Dropdowns
-              </h2>
-              <p className="text-sm text-slate-500">
+              <CardTitle>Registered Dropdowns</CardTitle>
+              <CardDescription>
                 Every dynamic dropdown the platform reads from.
-              </p>
+              </CardDescription>
             </div>
 
-            <button className="inline-flex items-center gap-2 rounded-2xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]">
-              <Filter className="h-4 w-4" />
+            <Button variant="secondary" size="sm">
+              <Filter />
               Filter
-            </button>
-          </div>
+            </Button>
+          </CardHeader>
 
-          <div className="overflow-x-auto">
-            <table className="w-full min-w-[1000px] whitespace-nowrap text-left">
-              <thead className="bg-slate-50 text-sm text-slate-500">
-                <tr>
-                  <th className="px-6 py-4 font-medium">Setting</th>
-                  <th className="px-6 py-4 font-medium">Code</th>
-                  <th className="px-6 py-4 font-medium">Options</th>
-                  <th className="px-6 py-4 font-medium">Behavior</th>
-                  <th className="px-6 py-4 font-medium">Permissions</th>
-                  <th className="px-6 py-4 font-medium text-right">Actions</th>
-                </tr>
-              </thead>
-
-              <tbody>
-                {filtered.length === 0 ? (
-                  <tr>
-                    <td
-                      colSpan={6}
-                      className="px-6 py-12 text-center text-sm text-slate-500"
-                    >
-                      No dropdown settings match your search.
-                    </td>
-                  </tr>
-                ) : (
-                  filtered.map((setting) => (
-                    <tr
-                      key={setting.id}
-                      className="border-t border-slate-100 transition hover:bg-[#10B981]/5"
-                    >
-                      <td className="px-6 py-4">
-                        <div className="flex items-center gap-3">
-                          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#10B981] text-white">
-                            <Settings className="h-5 w-5" />
-                          </div>
-                          <div>
-                            <p className="font-medium text-slate-900">
-                              {setting.label}
-                            </p>
-                            <p className="text-xs text-slate-500">
-                              {setting.description ?? "No description"}
-                            </p>
-                          </div>
-                        </div>
-                      </td>
-
-                      <td className="px-6 py-4">
-                        <span className="rounded-md bg-slate-100 px-2 py-1 font-mono text-xs text-slate-700">
-                          {setting.code}
-                        </span>
-                      </td>
-
-                      <td className="px-6 py-4">
-                        <div className="flex items-center gap-2 text-sm text-slate-700">
-                          <Boxes className="h-4 w-4 text-[#10B981]" />
-                          <span className="font-medium">
-                            {setting.children.length}
-                          </span>
-                        </div>
-                      </td>
-
-                      <td className="px-6 py-4">
-                        <div className="flex flex-wrap gap-1">
-                          {setting.multiple ? (
-                            <BehaviorChip label="Multi" />
-                          ) : (
-                            <BehaviorChip label="Single" muted />
-                          )}
-                          {setting.meta?.searchable ? (
-                            <BehaviorChip label="Searchable" />
-                          ) : null}
-                          {setting.meta?.clearable ? (
-                            <BehaviorChip label="Clearable" />
-                          ) : null}
-                        </div>
-                      </td>
-
-                      <td className="px-6 py-4">
-                        <div className="flex flex-wrap items-center gap-1">
-                          {(setting.meta?.permissions ?? []).length === 0 ? (
-                            <span className="text-xs text-slate-400">—</span>
-                          ) : (
-                            (setting.meta?.permissions ?? []).map((p) => (
-                              <span
-                                key={p}
-                                className="inline-flex items-center gap-1 rounded-full bg-[#10B981]/10 px-2 py-0.5 text-xs font-medium text-[#10B981]"
-                              >
-                                <Shield className="h-3 w-3" />
-                                {p}
-                              </span>
-                            ))
-                          )}
-                        </div>
-                      </td>
-
-                      <td className="px-6 py-4">
-                        <div className="flex justify-end gap-2">
-                          <ManageDropdownOptionsDialog setting={setting}>
-                            <button
-                              type="button"
-                              className="inline-flex items-center gap-1 rounded-xl border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                            >
-                              <CheckCircle2 className="h-3.5 w-3.5" />
-                              Options
-                            </button>
-                          </ManageDropdownOptionsDialog>
-
-                          <EditDropdownSettingDialog
-                            mode="edit"
-                            setting={setting}
-                          >
-                            <button
-                              type="button"
-                              className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                            >
-                              <Pencil className="h-4 w-4" />
-                            </button>
-                          </EditDropdownSettingDialog>
-
-                          <DeleteDropdownSettingDialog
-                            settingLabel={setting.label}
-                            settingCode={setting.code}
-                          >
-                            <button
-                              type="button"
-                              className="rounded-xl border border-red-200 p-2 text-red-600 transition hover:bg-red-50"
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </button>
-                          </DeleteDropdownSettingDialog>
-                        </div>
-                      </td>
-                    </tr>
-                  ))
-                )}
-              </tbody>
-            </table>
-          </div>
-        </div>
+          <CardContent className="px-0">
+            <DataTable
+              columns={columns}
+              data={paginatedData}
+              status="success"
+              onRowClick={() => {}}
+              pagination={{
+                pageIndex: pagination.pageIndex,
+                pageSize: pagination.pageSize,
+                pageCount: pageCount,
+                totalCount: total,
+              }}
+              tableOptions={{
+                state: { pagination },
+                onPaginationChange: setPagination,
+              }}
+              containerClassName="border-b shadow-none"
+              footer={DataTableFooter}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
@@ -285,34 +345,10 @@ function BehaviorChip({
       className={
         muted
           ? "rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-600"
-          : "rounded-full bg-[#10B981]/10 px-2 py-0.5 text-xs font-medium text-[#10B981]"
+          : "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
       }
     >
       {label}
     </span>
   );
 }
-
-function StatCard({
-  title,
-  value,
-  icon,
-}: {
-  title: string;
-  value: string;
-  icon: React.ReactNode;
-}) {
-  return (
-    <div className="rounded-3xl bg-white p-6 shadow-sm transition hover:shadow-md hover:ring-1 hover:ring-[#10B981]/20">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm text-slate-500">{title}</p>
-          <h3 className="mt-2 text-3xl font-bold text-slate-900">{value}</h3>
-        </div>
-        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#10B981] text-white">
-          {icon}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/edr-freight-web/portal/src/pages/billing/BillingPage.tsx b/apps/edr-freight-web/portal/src/pages/billing/BillingPage.tsx
index a1f594e40..49b314dd4 100644
--- a/apps/edr-freight-web/portal/src/pages/billing/BillingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/billing/BillingPage.tsx
@@ -1,8 +1,6 @@
 import { useMemo, useState } from "react";
 import {
   AlertCircle,
-  ChevronLeft,
-  ChevronRight,
   Clock,
   DollarSign,
   Download,
@@ -22,8 +20,19 @@ import {
   invoices,
   type InvoiceStatus,
 } from "./invoices.mock";
-
-const PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
+import {
+  DataTable,
+  DataTableFooter,
+  type ColumnDef,
+  usePagination,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Input,
+} from "@edr/ui-common";
 
 type FilterValue = "All" | InvoiceStatus;
 
@@ -37,8 +46,7 @@ const FILTERS: FilterValue[] = [
 ];
 
 export default function BillingPage() {
-  const [pageSize, setPageSize] = useState(10);
-  const [page, setPage] = useState(1);
+  const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [filter, setFilter] = useState<FilterValue>("All");
   const [query, setQuery] = useState("");
 
@@ -56,13 +64,13 @@ export default function BillingPage() {
   }, [filter, query]);
 
   const total = filtered.length;
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  const safePage = Math.min(page, totalPages);
-  const start = (safePage - 1) * pageSize;
-  const end = Math.min(start + pageSize, total);
-  const paginated = useMemo(
+  const pageCount = Math.ceil(total / pagination.pageSize);
+  const start = pagination.pageIndex * pagination.pageSize;
+  const end = Math.min(start + pagination.pageSize, total);
+
+  const paginatedData = useMemo(
     () => filtered.slice(start, end),
-    [filtered, start, end],
+    [start, end, filtered],
   );
 
   const totalRevenue = invoices
@@ -77,73 +85,179 @@ export default function BillingPage() {
     .reduce((sum, inv) => sum + inv.amount, 0);
   const overdueCount = invoices.filter((inv) => inv.status === "Overdue").length;
 
+  const columns: ColumnDef<(typeof invoices)[number]>[] = [
+    {
+      id: "invoice",
+      header: "Invoice",
+      cell: ({ row }) => {
+        const inv = row.original;
+        return (
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
+              <Receipt />
+            </div>
+            <div>
+              <p className="font-medium text-slate-900">{inv.number}</p>
+              <p className="text-sm text-slate-500">Issued {inv.issueDate}</p>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "customer",
+      header: "Customer",
+    },
+    {
+      accessorKey: "bookingReference",
+      header: "Booking",
+    },
+    {
+      id: "amount",
+      header: "Amount",
+      cell: ({ row }) => {
+        const inv = row.original;
+        return (
+          <span className="text-sm font-medium text-slate-900">
+            {formatCurrency(inv.amount, inv.currency)}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "dueDate",
+      header: "Due Date",
+    },
+    {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => <StatusBadge status={row.original.status} />,
+    },
+    {
+      id: "actions",
+      header: () => <div className="text-right">Actions</div>,
+      cell: ({ row }) => {
+        const invoice = row.original;
+        return (
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" size="icon" aria-label="Download invoice">
+              <Download />
+            </Button>
+
+            <NewInvoicePage
+              mode="edit"
+              invoice={{
+                number: invoice.number,
+                customerId: invoice.customerId,
+                bookingReference: invoice.bookingReference,
+                amount: invoice.amount,
+                currency: invoice.currency,
+                status: invoice.status,
+                issueDate: invoice.issueDate,
+                dueDate: invoice.dueDate,
+                notes: invoice.notes,
+              }}
+            >
+              <Button variant="outline" size="icon">
+                <Pencil />
+              </Button>
+            </NewInvoicePage>
+
+            <DeleteInvoiceDialog invoiceNumber={invoice.number}>
+              <Button variant="outline" size="icon">
+                <Trash2 />
+              </Button>
+            </DeleteInvoiceDialog>
+          </div>
+        );
+      },
+    },
+  ];
+
   return (
-    <div className="min-h-screen bg-slate-50 p-6">
-      <div className="mx-auto max-w-7xl space-y-6">
+    <div className="min-h-screen p-6">
+      <div className="space-y-6">
         <Breadcrumbs items={[{ label: "Billing" }]} />
 
-        {/* Header */}
-        <div className="flex flex-col gap-4 rounded-3xl bg-white p-6 shadow-sm md:flex-row md:items-center md:justify-between">
+        <Card className="p-6 flex-row justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight text-slate-900">
               Billing
             </h1>
-            <p className="mt-1 text-sm text-slate-500">
+            <p className="mt-1 text-sm text-secondary-foreground">
               Manage invoices, payments, and financial records.
             </p>
           </div>
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-              <input
+              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Input
                 type="search"
                 value={query}
                 onChange={(e) => {
                   setQuery(e.target.value);
-                  setPage(1);
+                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
                 }}
                 placeholder="Search invoices..."
-                className="h-10 w-full rounded-2xl border border-slate-200 bg-white pl-10 pr-4 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
+                className="pl-8!"
               />
             </div>
 
             <NewInvoicePage>
-              <button
-                type="button"
-                className="inline-flex items-center justify-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
-              >
-                <Plus className="h-4 w-4" />
+              <Button>
+                <Plus />
                 New Invoice
-              </button>
+              </Button>
             </NewInvoicePage>
           </div>
-        </div>
+        </Card>
 
-        {/* Stats */}
         <div className="grid gap-4 md:grid-cols-3">
-          <StatCard
-            title="Total Revenue (USD)"
-            value={formatCurrency(totalRevenue, "USD")}
-            icon={<DollarSign className="h-5 w-5" />}
-            tone="brand"
-          />
-          <StatCard
-            title="Outstanding (USD)"
-            value={formatCurrency(outstanding, "USD")}
-            icon={<Clock className="h-5 w-5" />}
-            tone="brand"
-          />
-          <StatCard
-            title="Overdue Invoices"
-            value={String(overdueCount)}
-            icon={<AlertCircle className="h-5 w-5" />}
-            tone="danger"
-          />
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Total Revenue (USD)</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {formatCurrency(totalRevenue, "USD")}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <DollarSign />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Outstanding (USD)</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {formatCurrency(outstanding, "USD")}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Clock />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Overdue Invoices</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {overdueCount}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-red-100 text-red-600">
+                <AlertCircle />
+              </div>
+            </CardContent>
+          </Card>
         </div>
 
-        {/* Filter tabs */}
-        <div className="rounded-3xl bg-white p-2 shadow-sm">
+        <Card className="p-2">
           <div className="flex flex-wrap gap-1">
             {FILTERS.map((f) => {
               const isActive = f === filter;
@@ -157,12 +271,12 @@ export default function BillingPage() {
                   type="button"
                   onClick={() => {
                     setFilter(f);
-                    setPage(1);
+                    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
                   }}
                   className={
                     isActive
-                      ? "inline-flex items-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white"
-                      : "inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-[#10B981]/10 hover:text-[#10B981]"
+                      ? "inline-flex items-center gap-2 rounded-2xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
+                      : "inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-primary/10 hover:text-primary"
                   }
                 >
                   {f}
@@ -179,276 +293,44 @@ export default function BillingPage() {
               );
             })}
           </div>
-        </div>
+        </Card>
 
-        {/* Invoices Table */}
-        <div className="overflow-hidden rounded-3xl bg-white shadow-sm">
-          <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
+        <Card className="gap-0">
+          <CardHeader className="flex flex-row items-center justify-between border-b">
             <div>
-              <h2 className="text-lg font-semibold text-slate-900">
-                Invoices
-              </h2>
-              <p className="text-sm text-slate-500">
+              <CardTitle>Invoices</CardTitle>
+              <CardDescription>
                 Issued invoices and their payment status.
-              </p>
+              </CardDescription>
             </div>
 
-            <button className="inline-flex items-center gap-2 rounded-2xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]">
-              <Filter className="h-4 w-4" />
+            <Button variant="secondary" size="sm">
+              <Filter />
               Filter
-            </button>
-          </div>
+            </Button>
+          </CardHeader>
 
-          <div className="overflow-x-auto">
-            <table className="w-full min-w-[900px] whitespace-nowrap text-left">
-              <thead className="bg-slate-50 text-sm text-slate-500">
-                <tr>
-                  <th className="px-6 py-4 font-medium">Invoice</th>
-                  <th className="px-6 py-4 font-medium">Customer</th>
-                  <th className="px-6 py-4 font-medium">Booking</th>
-                  <th className="px-6 py-4 font-medium">Amount</th>
-                  <th className="px-6 py-4 font-medium">Due Date</th>
-                  <th className="px-6 py-4 font-medium">Status</th>
-                  <th className="px-6 py-4 font-medium text-right">Actions</th>
-                </tr>
-              </thead>
-
-              <tbody>
-                {paginated.length === 0 ? (
-                  <tr>
-                    <td
-                      colSpan={7}
-                      className="px-6 py-12 text-center text-sm text-slate-500"
-                    >
-                      No invoices match your filters.
-                    </td>
-                  </tr>
-                ) : (
-                  paginated.map((invoice) => (
-                    <tr
-                      key={invoice.id}
-                      className="border-t border-slate-100 transition hover:bg-[#10B981]/5"
-                    >
-                      <td className="px-6 py-4">
-                        <div className="flex items-center gap-3">
-                          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#10B981] text-white">
-                            <Receipt className="h-5 w-5" />
-                          </div>
-                          <div>
-                            <p className="font-medium text-slate-900">
-                              {invoice.number}
-                            </p>
-                            <p className="text-sm text-slate-500">
-                              Issued {invoice.issueDate}
-                            </p>
-                          </div>
-                        </div>
-                      </td>
-
-                      <td className="px-6 py-4 text-sm text-slate-700">
-                        {invoice.customer}
-                      </td>
-
-                      <td className="px-6 py-4 text-sm text-slate-700">
-                        {invoice.bookingReference}
-                      </td>
-
-                      <td className="px-6 py-4 text-sm font-medium text-slate-900">
-                        {formatCurrency(invoice.amount, invoice.currency)}
-                      </td>
-
-                      <td className="px-6 py-4 text-sm text-slate-700">
-                        {invoice.dueDate}
-                      </td>
-
-                      <td className="px-6 py-4">
-                        <StatusBadge status={invoice.status} />
-                      </td>
-
-                      <td className="px-6 py-4">
-                        <div className="flex justify-end gap-2">
-                          <button
-                            type="button"
-                            aria-label="Download invoice"
-                            className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                          >
-                            <Download className="h-4 w-4" />
-                          </button>
-
-                          <NewInvoicePage
-                            mode="edit"
-                            invoice={{
-                              number: invoice.number,
-                              customerId: invoice.customerId,
-                              bookingReference: invoice.bookingReference,
-                              amount: invoice.amount,
-                              currency: invoice.currency,
-                              status: invoice.status,
-                              issueDate: invoice.issueDate,
-                              dueDate: invoice.dueDate,
-                              notes: invoice.notes,
-                            }}
-                          >
-                            <button
-                              type="button"
-                              className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                            >
-                              <Pencil className="h-4 w-4" />
-                            </button>
-                          </NewInvoicePage>
-
-                          <DeleteInvoiceDialog invoiceNumber={invoice.number}>
-                            <button
-                              type="button"
-                              className="rounded-xl border border-red-200 p-2 text-red-600 transition hover:bg-red-50"
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </button>
-                          </DeleteInvoiceDialog>
-                        </div>
-                      </td>
-                    </tr>
-                  ))
-                )}
-              </tbody>
-            </table>
-          </div>
-
-          <Pagination
-            page={safePage}
-            pageSize={pageSize}
-            total={total}
-            totalPages={totalPages}
-            start={start}
-            end={end}
-            onPageChange={setPage}
-            onPageSizeChange={(size) => {
-              setPageSize(size);
-              setPage(1);
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Pagination({
-  page,
-  pageSize,
-  total,
-  totalPages,
-  start,
-  end,
-  onPageChange,
-  onPageSizeChange,
-}: {
-  page: number;
-  pageSize: number;
-  total: number;
-  totalPages: number;
-  start: number;
-  end: number;
-  onPageChange: (page: number) => void;
-  onPageSizeChange: (size: number) => void;
-}) {
-  const showingFrom = total === 0 ? 0 : start + 1;
-
-  return (
-    <div className="flex flex-col gap-3 border-t border-slate-100 px-6 py-4 md:flex-row md:items-center md:justify-between">
-      <div className="flex items-center gap-3 text-sm text-slate-500">
-        <label htmlFor="invoice-page-size" className="font-medium text-slate-700">
-          Rows per page
-        </label>
-        <select
-          id="invoice-page-size"
-          value={pageSize}
-          onChange={(e) => onPageSizeChange(Number(e.target.value))}
-          className="h-9 rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-700 outline-none transition focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
-        >
-          {PAGE_SIZE_OPTIONS.map((size) => (
-            <option key={size} value={size}>
-              {size}
-            </option>
-          ))}
-        </select>
-        <span>
-          Showing {showingFrom}–{end} of {total}
-        </span>
-      </div>
-
-      <div className="flex items-center gap-1">
-        <button
-          type="button"
-          onClick={() => onPageChange(page - 1)}
-          disabled={page <= 1}
-          className="inline-flex h-9 items-center gap-1 rounded-xl border border-slate-200 px-3 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-slate-700"
-        >
-          <ChevronLeft className="h-4 w-4" />
-          Prev
-        </button>
-
-        {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => {
-          const isActive = p === page;
-          return (
-            <button
-              key={p}
-              type="button"
-              onClick={() => onPageChange(p)}
-              aria-current={isActive ? "page" : undefined}
-              className={
-                isActive
-                  ? "h-9 w-9 rounded-xl bg-[#10B981] text-sm font-medium text-white"
-                  : "h-9 w-9 rounded-xl border border-slate-200 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-              }
-            >
-              {p}
-            </button>
-          );
-        })}
-
-        <button
-          type="button"
-          onClick={() => onPageChange(page + 1)}
-          disabled={page >= totalPages}
-          className="inline-flex h-9 items-center gap-1 rounded-xl border border-slate-200 px-3 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-slate-700"
-        >
-          Next
-          <ChevronRight className="h-4 w-4" />
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function StatCard({
-  title,
-  value,
-  icon,
-  tone,
-}: {
-  title: string;
-  value: string;
-  icon: React.ReactNode;
-  tone?: "brand" | "danger";
-}) {
-  const iconWrap =
-    tone === "danger"
-      ? "bg-red-100 text-red-600"
-      : "bg-[#10B981] text-white";
-
-  return (
-    <div className="rounded-3xl bg-white p-6 shadow-sm transition hover:shadow-md hover:ring-1 hover:ring-[#10B981]/20">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm text-slate-500">{title}</p>
-          <h3 className="mt-2 text-2xl font-bold text-slate-900">{value}</h3>
-        </div>
-        <div
-          className={`flex h-12 w-12 items-center justify-center rounded-2xl ${iconWrap}`}
-        >
-          {icon}
-        </div>
+          <CardContent className="px-0">
+            <DataTable
+              columns={columns}
+              data={paginatedData}
+              status="success"
+              onRowClick={() => {}}
+              pagination={{
+                pageIndex: pagination.pageIndex,
+                pageSize: pagination.pageSize,
+                pageCount: pageCount,
+                totalCount: total,
+              }}
+              tableOptions={{
+                state: { pagination },
+                onPaginationChange: setPagination,
+              }}
+              containerClassName="border-b shadow-none"
+              footer={DataTableFooter}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
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 0fa42a826..cd1bd1e99 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx
@@ -17,6 +17,11 @@ 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";
 
 export default function BookingDetailPage() {
   const { id } = useParams<{ id: string }>();
@@ -25,37 +30,37 @@ export default function BookingDetailPage() {
 
   if (!booking) {
     return (
-      <div className="min-h-screen bg-slate-50 p-6">
-        <div className="mx-auto max-w-5xl space-y-6">
+      <div className="min-h-screen p-6">
+        <div className="space-y-6">
           <Breadcrumbs
             items={[
               { label: "Bookings", href: "/bookings" },
               { label: "Not found" },
             ]}
           />
-          <div className="rounded-3xl bg-white p-8 text-center shadow-sm">
+          <Card className="p-8 text-center">
             <h1 className="text-2xl font-bold text-slate-900">
               Booking not found
             </h1>
-            <p className="mt-2 text-sm text-slate-500">
+            <p className="mt-2 text-sm text-muted-foreground">
               The booking you're looking for doesn't exist or has been removed.
             </p>
             <Link
               to="/bookings"
-              className="mt-6 inline-flex items-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
+              className="mt-6 inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition hover:bg-primary/90"
             >
-              <ArrowLeft className="h-4 w-4" />
+              <ArrowLeft />
               Back to Bookings
             </Link>
-          </div>
+          </Card>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-slate-50 p-6">
-      <div className="mx-auto max-w-5xl space-y-6">
+    <div className="min-h-screen p-6">
+      <div className="space-y-6">
         <Breadcrumbs
           items={[
             { label: "Bookings", href: "/bookings" },
@@ -63,18 +68,17 @@ export default function BookingDetailPage() {
           ]}
         />
 
-        {/* Header */}
-        <div className="rounded-3xl bg-white p-6 shadow-sm">
+        <Card className="p-6">
           <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
             <div className="flex items-center gap-4">
-              <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[#10B981] text-white">
-                <Package className="h-8 w-8" />
+              <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+                <Package />
               </div>
               <div>
                 <h1 className="text-3xl font-bold tracking-tight text-slate-900">
                   {booking.reference}
                 </h1>
-                <div className="mt-1 flex items-center gap-3 text-sm text-slate-500">
+                <div className="mt-1 flex items-center gap-3 text-sm text-muted-foreground">
                   <span>{booking.customer}</span>
                   <span className="text-slate-300">•</span>
                   <span>{booking.requestedDate}</span>
@@ -103,59 +107,49 @@ export default function BookingDetailPage() {
                   specialInstructions: booking.specialInstructions,
                 }}
               >
-                <button
-                  type="button"
-                  className="inline-flex items-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
-                >
-                  Edit Booking
-                </button>
+                <Button>Edit Booking</Button>
               </NewBookingPage>
 
               <DeleteBookingDialog
                 bookingReference={booking.reference}
                 onConfirm={() => navigate("/bookings")}
               >
-                <button
-                  type="button"
-                  className="inline-flex items-center gap-2 rounded-2xl border border-red-200 px-4 py-2 text-sm font-medium text-red-600 transition hover:bg-red-50"
-                >
-                  <Trash2 className="h-4 w-4" />
+                <Button variant="outline">
+                  <Trash2 />
                   Cancel
-                </button>
+                </Button>
               </DeleteBookingDialog>
             </div>
           </div>
-        </div>
+        </Card>
 
-        {/* Route banner */}
-        <div className="rounded-3xl bg-white p-6 shadow-sm">
+        <Card className="p-6">
           <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
             <RouteEndpoint
               label="Origin"
               station={booking.originStation}
-              icon={<MapPin className="h-5 w-5" />}
+              icon={<MapPin />}
             />
-            <div className="flex items-center gap-2 text-[#10B981]">
-              <Train className="h-5 w-5" />
-              <ArrowRight className="h-5 w-5" />
+            <div className="flex items-center gap-2 text-primary">
+              <Train />
+              <ArrowRight />
             </div>
             <RouteEndpoint
               label="Destination"
               station={booking.destinationStation}
-              icon={<MapPin className="h-5 w-5" />}
+              icon={<MapPin />}
             />
           </div>
-        </div>
+        </Card>
 
-        {/* Transport Legs (multimodal only) */}
         {booking.transportMode === "Multimodal" && booking.legs && booking.legs.length > 0 ? (
-          <div className="rounded-3xl bg-white p-6 shadow-sm">
+          <Card className="p-6">
             <div className="mb-4 flex items-center gap-2">
-              <Train className="h-5 w-5 text-[#10B981]" />
+              <Train />
               <h2 className="text-lg font-semibold text-slate-900">
                 Transport Legs
               </h2>
-              <span className="rounded-full bg-[#10B981]/10 px-2 py-0.5 text-xs font-medium text-[#10B981]">
+              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
                 {booking.legs.length} legs
               </span>
             </div>
@@ -163,10 +157,10 @@ export default function BookingDetailPage() {
               {booking.legs.map((leg, i) => (
                 <div
                   key={i}
-                  className="flex flex-col gap-3 rounded-2xl border border-slate-200 bg-[#10B981]/5 p-4 md:flex-row md:items-center md:justify-between"
+                  className="flex flex-col gap-3 rounded-2xl border bg-primary/5 p-4 md:flex-row md:items-center md:justify-between"
                 >
                   <div className="flex items-center gap-3">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#10B981] text-sm font-bold text-white">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-sm font-bold text-primary-foreground">
                       {i + 1}
                     </div>
                     <div>
@@ -175,7 +169,7 @@ export default function BookingDetailPage() {
                       </p>
                       <p className="font-semibold text-slate-900">
                         {leg.from || "—"}
-                        <ArrowRight className="mx-2 inline h-4 w-4 text-[#10B981]" />
+                        <ArrowRight className="mx-2 inline text-primary" />
                         {leg.to || "—"}
                       </p>
                     </div>
@@ -183,29 +177,28 @@ export default function BookingDetailPage() {
                 </div>
               ))}
             </div>
-          </div>
+          </Card>
         ) : null}
 
-        {/* Detail grid */}
         <div className="grid gap-6 md:grid-cols-2">
           <DetailCard title="Customer & Cargo">
             <DetailRow
-              icon={<User className="h-4 w-4" />}
+              icon={<User />}
               label="Customer"
               value={booking.customer}
             />
             <DetailRow
-              icon={<Package className="h-4 w-4" />}
+              icon={<Package />}
               label="Cargo Type"
               value={booking.cargoType}
             />
             <DetailRow
-              icon={<Package className="h-4 w-4" />}
+              icon={<Package />}
               label="Container"
               value={`${booking.containerCount} × ${booking.containerType}`}
             />
             <DetailRow
-              icon={<Weight className="h-4 w-4" />}
+              icon={<Weight />}
               label="Weight"
               value={`${booking.weightTons} tons`}
             />
@@ -213,17 +206,17 @@ export default function BookingDetailPage() {
 
           <DetailCard title="Schedule & Mode">
             <DetailRow
-              icon={<Train className="h-4 w-4" />}
+              icon={<Train />}
               label="Transport Mode"
               value={booking.transportMode}
             />
             <DetailRow
-              icon={<Calendar className="h-4 w-4" />}
+              icon={<Calendar />}
               label="Requested Date"
               value={booking.requestedDate}
             />
             <DetailRow
-              icon={<Flag className="h-4 w-4" />}
+              icon={<Flag />}
               label="Priority"
               value={booking.priority}
             />
@@ -231,14 +224,14 @@ export default function BookingDetailPage() {
 
           <DetailCard title="Cargo Description">
             <div className="flex items-start gap-3 text-sm text-slate-700">
-              <Package className="mt-0.5 h-4 w-4 text-[#10B981]" />
+              <Package />
               <p className="leading-relaxed">{booking.cargoDescription}</p>
             </div>
           </DetailCard>
 
           <DetailCard title="Special Instructions">
             <div className="flex items-start gap-3 text-sm text-slate-700">
-              <StickyNote className="mt-0.5 h-4 w-4 text-[#10B981]" />
+              <StickyNote />
               <p className="leading-relaxed">{booking.specialInstructions}</p>
             </div>
           </DetailCard>
@@ -259,7 +252,7 @@ function RouteEndpoint({
 }) {
   return (
     <div className="flex items-center gap-3">
-      <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#10B981] text-white">
+      <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
         {icon}
       </div>
       <div>
@@ -280,10 +273,10 @@ function DetailCard({
   children: React.ReactNode;
 }) {
   return (
-    <div className="rounded-3xl bg-white p-6 shadow-sm">
+    <Card className="p-6">
       <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
       <div className="mt-4 space-y-3">{children}</div>
-    </div>
+    </Card>
   );
 }
 
@@ -298,7 +291,7 @@ function DetailRow({
 }) {
   return (
     <div className="flex items-start gap-3">
-      <div className="mt-0.5 text-[#10B981]">{icon}</div>
+      <div className="mt-0.5 text-primary">{icon}</div>
       <div className="flex-1">
         <p className="text-xs font-medium text-slate-500">{label}</p>
         <p className="mt-0.5 text-sm text-slate-900">{value}</p>
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 c9e356ae2..3febdeff5 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingsPage.tsx
@@ -1,9 +1,7 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { Link } from "react-router-dom";
 import {
   ArrowRight,
-  ChevronLeft,
-  ChevronRight,
   Clock,
   Eye,
   Filter,
@@ -19,342 +17,248 @@ import Breadcrumbs from "@/components/Breadcrumbs";
 import NewBookingPage from "./NewBookingPage";
 import DeleteBookingDialog from "./DeleteBookingDialog";
 import { bookings, type BookingStatus } from "./bookings.mock";
-
-const PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
+import {
+  DataTable,
+  DataTableFooter,
+  type ColumnDef,
+  usePagination,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Input,
+} from "@edr/ui-common";
 
 export default function BookingsPage() {
-  const [pageSize, setPageSize] = useState(10);
-  const [page, setPage] = useState(1);
+  const { pagination, setPagination } = usePagination({ pageSize: 10 });
 
   const total = bookings.length;
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  const safePage = Math.min(page, totalPages);
-  const start = (safePage - 1) * pageSize;
-  const end = Math.min(start + pageSize, total);
-  const paginated = useMemo(
+  const pageCount = Math.ceil(total / pagination.pageSize);
+  const start = pagination.pageIndex * pagination.pageSize;
+  const end = Math.min(start + pagination.pageSize, total);
+
+  const paginatedData = useMemo(
     () => bookings.slice(start, end),
     [start, end],
   );
 
+  const columns: ColumnDef<(typeof bookings)[number]>[] = [
+    {
+      accessorKey: "reference",
+      header: "Reference",
+      cell: ({ row }) => {
+        const booking = row.original;
+        return (
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
+              <Package />
+            </div>
+            <div>
+              <p className="font-medium text-slate-900">{booking.reference}</p>
+              <p className="text-sm text-slate-500">{booking.requestedDate}</p>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "customer",
+      header: "Customer",
+    },
+    {
+      id: "route",
+      header: "Route",
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2 text-sm text-slate-700">
+          <span>{row.original.originStation}</span>
+          <ArrowRight className="text-slate-400" />
+          <span>{row.original.destinationStation}</span>
+        </div>
+      ),
+    },
+    {
+      id: "cargo",
+      header: "Cargo",
+      cell: ({ row }) => {
+        const b = row.original;
+        return (
+          <div className="text-sm text-slate-700">
+            <p>{b.cargoType}</p>
+            <p className="text-xs text-slate-500">
+              {b.containerCount} × {b.containerType} · {b.weightTons}t
+            </p>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => <StatusBadge status={row.original.status} />,
+    },
+    {
+      id: "actions",
+      header: () => <div className="text-right">Actions</div>,
+      cell: ({ row }) => {
+        const booking = row.original;
+        return (
+          <div className="flex justify-end gap-2">
+            <Link to={`/bookings/${booking.id}`}>
+              <Button variant="outline" size="icon">
+                <Eye />
+              </Button>
+            </Link>
+
+            <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 variant="outline" size="icon">
+                <Pencil />
+              </Button>
+            </NewBookingPage>
+
+            <DeleteBookingDialog bookingReference={booking.reference}>
+              <Button variant="outline" size="icon">
+                <Trash2 />
+              </Button>
+            </DeleteBookingDialog>
+          </div>
+        );
+      },
+    },
+  ];
+
   return (
-    <div className="min-h-screen bg-slate-50 p-6">
-      <div className="mx-auto max-w-7xl space-y-6">
+    <div className="min-h-screen p-6">
+      <div className="space-y-6">
         <Breadcrumbs items={[{ label: "Bookings" }]} />
 
-        {/* Header */}
-        <div className="flex flex-col gap-4 rounded-3xl bg-white p-6 shadow-sm md:flex-row md:items-center md:justify-between">
+        <Card className="p-6 flex-row justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight text-slate-900">
               Bookings
             </h1>
-            <p className="mt-1 text-sm text-slate-500">
+            <p className="mt-1 text-sm text-secondary-foreground">
               Manage and monitor your freight bookings.
             </p>
           </div>
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-              <input
+              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Input
                 type="search"
                 placeholder="Search bookings..."
-                className="h-10 w-full rounded-2xl border border-slate-200 bg-white pl-10 pr-4 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
+                className="pl-8!"
               />
             </div>
 
             <NewBookingPage>
-              <button
-                type="button"
-                className="inline-flex items-center justify-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
-              >
-                <Plus className="h-4 w-4" />
+              <Button>
+                <Plus />
                 New Booking
-              </button>
+              </Button>
             </NewBookingPage>
           </div>
-        </div>
+        </Card>
 
-        {/* Stats */}
         <div className="grid gap-4 md:grid-cols-3">
-          <StatCard
-            title="Total Bookings"
-            value={String(total)}
-            icon={<Package className="h-5 w-5" />}
-          />
-          <StatCard
-            title="In Transit"
-            value={String(
-              bookings.filter((b) => b.status === "In Transit").length,
-            )}
-            icon={<Truck className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Pending"
-            value={String(
-              bookings.filter((b) => b.status === "Pending").length,
-            )}
-            icon={<Clock className="h-5 w-5" />}
-          />
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Total Bookings</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {total}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Package />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">In Transit</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {bookings.filter((b) => b.status === "In Transit").length}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Truck />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Pending</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {bookings.filter((b) => b.status === "Pending").length}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Clock />
+              </div>
+            </CardContent>
+          </Card>
         </div>
 
-        {/* Booking Table */}
-        <div className="overflow-hidden rounded-3xl bg-white shadow-sm">
-          <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
+        <Card className="gap-0">
+          <CardHeader className="flex flex-row items-center justify-between border-b">
             <div>
-              <h2 className="text-lg font-semibold text-slate-900">
-                Booking List
-              </h2>
-              <p className="text-sm text-slate-500">
+              <CardTitle>Booking List</CardTitle>
+              <CardDescription>
                 Recent freight bookings and their status.
-              </p>
+              </CardDescription>
             </div>
 
-            <button className="inline-flex items-center gap-2 rounded-2xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]">
-              <Filter className="h-4 w-4" />
+            <Button variant="secondary" size="sm">
+              <Filter />
               Filter
-            </button>
-          </div>
+            </Button>
+          </CardHeader>
 
-          <div className="overflow-x-auto">
-            <table className="w-full min-w-[800px] whitespace-nowrap text-left">
-              <thead className="bg-slate-50 text-sm text-slate-500">
-                <tr>
-                  <th className="px-6 py-4 font-medium">Reference</th>
-                  <th className="px-6 py-4 font-medium">Customer</th>
-                  <th className="px-6 py-4 font-medium">Route</th>
-                  <th className="px-6 py-4 font-medium">Cargo</th>
-                  <th className="px-6 py-4 font-medium">Status</th>
-                  <th className="px-6 py-4 font-medium text-right">Actions</th>
-                </tr>
-              </thead>
-
-              <tbody>
-                {paginated.map((booking) => (
-                  <tr
-                    key={booking.id}
-                    className="border-t border-slate-100 transition hover:bg-[#10B981]/5"
-                  >
-                    <td className="px-6 py-4">
-                      <div className="flex items-center gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#10B981] text-white">
-                          <Package className="h-5 w-5" />
-                        </div>
-                        <div>
-                          <p className="font-medium text-slate-900">
-                            {booking.reference}
-                          </p>
-                          <p className="text-sm text-slate-500">
-                            {booking.requestedDate}
-                          </p>
-                        </div>
-                      </div>
-                    </td>
-
-                    <td className="px-6 py-4 text-sm text-slate-700">
-                      {booking.customer}
-                    </td>
-
-                    <td className="px-6 py-4 text-sm text-slate-700">
-                      <div className="flex items-center gap-2">
-                        <span>{booking.originStation}</span>
-                        <ArrowRight className="h-3.5 w-3.5 text-slate-400" />
-                        <span>{booking.destinationStation}</span>
-                      </div>
-                    </td>
-
-                    <td className="px-6 py-4 text-sm text-slate-700">
-                      <div>
-                        <p>{booking.cargoType}</p>
-                        <p className="text-xs text-slate-500">
-                          {booking.containerCount} × {booking.containerType} ·{" "}
-                          {booking.weightTons}t
-                        </p>
-                      </div>
-                    </td>
-
-                    <td className="px-6 py-4">
-                      <StatusBadge status={booking.status} />
-                    </td>
-
-                    <td className="px-6 py-4">
-                      <div className="flex justify-end gap-2">
-                        <Link
-                          to={`/bookings/${booking.id}`}
-                          className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                        >
-                          <Eye className="h-4 w-4" />
-                        </Link>
-
-                        <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
-                            type="button"
-                            className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                          >
-                            <Pencil className="h-4 w-4" />
-                          </button>
-                        </NewBookingPage>
-
-                        <DeleteBookingDialog
-                          bookingReference={booking.reference}
-                        >
-                          <button
-                            type="button"
-                            className="rounded-xl border border-red-200 p-2 text-red-600 transition hover:bg-red-50"
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </button>
-                        </DeleteBookingDialog>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-
-          <Pagination
-            page={safePage}
-            pageSize={pageSize}
-            total={total}
-            totalPages={totalPages}
-            start={start}
-            end={end}
-            onPageChange={setPage}
-            onPageSizeChange={(size) => {
-              setPageSize(size);
-              setPage(1);
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Pagination({
-  page,
-  pageSize,
-  total,
-  totalPages,
-  start,
-  end,
-  onPageChange,
-  onPageSizeChange,
-}: {
-  page: number;
-  pageSize: number;
-  total: number;
-  totalPages: number;
-  start: number;
-  end: number;
-  onPageChange: (page: number) => void;
-  onPageSizeChange: (size: number) => void;
-}) {
-  const showingFrom = total === 0 ? 0 : start + 1;
-
-  return (
-    <div className="flex flex-col gap-3 border-t border-slate-100 px-6 py-4 md:flex-row md:items-center md:justify-between">
-      <div className="flex items-center gap-3 text-sm text-slate-500">
-        <label htmlFor="booking-page-size" className="font-medium text-slate-700">
-          Rows per page
-        </label>
-        <select
-          id="booking-page-size"
-          value={pageSize}
-          onChange={(e) => onPageSizeChange(Number(e.target.value))}
-          className="h-9 rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-700 outline-none transition focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
-        >
-          {PAGE_SIZE_OPTIONS.map((size) => (
-            <option key={size} value={size}>
-              {size}
-            </option>
-          ))}
-        </select>
-        <span>
-          Showing {showingFrom}–{end} of {total}
-        </span>
-      </div>
-
-      <div className="flex items-center gap-1">
-        <button
-          type="button"
-          onClick={() => onPageChange(page - 1)}
-          disabled={page <= 1}
-          className="inline-flex h-9 items-center gap-1 rounded-xl border border-slate-200 px-3 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-slate-700"
-        >
-          <ChevronLeft className="h-4 w-4" />
-          Prev
-        </button>
-
-        {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => {
-          const isActive = p === page;
-          return (
-            <button
-              key={p}
-              type="button"
-              onClick={() => onPageChange(p)}
-              aria-current={isActive ? "page" : undefined}
-              className={
-                isActive
-                  ? "h-9 w-9 rounded-xl bg-[#10B981] text-sm font-medium text-white"
-                  : "h-9 w-9 rounded-xl border border-slate-200 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-              }
-            >
-              {p}
-            </button>
-          );
-        })}
-
-        <button
-          type="button"
-          onClick={() => onPageChange(page + 1)}
-          disabled={page >= totalPages}
-          className="inline-flex h-9 items-center gap-1 rounded-xl border border-slate-200 px-3 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-slate-700"
-        >
-          Next
-          <ChevronRight className="h-4 w-4" />
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function StatCard({
-  title,
-  value,
-  icon,
-}: {
-  title: string;
-  value: string;
-  icon: React.ReactNode;
-}) {
-  return (
-    <div className="rounded-3xl bg-white p-6 shadow-sm transition hover:shadow-md hover:ring-1 hover:ring-[#10B981]/20">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm text-slate-500">{title}</p>
-          <h3 className="mt-2 text-3xl font-bold text-slate-900">{value}</h3>
-        </div>
-        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#10B981] text-white">
-          {icon}
-        </div>
+          <CardContent className="px-0">
+            <DataTable
+              columns={columns}
+              data={paginatedData}
+              status="success"
+              onRowClick={() => {}}
+              pagination={{
+                pageIndex: pagination.pageIndex,
+                pageSize: pagination.pageSize,
+                pageCount: pageCount,
+                totalCount: total,
+              }}
+              tableOptions={{
+                state: { pagination },
+                onPaginationChange: setPagination,
+              }}
+              containerClassName="border-b shadow-none"
+              footer={DataTableFooter}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
@@ -377,4 +281,3 @@ function StatusBadge({ status }: { status: BookingStatus }) {
     </span>
   );
 }
-
diff --git a/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentDetailPage.tsx b/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentDetailPage.tsx
index ab7b0bdaf..e554a9c11 100644
--- a/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentDetailPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentDetailPage.tsx
@@ -21,6 +21,10 @@ import {
   getConsignmentById,
   type ConsignmentStatus,
 } from "./consignments.mock";
+import {
+  Button,
+  Card,
+} from "@edr/ui-common";
 
 export default function ConsignmentDetailPage() {
   const { id } = useParams<{ id: string }>();
@@ -29,38 +33,37 @@ export default function ConsignmentDetailPage() {
 
   if (!consignment) {
     return (
-      <div className="min-h-screen bg-slate-50 p-6">
-        <div className="mx-auto max-w-5xl space-y-6">
+      <div className="min-h-screen p-6">
+        <div className="space-y-6">
           <Breadcrumbs
             items={[
               { label: "Consignments", href: "/consignments" },
               { label: "Not found" },
             ]}
           />
-          <div className="rounded-3xl bg-white p-8 text-center shadow-sm">
+          <Card className="p-8 text-center">
             <h1 className="text-2xl font-bold text-slate-900">
               Consignment not found
             </h1>
-            <p className="mt-2 text-sm text-slate-500">
-              The consignment you're looking for doesn't exist or has been
-              removed.
+            <p className="mt-2 text-sm text-muted-foreground">
+              The consignment you're looking for doesn't exist or has been removed.
             </p>
             <Link
               to="/consignments"
-              className="mt-6 inline-flex items-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
+              className="mt-6 inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition hover:bg-primary/90"
             >
-              <ArrowLeft className="h-4 w-4" />
+              <ArrowLeft />
               Back to Consignments
             </Link>
-          </div>
+          </Card>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-slate-50 p-6">
-      <div className="mx-auto max-w-5xl space-y-6">
+    <div className="min-h-screen p-6">
+      <div className="space-y-6">
         <Breadcrumbs
           items={[
             { label: "Consignments", href: "/consignments" },
@@ -68,24 +71,23 @@ export default function ConsignmentDetailPage() {
           ]}
         />
 
-        {/* Header */}
-        <div className="rounded-3xl bg-white p-6 shadow-sm">
+        <Card className="p-6">
           <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
             <div className="flex items-center gap-4">
-              <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[#10B981] text-white">
-                <Package className="h-8 w-8" />
+              <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+                <Package />
               </div>
               <div>
                 <h1 className="flex items-center gap-3 text-3xl font-bold tracking-tight text-slate-900">
                   {consignment.trackingNumber}
                   {consignment.hazardous ? (
                     <span className="inline-flex items-center gap-1 rounded-full bg-red-100 px-2.5 py-1 text-xs font-semibold text-red-700">
-                      <AlertTriangle className="h-3.5 w-3.5" />
+                      <AlertTriangle />
                       Hazardous
                     </span>
                   ) : null}
                 </h1>
-                <div className="mt-1 flex items-center gap-3 text-sm text-slate-500">
+                <div className="mt-1 flex items-center gap-3 text-sm text-muted-foreground">
                   <span>{consignment.customer}</span>
                   <span className="text-slate-300">•</span>
                   <span>Booking {consignment.bookingReference}</span>
@@ -113,65 +115,55 @@ export default function ConsignmentDetailPage() {
                   estimatedDelivery: consignment.estimatedDelivery,
                 }}
               >
-                <button
-                  type="button"
-                  className="inline-flex items-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
-                >
-                  Edit Consignment
-                </button>
+                <Button>Edit Consignment</Button>
               </NewConsignmentPage>
 
               <DeleteConsignmentDialog
                 trackingNumber={consignment.trackingNumber}
                 onConfirm={() => navigate("/consignments")}
               >
-                <button
-                  type="button"
-                  className="inline-flex items-center gap-2 rounded-2xl border border-red-200 px-4 py-2 text-sm font-medium text-red-600 transition hover:bg-red-50"
-                >
-                  <Trash2 className="h-4 w-4" />
+                <Button variant="outline">
+                  <Trash2 />
                   Remove
-                </button>
+                </Button>
               </DeleteConsignmentDialog>
             </div>
           </div>
-        </div>
+        </Card>
 
-        {/* Route banner */}
-        <div className="rounded-3xl bg-white p-6 shadow-sm">
+        <Card className="p-6">
           <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
             <RouteEndpoint
               label="Origin"
               station={consignment.originStation}
             />
-            <ArrowRight className="h-5 w-5 text-[#10B981]" />
+            <ArrowRight className="text-primary" />
             <RouteEndpoint
               label="Destination"
               station={consignment.destinationStation}
             />
           </div>
-        </div>
+        </Card>
 
-        {/* Detail grid */}
         <div className="grid gap-6 md:grid-cols-2">
           <DetailCard title="Cargo">
             <DetailRow
-              icon={<Package className="h-4 w-4" />}
+              icon={<Package />}
               label="Cargo Type"
               value={consignment.cargoType}
             />
             <DetailRow
-              icon={<Hash className="h-4 w-4" />}
+              icon={<Hash />}
               label="Pieces"
               value={String(consignment.pieces)}
             />
             <DetailRow
-              icon={<Weight className="h-4 w-4" />}
+              icon={<Weight />}
               label="Weight"
               value={`${consignment.weightKg.toLocaleString()} kg`}
             />
             <DetailRow
-              icon={<Ruler className="h-4 w-4" />}
+              icon={<Ruler />}
               label="Volume"
               value={`${consignment.volumeM3} m³`}
             />
@@ -179,22 +171,22 @@ export default function ConsignmentDetailPage() {
 
           <DetailCard title="References & Schedule">
             <DetailRow
-              icon={<Building2 className="h-4 w-4" />}
+              icon={<Building2 />}
               label="Customer"
               value={consignment.customer}
             />
             <DetailRow
-              icon={<Hash className="h-4 w-4" />}
+              icon={<Hash />}
               label="Booking"
               value={consignment.bookingReference}
             />
             <DetailRow
-              icon={<Calendar className="h-4 w-4" />}
+              icon={<Calendar />}
               label="Created"
               value={consignment.createdAt}
             />
             <DetailRow
-              icon={<Calendar className="h-4 w-4" />}
+              icon={<Calendar />}
               label="Estimated Delivery"
               value={consignment.estimatedDelivery}
             />
@@ -202,14 +194,14 @@ export default function ConsignmentDetailPage() {
 
           <DetailCard title="Description">
             <div className="flex items-start gap-3 text-sm text-slate-700">
-              <Package className="mt-0.5 h-4 w-4 text-[#10B981]" />
+              <Package />
               <p className="leading-relaxed">{consignment.description}</p>
             </div>
           </DetailCard>
 
           <DetailCard title="Special Handling">
             <div className="flex items-start gap-3 text-sm text-slate-700">
-              <StickyNote className="mt-0.5 h-4 w-4 text-[#10B981]" />
+              <StickyNote />
               <p className="leading-relaxed">{consignment.specialHandling}</p>
             </div>
           </DetailCard>
@@ -228,8 +220,8 @@ function RouteEndpoint({
 }) {
   return (
     <div className="flex items-center gap-3">
-      <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#10B981] text-white">
-        <MapPin className="h-5 w-5" />
+      <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+        <MapPin />
       </div>
       <div>
         <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
@@ -249,10 +241,10 @@ function DetailCard({
   children: React.ReactNode;
 }) {
   return (
-    <div className="rounded-3xl bg-white p-6 shadow-sm">
+    <Card className="p-6">
       <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
       <div className="mt-4 space-y-3">{children}</div>
-    </div>
+    </Card>
   );
 }
 
@@ -267,7 +259,7 @@ function DetailRow({
 }) {
   return (
     <div className="flex items-start gap-3">
-      <div className="mt-0.5 text-[#10B981]">{icon}</div>
+      <div className="mt-0.5 text-primary">{icon}</div>
       <div className="flex-1">
         <p className="text-xs font-medium text-slate-500">{label}</p>
         <p className="mt-0.5 text-sm text-slate-900">{value}</p>
diff --git a/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentsPage.tsx b/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentsPage.tsx
index 157ad7c23..93376c1e3 100644
--- a/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentsPage.tsx
@@ -4,8 +4,6 @@ import {
   AlertTriangle,
   ArrowRight,
   CheckCircle2,
-  ChevronLeft,
-  ChevronRight,
   Eye,
   Filter,
   Package,
@@ -23,8 +21,19 @@ import {
   consignments,
   type ConsignmentStatus,
 } from "./consignments.mock";
-
-const PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
+import {
+  DataTable,
+  DataTableFooter,
+  type ColumnDef,
+  usePagination,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Input,
+} from "@edr/ui-common";
 
 type FilterValue = "All" | ConsignmentStatus;
 
@@ -38,8 +47,7 @@ const FILTERS: FilterValue[] = [
 ];
 
 export default function ConsignmentsPage() {
-  const [pageSize, setPageSize] = useState(10);
-  const [page, setPage] = useState(1);
+  const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [filter, setFilter] = useState<FilterValue>("All");
   const [query, setQuery] = useState("");
 
@@ -60,13 +68,13 @@ export default function ConsignmentsPage() {
   }, [filter, query]);
 
   const total = filtered.length;
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  const safePage = Math.min(page, totalPages);
-  const start = (safePage - 1) * pageSize;
-  const end = Math.min(start + pageSize, total);
-  const paginated = useMemo(
+  const pageCount = Math.ceil(total / pagination.pageSize);
+  const start = pagination.pageIndex * pagination.pageSize;
+  const end = Math.min(start + pagination.pageSize, total);
+
+  const paginatedData = useMemo(
     () => filtered.slice(start, end),
-    [filtered, start, end],
+    [start, end, filtered],
   );
 
   const inTransitCount = consignments.filter(
@@ -77,76 +85,221 @@ export default function ConsignmentsPage() {
   ).length;
   const hazmatCount = consignments.filter((c) => c.hazardous).length;
 
+  const columns: ColumnDef<(typeof consignments)[number]>[] = [
+    {
+      id: "trackingNumber",
+      header: "Tracking #",
+      cell: ({ row }) => {
+        const c = row.original;
+        return (
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
+              <Package />
+            </div>
+            <div>
+              <p className="flex items-center gap-2 font-medium text-slate-900">
+                {c.trackingNumber}
+                {c.hazardous ? (
+                  <span
+                    title="Hazardous"
+                    className="inline-flex items-center gap-0.5 rounded-full bg-red-100 px-1.5 py-0.5 text-[10px] font-semibold text-red-700"
+                  >
+                    <AlertTriangle />
+                    DG
+                  </span>
+                ) : null}
+              </p>
+              <p className="text-sm text-slate-500">{c.createdAt}</p>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "bookingReference",
+      header: "Booking",
+    },
+    {
+      accessorKey: "customer",
+      header: "Customer",
+    },
+    {
+      id: "route",
+      header: "Route",
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2 text-sm text-slate-700">
+          <span>{row.original.originStation}</span>
+          <ArrowRight className="text-slate-400" />
+          <span>{row.original.destinationStation}</span>
+        </div>
+      ),
+    },
+    {
+      id: "cargo",
+      header: "Cargo",
+      cell: ({ row }) => {
+        const c = row.original;
+        return (
+          <div className="text-sm text-slate-700">
+            <p>{c.cargoType}</p>
+            <p className="text-xs text-slate-500">
+              {c.pieces} pcs · {c.weightKg.toLocaleString()} kg · {c.volumeM3} m³
+            </p>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => <StatusBadge status={row.original.status} />,
+    },
+    {
+      id: "actions",
+      header: () => <div className="text-right">Actions</div>,
+      cell: ({ row }) => {
+        const consignment = row.original;
+        return (
+          <div className="flex justify-end gap-2">
+            <Link to={`/consignments/${consignment.id}`}>
+              <Button variant="outline" size="icon">
+                <Eye />
+              </Button>
+            </Link>
+
+            <NewConsignmentPage
+              mode="edit"
+              consignment={{
+                trackingNumber: consignment.trackingNumber,
+                bookingId: consignment.bookingId,
+                bookingReference: consignment.bookingReference,
+                cargoType: consignment.cargoType,
+                description: consignment.description,
+                weightKg: consignment.weightKg,
+                volumeM3: consignment.volumeM3,
+                pieces: consignment.pieces,
+                hazardous: consignment.hazardous,
+                specialHandling: consignment.specialHandling,
+                status: consignment.status,
+                estimatedDelivery: consignment.estimatedDelivery,
+              }}
+            >
+              <Button variant="outline" size="icon">
+                <Pencil />
+              </Button>
+            </NewConsignmentPage>
+
+            <DeleteConsignmentDialog
+              trackingNumber={consignment.trackingNumber}
+            >
+              <Button variant="outline" size="icon">
+                <Trash2 />
+              </Button>
+            </DeleteConsignmentDialog>
+          </div>
+        );
+      },
+    },
+  ];
+
   return (
-    <div className="min-h-screen bg-slate-50 p-6">
-      <div className="mx-auto max-w-7xl space-y-6">
+    <div className="min-h-screen p-6">
+      <div className="space-y-6">
         <Breadcrumbs items={[{ label: "Consignments" }]} />
 
-        {/* Header */}
-        <div className="flex flex-col gap-4 rounded-3xl bg-white p-6 shadow-sm md:flex-row md:items-center md:justify-between">
+        <Card className="p-6 flex-row justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight text-slate-900">
               Consignments
             </h1>
-            <p className="mt-1 text-sm text-slate-500">
+            <p className="mt-1 text-sm text-secondary-foreground">
               Track cargo units and their handling status.
             </p>
           </div>
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-              <input
+              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Input
                 type="search"
                 value={query}
                 onChange={(e) => {
                   setQuery(e.target.value);
-                  setPage(1);
+                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
                 }}
                 placeholder="Search consignments..."
-                className="h-10 w-full rounded-2xl border border-slate-200 bg-white pl-10 pr-4 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
+                className="pl-8!"
               />
             </div>
 
             <NewConsignmentPage>
-              <button
-                type="button"
-                className="inline-flex items-center justify-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
-              >
-                <Plus className="h-4 w-4" />
+              <Button>
+                <Plus />
                 New Consignment
-              </button>
+              </Button>
             </NewConsignmentPage>
           </div>
-        </div>
+        </Card>
 
-        {/* Stats */}
         <div className="grid gap-4 md:grid-cols-4">
-          <StatCard
-            title="Total Consignments"
-            value={String(consignments.length)}
-            icon={<Package className="h-5 w-5" />}
-          />
-          <StatCard
-            title="In Transit"
-            value={String(inTransitCount)}
-            icon={<Truck className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Delivered"
-            value={String(deliveredCount)}
-            icon={<CheckCircle2 className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Hazardous"
-            value={String(hazmatCount)}
-            icon={<AlertTriangle className="h-5 w-5" />}
-            tone="danger"
-          />
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Total Consignments</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {consignments.length}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Package />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">In Transit</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {inTransitCount}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Truck />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Delivered</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {deliveredCount}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <CheckCircle2 />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Hazardous</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {hazmatCount}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-red-100 text-red-600">
+                <AlertTriangle />
+              </div>
+            </CardContent>
+          </Card>
         </div>
 
-        {/* Filter tabs */}
-        <div className="rounded-3xl bg-white p-2 shadow-sm">
+        <Card className="p-2">
           <div className="flex flex-wrap gap-1">
             {FILTERS.map((f) => {
               const isActive = f === filter;
@@ -160,12 +313,12 @@ export default function ConsignmentsPage() {
                   type="button"
                   onClick={() => {
                     setFilter(f);
-                    setPage(1);
+                    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
                   }}
                   className={
                     isActive
-                      ? "inline-flex items-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white"
-                      : "inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-[#10B981]/10 hover:text-[#10B981]"
+                      ? "inline-flex items-center gap-2 rounded-2xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
+                      : "inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-primary/10 hover:text-primary"
                   }
                 >
                   {f}
@@ -182,303 +335,44 @@ export default function ConsignmentsPage() {
               );
             })}
           </div>
-        </div>
+        </Card>
 
-        {/* Table */}
-        <div className="overflow-hidden rounded-3xl bg-white shadow-sm">
-          <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
+        <Card className="gap-0">
+          <CardHeader className="flex flex-row items-center justify-between border-b">
             <div>
-              <h2 className="text-lg font-semibold text-slate-900">
-                Consignment List
-              </h2>
-              <p className="text-sm text-slate-500">
+              <CardTitle>Consignment List</CardTitle>
+              <CardDescription>
                 Cargo units and their current handling status.
-              </p>
+              </CardDescription>
             </div>
 
-            <button className="inline-flex items-center gap-2 rounded-2xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]">
-              <Filter className="h-4 w-4" />
+            <Button variant="secondary" size="sm">
+              <Filter />
               Filter
-            </button>
-          </div>
+            </Button>
+          </CardHeader>
 
-          <div className="overflow-x-auto">
-            <table className="w-full min-w-[1000px] whitespace-nowrap text-left">
-              <thead className="bg-slate-50 text-sm text-slate-500">
-                <tr>
-                  <th className="px-6 py-4 font-medium">Tracking #</th>
-                  <th className="px-6 py-4 font-medium">Booking</th>
-                  <th className="px-6 py-4 font-medium">Customer</th>
-                  <th className="px-6 py-4 font-medium">Route</th>
-                  <th className="px-6 py-4 font-medium">Cargo</th>
-                  <th className="px-6 py-4 font-medium">Status</th>
-                  <th className="px-6 py-4 font-medium text-right">Actions</th>
-                </tr>
-              </thead>
-
-              <tbody>
-                {paginated.length === 0 ? (
-                  <tr>
-                    <td
-                      colSpan={7}
-                      className="px-6 py-12 text-center text-sm text-slate-500"
-                    >
-                      No consignments match your filters.
-                    </td>
-                  </tr>
-                ) : (
-                  paginated.map((consignment) => (
-                    <tr
-                      key={consignment.id}
-                      className="border-t border-slate-100 transition hover:bg-[#10B981]/5"
-                    >
-                      <td className="px-6 py-4">
-                        <div className="flex items-center gap-3">
-                          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#10B981] text-white">
-                            <Package className="h-5 w-5" />
-                          </div>
-                          <div>
-                            <p className="flex items-center gap-2 font-medium text-slate-900">
-                              {consignment.trackingNumber}
-                              {consignment.hazardous ? (
-                                <span
-                                  title="Hazardous"
-                                  className="inline-flex items-center gap-0.5 rounded-full bg-red-100 px-1.5 py-0.5 text-[10px] font-semibold text-red-700"
-                                >
-                                  <AlertTriangle className="h-3 w-3" />
-                                  DG
-                                </span>
-                              ) : null}
-                            </p>
-                            <p className="text-sm text-slate-500">
-                              {consignment.createdAt}
-                            </p>
-                          </div>
-                        </div>
-                      </td>
-
-                      <td className="px-6 py-4 text-sm text-slate-700">
-                        {consignment.bookingReference}
-                      </td>
-
-                      <td className="px-6 py-4 text-sm text-slate-700">
-                        {consignment.customer}
-                      </td>
-
-                      <td className="px-6 py-4 text-sm text-slate-700">
-                        <div className="flex items-center gap-2">
-                          <span>{consignment.originStation}</span>
-                          <ArrowRight className="h-3.5 w-3.5 text-slate-400" />
-                          <span>{consignment.destinationStation}</span>
-                        </div>
-                      </td>
-
-                      <td className="px-6 py-4 text-sm text-slate-700">
-                        <div>
-                          <p>{consignment.cargoType}</p>
-                          <p className="text-xs text-slate-500">
-                            {consignment.pieces} pcs ·{" "}
-                            {consignment.weightKg.toLocaleString()} kg ·{" "}
-                            {consignment.volumeM3} m³
-                          </p>
-                        </div>
-                      </td>
-
-                      <td className="px-6 py-4">
-                        <StatusBadge status={consignment.status} />
-                      </td>
-
-                      <td className="px-6 py-4">
-                        <div className="flex justify-end gap-2">
-                          <Link
-                            to={`/consignments/${consignment.id}`}
-                            className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                          >
-                            <Eye className="h-4 w-4" />
-                          </Link>
-
-                          <NewConsignmentPage
-                            mode="edit"
-                            consignment={{
-                              trackingNumber: consignment.trackingNumber,
-                              bookingId: consignment.bookingId,
-                              bookingReference: consignment.bookingReference,
-                              cargoType: consignment.cargoType,
-                              description: consignment.description,
-                              weightKg: consignment.weightKg,
-                              volumeM3: consignment.volumeM3,
-                              pieces: consignment.pieces,
-                              hazardous: consignment.hazardous,
-                              specialHandling: consignment.specialHandling,
-                              status: consignment.status,
-                              estimatedDelivery: consignment.estimatedDelivery,
-                            }}
-                          >
-                            <button
-                              type="button"
-                              className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                            >
-                              <Pencil className="h-4 w-4" />
-                            </button>
-                          </NewConsignmentPage>
-
-                          <DeleteConsignmentDialog
-                            trackingNumber={consignment.trackingNumber}
-                          >
-                            <button
-                              type="button"
-                              className="rounded-xl border border-red-200 p-2 text-red-600 transition hover:bg-red-50"
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </button>
-                          </DeleteConsignmentDialog>
-                        </div>
-                      </td>
-                    </tr>
-                  ))
-                )}
-              </tbody>
-            </table>
-          </div>
-
-          <Pagination
-            page={safePage}
-            pageSize={pageSize}
-            total={total}
-            totalPages={totalPages}
-            start={start}
-            end={end}
-            onPageChange={setPage}
-            onPageSizeChange={(size) => {
-              setPageSize(size);
-              setPage(1);
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Pagination({
-  page,
-  pageSize,
-  total,
-  totalPages,
-  start,
-  end,
-  onPageChange,
-  onPageSizeChange,
-}: {
-  page: number;
-  pageSize: number;
-  total: number;
-  totalPages: number;
-  start: number;
-  end: number;
-  onPageChange: (page: number) => void;
-  onPageSizeChange: (size: number) => void;
-}) {
-  const showingFrom = total === 0 ? 0 : start + 1;
-
-  return (
-    <div className="flex flex-col gap-3 border-t border-slate-100 px-6 py-4 md:flex-row md:items-center md:justify-between">
-      <div className="flex items-center gap-3 text-sm text-slate-500">
-        <label
-          htmlFor="consignment-page-size"
-          className="font-medium text-slate-700"
-        >
-          Rows per page
-        </label>
-        <select
-          id="consignment-page-size"
-          value={pageSize}
-          onChange={(e) => onPageSizeChange(Number(e.target.value))}
-          className="h-9 rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-700 outline-none transition focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
-        >
-          {PAGE_SIZE_OPTIONS.map((size) => (
-            <option key={size} value={size}>
-              {size}
-            </option>
-          ))}
-        </select>
-        <span>
-          Showing {showingFrom}–{end} of {total}
-        </span>
-      </div>
-
-      <div className="flex items-center gap-1">
-        <button
-          type="button"
-          onClick={() => onPageChange(page - 1)}
-          disabled={page <= 1}
-          className="inline-flex h-9 items-center gap-1 rounded-xl border border-slate-200 px-3 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-slate-700"
-        >
-          <ChevronLeft className="h-4 w-4" />
-          Prev
-        </button>
-
-        {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => {
-          const isActive = p === page;
-          return (
-            <button
-              key={p}
-              type="button"
-              onClick={() => onPageChange(p)}
-              aria-current={isActive ? "page" : undefined}
-              className={
-                isActive
-                  ? "h-9 w-9 rounded-xl bg-[#10B981] text-sm font-medium text-white"
-                  : "h-9 w-9 rounded-xl border border-slate-200 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-              }
-            >
-              {p}
-            </button>
-          );
-        })}
-
-        <button
-          type="button"
-          onClick={() => onPageChange(page + 1)}
-          disabled={page >= totalPages}
-          className="inline-flex h-9 items-center gap-1 rounded-xl border border-slate-200 px-3 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-slate-700"
-        >
-          Next
-          <ChevronRight className="h-4 w-4" />
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function StatCard({
-  title,
-  value,
-  icon,
-  tone,
-}: {
-  title: string;
-  value: string;
-  icon: React.ReactNode;
-  tone?: "brand" | "danger";
-}) {
-  const iconWrap =
-    tone === "danger"
-      ? "bg-red-100 text-red-600"
-      : "bg-[#10B981] text-white";
-
-  return (
-    <div className="rounded-3xl bg-white p-6 shadow-sm transition hover:shadow-md hover:ring-1 hover:ring-[#10B981]/20">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm text-slate-500">{title}</p>
-          <h3 className="mt-2 text-3xl font-bold text-slate-900">{value}</h3>
-        </div>
-        <div
-          className={`flex h-12 w-12 items-center justify-center rounded-2xl ${iconWrap}`}
-        >
-          {icon}
-        </div>
+          <CardContent className="px-0">
+            <DataTable
+              columns={columns}
+              data={paginatedData}
+              status="success"
+              onRowClick={() => {}}
+              pagination={{
+                pageIndex: pagination.pageIndex,
+                pageSize: pagination.pageSize,
+                pageCount: pageCount,
+                totalCount: total,
+              }}
+              tableOptions={{
+                state: { pagination },
+                onPaginationChange: setPagination,
+              }}
+              containerClassName="border-b shadow-none"
+              footer={DataTableFooter}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
diff --git a/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx b/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx
index e912f8b4f..e0e1e807a 100644
--- a/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx
@@ -90,11 +90,10 @@ export default function CustomerPage() {
         const customer = row.original;
         return (
           <div className="flex justify-end gap-2">
-            <Link
-              to={`/customers/${customer.id}`}
-              className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#33578D]/30 hover:bg-[#33578D]/10 hover:text-[#33578D]"
-            >
-              <Eye className="h-4 w-4" />
+            <Link to={`/customers/${customer.id}`}>
+              <Button size="icon" variant="outline">
+                <Eye />
+              </Button>
             </Link>
 
             <NewCustomerPage
@@ -112,18 +111,15 @@ export default function CustomerPage() {
                 notes: customer.notes,
               }}
             >
-              <Button variant="outline">
+              <Button size="icon" variant="outline">
                 <Pencil />
               </Button>
             </NewCustomerPage>
 
             <DeleteCustomerDialog customerName={customer.name}>
-              <button
-                type="button"
-                className="rounded-xl border border-red-200 p-2 text-red-600 transition hover:bg-red-50"
-              >
-                <Trash2 className="h-4 w-4" />
-              </button>
+              <Button size="icon" type="button" variant="destructive">
+                <Trash2 />
+              </Button>
             </DeleteCustomerDialog>
           </div>
         );
diff --git a/apps/edr-freight-web/portal/src/pages/customers/DeleteCustomerDialog.tsx b/apps/edr-freight-web/portal/src/pages/customers/DeleteCustomerDialog.tsx
index d0d766c0c..859e415e9 100644
--- a/apps/edr-freight-web/portal/src/pages/customers/DeleteCustomerDialog.tsx
+++ b/apps/edr-freight-web/portal/src/pages/customers/DeleteCustomerDialog.tsx
@@ -28,7 +28,7 @@ export default function DeleteCustomerDialog({
     <Dialog>
       <DialogTrigger asChild>{children}</DialogTrigger>
 
-      <DialogContent className="sm:max-w-md rounded-3xl">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle className="text-xl font-bold">
             Delete customer?
diff --git a/apps/edr-freight-web/portal/src/pages/customers/NewCustomerPage.tsx b/apps/edr-freight-web/portal/src/pages/customers/NewCustomerPage.tsx
index 459732ad8..6cfd61b50 100644
--- a/apps/edr-freight-web/portal/src/pages/customers/NewCustomerPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/customers/NewCustomerPage.tsx
@@ -7,12 +7,11 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog";
-
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
+  Input,
+  Label,
+  Button,
+  Textarea,
+} from "@edr/ui-common";
 
 import {
   Building2,
@@ -61,7 +60,7 @@ export default function NewCustomerPage({
         {children ?? <Button>{isEdit ? "Edit" : "New Customer"}</Button>}
       </DialogTrigger>
 
-      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-3xl rounded-3xl">
+      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-3xl!">
         <DialogHeader>
           <DialogTitle className="text-2xl font-bold">{title}</DialogTitle>
 
diff --git a/apps/edr-freight-web/portal/src/pages/dashboard/DashboardPage.tsx b/apps/edr-freight-web/portal/src/pages/dashboard/DashboardPage.tsx
index d0bdd3faa..9add083c1 100644
--- a/apps/edr-freight-web/portal/src/pages/dashboard/DashboardPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/dashboard/DashboardPage.tsx
@@ -36,12 +36,17 @@ import { customers } from "../customers/customers.mock";
 import { invoices } from "../billing/invoices.mock";
 import { shipments } from "../tracking/shipments.mock";
 import { trains } from "../trains/trains.mock";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@edr/ui-common";
 
-// Main brand color: #10B981 (emerald-500). Lighter variants for chart
-// hierarchy so multi-series lines/areas/bars stay visually distinct.
-const BRAND = "#10B981"; // emerald-500
-const BRAND_LIGHT = "#6EE7B7"; // emerald-300
-const BRAND_LIGHTER = "#D1FAE5"; // emerald-100
+const BRAND = "#10B981";
+const BRAND_LIGHT = "#6EE7B7";
+const BRAND_LIGHTER = "#D1FAE5";
 
 const STATUS_PALETTE: Record<string, string> = {
   Pending: "#d97706",
@@ -52,7 +57,6 @@ const STATUS_PALETTE: Record<string, string> = {
 };
 
 export default function DashboardPage() {
-  /** Top KPI numbers. */
   const totalRevenue = useMemo(
     () =>
       invoices
@@ -70,7 +74,6 @@ export default function DashboardPage() {
       100,
   );
 
-  /** Bookings per month (last 6 mock months). */
   const bookingsTrend = useMemo(() => {
     const months = ["Dec", "Jan", "Feb", "Mar", "Apr", "May"];
     const total = bookings.length;
@@ -81,7 +84,6 @@ export default function DashboardPage() {
     }));
   }, []);
 
-  /** Revenue by currency. */
   const revenueByCurrency = useMemo(() => {
     const buckets = new Map<string, number>();
     invoices.forEach((inv) => {
@@ -97,7 +99,6 @@ export default function DashboardPage() {
     }));
   }, []);
 
-  /** Booking status distribution (pie). */
   const bookingStatusData = useMemo(() => {
     const buckets = new Map<string, number>();
     bookings.forEach((b) => {
@@ -110,7 +111,6 @@ export default function DashboardPage() {
     }));
   }, []);
 
-  /** Cargo type distribution (horizontal bar). */
   const cargoTypeData = useMemo(() => {
     const buckets = new Map<string, number>();
     bookings.forEach((b) => {
@@ -121,7 +121,6 @@ export default function DashboardPage() {
       .sort((a, b) => b.count - a.count);
   }, []);
 
-  /** Active corridor performance (multi-line). */
   const corridorPerformance = useMemo(() => {
     const weeks = ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"];
     return weeks.map((label, i) => ({
@@ -132,7 +131,6 @@ export default function DashboardPage() {
     }));
   }, []);
 
-  /** Fleet utilization. */
   const fleetUtilization = useMemo(() => {
     const total = trains.length;
     return [
@@ -159,38 +157,35 @@ export default function DashboardPage() {
     ].filter((entry) => entry.value > 0);
   }, []);
 
-  /** Recent shipments (top 5 by id). */
   const recentShipments = useMemo(
     () => [...shipments].slice(-5).reverse(),
     [],
   );
 
   return (
-    <div className="min-h-screen bg-slate-50 p-6">
-      <div className="mx-auto max-w-7xl space-y-6">
+    <div className="min-h-screen p-6">
+      <div className="space-y-6">
         <Breadcrumbs items={[{ label: "Dashboard" }]} />
 
-        {/* Header */}
-        <div className="flex flex-col gap-4 rounded-3xl bg-white  p-6 shadow-sm md:flex-row md:items-center md:justify-between">
+        <Card className="p-6 flex-row justify-between">
           <div>
-            <h1 className="text-3xl font-bold tracking-tight">
+            <h1 className="text-3xl font-bold tracking-tight text-slate-900">
               Freight Dashboard
             </h1>
-            <p className="mt-1 text-sm text-sm text-slate-500">
+            <p className="mt-1 text-sm text-secondary-foreground">
               Operational overview · today · all corridors
             </p>
           </div>
           <div className="flex flex-wrap items-center gap-2 text-xs">
-            <span className="rounded-full cursor-pointer hover:scale-110 text-white bg-gradient-to-r  from-[#059669] to-[#10B981] px-3 py-1 backdrop-blur">
+            <span className="rounded-full bg-primary px-3 py-1 text-primary-foreground">
               ● Live
             </span>
-            <span className="rounded-full cursor-pointer hover:scale-110 text-white bg-gradient-to-r  from-[#059669] to-[#10B981] px-3 py-1 backdrop-blur">
+            <span className="rounded-full bg-primary px-3 py-1 text-primary-foreground">
               Last 30 days
             </span>
           </div>
-        </div>
+        </Card>
 
-        {/* KPIs */}
         <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
           <KpiCard
             label="Total Revenue (USD)"
@@ -200,7 +195,7 @@ export default function DashboardPage() {
             })}`}
             delta="+12.4%"
             trend="up"
-            icon={<DollarSign className="h-5 w-5" />}
+            icon={<DollarSign />}
           />
           <KpiCard
             label="Active Bookings"
@@ -211,27 +206,25 @@ export default function DashboardPage() {
             )}
             delta="+5.1%"
             trend="up"
-            icon={<Package className="h-5 w-5" />}
+            icon={<Package />}
           />
           <KpiCard
             label="Active Shipments"
             value={String(activeShipments)}
             delta="-2.3%"
             trend="down"
-            icon={<Truck className="h-5 w-5" />}
+            icon={<Truck />}
           />
           <KpiCard
             label="On-time Rate"
             value={`${onTimeRate}%`}
             delta="+1.8%"
             trend="up"
-            icon={<CheckCircle2 className="h-5 w-5" />}
+            icon={<CheckCircle2 />}
           />
         </div>
 
-        {/* Trend + Cargo mix */}
         <div className="grid gap-6 lg:grid-cols-3">
-          {/* Bookings trend (area chart) */}
           <ChartCard
             title="Bookings vs Deliveries"
             subtitle="Last 6 months"
@@ -299,7 +292,6 @@ export default function DashboardPage() {
             </ResponsiveContainer>
           </ChartCard>
 
-          {/* Booking status (donut) */}
           <ChartCard title="Booking Status" subtitle="Current distribution">
             <ResponsiveContainer width="100%" height={280}>
               <PieChart>
@@ -333,7 +325,6 @@ export default function DashboardPage() {
           </ChartCard>
         </div>
 
-        {/* Corridor + Cargo */}
         <div className="grid gap-6 lg:grid-cols-3">
           <ChartCard
             title="Corridor On-time %"
@@ -437,7 +428,6 @@ export default function DashboardPage() {
           </ChartCard>
         </div>
 
-        {/* Revenue + Fleet + Recent */}
         <div className="grid gap-6 lg:grid-cols-3">
           <ChartCard
             title="Revenue by Currency"
@@ -508,79 +498,76 @@ export default function DashboardPage() {
             </ResponsiveContainer>
           </ChartCard>
 
-          {/* Recent shipments */}
-          <div className="rounded-3xl bg-white p-6 shadow-sm">
-            <div className="mb-4 flex items-center justify-between">
+          <Card className="p-6">
+            <CardHeader className="flex flex-row items-center justify-between px-0">
               <div>
-                <h2 className="text-lg font-semibold text-slate-900">
-                  Recent Shipments
-                </h2>
-                <p className="text-xs text-slate-500">Latest activity</p>
+                <CardTitle>Recent Shipments</CardTitle>
+                <CardDescription>Latest activity</CardDescription>
               </div>
               <Link
                 to="/tracking"
-                className="inline-flex items-center gap-1 text-xs font-medium text-[#10B981] transition hover:underline"
+                className="inline-flex items-center gap-1 text-xs font-medium text-primary transition hover:underline"
               >
                 View all
-                <ArrowRight className="h-3 w-3" />
+                <ArrowRight />
               </Link>
-            </div>
+            </CardHeader>
 
-            <ul className="space-y-3">
-              {recentShipments.map((s) => (
-                <li
-                  key={s.id}
-                  className="flex items-center justify-between gap-3 rounded-2xl border border-slate-100 p-3 transition hover:border-[#10B981]/20 hover:bg-[#10B981]/5"
-                >
-                  <div className="flex items-center gap-3 overflow-hidden">
-                    <CircleDot
-                      className="h-4 w-4 flex-none"
-                      style={{
-                        color:
-                          s.status === "Delivered"
-                            ? "#059669"
-                            : s.status === "Delayed"
-                            ? "#dc2626"
-                            : "#6366f1",
-                      }}
-                    />
-                    <div className="min-w-0">
-                      <p className="truncate text-sm font-semibold text-slate-900">
-                        {s.reference}
-                      </p>
-                      <p className="truncate text-xs text-slate-500">
-                        {s.originStation} → {s.destinationStation}
-                      </p>
+            <CardContent className="px-0">
+              <ul className="space-y-3">
+                {recentShipments.map((s) => (
+                  <li
+                    key={s.id}
+                    className="flex items-center justify-between gap-3 rounded-2xl border p-3"
+                  >
+                    <div className="flex items-center gap-3 overflow-hidden">
+                      <CircleDot
+                        style={{
+                          color:
+                            s.status === "Delivered"
+                              ? "#059669"
+                              : s.status === "Delayed"
+                              ? "#dc2626"
+                              : "#6366f1",
+                        }}
+                      />
+                      <div className="min-w-0">
+                        <p className="truncate text-sm font-semibold text-slate-900">
+                          {s.reference}
+                        </p>
+                        <p className="truncate text-xs text-slate-500">
+                          {s.originStation} → {s.destinationStation}
+                        </p>
+                      </div>
                     </div>
-                  </div>
-                  <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-600">
-                    {s.progress}%
-                  </span>
-                </li>
-              ))}
-            </ul>
-          </div>
+                    <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-600">
+                      {s.progress}%
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
         </div>
 
-        {/* Bottom summary cards */}
         <div className="grid gap-4 md:grid-cols-4">
           <SummaryCard
             label="Customers"
             value={String(customers.length)}
             href="/customers"
-            icon={<Users className="h-4 w-4" />}
+            icon={<Users />}
           />
           <SummaryCard
             label="Consignments"
             value={String(consignments.length)}
             href="/consignments"
-            icon={<Package className="h-4 w-4" />}
+            icon={<Package />}
           />
           <SummaryCard
             label="Trains in Fleet"
             value={String(trains.length)}
             href="/trains"
-            icon={<Truck className="h-4 w-4" />}
+            icon={<Truck />}
           />
           <SummaryCard
             label="Open Invoices"
@@ -590,7 +577,7 @@ export default function DashboardPage() {
               ).length,
             )}
             href="/billing"
-            icon={<DollarSign className="h-4 w-4" />}
+            icon={<DollarSign />}
           />
         </div>
       </div>
@@ -615,24 +602,24 @@ function KpiCard({
   const TrendIcon = trend === "up" ? ArrowUpRight : ArrowDownRight;
 
   return (
-    <div className="rounded-3xl bg-white p-6 shadow-sm transition hover:shadow-md hover:ring-1 hover:ring-[#10B981]/20">
-      <div className="flex items-start justify-between">
+    <Card>
+      <CardContent className="flex items-start justify-between">
         <div>
           <p className="text-sm text-slate-500">{label}</p>
           <h3 className="mt-2 text-2xl font-bold text-slate-900">{value}</h3>
           <div
             className={`mt-2 inline-flex items-center gap-1 text-xs font-medium ${trendColor}`}
           >
-            <TrendIcon className="h-3.5 w-3.5" />
+            <TrendIcon />
             {delta}
             <span className="text-slate-400">vs last period</span>
           </div>
         </div>
-        <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#10B981] text-white">
+        <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
           {icon}
         </div>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }
 
@@ -648,17 +635,13 @@ function ChartCard({
   className?: string;
 }) {
   return (
-    <div
-      className={`rounded-3xl bg-white p-6 shadow-sm ${className ?? ""}`}
-    >
-      <div className="mb-4">
-        <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
-        {subtitle ? (
-          <p className="text-xs text-slate-500">{subtitle}</p>
-        ) : null}
-      </div>
-      {children}
-    </div>
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {subtitle ? <CardDescription>{subtitle}</CardDescription> : null}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
   );
 }
 
@@ -676,10 +659,10 @@ function SummaryCard({
   return (
     <Link
       to={href}
-      className="flex items-center justify-between rounded-3xl bg-white p-4 shadow-sm transition hover:shadow-md hover:ring-1 hover:ring-[#10B981]/20"
+      className="flex items-center justify-between rounded-xl border bg-card px-4 py-4 text-card-foreground shadow-xs transition hover:bg-accent"
     >
       <div className="flex items-center gap-3">
-        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-[#10B981] text-white">
+        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary text-primary-foreground">
           {icon}
         </div>
         <div>
@@ -687,7 +670,7 @@ function SummaryCard({
           <p className="text-lg font-bold text-slate-900">{value}</p>
         </div>
       </div>
-      <ArrowRight className="h-4 w-4 text-slate-400" />
+      <ArrowRight className="text-slate-400" />
     </Link>
   );
 }
diff --git a/apps/edr-freight-web/portal/src/pages/documents/DocumentsPage.tsx b/apps/edr-freight-web/portal/src/pages/documents/DocumentsPage.tsx
index ed454739a..bd7976499 100644
--- a/apps/edr-freight-web/portal/src/pages/documents/DocumentsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/documents/DocumentsPage.tsx
@@ -1,8 +1,6 @@
 import { useMemo, useState } from "react";
 import {
   CheckCircle2,
-  ChevronLeft,
-  ChevronRight,
   Clock,
   Download,
   Eye,
@@ -30,8 +28,19 @@ import {
   type DocumentRecord,
   type DocumentStatus,
 } from "./documents.mock";
-
-const PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
+import {
+  DataTable,
+  DataTableFooter,
+  type ColumnDef,
+  usePagination,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Input,
+} from "@edr/ui-common";
 
 type FilterValue = "All" | DocumentStatus;
 type ViewMode = "grid" | "table";
@@ -46,8 +55,7 @@ const FILTERS: FilterValue[] = [
 ];
 
 export default function DocumentsPage() {
-  const [pageSize, setPageSize] = useState(10);
-  const [page, setPage] = useState(1);
+  const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [filter, setFilter] = useState<FilterValue>("All");
   const [query, setQuery] = useState("");
   const [view, setView] = useState<ViewMode>("table");
@@ -67,13 +75,13 @@ export default function DocumentsPage() {
   }, [filter, query]);
 
   const total = filtered.length;
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  const safePage = Math.min(page, totalPages);
-  const start = (safePage - 1) * pageSize;
-  const end = Math.min(start + pageSize, total);
-  const paginated = useMemo(
+  const pageCount = Math.ceil(total / pagination.pageSize);
+  const start = pagination.pageIndex * pagination.pageSize;
+  const end = Math.min(start + pagination.pageSize, total);
+
+  const paginatedData = useMemo(
     () => filtered.slice(start, end),
-    [filtered, start, end],
+    [start, end, filtered],
   );
 
   const totalSize = documents.reduce((sum, d) => sum + d.sizeBytes, 0);
@@ -82,18 +90,109 @@ export default function DocumentsPage() {
     (d) => d.status === "Pending Review",
   ).length;
 
+  const columns: ColumnDef<DocumentRecord>[] = [
+    {
+      id: "document",
+      header: "Document",
+      cell: ({ row }) => {
+        const doc = row.original;
+        return (
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
+              <FormatIcon format={doc.format} />
+            </div>
+            <div className="min-w-0">
+              <p className="truncate font-medium text-slate-900">{doc.name}</p>
+              <p className="text-xs text-slate-500">
+                {doc.format} · By {doc.uploadedBy}
+              </p>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "type",
+      header: "Type",
+    },
+    {
+      id: "linkedTo",
+      header: "Linked To",
+      cell: ({ row }) => (
+        <div className="text-sm text-slate-700">
+          <p>{row.original.linkedReference}</p>
+          <p className="text-xs text-slate-500">{row.original.linkedType}</p>
+        </div>
+      ),
+    },
+    {
+      id: "size",
+      header: "Size",
+      cell: ({ row }) => (
+        <span className="text-sm text-slate-700">
+          {formatBytes(row.original.sizeBytes)}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "uploadedAt",
+      header: "Uploaded",
+    },
+    {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => <StatusBadge status={row.original.status} />,
+    },
+    {
+      id: "actions",
+      header: () => <div className="text-right">Actions</div>,
+      cell: ({ row }) => {
+        const doc = row.original;
+        return (
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" size="icon" aria-label="Preview">
+              <Eye />
+            </Button>
+            <Button variant="outline" size="icon" aria-label="Download">
+              <Download />
+            </Button>
+            <NewDocumentPage
+              mode="edit"
+              document={{
+                name: doc.name,
+                type: doc.type,
+                status: doc.status,
+                linkedType: doc.linkedType,
+                linkedReference: doc.linkedReference,
+                notes: doc.notes,
+              }}
+            >
+              <Button variant="outline" size="icon">
+                <Pencil />
+              </Button>
+            </NewDocumentPage>
+            <DeleteDocumentDialog documentName={doc.name}>
+              <Button variant="outline" size="icon">
+                <Trash2 />
+              </Button>
+            </DeleteDocumentDialog>
+          </div>
+        );
+      },
+    },
+  ];
+
   return (
-    <div className="min-h-screen bg-slate-50 p-6">
-      <div className="mx-auto max-w-7xl space-y-6">
+    <div className="min-h-screen p-6">
+      <div className="space-y-6">
         <Breadcrumbs items={[{ label: "Documents" }]} />
 
-        {/* Header */}
-        <div className="flex flex-col gap-4 rounded-3xl bg-white p-6 shadow-sm md:flex-row md:items-center md:justify-between">
+        <Card className="p-6 flex-row justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight text-slate-900">
               Documents
             </h1>
-            <p className="mt-1 text-sm text-slate-500">
+            <p className="mt-1 text-sm text-secondary-foreground">
               Manage freight documents linked to bookings, consignments, and
               invoices.
             </p>
@@ -101,147 +200,200 @@ export default function DocumentsPage() {
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-              <input
+              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Input
                 type="search"
                 value={query}
                 onChange={(e) => {
                   setQuery(e.target.value);
-                  setPage(1);
+                  setPagination({
+                    pageIndex: 0,
+                    pageSize: pagination.pageSize,
+                  });
                 }}
                 placeholder="Search documents..."
-                className="h-10 w-full rounded-2xl border border-slate-200 bg-white pl-10 pr-4 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
+                className="pl-8!"
               />
             </div>
 
             <NewDocumentPage>
-              <button
-                type="button"
-                className="inline-flex items-center justify-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
-              >
-                <Plus className="h-4 w-4" />
+              <Button>
+                <Plus />
                 Upload Document
-              </button>
+              </Button>
             </NewDocumentPage>
           </div>
-        </div>
+        </Card>
 
-        {/* Stats */}
         <div className="grid gap-4 md:grid-cols-4">
-          <StatCard
-            title="Total Documents"
-            value={String(documents.length)}
-            icon={<FileText className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Approved"
-            value={String(approvedCount)}
-            icon={<CheckCircle2 className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Pending Review"
-            value={String(pendingCount)}
-            icon={<Clock className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Storage Used"
-            value={formatBytes(totalSize)}
-            icon={<HardDrive className="h-5 w-5" />}
-          />
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Total Documents</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {documents.length}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <FileText />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Approved</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {approvedCount}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <CheckCircle2 />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Pending Review</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {pendingCount}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Clock />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Storage Used</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {formatBytes(totalSize)}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <HardDrive />
+              </div>
+            </CardContent>
+          </Card>
         </div>
 
-        {/* Filter tabs + view toggle */}
-        <div className="flex flex-col gap-3 rounded-3xl bg-white p-2 shadow-sm md:flex-row md:items-center md:justify-between">
-          <div className="flex flex-wrap gap-1">
-            {FILTERS.map((f) => {
-              const isActive = f === filter;
-              const count =
-                f === "All"
-                  ? documents.length
-                  : documents.filter((d) => d.status === f).length;
-              return (
-                <button
-                  key={f}
-                  type="button"
-                  onClick={() => {
-                    setFilter(f);
-                    setPage(1);
-                  }}
-                  className={
-                    isActive
-                      ? "inline-flex items-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white"
-                      : "inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                  }
-                >
-                  {f}
-                  <span
+        <Card className="p-2">
+          <div className="flex flex-col gap-3 sm:flex-row md:items-center md:justify-between">
+            <div className="flex flex-wrap gap-1">
+              {FILTERS.map((f) => {
+                const isActive = f === filter;
+                const count =
+                  f === "All"
+                    ? documents.length
+                    : documents.filter((d) => d.status === f).length;
+                return (
+                  <button
+                    key={f}
+                    type="button"
+                    onClick={() => {
+                      setFilter(f);
+                      setPagination({
+                        pageIndex: 0,
+                        pageSize: pagination.pageSize,
+                      });
+                    }}
                     className={
                       isActive
-                        ? "rounded-full bg-white/20 px-2 py-0.5 text-xs"
-                        : "rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600"
+                        ? "inline-flex items-center gap-2 rounded-2xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
+                        : "inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-primary/10 hover:text-primary"
                     }
                   >
-                    {count}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
+                    {f}
+                    <span
+                      className={
+                        isActive
+                          ? "rounded-full bg-white/20 px-2 py-0.5 text-xs"
+                          : "rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600"
+                      }
+                    >
+                      {count}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
 
-          <div className="flex items-center gap-1 self-start rounded-xl bg-slate-100 p-1 md:self-auto">
-            <ViewToggleButton
-              active={view === "grid"}
-              onClick={() => setView("grid")}
-              label="Grid view"
-            >
-              <LayoutGrid className="h-4 w-4" />
-              <span className="hidden sm:inline">Grid</span>
-            </ViewToggleButton>
-            <ViewToggleButton
-              active={view === "table"}
-              onClick={() => setView("table")}
-              label="Table view"
-            >
-              <List className="h-4 w-4" />
-              <span className="hidden sm:inline">Table</span>
-            </ViewToggleButton>
+            <div className="flex items-center gap-1 self-start rounded-xl bg-slate-100 p-1 md:self-auto">
+              <ViewToggleButton
+                active={view === "grid"}
+                onClick={() => setView("grid")}
+                label="Grid view"
+              >
+                <LayoutGrid className="size-4" />
+                <span className="sm:inline">Grid</span>
+              </ViewToggleButton>
+              <ViewToggleButton
+                active={view === "table"}
+                onClick={() => setView("table")}
+                label="Table view"
+              >
+                <List className="size-4" />
+                <span className="sm:inline">Table</span>
+              </ViewToggleButton>
+            </div>
           </div>
-        </div>
+        </Card>
 
-        {/* Empty / Grid / Table */}
-        {paginated.length === 0 ? (
-          <div className="rounded-3xl bg-white p-12 text-center shadow-sm">
-            <p className="text-sm text-slate-500">
+        {paginatedData.length === 0 ? (
+          <Card className="p-12 text-center">
+            <p className="text-sm text-muted-foreground">
               No documents match your filters.
             </p>
-          </div>
+          </Card>
         ) : view === "grid" ? (
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {paginated.map((doc) => (
+            {paginatedData.map((doc) => (
               <DocumentCard key={doc.id} doc={doc} />
             ))}
           </div>
         ) : (
-          <DocumentTable documents={paginated} />
-        )}
+          <Card className="gap-0">
+            <CardHeader className="flex flex-row items-center justify-between border-b">
+              <div>
+                <CardTitle>Document Library</CardTitle>
+                <CardDescription>
+                  All freight documents stored in the system.
+                </CardDescription>
+              </div>
+              <Button variant="secondary" size="sm">
+                <Filter />
+                Filter
+              </Button>
+            </CardHeader>
 
-        {filtered.length > 0 ? (
-          <div className="overflow-hidden rounded-3xl bg-white shadow-sm">
-            <Pagination
-              page={safePage}
-              pageSize={pageSize}
-              total={total}
-              totalPages={totalPages}
-              start={start}
-              end={end}
-              onPageChange={setPage}
-              onPageSizeChange={(size) => {
-                setPageSize(size);
-                setPage(1);
-              }}
-            />
-          </div>
-        ) : null}
+            <CardContent className="px-0">
+              <DataTable
+                columns={columns}
+                data={paginatedData}
+                status="success"
+                onRowClick={() => { }}
+                pagination={{
+                  pageIndex: pagination.pageIndex,
+                  pageSize: pagination.pageSize,
+                  pageCount: pageCount,
+                  totalCount: total,
+                }}
+                tableOptions={{
+                  state: { pagination },
+                  onPaginationChange: setPagination,
+                }}
+                containerClassName="border-b shadow-none"
+                footer={DataTableFooter}
+              />
+            </CardContent>
+          </Card>
+        )}
       </div>
     </div>
   );
@@ -266,8 +418,8 @@ function ViewToggleButton({
       aria-pressed={active}
       className={
         active
-          ? "inline-flex items-center gap-2 rounded-lg bg-white px-3 py-1.5 text-sm font-medium text-[#10B981] shadow-sm"
-          : "inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:text-[#10B981]"
+          ? "inline-flex items-center gap-2 rounded-lg bg-white px-3 py-1.5 text-sm font-medium text-primary shadow-sm"
+          : "inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:text-primary"
       }
     >
       {children}
@@ -276,85 +428,74 @@ function ViewToggleButton({
 }
 
 function FormatIcon({ format }: { format: DocumentFormat }) {
-  const className = "h-5 w-5 text-[#10B981]";
-  if (format === "PDF") return <FileText className={className} />;
-  if (format === "DOCX") return <FileText className={className} />;
-  if (format === "XLSX") return <FileSpreadsheet className={className} />;
-  if (format === "PNG" || format === "JPG")
-    return <FileImage className={className} />;
-  return <File className={className} />;
+  if (format === "PDF") return <FileText />;
+  if (format === "DOCX") return <FileText />;
+  if (format === "XLSX") return <FileSpreadsheet />;
+  if (format === "PNG" || format === "JPG") return <FileImage />;
+  return <File />;
 }
 
 function DocumentCard({ doc }: { doc: DocumentRecord }) {
   return (
-    <div className="flex flex-col gap-4 rounded-3xl bg-white p-5 shadow-sm transition hover:shadow-md hover:ring-1 hover:ring-[#10B981]/20">
-      <div className="flex items-start justify-between gap-3">
-        <div className="flex items-start gap-3">
-          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#10B981]/10">
-            <FormatIcon format={doc.format} />
-          </div>
-          <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-semibold text-slate-900">
-              {doc.name}
-            </p>
-            <p className="text-xs text-slate-500">{doc.type}</p>
+    <Card className="p-5">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-start gap-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10">
+              <FormatIcon format={doc.format} />
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-semibold text-slate-900">
+                {doc.name}
+              </p>
+              <p className="text-xs text-slate-500">{doc.type}</p>
+            </div>
           </div>
+          <StatusBadge status={doc.status} />
         </div>
-        <StatusBadge status={doc.status} />
-      </div>
 
-      <div className="grid grid-cols-2 gap-3 text-sm">
-        <MetaRow label="Linked to" value={`${doc.linkedType} · ${doc.linkedReference}`} />
-        <MetaRow label="Format" value={doc.format} />
-        <MetaRow label="Size" value={formatBytes(doc.sizeBytes)} />
-        <MetaRow label="Uploaded" value={doc.uploadedAt} />
-      </div>
+        <div className="grid grid-cols-2 gap-3 text-sm">
+          <MetaRow
+            label="Linked to"
+            value={`${doc.linkedType} · ${doc.linkedReference}`}
+          />
+          <MetaRow label="Format" value={doc.format} />
+          <MetaRow label="Size" value={formatBytes(doc.sizeBytes)} />
+          <MetaRow label="Uploaded" value={doc.uploadedAt} />
+        </div>
 
-      <p className="text-xs text-slate-500">By {doc.uploadedBy}</p>
+        <p className="text-xs text-slate-500">By {doc.uploadedBy}</p>
 
-      <div className="flex items-center justify-end gap-2 border-t border-slate-100 pt-3">
-        <button
-          type="button"
-          aria-label="Preview"
-          className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-        >
-          <Eye className="h-4 w-4" />
-        </button>
-        <button
-          type="button"
-          aria-label="Download"
-          className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-        >
-          <Download className="h-4 w-4" />
-        </button>
-        <NewDocumentPage
-          mode="edit"
-          document={{
-            name: doc.name,
-            type: doc.type,
-            status: doc.status,
-            linkedType: doc.linkedType,
-            linkedReference: doc.linkedReference,
-            notes: doc.notes,
-          }}
-        >
-          <button
-            type="button"
-            className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
+        <div className="flex items-center justify-end gap-2 border-t pt-3">
+          <Button variant="outline" size="icon" aria-label="Preview">
+            <Eye />
+          </Button>
+          <Button variant="outline" size="icon" aria-label="Download">
+            <Download />
+          </Button>
+          <NewDocumentPage
+            mode="edit"
+            document={{
+              name: doc.name,
+              type: doc.type,
+              status: doc.status,
+              linkedType: doc.linkedType,
+              linkedReference: doc.linkedReference,
+              notes: doc.notes,
+            }}
           >
-            <Pencil className="h-4 w-4" />
-          </button>
-        </NewDocumentPage>
-        <DeleteDocumentDialog documentName={doc.name}>
-          <button
-            type="button"
-            className="rounded-xl border border-red-200 p-2 text-red-600 transition hover:bg-red-50"
-          >
-            <Trash2 className="h-4 w-4" />
-          </button>
-        </DeleteDocumentDialog>
+            <Button variant="outline" size="icon">
+              <Pencil />
+            </Button>
+          </NewDocumentPage>
+          <DeleteDocumentDialog documentName={doc.name}>
+            <Button variant="outline" size="icon">
+              <Trash2 />
+            </Button>
+          </DeleteDocumentDialog>
+        </div>
       </div>
-    </div>
+    </Card>
   );
 }
 
@@ -367,250 +508,6 @@ function MetaRow({ label, value }: { label: string; value: string }) {
   );
 }
 
-function DocumentTable({ documents: rows }: { documents: DocumentRecord[] }) {
-  return (
-    <div className="overflow-hidden rounded-3xl bg-white shadow-sm">
-      <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
-        <div>
-          <h2 className="text-lg font-semibold text-slate-900">
-            Document Library
-          </h2>
-          <p className="text-sm text-slate-500">
-            All freight documents stored in the system.
-          </p>
-        </div>
-
-        <button className="inline-flex items-center gap-2 rounded-2xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]">
-          <Filter className="h-4 w-4" />
-          Filter
-        </button>
-      </div>
-
-      <div className="overflow-x-auto">
-        <table className="w-full min-w-[1000px] whitespace-nowrap text-left">
-          <thead className="bg-slate-50 text-sm text-slate-500">
-            <tr>
-              <th className="px-6 py-4 font-medium">Document</th>
-              <th className="px-6 py-4 font-medium">Type</th>
-              <th className="px-6 py-4 font-medium">Linked To</th>
-              <th className="px-6 py-4 font-medium">Size</th>
-              <th className="px-6 py-4 font-medium">Uploaded</th>
-              <th className="px-6 py-4 font-medium">Status</th>
-              <th className="px-6 py-4 font-medium text-right">Actions</th>
-            </tr>
-          </thead>
-
-          <tbody>
-            {rows.map((doc) => (
-              <tr
-                key={doc.id}
-                className="border-t border-slate-100 transition hover:bg-[#10B981]/5"
-              >
-                <td className="px-6 py-4">
-                  <div className="flex items-center gap-3">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#10B981]/10">
-                      <FormatIcon format={doc.format} />
-                    </div>
-                    <div className="min-w-0">
-                      <p className="truncate font-medium text-slate-900">
-                        {doc.name}
-                      </p>
-                      <p className="text-xs text-slate-500">
-                        {doc.format} · By {doc.uploadedBy}
-                      </p>
-                    </div>
-                  </div>
-                </td>
-
-                <td className="px-6 py-4 text-sm text-slate-700">{doc.type}</td>
-
-                <td className="px-6 py-4 text-sm text-slate-700">
-                  <div>
-                    <p>{doc.linkedReference}</p>
-                    <p className="text-xs text-slate-500">{doc.linkedType}</p>
-                  </div>
-                </td>
-
-                <td className="px-6 py-4 text-sm text-slate-700">
-                  {formatBytes(doc.sizeBytes)}
-                </td>
-
-                <td className="px-6 py-4 text-sm text-slate-700">
-                  {doc.uploadedAt}
-                </td>
-
-                <td className="px-6 py-4">
-                  <StatusBadge status={doc.status} />
-                </td>
-
-                <td className="px-6 py-4">
-                  <div className="flex justify-end gap-2">
-                    <button
-                      type="button"
-                      aria-label="Preview"
-                      className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                    >
-                      <Eye className="h-4 w-4" />
-                    </button>
-                    <button
-                      type="button"
-                      aria-label="Download"
-                      className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                    >
-                      <Download className="h-4 w-4" />
-                    </button>
-                    <NewDocumentPage
-                      mode="edit"
-                      document={{
-                        name: doc.name,
-                        type: doc.type,
-                        status: doc.status,
-                        linkedType: doc.linkedType,
-                        linkedReference: doc.linkedReference,
-                        notes: doc.notes,
-                      }}
-                    >
-                      <button
-                        type="button"
-                        className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </button>
-                    </NewDocumentPage>
-                    <DeleteDocumentDialog documentName={doc.name}>
-                      <button
-                        type="button"
-                        className="rounded-xl border border-red-200 p-2 text-red-600 transition hover:bg-red-50"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </button>
-                    </DeleteDocumentDialog>
-                  </div>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}
-
-function Pagination({
-  page,
-  pageSize,
-  total,
-  totalPages,
-  start,
-  end,
-  onPageChange,
-  onPageSizeChange,
-}: {
-  page: number;
-  pageSize: number;
-  total: number;
-  totalPages: number;
-  start: number;
-  end: number;
-  onPageChange: (page: number) => void;
-  onPageSizeChange: (size: number) => void;
-}) {
-  const showingFrom = total === 0 ? 0 : start + 1;
-
-  return (
-    <div className="flex flex-col gap-3 px-6 py-4 md:flex-row md:items-center md:justify-between">
-      <div className="flex items-center gap-3 text-sm text-slate-500">
-        <label
-          htmlFor="document-page-size"
-          className="font-medium text-slate-700"
-        >
-          Rows per page
-        </label>
-        <select
-          id="document-page-size"
-          value={pageSize}
-          onChange={(e) => onPageSizeChange(Number(e.target.value))}
-          className="h-9 rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-700 outline-none transition focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
-        >
-          {PAGE_SIZE_OPTIONS.map((size) => (
-            <option key={size} value={size}>
-              {size}
-            </option>
-          ))}
-        </select>
-        <span>
-          Showing {showingFrom}–{end} of {total}
-        </span>
-      </div>
-
-      <div className="flex items-center gap-1">
-        <button
-          type="button"
-          onClick={() => onPageChange(page - 1)}
-          disabled={page <= 1}
-          className="inline-flex h-9 items-center gap-1 rounded-xl border border-slate-200 px-3 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-slate-700"
-        >
-          <ChevronLeft className="h-4 w-4" />
-          Prev
-        </button>
-
-        {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => {
-          const isActive = p === page;
-          return (
-            <button
-              key={p}
-              type="button"
-              onClick={() => onPageChange(p)}
-              aria-current={isActive ? "page" : undefined}
-              className={
-                isActive
-                  ? "h-9 w-9 rounded-xl bg-[#10B981] text-sm font-medium text-white"
-                  : "h-9 w-9 rounded-xl border border-slate-200 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-              }
-            >
-              {p}
-            </button>
-          );
-        })}
-
-        <button
-          type="button"
-          onClick={() => onPageChange(page + 1)}
-          disabled={page >= totalPages}
-          className="inline-flex h-9 items-center gap-1 rounded-xl border border-slate-200 px-3 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-slate-700"
-        >
-          Next
-          <ChevronRight className="h-4 w-4" />
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function StatCard({
-  title,
-  value,
-  icon,
-}: {
-  title: string;
-  value: string;
-  icon: React.ReactNode;
-}) {
-  return (
-    <div className="rounded-3xl bg-white p-6 shadow-sm transition hover:shadow-md hover:ring-1 hover:ring-[#10B981]/20">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm text-slate-500">{title}</p>
-          <h3 className="mt-2 text-2xl font-bold text-slate-900">{value}</h3>
-        </div>
-        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#10B981] text-white">
-          {icon}
-        </div>
-      </div>
-    </div>
-  );
-}
-
 function StatusBadge({ status }: { status: DocumentStatus }) {
   const styles: Record<DocumentStatus, string> = {
     Draft: "bg-slate-100 text-slate-600",
diff --git a/apps/edr-freight-web/portal/src/pages/tracking/TrackingPage.tsx b/apps/edr-freight-web/portal/src/pages/tracking/TrackingPage.tsx
index 47b37d952..ce277ff9c 100644
--- a/apps/edr-freight-web/portal/src/pages/tracking/TrackingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/tracking/TrackingPage.tsx
@@ -23,6 +23,15 @@ import {
   type ShipmentMode,
   type ShipmentStatus,
 } from "./shipments.mock";
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Input,
+} from "@edr/ui-common";
 
 type FilterValue = "All" | ShipmentStatus;
 type ViewMode = "grid" | "table";
@@ -52,107 +61,103 @@ export default function TrackingPage() {
   }, [filter, query]);
 
   return (
-    <div className="min-h-screen bg-slate-50 p-6">
-      <div className="mx-auto max-w-7xl space-y-6">
+    <div className="min-h-screen p-6">
+      <div className="space-y-6">
         <Breadcrumbs items={[{ label: "Tracking" }]} />
 
-        {/* Header */}
-        <div className="flex flex-col gap-4 rounded-3xl bg-white p-6 shadow-sm md:flex-row md:items-center md:justify-between">
+        <Card className="p-6 flex-row justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight text-slate-900">
               Shipment Tracking
             </h1>
-            <p className="mt-1 text-sm text-slate-500">
+            <p className="mt-1 text-sm text-secondary-foreground">
               Real-time cargo and shipment monitoring.
             </p>
           </div>
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-              <input
+              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Input
                 type="search"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search shipments..."
-                className="h-10 w-full rounded-2xl border border-slate-200 bg-white pl-10 pr-4 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
+                className="pl-8!"
               />
             </div>
 
             <NewShipmentPage>
-              <button
-                type="button"
-                className="inline-flex items-center justify-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
-              >
-                <Plus className="h-4 w-4" />
+              <Button>
+                <Plus />
                 New Shipment
-              </button>
+              </Button>
             </NewShipmentPage>
           </div>
-        </div>
+        </Card>
 
-        {/* Filter tabs + view toggle */}
-        <div className="flex flex-col gap-3 rounded-3xl bg-white p-2 shadow-sm md:flex-row md:items-center md:justify-between">
-          <div className="flex flex-wrap gap-1">
-            {FILTERS.map((f) => {
-              const isActive = f === filter;
-              const count =
-                f === "All"
-                  ? shipments.length
-                  : shipments.filter((s) => s.status === f).length;
-              return (
-                <button
-                  key={f}
-                  type="button"
-                  onClick={() => setFilter(f)}
-                  className={
-                    isActive
-                      ? "inline-flex items-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white"
-                      : "inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                  }
-                >
-                  {f}
-                  <span
+        <Card className="p-2">
+          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+            <div className="flex flex-wrap gap-1">
+              {FILTERS.map((f) => {
+                const isActive = f === filter;
+                const count =
+                  f === "All"
+                    ? shipments.length
+                    : shipments.filter((s) => s.status === f).length;
+                return (
+                  <button
+                    key={f}
+                    type="button"
+                    onClick={() => setFilter(f)}
                     className={
                       isActive
-                        ? "rounded-full bg-white/20 px-2 py-0.5 text-xs"
-                        : "rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600"
+                        ? "inline-flex items-center gap-2 rounded-2xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
+                        : "inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-primary/10 hover:text-primary"
                     }
                   >
-                    {count}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
+                    {f}
+                    <span
+                      className={
+                        isActive
+                          ? "rounded-full bg-white/20 px-2 py-0.5 text-xs"
+                          : "rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600"
+                      }
+                    >
+                      {count}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
 
-          <div className="flex items-center gap-1 self-start rounded-xl bg-slate-100 p-1 md:self-auto">
-            <ViewToggleButton
-              active={view === "grid"}
-              onClick={() => setView("grid")}
-              label="Grid view"
-            >
-              <LayoutGrid className="h-4 w-4" />
-              <span className="hidden sm:inline">Grid</span>
-            </ViewToggleButton>
-            <ViewToggleButton
-              active={view === "table"}
-              onClick={() => setView("table")}
-              label="Table view"
-            >
-              <List className="h-4 w-4" />
-              <span className="hidden sm:inline">Table</span>
-            </ViewToggleButton>
+            <div className="flex items-center gap-1 self-start rounded-xl bg-slate-100 p-1 md:self-auto">
+              <ViewToggleButton
+                active={view === "grid"}
+                onClick={() => setView("grid")}
+                label="Grid view"
+              >
+                <LayoutGrid />
+                <span className="hidden sm:inline">Grid</span>
+              </ViewToggleButton>
+              <ViewToggleButton
+                active={view === "table"}
+                onClick={() => setView("table")}
+                label="Table view"
+              >
+                <List />
+                <span className="hidden sm:inline">Table</span>
+              </ViewToggleButton>
+            </div>
           </div>
-        </div>
+        </Card>
 
-        {/* Empty / Grid / Table */}
         {filtered.length === 0 ? (
-          <div className="rounded-3xl bg-white p-12 text-center shadow-sm">
-            <p className="text-sm text-slate-500">
+          <Card className="p-12 text-center">
+            <p className="text-sm text-muted-foreground">
               No shipments match your filters.
             </p>
-          </div>
+          </Card>
         ) : view === "grid" ? (
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
             {filtered.map((shipment) => (
@@ -186,8 +191,8 @@ function ViewToggleButton({
       aria-pressed={active}
       className={
         active
-          ? "inline-flex items-center gap-2 rounded-lg bg-white px-3 py-1.5 text-sm font-medium text-[#10B981] shadow-sm"
-          : "inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:text-[#10B981]"
+          ? "inline-flex items-center gap-2 rounded-lg bg-white px-3 py-1.5 text-sm font-medium text-primary shadow-sm"
+          : "inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:text-primary"
       }
     >
       {children}
@@ -197,253 +202,246 @@ function ViewToggleButton({
 
 function ShipmentCard({ shipment }: { shipment: Shipment }) {
   return (
-    <div className="flex flex-col gap-4 rounded-3xl bg-white p-5 shadow-sm transition hover:shadow-md hover:ring-1 hover:ring-[#10B981]/20">
-      <div className="flex items-center justify-between">
-        <div className="flex flex-col gap-0.5">
-          <span className="text-base font-bold text-slate-900">
-            {shipment.reference}
-          </span>
-          <span className="text-xs text-slate-500">
-            Consignment {shipment.consignmentReference}
-          </span>
+    <Card className="p-5">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-0.5">
+            <span className="text-base font-bold text-slate-900">
+              {shipment.reference}
+            </span>
+            <span className="text-xs text-slate-500">
+              Consignment {shipment.consignmentReference}
+            </span>
+          </div>
+          <StatusBadge status={shipment.status} />
         </div>
-        <StatusBadge status={shipment.status} />
-      </div>
 
-      {/* Route */}
-      <div className="flex items-center justify-between rounded-2xl bg-[#10B981]/5 p-3">
-        <div className="text-sm">
-          <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
-            From
-          </p>
-          <p className="font-semibold text-slate-900">
-            {shipment.originStation}
-          </p>
+        <div className="flex items-center justify-between rounded-2xl bg-primary/5 p-3">
+          <div className="text-sm">
+            <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
+              From
+            </p>
+            <p className="font-semibold text-slate-900">
+              {shipment.originStation}
+            </p>
+          </div>
+          <ArrowRight className="text-primary" />
+          <div className="text-right text-sm">
+            <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
+              To
+            </p>
+            <p className="font-semibold text-slate-900">
+              {shipment.destinationStation}
+            </p>
+          </div>
         </div>
-        <ArrowRight className="h-5 w-5 text-[#10B981]" />
-        <div className="text-sm text-right">
-          <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
-            To
-          </p>
-          <p className="font-semibold text-slate-900">
-            {shipment.destinationStation}
-          </p>
-        </div>
-      </div>
 
-      {/* Progress */}
-      <div className="space-y-1.5">
-        <div className="flex items-center justify-between text-xs text-slate-500">
-          <span>Progress</span>
-          <span className="font-medium text-slate-700">
-            {shipment.progress}%
-          </span>
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between text-xs text-slate-500">
+            <span>Progress</span>
+            <span className="font-medium text-slate-700">
+              {shipment.progress}%
+            </span>
+          </div>
+          <div className="h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
+            <div
+              className="h-full rounded-full bg-primary transition-all"
+              style={{ width: `${shipment.progress}%` }}
+            />
+          </div>
         </div>
-        <div className="h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
-          <div
-            className="h-full rounded-full bg-[#10B981] transition-all"
-            style={{ width: `${shipment.progress}%` }}
-          />
-        </div>
-      </div>
 
-      {/* Meta */}
-      <div className="space-y-2 text-sm text-slate-700">
-        <div className="flex items-center gap-2">
-          <Building2 className="h-4 w-4 text-[#10B981]" />
-          <span>{shipment.customer}</span>
+        <div className="space-y-2 text-sm text-slate-700">
+          <div className="flex items-center gap-2">
+            <Building2 />
+            <span>{shipment.customer}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <ModeIcon mode={shipment.mode} />
+            <span className="capitalize">{shipment.mode}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <MapPin />
+            <span>{shipment.currentLocation}</span>
+          </div>
+          <div className="flex items-center gap-2 text-xs text-slate-500">
+            <Clock />
+            <span>
+              Updated {shipment.lastUpdate} · ETA {shipment.eta}
+            </span>
+          </div>
         </div>
-        <div className="flex items-center gap-2">
-          <ModeIcon mode={shipment.mode} />
-          <span className="capitalize">{shipment.mode}</span>
-        </div>
-        <div className="flex items-center gap-2">
-          <MapPin className="h-4 w-4 text-[#10B981]" />
-          <span>{shipment.currentLocation}</span>
-        </div>
-        <div className="flex items-center gap-2 text-xs text-slate-500">
-          <Clock className="h-3.5 w-3.5" />
-          <span>
-            Updated {shipment.lastUpdate} · ETA {shipment.eta}
-          </span>
-        </div>
-      </div>
 
-      {/* Actions */}
-      <div className="flex items-center justify-end gap-2 border-t border-slate-100 pt-3">
-        <NewShipmentPage
-          mode="edit"
-          shipment={{
-            bookingId: shipment.bookingId,
-            bookingReference: shipment.bookingReference,
-            originStation: shipment.originStation,
-            destinationStation: shipment.destinationStation,
-            mode: shipment.mode,
-            status: shipment.status,
-            currentLocation: shipment.currentLocation,
-            eta: shipment.eta,
-          }}
-        >
-          <button
-            type="button"
-            className="inline-flex items-center gap-1 rounded-xl border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
+        <div className="flex items-center justify-end gap-2 border-t pt-3">
+          <NewShipmentPage
+            mode="edit"
+            shipment={{
+              bookingId: shipment.bookingId,
+              bookingReference: shipment.bookingReference,
+              originStation: shipment.originStation,
+              destinationStation: shipment.destinationStation,
+              mode: shipment.mode,
+              status: shipment.status,
+              currentLocation: shipment.currentLocation,
+              eta: shipment.eta,
+            }}
           >
-            <Pencil className="h-3.5 w-3.5" />
-            Edit
-          </button>
-        </NewShipmentPage>
+            <Button variant="outline" size="sm">
+              <Pencil />
+              Edit
+            </Button>
+          </NewShipmentPage>
 
-        <DeleteShipmentDialog shipmentReference={shipment.reference}>
-          <button
-            type="button"
-            className="inline-flex items-center gap-1 rounded-xl border border-red-200 px-3 py-1.5 text-xs font-medium text-red-600 transition hover:bg-red-50"
-          >
-            <Trash2 className="h-3.5 w-3.5" />
-            Remove
-          </button>
-        </DeleteShipmentDialog>
+          <DeleteShipmentDialog shipmentReference={shipment.reference}>
+            <Button variant="outline" size="sm">
+              <Trash2 />
+              Remove
+            </Button>
+          </DeleteShipmentDialog>
+        </div>
       </div>
-    </div>
+    </Card>
   );
 }
 
 function ShipmentTable({ shipments: rows }: { shipments: Shipment[] }) {
   return (
-    <div className="overflow-hidden rounded-3xl bg-white shadow-sm">
-      <div className="overflow-x-auto">
-        <table className="w-full min-w-[1000px] whitespace-nowrap text-left">
-          <thead className="bg-slate-50 text-sm text-slate-500">
-            <tr>
-              <th className="px-6 py-4 font-medium">Shipment</th>
-              <th className="px-6 py-4 font-medium">Booking</th>
-              <th className="px-6 py-4 font-medium">Route</th>
-              <th className="px-6 py-4 font-medium">Mode</th>
-              <th className="px-6 py-4 font-medium">Status</th>
-              <th className="px-6 py-4 font-medium">Progress</th>
-              <th className="px-6 py-4 font-medium">Current Location</th>
-              <th className="px-6 py-4 font-medium">ETA</th>
-              <th className="px-6 py-4 font-medium text-right">Actions</th>
-            </tr>
-          </thead>
+    <Card className="gap-0">
+      <CardHeader className="flex flex-row items-center justify-between border-b">
+        <div>
+          <CardTitle>Shipment List</CardTitle>
+          <CardDescription>All shipments and their current status.</CardDescription>
+        </div>
+      </CardHeader>
 
-          <tbody>
-            {rows.map((shipment) => (
-              <tr
-                key={shipment.id}
-                className="border-t border-slate-100 transition hover:bg-[#10B981]/5"
-              >
-                <td className="px-6 py-4">
-                  <div className="flex items-center gap-3">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#10B981] text-white">
-                      <Truck className="h-5 w-5" />
-                    </div>
-                    <div>
-                      <p className="font-medium text-slate-900">
-                        {shipment.reference}
-                      </p>
-                      <p className="text-sm text-slate-500">
-                        {shipment.customer}
-                      </p>
-                    </div>
-                  </div>
-                </td>
-
-                <td className="px-6 py-4 text-sm text-slate-700">
-                  {shipment.bookingReference}
-                </td>
-
-                <td className="px-6 py-4 text-sm text-slate-700">
-                  <div className="flex items-center gap-2">
-                    <span>{shipment.originStation}</span>
-                    <ArrowRight className="h-3.5 w-3.5 text-slate-400" />
-                    <span>{shipment.destinationStation}</span>
-                  </div>
-                </td>
-
-                <td className="px-6 py-4">
-                  <div className="flex items-center gap-2 text-sm capitalize text-slate-700">
-                    <ModeIcon mode={shipment.mode} />
-                    {shipment.mode}
-                  </div>
-                </td>
-
-                <td className="px-6 py-4">
-                  <StatusBadge status={shipment.status} />
-                </td>
-
-                <td className="px-6 py-4">
-                  <div className="flex w-32 items-center gap-2">
-                    <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
-                      <div
-                        className="h-full rounded-full bg-[#10B981]"
-                        style={{ width: `${shipment.progress}%` }}
-                      />
-                    </div>
-                    <span className="text-xs font-medium text-slate-600">
-                      {shipment.progress}%
-                    </span>
-                  </div>
-                </td>
-
-                <td className="px-6 py-4 text-sm text-slate-700">
-                  <div className="flex items-center gap-1.5">
-                    <MapPin className="h-3.5 w-3.5 text-[#10B981]" />
-                    {shipment.currentLocation}
-                  </div>
-                </td>
-
-                <td className="px-6 py-4 text-sm text-slate-700">
-                  {shipment.eta}
-                </td>
-
-                <td className="px-6 py-4">
-                  <div className="flex justify-end gap-2">
-                    <NewShipmentPage
-                      mode="edit"
-                      shipment={{
-                        bookingId: shipment.bookingId,
-                        bookingReference: shipment.bookingReference,
-                        originStation: shipment.originStation,
-                        destinationStation: shipment.destinationStation,
-                        mode: shipment.mode,
-                        status: shipment.status,
-                        currentLocation: shipment.currentLocation,
-                        eta: shipment.eta,
-                      }}
-                    >
-                      <button
-                        type="button"
-                        className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </button>
-                    </NewShipmentPage>
-
-                    <DeleteShipmentDialog
-                      shipmentReference={shipment.reference}
-                    >
-                      <button
-                        type="button"
-                        className="rounded-xl border border-red-200 p-2 text-red-600 transition hover:bg-red-50"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </button>
-                    </DeleteShipmentDialog>
-                  </div>
-                </td>
+      <CardContent className="px-0">
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[1000px] whitespace-nowrap text-left">
+            <thead className="bg-muted text-sm text-muted-foreground">
+              <tr>
+                <th className="px-6 py-4 font-medium">Shipment</th>
+                <th className="px-6 py-4 font-medium">Booking</th>
+                <th className="px-6 py-4 font-medium">Route</th>
+                <th className="px-6 py-4 font-medium">Mode</th>
+                <th className="px-6 py-4 font-medium">Status</th>
+                <th className="px-6 py-4 font-medium">Progress</th>
+                <th className="px-6 py-4 font-medium">Current Location</th>
+                <th className="px-6 py-4 font-medium">ETA</th>
+                <th className="px-6 py-4 font-medium text-right">Actions</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+            </thead>
+
+            <tbody>
+              {rows.map((shipment) => (
+                <tr
+                  key={shipment.id}
+                  className="border-t transition hover:bg-muted/50"
+                >
+                  <td className="px-6 py-4">
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                        <Truck />
+                      </div>
+                      <div>
+                        <p className="font-medium text-slate-900">
+                          {shipment.reference}
+                        </p>
+                        <p className="text-sm text-slate-500">
+                          {shipment.customer}
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+
+                  <td className="px-6 py-4 text-sm text-slate-700">
+                    {shipment.bookingReference}
+                  </td>
+
+                  <td className="px-6 py-4 text-sm text-slate-700">
+                    <div className="flex items-center gap-2">
+                      <span>{shipment.originStation}</span>
+                      <ArrowRight className="text-slate-400" />
+                      <span>{shipment.destinationStation}</span>
+                    </div>
+                  </td>
+
+                  <td className="px-6 py-4">
+                    <div className="flex items-center gap-2 text-sm capitalize text-slate-700">
+                      <ModeIcon mode={shipment.mode} />
+                      {shipment.mode}
+                    </div>
+                  </td>
+
+                  <td className="px-6 py-4">
+                    <StatusBadge status={shipment.status} />
+                  </td>
+
+                  <td className="px-6 py-4">
+                    <div className="flex w-32 items-center gap-2">
+                      <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
+                        <div
+                          className="h-full rounded-full bg-primary"
+                          style={{ width: `${shipment.progress}%` }}
+                        />
+                      </div>
+                      <span className="text-xs font-medium text-slate-600">
+                        {shipment.progress}%
+                      </span>
+                    </div>
+                  </td>
+
+                  <td className="px-6 py-4 text-sm text-slate-700">
+                    <div className="flex items-center gap-1.5">
+                      <MapPin />
+                      {shipment.currentLocation}
+                    </div>
+                  </td>
+
+                  <td className="px-6 py-4 text-sm text-slate-700">
+                    {shipment.eta}
+                  </td>
+
+                  <td className="px-6 py-4">
+                    <div className="flex justify-end gap-2">
+                      <NewShipmentPage
+                        mode="edit"
+                        shipment={{
+                          bookingId: shipment.bookingId,
+                          bookingReference: shipment.bookingReference,
+                          originStation: shipment.originStation,
+                          destinationStation: shipment.destinationStation,
+                          mode: shipment.mode,
+                          status: shipment.status,
+                          currentLocation: shipment.currentLocation,
+                          eta: shipment.eta,
+                        }}
+                      >
+                        <Button variant="outline" size="icon">
+                          <Pencil />
+                        </Button>
+                      </NewShipmentPage>
+
+                      <DeleteShipmentDialog shipmentReference={shipment.reference}>
+                        <Button variant="outline" size="icon">
+                          <Trash2 />
+                        </Button>
+                      </DeleteShipmentDialog>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
   );
 }
 
 function ModeIcon({ mode }: { mode: ShipmentMode }) {
-  if (mode === "rail") return <Train className="h-4 w-4 text-[#10B981]" />;
-  if (mode === "truck") return <Truck className="h-4 w-4 text-[#10B981]" />;
-  return <Train className="h-4 w-4 text-[#10B981]" />;
+  if (mode === "rail") return <Train />;
+  if (mode === "truck") return <Truck />;
+  return <Train />;
 }
 
 function StatusBadge({ status }: { status: ShipmentStatus }) {
diff --git a/apps/edr-freight-web/portal/src/pages/trains/TrainsPage.tsx b/apps/edr-freight-web/portal/src/pages/trains/TrainsPage.tsx
index 63447360d..42447f5b5 100644
--- a/apps/edr-freight-web/portal/src/pages/trains/TrainsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/trains/TrainsPage.tsx
@@ -1,7 +1,5 @@
 import { useMemo, useState } from "react";
 import {
-  ChevronLeft,
-  ChevronRight,
   Filter,
   Gauge,
   Pencil,
@@ -16,8 +14,19 @@ import Breadcrumbs from "@/components/Breadcrumbs";
 import NewTrainPage from "./NewTrainPage";
 import DeleteTrainDialog from "./DeleteTrainDialog";
 import { trains, type TrainStatus } from "./trains.mock";
-
-const PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
+import {
+  DataTable,
+  DataTableFooter,
+  type ColumnDef,
+  usePagination,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Input,
+} from "@edr/ui-common";
 
 type FilterValue = "All" | TrainStatus;
 
@@ -30,8 +39,7 @@ const FILTERS: FilterValue[] = [
 ];
 
 export default function TrainsPage() {
-  const [pageSize, setPageSize] = useState(10);
-  const [page, setPage] = useState(1);
+  const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [filter, setFilter] = useState<FilterValue>("All");
   const [query, setQuery] = useState("");
 
@@ -50,13 +58,13 @@ export default function TrainsPage() {
   }, [filter, query]);
 
   const total = filtered.length;
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  const safePage = Math.min(page, totalPages);
-  const start = (safePage - 1) * pageSize;
-  const end = Math.min(start + pageSize, total);
-  const paginated = useMemo(
+  const pageCount = Math.ceil(total / pagination.pageSize);
+  const start = pagination.pageIndex * pagination.pageSize;
+  const end = Math.min(start + pagination.pageSize, total);
+
+  const paginatedData = useMemo(
     () => filtered.slice(start, end),
-    [filtered, start, end],
+    [start, end, filtered],
   );
 
   const operationalCount = trains.filter(
@@ -66,70 +74,174 @@ export default function TrainsPage() {
     (t) => t.status === "In Maintenance",
   ).length;
 
+  const columns: ColumnDef<(typeof trains)[number]>[] = [
+    {
+      id: "train",
+      header: "Train",
+      cell: ({ row }) => {
+        const t = row.original;
+        return (
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
+              <TrainIcon />
+            </div>
+            <div>
+              <p className="font-medium text-slate-900">{t.code}</p>
+              <p className="text-sm text-slate-500">{t.name}</p>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "type",
+      header: "Type",
+    },
+    {
+      accessorKey: "capacityTons",
+      header: "Capacity",
+      cell: ({ row }) => <span>{row.original.capacityTons}t</span>,
+    },
+    {
+      accessorKey: "depot",
+      header: "Depot",
+    },
+    {
+      accessorKey: "mileageKm",
+      header: "Mileage",
+      cell: ({ row }) => (
+        <span>{row.original.mileageKm.toLocaleString()} km</span>
+      ),
+    },
+    {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => <StatusBadge status={row.original.status} />,
+    },
+    {
+      id: "actions",
+      header: () => <div className="text-right">Actions</div>,
+      cell: ({ row }) => {
+        const train = row.original;
+        return (
+          <div className="flex justify-end gap-2">
+            <NewTrainPage
+              mode="edit"
+              train={{
+                code: train.code,
+                name: train.name,
+                type: train.type,
+                status: train.status,
+                capacityTons: train.capacityTons,
+                depot: train.depot,
+                manufacturer: train.manufacturer,
+                mileageKm: train.mileageKm,
+                lastMaintenance: train.lastMaintenance,
+                nextMaintenance: train.nextMaintenance,
+                currentAssignment: train.currentAssignment,
+                yearBuilt: train.yearBuilt,
+              }}
+            >
+              <Button variant="outline" size="icon">
+                <Pencil />
+              </Button>
+            </NewTrainPage>
+
+            <DeleteTrainDialog trainCode={train.code}>
+              <Button variant="outline" size="icon">
+                <Trash2 />
+              </Button>
+            </DeleteTrainDialog>
+          </div>
+        );
+      },
+    },
+  ];
+
   return (
-    <div className="min-h-screen bg-slate-50 p-6">
-      <div className="mx-auto max-w-7xl space-y-6">
+    <div className="min-h-screen p-6">
+      <div className="space-y-6">
         <Breadcrumbs items={[{ label: "Trains" }]} />
 
-        {/* Header */}
-        <div className="flex flex-col gap-4 rounded-3xl bg-white p-6 shadow-sm md:flex-row md:items-center md:justify-between">
+        <Card className="p-6 flex-row justify-between">
           <div>
             <h1 className="text-3xl font-bold tracking-tight text-slate-900">
               Trains
             </h1>
-            <p className="mt-1 text-sm text-slate-500">
+            <p className="mt-1 text-sm text-secondary-foreground">
               Fleet roster, capacity, and maintenance status.
             </p>
           </div>
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-              <input
+              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Input
                 type="search"
                 value={query}
                 onChange={(e) => {
                   setQuery(e.target.value);
-                  setPage(1);
+                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
                 }}
                 placeholder="Search trains..."
-                className="h-10 w-full rounded-2xl border border-slate-200 bg-white pl-10 pr-4 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
+                className="pl-8!"
               />
             </div>
 
             <NewTrainPage>
-              <button
-                type="button"
-                className="inline-flex items-center justify-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white transition hover:bg-[#10B981]/90"
-              >
-                <Plus className="h-4 w-4" />
+              <Button>
+                <Plus />
                 New Train
-              </button>
+              </Button>
             </NewTrainPage>
           </div>
-        </div>
+        </Card>
 
-        {/* Stats */}
         <div className="grid gap-4 md:grid-cols-3">
-          <StatCard
-            title="Total Trains"
-            value={String(trains.length)}
-            icon={<TrainIcon className="h-5 w-5" />}
-          />
-          <StatCard
-            title="Operational"
-            value={String(operationalCount)}
-            icon={<Gauge className="h-5 w-5" />}
-          />
-          <StatCard
-            title="In Maintenance"
-            value={String(maintenanceCount)}
-            icon={<Wrench className="h-5 w-5" />}
-          />
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Total Trains</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {trains.length}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <TrainIcon />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">Operational</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {operationalCount}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Gauge />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">In Maintenance</p>
+                <h3 className="mt-2 text-3xl font-bold text-slate-900">
+                  {maintenanceCount}
+                </h3>
+              </div>
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                <Wrench />
+              </div>
+            </CardContent>
+          </Card>
         </div>
 
-        {/* Filter tabs */}
-        <div className="rounded-3xl bg-white p-2 shadow-sm">
+        <Card className="p-2">
           <div className="flex flex-wrap gap-1">
             {FILTERS.map((f) => {
               const isActive = f === filter;
@@ -143,12 +255,12 @@ export default function TrainsPage() {
                   type="button"
                   onClick={() => {
                     setFilter(f);
-                    setPage(1);
+                    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
                   }}
                   className={
                     isActive
-                      ? "inline-flex items-center gap-2 rounded-2xl bg-[#10B981] px-4 py-2 text-sm font-medium text-white"
-                      : "inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-[#10B981]/10 hover:text-[#10B981]"
+                      ? "inline-flex items-center gap-2 rounded-2xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
+                      : "inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-primary/10 hover:text-primary"
                   }
                 >
                   {f}
@@ -165,262 +277,44 @@ export default function TrainsPage() {
               );
             })}
           </div>
-        </div>
+        </Card>
 
-        {/* Train Table */}
-        <div className="overflow-hidden rounded-3xl bg-white shadow-sm">
-          <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
+        <Card className="gap-0">
+          <CardHeader className="flex flex-row items-center justify-between border-b">
             <div>
-              <h2 className="text-lg font-semibold text-slate-900">
-                Fleet Roster
-              </h2>
-              <p className="text-sm text-slate-500">
+              <CardTitle>Fleet Roster</CardTitle>
+              <CardDescription>
                 All locomotives and wagons in service.
-              </p>
+              </CardDescription>
             </div>
 
-            <button className="inline-flex items-center gap-2 rounded-2xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]">
-              <Filter className="h-4 w-4" />
+            <Button variant="secondary" size="sm">
+              <Filter />
               Filter
-            </button>
-          </div>
+            </Button>
+          </CardHeader>
 
-          <div className="overflow-x-auto">
-            <table className="w-full min-w-[900px] whitespace-nowrap text-left">
-              <thead className="bg-slate-50 text-sm text-slate-500">
-                <tr>
-                  <th className="px-6 py-4 font-medium">Train</th>
-                  <th className="px-6 py-4 font-medium">Type</th>
-                  <th className="px-6 py-4 font-medium">Capacity</th>
-                  <th className="px-6 py-4 font-medium">Depot</th>
-                  <th className="px-6 py-4 font-medium">Mileage</th>
-                  <th className="px-6 py-4 font-medium">Status</th>
-                  <th className="px-6 py-4 font-medium text-right">Actions</th>
-                </tr>
-              </thead>
-
-              <tbody>
-                {paginated.length === 0 ? (
-                  <tr>
-                    <td
-                      colSpan={7}
-                      className="px-6 py-12 text-center text-sm text-slate-500"
-                    >
-                      No trains match your filters.
-                    </td>
-                  </tr>
-                ) : (
-                  paginated.map((train) => (
-                    <tr
-                      key={train.id}
-                      className="border-t border-slate-100 transition hover:bg-[#10B981]/5"
-                    >
-                      <td className="px-6 py-4">
-                        <div className="flex items-center gap-3">
-                          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#10B981] text-white">
-                            <TrainIcon className="h-5 w-5" />
-                          </div>
-                          <div>
-                            <p className="font-medium text-slate-900">
-                              {train.code}
-                            </p>
-                            <p className="text-sm text-slate-500">
-                              {train.name}
-                            </p>
-                          </div>
-                        </div>
-                      </td>
-
-                      <td className="px-6 py-4 text-sm text-slate-700">
-                        {train.type}
-                      </td>
-
-                      <td className="px-6 py-4 text-sm text-slate-700">
-                        {train.capacityTons}t
-                      </td>
-
-                      <td className="px-6 py-4 text-sm text-slate-700">
-                        {train.depot}
-                      </td>
-
-                      <td className="px-6 py-4 text-sm text-slate-700">
-                        {train.mileageKm.toLocaleString()} km
-                      </td>
-
-                      <td className="px-6 py-4">
-                        <StatusBadge status={train.status} />
-                      </td>
-
-                      <td className="px-6 py-4">
-                        <div className="flex justify-end gap-2">
-                          <NewTrainPage
-                            mode="edit"
-                            train={{
-                              code: train.code,
-                              name: train.name,
-                              type: train.type,
-                              status: train.status,
-                              capacityTons: train.capacityTons,
-                              depot: train.depot,
-                              manufacturer: train.manufacturer,
-                              mileageKm: train.mileageKm,
-                              lastMaintenance: train.lastMaintenance,
-                              nextMaintenance: train.nextMaintenance,
-                              currentAssignment: train.currentAssignment,
-                              yearBuilt: train.yearBuilt,
-                            }}
-                          >
-                            <button
-                              type="button"
-                              className="rounded-xl border border-slate-200 p-2 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-                            >
-                              <Pencil className="h-4 w-4" />
-                            </button>
-                          </NewTrainPage>
-
-                          <DeleteTrainDialog trainCode={train.code}>
-                            <button
-                              type="button"
-                              className="rounded-xl border border-red-200 p-2 text-red-600 transition hover:bg-red-50"
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </button>
-                          </DeleteTrainDialog>
-                        </div>
-                      </td>
-                    </tr>
-                  ))
-                )}
-              </tbody>
-            </table>
-          </div>
-
-          <Pagination
-            page={safePage}
-            pageSize={pageSize}
-            total={total}
-            totalPages={totalPages}
-            start={start}
-            end={end}
-            onPageChange={setPage}
-            onPageSizeChange={(size) => {
-              setPageSize(size);
-              setPage(1);
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Pagination({
-  page,
-  pageSize,
-  total,
-  totalPages,
-  start,
-  end,
-  onPageChange,
-  onPageSizeChange,
-}: {
-  page: number;
-  pageSize: number;
-  total: number;
-  totalPages: number;
-  start: number;
-  end: number;
-  onPageChange: (page: number) => void;
-  onPageSizeChange: (size: number) => void;
-}) {
-  const showingFrom = total === 0 ? 0 : start + 1;
-
-  return (
-    <div className="flex flex-col gap-3 border-t border-slate-100 px-6 py-4 md:flex-row md:items-center md:justify-between">
-      <div className="flex items-center gap-3 text-sm text-slate-500">
-        <label htmlFor="train-page-size" className="font-medium text-slate-700">
-          Rows per page
-        </label>
-        <select
-          id="train-page-size"
-          value={pageSize}
-          onChange={(e) => onPageSizeChange(Number(e.target.value))}
-          className="h-9 rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-700 outline-none transition focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20"
-        >
-          {PAGE_SIZE_OPTIONS.map((size) => (
-            <option key={size} value={size}>
-              {size}
-            </option>
-          ))}
-        </select>
-        <span>
-          Showing {showingFrom}–{end} of {total}
-        </span>
-      </div>
-
-      <div className="flex items-center gap-1">
-        <button
-          type="button"
-          onClick={() => onPageChange(page - 1)}
-          disabled={page <= 1}
-          className="inline-flex h-9 items-center gap-1 rounded-xl border border-slate-200 px-3 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-slate-700"
-        >
-          <ChevronLeft className="h-4 w-4" />
-          Prev
-        </button>
-
-        {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => {
-          const isActive = p === page;
-          return (
-            <button
-              key={p}
-              type="button"
-              onClick={() => onPageChange(p)}
-              aria-current={isActive ? "page" : undefined}
-              className={
-                isActive
-                  ? "h-9 w-9 rounded-xl bg-[#10B981] text-sm font-medium text-white"
-                  : "h-9 w-9 rounded-xl border border-slate-200 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981]"
-              }
-            >
-              {p}
-            </button>
-          );
-        })}
-
-        <button
-          type="button"
-          onClick={() => onPageChange(page + 1)}
-          disabled={page >= totalPages}
-          className="inline-flex h-9 items-center gap-1 rounded-xl border border-slate-200 px-3 text-sm font-medium text-slate-700 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-slate-700"
-        >
-          Next
-          <ChevronRight className="h-4 w-4" />
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function StatCard({
-  title,
-  value,
-  icon,
-}: {
-  title: string;
-  value: string;
-  icon: React.ReactNode;
-}) {
-  return (
-    <div className="rounded-3xl bg-white p-6 shadow-sm transition hover:shadow-md hover:ring-1 hover:ring-[#10B981]/20">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm text-slate-500">{title}</p>
-          <h3 className="mt-2 text-3xl font-bold text-slate-900">{value}</h3>
-        </div>
-        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#10B981] text-white">
-          {icon}
-        </div>
+          <CardContent className="px-0">
+            <DataTable
+              columns={columns}
+              data={paginatedData}
+              status="success"
+              onRowClick={() => {}}
+              pagination={{
+                pageIndex: pagination.pageIndex,
+                pageSize: pagination.pageSize,
+                pageCount: pageCount,
+                totalCount: total,
+              }}
+              tableOptions={{
+                state: { pagination },
+                onPaginationChange: setPagination,
+              }}
+              containerClassName="border-b shadow-none"
+              footer={DataTableFooter}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );

From 76dcc48a38bb5603518d7ebeca4c5075480f8e29 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Wed, 20 May 2026 13:48:09 +0300
Subject: [PATCH 3/5] chore: update the react version for the frieght portal to
 19

---
 apps/edr-freight-web/portal/package.json |    4 +-
 pnpm-lock.yaml                           | 1934 +++++++++++++++++++++-
 2 files changed, 1855 insertions(+), 83 deletions(-)

diff --git a/apps/edr-freight-web/portal/package.json b/apps/edr-freight-web/portal/package.json
index e3114fb45..81a34f736 100644
--- a/apps/edr-freight-web/portal/package.json
+++ b/apps/edr-freight-web/portal/package.json
@@ -21,8 +21,8 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.14.0",
     "radix-ui": "^1.4.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
     "react-router-dom": "^6.27.0",
     "recharts": "^3.8.1",
     "tailwind-merge": "^3.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca17749d4..259cc73aa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -231,10 +231,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.1.1
-        version: 1.1.1(l3yrqwo7ljy42bdsd6ijtc3cbe)
+        version: 1.1.1(33c6sm4c4ueuo474qk2tvnumee)
       axios:
         specifier: ^1.7.7
         version: 1.16.0
@@ -246,28 +246,28 @@ 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-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
       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:*
@@ -9234,6 +9234,11 @@ packages:
     peerDependencies:
       react: 18.3.1
 
+  react-dom@19.2.6:
+    resolution: {integrity: sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==}
+    peerDependencies:
+      react: 18.3.1
+
   react-dropzone@14.4.1:
     resolution: {integrity: sha512-QDuV76v3uKbHiH34SpwifZ+gOLi1+RdsCO1kl5vxMT4wW8R82+sthjvBw4th3NHF/XX6FBsqDYZVNN+pnhaw0g==}
     engines: {node: '>= 10.13'}
@@ -9446,6 +9451,10 @@ packages:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
 
+  react@19.2.6:
+    resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
+    engines: {node: '>=0.10.0'}
+
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
@@ -9747,6 +9756,9 @@ packages:
   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'}
@@ -11576,6 +11588,78 @@ snapshots:
       react: 18.3.1
       react-dom: 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
+      '@zag-js/anatomy': 1.40.0
+      '@zag-js/angle-slider': 1.40.0
+      '@zag-js/async-list': 1.40.0
+      '@zag-js/auto-resize': 1.40.0
+      '@zag-js/avatar': 1.40.0
+      '@zag-js/carousel': 1.40.0
+      '@zag-js/cascade-select': 1.40.0
+      '@zag-js/checkbox': 1.40.0
+      '@zag-js/clipboard': 1.40.0
+      '@zag-js/collapsible': 1.40.0
+      '@zag-js/collection': 1.40.0
+      '@zag-js/color-picker': 1.40.0
+      '@zag-js/color-utils': 1.40.0
+      '@zag-js/combobox': 1.40.0
+      '@zag-js/core': 1.40.0
+      '@zag-js/date-input': 1.40.0(@internationalized/date@3.12.0)
+      '@zag-js/date-picker': 1.40.0(@internationalized/date@3.12.0)
+      '@zag-js/date-utils': 1.40.0(@internationalized/date@3.12.0)
+      '@zag-js/dialog': 1.40.0
+      '@zag-js/dom-query': 1.40.0
+      '@zag-js/drawer': 1.40.0
+      '@zag-js/editable': 1.40.0
+      '@zag-js/file-upload': 1.40.0
+      '@zag-js/file-utils': 1.40.0
+      '@zag-js/floating-panel': 1.40.0
+      '@zag-js/focus-trap': 1.40.0
+      '@zag-js/focus-visible': 1.40.0
+      '@zag-js/highlight-word': 1.40.0
+      '@zag-js/hover-card': 1.40.0
+      '@zag-js/i18n-utils': 1.40.0
+      '@zag-js/image-cropper': 1.40.0
+      '@zag-js/json-tree-utils': 1.40.0
+      '@zag-js/listbox': 1.40.0
+      '@zag-js/marquee': 1.40.0
+      '@zag-js/menu': 1.40.0
+      '@zag-js/navigation-menu': 1.40.0
+      '@zag-js/number-input': 1.40.0
+      '@zag-js/pagination': 1.40.0
+      '@zag-js/password-input': 1.40.0
+      '@zag-js/pin-input': 1.40.0
+      '@zag-js/popover': 1.40.0
+      '@zag-js/presence': 1.40.0
+      '@zag-js/progress': 1.40.0
+      '@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@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
+      '@zag-js/slider': 1.40.0
+      '@zag-js/splitter': 1.40.0
+      '@zag-js/steps': 1.40.0
+      '@zag-js/switch': 1.40.0
+      '@zag-js/tabs': 1.40.0
+      '@zag-js/tags-input': 1.40.0
+      '@zag-js/timer': 1.40.0
+      '@zag-js/toast': 1.40.0
+      '@zag-js/toggle': 1.40.0
+      '@zag-js/toggle-group': 1.40.0
+      '@zag-js/tooltip': 1.40.0
+      '@zag-js/tour': 1.40.0
+      '@zag-js/tree-view': 1.40.0
+      '@zag-js/types': 1.40.0
+      '@zag-js/utils': 1.40.0
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
@@ -11874,6 +11958,19 @@ snapshots:
       react: 18.3.1
       react-dom: 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@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@19.2.6)
+      '@emotion/serialize': 1.3.3
+      '@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: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   '@colors/colors@1.5.0':
     optional: true
 
@@ -12078,6 +12175,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@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@19.2.6)
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      hoist-non-react-statics: 3.3.2
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 18.3.28
+    transitivePeerDependencies:
+      - supports-color
+
   '@emotion/serialize@1.3.3':
     dependencies:
       '@emotion/hash': 0.9.2
@@ -12103,12 +12216,31 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@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@19.2.6)
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.6)
+      '@emotion/utils': 1.4.2
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 18.3.28
+    transitivePeerDependencies:
+      - supports-color
+
   '@emotion/unitless@0.10.0': {}
 
   '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@18.3.1)':
     dependencies:
       react: 18.3.1
 
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+
   '@emotion/utils@1.4.2': {}
 
   '@emotion/weak-memoize@0.4.0': {}
@@ -12241,6 +12373,12 @@ snapshots:
       react: 18.3.1
       react-dom: 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: 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)':
     dependencies:
       '@floating-ui/react-dom': 2.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -12249,6 +12387,14 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       tabbable: 6.4.0
 
+  '@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@19.2.6(react@19.2.6))(react@19.2.6)
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      tabbable: 6.4.0
+
   '@floating-ui/utils@0.2.11': {}
 
   '@gilbarbara/deep-equal@0.1.2': {}
@@ -12264,6 +12410,11 @@ snapshots:
       '@standard-schema/utils': 0.3.0
       react-hook-form: 7.75.0(react@18.3.1)
 
+  '@hookform/resolvers@5.2.2(react-hook-form@7.75.0(react@19.2.6))':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.75.0(react@19.2.6)
+
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -12668,6 +12819,11 @@ snapshots:
       lottie-web: 5.13.0
       react: 18.3.1
 
+  '@lottiefiles/react-lottie-player@3.6.0(react@19.2.6)':
+    dependencies:
+      lottie-web: 5.13.0
+      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)':
@@ -12684,6 +12840,20 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  '@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@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: 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)':
     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)
@@ -12693,10 +12863,23 @@ snapshots:
       react: 18.3.1
       react-dom: 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@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: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   '@mantine/hooks@8.3.18(react@18.3.1)':
     dependencies:
       react: 18.3.1
 
+  '@mantine/hooks@8.3.18(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+
   '@mapbox/node-pre-gyp@1.0.11':
     dependencies:
       detect-libc: 2.1.2
@@ -12760,6 +12943,20 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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@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@19.2.6)
+      '@popperjs/core': 2.11.8
+      clsx: 2.1.1
+      prop-types: 15.8.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)':
@@ -12770,6 +12967,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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@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)':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -12791,6 +12996,27 @@ snapshots:
       '@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
 
+  '@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@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@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: 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@19.2.6(react@19.2.6))(react@19.2.6)
+    optionalDependencies:
+      '@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)':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -12800,6 +13026,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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@19.2.6)
+      prop-types: 15.8.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)':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -12812,6 +13047,18 @@ snapshots:
       '@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/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: 19.2.6
+    optionalDependencies:
+      '@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)':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -12828,6 +13075,22 @@ snapshots:
       '@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
 
+  '@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@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@19.2.6)
+      clsx: 2.1.1
+      csstype: 3.2.3
+      prop-types: 15.8.1
+      react: 19.2.6
+    optionalDependencies:
+      '@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
@@ -12844,6 +13107,18 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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: 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)':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -12856,6 +13131,18 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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: 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)':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -12878,6 +13165,28 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  '@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@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: 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@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
+    transitivePeerDependencies:
+      - '@types/react'
+
   '@nestjs/axios@4.0.1(@nestjs/common@11.1.19(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(axios@1.16.0)(rxjs@7.8.2)':
     dependencies:
       '@nestjs/common': 11.1.19(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2)
@@ -13082,6 +13391,12 @@ snapshots:
       react: 18.3.1
       react-dom: 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: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   '@open-draft/deferred-promise@2.2.0': {}
 
   '@open-draft/deferred-promise@3.0.0': {}
@@ -13179,6 +13494,15 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
+  '@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13196,6 +13520,23 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13210,6 +13551,20 @@ snapshots:
       '@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@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@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)':
     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)
@@ -13219,6 +13574,15 @@ snapshots:
       '@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@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@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)':
     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)
@@ -13228,6 +13592,15 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
@@ -13241,6 +13614,19 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/react-context': 1.1.3(@types/react@18.3.28)(react@18.3.1)
@@ -13254,6 +13640,19 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13270,6 +13669,22 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13286,6 +13701,22 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
@@ -13298,12 +13729,30 @@ snapshots:
       '@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@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@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)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.28)(react@19.2.6)':
+    dependencies:
+      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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13318,18 +13767,44 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@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@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@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)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-context@1.1.2(@types/react@18.3.28)(react@19.2.6)':
+    dependencies:
+      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)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-context@1.1.3(@types/react@18.3.28)(react@19.2.6)':
+    dependencies:
+      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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13352,12 +13827,40 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@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@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@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: 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)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-direction@1.1.1(@types/react@18.3.28)(react@19.2.6)':
+    dependencies:
+      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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13371,6 +13874,19 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13386,12 +13902,33 @@ snapshots:
       '@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@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@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)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@18.3.28)(react@19.2.6)':
+    dependencies:
+      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)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
@@ -13403,6 +13940,17 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13417,6 +13965,20 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13434,6 +13996,23 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
@@ -13441,6 +14020,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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@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)':
     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)
@@ -13450,6 +14036,15 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@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@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@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)':
     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)
@@ -13459,6 +14054,15 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13485,6 +14089,32 @@ snapshots:
       '@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@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@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: 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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13503,6 +14133,24 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13525,6 +14173,28 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/number': 1.1.1
@@ -13545,6 +14215,26 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13561,6 +14251,22 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13584,6 +14290,29 @@ snapshots:
       '@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@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@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: 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)':
     dependencies:
       '@floating-ui/react-dom': 2.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -13602,6 +14331,24 @@ snapshots:
       '@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@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@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: 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)':
     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)
@@ -13612,6 +14359,16 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
@@ -13622,6 +14379,16 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/react-slot': 1.2.3(@types/react@18.3.28)(react@18.3.1)
@@ -13631,6 +14398,15 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/react-slot': 1.2.4(@types/react@18.3.28)(react@18.3.1)
@@ -13640,6 +14416,15 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/react-context': 1.1.2(@types/react@18.3.28)(react@18.3.1)
@@ -13650,6 +14435,16 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/react-context': 1.1.3(@types/react@18.3.28)(react@18.3.1)
@@ -13660,6 +14455,16 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13678,6 +14483,24 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13695,6 +14518,23 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/number': 1.1.1
@@ -13712,6 +14552,23 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/number': 1.1.1
@@ -13741,6 +14598,35 @@ snapshots:
       '@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@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@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: 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)':
     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)
@@ -13750,6 +14636,15 @@ snapshots:
       '@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@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@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)':
     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)
@@ -13759,6 +14654,15 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/number': 1.1.1
@@ -13778,6 +14682,25 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
@@ -13785,6 +14708,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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@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)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.28)(react@18.3.1)
@@ -13792,6 +14722,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13807,6 +14744,21 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13823,6 +14775,22 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13843,6 +14811,26 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13858,6 +14846,21 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13869,6 +14872,17 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13884,6 +14898,21 @@ snapshots:
       '@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@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@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -13904,12 +14933,38 @@ snapshots:
       '@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@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@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)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.28)(react@19.2.6)':
+    dependencies:
+      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)':
     dependencies:
       '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.28)(react@18.3.1)
@@ -13918,6 +14973,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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@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)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
@@ -13925,6 +14988,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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@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)':
     dependencies:
       '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.28)(react@18.3.1)
@@ -13932,6 +15002,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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@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)':
     dependencies:
       react: 18.3.1
@@ -13939,18 +15016,37 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@18.3.28)(react@19.2.6)':
+    dependencies:
+      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)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.28)(react@19.2.6)':
+    dependencies:
+      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)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@radix-ui/react-use-previous@1.1.1(@types/react@18.3.28)(react@19.2.6)':
+    dependencies:
+      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)':
     dependencies:
       '@radix-ui/rect': 1.1.1
@@ -13958,6 +15054,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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: 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)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.28)(react@18.3.1)
@@ -13965,6 +15068,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@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@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)':
     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)
@@ -13974,6 +15084,15 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@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@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@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)':
@@ -13984,6 +15103,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -13992,12 +15119,26 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     dependencies:
       pdfjs-dist: 3.11.174
       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)':
+    dependencies:
+      pdfjs-dist: 3.11.174
+      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)':
     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)
@@ -14010,6 +15151,18 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14018,6 +15171,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14026,6 +15187,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14034,6 +15203,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14042,6 +15219,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14050,6 +15235,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14058,6 +15251,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14066,6 +15267,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14074,6 +15283,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14082,6 +15299,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14090,6 +15315,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14098,6 +15331,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14106,6 +15347,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14126,6 +15375,26 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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)':
     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)
@@ -14134,6 +15403,14 @@ snapshots:
     transitivePeerDependencies:
       - pdfjs-dist
 
+  '@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@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/fns@3.1.3': {}
 
   '@react-pdf/font@4.0.8':
@@ -14182,6 +15459,12 @@ snapshots:
       react: 18.3.1
       scheduler: 0.25.0-rc-603e6108-20241029
 
+  '@react-pdf/reconciler@2.0.0(react@19.2.6)':
+    dependencies:
+      object-assign: 4.1.1
+      react: 19.2.6
+      scheduler: 0.25.0-rc-603e6108-20241029
+
   '@react-pdf/render@4.5.1':
     dependencies:
       '@babel/runtime': 7.29.2
@@ -14212,6 +15495,23 @@ snapshots:
       queue: 6.0.2
       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
+      '@react-pdf/font': 4.0.8
+      '@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@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: 19.2.6
+
   '@react-pdf/stylesheet@6.2.1':
     dependencies:
       '@react-pdf/fns': 3.1.3
@@ -14250,6 +15550,18 @@ snapshots:
       react: 18.3.1
       react-redux: 9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.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
+      immer: 11.1.8
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+    optionalDependencies:
+      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': {}
 
   '@rolldown/pluginutils@1.0.0-beta.27': {}
@@ -14366,6 +15678,11 @@ snapshots:
       '@tabler/icons': 3.44.0
       react: 18.3.1
 
+  '@tabler/icons-react@3.44.0(react@19.2.6)':
+    dependencies:
+      '@tabler/icons': 3.44.0
+      react: 19.2.6
+
   '@tabler/icons@3.44.0': {}
 
   '@tailwindcss/cli@4.3.0':
@@ -14456,17 +15773,34 @@ snapshots:
       '@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@19.2.6)
+      react: 19.2.6
+
   '@tanstack/react-query@5.100.10(react@18.3.1)':
     dependencies:
       '@tanstack/query-core': 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: 19.2.6
+
   '@tanstack/react-table@8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@tanstack/table-core': 8.21.3
       react: 18.3.1
       react-dom: 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: 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)':
@@ -14477,6 +15811,14 @@ snapshots:
     optionalDependencies:
       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: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      tinymce: 7.9.2
+
   '@tiptap/core@3.23.1(@tiptap/pm@3.23.1)':
     dependencies:
       '@tiptap/pm': 3.23.1
@@ -14641,6 +15983,23 @@ snapshots:
     transitivePeerDependencies:
       - '@floating-ui/dom'
 
+  '@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
+      '@types/react': 18.3.28
+      '@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: 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)
+    transitivePeerDependencies:
+      - '@floating-ui/dom'
+
   '@tiptap/starter-kit@3.23.1':
     dependencies:
       '@tiptap/core': 3.23.1(@tiptap/pm@3.23.1)
@@ -14892,50 +16251,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.2.2(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)
-      '@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.2.2(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)
+      '@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))
@@ -14943,18 +16302,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
@@ -14962,39 +16321,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.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-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:
@@ -15897,6 +17256,15 @@ snapshots:
       react: 18.3.1
       react-dom: 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: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   '@zag-js/rect-utils@1.40.0': {}
 
   '@zag-js/remove-scroll@1.40.0':
@@ -17222,6 +18590,18 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
+  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@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'
+
   co@4.6.0: {}
 
   code-block-writer@13.0.3: {}
@@ -18882,6 +20262,16 @@ snapshots:
       react: 18.3.1
       react-dom: 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: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   fresh@0.5.2: {}
 
   fresh@2.0.0: {}
@@ -20643,10 +22033,18 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  lucide-react@0.513.0(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+
   lucide-react@1.14.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
+  lucide-react@1.14.0(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -20951,6 +22349,17 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  mui-ethiopian-datepicker@0.3.2(paybi2fdkyh35y7nbr3nki3zze):
+    dependencies:
+      '@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: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   multer@2.1.1:
     dependencies:
       append-field: 1.0.0
@@ -21052,6 +22461,11 @@ snapshots:
       react: 18.3.1
       react-dom: 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: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   next-tick@1.1.0: {}
 
   no-case@3.0.4:
@@ -21910,6 +23324,69 @@ snapshots:
       '@types/react': 18.3.28
       '@types/react-dom': 18.3.7(@types/react@18.3.28)
 
+  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@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)
+
   raf@3.4.1:
     dependencies:
       performance-now: 2.1.0
@@ -21954,6 +23431,15 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  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: 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):
     dependencies:
       '@floating-ui/react': 0.27.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -21962,6 +23448,14 @@ snapshots:
       react: 18.3.1
       react-dom: 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@19.2.6(react@19.2.6))(react@19.2.6)
+      clsx: 2.1.1
+      date-fns: 3.6.0
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   react-day-picker@9.14.0(react@18.3.1):
     dependencies:
       '@date-fns/tz': 1.4.1
@@ -21970,12 +23464,25 @@ snapshots:
       date-fns-jalali: 4.1.0-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: 19.2.6
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-dom@19.2.6(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      scheduler: 0.27.0
+
   react-dropzone@14.4.1(react@18.3.1):
     dependencies:
       attr-accept: 2.2.5
@@ -21983,6 +23490,13 @@ snapshots:
       prop-types: 15.8.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: 19.2.6
+
   react-floater@0.7.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       deepmerge: 4.3.1
@@ -21993,10 +23507,24 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       tree-changes: 0.9.3
 
+  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: 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):
     dependencies:
       react: 18.3.1
 
+  react-hook-form@7.75.0(react@19.2.6):
+    dependencies:
+      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):
     dependencies:
       '@babel/runtime': 7.29.2
@@ -22007,25 +23535,54 @@ snapshots:
       react-dom: 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: 19.2.6
+    optionalDependencies:
+      react-dom: 19.2.6(react@19.2.6)
+      typescript: 5.9.3
+
   react-icons@5.6.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
+  react-icons@5.6.0(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+
   react-image-crop@11.0.10(react@18.3.1):
     dependencies:
       react: 18.3.1
 
+  react-image-crop@11.0.10(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+
   react-innertext@1.1.5(@types/react@18.3.28)(react@18.3.1):
     dependencies:
       '@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: 19.2.6
+
   react-intersection-observer@9.16.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
     optionalDependencies:
       react-dom: 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: 19.2.6
+    optionalDependencies:
+      react-dom: 19.2.6(react@19.2.6)
+
   react-is@16.13.1: {}
 
   react-is@18.3.1: {}
@@ -22050,11 +23607,34 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  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: 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
+      tree-changes: 0.11.3
+      type-fest: 4.41.0
+    transitivePeerDependencies:
+      - '@types/react'
+
   react-number-format@5.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
       react-dom: 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: 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):
     dependencies:
       '@react-pdf/renderer': 4.5.1(react@18.3.1)
@@ -22062,6 +23642,13 @@ snapshots:
       node-html-parser: 6.1.13
       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@19.2.6)
+      css-tree: 1.1.3
+      node-html-parser: 6.1.13
+      react: 19.2.6
+
   react-pdf-viewer@0.1.0:
     dependencies:
       pdfjs-dist: 3.11.174
@@ -22093,6 +23680,24 @@ snapshots:
       - encoding
       - supports-color
 
+  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
+      make-cancellable-promise: 2.0.0
+      make-event-props: 2.0.0
+      merge-refs: 2.0.0(@types/react@18.3.28)
+      pdfjs-dist: 3.11.174
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      tiny-invariant: 1.3.3
+      warning: 4.0.3
+    optionalDependencies:
+      '@types/react': 18.3.28
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   react-redux@9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1):
     dependencies:
       '@types/use-sync-external-store': 0.0.6
@@ -22102,6 +23707,15 @@ snapshots:
       '@types/react': 18.3.28
       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: 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):
@@ -22112,6 +23726,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  react-remove-scroll-bar@2.3.8(@types/react@18.3.28)(react@19.2.6):
+    dependencies:
+      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):
     dependencies:
       react: 18.3.1
@@ -22123,11 +23745,27 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  react-remove-scroll@2.7.2(@types/react@18.3.28)(react@19.2.6):
+    dependencies:
+      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@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):
     dependencies:
       react: 18.3.1
       react-dom: 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: 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):
     dependencies:
       '@remix-run/router': 1.23.2
@@ -22135,6 +23773,13 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       react-router: 6.30.3(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: 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):
     dependencies:
       react: 18.3.1
@@ -22146,6 +23791,11 @@ snapshots:
       '@remix-run/router': 1.23.2
       react: 18.3.1
 
+  react-router@6.30.3(react@19.2.6):
+    dependencies:
+      '@remix-run/router': 1.23.2
+      react: 19.2.6
+
   react-router@7.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       cookie: 1.1.1
@@ -22167,6 +23817,19 @@ snapshots:
       '@types/prop-types': 15.7.15
       '@types/react': 18.3.28
 
+  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: 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):
     dependencies:
       get-nonce: 1.0.1
@@ -22175,6 +23838,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  react-style-singleton@2.2.3(@types/react@18.3.28)(react@19.2.6):
+    dependencies:
+      get-nonce: 1.0.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):
     dependencies:
       '@babel/runtime': 7.29.2
@@ -22184,6 +23855,15 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  react-textarea-autosize@8.5.9(@types/react@18.3.28)(react@19.2.6):
+    dependencies:
+      '@babel/runtime': 7.29.2
+      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):
     dependencies:
       '@babel/runtime': 7.29.2
@@ -22193,10 +23873,21 @@ snapshots:
       react: 18.3.1
       react-dom: 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: 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:
       pify: 2.3.0
@@ -22306,6 +23997,26 @@ snapshots:
       - '@types/react'
       - redux
 
+  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@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: 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@19.2.6)(redux@5.0.1)
+      reselect: 5.1.1
+      tiny-invariant: 1.3.3
+      use-sync-external-store: 1.6.0(react@19.2.6)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+
   redent@1.0.0:
     dependencies:
       indent-string: 2.1.0
@@ -22582,6 +24293,8 @@ snapshots:
 
   scheduler@0.25.0-rc-603e6108-20241029: {}
 
+  scheduler@0.27.0: {}
+
   schema-utils@3.3.0:
     dependencies:
       '@types/json-schema': 7.0.15
@@ -22932,6 +24645,11 @@ snapshots:
       react: 18.3.1
       react-dom: 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: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   source-list-map@2.0.1: {}
 
   source-map-js@1.2.1: {}
@@ -23870,18 +25588,37 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  use-callback-ref@1.3.3(@types/react@18.3.28)(react@19.2.6):
+    dependencies:
+      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):
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.28
 
+  use-composed-ref@1.4.0(@types/react@18.3.28)(react@19.2.6):
+    dependencies:
+      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):
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.28
 
+  use-isomorphic-layout-effect@1.2.1(@types/react@18.3.28)(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 18.3.28
+
   use-latest@1.3.0(@types/react@18.3.28)(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -23889,6 +25626,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  use-latest@1.3.0(@types/react@18.3.28)(react@19.2.6):
+    dependencies:
+      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):
     dependencies:
       detect-node-es: 1.1.0
@@ -23897,10 +25641,22 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  use-sidecar@1.1.3(@types/react@18.3.28)(react@19.2.6):
+    dependencies:
+      detect-node-es: 1.1.0
+      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):
     dependencies:
       react: 18.3.1
 
+  use-sync-external-store@1.6.0(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+
   use@3.1.1: {}
 
   util-deprecate@1.0.2: {}
@@ -23961,6 +25717,15 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
+  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@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'
+
   verror@1.10.0:
     dependencies:
       assert-plus: 1.0.0
@@ -24553,3 +26318,10 @@ snapshots:
       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: 19.2.6
+      use-sync-external-store: 1.6.0(react@19.2.6)

From 0440206c069ebc457f1f06b030a621462fd7f964 Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Wed, 20 May 2026 13:49:17 +0300
Subject: [PATCH 4/5] chore: add dropdown and also updated tables to use
 dropdown instead

---
 .../src/pages/admin/DropdownSettingsPage.tsx  |  91 ++++---
 .../portal/src/pages/billing/BillingPage.tsx  | 107 +++++---
 .../src/pages/bookings/BookingsPage.tsx       | 109 +++++---
 .../pages/consignments/ConsignmentsPage.tsx   | 126 +++++----
 .../src/pages/customers/CustomersPage.tsx     |  96 ++++---
 .../src/pages/documents/DocumentsPage.tsx     | 161 +++++++----
 .../src/pages/tracking/TrackingPage.tsx       | 138 ++++++----
 .../portal/src/pages/trains/TrainsPage.tsx    | 100 ++++---
 .../src/components/dropdown-menu.tsx          | 255 ++++++++++++++++++
 packages/ui-common/src/index.ts               |   2 +-
 10 files changed, 846 insertions(+), 339 deletions(-)
 create mode 100644 packages/ui-common/src/components/dropdown-menu.tsx

diff --git a/apps/edr-freight-web/portal/src/pages/admin/DropdownSettingsPage.tsx b/apps/edr-freight-web/portal/src/pages/admin/DropdownSettingsPage.tsx
index 93d466006..44cfaa8b0 100644
--- a/apps/edr-freight-web/portal/src/pages/admin/DropdownSettingsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/admin/DropdownSettingsPage.tsx
@@ -2,8 +2,10 @@ import { useMemo, useState } from "react";
 import {
   Boxes,
   CheckCircle2,
+  Eye,
   Filter,
   ListOrdered,
+  MoreHorizontal,
   Pencil,
   Plus,
   Search,
@@ -30,6 +32,11 @@ import {
   CardDescription,
   CardContent,
   Input,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
 } from "@edr/ui-common";
 
 export default function DropdownSettingsPage() {
@@ -121,12 +128,8 @@ export default function DropdownSettingsPage() {
             ) : (
               <BehaviorChip label="Single" muted />
             )}
-            {s.meta?.searchable ? (
-              <BehaviorChip label="Searchable" />
-            ) : null}
-            {s.meta?.clearable ? (
-              <BehaviorChip label="Clearable" />
-            ) : null}
+            {s.meta?.searchable ? <BehaviorChip label="Searchable" /> : null}
+            {s.meta?.clearable ? <BehaviorChip label="Clearable" /> : null}
           </div>
         );
       },
@@ -157,32 +160,53 @@ export default function DropdownSettingsPage() {
     },
     {
       id: "actions",
-      header: () => <div className="text-right">Actions</div>,
+      size: 40,
       cell: ({ row }) => {
         const setting = row.original;
         return (
-          <div className="flex justify-end gap-2">
-            <ManageDropdownOptionsDialog setting={setting}>
-              <Button variant="outline" size="sm">
-                <CheckCircle2 />
-                Options
-              </Button>
-            </ManageDropdownOptionsDialog>
-
-            <EditDropdownSettingDialog mode="edit" setting={setting}>
-              <Button variant="outline" size="icon">
-                <Pencil />
-              </Button>
-            </EditDropdownSettingDialog>
-
-            <DeleteDropdownSettingDialog
-              settingLabel={setting.label}
-              settingCode={setting.code}
-            >
-              <Button variant="outline" size="icon">
-                <Trash2 />
-              </Button>
-            </DeleteDropdownSettingDialog>
+          <div
+            className="flex justify-end"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                  <MoreHorizontal />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>
+                  <Eye />
+                  View
+                </DropdownMenuItem>
+                <ManageDropdownOptionsDialog setting={setting}>
+                  <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()}>
+                    <CheckCircle2 />
+                    Options
+                  </DropdownMenuItem>
+                </ManageDropdownOptionsDialog>
+                <DropdownMenuSeparator />
+                <EditDropdownSettingDialog mode="edit" setting={setting}>
+                  <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()}>
+                    <Pencil />
+                    Edit
+                  </DropdownMenuItem>
+                </EditDropdownSettingDialog>
+                <DropdownMenuSeparator />
+                <DeleteDropdownSettingDialog
+                  settingLabel={setting.label}
+                  settingCode={setting.code}
+                >
+                  <DropdownMenuItem
+                    onSelect={(e: Event) => e.preventDefault()}
+                    variant="destructive"
+                  >
+                    <Trash2 />
+                    Delete
+                  </DropdownMenuItem>
+                </DeleteDropdownSettingDialog>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         );
       },
@@ -212,13 +236,16 @@ export default function DropdownSettingsPage() {
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
               <Input
                 type="search"
                 value={query}
                 onChange={(e) => {
                   setQuery(e.target.value);
-                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                  setPagination({
+                    pageIndex: 0,
+                    pageSize: pagination.pageSize,
+                  });
                 }}
                 placeholder="Search by code, label, description..."
                 className="pl-8!"
@@ -312,7 +339,7 @@ export default function DropdownSettingsPage() {
               columns={columns}
               data={paginatedData}
               status="success"
-              onRowClick={() => {}}
+              onRowClick={() => { }}
               pagination={{
                 pageIndex: pagination.pageIndex,
                 pageSize: pagination.pageSize,
diff --git a/apps/edr-freight-web/portal/src/pages/billing/BillingPage.tsx b/apps/edr-freight-web/portal/src/pages/billing/BillingPage.tsx
index 49b314dd4..8b7ac4557 100644
--- a/apps/edr-freight-web/portal/src/pages/billing/BillingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/billing/BillingPage.tsx
@@ -5,6 +5,7 @@ import {
   DollarSign,
   Download,
   Filter,
+  MoreHorizontal,
   Pencil,
   Plus,
   Receipt,
@@ -15,11 +16,7 @@ import {
 import Breadcrumbs from "@/components/Breadcrumbs";
 import NewInvoicePage from "./NewInvoicePage";
 import DeleteInvoiceDialog from "./DeleteInvoiceDialog";
-import {
-  formatCurrency,
-  invoices,
-  type InvoiceStatus,
-} from "./invoices.mock";
+import { formatCurrency, invoices, type InvoiceStatus } from "./invoices.mock";
 import {
   DataTable,
   DataTableFooter,
@@ -32,6 +29,11 @@ import {
   CardDescription,
   CardContent,
   Input,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
 } from "@edr/ui-common";
 
 type FilterValue = "All" | InvoiceStatus;
@@ -83,7 +85,9 @@ export default function BillingPage() {
         inv.currency === "USD",
     )
     .reduce((sum, inv) => sum + inv.amount, 0);
-  const overdueCount = invoices.filter((inv) => inv.status === "Overdue").length;
+  const overdueCount = invoices.filter(
+    (inv) => inv.status === "Overdue",
+  ).length;
 
   const columns: ColumnDef<(typeof invoices)[number]>[] = [
     {
@@ -135,39 +139,56 @@ export default function BillingPage() {
     },
     {
       id: "actions",
-      header: () => <div className="text-right">Actions</div>,
+      size: 40,
       cell: ({ row }) => {
         const invoice = row.original;
         return (
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" size="icon" aria-label="Download invoice">
-              <Download />
-            </Button>
-
-            <NewInvoicePage
-              mode="edit"
-              invoice={{
-                number: invoice.number,
-                customerId: invoice.customerId,
-                bookingReference: invoice.bookingReference,
-                amount: invoice.amount,
-                currency: invoice.currency,
-                status: invoice.status,
-                issueDate: invoice.issueDate,
-                dueDate: invoice.dueDate,
-                notes: invoice.notes,
-              }}
-            >
-              <Button variant="outline" size="icon">
-                <Pencil />
-              </Button>
-            </NewInvoicePage>
-
-            <DeleteInvoiceDialog invoiceNumber={invoice.number}>
-              <Button variant="outline" size="icon">
-                <Trash2 />
-              </Button>
-            </DeleteInvoiceDialog>
+          <div
+            className="flex justify-end"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                  <MoreHorizontal />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>
+                  <Download />
+                  Download
+                </DropdownMenuItem>
+                <NewInvoicePage
+                  mode="edit"
+                  invoice={{
+                    number: invoice.number,
+                    customerId: invoice.customerId,
+                    bookingReference: invoice.bookingReference,
+                    amount: invoice.amount,
+                    currency: invoice.currency,
+                    status: invoice.status,
+                    issueDate: invoice.issueDate,
+                    dueDate: invoice.dueDate,
+                    notes: invoice.notes,
+                  }}
+                >
+                  <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()}>
+                    <Pencil />
+                    Edit
+                  </DropdownMenuItem>
+                </NewInvoicePage>
+                <DropdownMenuSeparator />
+                <DeleteInvoiceDialog invoiceNumber={invoice.number}>
+                  <DropdownMenuItem
+                    onSelect={(e: Event) => e.preventDefault()}
+                    variant="destructive"
+                  >
+                    <Trash2 />
+                    Void
+                  </DropdownMenuItem>
+                </DeleteInvoiceDialog>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         );
       },
@@ -191,13 +212,16 @@ export default function BillingPage() {
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
               <Input
                 type="search"
                 value={query}
                 onChange={(e) => {
                   setQuery(e.target.value);
-                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                  setPagination({
+                    pageIndex: 0,
+                    pageSize: pagination.pageSize,
+                  });
                 }}
                 placeholder="Search invoices..."
                 className="pl-8!"
@@ -271,7 +295,10 @@ export default function BillingPage() {
                   type="button"
                   onClick={() => {
                     setFilter(f);
-                    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                    setPagination({
+                      pageIndex: 0,
+                      pageSize: pagination.pageSize,
+                    });
                   }}
                   className={
                     isActive
@@ -315,7 +342,7 @@ export default function BillingPage() {
               columns={columns}
               data={paginatedData}
               status="success"
-              onRowClick={() => {}}
+              onRowClick={() => { }}
               pagination={{
                 pageIndex: pagination.pageIndex,
                 pageSize: pagination.pageSize,
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 3febdeff5..e755c174b 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingsPage.tsx
@@ -1,10 +1,11 @@
 import { useMemo } from "react";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import {
   ArrowRight,
   Clock,
   Eye,
   Filter,
+  MoreHorizontal,
   Package,
   Pencil,
   Plus,
@@ -29,9 +30,15 @@ import {
   CardDescription,
   CardContent,
   Input,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
 } from "@edr/ui-common";
 
 export default function BookingsPage() {
+  const navigate = useNavigate();
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
 
   const total = bookings.length;
@@ -39,10 +46,7 @@ export default function BookingsPage() {
   const start = pagination.pageIndex * pagination.pageSize;
   const end = Math.min(start + pagination.pageSize, total);
 
-  const paginatedData = useMemo(
-    () => bookings.slice(start, end),
-    [start, end],
-  );
+  const paginatedData = useMemo(() => bookings.slice(start, end), [start, end]);
 
   const columns: ColumnDef<(typeof bookings)[number]>[] = [
     {
@@ -100,45 +104,62 @@ export default function BookingsPage() {
     },
     {
       id: "actions",
-      header: () => <div className="text-right">Actions</div>,
+      size: 40,
       cell: ({ row }) => {
         const booking = row.original;
         return (
-          <div className="flex justify-end gap-2">
-            <Link to={`/bookings/${booking.id}`}>
-              <Button variant="outline" size="icon">
-                <Eye />
-              </Button>
-            </Link>
-
-            <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 variant="outline" size="icon">
-                <Pencil />
-              </Button>
-            </NewBookingPage>
-
-            <DeleteBookingDialog bookingReference={booking.reference}>
-              <Button variant="outline" size="icon">
-                <Trash2 />
-              </Button>
-            </DeleteBookingDialog>
+          <div
+            className="flex justify-end"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                  <MoreHorizontal />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  onClick={() => navigate(`/bookings/${booking.id}`)}
+                >
+                  <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
+                    onSelect={(e: Event) => e.preventDefault()}
+                    variant="destructive"
+                  >
+                    <Trash2 />
+                    Delete
+                  </DropdownMenuItem>
+                </DeleteBookingDialog>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         );
       },
@@ -162,7 +183,7 @@ export default function BookingsPage() {
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
               <Input
                 type="search"
                 placeholder="Search bookings..."
@@ -243,7 +264,9 @@ export default function BookingsPage() {
               columns={columns}
               data={paginatedData}
               status="success"
-              onRowClick={() => {}}
+              onRowClick={(row) =>
+                navigate(`/bookings/${(row as (typeof bookings)[number]).id}`)
+              }
               pagination={{
                 pageIndex: pagination.pageIndex,
                 pageSize: pagination.pageSize,
diff --git a/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentsPage.tsx b/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentsPage.tsx
index 93376c1e3..33a57a571 100644
--- a/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/consignments/ConsignmentsPage.tsx
@@ -1,11 +1,12 @@
 import { useMemo, useState } from "react";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import {
   AlertTriangle,
   ArrowRight,
   CheckCircle2,
   Eye,
   Filter,
+  MoreHorizontal,
   Package,
   Pencil,
   Plus,
@@ -17,10 +18,7 @@ import {
 import Breadcrumbs from "@/components/Breadcrumbs";
 import NewConsignmentPage from "./NewConsignmentPage";
 import DeleteConsignmentDialog from "./DeleteConsignmentDialog";
-import {
-  consignments,
-  type ConsignmentStatus,
-} from "./consignments.mock";
+import { consignments, type ConsignmentStatus } from "./consignments.mock";
 import {
   DataTable,
   DataTableFooter,
@@ -33,6 +31,11 @@ import {
   CardDescription,
   CardContent,
   Input,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
 } from "@edr/ui-common";
 
 type FilterValue = "All" | ConsignmentStatus;
@@ -47,6 +50,7 @@ const FILTERS: FilterValue[] = [
 ];
 
 export default function ConsignmentsPage() {
+  const navigate = useNavigate();
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [filter, setFilter] = useState<FilterValue>("All");
   const [query, setQuery] = useState("");
@@ -143,7 +147,8 @@ export default function ConsignmentsPage() {
           <div className="text-sm text-slate-700">
             <p>{c.cargoType}</p>
             <p className="text-xs text-slate-500">
-              {c.pieces} pcs · {c.weightKg.toLocaleString()} kg · {c.volumeM3} m³
+              {c.pieces} pcs · {c.weightKg.toLocaleString()} kg · {c.volumeM3}{" "}
+              m³
             </p>
           </div>
         );
@@ -156,46 +161,63 @@ export default function ConsignmentsPage() {
     },
     {
       id: "actions",
-      header: () => <div className="text-right">Actions</div>,
+      size: 40,
       cell: ({ row }) => {
         const consignment = row.original;
         return (
-          <div className="flex justify-end gap-2">
-            <Link to={`/consignments/${consignment.id}`}>
-              <Button variant="outline" size="icon">
-                <Eye />
-              </Button>
-            </Link>
-
-            <NewConsignmentPage
-              mode="edit"
-              consignment={{
-                trackingNumber: consignment.trackingNumber,
-                bookingId: consignment.bookingId,
-                bookingReference: consignment.bookingReference,
-                cargoType: consignment.cargoType,
-                description: consignment.description,
-                weightKg: consignment.weightKg,
-                volumeM3: consignment.volumeM3,
-                pieces: consignment.pieces,
-                hazardous: consignment.hazardous,
-                specialHandling: consignment.specialHandling,
-                status: consignment.status,
-                estimatedDelivery: consignment.estimatedDelivery,
-              }}
-            >
-              <Button variant="outline" size="icon">
-                <Pencil />
-              </Button>
-            </NewConsignmentPage>
-
-            <DeleteConsignmentDialog
-              trackingNumber={consignment.trackingNumber}
-            >
-              <Button variant="outline" size="icon">
-                <Trash2 />
-              </Button>
-            </DeleteConsignmentDialog>
+          <div
+            className="flex justify-end"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                  <MoreHorizontal />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  onClick={() => navigate(`/consignments/${consignment.id}`)}
+                >
+                  <Eye />
+                  View
+                </DropdownMenuItem>
+                <NewConsignmentPage
+                  mode="edit"
+                  consignment={{
+                    trackingNumber: consignment.trackingNumber,
+                    bookingId: consignment.bookingId,
+                    bookingReference: consignment.bookingReference,
+                    cargoType: consignment.cargoType,
+                    description: consignment.description,
+                    weightKg: consignment.weightKg,
+                    volumeM3: consignment.volumeM3,
+                    pieces: consignment.pieces,
+                    hazardous: consignment.hazardous,
+                    specialHandling: consignment.specialHandling,
+                    status: consignment.status,
+                    estimatedDelivery: consignment.estimatedDelivery,
+                  }}
+                >
+                  <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()}>
+                    <Pencil />
+                    Edit
+                  </DropdownMenuItem>
+                </NewConsignmentPage>
+                <DropdownMenuSeparator />
+                <DeleteConsignmentDialog
+                  trackingNumber={consignment.trackingNumber}
+                >
+                  <DropdownMenuItem
+                    onSelect={(e: Event) => e.preventDefault()}
+                    variant="destructive"
+                  >
+                    <Trash2 />
+                    Delete
+                  </DropdownMenuItem>
+                </DeleteConsignmentDialog>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         );
       },
@@ -219,13 +241,16 @@ export default function ConsignmentsPage() {
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
               <Input
                 type="search"
                 value={query}
                 onChange={(e) => {
                   setQuery(e.target.value);
-                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                  setPagination({
+                    pageIndex: 0,
+                    pageSize: pagination.pageSize,
+                  });
                 }}
                 placeholder="Search consignments..."
                 className="pl-8!"
@@ -313,7 +338,10 @@ export default function ConsignmentsPage() {
                   type="button"
                   onClick={() => {
                     setFilter(f);
-                    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                    setPagination({
+                      pageIndex: 0,
+                      pageSize: pagination.pageSize,
+                    });
                   }}
                   className={
                     isActive
@@ -357,7 +385,11 @@ export default function ConsignmentsPage() {
               columns={columns}
               data={paginatedData}
               status="success"
-              onRowClick={() => {}}
+              onRowClick={(row) =>
+                navigate(
+                  `/consignments/${(row as (typeof consignments)[number]).id}`,
+                )
+              }
               pagination={{
                 pageIndex: pagination.pageIndex,
                 pageSize: pagination.pageSize,
diff --git a/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx b/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx
index e0e1e807a..3a7714abf 100644
--- a/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx
@@ -1,9 +1,10 @@
 import { useMemo } from "react";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import {
   Clock3,
   Eye,
   Filter,
+  MoreHorizontal,
   Pencil,
   Plus,
   Search,
@@ -33,9 +34,15 @@ import {
   CardDescription,
   CardContent,
   Input,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
 } from "@edr/ui-common";
 
 export default function CustomerPage() {
+  const navigate = useNavigate();
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
 
   const total = customers.length;
@@ -85,42 +92,59 @@ export default function CustomerPage() {
     },
     {
       id: "actions",
-      header: () => <div className="text-right">Actions</div>,
+      size: 40,
       cell: ({ row }) => {
         const customer = row.original;
         return (
-          <div className="flex justify-end gap-2">
-            <Link to={`/customers/${customer.id}`}>
-              <Button size="icon" variant="outline">
-                <Eye />
-              </Button>
-            </Link>
-
-            <NewCustomerPage
-              mode="edit"
-              customer={{
-                companyName: customer.company,
-                customerType: customer.customerType,
-                contactPerson: customer.name,
-                email: customer.email,
-                phone: customer.phone,
-                tinNumber: customer.tinNumber,
-                city: customer.city,
-                country: customer.country,
-                address: customer.address,
-                notes: customer.notes,
-              }}
-            >
-              <Button size="icon" variant="outline">
-                <Pencil />
-              </Button>
-            </NewCustomerPage>
-
-            <DeleteCustomerDialog customerName={customer.name}>
-              <Button size="icon" type="button" variant="destructive">
-                <Trash2 />
-              </Button>
-            </DeleteCustomerDialog>
+          <div
+            className="flex justify-end"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                  <MoreHorizontal />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  onClick={() => navigate(`/customers/${customer.id}`)}
+                >
+                  <Eye />
+                  View
+                </DropdownMenuItem>
+                <NewCustomerPage
+                  mode="edit"
+                  customer={{
+                    companyName: customer.company,
+                    customerType: customer.customerType,
+                    contactPerson: customer.name,
+                    email: customer.email,
+                    phone: customer.phone,
+                    tinNumber: customer.tinNumber,
+                    city: customer.city,
+                    country: customer.country,
+                    address: customer.address,
+                    notes: customer.notes,
+                  }}
+                >
+                  <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()}>
+                    <Pencil />
+                    Edit
+                  </DropdownMenuItem>
+                </NewCustomerPage>
+                <DropdownMenuSeparator />
+                <DeleteCustomerDialog customerName={customer.name}>
+                  <DropdownMenuItem
+                    onSelect={(e: Event) => e.preventDefault()}
+                    variant="destructive"
+                  >
+                    <Trash2 />
+                    Delete
+                  </DropdownMenuItem>
+                </DeleteCustomerDialog>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         );
       },
@@ -201,7 +225,7 @@ export default function CustomerPage() {
               columns={columns}
               data={paginatedData}
               status="success"
-              onRowClick={() => { }}
+              onRowClick={(row) => navigate(`/customers/${row.id}`)}
               pagination={{
                 pageIndex: pagination.pageIndex,
                 pageSize: pagination.pageSize,
@@ -232,7 +256,7 @@ function StatCard({
   icon: React.ReactNode;
 }) {
   return (
-    <Card className="transition hover:shadow-md hover:ring-1 hover:ring-[#33578D]/20">
+    <Card>
       <CardContent className="flex items-center justify-between">
         <div>
           <p className="text-sm text-slate-500">{title}</p>
diff --git a/apps/edr-freight-web/portal/src/pages/documents/DocumentsPage.tsx b/apps/edr-freight-web/portal/src/pages/documents/DocumentsPage.tsx
index bd7976499..25c1b1dbe 100644
--- a/apps/edr-freight-web/portal/src/pages/documents/DocumentsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/documents/DocumentsPage.tsx
@@ -12,6 +12,7 @@ import {
   HardDrive,
   LayoutGrid,
   List,
+  MoreHorizontal,
   Pencil,
   Plus,
   Search,
@@ -40,6 +41,11 @@ import {
   CardDescription,
   CardContent,
   Input,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
 } from "@edr/ui-common";
 
 type FilterValue = "All" | DocumentStatus;
@@ -145,37 +151,58 @@ export default function DocumentsPage() {
     },
     {
       id: "actions",
-      header: () => <div className="text-right">Actions</div>,
+      size: 40,
       cell: ({ row }) => {
         const doc = row.original;
         return (
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" size="icon" aria-label="Preview">
-              <Eye />
-            </Button>
-            <Button variant="outline" size="icon" aria-label="Download">
-              <Download />
-            </Button>
-            <NewDocumentPage
-              mode="edit"
-              document={{
-                name: doc.name,
-                type: doc.type,
-                status: doc.status,
-                linkedType: doc.linkedType,
-                linkedReference: doc.linkedReference,
-                notes: doc.notes,
-              }}
-            >
-              <Button variant="outline" size="icon">
-                <Pencil />
-              </Button>
-            </NewDocumentPage>
-            <DeleteDocumentDialog documentName={doc.name}>
-              <Button variant="outline" size="icon">
-                <Trash2 />
-              </Button>
-            </DeleteDocumentDialog>
+          <div
+            className="flex justify-end"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                  <MoreHorizontal />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>
+                  <Eye />
+                  Preview
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Download />
+                  Download
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <NewDocumentPage
+                  mode="edit"
+                  document={{
+                    name: doc.name,
+                    type: doc.type,
+                    status: doc.status,
+                    linkedType: doc.linkedType,
+                    linkedReference: doc.linkedReference,
+                    notes: doc.notes,
+                  }}
+                >
+                  <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()}>
+                    <Pencil />
+                    Edit
+                  </DropdownMenuItem>
+                </NewDocumentPage>
+                <DropdownMenuSeparator />
+                <DeleteDocumentDialog documentName={doc.name}>
+                  <DropdownMenuItem
+                    onSelect={(e: Event) => e.preventDefault()}
+                    variant="destructive"
+                  >
+                    <Trash2 />
+                    Delete
+                  </DropdownMenuItem>
+                </DeleteDocumentDialog>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         );
       },
@@ -200,7 +227,7 @@ export default function DocumentsPage() {
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
               <Input
                 type="search"
                 value={query}
@@ -466,33 +493,55 @@ function DocumentCard({ doc }: { doc: DocumentRecord }) {
 
         <p className="text-xs text-slate-500">By {doc.uploadedBy}</p>
 
-        <div className="flex items-center justify-end gap-2 border-t pt-3">
-          <Button variant="outline" size="icon" aria-label="Preview">
-            <Eye />
-          </Button>
-          <Button variant="outline" size="icon" aria-label="Download">
-            <Download />
-          </Button>
-          <NewDocumentPage
-            mode="edit"
-            document={{
-              name: doc.name,
-              type: doc.type,
-              status: doc.status,
-              linkedType: doc.linkedType,
-              linkedReference: doc.linkedReference,
-              notes: doc.notes,
-            }}
-          >
-            <Button variant="outline" size="icon">
-              <Pencil />
-            </Button>
-          </NewDocumentPage>
-          <DeleteDocumentDialog documentName={doc.name}>
-            <Button variant="outline" size="icon">
-              <Trash2 />
-            </Button>
-          </DeleteDocumentDialog>
+        <div
+          className="flex items-center justify-end gap-2 border-t pt-3"
+          onClick={(e: React.MouseEvent) => e.stopPropagation()}
+        >
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm">
+                <MoreHorizontal />
+                Actions
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>
+                <Eye />
+                Preview
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Download />
+                Download
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <NewDocumentPage
+                mode="edit"
+                document={{
+                  name: doc.name,
+                  type: doc.type,
+                  status: doc.status,
+                  linkedType: doc.linkedType,
+                  linkedReference: doc.linkedReference,
+                  notes: doc.notes,
+                }}
+              >
+                <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()}>
+                  <Pencil />
+                  Edit
+                </DropdownMenuItem>
+              </NewDocumentPage>
+              <DropdownMenuSeparator />
+              <DeleteDocumentDialog documentName={doc.name}>
+                <DropdownMenuItem
+                  onSelect={(e: Event) => e.preventDefault()}
+                  variant="destructive"
+                >
+                  <Trash2 />
+                  Delete
+                </DropdownMenuItem>
+              </DeleteDocumentDialog>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       </div>
     </Card>
diff --git a/apps/edr-freight-web/portal/src/pages/tracking/TrackingPage.tsx b/apps/edr-freight-web/portal/src/pages/tracking/TrackingPage.tsx
index ce277ff9c..144bc2bef 100644
--- a/apps/edr-freight-web/portal/src/pages/tracking/TrackingPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/tracking/TrackingPage.tsx
@@ -3,9 +3,11 @@ import {
   ArrowRight,
   Building2,
   Clock,
+  Eye,
   LayoutGrid,
   List,
   MapPin,
+  MoreHorizontal,
   Pencil,
   Plus,
   Search,
@@ -31,6 +33,11 @@ import {
   CardDescription,
   CardContent,
   Input,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
 } from "@edr/ui-common";
 
 type FilterValue = "All" | ShipmentStatus;
@@ -77,7 +84,7 @@ export default function TrackingPage() {
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
               <Input
                 type="search"
                 value={query}
@@ -272,32 +279,46 @@ function ShipmentCard({ shipment }: { shipment: Shipment }) {
           </div>
         </div>
 
-        <div className="flex items-center justify-end gap-2 border-t pt-3">
-          <NewShipmentPage
-            mode="edit"
-            shipment={{
-              bookingId: shipment.bookingId,
-              bookingReference: shipment.bookingReference,
-              originStation: shipment.originStation,
-              destinationStation: shipment.destinationStation,
-              mode: shipment.mode,
-              status: shipment.status,
-              currentLocation: shipment.currentLocation,
-              eta: shipment.eta,
-            }}
-          >
-            <Button variant="outline" size="sm">
-              <Pencil />
-              Edit
-            </Button>
-          </NewShipmentPage>
-
-          <DeleteShipmentDialog shipmentReference={shipment.reference}>
-            <Button variant="outline" size="sm">
-              <Trash2 />
-              Remove
-            </Button>
-          </DeleteShipmentDialog>
+        <div className="flex items-center justify-end gap-2 border-t pt-3" onClick={(e: React.MouseEvent) => e.stopPropagation()}>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm">
+                <MoreHorizontal />
+                Actions
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>
+                <Eye />
+                View
+              </DropdownMenuItem>
+              <NewShipmentPage
+                mode="edit"
+                shipment={{
+                  bookingId: shipment.bookingId,
+                  bookingReference: shipment.bookingReference,
+                  originStation: shipment.originStation,
+                  destinationStation: shipment.destinationStation,
+                  mode: shipment.mode,
+                  status: shipment.status,
+                  currentLocation: shipment.currentLocation,
+                  eta: shipment.eta,
+                }}
+              >
+                <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()}>
+                  <Pencil />
+                  Edit
+                </DropdownMenuItem>
+              </NewShipmentPage>
+              <DropdownMenuSeparator />
+              <DeleteShipmentDialog shipmentReference={shipment.reference}>
+                <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()} variant="destructive">
+                  <Trash2 />
+                  Remove
+                </DropdownMenuItem>
+              </DeleteShipmentDialog>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       </div>
     </Card>
@@ -402,30 +423,45 @@ function ShipmentTable({ shipments: rows }: { shipments: Shipment[] }) {
                   </td>
 
                   <td className="px-6 py-4">
-                    <div className="flex justify-end gap-2">
-                      <NewShipmentPage
-                        mode="edit"
-                        shipment={{
-                          bookingId: shipment.bookingId,
-                          bookingReference: shipment.bookingReference,
-                          originStation: shipment.originStation,
-                          destinationStation: shipment.destinationStation,
-                          mode: shipment.mode,
-                          status: shipment.status,
-                          currentLocation: shipment.currentLocation,
-                          eta: shipment.eta,
-                        }}
-                      >
-                        <Button variant="outline" size="icon">
-                          <Pencil />
-                        </Button>
-                      </NewShipmentPage>
-
-                      <DeleteShipmentDialog shipmentReference={shipment.reference}>
-                        <Button variant="outline" size="icon">
-                          <Trash2 />
-                        </Button>
-                      </DeleteShipmentDialog>
+                    <div onClick={(e: React.MouseEvent) => e.stopPropagation()}>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="outline" size="icon">
+                            <MoreHorizontal />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem>
+                            <Eye />
+                            View
+                          </DropdownMenuItem>
+                          <NewShipmentPage
+                            mode="edit"
+                            shipment={{
+                              bookingId: shipment.bookingId,
+                              bookingReference: shipment.bookingReference,
+                              originStation: shipment.originStation,
+                              destinationStation: shipment.destinationStation,
+                              mode: shipment.mode,
+                              status: shipment.status,
+                              currentLocation: shipment.currentLocation,
+                              eta: shipment.eta,
+                            }}
+                          >
+                            <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()}>
+                              <Pencil />
+                              Edit
+                            </DropdownMenuItem>
+                          </NewShipmentPage>
+                          <DropdownMenuSeparator />
+                          <DeleteShipmentDialog shipmentReference={shipment.reference}>
+                            <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()} variant="destructive">
+                              <Trash2 />
+                              Remove
+                            </DropdownMenuItem>
+                          </DeleteShipmentDialog>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
                     </div>
                   </td>
                 </tr>
diff --git a/apps/edr-freight-web/portal/src/pages/trains/TrainsPage.tsx b/apps/edr-freight-web/portal/src/pages/trains/TrainsPage.tsx
index 42447f5b5..bfaa16d36 100644
--- a/apps/edr-freight-web/portal/src/pages/trains/TrainsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/trains/TrainsPage.tsx
@@ -1,7 +1,9 @@
 import { useMemo, useState } from "react";
 import {
+  Eye,
   Filter,
   Gauge,
+  MoreHorizontal,
   Pencil,
   Plus,
   Search,
@@ -26,6 +28,11 @@ import {
   CardDescription,
   CardContent,
   Input,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
 } from "@edr/ui-common";
 
 type FilterValue = "All" | TrainStatus;
@@ -120,38 +127,59 @@ export default function TrainsPage() {
     },
     {
       id: "actions",
-      header: () => <div className="text-right">Actions</div>,
+      size: 40,
       cell: ({ row }) => {
         const train = row.original;
         return (
-          <div className="flex justify-end gap-2">
-            <NewTrainPage
-              mode="edit"
-              train={{
-                code: train.code,
-                name: train.name,
-                type: train.type,
-                status: train.status,
-                capacityTons: train.capacityTons,
-                depot: train.depot,
-                manufacturer: train.manufacturer,
-                mileageKm: train.mileageKm,
-                lastMaintenance: train.lastMaintenance,
-                nextMaintenance: train.nextMaintenance,
-                currentAssignment: train.currentAssignment,
-                yearBuilt: train.yearBuilt,
-              }}
-            >
-              <Button variant="outline" size="icon">
-                <Pencil />
-              </Button>
-            </NewTrainPage>
-
-            <DeleteTrainDialog trainCode={train.code}>
-              <Button variant="outline" size="icon">
-                <Trash2 />
-              </Button>
-            </DeleteTrainDialog>
+          <div
+            className="flex justify-end"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                  <MoreHorizontal />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>
+                  <Eye />
+                  View
+                </DropdownMenuItem>
+                <NewTrainPage
+                  mode="edit"
+                  train={{
+                    code: train.code,
+                    name: train.name,
+                    type: train.type,
+                    status: train.status,
+                    capacityTons: train.capacityTons,
+                    depot: train.depot,
+                    manufacturer: train.manufacturer,
+                    mileageKm: train.mileageKm,
+                    lastMaintenance: train.lastMaintenance,
+                    nextMaintenance: train.nextMaintenance,
+                    currentAssignment: train.currentAssignment,
+                    yearBuilt: train.yearBuilt,
+                  }}
+                >
+                  <DropdownMenuItem onSelect={(e: Event) => e.preventDefault()}>
+                    <Pencil />
+                    Edit
+                  </DropdownMenuItem>
+                </NewTrainPage>
+                <DropdownMenuSeparator />
+                <DeleteTrainDialog trainCode={train.code}>
+                  <DropdownMenuItem
+                    onSelect={(e: Event) => e.preventDefault()}
+                    variant="destructive"
+                  >
+                    <Trash2 />
+                    Retire
+                  </DropdownMenuItem>
+                </DeleteTrainDialog>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         );
       },
@@ -175,13 +203,16 @@ export default function TrainsPage() {
 
           <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
             <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
+              <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
               <Input
                 type="search"
                 value={query}
                 onChange={(e) => {
                   setQuery(e.target.value);
-                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                  setPagination({
+                    pageIndex: 0,
+                    pageSize: pagination.pageSize,
+                  });
                 }}
                 placeholder="Search trains..."
                 className="pl-8!"
@@ -255,7 +286,10 @@ export default function TrainsPage() {
                   type="button"
                   onClick={() => {
                     setFilter(f);
-                    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                    setPagination({
+                      pageIndex: 0,
+                      pageSize: pagination.pageSize,
+                    });
                   }}
                   className={
                     isActive
@@ -299,7 +333,7 @@ export default function TrainsPage() {
               columns={columns}
               data={paginatedData}
               status="success"
-              onRowClick={() => {}}
+              onRowClick={() => { }}
               pagination={{
                 pageIndex: pagination.pageIndex,
                 pageSize: pagination.pageSize,
diff --git a/packages/ui-common/src/components/dropdown-menu.tsx b/packages/ui-common/src/components/dropdown-menu.tsx
new file mode 100644
index 000000000..102228c02
--- /dev/null
+++ b/packages/ui-common/src/components/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/packages/ui-common/src/index.ts b/packages/ui-common/src/index.ts
index 6f047a6f2..39405a088 100644
--- a/packages/ui-common/src/index.ts
+++ b/packages/ui-common/src/index.ts
@@ -23,6 +23,6 @@ export * from "./components/input";
 export * from "./components/textarea";
 export * from "./components/label";
 export * from "./components/card";
-
+export * from "./components/dropdown-menu";
 export * from "./components/data-table";
 export * from "./components/dialog";

From 5d3164074b5a817b3935b78310d2c7a5e46ba60b Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Wed, 20 May 2026 14:31:41 +0300
Subject: [PATCH 5/5] fix: styling conflict issues

---
 apps/edr-freight-web/portal/index.css         |   1 +
 apps/edr-freight-web/portal/src/main.tsx      |   3 +-
 .../src/pages/customers/CustomersPage.tsx     |   2 +-
 packages/ui-common/package.json               |   3 +-
 packages/ui-common/src/styles/index.css       | 235 +-----------------
 packages/ui-common/src/styles/theme.css       | 230 +++++++++++++++++
 6 files changed, 238 insertions(+), 236 deletions(-)
 create mode 100644 packages/ui-common/src/styles/theme.css

diff --git a/apps/edr-freight-web/portal/index.css b/apps/edr-freight-web/portal/index.css
index f1d8c73cd..4909e33bd 100644
--- a/apps/edr-freight-web/portal/index.css
+++ b/apps/edr-freight-web/portal/index.css
@@ -1 +1,2 @@
 @import "tailwindcss";
+@import "@edr/ui-common/theme.css" layer(theme);
diff --git a/apps/edr-freight-web/portal/src/main.tsx b/apps/edr-freight-web/portal/src/main.tsx
index 1437f9d00..45014a8d5 100644
--- a/apps/edr-freight-web/portal/src/main.tsx
+++ b/apps/edr-freight-web/portal/src/main.tsx
@@ -2,9 +2,10 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import "../index.css";
 import "@tria-plc/iamui-common/styles.css";
 import "@edr/ui-common/styles.css";
+import "../index.css";
+import "@edr/ui-common/theme.css";
 
 import App from "./App";
 import {
diff --git a/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx b/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx
index 3a7714abf..15ca74417 100644
--- a/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/customers/CustomersPage.tsx
@@ -263,7 +263,7 @@ function StatCard({
           <h3 className="mt-2 text-3xl font-bold text-slate-900">{value}</h3>
         </div>
 
-        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#10B981] text-white">
+        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary text-white">
           {icon}
         </div>
       </CardContent>
diff --git a/packages/ui-common/package.json b/packages/ui-common/package.json
index 9ffe547f6..2d0cee50d 100644
--- a/packages/ui-common/package.json
+++ b/packages/ui-common/package.json
@@ -7,7 +7,8 @@
   "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./styles.css": "./dist/index.css"
+    "./styles.css": "./dist/index.css",
+    "./theme.css": "./src/styles/theme.css"
   },
   "scripts": {
     "build:styles": "tailwindcss -i ./src/styles/index.css -o ./dist/index.css",
diff --git a/packages/ui-common/src/styles/index.css b/packages/ui-common/src/styles/index.css
index ed3e1d2db..8b5d67a02 100644
--- a/packages/ui-common/src/styles/index.css
+++ b/packages/ui-common/src/styles/index.css
@@ -1,235 +1,4 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(0.99 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.596 0.1274 163.23);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.9753 0.0148 149.37);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.81 0.1 252);
-  --chart-2: oklch(0.62 0.19 260);
-  --chart-3: oklch(0.55 0.22 263);
-  --chart-4: oklch(0.49 0.22 264);
-  --chart-5: oklch(0.42 0.18 266);
-  --sidebar: oklch(0.986 0.0068 174.38);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.596 0.1274 163.23);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-  --font-sans:
-    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
-  --shadow-x: 0;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.1;
-  --shadow-color: oklch(0 0 0);
-  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-sm:
-    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-  --shadow-md:
-    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
-  --shadow-lg:
-    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
-  --shadow-xl:
-    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
-  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.269 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: #0d5c2c;
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.371 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.275 0 0);
-  --input: oklch(0.325 0 0);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.81 0.1 252);
-  --chart-2: oklch(0.62 0.19 260);
-  --chart-3: oklch(0.55 0.22 263);
-  --chart-4: oklch(0.49 0.22 264);
-  --chart-5: oklch(0.42 0.18 266);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.275 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-  --font-sans:
-    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
-  --shadow-x: 0;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.1;
-  --shadow-color: oklch(0 0 0);
-  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-sm:
-    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-  --shadow-md:
-    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
-  --shadow-lg:
-    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
-  --shadow-xl:
-    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
-  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
-  --radius: 0.8rem;
-  --radius-sm: 0.48rem;
-  --radius-md: 0.64rem;
-  --radius-lg: 1rem;
-  --radius-xl: 1.12rem;
-  --radius-2xl: 1.44rem;
-  --radius-3xl: 1.76rem;
-  --radius-4xl: 2.08rem;
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-* {
-  scrollbar-width: thin;
-  scrollbar-color: rgb(203 213 225 / 0.6) transparent;
-  border-color: var(--color-border);
-}
-
-*::-webkit-scrollbar {
-  width: 8px;
-  height: 10px;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: rgb(203 213 225 / 0.7);
-  border-radius: 9999px;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(51 87 141 / 0.5);
-}
-
-*::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-.dark * {
-  scrollbar-color: rgb(71 85 105 / 0.6) transparent;
-}
-
-.dark *::-webkit-scrollbar-thumb {
-  background-color: rgb(71 85 105 / 0.6);
-}
-
-.dark *::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(51 87 141 / 0.7);
-}
+@import "./theme.css";
+@custom-variant dark (&: where(.dark, .dark *));
diff --git a/packages/ui-common/src/styles/theme.css b/packages/ui-common/src/styles/theme.css
new file mode 100644
index 000000000..fe44d27ac
--- /dev/null
+++ b/packages/ui-common/src/styles/theme.css
@@ -0,0 +1,230 @@
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(0.99 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.596 0.1274 163.23);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.9753 0.0148 149.37);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.81 0.1 252);
+  --chart-2: oklch(0.62 0.19 260);
+  --chart-3: oklch(0.55 0.22 263);
+  --chart-4: oklch(0.49 0.22 264);
+  --chart-5: oklch(0.42 0.18 266);
+  --sidebar: oklch(0.986 0.0068 174.38);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.596 0.1274 163.23);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  --radius: 0.8rem;
+  --shadow-x: 0;
+  --shadow-y: 1px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: oklch(0 0 0);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: #0d5c2c;
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.275 0 0);
+  --input: oklch(0.325 0 0);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.81 0.1 252);
+  --chart-2: oklch(0.62 0.19 260);
+  --chart-3: oklch(0.55 0.22 263);
+  --chart-4: oklch(0.49 0.22 264);
+  --chart-5: oklch(0.42 0.18 266);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.275 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  --shadow-x: 0;
+  --shadow-y: 1px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: oklch(0 0 0);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgb(203 213 225 / 0.6) transparent;
+  border-color: var(--color-border);
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: rgb(203 213 225 / 0.7);
+  border-radius: 9999px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(51 87 141 / 0.5);
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.dark * {
+  scrollbar-color: rgb(71 85 105 / 0.6) transparent;
+}
+
+.dark *::-webkit-scrollbar-thumb {
+  background-color: rgb(71 85 105 / 0.6);
+}
+
+.dark *::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(51 87 141 / 0.7);
+}