changes

2026-08-27 15:30:56 +00:00 · 2026-06-06 10:01:40 +03:00
parent 347774b7f6 053b4f35c5
commit 0794a77678
19 changed files with 867 additions and 654 deletions
--- a/apps/edr-freight-api/src/main.ts
+++ b/apps/edr-freight-api/src/main.ts
@@ -52,9 +52,10 @@ async function bootstrap() {
  SwaggerModule.setup("api/docs", app, document);

  const port = parseInt(process.env.PORT ?? "3001", 10);
-  await app.listen(port);
+  await app.listen(port, "0.0.0.0");
+  // await app.listen(port)
  // eslint-disable-next-line no-console
-  console.log(`[freight-api] listening on http://localhost:${port}`);
+  console.log(`[freight-api] listening on port ${port}`);
 }

 bootstrap();
--- a/apps/edr-freight-api/src/modules/payment/payment.controller.ts
+++ b/apps/edr-freight-api/src/modules/payment/payment.controller.ts
@@ -4,9 +4,9 @@ import { Public } from "@edr/api-common";
 import { randomUUID } from "crypto";
 import { Response } from "express"

-import * as fs from 'fs';
-import * as path from 'path';
-import Handlebars from 'handlebars';
+// import * as fs from 'fs';
+// import * as path from 'path';
+// import Handlebars from 'handlebars';


@Public()
--- a/apps/edr-freight-api/src/seed/pricing-data.seeder.ts
+++ b/apps/edr-freight-api/src/seed/pricing-data.seeder.ts
@@ -353,6 +353,8 @@ export class PricingDataSeeder {
  ): Promise<Rate[]> {
    const effectiveFrom = new Date("2026-01-01");
    const now = new Date();
+        // await rRepo.createQueryBuilder().delete().execute();
+
    const rateData = [
      {
        rateType: "CONTAINER_IMPORT",
--- a/apps/edr-freight-web/backoffice/package.json
+++ b/apps/edr-freight-web/backoffice/package.json
@@ -14,6 +14,9 @@
  "dependencies": {
    "@edr/types": "workspace:*",
    "@edr/ui-common": "workspace:*",
+    "@mantine/core": "^9.3.0",
+    "@mantine/hooks": "^9.3.0",
+    "@tabler/icons-react": "^3.44.0",
    "@tanstack/react-query": "^5.100.11",
    "@tria-plc/iamui-common": "1.1.1",
    "axios": "^1.7.7",
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingPriorityBadge.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingPriorityBadge.tsx
@@ -1,21 +1,23 @@
+import { Badge } from "@mantine/core";
+
 export function BookingPriorityBadge({ score }: { score: number }) {
  if (score >= 1000) {
    return (
-      <span className="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-red-700">
+      <Badge color="red" variant="filled" size="sm" radius="lg" tt="uppercase">
        Urgent
-      </span>
+      </Badge>
    );
  }
  if (score >= 500) {
    return (
-      <span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-700">
+      <Badge color="yellow" variant="filled" size="sm" radius="lg" tt="uppercase">
        High
-      </span>
+      </Badge>
    );
  }
  return (
-    <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-slate-600">
+    <Badge color="gray" variant="light" size="sm" radius="lg" tt="uppercase">
      Normal
-    </span>
+    </Badge>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatGrid.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatGrid.tsx
@@ -1,6 +1,5 @@
 import type { LucideIcon } from "lucide-react";
-import { bookingGlass } from "./booking-ui.styles";
-import { cn } from "@/lib/utils";
+import { Card, Group, Stack, Text, SimpleGrid } from "@mantine/core";

 export interface StatItem {
  label: string;
@@ -10,54 +9,76 @@ export interface StatItem {
  accent?: "default" | "amber" | "emerald" | "rose";
 }

-const iconAccentStyles = {
-  default: "text-foreground/70",
-  amber: "text-amber-600 dark:text-amber-400",
-  emerald: "text-emerald-600 dark:text-emerald-400",
-  rose: "text-rose-600 dark:text-rose-400",
+const accentColors = {
+  default: { bg: "var(--mantine-color-gray-1)", color: "var(--mantine-color-gray-6)" },
+  amber: { bg: "var(--mantine-color-yellow-1)", color: "var(--mantine-color-yellow-6)" },
+  emerald: { bg: "var(--mantine-color-green-1)", color: "var(--mantine-color-green-6)" },
+  rose: { bg: "var(--mantine-color-red-1)", color: "var(--mantine-color-red-6)" },
 };

 export function BookingStatGrid({ items }: { items: StatItem[] }) {
  return (
-    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+    <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="md">
      {items.map((item) => {
        const Icon = item.icon;
        const accent = item.accent ?? "default";
+        const accentStyle = accentColors[accent];
+
        return (
-          <div
+          <Card
            key={item.label}
-            className={cn(
-              "group relative overflow-hidden rounded-xl p-5 transition-all duration-200 hover:shadow-md",
-              bookingGlass.card,
-            )}
+            p="lg"
+            radius="lg"
+            withBorder
+            style={{
+              background: "white",
+              border: "1px solid var(--mantine-color-gray-2)",
+              transition: "all 0.2s ease",
+              cursor: "pointer",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.08)";
+              e.currentTarget.style.borderColor = "var(--mantine-color-gray-3)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.boxShadow = "none";
+              e.currentTarget.style.borderColor = "var(--mantine-color-gray-2)";
+            }}
          >
-            <div className="flex items-start justify-between gap-3">
-              <div className="min-w-0 flex-1">
-                <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+            <Group justify="space-between" align="flex-start">
+              <Stack gap="xs" style={{ flex: 1 }}>
+                <Text size="xs" fw={600} c="dimmed" tt="uppercase">
                  {item.label}
-                </p>
-                <p className="mt-2 text-3xl font-semibold tabular-nums tracking-tight text-foreground">
+                </Text>
+                <Text size="32px" fw={700} style={{ lineHeight: 1, letterSpacing: "-0.02em" }}>
                  {item.value}
-                </p>
+                </Text>
                {item.hint && (
-                  <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+                  <Text size="xs" c="dimmed">
                    {item.hint}
-                  </p>
+                  </Text>
                )}
-              </div>
+              </Stack>
              <div
-                className={cn(
-                  "flex size-10 shrink-0 items-center justify-center rounded-xl transition-transform duration-200 group-hover:scale-[1.02]",
-                  bookingGlass.iconWellGreen,
-                  iconAccentStyles[accent],
-                )}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "44px",
+                  height: "44px",
+                  borderRadius: "10px",
+                  background: accentStyle.bg,
+                  color: accentStyle.color,
+                  flexShrink: 0,
+                  transition: "transform 0.2s ease",
+                }}
              >
-                <Icon className="size-[18px]" strokeWidth={1.75} />
+                <Icon size={22} strokeWidth={1.75} />
              </div>
-            </div>
-          </div>
+            </Group>
+          </Card>
        );
      })}
-    </div>
+    </SimpleGrid>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
@@ -1,19 +1,43 @@
-import { Badge } from "@edr/ui-common";
-import { cn } from "@/lib/utils";
+import { Badge } from "@mantine/core";
 import { BOOKING_STATUS_STYLES } from "@/features/bookings/booking-status.config";

+const statusColorMap: Record<string, string> = {
+  DRAFT: "gray",
+  SUBMITTED: "yellow",
+  CHANGES_REQUESTED: "orange",
+  PENDING_APPROVAL: "yellow",
+  APPROVED_PENDING_SIGNATURE: "cyan",
+  APPROVED: "green",
+  CONTRACT_READY: "indigo",
+  SIGNED_CUSTOMER: "cyan",
+  FULLY_EXECUTED: "indigo",
+  PNR_GENERATED: "violet",
+  PAYMENT_VERIFICATION_IN_PROGRESS: "yellow",
+  PAID: "green",
+  IN_TRANSIT: "cyan",
+  COMPLETED: "indigo",
+  REJECTED: "red",
+  CANCELLED: "red",
+  PENDING_CONSOLIDATION: "yellow",
+  CONSOLIDATED: "indigo",
+};
+
 export function BookingStatusBadge({ status }: { status: string }) {
  const style = BOOKING_STATUS_STYLES[status] ?? {
    label: status,
-    color: "bg-muted text-muted-foreground border-border",
+    color: "gray",
  };
+  const color = statusColorMap[status] ?? "gray";
+
  return (
    <Badge
-      variant="outline"
-      className={cn(
-        "px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider",
-        style.color,
-      )}
+      color={color}
+      variant="light"
+      size="sm"
+      radius="md"
+      tt="uppercase"
+      fw={600}
+      style={{ fontSize: "0.7rem", letterSpacing: "0.05em" }}
    >
      {style.label}
    </Badge>
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx
@@ -8,27 +8,24 @@ import {
  Wallet,
  XCircle,
 } from "lucide-react";
+import { Group, Badge, UnstyledButton, Stack, Text } from "@mantine/core";

 import {
  BOOKING_LIST_TABS,
  type BookingStatusTabKey,
 } from "@/features/bookings/booking-status.config";
-import { bookingGlass } from "./booking-ui.styles";
-import { cn } from "@/lib/utils";

 const TAB_ICONS: Record<BookingStatusTabKey, React.ReactNode> = {
-  all: <LayoutGrid className="size-3.5" strokeWidth={1.75} />,
-  intake: <Inbox className="size-3.5" strokeWidth={1.75} />,
-  in_approval: <ClipboardCheck className="size-3.5" strokeWidth={1.75} />,
-  approved_contract: <FileSignature className="size-3.5" strokeWidth={1.75} />,
-  payment: <Wallet className="size-3.5" strokeWidth={1.75} />,
-  operations: <Train className="size-3.5" strokeWidth={1.75} />,
-  completed: <CheckCircle className="size-3.5" strokeWidth={1.75} />,
-  closed: <XCircle className="size-3.5" strokeWidth={1.75} />,
+  all: <LayoutGrid size={18} strokeWidth={1.75} />,
+  intake: <Inbox size={18} strokeWidth={1.75} />,
+  in_approval: <ClipboardCheck size={18} strokeWidth={1.75} />,
+  approved_contract: <FileSignature size={18} strokeWidth={1.75} />,
+  payment: <Wallet size={18} strokeWidth={1.75} />,
+  operations: <Train size={18} strokeWidth={1.75} />,
+  completed: <CheckCircle size={18} strokeWidth={1.75} />,
+  closed: <XCircle size={18} strokeWidth={1.75} />,
 };

-const activeTabText = "text-black";
-
 interface BookingStatusTabsProps {
  active: BookingStatusTabKey;
  onChange: (tab: BookingStatusTabKey) => void;
@@ -41,66 +38,68 @@ export function BookingStatusTabs({
  counts,
 }: BookingStatusTabsProps) {
  return (
-    <div className={bookingGlass.tabRail}>
-      <div
-        className="flex flex-nowrap gap-1.5 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
-        role="tablist"
-        aria-label="Booking status filters"
-      >
-        {BOOKING_LIST_TABS.map((tab) => {
-          const isActive = active === tab.key;
-          const count = counts?.[tab.key];
-          return (
-            <button
-              key={tab.key}
-              type="button"
-              role="tab"
-              aria-selected={isActive}
-              onClick={() => onChange(tab.key)}
-              className={cn(
-                "flex min-w-[8rem] shrink-0 flex-col items-start gap-0.5 rounded-lg px-3 py-2.5 text-left transition-all duration-200",
-                isActive
-                  ? bookingGlass.activeTab
-                  : "text-muted-foreground hover:bg-emerald-500/5 hover:text-foreground",
-              )}
-            >
-              <span className="flex w-full items-center justify-between gap-2">
-                <span
-                  className={cn(
-                    "flex items-center gap-2 text-sm font-medium",
-                    isActive ? activeTabText : "text-muted-foreground",
-                  )}
+    <Group
+      gap="sm"
+      wrap="wrap"
+      p="md"
+      style={{
+        background: "var(--mantine-color-gray-0)",
+        borderRadius: "12px",
+        border: "1px solid var(--mantine-color-gray-2)",
+      }}
+    >
+      {BOOKING_LIST_TABS.map((tab) => {
+        const isActive = active === tab.key;
+        const count = counts?.[tab.key];
+        return (
+          <UnstyledButton
+            key={tab.key}
+            onClick={() => onChange(tab.key)}
+            style={{
+              background: isActive ? "white" : "transparent",
+              border: isActive ? "1px solid var(--mantine-color-blue-3)" : "1px solid var(--mantine-color-gray-2)",
+              borderRadius: "10px",
+              padding: "10px 16px",
+              transition: "all 0.2s ease",
+              cursor: "pointer",
+              boxShadow: isActive ? "0 2px 8px rgba(59, 130, 246, 0.1)" : "none",
+            }}
+          >
+            <Group gap="sm" justify="space-between" wrap="nowrap">
+              <Group gap={8}>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "32px",
+                    height: "32px",
+                    borderRadius: "8px",
+                    background: isActive ? "var(--mantine-color-blue-1)" : "var(--mantine-color-gray-1)",
+                    color: isActive ? "var(--mantine-color-blue-7)" : "var(--mantine-color-gray-6)",
+                  }}
                >
-                  <span
-                    className={cn(
-                      "flex size-7 shrink-0 items-center justify-center rounded-md",
-                      isActive
-                        ? cn(bookingGlass.iconWellGreen, "text-black")
-                        : "border border-transparent bg-muted/30",
-                    )}
-                  >
-                    {TAB_ICONS[tab.key]}
-                  </span>
-                  <span className="whitespace-nowrap">{tab.label}</span>
-                </span>
-                {count !== undefined && count > 0 && (
-                  <span
-                    className={cn(
-                      "rounded-full px-2 py-0.5 text-[10px] font-semibold tabular-nums",
-                      isActive
-                        ? cn("bg-emerald-500/15", activeTabText)
-                        : "bg-muted/50 text-muted-foreground",
-                    )}
-                  >
-                    {count}
-                  </span>
-                )}
-              </span>
-            </button>
-          );
-        })}
-      </div>
-    </div>
+                  {TAB_ICONS[tab.key]}
+                </div>
+                <Text size="sm" fw={600}>
+                  {tab.label}
+                </Text>
+              </Group>
+              {count !== undefined && count > 0 && (
+                <Badge
+                  size="sm"
+                  variant={isActive ? "filled" : "light"}
+                  color={isActive ? "blue" : "gray"}
+                  radius="lg"
+                >
+                  {count}
+                </Badge>
+              )}
+            </Group>
+          </UnstyledButton>
+        );
+      })}
+    </Group>
  );
 }

--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineCardGrid.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineCardGrid.tsx
@@ -1,12 +1,11 @@
+import { Stack, Group, Text, Pagination, Card, SimpleGrid } from "@mantine/core";
+
 import type { RuleEngineResourceConfig } from "@/pages/ruleEngine/config/resources";
 import type { RuleEngineRecord } from "@/types/rule-engine";
-import { DataTableFooter } from "@edr/ui-common";
-import type { Table } from "@edr/ui-common";

 import RuleEngineRecordActions from "./RuleEngineRecordActions";
 import { cardInitials, resolveCardPresentation } from "./ruleEngineCardMeta";
 import { formatCell } from "./ruleEngineFormat";
-import { ruleEngineCard } from "./ruleEngineStyles";

 export interface RuleEngineCardGridProps {
  config: RuleEngineResourceConfig;
@@ -14,7 +13,6 @@ export interface RuleEngineCardGridProps {
  status: "loading" | "error" | "success";
  emptyMessage: string;
  itemLabel: string;
-  table: Table<RuleEngineRecord>;
  pagination: {
    pageIndex: number;
    pageSize: number;
@@ -29,13 +27,49 @@ export interface RuleEngineCardGridProps {
  onApproveRate?: (record: RuleEngineRecord) => void;
 }

+const extractLabel = (value: unknown): string => {
+  if (!value || typeof value !== "object") {
+    return String(value || "");
+  }
+
+  const obj = value as Record<string, unknown>;
+  return (
+    (typeof obj.label === "string" ? obj.label : null) ||
+    (typeof obj.cargoTypeName === "string" ? obj.cargoTypeName : null) ||
+    (typeof obj.serviceName === "string" ? obj.serviceName : null) ||
+    (typeof obj.code === "string" ? obj.code : null) ||
+    (typeof obj.name === "string" ? obj.name : null) ||
+    (typeof obj.actionLabel === "string" ? obj.actionLabel : null) ||
+    String(value)
+  );
+};
+
+const getSmartValue = (record: RuleEngineRecord, key: string): unknown => {
+  const value = record[key as keyof RuleEngineRecord];
+
+  // If the value is already an object, use it directly
+  if (value && typeof value === "object") {
+    return value;
+  }
+
+  // If the key ends with "Id" and there's a corresponding non-Id key, use that
+  if (typeof key === "string" && key.endsWith("Id")) {
+    const relatedKey = key.slice(0, -2); // Remove "Id" suffix
+    const relatedValue = record[relatedKey as keyof RuleEngineRecord];
+    if (relatedValue && typeof relatedValue === "object") {
+      return relatedValue;
+    }
+  }
+
+  return value;
+};
+
 const RuleEngineCardGrid = ({
  config,
  rows,
  status,
  emptyMessage,
  itemLabel,
-  table,
  pagination,
  onEdit,
  onDelete,
@@ -48,109 +82,156 @@ const RuleEngineCardGrid = ({

  if (status === "error") {
    return (
-      <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
-        <p className="text-sm font-medium text-foreground">Failed to load data</p>
-        <p className="mt-1 text-sm text-muted-foreground">
+      <Stack align="center" justify="center" p="xl" style={{ minHeight: "400px" }}>
+        <Text size="lg" fw={600} c="red">Failed to load data</Text>
+        <Text size="sm" c="dimmed">
          Please refresh the page or try again later.
-        </p>
-      </div>
+        </Text>
+      </Stack>
    );
  }

  if (status === "loading") {
    return (
-      <div className="grid grid-cols-1 gap-3 p-4 sm:grid-cols-2 lg:grid-cols-3 xl:gap-4">
-        {Array.from({ length: 6 }).map((_, index) => (
-          <div key={index} className={ruleEngineCard.skeleton}>
-            <div className="flex gap-3">
-              <div className="h-10 w-10 rounded-md bg-muted" />
-              <div className="flex-1 space-y-2">
-                <div className="h-4 w-2/3 rounded-sm bg-muted" />
-                <div className="h-3 w-1/3 rounded-sm bg-muted" />
+      <Stack gap="md" p="md">
+        <SimpleGrid cols={{ base: 1, sm: 2, md: 2, lg: 3 }} spacing="md">
+          {Array.from({ length: 6 }).map((_, index) => (
+            <Card key={index} p="md" radius="lg" withBorder style={{ height: "280px", background: "var(--mantine-color-gray-0)" }}>
+              <div style={{ animation: "pulse 2s infinite", opacity: 0.5 }}>
+                <div style={{ height: "20px", background: "var(--mantine-color-gray-3)", borderRadius: "4px", marginBottom: "12px" }} />
+                <div style={{ height: "16px", background: "var(--mantine-color-gray-3)", borderRadius: "4px", marginBottom: "20px", width: "80%" }} />
+                <div style={{ height: "16px", background: "var(--mantine-color-gray-3)", borderRadius: "4px", marginBottom: "8px" }} />
+                <div style={{ height: "16px", background: "var(--mantine-color-gray-3)", borderRadius: "4px" }} />
              </div>
-            </div>
-            <div className="mt-4 space-y-2">
-              <div className="h-3 w-full rounded-sm bg-muted" />
-              <div className="h-3 w-4/5 rounded-sm bg-muted" />
-            </div>
-          </div>
-        ))}
-      </div>
+            </Card>
+          ))}
+        </SimpleGrid>
+      </Stack>
    );
  }

  if (status === "success" && rows.length === 0) {
    return (
-      <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
-        <p className="text-sm font-medium text-foreground">{emptyMessage}</p>
-        <p className="mt-1 text-sm text-muted-foreground">
+      <Stack align="center" justify="center" p="xl" style={{ minHeight: "400px" }}>
+        <Text size="lg" fw={600}>{emptyMessage}</Text>
+        <Text size="sm" c="dimmed">
          Try adjusting your search or add a new record.
-        </p>
-      </div>
+        </Text>
+      </Stack>
    );
  }

+  const avatarColors = ["blue", "cyan", "grape", "green", "lime", "orange", "pink", "red", "teal", "violet", "yellow"];
+  const getAvatarColor = (title: string) => avatarColors[title.charCodeAt(0) % avatarColors.length];
+
  return (
-    <>
-      <div className="grid grid-cols-1 gap-3 p-4 sm:grid-cols-2 lg:grid-cols-3 xl:gap-4">
+    <Stack gap="md" p="md">
+      <SimpleGrid cols={{ base: 1, sm: 2, md: 2, lg: 3 }} spacing="md">
        {rows.map((record) => {
-          const title = String(record[presentation.titleKey] ?? "Untitled");
-          const subtitle = presentation.subtitleKey
-            ? String(record[presentation.subtitleKey] ?? "")
-            : "";
-          const code = presentation.codeKey
-            ? String(record[presentation.codeKey] ?? "")
-            : "";
+          const titleValue = getSmartValue(record, presentation.titleKey);
+          const title = extractLabel(titleValue);
+
+          const subtitleValue = presentation.subtitleKey
+            ? getSmartValue(record, presentation.subtitleKey)
+            : null;
+          const subtitle = subtitleValue ? extractLabel(subtitleValue) : "";
+
+          const codeValue = presentation.codeKey
+            ? getSmartValue(record, presentation.codeKey)
+            : null;
+          const code = codeValue ? extractLabel(codeValue) : "";
+
          const statusValue = presentation.statusKey
            ? record[presentation.statusKey]
            : undefined;

          return (
-            <article key={record.id} className={ruleEngineCard.article}>
-              <div className={ruleEngineCard.header}>
-                <div className="flex items-start gap-3">
-                  <div className={ruleEngineCard.avatar} aria-hidden>
+            <Card
+              key={record.id}
+              p="lg"
+              radius="lg"
+              withBorder
+              style={{
+                background: "white",
+                border: "1px solid var(--mantine-color-gray-2)",
+                display: "flex",
+                flexDirection: "column",
+                transition: "all 0.2s ease",
+                cursor: "pointer",
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.1)";
+                e.currentTarget.style.borderColor = "var(--mantine-color-blue-3)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.boxShadow = "none";
+                e.currentTarget.style.borderColor = "var(--mantine-color-gray-2)";
+              }}
+            >
+              <Group justify="space-between" align="flex-start" mb="md">
+                <Group gap="sm" style={{ flex: 1, minWidth: 0 }}>
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "44px",
+                      height: "44px",
+                      borderRadius: "8px",
+                      background: `var(--mantine-color-${getAvatarColor(title)}-1)`,
+                      fontSize: "16px",
+                      fontWeight: 700,
+                      color: `var(--mantine-color-${getAvatarColor(title)}-7)`,
+                      flexShrink: 0,
+                    }}
+                  >
                    {cardInitials(title)}
                  </div>
-                  <div className="min-w-0 flex-1">
-                    <div className="flex flex-wrap items-center gap-2">
-                      <h3 className={ruleEngineCard.title}>{title}</h3>
-                      {presentation.statusKey
-                        ? formatCell(statusValue, "activeBadge")
-                        : null}
-                    </div>
-                    {(code || subtitle) && (
-                      <div className="mt-1.5 flex flex-wrap items-center gap-2">
-                        {code ? formatCell(code, "code") : null}
-                        {subtitle ? (
-                          <span className={ruleEngineCard.meta}>
-                            {presentation.subtitleKey === "stepOrder"
-                              ? `Step ${subtitle}`
-                              : subtitle}
-                          </span>
-                        ) : null}
-                      </div>
+                  <div style={{ minWidth: 0, flex: 1 }}>
+                    <Text size="sm" fw={700} truncate title={title}>
+                      {title}
+                    </Text>
+                    {code && (
+                      <Text size="xs" c="dimmed" style={{ marginTop: "4px" }}>
+                        {code}
+                      </Text>
                    )}
                  </div>
-                </div>
-              </div>
+                </Group>
+                {presentation.statusKey && (
+                  <div>{formatCell(statusValue, "activeBadge")}</div>
+                )}
+              </Group>

-              {presentation.detailColumns.length > 0 ? (
-                <dl className="grid flex-1 gap-x-4 gap-y-3 px-4 py-3.5 sm:grid-cols-2">
-                  {presentation.detailColumns.map((col) => (
-                    <div key={col.id} className="min-w-0">
-                      <dt className={ruleEngineCard.detailLabel}>{col.header}</dt>
-                      <dd className={ruleEngineCard.detailValue}>
-                        {formatCell(record[col.accessorKey], col.format)}
-                      </dd>
-                    </div>
-                  ))}
-                </dl>
-              ) : (
-                <div className="flex-1 px-4 py-2" />
+              {(subtitle || presentation.detailColumns.length > 0) && (
+                <Stack gap="xs" style={{ flex: 1, marginBottom: "md" }}>
+                  {subtitle && (
+                    <Group gap="xs">
+                      <Text size="xs" c="dimmed" fw={500}>
+                        {presentation.subtitleKey === "stepOrder" ? "Step" : "Type"}:
+                      </Text>
+                      <Text size="xs" fw={500}>
+                        {subtitle}
+                      </Text>
+                    </Group>
+                  )}
+                  {presentation.detailColumns.map((col) => {
+                    const displayValue = getSmartValue(record, col.accessorKey);
+                    return (
+                      <Group key={col.id} justify="space-between" gap="xs" align="flex-start">
+                        <Text size="xs" c="dimmed" fw={500}>
+                          {col.header}:
+                        </Text>
+                        <div style={{ textAlign: "right", flex: 1 }}>
+                          {formatCell(displayValue, col.format)}
+                        </div>
+                      </Group>
+                    );
+                  })}
+                </Stack>
              )}

-              <div className={ruleEngineCard.footer}>
+              <Group justify="flex-end" gap="xs" style={{ borderTop: "1px solid var(--mantine-color-gray-1)", paddingTop: "md" }}>
                <RuleEngineRecordActions
                  record={record}
                  config={config}
@@ -162,26 +243,26 @@ const RuleEngineCardGrid = ({
                  onSubmitRate={onSubmitRate}
                  onApproveRate={onApproveRate}
                />
-              </div>
-            </article>
+              </Group>
+            </Card>
          );
        })}
-      </div>
+      </SimpleGrid>

-      <div className="border-t border-border bg-card">
-        <DataTableFooter
-          table={table}
-          pagination={pagination}
-          options={{
-            labels: {
-              showing: "Showing",
-              ofLabel: "of",
-              items: itemLabel,
-            },
-          }}
-        />
-      </div>
-    </>
+      {pagination.pageCount > 1 && (
+        <Group justify="space-between" align="center" p="md" style={{ borderTop: "1px solid var(--mantine-color-gray-2)" }}>
+          <Text size="sm" c="dimmed">
+            Showing {Math.min(rows.length, pagination.pageSize)} of {pagination.totalCount} {itemLabel}
+          </Text>
+          <Pagination
+            value={pagination.pageIndex + 1}
+            total={pagination.pageCount}
+            size="sm"
+            radius="md"
+          />
+        </Group>
+      )}
+    </Stack>
  );
 };

--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx
@@ -1,27 +1,18 @@
 import { useEffect, useState } from "react";
 import { Loader2 } from "lucide-react";
-
 import {
+  Modal,
  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Field,
-  FieldContent,
-  FieldLabel,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Separator,
-  Switch,
+  TextInput,
  Textarea,
-} from "@edr/ui-common";
+  Select,
+  Switch,
+  Stack,
+  Group,
+  Divider,
+  Text,
+  Box,
+} from "@mantine/core";

 import {
  RULE_ENGINE_SELECT_NONE,
@@ -29,8 +20,6 @@ import {
 } from "@/pages/ruleEngine/config/resources";
 import type { RuleEngineRecord } from "@/types/rule-engine";

-import { ruleEngineField, ruleEngineSurface } from "./ruleEngineStyles";
-
 export interface RuleEngineFormDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
@@ -142,133 +131,174 @@ const RuleEngineFormDialog = ({
  };

  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={ruleEngineSurface.dialog}>
-        <DialogHeader className="space-y-1">
-          <DialogTitle className="text-lg font-semibold">{title}</DialogTitle>
-          <DialogDescription>{description}</DialogDescription>
-        </DialogHeader>
+    <Modal
+      opened={open}
+      onClose={() => onOpenChange(false)}
+      title={title}
+      centered
+      size="md"
+      radius="lg"
+      styles={{
+        header: {
+          paddingBottom: "20px",
+          borderBottom: "1px solid var(--mantine-color-gray-2)",
+        },
+        body: {
+          paddingTop: "24px",
+          paddingBottom: "24px",
+        },
+        title: {
+          fontSize: "1.25rem",
+          fontWeight: 700,
+          color: "var(--mantine-color-gray-9)",
+        },
+      }}
+    >
+      <form onSubmit={handleSubmit}>
+        <Stack gap="lg">
+          <Text size="sm" c="dimmed">
+            {description}
+          </Text>

-        <form onSubmit={handleSubmit} className="space-y-1">
-          <div className="max-h-[min(60vh,28rem)] space-y-4 overflow-y-auto pr-1">
-            {fields.map((field) => (
-              <Field key={field.name} orientation="vertical" className="gap-1.5">
-                {field.type === "boolean" ? (
-                  <div className={ruleEngineField.switchRow}>
-                    <div className="min-w-0">
-                      <FieldLabel htmlFor={field.name} className={ruleEngineField.label}>
-                        {field.label}
-                      </FieldLabel>
-                      <p className={ruleEngineField.switchHint}>
-                        {Boolean(values[field.name]) ? "Enabled" : "Disabled"}
-                      </p>
-                    </div>
-                    <Switch
-                      id={field.name}
-                      checked={Boolean(values[field.name])}
-                      onCheckedChange={(checked) => setField(field.name, checked)}
+          <div style={{ maxHeight: "calc(60vh - 150px)", overflowY: "auto", paddingRight: "12px" }}>
+            <Stack gap="lg">
+              {fields.map((field) => (
+                <Box key={field.name}>
+                  {field.type === "boolean" ? (
+                    <Group
+                      justify="space-between"
+                      align="center"
+                      p="lg"
+                      style={{
+                        background: "linear-gradient(135deg, var(--mantine-color-blue-0) 0%, var(--mantine-color-cyan-0) 100%)",
+                        borderRadius: "12px",
+                        border: "1px solid var(--mantine-color-blue-2)",
+                      }}
+                    >
+                      <div>
+                        <Text size="sm" fw={600} mb="4px">
+                          {field.label}
+                        </Text>
+                        <Text size="xs" c="dimmed">
+                          {Boolean(values[field.name]) ? "✓ Enabled" : "○ Disabled"}
+                        </Text>
+                      </div>
+                      <Switch
+                        checked={Boolean(values[field.name])}
+                        onChange={(e) => setField(field.name, e.currentTarget.checked)}
+                        size="lg"
+                      />
+                    </Group>
+                  ) : field.type === "select" ? (
+                    <Select
+                      label={
+                        <Group gap="4px">
+                          <span>{field.label}</span>
+                          {field.required && <span style={{ color: "var(--mantine-color-red-6)" }}>*</span>}
+                        </Group>
+                      }
+                      placeholder={
+                        selectOptionsLoading ? "Loading options..." : (field.placeholder ?? "Select an option")
+                      }
+                      value={resolveSelectValue(field, values)}
+                      onChange={(v) =>
+                        setField(field.name, v === RULE_ENGINE_SELECT_NONE ? "" : v)
+                      }
+                      disabled={selectOptionsLoading}
+                      data={(field.options ?? []).filter((opt) => opt.value !== "").map((opt) => ({
+                        label: opt.label,
+                        value: opt.value,
+                      }))}
+                      searchable
+                      clearable
+                      size="md"
+                      radius="lg"
+                      styles={{
+                        input: {
+                          borderColor: "var(--mantine-color-gray-3)",
+                        },
+                      }}
                    />
-                  </div>
-                ) : (
-                  <>
-                    <FieldLabel htmlFor={field.name} className={ruleEngineField.label}>
-                      {field.label}
-                      {field.required ? (
-                        <span className={ruleEngineField.requiredMark}> *</span>
-                      ) : null}
-                    </FieldLabel>
-                    <FieldContent>
-                      {field.type === "select" ? (
-                        <Select
-                          value={resolveSelectValue(field, values)}
-                          onValueChange={(v) =>
-                            setField(
-                              field.name,
-                              v === RULE_ENGINE_SELECT_NONE ? "" : v,
-                            )
-                          }
-                          disabled={selectOptionsLoading}
-                        >
-                          <SelectTrigger
-                            id={field.name}
-                            className={ruleEngineField.selectTrigger}
-                          >
-                            <SelectValue
-                              placeholder={
-                                selectOptionsLoading
-                                  ? "Loading options..."
-                                  : (field.placeholder ?? "Select an option")
-                              }
-                            />
-                          </SelectTrigger>
-                          <SelectContent className={ruleEngineField.selectContent}>
-                            {(field.options ?? [])
-                              .filter((opt) => opt.value !== "")
-                              .map((opt) => (
-                                <SelectItem key={opt.value} value={opt.value}>
-                                  {opt.label}
-                                </SelectItem>
-                              ))}
-                          </SelectContent>
-                        </Select>
-                      ) : field.type === "textarea" ? (
-                        <Textarea
-                          id={field.name}
-                          value={String(values[field.name] ?? "")}
-                          onChange={(e) => setField(field.name, e.target.value)}
-                          placeholder={field.placeholder}
-                          className={ruleEngineField.textarea}
-                        />
-                      ) : (
-                        <Input
-                          id={field.name}
-                          type={
-                            field.type === "number"
-                              ? "number"
-                              : field.type === "date"
-                                ? "date"
-                                : "text"
-                          }
-                          value={String(values[field.name] ?? "")}
-                          onChange={(e) => setField(field.name, e.target.value)}
-                          placeholder={field.placeholder}
-                          className={ruleEngineField.input}
-                          required={field.required}
-                        />
-                      )}
-                    </FieldContent>
-                  </>
-                )}
-              </Field>
-            ))}
+                  ) : field.type === "textarea" ? (
+                    <Textarea
+                      label={
+                        <Group gap="4px">
+                          <span>{field.label}</span>
+                          {field.required && <span style={{ color: "var(--mantine-color-red-6)" }}>*</span>}
+                        </Group>
+                      }
+                      value={String(values[field.name] ?? "")}
+                      onChange={(e) => setField(field.name, e.currentTarget.value)}
+                      placeholder={field.placeholder}
+                      required={field.required}
+                      minRows={5}
+                      size="md"
+                      radius="lg"
+                      styles={{
+                        input: {
+                          borderColor: "var(--mantine-color-gray-3)",
+                        },
+                      }}
+                    />
+                  ) : (
+                    <TextInput
+                      label={
+                        <Group gap="4px">
+                          <span>{field.label}</span>
+                          {field.required && <span style={{ color: "var(--mantine-color-red-6)" }}>*</span>}
+                        </Group>
+                      }
+                      type={
+                        field.type === "number"
+                          ? "number"
+                          : field.type === "date"
+                            ? "date"
+                            : "text"
+                      }
+                      value={String(values[field.name] ?? "")}
+                      onChange={(e) => setField(field.name, e.currentTarget.value)}
+                      placeholder={field.placeholder}
+                      required={field.required}
+                      size="md"
+                      radius="lg"
+                      styles={{
+                        input: {
+                          borderColor: "var(--mantine-color-gray-3)",
+                        },
+                      }}
+                    />
+                  )}
+                </Box>
+              ))}
+            </Stack>
          </div>

-          <Separator className="my-4" />
+          <Divider />

-          <DialogFooter className="gap-2 sm:gap-2">
+          <Group justify="flex-end" gap="sm">
            <Button
-              type="button"
-              variant="outline"
-              className="rounded-md"
+              variant="light"
              onClick={() => onOpenChange(false)}
              disabled={isSubmitting}
+              radius="lg"
+              size="md"
            >
              Cancel
            </Button>
-            <Button type="submit" className="rounded-md" disabled={isSubmitting}>
-              {isSubmitting ? (
-                <>
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  Saving...
-                </>
-              ) : (
-                "Save"
-              )}
+            <Button
+              type="submit"
+              disabled={isSubmitting}
+              leftSection={isSubmitting && <Loader2 size={18} style={{ animation: "spin 1s linear infinite" }} />}
+              radius="lg"
+              color="blue"
+              size="md"
+            >
+              {isSubmitting ? "Saving..." : "Save"}
            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
  );
 };

--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineRecordActions.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineRecordActions.tsx
@@ -6,16 +6,10 @@ import {
  Send,
  Trash2,
 } from "lucide-react";
+import { Button, Menu, Group } from "@mantine/core";

 import type { RuleEngineResourceConfig } from "@/pages/ruleEngine/config/resources";
 import type { RuleEngineRecord } from "@/types/rule-engine";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@edr/ui-common";

 export interface RuleEngineRecordActionsProps {
  record: RuleEngineRecord;
@@ -44,93 +38,83 @@ const RuleEngineRecordActions = ({
  const hasRateActions =
    config.slug === "rates" && (status === "DRAFT" || status === "PENDING_APPROVAL");

-  const iconBtnClass =
-    layout === "compact"
-      ? "h-8 w-8 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
-      : "h-8 w-8 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground";
-
  if (readOnly) {
    return onViewChain ? (
      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className={iconBtnClass}
+        variant="subtle"
+        size="xs"
        onClick={onViewChain}
-        aria-label="View chain"
+        leftSection={<Eye size={16} />}
      >
-        <Eye className="h-4 w-4" />
+        View
      </Button>
    ) : null;
  }

  return (
-    <div className="flex items-center justify-end gap-0.5">
+    <Group gap={2} justify="flex-end">
      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className={iconBtnClass}
+        variant="subtle"
+        size="xs"
        onClick={() => onEdit(record)}
-        aria-label="Edit"
+        leftSection={<Pencil size={16} />}
      >
-        <Pencil className="h-4 w-4" />
+        Edit
      </Button>

      {config.slug === "approval-rules" && onViewChain ? (
        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className={iconBtnClass}
+          variant="subtle"
+          size="xs"
          onClick={onViewChain}
-          aria-label="View approval chain"
+          leftSection={<Eye size={16} />}
        >
-          <Eye className="h-4 w-4" />
+          View Chain
        </Button>
      ) : null}

      {hasRateActions ? (
-        <DropdownMenu modal={false}>
-          <DropdownMenuTrigger asChild>
+        <Menu position="bottom-end" shadow="md">
+          <Menu.Target>
            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className={iconBtnClass}
-              aria-label="More actions"
+              variant="subtle"
+              size="xs"
+              leftSection={<MoreHorizontal size={16} />}
            >
-              <MoreHorizontal className="h-4 w-4" />
+              More
            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
+          </Menu.Target>
+          <Menu.Dropdown>
            {status === "DRAFT" && onSubmitRate ? (
-              <DropdownMenuItem onSelect={() => onSubmitRate(record.id)}>
-                <Send />
+              <Menu.Item
+                leftSection={<Send size={14} />}
+                onClick={() => onSubmitRate(record.id)}
+              >
                Submit for approval
-              </DropdownMenuItem>
+              </Menu.Item>
            ) : null}
            {status === "PENDING_APPROVAL" && onApproveRate ? (
-              <DropdownMenuItem onSelect={() => onApproveRate(record)}>
-                <CheckCircle2 />
+              <Menu.Item
+                leftSection={<CheckCircle2 size={14} />}
+                onClick={() => onApproveRate(record)}
+              >
                Approve
-              </DropdownMenuItem>
+              </Menu.Item>
            ) : null}
-          </DropdownMenuContent>
-        </DropdownMenu>
+          </Menu.Dropdown>
+        </Menu>
      ) : null}

      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className={`${iconBtnClass} hover:bg-red-50 hover:text-red-600`}
+        variant="subtle"
+        size="xs"
        onClick={() => onDelete(record)}
-        aria-label="Delete"
+        leftSection={<Trash2 size={16} />}
+        color="red"
      >
-        <Trash2 className="h-4 w-4" />
+        Delete
      </Button>
-    </div>
+    </Group>
  );
 };

--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineToolbar.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineToolbar.tsx
@@ -1,10 +1,7 @@
-import { Filter, LayoutGrid, Plus, Search, Table2 } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button, Input } from "@edr/ui-common";
+import { LayoutGrid, Plus, Search, Table2 } from "lucide-react";
+import { Button, TextInput, Group, SegmentedControl } from "@mantine/core";

 import type { RuleEngineViewMode } from "./useRuleEngineViewMode";
-import { ruleEngineToolbar } from "./ruleEngineStyles";

 export interface RuleEngineToolbarProps {
  search: string;
@@ -25,70 +22,69 @@ const RuleEngineToolbar = ({
  viewMode,
  onViewModeChange,
 }: RuleEngineToolbarProps) => (
-  <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-    <div className="relative min-w-0 flex-1 lg:max-w-md">
-      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-      <Input
-        type="search"
-        value={search}
-        onChange={(e) => onSearchChange(e.target.value)}
-        placeholder={searchPlaceholder}
-        className={ruleEngineToolbar.search}
+  <Group gap="md" justify="space-between" align="center" wrap="nowrap">
+    <TextInput
+      placeholder={searchPlaceholder}
+      value={search}
+      onChange={(e) => onSearchChange(e.currentTarget.value)}
+      leftSection={<Search size={18} />}
+      size="md"
+      radius="lg"
+      style={{ flex: 1, minWidth: 0 }}
+      styles={{
+        input: {
+          borderColor: "var(--mantine-color-gray-3)",
+        },
+      }}
+    />
+
+    <Group gap="md" align="center" justify="flex-end" wrap="nowrap">
+      <SegmentedControl
+        value={viewMode}
+        onChange={(value) => onViewModeChange(value as RuleEngineViewMode)}
+        size="sm"
+        radius="lg"
+        data={[
+          {
+            value: "table",
+            label: (
+              <Group gap={6} justify="center" wrap="nowrap">
+                <Table2 size={16} />
+                <span>Table</span>
+              </Group>
+            ),
+          },
+          {
+            value: "cards",
+            label: (
+              <Group gap={6} justify="center" wrap="nowrap">
+                <LayoutGrid size={16} />
+                <span>Cards</span>
+              </Group>
+            ),
+          },
+        ]}
+        styles={{
+          root: {
+            background: "var(--mantine-color-gray-1)",
+          },
+        }}
      />
-    </div>

-    <div className="flex shrink-0 flex-wrap items-center gap-2">
-      <div
-        className={ruleEngineToolbar.viewToggleGroup}
-        role="group"
-        aria-label="View mode"
-      >
-        <button
-          type="button"
-          onClick={() => onViewModeChange("table")}
-          className={cn(
-            ruleEngineToolbar.viewToggleBtn,
-            viewMode === "table"
-              ? ruleEngineToolbar.viewToggleActive
-              : ruleEngineToolbar.viewToggleIdle,
-          )}
-          aria-pressed={viewMode === "table"}
-        >
-          <Table2 className="h-4 w-4" />
-          Table
-        </button>
-        <button
-          type="button"
-          onClick={() => onViewModeChange("cards")}
-          className={cn(
-            ruleEngineToolbar.viewToggleBtn,
-            viewMode === "cards"
-              ? ruleEngineToolbar.viewToggleActive
-              : ruleEngineToolbar.viewToggleIdle,
-          )}
-          aria-pressed={viewMode === "cards"}
-        >
-          <LayoutGrid className="h-4 w-4" />
-          Cards
-        </button>
-      </div>
-
-      <Button
-        type="button"
-        variant="outline"
-        className={cn(ruleEngineToolbar.actionBtn, "gap-2 px-3")}
-      >
-        <Filter className="h-4 w-4" />
-        Filter
-      </Button>
      {onAdd ? (
-        <Button type="button" className={ruleEngineToolbar.primaryBtn} onClick={onAdd}>
-          <Plus className="h-4 w-4" />
+        <Button
+          onClick={onAdd}
+          leftSection={<Plus size={18} />}
+          size="sm"
+          radius="lg"
+          color="blue"
+          style={{ whiteSpace: "nowrap" }}
+        >
          {addLabel}
        </Button>
      ) : null}
-    </div>
-  </div>
+    </Group>
+  </Group>
 );

 export default RuleEngineToolbar;
--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx
@@ -1,30 +1,49 @@
 import type { ReactNode } from "react";
+import { Badge, Text } from "@mantine/core";

-import { cn } from "@/lib/utils";
 import type { ColumnFormat } from "@/pages/ruleEngine/config/resources";
-import { Badge } from "@edr/ui-common";

-const statusBadgeClass = (active: boolean) =>
-  cn(
-    "rounded-sm px-2 py-0.5 text-xs font-medium",
-    active
-      ? "border-emerald-200 bg-emerald-50 text-emerald-800"
-      : "border-border bg-muted text-muted-foreground",
+const extractLabel = (value: unknown): string | null => {
+  if (!value || typeof value !== "object") return null;
+
+  const obj = value as Record<string, unknown>;
+  return (
+    (typeof obj.label === "string" ? obj.label : null) ||
+    (typeof obj.cargoTypeName === "string" ? obj.cargoTypeName : null) ||
+    (typeof obj.code === "string" ? obj.code : null) ||
+    (typeof obj.name === "string" ? obj.name : null) ||
+    (typeof obj.actionLabel === "string" ? obj.actionLabel : null) ||
+    null
  );
+};

 export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode => {
  if (value === null || value === undefined || value === "") {
-    return <span className="text-muted-foreground">—</span>;
+    return <Text size="sm" c="dimmed">—</Text>;
+  }
+
+  // Handle stringified objects (e.g., "[object Object]")
+  if (typeof value === "string" && value.trim() === "[object Object]") {
+    return <Text size="sm" c="dimmed">—</Text>;
  }

  if (format === "boolean") {
-    return value ? "Yes" : "No";
+    if (typeof value === "string") {
+      const boolVal = value.toLowerCase() === "true" || value === "1";
+      return <Text size="sm">{boolVal ? "✓ Yes" : "✗ No"}</Text>;
+    }
+    return <Text size="sm">{value ? "✓ Yes" : "✗ No"}</Text>;
  }

  if (format === "activeBadge") {
    const active = Boolean(value);
    return (
-      <Badge variant="outline" className={statusBadgeClass(active)}>
+      <Badge
+        color={active ? "green" : "gray"}
+        variant={active ? "filled" : "light"}
+        size="sm"
+        radius="md"
+      >
        {active ? "Active" : "Inactive"}
      </Badge>
    );
@@ -32,14 +51,16 @@ export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode =>

  if (format === "rateStatus") {
    const status = String(value);
-    const tone =
+    const color =
      status === "LIVE"
-        ? "border-emerald-200 bg-emerald-50 text-emerald-800"
+        ? "green"
        : status === "DRAFT"
-          ? "border-amber-200 bg-amber-50 text-amber-800"
-          : "border-sky-200 bg-sky-50 text-sky-800";
+          ? "yellow"
+          : status === "PENDING_APPROVAL"
+            ? "orange"
+            : "blue";
    return (
-      <Badge variant="outline" className={cn("rounded-sm font-medium", tone)}>
+      <Badge color={color} variant="filled" size="sm" radius="md">
        {status}
      </Badge>
    );
@@ -48,38 +69,44 @@ export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode =>
  if (format === "code") {
    return (
      <Badge
-        variant="secondary"
-        className="rounded-sm border border-border bg-muted/80 font-mono text-[11px] font-medium text-foreground"
+        variant="light"
+        color="blue"
+        size="sm"
+        radius="md"
+        style={{
+          fontFamily: "monospace",
+          fontSize: "0.75rem",
+          fontWeight: 600,
+          letterSpacing: "0.05em",
+        }}
      >
-        {String(value)}
+        {String(value).toUpperCase()}
      </Badge>
    );
  }

  if (format === "date") {
    const d = new Date(String(value));
-    return Number.isNaN(d.getTime()) ? String(value) : d.toLocaleDateString();
+    if (Number.isNaN(d.getTime())) return <Text size="sm">{String(value)}</Text>;
+    return <Text size="sm">{d.toLocaleDateString()}</Text>;
  }

  if (format === "entityLabel" && value && typeof value === "object") {
-    const entity = value as { label?: string; code?: string; cargoTypeName?: string };
-    const label =
-      entity.label?.trim() ||
-      entity.cargoTypeName?.trim() ||
-      entity.code?.trim();
-    return label ? (
-      <span>{label}</span>
-    ) : (
-      <span className="text-muted-foreground">—</span>
-    );
+    const label = extractLabel(value);
+    if (label) {
+      return <Text size="sm">{label}</Text>;
+    }
+    return <Text size="sm" c="dimmed">—</Text>;
  }

  if (format === "rateLabel") {
    if (!value || typeof value !== "object") {
      return value ? (
-        <span className="font-mono text-xs text-muted-foreground">{String(value)}</span>
+        <Text size="sm" c="dimmed" style={{ fontFamily: "monospace" }}>
+          {String(value)}
+        </Text>
      ) : (
-        <span className="text-muted-foreground">—</span>
+        <Text size="sm" c="dimmed">—</Text>
      );
    }
    const rate = value as {
@@ -95,11 +122,17 @@ export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode =>
      rate.rateUnit?.replace(/_/g, " "),
    ].filter(Boolean);
    return parts.length > 0 ? (
-      <span>{parts.join(" · ")}</span>
+      <Text size="sm">{parts.join(" · ")}</Text>
    ) : (
-      <span className="text-muted-foreground">—</span>
+      <Text size="sm" c="dimmed">—</Text>
    );
  }

-  return String(value);
+  if (typeof value === "object") {
+    const label = extractLabel(value);
+    if (label) return <Text size="sm">{label}</Text>;
+    return <Text size="sm" c="dimmed">—</Text>;
+  }
+
+  return <Text size="sm">{String(value)}</Text>;
 };
--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineStyles.ts
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineStyles.ts
@@ -3,7 +3,7 @@
 export const ruleEngineSurface = {
  pageCard:
    "overflow-hidden rounded-lg border border-border bg-card shadow-sm",
-  pageCardToolbar: "border-b border-border bg-muted/30 px-4 py-3 sm:px-5 sm:py-3.5",
+  pageCardToolbar: "border-b border-border bg-muted/30 px-3 py-2.5 sm:px-4 sm:py-3",
  dialog: "max-h-[90vh] overflow-y-auto rounded-lg border-border sm:max-w-lg",
  dialogSm: "rounded-lg border-border sm:max-w-md",
 } as const;
@@ -24,30 +24,30 @@ export const ruleEngineField = {

 export const ruleEngineToolbar = {
  search:
-    "h-10 rounded-md border border-input bg-background pl-10 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30",
+    "h-9 rounded-md border border-input bg-background pl-9 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 sm:h-10 sm:pl-10",
  viewToggleGroup:
-    "flex h-10 items-center rounded-md border border-border bg-muted/40 p-0.5",
+    "flex h-9 items-center rounded-md border border-border bg-muted/40 p-0.5 sm:h-10",
  viewToggleBtn:
-    "inline-flex h-8 items-center gap-1.5 rounded-sm px-3 text-sm font-medium transition-colors",
+    "inline-flex h-7 items-center gap-1 rounded-sm px-2 text-xs font-medium transition-colors sm:h-8 sm:gap-1.5 sm:px-3 sm:text-sm",
  viewToggleActive: "bg-background text-foreground shadow-sm",
  viewToggleIdle: "text-muted-foreground hover:bg-background/60 hover:text-foreground",
-  actionBtn: "h-10 rounded-md shadow-xs",
-  primaryBtn: "h-10 gap-2 rounded-md px-4 text-sm font-medium shadow-xs",
+  actionBtn: "h-9 rounded-md shadow-xs sm:h-10",
+  primaryBtn: "h-9 gap-1.5 rounded-md px-3 text-xs font-medium shadow-xs sm:h-10 sm:gap-2 sm:px-4 sm:text-sm",
 } as const;

 export const ruleEngineCard = {
  article:
    "group flex flex-col overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-shadow duration-200 hover:shadow-md",
-  header: "border-b border-border bg-muted/25 px-4 py-3.5",
+  header: "border-b border-border bg-muted/25 px-3 py-2.5 sm:px-4 sm:py-3.5",
  avatar:
-    "flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary/12 text-sm font-semibold text-primary",
-  title: "truncate text-[15px] font-semibold text-foreground",
+    "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/12 text-xs font-semibold text-primary sm:h-10 sm:w-10 sm:text-sm",
+  title: "truncate text-sm font-semibold text-foreground sm:text-[15px]",
  meta: "text-xs text-muted-foreground",
  detailLabel:
-    "text-[11px] font-medium uppercase tracking-wide text-muted-foreground",
-  detailValue: "mt-0.5 text-sm text-foreground",
-  footer: "mt-auto border-t border-border bg-muted/20 px-3 py-2.5",
-  skeleton: "animate-pulse rounded-lg border border-border bg-muted/30 p-4",
+    "text-[10px] font-medium uppercase tracking-wide text-muted-foreground sm:text-[11px]",
+  detailValue: "mt-0.5 text-xs text-foreground sm:text-sm",
+  footer: "mt-auto border-t border-border bg-muted/20 px-2 py-2 sm:px-3 sm:py-2.5",
+  skeleton: "animate-pulse rounded-lg border border-border bg-muted/30 p-3 sm:p-4",
 } as const;

 export const ruleEngineTable = {
--- a/apps/edr-freight-web/backoffice/src/main.tsx
+++ b/apps/edr-freight-web/backoffice/src/main.tsx
@@ -1,6 +1,8 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
+import { MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
 import "@edr/ui-common/styles.css";
 import "../index.css";
 import "@edr/ui-common/theme.css";
@@ -41,14 +43,15 @@ if (!rootElement) {

 createRoot(rootElement).render(
  <QueryClientProvider client={queryClient}>
-
-  <StrictMode>
-    <BrowserRouter>
-      <AuthProvider>
-        <App />
-        <Toaster position="top-right" />
-      </AuthProvider>
-    </BrowserRouter>
-  </StrictMode>,
+    <MantineProvider>
+      <StrictMode>
+        <BrowserRouter>
+          <AuthProvider>
+            <App />
+            <Toaster position="top-right" />
+          </AuthProvider>
+        </BrowserRouter>
+      </StrictMode>
+    </MantineProvider>
  </QueryClientProvider>
 );
--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx
@@ -4,16 +4,14 @@ import { useAuth } from "@/auth/useAuth";
 import { canAccessRuleEngineResource } from "@/lib/permissions";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Loader2 } from "lucide-react";
+import { Card, Button, Modal, Stack, Group, Text, List } from "@mantine/core";

 import RuleEngineCardGrid from "@/components/ruleEngine/RuleEngineCardGrid";
 import RuleEngineFormDialog from "@/components/ruleEngine/RuleEngineFormDialog";
 import RuleEngineRecordActions from "@/components/ruleEngine/RuleEngineRecordActions";
 import RuleEngineToolbar from "@/components/ruleEngine/RuleEngineToolbar";
 import { formatCell } from "@/components/ruleEngine/ruleEngineFormat";
-import {
-  ruleEngineSurface,
-  ruleEngineTable,
-} from "@/components/ruleEngine/ruleEngineStyles";
+import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import { useRuleEngineViewMode } from "@/components/ruleEngine/useRuleEngineViewMode";
 import {
  DEFAULT_CONFIGURATION_SLUG,
@@ -34,15 +32,8 @@ import {
 } from "@/hooks/rule-engine/useRuleEngine";
 import type { RuleEngineRecord } from "@/types/rule-engine";
 import {
-  Button,
-  Card,
  DataTable,
  DataTableFooter,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
  getCoreRowModel,
  usePagination,
  useReactTable,
@@ -177,15 +168,6 @@ const RuleEngineResourcePage = () => {
    [filteredRows.length, meta?.total, pageCount, pagination.pageIndex, pagination.pageSize],
  );

-  const cardTable = useReactTable({
-    data: filteredRows,
-    columns: [] as ColumnDef<RuleEngineRecord>[],
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    pageCount,
-    state: { pagination },
-    onPaginationChange: setPagination,
-  });

  const handleApproveRate = useCallback(
    (record: RuleEngineRecord) => {
@@ -284,9 +266,9 @@ const RuleEngineResourcePage = () => {
  const itemLabel = config.label.toLowerCase();

  return (
-    <div>
-      <Card className={ruleEngineSurface.pageCard}>
-        <div className={ruleEngineSurface.pageCardToolbar}>
+    <Stack gap="lg">
+      <Card p="lg" radius="lg" withBorder style={{ background: "white", boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)" }}>
+        <Stack gap="md">
          <RuleEngineToolbar
            search={search}
            onSearchChange={(v) => {
@@ -299,65 +281,64 @@ const RuleEngineResourcePage = () => {
            viewMode={viewMode}
            onViewModeChange={setViewMode}
          />
-        </div>

-        {viewMode === "table" ? (
-          <DataTable
-            columns={columns}
-            data={filteredRows}
-            status={tableStatus}
-            error={
-              isError
-                ? {
-                    message: "Failed to load data",
-                    description:
-                      error instanceof Error ? error.message : "Unknown error",
-                  }
-                : undefined
-            }
-            emptyMessage={`No ${itemLabel} found.`}
-            pagination={paginationState}
-            tableOptions={{
-              manualPagination: true,
-              pageCount,
-              state: { pagination },
-              onPaginationChange: setPagination,
-            }}
-            containerClassName="border-0 shadow-none [&_[data-slot=table-row]]:border-border"
-            footerClassName="border-t border-border bg-card"
-            footer={({ table, pagination: footerPagination }) => (
-              <DataTableFooter
-                table={table}
-                pagination={footerPagination}
-                options={{
-                  labels: {
-                    showing: "Showing",
-                    ofLabel: "of",
-                    items: itemLabel,
-                  },
-                }}
-              />
-            )}
-          />
-        ) : (
-          <RuleEngineCardGrid
-            config={config}
-            rows={filteredRows}
-            status={tableStatus}
-            emptyMessage={`No ${itemLabel} found.`}
-            itemLabel={itemLabel}
-            table={cardTable}
-            pagination={paginationState}
-            readOnly={!canManage}
-            onEdit={canManage ? openEdit : undefined}
-            onDelete={canManage ? setDeleteTarget : undefined}
-            onViewChain={
-              config.slug === "approval-rules" ? () => setChainOpen(true) : undefined
-            }
-            onSubmitRate={canManage ? (id) => submit.mutate(id) : undefined}
-            onApproveRate={canManage ? handleApproveRate : undefined}
-          />
-        )}
+          {viewMode === "table" ? (
+            <DataTable
+              columns={columns}
+              data={filteredRows}
+              status={tableStatus}
+              error={
+                isError
+                  ? {
+                      message: "Failed to load data",
+                      description:
+                        error instanceof Error ? error.message : "Unknown error",
+                    }
+                  : undefined
+              }
+              emptyMessage={`No ${itemLabel} found.`}
+              pagination={paginationState}
+              tableOptions={{
+                manualPagination: true,
+                pageCount,
+                state: { pagination },
+                onPaginationChange: setPagination,
+              }}
+              containerClassName="border-0 shadow-none [&_[data-slot=table-row]]:border-border"
+              footerClassName="border-t border-border bg-card"
+              footer={({ table, pagination: footerPagination }) => (
+                <DataTableFooter
+                  table={table}
+                  pagination={footerPagination}
+                  options={{
+                    labels: {
+                      showing: "Showing",
+                      ofLabel: "of",
+                      items: itemLabel,
+                    },
+                  }}
+                />
+              )}
+            />
+          ) : (
+            <RuleEngineCardGrid
+              config={config}
+              rows={filteredRows}
+              status={tableStatus}
+              emptyMessage={`No ${itemLabel} found.`}
+              itemLabel={itemLabel}
+              pagination={paginationState}
+              readOnly={!canManage}
+              onEdit={canManage ? openEdit : undefined}
+              onDelete={canManage ? setDeleteTarget : undefined}
+              onViewChain={
+                config.slug === "approval-rules" ? () => setChainOpen(true) : undefined
+              }
+              onSubmitRate={canManage ? (id) => submit.mutate(id) : undefined}
+              onApproveRate={canManage ? handleApproveRate : undefined}
+            />
+          )}
+        </Stack>
      </Card>

      <RuleEngineFormDialog
@@ -380,20 +361,23 @@ const RuleEngineResourcePage = () => {
        onSubmit={handleFormSubmit}
      />

-      <Dialog open={Boolean(deleteTarget)} onOpenChange={(o) => !o && setDeleteTarget(null)}>
-        <DialogContent className={ruleEngineSurface.dialogSm}>
-          <DialogHeader>
-            <DialogTitle>Delete record?</DialogTitle>
-            <DialogDescription>
-              This will soft-delete the selected {config.label.toLowerCase()} record.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
+      <Modal
+        opened={Boolean(deleteTarget)}
+        onClose={() => setDeleteTarget(null)}
+        title="Delete record?"
+        centered
+        size="sm"
+      >
+        <Stack gap="md">
+          <Text size="sm">
+            This will soft-delete the selected {config.label.toLowerCase()} record.
+          </Text>
+          <Group justify="flex-end" gap="sm">
+            <Button variant="default" onClick={() => setDeleteTarget(null)}>
              Cancel
            </Button>
            <Button
-              variant="destructive"
+              color="red"
              disabled={remove.isPending}
              onClick={() => {
                if (!deleteTarget) return;
@@ -401,47 +385,51 @@ const RuleEngineResourcePage = () => {
                  onSuccess: () => setDeleteTarget(null),
                });
              }}
+              leftSection={remove.isPending && <Loader2 size={16} />}
            >
-              {remove.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : "Delete"}
+              {remove.isPending ? "Deleting..." : "Delete"}
            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
+          </Group>
+        </Stack>
+      </Modal>

-      <Dialog open={chainOpen} onOpenChange={setChainOpen}>
-        <DialogContent className={ruleEngineSurface.dialog}>
-          <DialogHeader>
-            <DialogTitle>Approval chain</DialogTitle>
-            <DialogDescription>Configured approval steps from the API.</DialogDescription>
-          </DialogHeader>
+      <Modal
+        opened={chainOpen}
+        onClose={() => setChainOpen(false)}
+        title="Approval chain"
+        centered
+        size="md"
+      >
+        <Stack gap="md">
          {chainLoading ? (
-            <div className="flex justify-center py-8">
-              <Loader2 className="h-8 w-8 animate-spin text-primary" />
-            </div>
+            <Group justify="center" p="xl">
+              <Loader2 size={32} style={{ animation: "spin 1s linear infinite" }} />
+            </Group>
          ) : (
-            <ol className="space-y-3">
+            <>
              {(chainData ?? []).length === 0 ? (
-                <p className="text-sm text-muted-foreground">No approval rules configured.</p>
+                <Text size="sm" c="dimmed">No approval rules configured.</Text>
              ) : (
-                (chainData ?? []).map((step, index) => (
-                  <li
-                    key={String(step.id ?? index)}
-                    className="rounded-md border border-border bg-muted/30 px-4 py-3 text-sm"
-                  >
-                    <p className="font-medium text-foreground">
-                      Step {String(step.stepOrder ?? index + 1)}: {String(step.actionLabel ?? "")}
-                    </p>
-                    <p className="text-muted-foreground">
-                      Role: {String(step.requiredRole ?? "—")}
-                    </p>
-                  </li>
-                ))
+                <List spacing="md">
+                  {(chainData ?? []).map((step, index) => (
+                    <List.Item key={String(step.id ?? index)}>
+                      <Stack gap="xs">
+                        <Text size="sm" fw={500}>
+                          Step {String(step.stepOrder ?? index + 1)}: {String(step.actionLabel ?? "")}
+                        </Text>
+                        <Text size="sm" c="dimmed">
+                          Role: {String(step.requiredRole ?? "—")}
+                        </Text>
+                      </Stack>
+                    </List.Item>
+                  ))}
+                </List>
              )}
-            </ol>
+            </>
          )}
-        </DialogContent>
-      </Dialog>
-    </div>
+        </Stack>
+      </Modal>
+    </Stack>
  );
 };

--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
+++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
@@ -270,6 +270,8 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
    category: "rules",
    subtitle: "VGM limits by container and trade direction",
    searchPlaceholder: "Search weight limit rules...",
+    cardTitleKey: "containerType",
+    cardSubtitleKey: "tradeDirection",
    columns: [
      {
        id: "containerType",
--- a/apps/edr-passenger-api/src/main.ts
+++ b/apps/edr-passenger-api/src/main.ts
@@ -27,9 +27,9 @@ async function bootstrap() {
  SwaggerModule.setup("api/docs", app, document);

  const port = parseInt(process.env.PORT ?? "3002", 10);
-  await app.listen(port);
+  await app.listen(port, "0.0.0.0");
  // eslint-disable-next-line no-console
-  console.log(`[passenger-api] listening on http://localhost:${port}`);
+  console.log(`[passenger-api] listening on port ${port}`);
 }

 bootstrap();
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -184,6 +184,15 @@ importers:
      '@edr/ui-common':
        specifier: workspace:*
        version: link:../../../packages/ui-common
+      '@mantine/core':
+        specifier: ^9.3.0
+        version: 9.3.0(@mantine/hooks@9.3.0(react@19.2.6))(@types/react@18.3.29)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mantine/hooks':
+        specifier: ^9.3.0
+        version: 9.3.0(react@19.2.6)
+      '@tabler/icons-react':
+        specifier: ^3.44.0
+        version: 3.44.0(react@19.2.6)
      '@tanstack/react-query':
        specifier: ^5.100.11
        version: 5.100.11(react@19.2.6)
@@ -1720,6 +1729,13 @@ packages:
      react: 19.2.6
      react-dom: 19.2.6

+  '@mantine/core@9.3.0':
+    resolution: {integrity: sha512-mHVCm61YVW9ipy9eHiKMqsRUm3TkOErbdw7zHs0HRw5g403nf7tSTqNGvaYE+aX1Py874qMkrUzeQfj4bjiiBA==}
+    peerDependencies:
+      '@mantine/hooks': 9.3.0
+      react: 19.2.6
+      react-dom: 19.2.6
+
  '@mantine/dates@8.3.18':
    resolution: {integrity: sha512-FHx5teJOhupI0gO2o5evtVYQEdqOjayOkLRhEQfB5Nc5DvcysfPfmNILGkc1Nrp9ZQeQWKLT9qr+CkcCXwHOaw==}
    peerDependencies:
@@ -1734,6 +1750,11 @@ packages:
    peerDependencies:
      react: 19.2.6

+  '@mantine/hooks@9.3.0':
+    resolution: {integrity: sha512-QoSr9WI4WsKWrM3qFYYizHUn3+n+CVcFMYe4sdlnmFPStvs6BacPODKJSbFlYl73Z20t82JIy0eKqt4noHQI2g==}
+    peerDependencies:
+      react: 19.2.6
+
  '@mapbox/node-pre-gyp@1.0.11':
    resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
    hasBin: true
@@ -4757,6 +4778,8 @@ packages:
  axios@1.16.1:
    resolution: {integrity: sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==}

+  axios@1.17.0: {}
+
  b4a@1.8.1:
    resolution: {integrity: sha512-aiqre1Nr0B/6DgE2N5vwTc+2/oQZ4Wh1t4NznYY4E00y8LCt6NqdRv81so00oo27D8MVKTpUa/MwUUtBLXCoDw==}
    peerDependencies:
@@ -11805,6 +11828,19 @@ snapshots:
    transitivePeerDependencies:
      - '@types/react'

+  '@mantine/core@9.3.0(@mantine/hooks@9.3.0(react@19.2.6))(@types/react@18.3.29)(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': 9.3.0(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.29)(react@19.2.6)
+      type-fest: 5.6.0
+    transitivePeerDependencies:
+      - '@types/react'
+
  '@mantine/dates@8.3.18(@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@19.2.6))(@types/react@18.3.29)(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.29)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -11818,6 +11854,10 @@ snapshots:
    dependencies:
      react: 19.2.6

+  '@mantine/hooks@9.3.0(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+
  '@mapbox/node-pre-gyp@1.0.11':
    dependencies:
      detect-libc: 2.1.2
@@ -16762,6 +16802,10 @@ snapshots:
    optionalDependencies:
      source-map: 0.6.1

+  eslint-config-prettier@10.1.8(eslint@9.39.4(jiti@2.7.0)):
+    dependencies:
+      eslint: 9.39.4(jiti@2.7.0)
+
  eslint-config-prettier@9.1.2(eslint@8.57.1):
    dependencies:
      eslint: 8.57.1