Merge pull request #110 from Tria-plc/freight_feature/change_to_mantine

Freight feature/change to mantine

apps/edr-freight-api/src/main.ts

@@ -18,6 +18,7 @@ async function bootstrap() {
   // freight portal (5173), passenger portal (5174), backoffices (5183/5184)
   // and any other dev port can call the API with cookies + Authorization.
   // For production, restrict `origin` to known FQDNs.
+  
   app.enableCors({
     origin: true, // reflect request origin
     credentials: true,
@@ -52,9 +53,12 @@ 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();

apps/edr-freight-api/src/modules/bookings/booking-list-tabs.config.ts

@@ -25,10 +25,10 @@ export const BOOKING_LIST_TABS: ReadonlyArray<{
     key: 'approved_contract',
     statuses: ['APPROVED', 'CONTRACT_READY', 'SIGNED_CUSTOMER', 'FULLY_EXECUTED'],
   },
-  { key: 'payment', statuses: ['FULLY_EXECUTED', 'PAID'] },
+  { key: 'payment', statuses: ['FULLY_EXECUTED'] },
   {
     key: 'operations',
-    statuses: ['IN_TRANSIT', 'PENDING_CONSOLIDATION', 'CONSOLIDATED'],
+    statuses: ['IN_TRANSIT', 'PENDING_CONSOLIDATION', 'CONSOLIDATED','PAID'],
   },
   { key: 'completed', statuses: ['COMPLETED'] },
   { key: 'closed', statuses: ['REJECTED', 'CANCELLED'] },

apps/edr-freight-api/src/modules/bookings/booking-next-step.util.ts

@@ -34,8 +34,8 @@ export function computeNextStep(
       };
     case 'APPROVED':
       return {
-        action: 'GENERATE_CONTRACT',
-        description: 'Generate the contract document',
+        action: 'CUSTOMER_SIGN',
+        description: 'Contract generated; customer must sign',
       };
     case 'CONTRACT_READY':
       return {
@@ -49,8 +49,8 @@ export function computeNextStep(
       };
     case 'FULLY_EXECUTED':
       return {
-        action: 'PAY',
-        description: 'Complete in-app payment',
+        action: 'AWAIT_PAYMENT',
+        description: 'Awaiting customer payment',
       };
     case 'PAID':
       return {

apps/edr-freight-api/src/modules/bookings/booking-transition.service.ts

@@ -185,6 +185,11 @@ export class BookingTransitionService {
       await this.bookingsRepository.update(bookingId, updates as never);
     }
 
+    if (allDone) {
+      const generated = await this.contractService.generateContract(bookingId);
+      return this.bookingsService.findById(generated.id);
+    }
+
     return this.bookingsService.findById(bookingId);
   }
 

apps/edr-freight-api/src/modules/wagon-types/dto/create-wagon-type.dto.ts

@@ -0,0 +1,67 @@
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+import { Transform } from 'class-transformer';
+import {
+  IsArray,
+  IsBoolean,
+  IsInt,
+  IsNumber,
+  IsOptional,
+  IsString,
+  MaxLength,
+  Min,
+} from 'class-validator';
+
+const parseLoadTypes = (value: unknown): string[] => {
+  if (Array.isArray(value)) {
+    return value.map((item) => String(item).trim()).filter(Boolean);
+  }
+  if (typeof value === 'string') {
+    return value
+      .split(',')
+      .map((item) => item.trim())
+      .filter(Boolean);
+  }
+  return [];
+};
+
+export class CreateWagonTypeDto {
+  @ApiProperty({ description: 'Display name, e.g. "Flat Wagon"', maxLength: 100 })
+  @IsString()
+  @MaxLength(100)
+  name!: string;
+
+  @ApiProperty({ description: 'Maximum payload capacity in metric tons' })
+  @IsNumber()
+  @Min(0.001)
+  @Transform(({ value }) => Number(value))
+  capacityTons!: number;
+
+  @ApiProperty({ description: 'Wagon length in meters' })
+  @IsNumber()
+  @Min(0.001)
+  @Transform(({ value }) => Number(value))
+  lengthMeters!: number;
+
+  @ApiPropertyOptional({ description: 'Maximum wagons of this type per train' })
+  @IsOptional()
+  @IsInt()
+  @Min(1)
+  @Transform(({ value }) => (value === '' || value === null || value === undefined ? undefined : Number(value)))
+  maxWagonsPerTrain?: number;
+
+  @ApiPropertyOptional({
+    description: 'Supported load types, e.g. CONTAINER,BULK',
+    type: [String],
+    default: [],
+  })
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  @Transform(({ value }) => parseLoadTypes(value))
+  supportedLoadTypes?: string[];
+
+  @ApiPropertyOptional({ default: true })
+  @IsOptional()
+  @IsBoolean()
+  isActive?: boolean;
+}

apps/edr-freight-api/src/modules/wagon-types/dto/update-wagon-type.dto.ts

@@ -0,0 +1,5 @@
+import { PartialType } from '@nestjs/mapped-types';
+
+import { CreateWagonTypeDto } from './create-wagon-type.dto';
+
+export class UpdateWagonTypeDto extends PartialType(CreateWagonTypeDto) {}

apps/edr-freight-api/src/modules/wagon-types/wagon-types.controller.ts

@@ -1,16 +1,67 @@
-import { Controller, Get } from '@nestjs/common';
-import { ApiTags, ApiOperation } from '@nestjs/swagger';
-import { WagonTypesService } from './wagon-types.service';
-import { WagonType } from './entities/wagon-type.entity';
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  HttpCode,
+  HttpStatus,
+  Param,
+  ParseUUIDPipe,
+  Patch,
+  Post,
+  Query,
+} from '@nestjs/common';
+import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 
-@ApiTags('Wagon Types')
+import { RuleEngineManage, RuleEngineView } from '../../common/rule-engine-guards';
+
+import { CreateWagonTypeDto } from './dto/create-wagon-type.dto';
+import { UpdateWagonTypeDto } from './dto/update-wagon-type.dto';
+import { WagonTypesService } from './wagon-types.service';
+
+@ApiTags('wagon-types')
 @Controller('wagon-types')
+@ApiBearerAuth()
 export class WagonTypesController {
   constructor(private readonly wagonTypesService: WagonTypesService) {}
 
   @Get()
-  @ApiOperation({ summary: 'Get all active wagon types' })
-  async findAll(): Promise<WagonType[]> {
-    return this.wagonTypesService.findAll();
+  @RuleEngineView('wagon-types')
+  @ApiOperation({ summary: 'List wagon types' })
+  findAll(@Query() query: Record<string, string>) {
+    return this.wagonTypesService.findAll({
+      isActive: query['isActive'] !== undefined ? query['isActive'] === 'true' : undefined,
+      page: query['page'] ? parseInt(query['page'], 10) : undefined,
+      pageSize: query['pageSize'] ? parseInt(query['pageSize'], 10) : undefined,
+    });
   }
-}
+
+  @Get(':id')
+  @RuleEngineView('wagon-types')
+  @ApiOperation({ summary: 'Get a wagon type by ID' })
+  findOne(@Param('id', ParseUUIDPipe) id: string) {
+    return this.wagonTypesService.findById(id);
+  }
+
+  @Post()
+  @RuleEngineManage('wagon-types')
+  @ApiOperation({ summary: 'Create a wagon type' })
+  create(@Body() dto: CreateWagonTypeDto) {
+    return this.wagonTypesService.create(dto);
+  }
+
+  @Patch(':id')
+  @RuleEngineManage('wagon-types')
+  @ApiOperation({ summary: 'Update a wagon type' })
+  update(@Param('id', ParseUUIDPipe) id: string, @Body() dto: UpdateWagonTypeDto) {
+    return this.wagonTypesService.update(id, dto);
+  }
+
+  @Delete(':id')
+  @RuleEngineManage('wagon-types')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  @ApiOperation({ summary: 'Soft-delete a wagon type' })
+  remove(@Param('id', ParseUUIDPipe) id: string) {
+    return this.wagonTypesService.remove(id);
+  }
+}

apps/edr-freight-api/src/modules/wagon-types/wagon-types.repository.ts

@@ -13,4 +13,8 @@ export class WagonTypesRepository extends BaseRepository<WagonType> {
   ) {
     super(repository);
   }
+
+  findByCode(code: string): Promise<WagonType | null> {
+    return this.repository.findOne({ where: { code } });
+  }
 }

apps/edr-freight-api/src/modules/wagon-types/wagon-types.service.ts

@@ -1,5 +1,13 @@
-import { Injectable, NotFoundException } from '@nestjs/common';
+import {
+  ConflictException,
+  Injectable,
+  NotFoundException,
+} from '@nestjs/common';
 
+import { generateCode } from '../../common/utils/generate-code.util';
+
+import { CreateWagonTypeDto } from './dto/create-wagon-type.dto';
+import { UpdateWagonTypeDto } from './dto/update-wagon-type.dto';
 import { WagonType } from './entities/wagon-type.entity';
 import { WagonTypesRepository } from './wagon-types.repository';
 
@@ -7,20 +15,86 @@ import { WagonTypesRepository } from './wagon-types.repository';
 export class WagonTypesService {
   constructor(private readonly wagonTypesRepository: WagonTypesRepository) {}
 
-  async findAll(): Promise<WagonType[]> {
-    return this.wagonTypesRepository.findAll({
-      where: { isActive: true },
+  async findAll(filter: {
+    isActive?: boolean;
+    page?: number;
+    pageSize?: number;
+  } = {}): Promise<{
+    data: WagonType[];
+    meta: { total: number; page: number; pageSize: number; totalPages: number };
+  }> {
+    const page = filter.page ?? 1;
+    const pageSize = filter.pageSize ?? 20;
+    const where: Record<string, unknown> = {};
+    if (filter.isActive !== undefined) {
+      where.isActive = filter.isActive;
+    }
+
+    const [data, total] = await this.wagonTypesRepository.findAndCount({
+      where,
       order: { code: 'ASC' },
+      skip: (page - 1) * pageSize,
+      take: pageSize,
     });
+
+    return {
+      data,
+      meta: {
+        total,
+        page,
+        pageSize,
+        totalPages: Math.max(1, Math.ceil(total / pageSize)),
+      },
+    };
+  }
+
+  async findById(id: string): Promise<WagonType> {
+    const wagonType = await this.wagonTypesRepository.findById(id);
+    if (!wagonType) {
+      throw new NotFoundException(`Wagon type ${id} not found`);
+    }
+    return wagonType;
   }
 
   async findByCode(code: string): Promise<WagonType> {
-    const [wagonType] = await this.wagonTypesRepository.findAll({ where: { code } });
-
+    const wagonType = await this.wagonTypesRepository.findByCode(code);
     if (!wagonType) {
       throw new NotFoundException(`Wagon type ${code} not found`);
     }
-
     return wagonType;
   }
+
+  async create(dto: CreateWagonTypeDto): Promise<WagonType> {
+    const code = generateCode(dto.name);
+    const existing = await this.wagonTypesRepository.findByCode(code);
+    if (existing) {
+      throw new ConflictException(
+        `Wagon type with name "${dto.name}" conflicts with existing code "${code}"`,
+      );
+    }
+
+    return this.wagonTypesRepository.create({
+      code,
+      name: dto.name,
+      capacityTons: dto.capacityTons,
+      lengthMeters: dto.lengthMeters,
+      maxWagonsPerTrain: dto.maxWagonsPerTrain ?? null,
+      supportedLoadTypes: dto.supportedLoadTypes ?? [],
+      isActive: dto.isActive ?? true,
+    });
+  }
+
+  async update(id: string, dto: UpdateWagonTypeDto): Promise<WagonType> {
+    await this.findById(id);
+    const updated = await this.wagonTypesRepository.update(id, dto);
+    if (!updated) {
+      throw new NotFoundException(`Wagon type ${id} not found`);
+    }
+    return updated;
+  }
+
+  async remove(id: string): Promise<void> {
+    await this.findById(id);
+    await this.wagonTypesRepository.softDelete(id);
+  }
 }

apps/edr-freight-api/src/seed/freight-permissions.registry.ts

@@ -10,6 +10,7 @@ export type FreightPermissionSeed = {
 export const RULE_ENGINE_RESOURCE_SLUGS = [
   'cargo-types',
   'container-types',
+  'wagon-types',
   'service-types',
   'yards',
   'shipping-lines',
@@ -56,6 +57,7 @@ export const BOOKING_PERMISSIONS: FreightPermissionSeed[] = [
 const RULE_ENGINE_PERMISSION_IDS: Record<RuleEngineResourceSlug, { view: string; manage: string }> = {
   'cargo-types': { view: 'b2000001-0001-4000-8000-000000000001', manage: 'b2000001-0001-4000-8000-000000000002' },
   'container-types': { view: 'b2000001-0001-4000-8000-000000000003', manage: 'b2000001-0001-4000-8000-000000000004' },
+  'wagon-types': { view: 'b2000001-0001-4000-8000-000000000015', manage: 'b2000001-0001-4000-8000-000000000016' },
   'service-types': { view: 'b2000001-0001-4000-8000-000000000005', manage: 'b2000001-0001-4000-8000-000000000006' },
   yards: { view: 'b2000001-0001-4000-8000-000000000007', manage: 'b2000001-0001-4000-8000-000000000008' },
   'shipping-lines': { view: 'b2000001-0001-4000-8000-000000000009', manage: 'b2000001-0001-4000-8000-00000000000a' },

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",

apps/edr-freight-web/backoffice/index.css

@@ -1,6 +1,15 @@
 @import "tailwindcss";
 @import "@edr/ui-common/theme.css" layer(theme);
 
+:root {
+  --freight-brand: #15803d;
+  --freight-brand-dark: #166534;
+  --freight-brand-light: #22c55e;
+  --freight-brand-muted: #f0fdf4;
+  --freight-brand-border: #bbf7d0;
+  --freight-brand-ring: rgb(21 128 61 / 0.2);
+}
+
 html,
 body,
 #root {

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",
     "@hello-pangea/dnd": "^18.0.1",
     "@tanstack/react-query": "^5.100.11",
     "@tria-plc/iamui-common": "1.1.2",

apps/edr-freight-web/backoffice/src/App.tsx

@@ -35,16 +35,16 @@ import FileUploadSettingsPage from "./pages/documents/FileUploadSettingsPage";
 import RuleEngineLegacyRedirect from "./pages/ruleEngine/RuleEngineLegacyRedirect";
 import RuleEngineResourcePage from "./pages/ruleEngine/RuleEngineResourcePage";
 import TrainsPage from "./pages/trains/TrainsPage";
-import {
-  CargoesCrudPage,
-  ContainersCrudPage,
-  LocomotivesCrudPage,
-  TrainMasterDataPage,
-  WagonsCrudPage,
-} from "./pages/fleet/FleetCrudPages";
-import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
-import TrainDetailPage from "./pages/trains/TrainDetailPage";
-import RoutesPage from "./pages/fleet/RoutesPage";
+import {
+  CargoesCrudPage,
+  ContainersCrudPage,
+  LocomotivesCrudPage,
+  TrainMasterDataPage,
+  WagonsCrudPage,
+} from "./pages/fleet/FleetCrudPages";
+import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
+import TrainDetailPage from "./pages/trains/TrainDetailPage";
+import RoutesPage from "./pages/fleet/RoutesPage";
 
 const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
   {
@@ -56,41 +56,41 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         href: "/dashboard/overview",
         icon: <LayoutDashboard />,
       },
-      {
-        label: "Booking requests",
-        href: "/dashboard/booking-requests",
-        icon: <FileText />,
-      },
-      ...demoItems,
-    ],
-  },
-  {
-    title: "Operations",
-    items: [
-      {
-        label: "Train Schedules",
-        href: "/dashboard/operations/train-scheduling",
-        icon: <Train />,
-      },
-    ],
-  },
-  {
-    title: "Fleet Management",
-    items: [
-      {
-        label: "Routes",
-        href: "/dashboard/routes",
-        icon: <Network />,
-      },
-      {
-        label: "Locomotives",
-        href: "/dashboard/locomotives",
-        icon: <Train />,
-      },
-      {
-        label: "Trains",
-        href: "/dashboard/trains",
-        icon: <Train />,
+      {
+        label: "Booking requests",
+        href: "/dashboard/booking-requests",
+        icon: <FileText />,
+      },
+      ...demoItems,
+    ],
+  },
+  {
+    title: "Operations",
+    items: [
+      {
+        label: "Train Schedules",
+        href: "/dashboard/operations/train-scheduling",
+        icon: <Train />,
+      },
+    ],
+  },
+  {
+    title: "Fleet Management",
+    items: [
+      {
+        label: "Routes",
+        href: "/dashboard/routes",
+        icon: <Network />,
+      },
+      {
+        label: "Locomotives",
+        href: "/dashboard/locomotives",
+        icon: <Train />,
+      },
+      {
+        label: "Trains",
+        href: "/dashboard/trains",
+        icon: <Train />,
       },
       {
         label: "Wagons",
@@ -240,10 +240,12 @@ const App = () => {
             path="booking-requests/:id/contract"
             element={<BookingContractPage />}
           />
-          <Route path="operations/train-scheduling" element={<TrainsPage />} />
-          <Route path="routes" element={<RoutesPage />} />
-          <Route path="locomotives" element={<LocomotivesCrudPage />} />
-          <Route path="trains" element={<TrainMasterDataPage />} />
+          <Route path="operations/train-scheduling" element={<TrainsPage />} />
+          <Route path="trains" element={<TrainMasterDataPage />} />
+          <Route path="operations/train-scheduling" element={<TrainsPage />} />
+          <Route path="routes" element={<RoutesPage />} />
+          <Route path="locomotives" element={<LocomotivesCrudPage />} />
+          <Route path="trains" element={<TrainMasterDataPage />} />
           <Route path="trains/:id" element={<TrainDetailPage />} />
           <Route path="wagons" element={<WagonsCrudPage />} />
           <Route path="containers" element={<ContainersCrudPage />} />

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

@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { Check, ShieldCheck } from "lucide-react";
+import { Stack, Group, Text, Badge, Button, Box } from "@mantine/core";
 
 import { BookingConfirmDialog } from "./BookingConfirmDialog";
 import { useAuth } from "@/auth/useAuth";
@@ -11,9 +12,7 @@ import {
 } from "@/features/bookings/booking-actions.config";
 import type { useBookingMutations } from "@/hooks/bookings/useBookings";
 import type { BookingApprovalStep, BookingDetail } from "@/types/booking";
-import { bookingGlass, bookingSurface } from "./booking-ui.styles";
-import { Badge, Button } from "@edr/ui-common";
-import { cn } from "@/lib/utils";
+import { SectionCard } from "./detail/SectionCard";
 
 type Mutations = ReturnType<typeof useBookingMutations>;
 
@@ -26,23 +25,16 @@ interface ApprovalStepsCardProps {
 export function ApprovalStepsCard({ booking, mutations }: ApprovalStepsCardProps) {
   const { user } = useAuth();
   const [confirmOpen, setConfirmOpen] = useState(false);
-  const [pendingStep, setPendingStep] = useState<BookingApprovalStep | null>(
-    null,
-  );
+  const [pendingStep, setPendingStep] = useState<BookingApprovalStep | null>(null);
 
   const steps = useMemo(
-    () =>
-      [...(booking.approvalSteps ?? [])].sort(
-        (a, b) => a.stepOrder - b.stepOrder,
-      ),
+    () => [...(booking.approvalSteps ?? [])].sort((a, b) => a.stepOrder - b.stepOrder),
     [booking.approvalSteps],
   );
 
   const nextPending = getNextPendingApprovalStep(steps);
   const summary = formatApprovalProgress(booking.status, steps);
-  const pendingAction = pendingStep
-    ? buildApproveActionForStep(pendingStep)
-    : null;
+  const pendingAction = pendingStep ? buildApproveActionForStep(pendingStep) : null;
 
   const openApprove = (step: BookingApprovalStep) => {
     setPendingStep(step);
@@ -62,54 +54,60 @@ export function ApprovalStepsCard({ booking, mutations }: ApprovalStepsCardProps
     );
   };
 
+  const subtitle =
+    summary.detail ||
+    (nextPending
+      ? `Next: ${nextPending.requiredRole} · step ${nextPending.stepOrder}`
+      : steps.length
+        ? "All steps complete"
+        : "Accept submission to begin");
+
   return (
     <>
-      <div className={cn(bookingSurface.sectionCard, bookingGlass.activeTab)}>
-        <div className={bookingSurface.sectionHeader}>
-          <div className={bookingSurface.sectionIcon}>
-            <ShieldCheck className="size-4" strokeWidth={1.75} />
-          </div>
-          <div>
-            <h2 className="text-sm font-semibold text-foreground">
-              Approval chain
-            </h2>
-            <p className="text-xs text-muted-foreground">
-              {summary.detail ||
-                (nextPending
-                  ? `Next: ${nextPending.requiredRole} · step ${nextPending.stepOrder}`
-                  : steps.length
-                    ? "All steps complete"
-                    : "Accept submission to begin")}
-            </p>
-          </div>
-        </div>
+      <SectionCard
+        icon={ShieldCheck}
+        title="Approval chain"
+        extra={
+          <Badge color="green" variant="light" radius="sm">
+            {steps.filter((s) => s.status === "APPROVED").length}/{steps.length}
+          </Badge>
+        }
+      >
+        <Text size="xs" c="dimmed" mb="sm">
+          {subtitle}
+        </Text>
 
-        <div className="px-5 py-5">
-          {steps.length === 0 ? (
-            <p className="rounded-lg border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-center text-sm text-muted-foreground backdrop-blur-sm">
-              Use{" "}
-              <strong className="font-semibold text-foreground">
-                Accept for approval
-              </strong>{" "}
-              in staff actions to instantiate steps.
-            </p>
-          ) : (
-            <ul className="space-y-2">
-              {steps.map((step) => (
-                <StepRow
-                  key={step.id}
-                  step={step}
-                  steps={steps}
-                  user={user}
-                  isNext={nextPending?.id === step.id}
-                  isPending={mutations.approveStep.isPending}
-                  onApprove={openApprove}
-                />
-              ))}
-            </ul>
-          )}
-        </div>
-      </div>
+        {steps.length === 0 ? (
+          <Text
+            size="sm"
+            c="dimmed"
+            ta="center"
+            py="lg"
+            px="md"
+            style={{
+              borderRadius: 8,
+              border: "1px dashed var(--mantine-color-gray-3)",
+              background: "var(--mantine-color-gray-0)",
+            }}
+          >
+            Use <strong>Accept for approval</strong> in staff actions to instantiate steps.
+          </Text>
+        ) : (
+          <Stack gap="xs">
+            {steps.map((step) => (
+              <StepRow
+                key={step.id}
+                step={step}
+                steps={steps}
+                user={user}
+                isNext={nextPending?.id === step.id}
+                isPending={mutations.approveStep.isPending}
+                onApprove={openApprove}
+              />
+            ))}
+          </Stack>
+        )}
+      </SectionCard>
 
       <BookingConfirmDialog
         open={confirmOpen}
@@ -144,64 +142,76 @@ function StepRow({
   onApprove: (step: BookingApprovalStep) => void;
 }) {
   const canApprove = canActOnApprovalStep(user, step, steps);
-  const statusStyles =
+  const statusColor =
     step.status === "APPROVED"
-      ? "border-emerald-500/25 bg-emerald-500/10 text-black"
+      ? "green"
       : step.status === "REJECTED"
-        ? "bg-red-500/10 text-red-800 dark:text-red-300"
+        ? "red"
         : isNext
-          ? "border-emerald-500/25 bg-emerald-500/10 text-black"
-          : "bg-muted/40 text-muted-foreground";
+          ? "green"
+          : "gray";
 
   return (
-    <li
-      className={cn(
-        "flex items-center justify-between gap-3 rounded-lg border px-4 py-3 transition-colors backdrop-blur-sm",
-        isNext ? bookingGlass.activeTab : "border-border/50 bg-card/60",
-      )}
+    <Group
+      justify="space-between"
+      wrap="nowrap"
+      gap="sm"
+      px="sm"
+      py="xs"
+      style={{
+        borderRadius: 8,
+        border: "1px solid var(--mantine-color-gray-2)",
+        borderLeft: isNext
+          ? "3px solid var(--freight-brand)"
+          : "1px solid var(--mantine-color-gray-2)",
+        background: isNext ? "var(--mantine-color-gray-0)" : "white",
+      }}
     >
-      <div className="flex min-w-0 items-center gap-3">
-        <span
-          className={cn(
-            "flex size-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold",
-            isNext
-              ? cn(bookingGlass.iconWellGreen, "text-black")
-              : "bg-muted/40 text-muted-foreground",
-          )}
+      <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+        <Box
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 28,
+            height: 28,
+            borderRadius: 8,
+            flexShrink: 0,
+            fontSize: 12,
+            fontWeight: 700,
+            background: "var(--mantine-color-gray-1)",
+            color: isNext ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-6)",
+          }}
         >
           {step.stepOrder}
-        </span>
-        <div className="min-w-0">
-          <p className="text-sm font-semibold text-foreground">
+        </Box>
+        <Box style={{ minWidth: 0 }}>
+          <Text size="sm" fw={600}>
             {step.requiredRole}
-          </p>
+          </Text>
           {step.remarks && (
-            <p className="truncate text-xs text-muted-foreground">
+            <Text size="xs" c="dimmed" truncate>
               {step.remarks}
-            </p>
+            </Text>
           )}
-        </div>
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
+        </Box>
+      </Group>
+      <Group gap="xs" wrap="nowrap" style={{ flexShrink: 0 }}>
         {canApprove && (
           <Button
-            type="button"
-            size="sm"
-            className="h-8 gap-1.5 shadow-sm"
+            size="compact-sm"
+            color="green"
+            leftSection={<Check size={14} />}
             disabled={isPending}
             onClick={() => onApprove(step)}
           >
-            <Check className="size-3.5" />
             Approve
           </Button>
         )}
-        <Badge
-          variant="outline"
-          className={cn("shrink-0 border text-[9px] uppercase", statusStyles)}
-        >
+        <Badge variant="light" color={statusColor} size="sm" radius="sm" tt="uppercase">
           {step.status}
         </Badge>
-      </div>
-    </li>
+      </Group>
+    </Group>
   );
 }

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

@@ -1,10 +1,6 @@
 import { useNavigate } from "react-router-dom";
-import {
-  ChevronRight,
-  ExternalLink,
-  Loader2,
-  MoreHorizontal,
-} from "lucide-react";
+import { ChevronRight, ExternalLink, MoreHorizontal } from "lucide-react";
+import { Button, Menu, ActionIcon, Group, Text } from "@mantine/core";
 
 import { BookingConfirmDialog } from "./BookingConfirmDialog";
 import { useBookingActionDialog } from "./useBookingActionDialog";
@@ -16,16 +12,6 @@ import {
   type BookingActionContext,
 } from "@/features/bookings/booking-actions.config";
 import type { BookingListRow } from "@/types/booking";
-import { cn } from "@/lib/utils";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@edr/ui-common";
 
 interface BookingActionsMenuProps {
   row: BookingListRow;
@@ -39,7 +25,6 @@ interface BookingActionsMenuProps {
 export function BookingActionsMenu({
   row,
   variant = "table",
-  className,
   onSuppressRowClick,
 }: BookingActionsMenuProps) {
   const navigate = useNavigate();
@@ -57,184 +42,179 @@ export function BookingActionsMenu({
   const goToContract = () =>
     navigate(`/dashboard/booking-requests/${row.id}/contract`);
 
-  const hasMenu = listRowHasActions(row, user);
+  const handleAction = (action: (typeof actions)[number]) => {
+    onSuppressRowClick?.();
+    if (isContractNavAction(action.id)) {
+      goToContract();
+    } else {
+      flow.openAction(action);
+    }
+  };
 
+  const hasMenu = listRowHasActions(row, user);
   const primary = actions.find((a) => a.primary) ?? actions[0];
 
   if (!hasMenu && variant === "table") {
     return (
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-8 text-muted-foreground hover:text-primary"
+      <ActionIcon
+        variant="subtle"
+        color="gray"
         onClick={() => navigate(`/dashboard/booking-requests/${row.id}`)}
         aria-label="View booking"
       >
-        <ChevronRight className="size-4" />
-      </Button>
+        <ChevronRight size={16} />
+      </ActionIcon>
+    );
+  }
+
+  // Toolbar: lay every action out as a button row.
+  if (variant === "toolbar" && actions.length > 0) {
+    return (
+      <>
+        <Group gap="sm" w="100%">
+          {actions.map((action) => {
+            const Icon = action.icon;
+            const destructive = action.variant === "destructive";
+            return (
+              <Button
+                key={action.id}
+                size="sm"
+                variant={action.primary && !destructive ? "filled" : "default"}
+                color={destructive ? "red" : action.primary ? "green" : "gray"}
+                leftSection={<Icon size={16} />}
+                disabled={mutations.isPending}
+                onClick={() => handleAction(action)}
+              >
+                {action.label}
+              </Button>
+            );
+          })}
+        </Group>
+        <ActionDialog flow={flow} pendingAction={pendingAction} onSuppressRowClick={onSuppressRowClick} />
+      </>
     );
   }
 
   return (
-    <>
-      <div
-        data-stop-row-click
-        className={cn(
-          "flex w-full min-h-[2.5rem] items-center justify-end gap-1",
-          variant === "table" && "opacity-80 transition-opacity group-hover/tr:opacity-100",
-          className,
-        )}
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
-      >
-        {variant === "table" && primary && (
-          <Button
-            size="sm"
-            className="hidden h-8 gap-1.5 px-2.5 shadow-sm lg:inline-flex"
-            disabled={mutations.isPending}
-            onClick={() =>
-              isContractNavAction(primary.id)
-                ? goToContract()
-                : flow.openAction(primary)
-            }
+    <Group
+      gap={4}
+      justify="flex-end"
+      wrap="nowrap"
+      data-stop-row-click
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => e.stopPropagation()}
+    >
+      {variant === "table" && primary && (
+        <Button
+          size="compact-sm"
+          color="green"
+          visibleFrom="lg"
+          leftSection={<primary.icon size={14} />}
+          disabled={mutations.isPending}
+          onClick={() => handleAction(primary)}
+        >
+          {primary.shortLabel}
+        </Button>
+      )}
+
+      <Menu position="bottom-end" width={220} withinPortal>
+        <Menu.Target>
+          <ActionIcon
+            variant={variant === "table" ? "subtle" : "default"}
+            color="gray"
+            loading={mutations.isPending}
+            aria-label="Booking actions"
           >
-            <primary.icon className="size-3.5" />
-            {primary.shortLabel}
-          </Button>
-        )}
-
-        {variant === "toolbar" && actions.length > 0 ? (
-          <div className="flex w-full flex-wrap gap-2">
-            {actions.map((action) => {
-              const Icon = action.icon;
-              return (
-                <Button
-                  key={action.id}
-                  size="sm"
-                  variant={
-                    action.variant === "destructive"
-                      ? "outline"
-                      : action.primary
-                        ? "default"
-                        : "outline"
-                  }
-                  className={cn(
-                    "gap-2 shadow-sm",
-                    action.variant === "destructive" &&
-                      "border-red-200 text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30",
-                  )}
-                  disabled={mutations.isPending}
-                  onClick={() =>
-                    isContractNavAction(action.id)
-                      ? goToContract()
-                      : flow.openAction(action)
-                  }
-                >
-                  <Icon className="size-4" />
-                  {action.label}
-                </Button>
-              );
-            })}
-          </div>
-        ) : (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant={variant === "table" ? "ghost" : "outline"}
-              size={variant === "table" ? "icon" : "sm"}
-              className={cn(
-                variant === "table" ? "size-8" : "gap-2",
-                "shrink-0",
-              )}
-              disabled={mutations.isPending}
-              aria-label="Booking actions"
-            >
-              {mutations.isPending ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <MoreHorizontal className="size-4" />
-              )}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuLabel className="font-mono text-xs text-muted-foreground">
+            <MoreHorizontal size={16} />
+          </ActionIcon>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Label>
+            <Text size="xs" ff="monospace" c="dimmed">
               {row.reference}
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            {actions.map((action) => {
-              const Icon = action.icon;
-              return (
-                <DropdownMenuItem
-                  key={action.id}
-                  className={cn(
-                    "gap-2 cursor-pointer",
-                    action.variant === "destructive" && "text-red-700 focus:text-red-700",
-                  )}
-                  onSelect={(event) => {
-                    event.preventDefault();
-                    onSuppressRowClick?.();
-                    if (isContractNavAction(action.id)) {
-                      goToContract();
-                    } else {
-                      flow.openAction(action);
-                    }
-                  }}
-                >
-                  <Icon className="size-4 opacity-70" />
-                  <span>{action.label}</span>
-                </DropdownMenuItem>
-              );
-            })}
-            {actions.length > 0 && <DropdownMenuSeparator />}
-            <DropdownMenuItem
-              className="gap-2 cursor-pointer"
-              onSelect={(event) => {
-                event.preventDefault();
-                onSuppressRowClick?.();
-                navigate(`/dashboard/booking-requests/${row.id}`);
-              }}
-            >
-              <ExternalLink className="size-4 opacity-70" />
-              Open full details
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        )}
-      </div>
+            </Text>
+          </Menu.Label>
+          {actions.map((action) => {
+            const Icon = action.icon;
+            return (
+              <Menu.Item
+                key={action.id}
+                color={action.variant === "destructive" ? "red" : undefined}
+                leftSection={<Icon size={15} />}
+                onClick={() => handleAction(action)}
+              >
+                {action.label}
+              </Menu.Item>
+            );
+          })}
+          {actions.length > 0 && <Menu.Divider />}
+          <Menu.Item
+            leftSection={<ExternalLink size={15} />}
+            onClick={() => {
+              onSuppressRowClick?.();
+              navigate(`/dashboard/booking-requests/${row.id}`);
+            }}
+          >
+            Open full details
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
 
-      <BookingConfirmDialog
-        open={flow.dialogOpen}
-        onOpenChange={(open) => {
-          if (!open) onSuppressRowClick?.();
-          flow.setDialogOpen(open);
-        }}
-        action={pendingAction}
-        reference={flow.mergedContext.reference}
-        inputValue={flow.inputValue}
-        onInputChange={flow.setInputValue}
-        selectedFile={flow.selectedFile}
-        onFileChange={flow.setSelectedFile}
-        onConfirm={() => {
-          onSuppressRowClick?.();
-          flow.runAction();
-        }}
-        isPending={mutations.isPending || flow.detailLoading}
-        confirmDisabled={flow.confirmDisabled}
-        extra={
-          flow.detailLoading ? (
-            <p className="flex items-center gap-2 text-sm text-muted-foreground">
-              <Loader2 className="size-4 animate-spin" />
-              Loading approval steps…
-            </p>
-          ) : pendingAction?.id === "approve" &&
-            !getNextPendingApprovalStep(flow.mergedContext.approvalSteps) ? (
-            <p className="rounded-lg border border-amber-200/80 bg-amber-50/50 px-3 py-2 text-sm text-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
-              No pending approval step. Refresh the page after staff accept, or
-              reject the booking.
-            </p>
-          ) : null
-        }
-      />
-    </>
+      <ActionDialog flow={flow} pendingAction={pendingAction} onSuppressRowClick={onSuppressRowClick} />
+    </Group>
+  );
+}
+
+function ActionDialog({
+  flow,
+  pendingAction,
+  onSuppressRowClick,
+}: {
+  flow: ReturnType<typeof useBookingActionDialog>;
+  pendingAction: ReturnType<typeof useBookingActionDialog>["pendingAction"];
+  onSuppressRowClick?: () => void;
+}) {
+  return (
+    <BookingConfirmDialog
+      open={flow.dialogOpen}
+      onOpenChange={(open) => {
+        if (!open) onSuppressRowClick?.();
+        flow.setDialogOpen(open);
+      }}
+      action={pendingAction}
+      reference={flow.mergedContext.reference}
+      inputValue={flow.inputValue}
+      onInputChange={flow.setInputValue}
+      selectedFile={flow.selectedFile}
+      onFileChange={flow.setSelectedFile}
+      onConfirm={() => {
+        onSuppressRowClick?.();
+        flow.runAction();
+      }}
+      isPending={flow.mutations.isPending || flow.detailLoading}
+      confirmDisabled={flow.confirmDisabled}
+      extra={
+        flow.detailLoading ? (
+          <Text size="sm" c="dimmed">
+            Loading approval steps…
+          </Text>
+        ) : pendingAction?.id === "approve" &&
+          !getNextPendingApprovalStep(flow.mergedContext.approvalSteps) ? (
+          <Text
+            size="sm"
+            c="orange.9"
+            p="xs"
+            style={{
+              borderRadius: 8,
+              border: "1px solid var(--mantine-color-orange-2)",
+              background: "var(--mantine-color-orange-0)",
+            }}
+          >
+            No pending approval step. Refresh the page after staff accept, or reject the
+            booking.
+          </Text>
+        ) : null
+      }
+    />
   );
 }

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

@@ -1,12 +1,11 @@
-import { Download, Zap } from "lucide-react";
+import { Download, Zap, FileText, Clock } from "lucide-react";
+import { Stack, Text, Button } from "@mantine/core";
 
 import type { BookingDetail } from "@/types/booking";
 import { BookingActionsMenu } from "./BookingActionsMenu";
-import { bookingSurface } from "./booking-ui.styles";
+import { SectionCard } from "./detail/SectionCard";
 import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
 import type { useBookingMutations } from "@/hooks/bookings/useBookings";
-import { Button } from "@edr/ui-common";
-import { cn } from "@/lib/utils";
 
 type Mutations = ReturnType<typeof useBookingMutations>;
 
@@ -16,10 +15,7 @@ interface BookingActionsToolbarProps {
 }
 
 /** Detail-page actions: primary toolbar + downloads. */
-export function BookingActionsToolbar({
-  booking,
-  mutations,
-}: BookingActionsToolbarProps) {
+export function BookingActionsToolbar({ booking, mutations }: BookingActionsToolbarProps) {
   const row = toBookingListRow(booking);
   const { status } = booking;
 
@@ -33,50 +29,84 @@ export function BookingActionsToolbar({
     URL.revokeObjectURL(url);
   };
 
-  if (
-    status === "REJECTED" ||
-    status === "CANCELLED" ||
-    status === "COMPLETED"
-  ) {
+  if (status === "REJECTED" || status === "CANCELLED" || status === "COMPLETED") {
     return null;
   }
 
   if (status === "CHANGES_REQUESTED") {
     return (
-      <PanelShell title="Awaiting customer" description="No staff actions until resubmit.">
-        {booking.latestChangeRequestNote && (
-          <p className="rounded-lg border border-border/50 bg-muted/15 p-3 text-sm leading-relaxed backdrop-blur-sm">
-            {booking.latestChangeRequestNote}
-          </p>
-        )}
-      </PanelShell>
+      <SectionCard icon={Zap} title="Awaiting customer">
+        <Stack gap="sm">
+          <Text size="sm" c="dimmed">
+            No staff actions until resubmit.
+          </Text>
+          {booking.latestChangeRequestNote && (
+            <Text
+              size="sm"
+              p="sm"
+              style={{
+                borderRadius: 8,
+                border: "1px solid var(--mantine-color-gray-2)",
+                background: "var(--mantine-color-gray-0)",
+                lineHeight: 1.5,
+              }}
+            >
+              {booking.latestChangeRequestNote}
+            </Text>
+          )}
+        </Stack>
+      </SectionCard>
     );
   }
 
   if (["DRAFT", "PENDING_CONSOLIDATION", "CONSOLIDATED"].includes(status)) {
     return (
-      <PanelShell
-        title="No staff actions"
-        description="Monitor until the customer or system advances status."
-        muted
-      />
+      <SectionCard icon={Zap} title="No staff actions">
+        <Text size="sm" c="dimmed">
+          Monitor until the customer or system advances status.
+        </Text>
+      </SectionCard>
+    );
+  }
+
+  if (
+    ["FULLY_EXECUTED", "PNR_GENERATED", "PAYMENT_VERIFICATION_IN_PROGRESS"].includes(
+      status,
+    )
+  ) {
+    return (
+      <Stack gap="lg">
+        <SectionCard icon={Clock} title="Awaiting customer payment">
+          <Stack gap="sm">
+            <Text size="sm" c="dimmed">
+              Payment is completed by the customer. The booking status updates
+              automatically once payment is confirmed, then moves to Operations.
+            </Text>
+            {status === "FULLY_EXECUTED" && (
+              <BookingActionsMenu row={row} variant="toolbar" />
+            )}
+          </Stack>
+        </SectionCard>
+      </Stack>
     );
   }
 
   return (
-    <div className="space-y-4">
-      <PanelShell
-        title="Staff actions"
-        description="Confirm each step before it is applied."
-      >
-        <BookingActionsMenu row={row} variant="toolbar" />
-      </PanelShell>
+    <Stack gap="lg">
+      <SectionCard icon={Zap} title="Staff actions">
+        <Stack gap="sm">
+          <Text size="xs" c="dimmed">
+            Confirm each step before it is applied.
+          </Text>
+          <BookingActionsMenu row={row} variant="toolbar" />
+        </Stack>
+      </SectionCard>
 
       {status === "CONTRACT_READY" && (
-        <PanelShell title="Documents" description="Download generated contract.">
+        <SectionCard icon={FileText} title="Documents">
           <Button
-            variant="outline"
-            className="gap-2 border-border/60 bg-background/60 backdrop-blur-sm hover:bg-background/80"
+            variant="default"
+            leftSection={<Download size={16} />}
             onClick={() =>
               downloadBlob(
                 () => mutations.downloadContract(),
@@ -84,38 +114,10 @@ export function BookingActionsToolbar({
               )
             }
           >
-            <Download className="size-4" />
             Download contract
           </Button>
-        </PanelShell>
+        </SectionCard>
       )}
-    </div>
-  );
-}
-
-function PanelShell({
-  title,
-  description,
-  children,
-  muted,
-}: {
-  title: string;
-  description: string;
-  children: React.ReactNode;
-  muted?: boolean;
-}) {
-  return (
-    <div className={cn(bookingSurface.sectionCard, !muted && "ring-0")}>
-      <div className={bookingSurface.sectionHeader}>
-        <div className={bookingSurface.sectionIcon}>
-          <Zap className="size-4" strokeWidth={1.75} />
-        </div>
-        <div>
-          <h2 className="text-sm font-semibold text-foreground">{title}</h2>
-          <p className="text-xs text-muted-foreground">{description}</p>
-        </div>
-      </div>
-      <div className="flex flex-col gap-3 px-5 py-5">{children}</div>
-    </div>
+    </Stack>
   );
 }

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

@@ -14,7 +14,7 @@ export function BookingApprovalProgressCell({ row }: BookingApprovalProgressCell
       <p
         className={cn(
           "text-sm font-semibold",
-          summary.complete ? "text-emerald-700 dark:text-emerald-400" : "text-foreground",
+          summary.complete ? "text-[color:var(--freight-brand)]" : "text-foreground",
         )}
       >
         {summary.label}

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

@@ -1,17 +1,16 @@
-import { Loader2 } from "lucide-react";
+import type { ReactNode } from "react";
+import {
+  Modal,
+  Group,
+  Stack,
+  Text,
+  Box,
+  Button,
+  Textarea,
+  FileInput,
+} from "@mantine/core";
 
 import type { BookingActionDef } from "@/features/bookings/booking-actions.config";
-import { cn } from "@/lib/utils";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Textarea,
-} from "@edr/ui-common";
 
 interface BookingConfirmDialogProps {
   open: boolean;
@@ -25,7 +24,7 @@ interface BookingConfirmDialogProps {
   onConfirm: () => void;
   isPending: boolean;
   confirmDisabled?: boolean;
-  extra?: React.ReactNode;
+  extra?: ReactNode;
 }
 
 export function BookingConfirmDialog({
@@ -45,129 +44,119 @@ export function BookingConfirmDialog({
   if (!action || !action.confirmTitle) return null;
 
   const Icon = action.icon;
-  const needsTextInput =
-    action.input === "note" || action.input === "reason";
+  const needsTextInput = action.input === "note" || action.input === "reason";
   const needsFileInput = action.input === "file";
   const inputMissing =
-    (needsTextInput && !inputValue.trim()) ||
-    (needsFileInput && !selectedFile);
+    (needsTextInput && !inputValue.trim()) || (needsFileInput && !selectedFile);
   const isDestructive = action.variant === "destructive";
-
-  const preventClickThrough = (event: React.MouseEvent) => {
-    event.preventDefault();
-  };
+  const accent = isDestructive ? "red" : "green";
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="gap-0 overflow-hidden p-0 sm:max-w-md"
-        showCloseButton={false}
-        onCloseAutoFocus={(event) => event.preventDefault()}
+    <Modal
+      opened={open}
+      onClose={() => onOpenChange(false)}
+      withCloseButton={false}
+      centered
+      radius="md"
+      size="md"
+      padding={0}
+      title={null}
+    >
+      {/* Header */}
+      <Box
+        px="lg"
+        py="md"
+        style={{
+          background: `var(--mantine-color-${accent}-0)`,
+          borderBottom: `1px solid var(--mantine-color-${accent}-1)`,
+        }}
       >
-        <div
-          className={cn(
-            "border-b px-6 py-5",
-            isDestructive
-              ? "bg-gradient-to-br from-red-500/10 via-background to-background"
-              : "bg-gradient-to-br from-primary/8 via-background to-background",
-          )}
-        >
-          <DialogHeader className="gap-3 text-left">
-            <div className="flex items-start gap-3">
-              <div
-                className={cn(
-                  "flex size-11 shrink-0 items-center justify-center rounded-xl shadow-sm",
-                  isDestructive
-                    ? "bg-red-500/15 text-red-700 dark:text-red-300"
-                    : "bg-primary/15 text-primary",
-                )}
-              >
-                <Icon className="size-5" />
-              </div>
-              <div className="min-w-0 space-y-1 pt-0.5">
-                <DialogTitle className="text-base leading-snug">
-                  {action.confirmTitle}
-                </DialogTitle>
-                {reference && (
-                  <p className="font-mono text-xs font-semibold text-muted-foreground">
-                    {reference}
-                  </p>
-                )}
-              </div>
-            </div>
-            <DialogDescription className="text-left text-sm leading-relaxed">
-              {action.confirmDescription}
-            </DialogDescription>
-          </DialogHeader>
-        </div>
-
-        <div className="space-y-4 px-6 py-5">
-          {needsTextInput && (
-            <div className="space-y-2">
-              <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                {action.inputLabel}
-                <span className="text-red-600"> *</span>
-              </label>
-              <Textarea
-                value={inputValue}
-                onChange={(e) => onInputChange(e.target.value)}
-                placeholder={action.inputPlaceholder}
-                rows={4}
-                className="min-h-[100px] resize-y"
-              />
-            </div>
-          )}
-          {needsFileInput && (
-            <div className="space-y-2">
-              <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                {action.inputLabel ?? "Bank slip file"}
-                <span className="text-red-600"> *</span>
-              </label>
-              <input
-                type="file"
-                accept=".pdf,.png,.jpg,.jpeg"
-                className="block w-full text-sm text-muted-foreground file:mr-3 file:rounded-md file:border-0 file:bg-primary file:px-3 file:py-2 file:text-xs file:font-semibold file:text-primary-foreground"
-                onChange={(e) =>
-                  onFileChange?.(e.target.files?.[0] ?? null)
-                }
-              />
-              {selectedFile && (
-                <p className="text-xs text-muted-foreground">
-                  Selected: {selectedFile.name}
-                </p>
-              )}
-            </div>
-          )}
-          {extra}
-        </div>
-
-        <DialogFooter className="gap-2 border-t bg-muted/20 px-6 py-4 sm:justify-end">
-          <Button
-            type="button"
-            variant="outline"
-            disabled={isPending}
-            onMouseDown={preventClickThrough}
-            onClick={() => onOpenChange(false)}
+        <Group align="flex-start" gap="sm" wrap="nowrap">
+          <Box
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 44,
+              height: 44,
+              borderRadius: 12,
+              flexShrink: 0,
+              background: `var(--mantine-color-${accent}-1)`,
+              color: `var(--mantine-color-${accent}-7)`,
+            }}
           >
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            variant={isDestructive ? "destructive" : "default"}
-            disabled={isPending || inputMissing || confirmDisabled}
-            className="min-w-[7rem] gap-2"
-            onMouseDown={preventClickThrough}
-            onClick={onConfirm}
-          >
-            {isPending ? (
-              <Loader2 className="size-4 animate-spin" />
-            ) : (
-              <Icon className="size-4" />
+            <Icon size={20} />
+          </Box>
+          <Stack gap={2} style={{ minWidth: 0 }}>
+            <Text fw={700} size="md" style={{ lineHeight: 1.3 }}>
+              {action.confirmTitle}
+            </Text>
+            {reference && (
+              <Text size="xs" c="dimmed" ff="monospace" fw={600}>
+                {reference}
+              </Text>
             )}
-            {action.shortLabel}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+          </Stack>
+        </Group>
+        {action.confirmDescription && (
+          <Text size="sm" c="dimmed" mt="sm" style={{ lineHeight: 1.5 }}>
+            {action.confirmDescription}
+          </Text>
+        )}
+      </Box>
+
+      {/* Body */}
+      <Stack gap="md" px="lg" py="lg">
+        {needsTextInput && (
+          <Textarea
+            label={action.inputLabel}
+            withAsterisk
+            value={inputValue}
+            onChange={(e) => onInputChange(e.currentTarget.value)}
+            placeholder={action.inputPlaceholder}
+            minRows={4}
+            autosize
+          />
+        )}
+        {needsFileInput && (
+          <FileInput
+            label={action.inputLabel ?? "Bank slip file"}
+            withAsterisk
+            placeholder="Select a file"
+            accept=".pdf,.png,.jpg,.jpeg"
+            value={selectedFile}
+            onChange={(file) => onFileChange?.(file)}
+            clearable
+          />
+        )}
+        {extra}
+      </Stack>
+
+      {/* Footer */}
+      <Group
+        justify="flex-end"
+        gap="sm"
+        px="lg"
+        py="md"
+        style={{
+          borderTop: "1px solid var(--mantine-color-gray-2)",
+          background: "var(--mantine-color-gray-0)",
+        }}
+      >
+        <Button variant="default" disabled={isPending} onClick={() => onOpenChange(false)}>
+          Cancel
+        </Button>
+        <Button
+          color={accent}
+          loading={isPending}
+          disabled={inputMissing || confirmDisabled}
+          leftSection={<Icon size={16} />}
+          onClick={onConfirm}
+          miw={112}
+        >
+          {action.shortLabel}
+        </Button>
+      </Group>
+    </Modal>
   );
 }

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

@@ -1,86 +1,93 @@
 import { Banknote, Receipt } from "lucide-react";
+import { Paper, Stack, Group, Text, Divider } from "@mantine/core";
 
 import type { BookingDetail } from "@/types/booking";
-import { Separator } from "@edr/ui-common";
-import { bookingGlass, bookingSurface } from "./booking-ui.styles";
+
+import { SectionCard } from "./detail/SectionCard";
+import { detailStyles } from "./detail/booking-detail.styles";
 
 export function BookingPricingSummary({ booking }: { booking: BookingDetail }) {
   const amount = Number(booking.totalAmount);
   const modifiers = booking.cargoModifiers ?? [];
 
   return (
-    <div className={bookingSurface.sectionCard}>
-      <div className={bookingSurface.sectionHeader}>
-        <div className={bookingSurface.sectionIcon}>
-          <Banknote className="size-4" strokeWidth={1.75} />
-        </div>
-        <div>
-          <h2 className="text-sm font-semibold text-foreground">
-            Pricing & payment
-          </h2>
-          <p className="text-xs text-muted-foreground">Commercial terms</p>
-        </div>
-      </div>
-      <div className="space-y-4 px-5 py-5">
-        <div className={bookingSurface.valueCard}>
-          <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+    <SectionCard icon={Banknote} title="Pricing & payment">
+      <Stack gap="md">
+        <Paper radius="md" withBorder p="md" style={detailStyles.highlightCard}>
+          <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
             Total amount
-          </p>
-          <p className="mt-1 font-mono text-2xl font-semibold tabular-nums tracking-tight text-foreground">
+          </Text>
+          <Text
+            size="xl"
+            fw={700}
+            c="green.9"
+            mt={4}
+            style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.5px" }}
+          >
             {booking.paymentCurrency}{" "}
             {amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
-          </p>
-        </div>
+          </Text>
+        </Paper>
+
         <Row label="Payment status" value={booking.paymentStatus} />
         {booking.pnrCode && <Row label="PNR code" value={booking.pnrCode} mono />}
+
         {modifiers.length > 0 && (
           <>
-            <Separator className="opacity-50" />
-            <p className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-              <Receipt className="size-3" />
-              Surcharges applied
-            </p>
-            <ul className="space-y-2">
+            <Divider color="var(--mantine-color-gray-2)" />
+            <Group gap={6}>
+              <Receipt size={13} color="var(--mantine-color-gray-5)" />
+              <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
+                Surcharges applied
+              </Text>
+            </Group>
+            <Stack gap="xs">
               {modifiers.map((m) => (
-                <li
+                <Group
                   key={m.id}
-                  className="flex justify-between rounded-lg border border-border/50 bg-muted/15 px-3 py-2 text-sm backdrop-blur-sm"
+                  justify="space-between"
+                  px="sm"
+                  py={6}
+                  style={{
+                    borderRadius: 8,
+                    border: "1px solid var(--mantine-color-gray-2)",
+                    background: "var(--mantine-color-gray-0)",
+                  }}
                 >
-                  <span className="text-muted-foreground">Modifier</span>
-                  <span className="font-mono font-semibold tabular-nums">
+                  <Text size="sm" c="dimmed">
+                    Modifier
+                  </Text>
+                  <Text size="sm" fw={600} style={{ fontVariantNumeric: "tabular-nums" }}>
                     {Number(m.calculatedAmount).toLocaleString()}
-                  </span>
-                </li>
+                  </Text>
+                </Group>
               ))}
-            </ul>
+            </Stack>
           </>
         )}
-      </div>
-    </div>
+      </Stack>
+    </SectionCard>
   );
 }
 
-function Row({
-  label,
-  value,
-  mono,
-}: {
-  label: string;
-  value: string;
-  mono?: boolean;
-}) {
+function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
   return (
-    <div className="flex items-center justify-between gap-2 rounded-lg border border-border/40 bg-muted/10 px-3 py-2.5 text-sm backdrop-blur-sm">
-      <span className="text-muted-foreground">{label}</span>
-      <span
-        className={
-          mono
-            ? "font-mono text-xs font-semibold text-foreground"
-            : "font-medium text-foreground"
-        }
-      >
+    <Group
+      justify="space-between"
+      px="sm"
+      py="xs"
+      style={{
+        borderRadius: 8,
+        border: "1px solid var(--mantine-color-gray-2)",
+        background: "var(--mantine-color-gray-0)",
+      }}
+    >
+      <Text size="sm" c="dimmed">
+        {label}
+      </Text>
+      <Text size="sm" fw={600} ff={mono ? "monospace" : undefined}>
         {value}
-      </span>
-    </div>
+      </Text>
+    </Group>
   );
 }

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>
   );
 }

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, Paper } from "@mantine/core";
 
 export interface StatItem {
   label: string;
@@ -10,54 +9,100 @@ 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(--freight-brand-muted)", color: "var(--freight-brand)" },
+  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">
-      {items.map((item) => {
-        const Icon = item.icon;
-        const accent = item.accent ?? "default";
-        return (
-          <div
-            key={item.label}
-            className={cn(
-              "group relative overflow-hidden rounded-xl p-5 transition-all duration-200 hover:shadow-md",
-              bookingGlass.card,
-            )}
-          >
-            <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">
-                  {item.label}
-                </p>
-                <p className="mt-2 text-3xl font-semibold tabular-nums tracking-tight text-foreground">
-                  {item.value}
-                </p>
-                {item.hint && (
-                  <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
-                    {item.hint}
-                  </p>
-                )}
-              </div>
-              <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],
-                )}
-              >
-                <Icon className="size-[18px]" strokeWidth={1.75} />
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
+    <Paper
+      p="md"
+      radius="lg"
+      withBorder
+      style={{
+        background: "white",
+        border: "1px solid var(--mantine-color-gray-2)",
+        overflowX: "auto",
+        overflowY: "hidden",
+        WebkitOverflowScrolling: "touch",
+        scrollBehavior: "smooth",
+      }}
+    >
+      <Group
+        gap="lg"
+        style={{
+          minWidth: "min-content",
+          display: "flex",
+          flexWrap: "nowrap",
+        }}
+      >
+        {items.map((item) => {
+          const Icon = item.icon;
+          const accent = item.accent ?? "default";
+          const accentStyle = accentColors[accent];
+
+          return (
+            <Card
+              key={item.label}
+              p="lg"
+              radius="lg"
+              withBorder
+              style={{
+                background: "white",
+                border: "1px solid var(--mantine-color-gray-2)",
+                transition: "all 0.2s ease",
+                cursor: "pointer",
+                minWidth: "280px",
+                width: "280px",
+                flexShrink: 0,
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.boxShadow = "0 4px 12px rgba(34, 197, 94, 0.12)";
+                e.currentTarget.style.borderColor = "var(--freight-brand-border)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.boxShadow = "none";
+                e.currentTarget.style.borderColor = "var(--mantine-color-gray-2)";
+              }}
+            >
+              <Group justify="space-between" align="flex-start">
+                <Stack gap="xs" style={{ flex: 1 }}>
+                  <Text size="xs" fw={600} c="dimmed" tt="uppercase">
+                    {item.label}
+                  </Text>
+                  <Text size="32px" fw={700} style={{ lineHeight: 1, letterSpacing: "-0.02em" }}>
+                    {item.value}
+                  </Text>
+                  {item.hint && (
+                    <Text size="xs" c="dimmed">
+                      {item.hint}
+                    </Text>
+                  )}
+                </Stack>
+                <div
+                  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 size={22} strokeWidth={1.75} />
+                </div>
+              </Group>
+            </Card>
+          );
+        })}
+      </Group>
+    </Paper>
   );
 }

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

@@ -1,19 +1,50 @@
-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}
+      title={style.label}
+      style={{
+        fontSize: "0.7rem",
+        letterSpacing: "0.05em",
+        display: "inline-flex",
+        maxWidth: "100%",
+        whiteSpace: "nowrap",
+      }}
     >
       {style.label}
     </Badge>

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

@@ -8,27 +8,24 @@ import {
   Wallet,
   XCircle,
 } from "lucide-react";
+import { Group, Badge, UnstyledButton, 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,74 @@ 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="nowrap"
+      p="md"
+      style={{
+        background: "var(--mantine-color-gray-0)",
+        borderRadius: "12px",
+        border: "1px solid var(--mantine-color-gray-2)",
+        overflowX: "auto",
+        overflowY: "hidden",
+        WebkitOverflowScrolling: "touch",
+        scrollBehavior: "smooth",
+        scrollbarWidth: "thin",
+      }}
+    >
+      {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={{
+              flexShrink: 0,
+              background: isActive ? "white" : "transparent",
+              border: isActive ? "1px solid var(--freight-brand-border)" : "1px solid var(--mantine-color-gray-2)",
+              borderRadius: "10px",
+              padding: "10px 16px",
+              transition: "all 0.2s ease",
+              cursor: "pointer",
+              boxShadow: isActive ? "0 2px 8px rgb(21 128 61 / 0.12)" : "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(--freight-brand-muted)" : "var(--mantine-color-gray-1)",
+                    color: isActive ? "var(--freight-brand-dark)" : "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 ? "green" : "gray"}
+                  radius="lg"
+                >
+                  {count}
+                </Badge>
+              )}
+            </Group>
+          </UnstyledButton>
+        );
+      })}
+    </Group>
   );
 }
 

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

@@ -1,20 +1,28 @@
 import {
   Check,
-  CheckCircle2,
   FileSignature,
   FileText,
   Train,
   Wallet,
+  type LucideIcon,
 } from "lucide-react";
+import { Paper, Group, Stack, Text, Box } from "@mantine/core";
 
-import { cn } from "@/lib/utils";
 import {
   getWorkflowStageIndex,
   WORKFLOW_STAGES,
 } from "@/features/bookings/booking-status.config";
-import { bookingGlass, bookingSurface } from "./booking-ui.styles";
+import { SectionCard } from "./detail/SectionCard";
+import { BRAND_GREEN, detailStyles } from "./detail/booking-detail.styles";
 
-const STAGE_ICONS = [FileText, FileSignature, FileSignature, Wallet, Train, Check];
+const STAGE_ICONS: LucideIcon[] = [
+  FileText,
+  FileSignature,
+  FileSignature,
+  Wallet,
+  Train,
+  Check,
+];
 
 interface BookingWorkflowStepperProps {
   status: string;
@@ -27,104 +35,94 @@ export function BookingWorkflowStepper({
   status,
   title,
   description,
-  titleColor,
 }: BookingWorkflowStepperProps) {
   const currentStage = getWorkflowStageIndex(status);
   const isTerminal = currentStage < 0;
 
   return (
-    <div className={bookingSurface.sectionCard}>
-      <div className={bookingSurface.sectionHeader}>
-        <div className={bookingSurface.sectionIcon}>
-          <Train className="size-4" strokeWidth={1.75} />
-        </div>
-        <div>
-          <h2 className="text-sm font-semibold text-foreground">
-            Workflow progress
-          </h2>
-          <p className="text-xs text-muted-foreground">
-            Customer submission through completion
-          </p>
-        </div>
-      </div>
-      <div className="space-y-8 px-5 py-6">
-        <div className="relative px-2">
-          <div className="absolute left-4 right-4 top-5 h-px bg-border/60" />
-          <div
-            className="absolute left-4 top-5 h-px bg-emerald-500/40 transition-all duration-700 ease-out"
-            style={{
-              width:
-                !isTerminal && currentStage >= 0
-                  ? `calc(${(currentStage / (WORKFLOW_STAGES.length - 1)) * 100}% - 2rem)`
-                  : "0%",
-            }}
-          />
-          <div className="relative flex justify-between">
-            {WORKFLOW_STAGES.map((stage, idx) => {
-              const Icon = STAGE_ICONS[idx] ?? FileText;
-              const isCompleted = !isTerminal && idx < currentStage;
-              const isActive = !isTerminal && idx === currentStage;
-              return (
-                <div
-                  key={stage.label}
-                  className="flex max-w-[4.5rem] flex-col items-center gap-2.5 sm:max-w-none"
-                >
-                  <div
-                    className={cn(
-                      "flex size-10 items-center justify-center rounded-full border-2 bg-card/80 backdrop-blur-sm transition-all duration-300",
-                      isCompleted &&
-                        cn(bookingGlass.iconWellGreen, "border-emerald-500/30 text-black"),
-                      isActive &&
-                        cn(
-                          bookingGlass.activeTab,
-                          "scale-105 border-emerald-500/30 text-black shadow-sm",
-                        ),
-                      !isCompleted &&
-                        !isActive &&
-                        "border-border/60 text-muted-foreground",
-                    )}
+    <SectionCard icon={Train} title="Workflow progress">
+      <Group gap={0} wrap="nowrap" align="flex-start" mb="lg">
+        {WORKFLOW_STAGES.map((stage, index) => {
+          const Icon = STAGE_ICONS[index] ?? FileText;
+          const isComplete = !isTerminal && index < currentStage;
+          const isActive = !isTerminal && index === currentStage;
+          const isLast = index === WORKFLOW_STAGES.length - 1;
+
+          return (
+            <Box key={stage.label} style={{ flex: isLast ? "0 0 auto" : 1, minWidth: 0 }}>
+              <Group gap={0} wrap="nowrap" align="center">
+                <Stack gap={6} align="center" style={{ flexShrink: 0 }}>
+                  <Box
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: 34,
+                      height: 34,
+                      borderRadius: "50%",
+                      background: isComplete
+                        ? BRAND_GREEN
+                        : isActive
+                          ? "white"
+                          : "var(--mantine-color-gray-1)",
+                      border: isActive
+                        ? `2px solid ${BRAND_GREEN}`
+                        : isComplete
+                          ? "2px solid transparent"
+                          : "2px solid var(--mantine-color-gray-2)",
+                      color: isComplete
+                        ? "white"
+                        : isActive
+                          ? "var(--freight-brand-dark)"
+                          : "var(--mantine-color-gray-5)",
+                      transition: "all 0.2s ease",
+                    }}
                   >
-                    {isCompleted ? (
-                      <CheckCircle2 className="size-4" />
-                    ) : (
-                      <Icon className="size-4" />
-                    )}
-                  </div>
-                  <span
-                    className={cn(
-                      "text-center text-[10px] font-semibold uppercase leading-tight tracking-wide",
-                      isActive ? "text-black" : "text-muted-foreground",
-                    )}
+                    {isComplete ? <Check size={16} strokeWidth={3} /> : <Icon size={15} />}
+                  </Box>
+                  <Text
+                    size="xs"
+                    fw={isActive ? 600 : 500}
+                    c={isActive ? "green.7" : isComplete ? "dark" : "dimmed"}
+                    ta="center"
+                    style={{ whiteSpace: "nowrap" }}
                   >
                     {stage.label}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        </div>
+                  </Text>
+                </Stack>
+                {!isLast && (
+                  <Box
+                    style={{
+                      flex: 1,
+                      height: 2,
+                      marginInline: 8,
+                      marginBottom: 20,
+                      borderRadius: 2,
+                      background: isComplete ? BRAND_GREEN : "var(--mantine-color-gray-2)",
+                    }}
+                  />
+                )}
+              </Group>
+            </Box>
+          );
+        })}
+      </Group>
 
-        <div
-          className={cn(
-            "rounded-xl border px-5 py-4 backdrop-blur-sm",
-            isTerminal
-              ? "border-destructive/20 bg-destructive/5"
-              : bookingGlass.activeTab,
-          )}
-        >
-          <h4
-            className={cn(
-              "text-sm font-semibold tracking-tight",
-              isTerminal ? titleColor : "text-black",
-            )}
-          >
-            {title}
-          </h4>
-          <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
-            {description}
-          </p>
-        </div>
-      </div>
-    </div>
+      <Paper
+        radius="md"
+        withBorder
+        p="md"
+        style={
+          isTerminal ? detailStyles.statusBannerTerminal : detailStyles.statusBanner
+        }
+      >
+        <Text size="sm" fw={600} c={isTerminal ? "red.7" : "dark"}>
+          {title}
+        </Text>
+        <Text size="sm" c="dimmed" mt={4}>
+          {description}
+        </Text>
+      </Paper>
+    </SectionCard>
   );
 }

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

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

apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts

@@ -1,4 +1,4 @@
-/** Shared surfaces for booking list & detail — frosted glass, neutral accents. */
+/** Shared surfaces for booking list & detail — frosted glass, brand accents. */
 
 export const bookingGlass = {
   card: "border border-border/50 bg-card/75 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/60",
@@ -10,9 +10,9 @@ export const bookingGlass = {
   iconWellHero:
     "border border-border/50 bg-background/60 text-foreground shadow-sm ring-1 ring-border/30 backdrop-blur-md supports-[backdrop-filter]:bg-background/45",
   activeTab:
-    "border border-emerald-500/20 bg-emerald-500/10 shadow-sm backdrop-blur-md ring-1 ring-emerald-500/10 supports-[backdrop-filter]:bg-emerald-500/[0.08]",
+    "border border-[color:var(--freight-brand-border)] bg-[color:var(--freight-brand-muted)] shadow-sm backdrop-blur-md ring-1 ring-[color:var(--freight-brand-ring)]",
   iconWellGreen:
-    "border border-emerald-500/20 bg-emerald-500/15 text-emerald-700 shadow-sm backdrop-blur-sm supports-[backdrop-filter]:bg-emerald-500/10 dark:text-emerald-400",
+    "border border-[color:var(--freight-brand-border)] bg-[color:var(--freight-brand-muted)] text-[color:var(--freight-brand)] shadow-sm backdrop-blur-sm",
   tabRail:
     "rounded-xl border border-border/60 bg-muted/10 p-2 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/5",
   tableHeader:
@@ -38,7 +38,7 @@ export const bookingSurface = {
   sectionIcon: `flex size-9 shrink-0 items-center justify-center rounded-lg ${bookingGlass.iconWellGreen}`,
   sectionIconLg: `flex size-11 shrink-0 items-center justify-center rounded-xl ${bookingGlass.iconWellGreen}`,
   valueCard:
-    "rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-4 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-emerald-500/[0.08]",
+    "rounded-xl border border-[color:var(--freight-brand-border)] bg-[color:var(--freight-brand-muted)] p-4 shadow-sm backdrop-blur-md",
   stickySidebar: "lg:sticky lg:top-6 lg:self-start",
   metricTile:
     "rounded-lg border border-border/50 bg-background/70 px-4 py-3 shadow-xs backdrop-blur-sm",
@@ -48,7 +48,7 @@ export const bookingSurface = {
 
 export const bookingInput = {
   search:
-    "h-10 w-full rounded-lg border border-border/60 bg-background/80 pl-10 text-sm shadow-xs backdrop-blur-sm transition-[box-shadow,border-color] placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-[3px] focus-visible:ring-ring/20 sm:max-w-xs",
+    "h-10 w-full rounded-lg border border-border/60 bg-background/80 pl-10 text-sm shadow-xs backdrop-blur-sm transition-[box-shadow,border-color] placeholder:text-muted-foreground focus-visible:border-[color:var(--freight-brand)] focus-visible:ring-[3px] focus-visible:ring-[color:var(--freight-brand-ring)] sm:max-w-xs",
 } as const;
 
 export const bookingTable = {

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

@@ -0,0 +1,68 @@
+import { CheckCircle, Clock, XCircle } from "lucide-react";
+import { Group, Text, Badge, Timeline } from "@mantine/core";
+
+import { SectionCard } from "./SectionCard";
+import {
+  approvalStatusColor,
+  formatDateTime,
+  type BookingApprovalStepView,
+} from "./booking-detail.styles";
+
+export interface BookingApprovalCardProps {
+  steps: BookingApprovalStepView[];
+  approvedCount: number;
+}
+
+/** Vertical timeline of the booking's approval chain. */
+export function BookingApprovalCard({ steps, approvedCount }: BookingApprovalCardProps) {
+  return (
+    <SectionCard
+      icon={CheckCircle}
+      title="Approval Workflow"
+      extra={
+        <Badge color="green" variant="light" radius="sm">
+          {approvedCount} / {steps.length} approved
+        </Badge>
+      }
+    >
+      <Timeline active={approvedCount - 1} bulletSize={26} lineWidth={2} color="green">
+        {steps.map((step) => (
+          <Timeline.Item
+            key={step.id}
+            color={approvalStatusColor(step.status)}
+            bullet={
+              step.status === "APPROVED" ? (
+                <CheckCircle size={14} />
+              ) : step.status === "REJECTED" ? (
+                <XCircle size={14} />
+              ) : (
+                <Clock size={14} />
+              )
+            }
+            title={
+              <Group gap="sm">
+                <Text fw={600} size="sm">
+                  {step.requiredRole.replace(/_/g, " ")}
+                </Text>
+                <Badge
+                  color={approvalStatusColor(step.status)}
+                  size="xs"
+                  radius="sm"
+                  variant="light"
+                >
+                  {step.status}
+                </Badge>
+              </Group>
+            }
+          >
+            {step.actionedAt && (
+              <Text size="xs" c="dimmed">
+                {formatDateTime(step.actionedAt)}
+              </Text>
+            )}
+          </Timeline.Item>
+        ))}
+      </Timeline>
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,63 @@
+import { Package } from "lucide-react";
+import { SimpleGrid, Divider, Box, Table, Text } from "@mantine/core";
+
+import type { BookingDetail } from "@/types/booking";
+
+import { SectionCard } from "./SectionCard";
+import { MetricTile } from "./MetricTile";
+
+export interface BookingCargoCardProps {
+  booking: BookingDetail;
+}
+
+/** Cargo specs + container manifest table. */
+export function BookingCargoCard({ booking }: BookingCargoCardProps) {
+  const containers = booking.bookingContainers ?? [];
+
+  return (
+    <SectionCard icon={Package} title="Cargo specifications">
+      <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
+        <MetricTile
+          label="Cargo type"
+          value={booking.cargoType?.label ?? booking.freightType}
+        />
+        <MetricTile label="Total VGM" value={`${booking.cargoTotalWeightVgm} tons`} />
+        <MetricTile
+          label="Hazardous"
+          value={booking.isHazardous ? "Yes" : "No"}
+          highlight={booking.isHazardous}
+        />
+      </SimpleGrid>
+
+      {containers.length > 0 && (
+        <>
+          <Divider my="lg" color="var(--mantine-color-gray-2)" />
+          <Box style={{ overflowX: "auto" }}>
+            <Table verticalSpacing="sm" horizontalSpacing="md" highlightOnHover>
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>Container type</Table.Th>
+                  <Table.Th>Qty</Table.Th>
+                  <Table.Th>VGM / unit</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {containers.map((c) => (
+                  <Table.Tr key={c.id}>
+                    <Table.Td>
+                      <Text fw={600} size="sm">
+                        {c.containerType?.label ?? c.containerType?.code ?? c.containerTypeId}
+                      </Text>
+                    </Table.Td>
+                    <Table.Td>{c.quantity}</Table.Td>
+                    <Table.Td>{c.vgmPerUnitTons} t</Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </Box>
+        </>
+      )}
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,60 @@
+import { Boxes } from "lucide-react";
+import { Text, Badge, Box, Table } from "@mantine/core";
+
+import { SectionCard } from "./SectionCard";
+import type { BookingContainerView } from "./booking-detail.styles";
+
+export interface BookingContainersCardProps {
+  containers: BookingContainerView[];
+}
+
+export function BookingContainersCard({ containers }: BookingContainersCardProps) {
+  return (
+    <SectionCard
+      icon={Boxes}
+      title="Containers & Cargo"
+      extra={
+        <Badge color="gray" variant="light" radius="sm">
+          {containers.length} line{containers.length === 1 ? "" : "s"}
+        </Badge>
+      }
+    >
+      <Box style={{ overflowX: "auto" }}>
+        <Table verticalSpacing="md" horizontalSpacing="md" highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Container Type</Table.Th>
+              <Table.Th>Qty</Table.Th>
+              <Table.Th>VGM / Unit</Table.Th>
+              <Table.Th>Total VGM</Table.Th>
+              <Table.Th>Size</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {containers.map((container) => (
+              <Table.Tr key={container.id}>
+                <Table.Td>
+                  <Text fw={600} size="sm">
+                    {container.containerType?.label}
+                  </Text>
+                </Table.Td>
+                <Table.Td>{container.quantity}</Table.Td>
+                <Table.Td>{container.vgmPerUnitTons} t</Table.Td>
+                <Table.Td>
+                  <Text fw={600} c="green.7" size="sm">
+                    {(container.quantity * container.vgmPerUnitTons).toFixed(2)} t
+                  </Text>
+                </Table.Td>
+                <Table.Td>
+                  <Badge color="gray" variant="light" radius="sm">
+                    {container.containerType?.sizeFt}FT
+                  </Badge>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+      </Box>
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { Anchor } from "lucide-react";
+import { Code } from "@mantine/core";
+
+import { SectionCard } from "./SectionCard";
+
+export interface BookingContractSummaryCardProps {
+  summary: string;
+}
+
+/** Generated contract terms, shown verbatim. */
+export function BookingContractSummaryCard({ summary }: BookingContractSummaryCardProps) {
+  return (
+    <SectionCard icon={Anchor} title="Contract summary">
+      <Code
+        block
+        style={{
+          maxHeight: 256,
+          overflow: "auto",
+          whiteSpace: "pre-wrap",
+          background: "var(--mantine-color-gray-0)",
+        }}
+      >
+        {summary}
+      </Code>
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,76 @@
+import { Building2, Calendar, CheckCircle, Boxes, Truck } from "lucide-react";
+import { Paper, Group, Stack, Title, Text, Divider, SimpleGrid } from "@mantine/core";
+
+import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
+import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
+
+import { detailStyles, formatDate, type BookingDetailView } from "./booking-detail.styles";
+
+export interface BookingDetailHeaderProps {
+  booking: BookingDetailView;
+  approvedCount: number;
+  totalSteps: number;
+}
+
+export function BookingDetailHeader({
+  booking,
+  approvedCount,
+  totalSteps,
+}: BookingDetailHeaderProps) {
+  const kpis = [
+    { icon: Truck, label: "Trade Direction", value: booking.tradeDirection },
+    { icon: Calendar, label: "Scheduled", value: formatDate(booking.scheduledDate) },
+    { icon: Boxes, label: "Freight Type", value: booking.freightType },
+    {
+      icon: CheckCircle,
+      label: "Approvals",
+      value: `${approvedCount} / ${totalSteps} complete`,
+    },
+  ];
+
+  return (
+    <Paper radius="md" withBorder mt="sm" mb="lg" p="xl" style={detailStyles.card}>
+      <Group justify="space-between" align="flex-start" wrap="wrap">
+        <Stack gap={6}>
+          <Group gap="sm" align="center">
+            <Title order={2} fw={700} style={{ letterSpacing: "-0.4px" }}>
+              {booking.reference}
+            </Title>
+            <BookingStatusBadge status={booking.status} />
+          </Group>
+          <Group gap="xs">
+            <Building2 size={14} color="var(--mantine-color-gray-5)" />
+            <Text size="sm" c="dimmed">
+              {booking.company?.companyName}
+            </Text>
+            <Text size="sm" c="dimmed">
+              •
+            </Text>
+            <Text size="sm" c="dimmed">
+              Created {formatDate(booking.createdAt)}
+            </Text>
+          </Group>
+        </Stack>
+        <BookingPriorityBadge score={booking.priorityScore} />
+      </Group>
+
+      <Divider my="lg" color="var(--mantine-color-gray-2)" />
+
+      <SimpleGrid cols={{ base: 2, md: 4 }} spacing="xl">
+        {kpis.map((kpi) => (
+          <Group key={kpi.label} gap="sm" wrap="nowrap" align="center">
+            <kpi.icon size={18} color="var(--mantine-color-gray-5)" />
+            <Stack gap={2}>
+              <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
+                {kpi.label}
+              </Text>
+              <Text size="sm" fw={600}>
+                {kpi.value}
+              </Text>
+            </Stack>
+          </Group>
+        ))}
+      </SimpleGrid>
+    </Paper>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { ArrowLeft, Download, CheckCircle } from "lucide-react";
+import { Group, Button } from "@mantine/core";
+
+export interface BookingDetailToolbarProps {
+  onBack: () => void;
+  onExport?: () => void;
+  onAction?: () => void;
+}
+
+/** Top action bar for the booking detail page. */
+export function BookingDetailToolbar({
+  onBack,
+  onExport,
+  onAction,
+}: BookingDetailToolbarProps) {
+  return (
+    <Group justify="space-between" mb="md">
+      <Button
+        variant="subtle"
+        color="gray"
+        leftSection={<ArrowLeft size={18} />}
+        onClick={onBack}
+        fw={600}
+      >
+        Back
+      </Button>
+      <Group gap="sm">
+        <Button variant="default" leftSection={<Download size={16} />} onClick={onExport}>
+          Export
+        </Button>
+        <Button color="green" leftSection={<CheckCircle size={16} />} onClick={onAction}>
+          Take Action
+        </Button>
+      </Group>
+    </Group>
+  );
+}

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

@@ -0,0 +1,69 @@
+import { FileText, Download } from "lucide-react";
+import { Group, Stack, Text, Badge, ThemeIcon, ActionIcon } from "@mantine/core";
+
+import { SectionCard } from "./SectionCard";
+import { detailStyles, type BookingFileView } from "./booking-detail.styles";
+
+export interface BookingDocumentsCardProps {
+  files: BookingFileView[];
+  onDownload?: (file: BookingFileView) => void;
+}
+
+/** List of attached documents with per-file download actions. */
+export function BookingDocumentsCard({ files, onDownload }: BookingDocumentsCardProps) {
+  return (
+    <SectionCard
+      icon={FileText}
+      title="Documents"
+      extra={
+        <Badge color="gray" variant="light" radius="sm">
+          {files.length}
+        </Badge>
+      }
+    >
+      {files.length === 0 ? (
+        <Text size="sm" c="dimmed">
+          No documents attached.
+        </Text>
+      ) : (
+        <Stack gap="xs">
+          {files.map((file) => (
+            <Group
+              key={file.id}
+              justify="space-between"
+              wrap="nowrap"
+              p="xs"
+              style={detailStyles.fileRow}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = "var(--mantine-color-gray-0)";
+                e.currentTarget.style.borderColor = "var(--freight-brand-border)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = "transparent";
+                e.currentTarget.style.borderColor = "var(--mantine-color-gray-2)";
+              }}
+            >
+              <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+                <ThemeIcon size={32} radius="md" variant="light" color="red">
+                  <FileText size={16} />
+                </ThemeIcon>
+                <Text size="sm" fw={500} truncate>
+                  {file.name}
+                </Text>
+              </Group>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                radius="md"
+                onClick={() => onDownload?.(file)}
+                aria-label={`Download ${file.name}`}
+              >
+                <Download size={16} />
+              </ActionIcon>
+            </Group>
+          ))}
+        </Stack>
+      )}
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,57 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { Hash, Package, Ship, Weight, Clock } from "lucide-react";
+import { Group, Stack, Text, Divider } from "@mantine/core";
+
+import { SectionCard } from "./SectionCard";
+import { formatDate, type BookingDetailView } from "./booking-detail.styles";
+
+interface FactRowProps {
+  icon: LucideIcon;
+  label: string;
+  value: ReactNode;
+}
+
+function FactRow({ icon: Icon, label, value }: FactRowProps) {
+  return (
+    <Group justify="space-between" wrap="nowrap" py={6}>
+      <Group gap="xs" wrap="nowrap">
+        <Icon size={15} color="var(--mantine-color-gray-5)" />
+        <Text size="sm" c="dimmed">
+          {label}
+        </Text>
+      </Group>
+      <Text size="sm" fw={600} ta="right">
+        {value}
+      </Text>
+    </Group>
+  );
+}
+
+export interface BookingFactsCardProps {
+  booking: BookingDetailView;
+}
+
+/** Key/value summary of the booking's reference data. */
+export function BookingFactsCard({ booking }: BookingFactsCardProps) {
+  const facts: FactRowProps[] = [
+    { icon: Hash, label: "PNR Code", value: booking.pnrCode || "—" },
+    { icon: Package, label: "Cargo Type", value: booking.cargoType?.label ?? "—" },
+    { icon: Ship, label: "Shipping Line", value: booking.shippingLine?.label ?? "—" },
+    { icon: Weight, label: "VGM Weight", value: `${booking.cargoTotalWeightVgm} tons` },
+    { icon: Clock, label: "Last Updated", value: formatDate(booking.updatedAt) },
+  ];
+
+  return (
+    <SectionCard icon={Hash} title="Booking Details">
+      <Stack gap={0}>
+        {facts.map((fact, index) => (
+          <div key={fact.label}>
+            {index > 0 && <Divider />}
+            <FactRow {...fact} />
+          </div>
+        ))}
+      </Stack>
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,100 @@
+import { Check } from "lucide-react";
+import { Paper, Group, Stack, Text, Box } from "@mantine/core";
+
+import {
+  WORKFLOW_STAGES,
+  getWorkflowStageIndex,
+} from "@/features/bookings/booking-status.config";
+
+import { detailStyles, BRAND_GREEN } from "./booking-detail.styles";
+
+export interface BookingLifecycleStepperProps {
+  status: string;
+}
+
+/** Horizontal lifecycle tracker showing how far the booking has progressed. */
+export function BookingLifecycleStepper({ status }: BookingLifecycleStepperProps) {
+  const currentStage = getWorkflowStageIndex(status);
+
+  return (
+    <Paper radius="md" withBorder p="xl" mb="lg" style={detailStyles.card}>
+      <Group gap={0} wrap="nowrap" align="flex-start">
+        {WORKFLOW_STAGES.map((stage, index) => {
+          const isComplete = currentStage >= 0 && index < currentStage;
+          const isActive = index === currentStage;
+          const isLast = index === WORKFLOW_STAGES.length - 1;
+
+          const circleBg = isComplete
+            ? BRAND_GREEN
+            : isActive
+              ? "white"
+              : "var(--mantine-color-gray-1)";
+          const circleBorder = isActive
+            ? `2px solid ${BRAND_GREEN}`
+            : isComplete
+              ? "2px solid transparent"
+              : "2px solid var(--mantine-color-gray-2)";
+
+          return (
+            <Box key={stage.label} style={{ flex: isLast ? "0 0 auto" : 1, minWidth: 0 }}>
+              <Group gap={0} wrap="nowrap" align="center">
+                <Stack gap={6} align="center" style={{ flexShrink: 0 }}>
+                  <Box
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "32px",
+                      height: "32px",
+                      borderRadius: "50%",
+                      background: circleBg,
+                      border: circleBorder,
+                      color: isComplete
+                        ? "white"
+                        : isActive
+                          ? "var(--freight-brand-dark)"
+                          : "var(--mantine-color-gray-5)",
+                      transition: "all 0.2s ease",
+                    }}
+                  >
+                    {isComplete ? (
+                      <Check size={16} strokeWidth={3} />
+                    ) : (
+                      <Text size="xs" fw={700}>
+                        {index + 1}
+                      </Text>
+                    )}
+                  </Box>
+                  <Text
+                    size="xs"
+                    fw={isActive ? 600 : 500}
+                    c={isActive ? "green.7" : isComplete ? "dark" : "dimmed"}
+                    ta="center"
+                    style={{ whiteSpace: "nowrap" }}
+                  >
+                    {stage.label}
+                  </Text>
+                </Stack>
+
+                {!isLast && (
+                  <Box
+                    style={{
+                      flex: 1,
+                      height: "2px",
+                      marginInline: "8px",
+                      marginBottom: "20px",
+                      borderRadius: "2px",
+                      background: isComplete
+                        ? BRAND_GREEN
+                        : "var(--mantine-color-gray-2)",
+                    }}
+                  />
+                )}
+              </Group>
+            </Box>
+          );
+        })}
+      </Group>
+    </Paper>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { Truck } from "lucide-react";
+import { SimpleGrid } from "@mantine/core";
+
+import type { BookingDetail } from "@/types/booking";
+
+import { SectionCard } from "./SectionCard";
+import { MetricTile } from "./MetricTile";
+
+export interface BookingMileServicesCardProps {
+  booking: BookingDetail;
+}
+
+/** First / last mile addresses. Renders nothing when neither is present. */
+export function BookingMileServicesCard({ booking }: BookingMileServicesCardProps) {
+  if (!booking.firstMilePickupAddress && !booking.lastMileDeliveryAddress) {
+    return null;
+  }
+
+  return (
+    <SectionCard icon={Truck} title="Mile services">
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="sm">
+        {booking.firstMilePickupAddress && (
+          <MetricTile label="First mile pickup" value={booking.firstMilePickupAddress} />
+        )}
+        {booking.lastMileDeliveryAddress && (
+          <MetricTile label="Last mile delivery" value={booking.lastMileDeliveryAddress} />
+        )}
+      </SimpleGrid>
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { Paper, Stack, Group, Text, Title, Badge } from "@mantine/core";
+
+import { detailStyles } from "./booking-detail.styles";
+
+export interface BookingPaymentCardProps {
+  totalAmount: number;
+  currency: string;
+  paymentStatus: string;
+}
+
+/** Key-figure card: total amount + payment status. Flat, lightly tinted. */
+export function BookingPaymentCard({
+  totalAmount,
+  currency,
+  paymentStatus,
+}: BookingPaymentCardProps) {
+  return (
+    <Paper radius="md" withBorder p="xl" style={detailStyles.highlightCard}>
+      <Stack gap={6}>
+        <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
+          Total Amount
+        </Text>
+        <Group align="flex-end" gap="xs">
+          <Title order={1} fw={700} c="green.9" style={{ letterSpacing: "-1px" }}>
+            {totalAmount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </Title>
+          <Text fw={600} c="green.7" mb={6}>
+            {currency}
+          </Text>
+        </Group>
+        <Badge
+          color={paymentStatus === "PAID" ? "green" : "yellow"}
+          variant="light"
+          radius="sm"
+          mt="xs"
+          w="fit-content"
+        >
+          {paymentStatus}
+        </Badge>
+      </Stack>
+    </Paper>
+  );
+}

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

@@ -0,0 +1,111 @@
+import { Building2, Calendar, Clock, RefreshCw, ArrowLeft } from "lucide-react";
+import { Paper, Group, Stack, Title, Text, Button, Box } from "@mantine/core";
+
+import type { BookingDetail } from "@/types/booking";
+import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
+import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
+import { NextStepBanner } from "@/components/bookings/NextStepBanner";
+
+import { detailStyles, formatDate } from "./booking-detail.styles";
+
+export interface BookingRequestHeroProps {
+  booking: BookingDetail;
+  customerLabel: string;
+  onBack: () => void;
+  onRefresh: () => void;
+  isFetching?: boolean;
+}
+
+/** Top hero for the request detail page: identity, status, next step, total value. */
+export function BookingRequestHero({
+  booking,
+  customerLabel,
+  onBack,
+  onRefresh,
+  isFetching,
+}: BookingRequestHeroProps) {
+  const amount = Number(booking.totalAmount);
+
+  return (
+    <Paper radius="md" withBorder p="xl" style={detailStyles.card}>
+      <Button
+        variant="subtle"
+        color="gray"
+        size="compact-sm"
+        leftSection={<ArrowLeft size={16} />}
+        onClick={onBack}
+        mb="md"
+        ml={-8}
+        fw={600}
+      >
+        Back to list
+      </Button>
+
+      <Group justify="space-between" align="flex-start" wrap="wrap" gap="lg">
+        <Stack gap="sm" style={{ flex: 1, minWidth: 0 }}>
+          <Text size="xs" c="dimmed" fw={600} tt="uppercase" lts="0.06em">
+            Booking reference
+          </Text>
+          <Group gap="sm" align="center" wrap="wrap">
+            <Title order={2} fw={700} style={{ letterSpacing: "-0.4px" }}>
+              {booking.reference}
+            </Title>
+            <BookingStatusBadge status={booking.status} />
+            <BookingPriorityBadge score={booking.priorityScore} />
+          </Group>
+
+          {booking.nextStep && (
+            <Box maw={520}>
+              <NextStepBanner nextStep={booking.nextStep} />
+            </Box>
+          )}
+
+          <Group gap="lg" mt={4}>
+            <Group gap={6} wrap="nowrap">
+              <Building2 size={14} color="var(--mantine-color-gray-5)" />
+              <Text size="sm" fw={500}>
+                {customerLabel}
+              </Text>
+            </Group>
+            <Group gap={6} wrap="nowrap">
+              <Calendar size={14} color="var(--mantine-color-gray-5)" />
+              <Text size="sm" c="dimmed">
+                Scheduled {booking.scheduledDate}
+              </Text>
+            </Group>
+            <Group gap={6} wrap="nowrap">
+              <Clock size={14} color="var(--mantine-color-gray-5)" />
+              <Text size="sm" c="dimmed">
+                Created {formatDate(booking.createdAt)}
+              </Text>
+            </Group>
+          </Group>
+        </Stack>
+
+        <Stack gap="sm" align="flex-end">
+          <Paper radius="md" withBorder p="md" miw={200} style={detailStyles.highlightCard}>
+            <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em" ta="right">
+              Total value
+            </Text>
+            <Text size="xl" fw={700} c="green.9" ta="right" mt={4} style={{ fontVariantNumeric: "tabular-nums" }}>
+              {booking.paymentCurrency}{" "}
+              {amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+            </Text>
+            <Text size="xs" c="dimmed" ta="right" mt={2}>
+              {booking.paymentStatus}
+            </Text>
+          </Paper>
+          <Button
+            variant="default"
+            size="sm"
+            leftSection={<RefreshCw size={15} />}
+            loading={isFetching}
+            onClick={onRefresh}
+          >
+            Refresh
+          </Button>
+        </Stack>
+      </Group>
+    </Paper>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { FileText, MessageSquare } from "lucide-react";
+import { Group, Stack, Text, Badge, ThemeIcon } from "@mantine/core";
+
+import { SectionCard } from "./SectionCard";
+import { formatDateTime, type BookingReviewNoteView } from "./booking-detail.styles";
+
+export interface BookingReviewNotesCardProps {
+  notes: BookingReviewNoteView[];
+}
+
+/** Chronological list of reviewer / compliance notes. */
+export function BookingReviewNotesCard({ notes }: BookingReviewNotesCardProps) {
+  if (notes.length === 0) {
+    return (
+      <SectionCard icon={MessageSquare} title="Review Notes">
+        <Text size="sm" c="dimmed">
+          No review notes have been added yet.
+        </Text>
+      </SectionCard>
+    );
+  }
+
+  return (
+    <SectionCard icon={MessageSquare} title="Review Notes">
+      <Stack gap="md">
+        {notes.map((note) => (
+          <Group key={note.id} align="flex-start" gap="md" wrap="nowrap">
+            <ThemeIcon size={34} radius="xl" variant="light" color="green">
+              <FileText size={16} />
+            </ThemeIcon>
+            <Stack gap={2} style={{ flex: 1 }}>
+              <Group justify="space-between">
+                <Badge color="green" variant="light" size="sm" radius="sm">
+                  {note.type}
+                </Badge>
+                <Text size="xs" c="dimmed">
+                  {formatDateTime(note.createdAt)}
+                </Text>
+              </Group>
+              <Text size="sm" style={{ lineHeight: 1.5 }}>
+                {note.note}
+              </Text>
+            </Stack>
+          </Group>
+        ))}
+      </Stack>
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,69 @@
+import { MapPin } from "lucide-react";
+import { Group, Stack, Text, Box } from "@mantine/core";
+
+import { SectionCard } from "./SectionCard";
+import { detailStyles, type BookingDetailView } from "./booking-detail.styles";
+
+export interface BookingRouteCardProps {
+  booking: BookingDetailView;
+}
+
+export function BookingRouteCard({ booking }: BookingRouteCardProps) {
+  return (
+    <SectionCard icon={MapPin} title="Shipment Route">
+      <Group justify="space-between" align="center" wrap="nowrap" gap="xl">
+        {/* Origin */}
+        <Stack gap={2} style={{ flex: 1 }}>
+          <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
+            Origin
+          </Text>
+          <Text fw={600}>{booking.originYard?.label}</Text>
+          <Text size="xs" c="dimmed">
+            {booking.originYard?.code}
+          </Text>
+        </Stack>
+
+        {/* Connector */}
+        <Box style={{ flex: 1.4 }}>
+          <Group gap={6} wrap="nowrap" align="center">
+            <Box
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                background: "var(--freight-brand)",
+                flexShrink: 0,
+              }}
+            />
+            <Box style={detailStyles.routeLine} />
+            <Box
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                border: "2px solid var(--mantine-color-gray-4)",
+                flexShrink: 0,
+              }}
+            />
+          </Group>
+          <Text size="xs" c="dimmed" ta="center" mt={6}>
+            {booking.shippingLine?.label} · {booking.serviceType?.label}
+          </Text>
+        </Box>
+
+        {/* Destination */}
+        <Stack gap={2} style={{ flex: 1 }} align="flex-end">
+          <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
+            Destination
+          </Text>
+          <Text fw={600} ta="right">
+            {booking.destinationYard?.label}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {booking.destinationYard?.code}
+          </Text>
+        </Stack>
+      </Group>
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,101 @@
+import { Train, MapPin, ArrowRight } from "lucide-react";
+import { Group, Stack, Text, Badge, Box, SimpleGrid } from "@mantine/core";
+
+import type { BookingDetail } from "@/types/booking";
+
+import { SectionCard } from "./SectionCard";
+import { MetricTile } from "./MetricTile";
+
+export interface BookingRouteServiceCardProps {
+  booking: BookingDetail;
+  originLabel: string;
+  destinationLabel: string;
+}
+
+function Endpoint({
+  label,
+  station,
+  align = "left",
+}: {
+  label: string;
+  station: string;
+  align?: "left" | "right";
+}) {
+  return (
+    <Stack gap={2} style={{ flex: 1, minWidth: 0 }} align={align === "right" ? "flex-end" : "flex-start"}>
+      <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
+        {label}
+      </Text>
+      <Group gap={6} wrap="nowrap">
+        <MapPin size={15} color="var(--freight-brand)" />
+        <Text fw={600} truncate>
+          {station}
+        </Text>
+      </Group>
+    </Stack>
+  );
+}
+
+export function BookingRouteServiceCard({
+  booking,
+  originLabel,
+  destinationLabel,
+}: BookingRouteServiceCardProps) {
+  const serviceLabel =
+    booking.serviceType?.label ?? booking.serviceType?.code ?? "Rail service";
+
+  const metrics = [
+    { label: "Trade direction", value: booking.tradeDirection },
+    { label: "Freight type", value: booking.freightType },
+    { label: "Equipment return", value: booking.equipmentReturn ?? "—" },
+    ...(booking.shippingLine
+      ? [
+          {
+            label: "Shipping line",
+            value:
+              booking.shippingLine.label ??
+              booking.shippingLine.name ??
+              booking.shippingLine.code ??
+              "—",
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <SectionCard icon={Train} title="Route & service">
+      <Group justify="space-between" align="center" wrap="nowrap" gap="md">
+        <Endpoint label="Origin" station={originLabel} />
+        <Stack gap={6} align="center" style={{ flexShrink: 0 }}>
+          <Box
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 36,
+              height: 36,
+              borderRadius: "50%",
+              background: "var(--mantine-color-gray-1)",
+              border: "1px solid var(--mantine-color-gray-3)",
+            }}
+          >
+            <Train size={18} color="var(--mantine-color-gray-7)" />
+          </Box>
+          <Badge variant="light" color="gray" size="sm" radius="sm" tt="uppercase">
+            {serviceLabel}
+          </Badge>
+        </Stack>
+        <Group gap={6} wrap="nowrap" style={{ flex: 1, justifyContent: "flex-end" }}>
+          <ArrowRight size={16} color="var(--mantine-color-gray-4)" style={{ flexShrink: 0 }} />
+          <Endpoint label="Destination" station={destinationLabel} align="right" />
+        </Group>
+      </Group>
+
+      <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="sm" mt="lg">
+        {metrics.map((m) => (
+          <MetricTile key={m.label} label={m.label} value={m.value} />
+        ))}
+      </SimpleGrid>
+    </SectionCard>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { Paper, Text } from "@mantine/core";
+
+export interface MetricTileProps {
+  label: string;
+  value: string;
+  highlight?: boolean;
+}
+
+/** Small flat label/value tile used across the detail sections. */
+export function MetricTile({ label, value, highlight }: MetricTileProps) {
+  return (
+    <Paper
+      radius="md"
+      withBorder
+      px="md"
+      py="sm"
+      style={{
+        background: highlight ? "var(--mantine-color-yellow-0)" : "var(--mantine-color-gray-0)",
+        borderColor: highlight
+          ? "var(--mantine-color-yellow-3)"
+          : "var(--mantine-color-gray-2)",
+      }}
+    >
+      <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
+        {label}
+      </Text>
+      <Text size="sm" fw={600} mt={4} style={{ lineHeight: 1.4 }}>
+        {value}
+      </Text>
+    </Paper>
+  );
+}

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

@@ -0,0 +1,32 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { Paper, Group, Text, Box } from "@mantine/core";
+
+import { detailStyles } from "./booking-detail.styles";
+
+export interface SectionCardProps {
+  icon: LucideIcon;
+  title: string;
+  extra?: ReactNode;
+  children: ReactNode;
+}
+
+/** Consistent flat card with a minimal icon + title header used by every detail section. */
+export function SectionCard({ icon: Icon, title, extra, children }: SectionCardProps) {
+  return (
+    <Paper radius="md" withBorder style={detailStyles.card}>
+      <Group justify="space-between" px="xl" py="md" style={detailStyles.cardHeader}>
+        <Group gap="sm">
+          <Icon size={16} color="var(--mantine-color-gray-6)" />
+          <Text fw={600} size="sm" c="dark">
+            {title}
+          </Text>
+        </Group>
+        {extra}
+      </Group>
+      <Box px="xl" py="lg">
+        {children}
+      </Box>
+    </Paper>
+  );
+}

apps/edr-freight-web/backoffice/src/components/bookings/detail/booking-detail.styles.ts

@@ -0,0 +1,154 @@
+import type { CSSProperties } from "react";
+
+import { FREIGHT_BRAND } from "@/theme/freight-brand";
+
+/** Single brand accent. Minimal design uses solid green sparingly, no gradients. */
+export const BRAND_GREEN = FREIGHT_BRAND;
+
+/** Centralised style tokens for the booking detail page + cards. */
+export const detailStyles = {
+  page: {
+    background: "var(--mantine-color-gray-0)",
+    minHeight: "100vh",
+  } satisfies CSSProperties,
+
+  /** Flat white card — thin border, no shadow. */
+  card: {
+    background: "white",
+    borderColor: "var(--mantine-color-gray-2)",
+  } satisfies CSSProperties,
+
+  cardHeader: {
+    borderBottom: "1px solid var(--mantine-color-gray-2)",
+  } satisfies CSSProperties,
+
+  /** Subtle key-figure card (e.g. payment) — neutral tint, still flat. */
+  highlightCard: {
+    background: "var(--mantine-color-gray-0)",
+    borderColor: "var(--mantine-color-gray-2)",
+  } satisfies CSSProperties,
+
+  /** Workflow status description banner — neutral default. */
+  statusBanner: {
+    background: "var(--mantine-color-gray-0)",
+    borderColor: "var(--mantine-color-gray-2)",
+  } satisfies CSSProperties,
+
+  /** Workflow status banner for terminal (rejected/cancelled) states. */
+  statusBannerTerminal: {
+    background: "var(--mantine-color-red-0)",
+    borderColor: "var(--mantine-color-red-2)",
+  } satisfies CSSProperties,
+
+  routeLine: {
+    flex: 1,
+    height: "1px",
+    background: "var(--mantine-color-gray-3)",
+  } satisfies CSSProperties,
+
+  fileRow: {
+    borderRadius: "8px",
+    border: "1px solid var(--mantine-color-gray-2)",
+    transition: "background 0.12s ease, border-color 0.12s ease",
+  } satisfies CSSProperties,
+} as const;
+
+/** Map an approval-step status to a Mantine colour. */
+export function approvalStatusColor(status: string): string {
+  switch (status) {
+    case "APPROVED":
+      return "green";
+    case "PENDING":
+      return "yellow";
+    case "REJECTED":
+      return "red";
+    default:
+      return "gray";
+  }
+}
+
+export function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export function formatDateTime(iso: string): string {
+  return new Date(iso).toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+// ---- View model -----------------------------------------------------------
+
+export interface BookingNamedRefView {
+  id: string;
+  label?: string;
+  code?: string;
+  companyName?: string;
+  name?: string;
+}
+
+export interface BookingContainerView {
+  id: string;
+  quantity: number;
+  vgmPerUnitTons: number;
+  containerType?: {
+    label?: string;
+    sizeFt?: number;
+    isReefer?: boolean;
+  };
+}
+
+export interface BookingApprovalStepView {
+  id: string;
+  stepOrder: number;
+  requiredRole: string;
+  status: string;
+  actionedAt?: string | null;
+}
+
+export interface BookingReviewNoteView {
+  id: string;
+  note: string;
+  type: string;
+  createdAt: string;
+}
+
+export interface BookingFileView {
+  id: string;
+  name: string;
+  mimeType?: string;
+}
+
+export interface BookingDetailView {
+  id: string;
+  reference: string;
+  status: string;
+  scheduledDate: string;
+  totalAmount: number;
+  paymentCurrency: string;
+  paymentStatus: string;
+  tradeDirection: string;
+  freightType: string;
+  priorityScore: number;
+  cargoTotalWeightVgm: number;
+  pnrCode?: string | null;
+  createdAt: string;
+  updatedAt: string;
+  company?: BookingNamedRefView;
+  originYard?: BookingNamedRefView;
+  destinationYard?: BookingNamedRefView;
+  serviceType?: BookingNamedRefView;
+  cargoType?: BookingNamedRefView;
+  shippingLine?: BookingNamedRefView;
+  bookingContainers?: BookingContainerView[];
+  approvalSteps?: BookingApprovalStepView[];
+  reviewNotes?: BookingReviewNoteView[];
+  files?: BookingFileView[];
+}

apps/edr-freight-web/backoffice/src/components/bookings/detail/index.ts

@@ -0,0 +1,18 @@
+export * from "./booking-detail.styles";
+export * from "./SectionCard";
+export * from "./MetricTile";
+export * from "./BookingDetailToolbar";
+export * from "./BookingDetailHeader";
+export * from "./BookingLifecycleStepper";
+export * from "./BookingRouteCard";
+export * from "./BookingContainersCard";
+export * from "./BookingApprovalCard";
+export * from "./BookingReviewNotesCard";
+export * from "./BookingPaymentCard";
+export * from "./BookingFactsCard";
+export * from "./BookingDocumentsCard";
+export * from "./BookingRequestHero";
+export * from "./BookingRouteServiceCard";
+export * from "./BookingMileServicesCard";
+export * from "./BookingCargoCard";
+export * from "./BookingContractSummaryCard";

apps/edr-freight-web/backoffice/src/components/bookings/useBookingActionDialog.ts

@@ -86,14 +86,8 @@ export function useBookingActionDialog(
         );
         break;
       }
-      case "generateContract":
-        mutations.generateContract.mutate(undefined, { onSuccess });
-        break;
       case "viewContract":
         break;
-      case "payBooking":
-        mutations.payBooking.mutate(undefined, { onSuccess });
-        break;
       case "startTransit":
         mutations.startTransit.mutate(undefined, { onSuccess });
         break;

apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx

@@ -9,13 +9,10 @@ import {
   Sun,
   User,
 } from "lucide-react";
-
-import { cn } from "@/lib/utils";
+import { Group, Stack, Text, Avatar, Menu, ActionIcon, Badge, Box } from "@mantine/core";
 
 import type { PageMeta } from "./types";
-
-const iconButtonClass =
-  "relative inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-white text-gray-600 shadow-sm transition hover:border-primary/30 hover:bg-gray-50 hover:text-gray-900";
+import { freightBrand } from "@/theme/freight-brand";
 
 export interface FreightDashboardHeaderProps {
   pageMeta: PageMeta;
@@ -77,120 +74,146 @@ const FreightDashboardHeader = ({
   }, [isUserMenuOpen]);
 
   return (
-    <header className="flex h-20 shrink-0 items-center justify-between gap-4 px-6">
-      <div className="min-w-0">
-        <h1 className="truncate text-xl font-bold tracking-tight text-foreground">
+    <header
+      style={{
+        display: "flex",
+        height: "80px",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "16px",
+        padding: "0 24px",
+        // borderBottom: `3px solid ${freightBrand.primary}`,
+      }}
+    >
+      <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
+        <Text size="lg" fw={700} truncate style={{ color: freightBrand.primaryDark }}>
           {pageMeta.title}
-        </h1>
-        <p className="mt-0.5 truncate text-sm text-secondary-foreground">
+        </Text>
+        <Text size="sm" c="dimmed" truncate>
           {pageMeta.subtitle}
-        </p>
-      </div>
+        </Text>
+      </Stack>
 
-      <div className="flex shrink-0 items-center gap-2">
-        {enableThemeToggle ? (
-          <button
-            type="button"
+      <Group gap="sm" wrap="nowrap">
+        {enableThemeToggle && (
+          <ActionIcon
+            variant="default"
+            size={40}
+            radius="lg"
             onClick={onToggleTheme}
-            aria-label={
-              theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
-            }
-            className={iconButtonClass}
+            style={{
+              background: "var(--mantine-color-gray-1)",
+              border: "1px solid var(--mantine-color-gray-2)",
+              color: "var(--mantine-color-gray-7)",
+            }}
           >
-            {theme === "dark" ? (
-              <Sun className="h-5 w-5" />
-            ) : (
-              <Moon className="h-5 w-5" />
-            )}
-          </button>
-        ) : null}
+            {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
+          </ActionIcon>
+        )}
 
-        <button
-          type="button"
-          aria-label="Change language"
-          className={iconButtonClass}
+        <ActionIcon
+          variant="default"
+          size={40}
+          radius="lg"
+          style={{
+            background: "var(--mantine-color-gray-1)",
+            border: "1px solid var(--mantine-color-gray-2)",
+            color: "var(--mantine-color-gray-7)",
+          }}
         >
-          <Languages className="h-5 w-5" />
-        </button>
+          <Languages size={18} />
+        </ActionIcon>
 
-        <button type="button" aria-label="Messages" className={iconButtonClass}>
-          <MessageSquare className="h-5 w-5" />
-          <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-red-500 ring-2 ring-white" />
-        </button>
-
-        <button
-          type="button"
-          aria-label="Notifications"
-          className={iconButtonClass}
+        <ActionIcon
+          variant="default"
+          size={40}
+          radius="lg"
+          style={{
+            background: "var(--mantine-color-gray-1)",
+            border: "1px solid var(--mantine-color-gray-2)",
+            color: "var(--mantine-color-gray-7)",
+            position: "relative",
+          }}
         >
-          <Bell className="h-5 w-5" />
-          <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-red-500 ring-2 ring-white" />
-        </button>
+          <MessageSquare size={18} />
+          <Badge
+            size="xs"
+            color="red"
+            circle
+            style={{
+              position: "absolute",
+              top: "-3px",
+              right: "-3px",
+            }}
+          />
+        </ActionIcon>
 
-        <div ref={userMenuRef} className="relative ml-1">
-          <button
-            type="button"
-            aria-haspopup="menu"
-            aria-expanded={isUserMenuOpen}
-            onClick={() => setIsUserMenuOpen((open) => !open)}
-            className={cn(
-              "flex items-center gap-2 rounded-xl border border-transparent px-2 py-1.5 transition",
-              isUserMenuOpen
-                ? "border-primary/30 bg-primary/5"
-                : "hover:border-primary/20 hover:bg-gray-50",
-            )}
-          >
-            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">
-              {initials}
-            </div>
-            <ChevronDown
-              className={cn(
-                "hidden h-4 w-4 text-gray-400 transition sm:block",
-                isUserMenuOpen && "rotate-180 text-primary",
-              )}
-            />
-          </button>
+        <ActionIcon
+          variant="default"
+          size={40}
+          radius="lg"
+          style={{
+            background: "var(--mantine-color-gray-1)",
+            border: "1px solid var(--mantine-color-gray-2)",
+            color: "var(--mantine-color-gray-7)",
+            position: "relative",
+          }}
+        >
+          <Bell size={18} />
+          <Badge
+            size="xs"
+            color="red"
+            circle
+            style={{
+              position: "absolute",
+              top: "-3px",
+              right: "-3px",
+            }}
+          />
+        </ActionIcon>
 
-          {isUserMenuOpen ? (
-            <div
-              role="menu"
-              className="absolute right-0 top-full z-50 mt-2 w-52 overflow-hidden rounded-xl border border-gray-200 bg-white py-1 shadow-lg"
-            >
-              <div className="border-b border-gray-100 px-4 py-3">
-                <p className="text-sm font-semibold text-gray-900">
+        <Menu position="bottom-end" shadow="md" opened={isUserMenuOpen} onOpen={() => setIsUserMenuOpen(true)} onClose={() => setIsUserMenuOpen(false)}>
+          <Menu.Target>
+            <Group gap="sm" p="xs" style={{ cursor: "pointer", borderRadius: "12px" }}>
+              <Avatar name={initials} color="green" size="md" styles={{ root: { background: freightBrand.primary } }} />
+              <ChevronDown size={16} style={{ transition: "transform 0.2s", transform: isUserMenuOpen ? "rotate(180deg)" : "rotate(0deg)" }} />
+            </Group>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item disabled>
+              <Stack gap={0}>
+                <Text size="sm" fw={600}>
                   {userName}
-                </p>
-                {userEmail ? (
-                  <p className="text-xs text-gray-500">{userEmail}</p>
-                ) : null}
-              </div>
-              <a
-                href="#profile"
-                role="menuitem"
-                onClick={() => setIsUserMenuOpen(false)}
-                className="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 transition hover:bg-gray-50"
-              >
-                <User className="h-4 w-4" />
-                Profile
-              </a>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => {
-                  setIsUserMenuOpen(false);
-                  onLogout?.();
-                }}
-                className="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 transition hover:bg-red-50"
-              >
-                <LogOut className="h-4 w-4" />
-                Logout
-              </button>
-            </div>
-          ) : null}
-        </div>
+                </Text>
+                {userEmail && (
+                  <Text size="xs" c="dimmed">
+                    {userEmail}
+                  </Text>
+                )}
+              </Stack>
+            </Menu.Item>
+            <Menu.Divider />
+            <Menu.Item
+              leftSection={<User size={14} />}
+              onClick={() => setIsUserMenuOpen(false)}
+            >
+              Profile
+            </Menu.Item>
+            <Menu.Item
+              leftSection={<LogOut size={14} />}
+              color="red"
+              onClick={() => {
+                setIsUserMenuOpen(false);
+                onLogout?.();
+              }}
+            >
+              Logout
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
 
         {headerRight}
-      </div>
+      </Group>
     </header>
   );
 };

apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx

@@ -1,9 +1,11 @@
 import { type ReactNode, useEffect, useState } from "react";
+import { Box, Paper, MantineProvider } from "@mantine/core";
 
 import FreightDashboardHeader from "./FreightDashboardHeader";
 import FreightSidebar from "./FreightSidebar";
 import { getPageMeta } from "./route-meta";
 import type { SidebarSection } from "./types";
+import { freightMantineTheme } from "@/theme/freight-brand";
 
 type Theme = "light" | "dark";
 const THEME_STORAGE_KEY = "edr-theme";
@@ -30,9 +32,6 @@ export interface FreightDashboardLayoutProps {
   children: ReactNode;
 }
 
-const panelClass =
-  "rounded-lg border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.06)]";
-
 const FreightDashboardLayout = ({
   sidebarSections,
   activeHref = "",
@@ -73,40 +72,79 @@ const FreightDashboardLayout = ({
         rel="stylesheet"
       />
 
-      <div
-        className="flex h-[100dvh] overflow-hidden bg-[#eceef2] p-2 antialiased"
-        style={{ fontFamily: "'Outfit', var(--font-sans)" }}
-      >
-        <div className="flex h-full min-h-0 w-full gap-2">
-          <FreightSidebar
-            sections={sidebarSections}
-            activeHref={activeHref}
-            onNavigate={onNavigate}
-          />
+      <MantineProvider theme={freightMantineTheme}>
+        <Box
+          style={{
+            display: "flex",
+            height: "100dvh",
+            overflow: "hidden",
+            background: "var(--mantine-color-gray-1)",
+            padding: "8px",
+            fontFamily: "'Outfit', var(--font-sans)",
+          }}
+        >
+          <Box style={{ display: "flex", height: "100%", minHeight: 0, width: "100%", gap: "8px" }}>
+            <FreightSidebar
+              sections={sidebarSections}
+              activeHref={activeHref}
+              onNavigate={onNavigate}
+            />
 
-          <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col gap-2">
-            <div className={`shrink-0 ${panelClass}`}>
-              <FreightDashboardHeader
-                pageMeta={pageMeta}
-                headerRight={headerRight}
-                enableThemeToggle={enableThemeToggle}
-                userName={userName}
-                userEmail={userEmail}
-                userInitials={userInitials}
-                onLogout={onLogout}
-                theme={theme}
-                onToggleTheme={toggleTheme}
-              />
-            </div>
-
-            <main
-              className={`min-h-0 flex-1 overflow-y-auto overscroll-contain ${panelClass} p-4 md:p-6`}
+            <Box
+              style={{
+                display: "flex",
+                height: "100%",
+                minHeight: 0,
+                minWidth: 0,
+                flex: 1,
+                flexDirection: "column",
+                gap: "8px",
+              }}
             >
-              {children}
-            </main>
-          </div>
-        </div>
-      </div>
+              <Paper
+                p={0}
+                radius="lg"
+                withBorder
+                style={{
+                  flexShrink: 0,
+                  background: "white",
+                  border: "1px solid var(--mantine-color-gray-2)",
+                  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)",
+                }}
+              >
+                <FreightDashboardHeader
+                  pageMeta={pageMeta}
+                  headerRight={headerRight}
+                  enableThemeToggle={enableThemeToggle}
+                  userName={userName}
+                  userEmail={userEmail}
+                  userInitials={userInitials}
+                  onLogout={onLogout}
+                  theme={theme}
+                  onToggleTheme={toggleTheme}
+                />
+              </Paper>
+
+              <Paper
+                p={{ base: 16, md: 24 }}
+                radius="lg"
+                withBorder
+                style={{
+                  minHeight: 0,
+                  flex: 1,
+                  overflowY: "auto",
+                  overscrollBehavior: "contain",
+                  background: "white",
+                  border: "1px solid var(--mantine-color-gray-2)",
+                  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)",
+                }}
+              >
+                {children}
+              </Paper>
+            </Box>
+          </Box>
+        </Box>
+      </MantineProvider>
     </>
   );
 };

apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx

@@ -5,13 +5,11 @@ import {
   useMemo,
   useState,
 } from "react";
-import { ChevronDown, ChevronRight } from "lucide-react";
-
-import { cn } from "@/lib/utils";
+import { ChevronDown, ChevronRight, Train } from "lucide-react";
+import { Stack, Group, Text, Box, UnstyledButton, NavLink } from "@mantine/core";
 
 import type { SidebarItem, SidebarSection } from "./types";
-
-const EDR_LOGO = "/assets/logo.svg";
+import { freightBrand } from "@/theme/freight-brand";
 
 export interface FreightSidebarProps {
   sections: SidebarSection[];
@@ -103,25 +101,6 @@ const FreightSidebar = ({
     setExpanded((current) => ({ ...current, [key]: !current[key] }));
   };
 
-  const navLinkClass = (active: boolean, depth: number) =>
-    cn(
-      "flex items-center justify-between rounded-md px-3 py-2.5 text-base font-medium leading-snug transition-colors",
-      active
-        ? "bg-primary text-primary-foreground shadow-sm"
-        : "text-gray-900 hover:bg-gray-100",
-      depth > 0 && "text-[15px]",
-    );
-
-  const iconClass = (active: boolean, sectionActive: boolean) =>
-    cn(
-      "flex h-5 w-5 shrink-0 items-center justify-center [&_svg]:h-5 [&_svg]:w-5",
-      active
-        ? "text-primary-foreground"
-        : sectionActive
-          ? "text-gray-900"
-          : "text-gray-900",
-    );
-
   const renderNavBranch = (
     children: SidebarItem[],
     depth: number,
@@ -136,37 +115,37 @@ const FreightSidebar = ({
         const groupActive = branchContainsActive(child.children!);
 
         return (
-          <div key={key} className="flex flex-col gap-0.5">
-            <button
-              type="button"
-              aria-expanded={isOpen}
+          <Stack key={key} gap={4}>
+            <UnstyledButton
               onClick={() => toggleExpanded(key)}
-              className={cn(
-                "flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide transition-colors",
-                groupActive
-                  ? "bg-gray-100 text-gray-900"
-                  : "text-gray-900 hover:bg-gray-100",
-              )}
+              style={{
+                background: groupActive ? freightBrand.mutedBg : "transparent",
+                padding: "8px 12px",
+                borderRadius: "8px",
+                width: "100%",
+                cursor: "pointer",
+              }}
             >
-              <span className="truncate">{child.label}</span>
-              <ChevronDown
-                className={cn(
-                  "h-4 w-4 shrink-0 text-gray-900 transition-transform",
-                  isOpen ? "rotate-0" : "-rotate-90",
-                )}
-              />
-            </button>
-            {isOpen ? (
-              <div
-                className={cn(
-                  "flex flex-col gap-0.5 border-l border-gray-200",
-                  depth === 0 ? "ml-3 pl-2" : "ml-2 pl-2",
-                )}
-              >
+              <Group justify="space-between">
+                <Text size="xs" fw={600} style={{ color: groupActive ? freightBrand.primary : undefined }} c={groupActive ? undefined : "dimmed"} tt="uppercase">
+                  {child.label}
+                </Text>
+                <ChevronDown
+                  size={14}
+                  style={{
+                    transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
+                    transition: "transform 0.2s",
+                    color: groupActive ? freightBrand.primary : "var(--mantine-color-gray-5)",
+                  }}
+                />
+              </Group>
+            </UnstyledButton>
+            {isOpen && (
+              <Stack gap={2} style={{ paddingLeft: "12px", borderLeft: `2px solid ${freightBrand.mutedBorder}` }}>
                 {renderNavBranch(child.children!, depth + 1, key)}
-              </div>
-            ) : null}
-          </div>
+              </Stack>
+            )}
+          </Stack>
         );
       }
 
@@ -176,24 +155,47 @@ const FreightSidebar = ({
       const childActiveHref = isHrefActive(childHref);
 
       return (
-        <a
+        <NavLink
           key={key}
+          component="a"
           href={child.href}
-          onClick={(event) => navigateTo(event, child.href!)}
-          aria-current={childActiveHref ? "page" : undefined}
-          className={navLinkClass(childActiveHref, depth)}
-        >
-          <span className="truncate">{child.label}</span>
-          <ChevronRight
-            className={cn(
-              "h-4 w-4 shrink-0",
-              childActiveHref ? "text-primary-foreground/80" : "text-gray-900",
-            )}
-          />
-        </a>
+          onClick={(e) => navigateTo(e as any, child.href!)}
+          label={child.label}
+          active={childActiveHref}
+          color="green"
+          style={{
+            borderRadius: "8px",
+            cursor: "pointer",
+            fontSize: "14px",
+          }}
+          rightSection={<ChevronRight size={16} />}
+        />
       );
     });
 
+  const renderIconWell = (icon: React.ReactNode, active: boolean) => {
+    if (!icon) return null;
+    return (
+      <Box
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "30px",
+          height: "30px",
+          borderRadius: "8px",
+          flexShrink: 0,
+          background: active ? freightBrand.gradient : "var(--mantine-color-gray-1)",
+          color: active ? "white" : "var(--mantine-color-gray-6)",
+          boxShadow: active ? freightBrand.shadowSm : "none",
+          transition: "all 0.2s ease",
+        }}
+      >
+        {icon}
+      </Box>
+    );
+  };
+
   const renderTopLevelItem = (item: SidebarItem) => {
     if (!item.href) return null;
 
@@ -211,99 +213,127 @@ const FreightSidebar = ({
     const leafActive = isCurrentItem && !hasChildren;
 
     return (
-      <div key={item.href} className="flex flex-col gap-0.5">
-        <div
-          className={cn(
-            "group flex items-center rounded-md transition-colors",
-            leafActive
-              ? "bg-primary text-primary-foreground shadow-sm"
-              : isSectionActive || (hasChildren && isCurrentItem)
-                ? "bg-gray-100 text-gray-900"
-                : "text-gray-900 hover:bg-gray-100",
-          )}
-        >
-          <a
-            href={item.href}
-            onClick={(event) => navigateTo(event, item.href!)}
-            aria-current={isCurrentItem ? "page" : undefined}
-            className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2.5 text-sm leading-snug"
-          >
-            {item.icon ? (
-              <span className={iconClass(leafActive, isActive)}>
-                {item.icon}
-              </span>
-            ) : null}
-            <span className="truncate">{item.label}</span>
-          </a>
-
-          {hasChildren ? (
-            <button
-              type="button"
-              aria-label={`Toggle ${item.label}`}
-              aria-expanded={isOpen}
-              onClick={() => toggleExpanded(item.href!)}
-              className={cn(
-                "mr-2 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md transition-colors",
-                leafActive
-                  ? "text-primary-foreground hover:bg-white/10"
-                  : "text-gray-900 hover:bg-gray-200/80",
-              )}
-            >
+      <Stack key={item.href} gap={0}>
+        <NavLink
+          component="a"
+          href={item.href}
+          onClick={(e) => navigateTo(e as any, item.href!)}
+          label={item.label}
+          leftSection={renderIconWell(item.icon, isActive)}
+          active={leafActive}
+          color="green"
+          variant="light"
+          style={{
+            borderRadius: "10px",
+            cursor: "pointer",
+            fontSize: "14px",
+            fontWeight: 500,
+            padding: "8px 10px",
+          }}
+          rightSection={
+            hasChildren ? (
               <ChevronDown
-                className={cn(
-                  "h-4 w-4 transition-transform",
-                  isOpen ? "rotate-0" : "-rotate-90",
-                )}
+                size={16}
+                style={{
+                  transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
+                  transition: "transform 0.2s",
+                }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  toggleExpanded(item.href!);
+                }}
               />
-            </button>
-          ) : (
-            <span
-              className={cn(
-                "mr-3 flex h-4 w-4 shrink-0 items-center justify-center",
-                leafActive ? "text-primary-foreground/80" : "text-gray-900",
-              )}
-              aria-hidden
-            >
-              <ChevronRight className="h-4 w-4" />
-            </span>
-          )}
-        </div>
+            ) : (
+              <ChevronRight size={16} />
+            )
+          }
+        />
 
-        {hasChildren && isOpen ? (
-          <div className="ml-3 flex flex-col gap-1 border-l border-gray-200 pl-2">
+        {hasChildren && isOpen && (
+          <Stack gap={4} style={{ paddingLeft: "16px", borderLeft: `2px solid ${freightBrand.mutedBorder}` }}>
             {renderNavBranch(item.children!, 0, item.href)}
-          </div>
-        ) : null}
-      </div>
+          </Stack>
+        )}
+      </Stack>
     );
   };
 
   return (
-    <aside className="flex h-full max-h-full w-[280px] shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
-      <div className="flex shrink-0 items-center gap-2.5 border-b border-gray-100 px-5 py-5">
-        <img src={EDR_LOGO} alt="EDR Freight" className="h-9 w-auto" />
-        <span className="text-lg font-semibold tracking-tight text-gray-900">
-          EDR Freight
-        </span>
-      </div>
+    <Box
+      component="aside"
+      style={{
+        height: "100%",
+        maxHeight: "100%",
+        width: "280px",
+        flexShrink: 0,
+        borderRadius: "12px",
+        border: "1px solid var(--mantine-color-gray-2)",
+        background: "white",
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+      }}
+    >
+      <Group
+        gap={12}
+        px="lg"
+        py="md"
+        style={{
+          borderBottom: "1px solid var(--mantine-color-gray-2)",
+          flexShrink: 0,
+          height: "80px",
+        }}
+        wrap="nowrap"
+      >
+        <Box
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "44px",
+            height: "44px",
+            borderRadius: "12px",
+            background: freightBrand.gradient,
+            boxShadow: freightBrand.shadow,
+            flexShrink: 0,
+          }}
+        >
+          <Train size={24} color="white" strokeWidth={2} />
+        </Box>
+        <Stack gap={0} style={{ minWidth: 0 }}>
+          <Text size="md" fw={700} style={{ letterSpacing: "-0.3px", lineHeight: 1.2 }}>
+            EDR Freight
+          </Text>
+          <Text size="xs" c="dimmed" fw={500} style={{ letterSpacing: "0.3px" }}>
+            Backoffice
+          </Text>
+        </Stack>
+      </Group>
 
-      <nav className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto overscroll-contain px-3 py-4">
+      <Stack
+        component="nav"
+        gap="lg"
+        p="md"
+        style={{
+          flex: 1,
+          minHeight: 0,
+          overflowY: "auto",
+          overscrollBehavior: "contain",
+        }}
+      >
         {sections.map((section) => (
-          <div key={section.title} className="flex flex-col gap-1">
-            <p
-              className={cn(
-                "px-3 pb-1 text-xs font-semibold uppercase tracking-wide",
-                // Use a very light gray for ALL section titles, not just when mutedTitle is specified
-                "text-sidebar-secondary-foreground",
-              )}
-            >
+          <Stack key={section.title} gap={8}>
+            <Text size="xs" fw={600} c="dimmed" tt="uppercase" style={{ letterSpacing: "0.5px", paddingLeft: "8px" }}>
               {section.title}
-            </p>
-            {section.items.map((item) => renderTopLevelItem(item))}
-          </div>
+            </Text>
+            <Stack gap={2}>
+              {section.items.map((item) => renderTopLevelItem(item))}
+            </Stack>
+          </Stack>
         ))}
-      </nav>
-    </aside>
+      </Stack>
+    </Box>
   );
 };
 

apps/edr-freight-web/backoffice/src/components/layout/route-meta.ts

@@ -95,7 +95,7 @@ const ROUTE_META: Array<{ prefix: string; meta: PageMeta }> = [
     prefix: RULE_ENGINE_CATEGORY_BASE_PATH.configuration,
     meta: {
       title: "Configuration",
-      subtitle: "Master data: cargo, containers, services, surcharges, yards, and shipping lines",
+      subtitle: "Master data: cargo, containers, wagon types, services, surcharges, yards, and shipping lines",
     },
   },
   ...configurationRouteMeta,

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 avatarBg = "#f1f5f9";
+  const avatarText = "#475569";
+
   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.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)";
+              }}
+            >
+              <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: avatarBg,
+                      fontSize: "16px",
+                      fontWeight: 700,
+                      color: avatarText,
+                      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>
   );
 };
 

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx

@@ -1,27 +1,19 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, 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,
+  Text,
+  Box,
+  SimpleGrid,
+  Divider,
+} from "@mantine/core";
 
 import {
   RULE_ENGINE_SELECT_NONE,
@@ -29,8 +21,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;
@@ -43,6 +33,43 @@ export interface RuleEngineFormDialogProps {
   onSubmit: (values: Record<string, unknown>) => void;
 }
 
+type FormRow =
+  | { kind: "pair"; fields: [FormFieldDef, FormFieldDef] }
+  | { kind: "single"; field: FormFieldDef };
+
+const isShortField = (field: FormFieldDef) =>
+  field.type === "text" ||
+  field.type === "number" ||
+  field.type === "select" ||
+  field.type === "date";
+
+const buildFormRows = (fields: FormFieldDef[]): FormRow[] => {
+  const rows: FormRow[] = [];
+  let index = 0;
+
+  while (index < fields.length) {
+    const field = fields[index];
+
+    if (field.type === "textarea" || field.type === "boolean") {
+      rows.push({ kind: "single", field });
+      index += 1;
+      continue;
+    }
+
+    const next = fields[index + 1];
+    if (next && isShortField(next)) {
+      rows.push({ kind: "pair", fields: [field, next] });
+      index += 2;
+      continue;
+    }
+
+    rows.push({ kind: "single", field });
+    index += 1;
+  }
+
+  return rows;
+};
+
 const buildInitialValues = (
   fields: FormFieldDef[],
   record?: RuleEngineRecord | null,
@@ -53,6 +80,8 @@ const buildInitialValues = (
     if (raw !== undefined && raw !== null) {
       if (field.type === "date" && typeof raw === "string") {
         values[field.name] = raw.slice(0, 10);
+      } else if (Array.isArray(raw)) {
+        values[field.name] = raw.join(", ");
       } else {
         values[field.name] = raw;
       }
@@ -85,11 +114,34 @@ const resolveSelectValue = (
   return String(raw);
 };
 
+const inputStyles = {
+  label: { fontWeight: 600, marginBottom: 6, color: "var(--mantine-color-gray-8)" },
+  input: {
+    borderColor: "#e2e8f0",
+    background: "white",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease",
+    "&:focus": {
+      borderColor: "var(--freight-brand)",
+      boxShadow: "0 0 0 3px var(--freight-brand-ring)",
+    },
+  },
+} as const;
+
+const FieldLabel = ({ label, required }: { label: string; required?: boolean }) => (
+  <Group gap={4} wrap="nowrap">
+    <span>{label}</span>
+    {required ? (
+      <Text component="span" c="red" size="sm">
+        *
+      </Text>
+    ) : null}
+  </Group>
+);
+
 const RuleEngineFormDialog = ({
   open,
   onOpenChange,
   title,
-  description,
   fields,
   initialRecord,
   isSubmitting,
@@ -106,6 +158,8 @@ const RuleEngineFormDialog = ({
     }
   }, [open, fields, initialRecord]);
 
+  const formRows = useMemo(() => buildFormRows(fields), [fields]);
+
   const setField = (name: string, value: unknown) => {
     setValues((current) => ({ ...current, [name]: value }));
   };
@@ -141,134 +195,171 @@ const RuleEngineFormDialog = ({
     onSubmit(payload);
   };
 
+  const renderField = (field: FormFieldDef) => {
+    if (field.type === "boolean") {
+      return (
+        <Group
+          key={field.name}
+          justify="space-between"
+          align="center"
+          wrap="nowrap"
+          gap="md"
+          px="md"
+          style={{
+            minHeight: 42,
+            background: "#f8fafc",
+            border: "1px solid #e2e8f0",
+            borderRadius: "var(--mantine-radius-md)",
+          }}
+        >
+          <Text size="sm" fw={600}>
+            {field.label}
+          </Text>
+          <Switch
+            checked={Boolean(values[field.name])}
+            onChange={(e) => setField(field.name, e.currentTarget.checked)}
+            size="md"
+            color="green"
+          />
+        </Group>
+      );
+    }
+
+    const label = <FieldLabel label={field.label} required={field.required} />;
+
+    if (field.type === "select") {
+      return (
+        <Select
+          key={field.name}
+          label={label}
+          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="md"
+          styles={inputStyles}
+        />
+      );
+    }
+
+    if (field.type === "textarea") {
+      return (
+        <Textarea
+          key={field.name}
+          label={label}
+          value={String(values[field.name] ?? "")}
+          onChange={(e) => setField(field.name, e.currentTarget.value)}
+          placeholder={field.placeholder}
+          required={field.required}
+          minRows={4}
+          autosize
+          maxRows={8}
+          size="md"
+          radius="md"
+          styles={inputStyles}
+        />
+      );
+    }
+
+    return (
+      <TextInput
+        key={field.name}
+        label={label}
+        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="md"
+        styles={inputStyles}
+      />
+    );
+  };
+
   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>
-
-        <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>
+    <Modal
+      opened={open}
+      onClose={() => onOpenChange(false)}
+      title={
+        <Text size="lg" fw={700} lh={1.2}>
+          {title}
+        </Text>
+      }
+      centered
+      size={720}
+      radius="lg"
+      padding="xl"
+      overlayProps={{ backgroundOpacity: 0.45, blur: 3 }}
+      styles={{
+        content: {
+          maxWidth: "min(720px, 95vw)",
+        },
+        body: {
+          paddingTop: 20,
+        },
+      }}
+    >
+      <form onSubmit={handleSubmit}>
+        <Stack gap="lg">
+          <Box style={{ maxHeight: "calc(65vh - 120px)", overflowY: "auto", paddingRight: 4 }}>
+            <Stack gap="md">
+              {formRows.map((row) =>
+                row.kind === "pair" ? (
+                  <SimpleGrid key={`${row.fields[0].name}-${row.fields[1].name}`} cols={2} spacing="md">
+                    <Box style={{ minWidth: 0 }}>{renderField(row.fields[0])}</Box>
+                    <Box style={{ minWidth: 0 }}>{renderField(row.fields[1])}</Box>
+                  </SimpleGrid>
                 ) : (
-                  <>
-                    <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>
-            ))}
-          </div>
+                  <Box key={row.field.name}>{renderField(row.field)}</Box>
+                ),
+              )}
+            </Stack>
+          </Box>
 
-          <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="default"
               onClick={() => onOpenChange(false)}
               disabled={isSubmitting}
+              radius="md"
+              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" }} />
+                ) : undefined
+              }
+              radius="md"
+              color="green"
+              variant="filled"
+              fw={600}
+              size="md"
+            >
+              {isSubmitting ? "Saving..." : "Save"}
             </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
   );
 };
 

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineRecordActions.tsx

@@ -6,16 +6,10 @@ import {
   Send,
   Trash2,
 } from "lucide-react";
+import { ActionIcon, Button, Group, Menu, Tooltip } 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;
@@ -29,6 +23,16 @@ export interface RuleEngineRecordActionsProps {
   readOnly?: boolean;
 }
 
+const actionGroupStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+  borderRadius: 10,
+  border: "1px solid var(--mantine-color-gray-2)",
+  background: "var(--mantine-color-gray-0)",
+  padding: 3,
+} as const;
+
 const RuleEngineRecordActions = ({
   record,
   config,
@@ -43,95 +47,209 @@ const RuleEngineRecordActions = ({
   const status = String(record.status ?? "");
   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";
+  const showViewChain = config.slug === "approval-rules" && onViewChain;
 
   if (readOnly) {
-    return onViewChain ? (
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className={iconBtnClass}
-        onClick={onViewChain}
-        aria-label="View chain"
-      >
-        <Eye className="h-4 w-4" />
-      </Button>
-    ) : null;
-  }
-
-  return (
-    <div className="flex items-center justify-end gap-0.5">
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className={iconBtnClass}
-        onClick={() => onEdit(record)}
-        aria-label="Edit"
-      >
-        <Pencil className="h-4 w-4" />
-      </Button>
-
-      {config.slug === "approval-rules" && onViewChain ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className={iconBtnClass}
+    return showViewChain ? (
+      <Tooltip label="View approval chain">
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          size="md"
+          radius="md"
           onClick={onViewChain}
           aria-label="View approval chain"
         >
-          <Eye className="h-4 w-4" />
-        </Button>
+          <Eye size={16} />
+        </ActionIcon>
+      </Tooltip>
+    ) : null;
+  }
+
+  if (layout === "compact") {
+    return (
+      <Group gap={6} wrap="nowrap" justify="flex-end">
+        {showViewChain ? (
+          <Button
+            variant="light"
+            color="gray"
+            size="compact-sm"
+            radius="md"
+            onClick={onViewChain}
+            leftSection={<Eye size={14} />}
+          >
+            Chain
+          </Button>
+        ) : null}
+
+        {hasRateActions ? (
+          <RateActionsMenu
+            status={status}
+            onSubmitRate={onSubmitRate}
+            onApproveRate={onApproveRate}
+            record={record}
+            compact
+          />
+        ) : null}
+
+        <div style={actionGroupStyle}>
+          <Button
+            variant="subtle"
+            color="gray"
+            size="compact-sm"
+            radius="md"
+            onClick={() => onEdit(record)}
+            leftSection={<Pencil size={14} />}
+            styles={{ root: { fontWeight: 600 } }}
+          >
+            Edit
+          </Button>
+          <Button
+            variant="subtle"
+            color="red"
+            size="compact-sm"
+            radius="md"
+            onClick={() => onDelete(record)}
+            leftSection={<Trash2 size={14} />}
+            styles={{ root: { fontWeight: 600 } }}
+          >
+            Delete
+          </Button>
+        </div>
+      </Group>
+    );
+  }
+
+  return (
+    <Group gap={6} wrap="nowrap" justify="flex-end">
+      {showViewChain ? (
+        <Tooltip label="View approval chain">
+          <ActionIcon
+            variant="light"
+            color="gray"
+            size="md"
+            radius="md"
+            onClick={onViewChain}
+            aria-label="View approval chain"
+            style={{
+              border: "1px solid var(--mantine-color-gray-2)",
+              background: "white",
+            }}
+          >
+            <Eye size={16} />
+          </ActionIcon>
+        </Tooltip>
       ) : null}
 
       {hasRateActions ? (
-        <DropdownMenu modal={false}>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className={iconBtnClass}
-              aria-label="More actions"
-            >
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {status === "DRAFT" && onSubmitRate ? (
-              <DropdownMenuItem onSelect={() => onSubmitRate(record.id)}>
-                <Send />
-                Submit for approval
-              </DropdownMenuItem>
-            ) : null}
-            {status === "PENDING_APPROVAL" && onApproveRate ? (
-              <DropdownMenuItem onSelect={() => onApproveRate(record)}>
-                <CheckCircle2 />
-                Approve
-              </DropdownMenuItem>
-            ) : null}
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <RateActionsMenu
+          status={status}
+          onSubmitRate={onSubmitRate}
+          onApproveRate={onApproveRate}
+          record={record}
+        />
       ) : null}
 
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className={`${iconBtnClass} hover:bg-red-50 hover:text-red-600`}
-        onClick={() => onDelete(record)}
-        aria-label="Delete"
-      >
-        <Trash2 className="h-4 w-4" />
-      </Button>
-    </div>
+      <div style={actionGroupStyle}>
+        <Tooltip label="Edit">
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            size="md"
+            radius="md"
+            onClick={() => onEdit(record)}
+            aria-label="Edit record"
+            style={{
+              background: "white",
+            }}
+          >
+            <Pencil size={16} />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip label="Delete">
+          <ActionIcon
+            variant="subtle"
+            color="red"
+            size="md"
+            radius="md"
+            onClick={() => onDelete(record)}
+            aria-label="Delete record"
+            style={{
+              background: "var(--mantine-color-red-0)",
+            }}
+          >
+            <Trash2 size={16} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+    </Group>
   );
 };
 
+function RateActionsMenu({
+  status,
+  onSubmitRate,
+  onApproveRate,
+  record,
+  compact = false,
+}: {
+  status: string;
+  onSubmitRate?: (id: string) => void;
+  onApproveRate?: (record: RuleEngineRecord) => void;
+  record: RuleEngineRecord;
+  compact?: boolean;
+}) {
+  return (
+    <Menu position="bottom-end" shadow="md" withinPortal>
+      <Menu.Target>
+        {compact ? (
+          <Button
+            variant="light"
+            color="gray"
+            size="compact-sm"
+            radius="md"
+            leftSection={<MoreHorizontal size={14} />}
+          >
+            More
+          </Button>
+        ) : (
+          <Tooltip label="More actions">
+            <ActionIcon
+              variant="light"
+              color="gray"
+              size="md"
+              radius="md"
+              aria-label="More actions"
+              style={{
+                border: "1px solid var(--mantine-color-gray-2)",
+                background: "white",
+              }}
+            >
+              <MoreHorizontal size={16} />
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </Menu.Target>
+      <Menu.Dropdown>
+        {status === "DRAFT" && onSubmitRate ? (
+          <Menu.Item
+            leftSection={<Send size={14} />}
+            onClick={() => onSubmitRate(record.id)}
+          >
+            Submit for approval
+          </Menu.Item>
+        ) : null}
+        {status === "PENDING_APPROVAL" && onApproveRate ? (
+          <Menu.Item
+            leftSection={<CheckCircle2 size={14} />}
+            onClick={() => onApproveRate(record)}
+          >
+            Approve
+          </Menu.Item>
+        ) : null}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}
+
 export default RuleEngineRecordActions;

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,72 @@ 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"
+        color="green"
+        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="green"
+          variant="filled"
+          fw={600}
+          style={{ whiteSpace: "nowrap" }}
+        >
           {addLabel}
         </Button>
       ) : null}
-    </div>
-  </div>
+    </Group>
+  </Group>
 );
 
 export default RuleEngineToolbar;

apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineCardMeta.ts

@@ -6,6 +6,7 @@ import type {
 const TITLE_KEY_PRIORITY = [
   "cargoTypeName",
   "serviceName",
+  "name",
   "label",
   "actionLabel",
   "rateType",

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,50 @@ 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 (Array.isArray(value)) {
+    return (
+      <Text size="sm">{value.length > 0 ? value.join(", ") : "—"}</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 +128,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>;
 };

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-[#f1f5f9] text-xs font-semibold text-slate-600 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 = {

apps/edr-freight-web/backoffice/src/components/ui/Breadcrumbs.tsx

@@ -20,7 +20,7 @@ export default function Breadcrumbs({ items }: BreadcrumbsProps) {
       <Link
         to="/"
         aria-label="Home"
-        className="flex items-center transition hover:text-[#10B981]"
+        className="flex items-center transition hover:text-[var(--freight-brand)]"
       >
         {/* <Home className="h-4 w-4" /> */}
         Dashboard
@@ -36,7 +36,7 @@ export default function Breadcrumbs({ items }: BreadcrumbsProps) {
             {item.href && !isLast ? (
               <Link
                 to={item.href}
-                className="transition hover:text-[#10B981]"
+                className="transition hover:text-[var(--freight-brand)]"
               >
                 {item.label}
               </Link>

apps/edr-freight-web/backoffice/src/constants/URLS.ts

@@ -136,6 +136,9 @@ export const URL_CONSTANTS = {
     CONTAINER_TYPES: "/container-types",
     CONTAINER_TYPE_BY_ID: (id: string) => `/container-types/${id}`,
 
+    WAGON_TYPES: "/wagon-types",
+    WAGON_TYPE_BY_ID: (id: string) => `/wagon-types/${id}`,
+
     PRIORITY_RULES: "/priority-rules",
     PRIORITY_RULE_BY_ID: (id: string) => `/priority-rules/${id}`,
 

apps/edr-freight-web/backoffice/src/features/bookings/booking-actions.config.ts

@@ -3,12 +3,10 @@ import {
   Ban,
   Check,
   FileSignature,
-  FileText,
   MessageSquareWarning,
   Play,
   ShieldCheck,
   Truck,
-  Wallet,
   XCircle,
 } from "lucide-react";
 
@@ -30,10 +28,8 @@ export type BookingActionId =
   | "reject"
   | "approve"
   | "rejectApproval"
-  | "generateContract"
   | "viewContract"
   | "signContractStaff"
-  | "payBooking"
   | "startTransit"
   | "complete"
   | "cancel";
@@ -174,19 +170,6 @@ const SIGN_CONTRACT_STAFF_ACTION: BookingActionDef = {
   primary: true,
 };
 
-const PAY_BOOKING_ACTION: BookingActionDef = {
-  id: "payBooking",
-  label: "Pay",
-  shortLabel: "Pay",
-  description: "Complete in-app payment",
-  confirmTitle: "Complete payment?",
-  confirmDescription:
-    "This simulates an in-app payment (Telebirr for ETB, card for USD) and marks the booking as paid.",
-  variant: "default",
-  icon: Wallet,
-  primary: true,
-};
-
 function withCancel(actions: BookingActionDef[]): BookingActionDef[] {
   return [...actions, CANCEL_ACTION];
 }
@@ -196,10 +179,8 @@ const ACTION_PERMISSION: Partial<Record<BookingActionId, string>> = {
   requestChanges: FREIGHT_PERMS.bookings.requestChanges,
   reject: FREIGHT_PERMS.bookings.reject,
   rejectApproval: FREIGHT_PERMS.bookings.rejectApproval,
-  generateContract: FREIGHT_PERMS.bookings.generateContract,
   viewContract: FREIGHT_PERMS.bookings.view,
   signContractStaff: FREIGHT_PERMS.bookings.signStaff,
-  payBooking: FREIGHT_PERMS.bookings.view,
   startTransit: FREIGHT_PERMS.bookings.operations,
   complete: FREIGHT_PERMS.bookings.operations,
   cancel: FREIGHT_PERMS.bookings.cancel,
@@ -277,21 +258,7 @@ export function getBookingActions(
       actions = withCancel(approvalActions(approvalSteps));
       break;
     case "APPROVED":
-      actions = [
-        {
-          id: "generateContract",
-          label: "Generate contract",
-          shortLabel: "Contract",
-          description: "Create contract document",
-          confirmTitle: "Generate contract?",
-          confirmDescription:
-            "A contract will be generated and the booking moves to contract ready.",
-          variant: "default",
-          icon: FileText,
-          primary: true,
-        },
-        CANCEL_ACTION,
-      ];
+      actions = [{ ...VIEW_CONTRACT_ACTION, primary: true }, CANCEL_ACTION];
       break;
     case "CONTRACT_READY":
       actions = [{ ...VIEW_CONTRACT_ACTION, primary: true }];
@@ -300,10 +267,7 @@ export function getBookingActions(
       actions = [SIGN_CONTRACT_STAFF_ACTION, VIEW_CONTRACT_ACTION];
       break;
     case "FULLY_EXECUTED":
-      actions = [
-        PAY_BOOKING_ACTION,
-        { ...VIEW_CONTRACT_ACTION, label: "View executed contract" },
-      ];
+      actions = [{ ...VIEW_CONTRACT_ACTION, label: "View executed contract", primary: true }];
       break;
     case "PAID":
       actions = [

apps/edr-freight-web/backoffice/src/features/bookings/booking-status.config.ts

@@ -28,7 +28,7 @@ export const BOOKING_STATUS_STYLES: Record<string, StatusStyle> = {
   },
   APPROVED: {
     label: "Approved",
-    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
+    color: "bg-[color:var(--freight-brand-muted)] text-[color:var(--freight-brand)] border-[color:var(--freight-brand-border)]",
   },
   CONTRACT_READY: {
     label: "Contract Ready",
@@ -52,7 +52,7 @@ export const BOOKING_STATUS_STYLES: Record<string, StatusStyle> = {
   },
   PAID: {
     label: "Paid",
-    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
+    color: "bg-[color:var(--freight-brand-muted)] text-[color:var(--freight-brand)] border-[color:var(--freight-brand-border)]",
   },
   IN_TRANSIT: {
     label: "In Transit",
@@ -120,8 +120,8 @@ export const BOOKING_STATUS_META: Record<string, StatusMeta> = {
   },
   APPROVED: {
     title: "Approved",
-    description: "Ready to generate contract.",
-    color: "text-emerald-600",
+    description: "Contract generated automatically; awaiting customer signature.",
+    color: "text-[color:var(--freight-brand)]",
     stage: 2,
   },
   CONTRACT_READY: {
@@ -138,7 +138,7 @@ export const BOOKING_STATUS_META: Record<string, StatusMeta> = {
   },
   FULLY_EXECUTED: {
     title: "Fully Executed",
-    description: "Contract locked; proceed to payment.",
+    description: "Contract locked; awaiting customer payment.",
     color: "text-indigo-600",
     stage: 3,
   },
@@ -157,7 +157,7 @@ export const BOOKING_STATUS_META: Record<string, StatusMeta> = {
   PAID: {
     title: "Paid",
     description: "Payment confirmed; ready for operations.",
-    color: "text-emerald-600",
+    color: "text-[color:var(--freight-brand)]",
     stage: 4,
   },
   IN_TRANSIT: {
@@ -219,9 +219,17 @@ export const BOOKING_LIST_TABS = [
   {
     key: "payment",
     label: "Payment",
-    statuses: ["FULLY_EXECUTED", "PAID"],
+    statuses: [
+      "FULLY_EXECUTED",
+      "PNR_GENERATED",
+      "PAYMENT_VERIFICATION_IN_PROGRESS",
+    ],
+  },
+  {
+    key: "operations",
+    label: "Operations",
+    statuses: ["PAID", "IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"],
   },
-  { key: "operations", label: "Operations", statuses: ["IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"] },
   { key: "completed", label: "Completed", statuses: ["COMPLETED"] },
   { key: "closed", label: "Closed", statuses: ["REJECTED", "CANCELLED"] },
 ] as const;
@@ -240,11 +248,15 @@ export const WORKFLOW_STAGES = [
   },
   {
     label: "Payment",
-    statuses: ["FULLY_EXECUTED", "PAID"],
+    statuses: [
+      "FULLY_EXECUTED",
+      "PNR_GENERATED",
+      "PAYMENT_VERIFICATION_IN_PROGRESS",
+    ],
   },
   {
     label: "Operations",
-    statuses: ["IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"],
+    statuses: ["PAID", "IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"],
   },
   { label: "Done", statuses: ["COMPLETED"] },
 ] as const;

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";
@@ -9,8 +11,9 @@ import { Toaster } from "react-hot-toast";
 
 import App from "./App";
 import { AuthProvider } from "./auth/AuthProvider";
-import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient } from "./lib/queryClient";
+import { freightMantineTheme } from "./theme/freight-brand";
+import { QueryClientProvider } from "@tanstack/react-query";
 
 const THEME_STORAGE_KEY = "edr-theme";
 
@@ -41,14 +44,15 @@ if (!rootElement) {
 
 createRoot(rootElement).render(
   <QueryClientProvider client={queryClient}>
-
-  <StrictMode>
-    <BrowserRouter>
-      <AuthProvider>
-        <App />
-        <Toaster position="top-right" />
-      </AuthProvider>
-    </BrowserRouter>
-  </StrictMode>,
+    <MantineProvider theme={freightMantineTheme}>
+      <StrictMode>
+        <BrowserRouter>
+          <AuthProvider>
+            <App />
+            <Toaster position="top-right" />
+          </AuthProvider>
+        </BrowserRouter>
+      </StrictMode>
+    </MantineProvider>
   </QueryClientProvider>
 );

apps/edr-freight-web/backoffice/src/pages/bookings/BookingDetailPage.tsx

@@ -1,11 +1,155 @@
-import FeaturePlaceholder from "@/components/FeaturePlaceholder";
+import { useParams, useNavigate } from "react-router-dom";
+import { Container, Stack, Grid } from "@mantine/core";
+
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import {
+  detailStyles,
+  type BookingDetailView,
+  BookingDetailToolbar,
+  BookingDetailHeader,
+  BookingLifecycleStepper,
+  BookingRouteCard,
+  BookingContainersCard,
+  BookingApprovalCard,
+  BookingReviewNotesCard,
+  BookingPaymentCard,
+  BookingFactsCard,
+  BookingDocumentsCard,
+} from "@/components/bookings/detail";
 
 const BookingDetailPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  // Mock data - replace with actual API call
+  const booking: BookingDetailView = {
+    id: id || "a61955b7-af21-4664-84d3-7e4e66293b6f",
+    reference: "BKG-2026-001456",
+    status: "IN_TRANSIT",
+    scheduledDate: "2026-06-15",
+    totalAmount: 15750.5,
+    paymentCurrency: "USD",
+    paymentStatus: "PAID",
+    tradeDirection: "IMPORT",
+    freightType: "CONTAINER",
+    priorityScore: 650,
+    company: {
+      id: "1",
+      companyName: "Global Logistics Inc.",
+      name: "Global Logistics Inc.",
+    },
+    originYard: { id: "1", label: "Port of Shanghai", code: "PVG" },
+    destinationYard: { id: "2", label: "Port of Addis Ababa", code: "AAA" },
+    serviceType: { id: "1", label: "Container Import Service", code: "CIS" },
+    cargoType: { id: "1", label: "Electronics", code: "ELEC" },
+    shippingLine: { id: "1", label: "Maersk Line", code: "MAE" },
+    cargoTotalWeightVgm: 22.5,
+    pnrCode: "PNR-2026-001456",
+    createdAt: "2026-06-05T10:30:00Z",
+    updatedAt: "2026-06-06T14:20:00Z",
+    bookingContainers: [
+      {
+        id: "1",
+        quantity: 2,
+        vgmPerUnitTons: 11.25,
+        containerType: { label: "20FT Standard", sizeFt: 20, isReefer: false },
+      },
+    ],
+    approvalSteps: [
+      {
+        id: "1",
+        stepOrder: 1,
+        requiredRole: "LINE_STAFF",
+        status: "APPROVED",
+        actionedAt: "2026-06-05T11:00:00Z",
+      },
+      // {
+      //   id: "2",
+      //   stepOrder: 2,
+      //   requiredRole: "DIRECTOR",
+      //   status: "APPROVED",
+      //   actionedAt: "2026-06-05T13:30:00Z",
+      // },
+      {
+        id: "3",
+        stepOrder: 3,
+        requiredRole: "CEO",
+        status: "APPROVED",
+        actionedAt: "2026-06-05T15:45:00Z",
+      },
+    ],
+    reviewNotes: [
+      {
+        id: "1",
+        note: "Cargo declaration verified against shipping documents.",
+        type: "VERIFICATION",
+        createdAt: "2026-06-05T11:15:00Z",
+      },
+      {
+        id: "2",
+        note: "VGM documentation received and processed.",
+        type: "COMPLIANCE",
+        createdAt: "2026-06-05T12:00:00Z",
+      },
+    ],
+    files: [
+      { id: "1", name: "Bill_of_Lading.pdf", mimeType: "application/pdf" },
+      { id: "2", name: "VGM_Certificate.pdf", mimeType: "application/pdf" },
+      { id: "3", name: "Commercial_Invoice.pdf", mimeType: "application/pdf" },
+    ],
+  };
+
+  const approvalSteps = booking.approvalSteps ?? [];
+  const approvedCount = approvalSteps.filter((s) => s.status === "APPROVED").length;
+  const totalSteps = approvalSteps.length;
+
   return (
-    <FeaturePlaceholder
-      title="Booking Detail"
-      description="Inspect booking metadata, operational notes, and fulfillment progress for internal teams."
-    />
+    <div style={detailStyles.page}>
+      <Container size="xxl" py="lg">
+        <BookingDetailToolbar onBack={() => navigate(-1)} />
+
+        <Breadcrumbs
+          items={[
+            { label: "Operations" },
+            { label: "Booking requests", href: "/dashboard/booking-requests" },
+            { label: booking.reference },
+          ]}
+        />
+{/* 
+        <BookingDetailHeader
+          booking={booking}
+          approvedCount={approvedCount}
+          totalSteps={totalSteps}
+        /> */}
+
+        <BookingLifecycleStepper status={booking.status} />
+
+        <Grid gutter="lg">
+          {/* LEFT — primary content */}
+          <Grid.Col span={{ base: 12, lg: 8 }}>
+            <Stack gap="lg">
+              <BookingRouteCard booking={booking} />
+              <BookingContainersCard containers={booking.bookingContainers ?? []} />
+              <BookingApprovalCard steps={approvalSteps} approvedCount={approvedCount} />
+              <BookingReviewNotesCard notes={booking.reviewNotes ?? []} />
+            </Stack>
+          </Grid.Col>
+
+          {/* RIGHT — summary sidebar */}
+          <Grid.Col span={{ base: 12, lg: 4 }}>
+            <Stack gap="lg">
+              <BookingPaymentCard
+                totalAmount={booking.totalAmount}
+                currency={booking.paymentCurrency}
+                paymentStatus={booking.paymentStatus}
+              />
+              <BookingFactsCard booking={booking} />
+              <BookingDocumentsCard files={booking.files ?? []} />
+            </Stack>
+          </Grid.Col>
+        </Grid>
+      </Container>
+    </div>
   );
 };
 

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx

@@ -1,111 +1,110 @@
 import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, FileSignature, Package } from "lucide-react";
 import {
-  Anchor,
-  ArrowLeft,
-  ArrowRight,
-  Building2,
-  Calendar,
-  Clock,
-  Loader2,
-  MapPin,
-  Package,
-  FileSignature,
-  RefreshCw,
-  Train,
-  Truck,
-} from "lucide-react";
+  Container,
+  Stack,
+  Grid,
+  Center,
+  Loader,
+  Text,
+  Paper,
+  Button,
+  Box,
+} from "@mantine/core";
 
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { ApprovalStepsCard } from "@/components/bookings/ApprovalStepsCard";
-import { NextStepBanner } from "@/components/bookings/NextStepBanner";
 import { BookingActionsToolbar } from "@/components/bookings/BookingActionsToolbar";
 import { BookingPricingSummary } from "@/components/bookings/BookingPricingSummary";
-import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
-import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
 import { BookingWorkflowStepper } from "@/components/bookings/BookingWorkflowStepper";
 import {
-  bookingGlass,
-  bookingSurface,
-} from "@/components/bookings/booking-ui.styles";
+  detailStyles,
+  BookingRequestHero,
+  BookingRouteServiceCard,
+  BookingMileServicesCard,
+  BookingCargoCard,
+  BookingContractSummaryCard,
+} from "@/components/bookings/detail";
 import { getStatusMeta } from "@/features/bookings/booking-status.config";
 import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
-import {
-  useBookingDetail,
-  useBookingMutations,
-} from "@/hooks/bookings/useBookings";
-import type { BookingDetail } from "@/types/booking";
-import { cn } from "@/lib/utils";
-import {
-  Badge,
-  Button,
-  Separator,
-} from "@edr/ui-common";
+import { useBookingDetail, useBookingMutations } from "@/hooks/bookings/useBookings";
 
 export default function BookingRequestDetailPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
-  const { data: booking, isLoading, isError, refetch, isFetching } =
-    useBookingDetail(id);
+  const { data: booking, isLoading, isError, refetch, isFetching } = useBookingDetail(id);
   const mutations = useBookingMutations(id ?? "");
 
   if (isLoading) {
     return (
-      <div className={bookingSurface.page}>
-        <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 p-8">
-          <Loader2 className="size-10 animate-spin text-muted-foreground" />
-          <p className="text-sm font-medium text-muted-foreground">
-            Loading booking…
-          </p>
-        </div>
-      </div>
+      <Box style={detailStyles.page}>
+        <Center mih="60vh">
+          <Stack align="center" gap="md">
+            <Loader color="gray" />
+            <Text size="sm" c="dimmed" fw={500}>
+              Loading booking…
+            </Text>
+          </Stack>
+        </Center>
+      </Box>
     );
   }
 
   if (isError || !booking) {
     return (
-      <div className={bookingSurface.page}>
-        <div className={bookingSurface.pageInner}>
-          <div
-            className={cn(
-              bookingSurface.sectionCard,
-              "mx-auto max-w-md p-12 text-center",
-            )}
-          >
-            <div
-              className={cn(
-                "mx-auto flex size-16 items-center justify-center rounded-2xl",
-                bookingGlass.iconWellGreen,
-              )}
-            >
-              <Package className="size-8" />
-            </div>
-            <h1 className="mt-6 text-xl font-bold text-foreground">
+      <Box style={detailStyles.page}>
+        <Container size="sm" py="xl">
+          <Paper radius="md" withBorder p="xl" ta="center" style={detailStyles.card}>
+            <Center>
+              <Box
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 64,
+                  height: 64,
+                  borderRadius: 16,
+                  background: "var(--mantine-color-gray-1)",
+                  color: "var(--mantine-color-gray-6)",
+                }}
+              >
+                <Package size={32} />
+              </Box>
+            </Center>
+            <Text fw={700} size="lg" mt="lg">
               Booking not found
-            </h1>
-            <p className="mt-2 text-sm text-muted-foreground">
+            </Text>
+            <Text size="sm" c="dimmed" mt={4}>
               This request may have been removed or the link is invalid.
-            </p>
+            </Text>
             <Button
-              className="mt-6 gap-2"
-              variant="outline"
+              variant="default"
+              mt="lg"
+              leftSection={<ArrowLeft size={16} />}
               onClick={() => navigate("/dashboard/booking-requests")}
             >
-              <ArrowLeft className="size-4" />
               Back to booking requests
             </Button>
-          </div>
-        </div>
-      </div>
+          </Paper>
+        </Container>
+      </Box>
     );
   }
 
   const row = toBookingListRow(booking);
   const statusMeta = getStatusMeta(booking.status);
-  const amount = Number(booking.totalAmount);
+  const showContractButton = [
+    "CONTRACT_READY",
+    "SIGNED_CUSTOMER",
+    "FULLY_EXECUTED",
+  ].includes(booking.status);
+  const showApprovalCard =
+    booking.status === "PENDING_APPROVAL" ||
+    booking.status === "APPROVED_PENDING_SIGNATURE";
 
   return (
-    <div className={bookingSurface.page}>
-      <div className={bookingSurface.pageInner}>
+    <Box style={detailStyles.page}>
+      <Container size="xxl" py="lg">
         <Breadcrumbs
           items={[
             { label: "Booking requests", href: "/dashboard/booking-requests" },
@@ -113,381 +112,66 @@ export default function BookingRequestDetailPage() {
           ]}
         />
 
-        <div className={bookingSurface.detailHero}>
-          <div className={bookingSurface.heroGlow} />
-          <div className={bookingSurface.heroSheen} />
-          <div className="relative p-6 sm:p-8">
-            <div className="mb-4">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="-ml-2 gap-2 text-muted-foreground hover:text-foreground"
-                onClick={() => navigate("/dashboard/booking-requests")}
-              >
-                <ArrowLeft className="size-4" />
-                Back to list
-              </Button>
-            </div>
-            <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
-              <div className="flex gap-4">
-                <div
-                  className={cn(
-                    "flex size-16 shrink-0 items-center justify-center rounded-2xl",
-                    bookingGlass.iconWellGreen,
+        <Stack gap="lg" mt="sm">
+          <BookingRequestHero
+            booking={booking}
+            customerLabel={row.customerLabel}
+            onBack={() => navigate("/dashboard/booking-requests")}
+            onRefresh={() => refetch()}
+            isFetching={isFetching}
+          />
+
+          <BookingWorkflowStepper
+            status={booking.status}
+            title={statusMeta.title}
+            description={statusMeta.description}
+            titleColor={statusMeta.color}
+          />
+
+          <Grid gutter="lg">
+            {/* LEFT — primary content */}
+            <Grid.Col span={{ base: 12, lg: 8 }}>
+              <Stack gap="lg">
+                <BookingRouteServiceCard
+                  booking={booking}
+                  originLabel={row.originLabel}
+                  destinationLabel={row.destinationLabel}
+                />
+                <BookingMileServicesCard booking={booking} />
+                <BookingCargoCard booking={booking} />
+                {booking.contractSummary && (
+                  <BookingContractSummaryCard summary={booking.contractSummary} />
+                )}
+              </Stack>
+            </Grid.Col>
+
+            {/* RIGHT — sticky action / summary rail */}
+            <Grid.Col span={{ base: 12, lg: 4 }}>
+              <Box style={{ position: "sticky", top: 24 }}>
+                <Stack gap="lg">
+                  <BookingPricingSummary booking={booking} />
+                  <BookingActionsToolbar booking={booking} mutations={mutations} />
+                  {showContractButton && (
+                    <Button
+                      fullWidth
+                      color="green"
+                      leftSection={<FileSignature size={16} />}
+                      onClick={() =>
+                        navigate(`/dashboard/booking-requests/${booking.id}/contract`)
+                      }
+                    >
+                      View & sign contract
+                    </Button>
                   )}
-                >
-                  <Package className="size-7" strokeWidth={1.75} />
-                </div>
-                <div className="min-w-0 space-y-3">
-                  <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
-                    Booking reference
-                  </p>
-                  <div className="flex flex-wrap items-center gap-2">
-                    <h1 className="text-2xl font-semibold tracking-tight text-foreground sm:text-[1.75rem]">
-                      {booking.reference}
-                    </h1>
-                    <BookingStatusBadge status={booking.status} />
-                    <BookingPriorityBadge score={booking.priorityScore} />
-                  </div>
-                  {booking.nextStep && (
-                    <NextStepBanner nextStep={booking.nextStep} className="max-w-xl" />
+                  {showApprovalCard && (
+                    <ApprovalStepsCard booking={booking} mutations={mutations} />
                   )}
-                  <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
-                    <span className="inline-flex items-center gap-1.5 font-medium text-foreground">
-                      <Building2 className="size-4 opacity-70" />
-                      {row.customerLabel}
-                    </span>
-                    <span className="inline-flex items-center gap-1.5">
-                      <Calendar className="size-4 opacity-70" />
-                      Scheduled {booking.scheduledDate}
-                    </span>
-                    <span className="inline-flex items-center gap-1.5">
-                      <Clock className="size-4 opacity-70" />
-                      Created{" "}
-                      {new Date(booking.createdAt).toLocaleDateString(undefined, {
-                        dateStyle: "medium",
-                      })}
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              <div className="flex flex-col items-stretch gap-3 sm:items-end">
-                <div className={cn(bookingSurface.valueCard, "min-w-[12rem] text-right")}>
-                  <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-                    Total value
-                  </p>
-                  <p className="mt-1 font-mono text-2xl font-semibold tabular-nums text-foreground">
-                    {booking.paymentCurrency}{" "}
-                    {amount.toLocaleString(undefined, {
-                      minimumFractionDigits: 2,
-                    })}
-                  </p>
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    {booking.paymentStatus}
-                  </p>
-                </div>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="gap-2 self-end border-border/60 bg-background/60 backdrop-blur-sm hover:bg-background/80"
-                  disabled={isFetching}
-                  onClick={() => refetch()}
-                >
-                  <RefreshCw
-                    className={cn("size-4", isFetching && "animate-spin")}
-                  />
-                  Refresh
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <BookingWorkflowStepper
-          status={booking.status}
-          title={statusMeta.title}
-          description={statusMeta.description}
-          titleColor={statusMeta.color}
-        />
-
-        <div className="grid grid-cols-1 gap-6 xl:grid-cols-12 xl:gap-8">
-          <div className="flex flex-col gap-6 xl:col-span-8">
-            <RouteCard booking={booking} row={row} />
-            <MileCard booking={booking} />
-            <CargoCard booking={booking} />
-            {booking.contractSummary && (
-              <SectionShell
-                icon={<Anchor className="size-4" />}
-                title="Contract summary"
-                subtitle="Generated terms"
-              >
-                <pre className="max-h-64 overflow-auto whitespace-pre-wrap rounded-lg border border-border/50 bg-muted/10 p-4 font-mono text-xs leading-relaxed text-muted-foreground backdrop-blur-sm">
-                  {booking.contractSummary}
-                </pre>
-              </SectionShell>
-            )}
-          </div>
-
-          <div
-            className={cn(
-              "flex flex-col gap-6",
-              bookingSurface.stickySidebar,
-              "xl:col-span-4",
-            )}
-          >
-            <BookingPricingSummary booking={booking} />
-            <BookingActionsToolbar booking={booking} mutations={mutations} />
-            {["CONTRACT_READY", "SIGNED_CUSTOMER", "FULLY_EXECUTED"].includes(
-              booking.status,
-            ) && (
-              <div className={bookingSurface.sectionCard}>
-                <div className="px-5 py-4">
-                  <Button
-                    className="w-full gap-2 shadow-sm"
-                    variant="default"
-                    onClick={() =>
-                      navigate(`/dashboard/booking-requests/${booking.id}/contract`)
-                    }
-                  >
-                    <FileSignature className="size-4" />
-                    View &amp; sign contract
-                  </Button>
-                </div>
-              </div>
-            )}
-            {(booking.status === "PENDING_APPROVAL" ||
-              booking.status === "APPROVED_PENDING_SIGNATURE") && (
-              <ApprovalStepsCard booking={booking} mutations={mutations} />
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function SectionShell({
-  icon,
-  title,
-  subtitle,
-  children,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  subtitle?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className={bookingSurface.sectionCard}>
-      <div className={bookingSurface.sectionHeader}>
-        <div className={bookingSurface.sectionIcon}>{icon}</div>
-        <div>
-          <h2 className="text-sm font-semibold text-foreground">{title}</h2>
-          {subtitle && (
-            <p className="text-xs text-muted-foreground">{subtitle}</p>
-          )}
-        </div>
-      </div>
-      <div className={bookingSurface.sectionBody}>{children}</div>
-    </div>
-  );
-}
-
-function RouteCard({
-  booking,
-  row,
-}: {
-  booking: BookingDetail;
-  row: ReturnType<typeof toBookingListRow>;
-}) {
-  return (
-    <SectionShell
-      icon={<Train className="size-4" />}
-      title="Route & service"
-      subtitle="Corridor and service level"
-    >
-      <div
-        className={cn(
-          "flex flex-col items-stretch gap-6 rounded-xl border border-dashed border-emerald-500/20 p-5 backdrop-blur-sm md:flex-row md:items-center md:justify-between",
-          bookingGlass.activeTab,
-        )}
-      >
-        <RouteEndpoint label="Origin" station={row.originLabel} />
-        <div className="flex flex-col items-center gap-2 px-4">
-          <div className={cn("flex size-10 items-center justify-center rounded-full", bookingGlass.iconWellGreen)}>
-            <Train className="size-5 text-black" strokeWidth={1.75} />
-          </div>
-          <ArrowRight className="size-5 rotate-90 text-muted-foreground md:rotate-0" />
-          <Badge
-            variant="outline"
-            className="border-border/50 bg-background/50 text-[10px] font-medium uppercase backdrop-blur-sm"
-          >
-            {booking.serviceType?.label ??
-              booking.serviceType?.code ??
-              "Rail service"}
-          </Badge>
-        </div>
-        <RouteEndpoint label="Destination" station={row.destinationLabel} />
-      </div>
-      <div className="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-        <MetricTile label="Trade direction" value={booking.tradeDirection} />
-        <MetricTile label="Freight type" value={booking.freightType} />
-        <MetricTile
-          label="Equipment return"
-          value={booking.equipmentReturn ?? "—"}
-        />
-        {booking.shippingLine && (
-          <MetricTile
-            label="Shipping line"
-            value={
-              booking.shippingLine.label ??
-              booking.shippingLine.name ??
-              booking.shippingLine.code ??
-              "—"
-            }
-          />
-        )}
-      </div>
-    </SectionShell>
-  );
-}
-
-function MileCard({ booking }: { booking: BookingDetail }) {
-  if (!booking.firstMilePickupAddress && !booking.lastMileDeliveryAddress) {
-    return null;
-  }
-  return (
-    <SectionShell
-      icon={<Truck className="size-4" />}
-      title="Mile services"
-      subtitle="First and last mile"
-    >
-      <div className="grid gap-4 md:grid-cols-2">
-        {booking.firstMilePickupAddress && (
-          <MetricTile
-            label="First mile pickup"
-            value={booking.firstMilePickupAddress}
-          />
-        )}
-        {booking.lastMileDeliveryAddress && (
-          <MetricTile
-            label="Last mile delivery"
-            value={booking.lastMileDeliveryAddress}
-          />
-        )}
-      </div>
-    </SectionShell>
-  );
-}
-
-function CargoCard({ booking }: { booking: BookingDetail }) {
-  const containers = booking.bookingContainers ?? [];
-  return (
-    <SectionShell
-      icon={<Package className="size-4" />}
-      title="Cargo specifications"
-      subtitle="Freight and containers"
-    >
-      <div className="grid gap-3 sm:grid-cols-3">
-        <MetricTile
-          label="Cargo type"
-          value={booking.cargoType?.label ?? booking.freightType}
-        />
-        <MetricTile
-          label="Total VGM"
-          value={`${booking.cargoTotalWeightVgm} tons`}
-        />
-        <MetricTile
-          label="Hazardous"
-          value={booking.isHazardous ? "Yes" : "No"}
-          highlight={booking.isHazardous}
-        />
-      </div>
-      {containers.length > 0 && (
-        <>
-          <Separator className="my-5" />
-          <div className="overflow-hidden rounded-lg border border-border/50 backdrop-blur-sm">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-border/50 bg-muted/20 text-left text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-                  <th className="px-4 py-3">Container type</th>
-                  <th className="px-4 py-3">Qty</th>
-                  <th className="px-4 py-3">VGM / unit</th>
-                </tr>
-              </thead>
-              <tbody>
-                {containers.map((c) => (
-                  <tr
-                    key={c.id}
-                    className="border-b border-border/60 last:border-0"
-                  >
-                    <td className="px-4 py-3 font-medium text-foreground">
-                      {c.containerType?.label ??
-                        c.containerType?.code ??
-                        c.containerTypeId}
-                    </td>
-                    <td className="px-4 py-3 tabular-nums text-muted-foreground">
-                      {c.quantity}
-                    </td>
-                    <td className="px-4 py-3 tabular-nums text-muted-foreground">
-                      {c.vgmPerUnitTons} t
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </>
-      )}
-    </SectionShell>
-  );
-}
-
-function RouteEndpoint({
-  label,
-  station,
-}: {
-  label: string;
-  station: string;
-}) {
-  return (
-    <div className="flex min-w-0 items-center gap-3 md:max-w-[14rem]">
-      <div className={bookingSurface.sectionIconLg}>
-        <MapPin className="size-5" strokeWidth={1.75} />
-      </div>
-      <div className="min-w-0">
-        <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-          {label}
-        </p>
-        <p className="truncate text-sm font-semibold text-foreground">{station}</p>
-      </div>
-    </div>
-  );
-}
-
-function MetricTile({
-  label,
-  value,
-  highlight,
-}: {
-  label: string;
-  value: string;
-  highlight?: boolean;
-}) {
-  return (
-    <div
-      className={cn(
-        bookingSurface.metricTile,
-        highlight && "border-amber-300/50 bg-amber-50/50 dark:bg-amber-950/20",
-      )}
-    >
-      <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-        {label}
-      </p>
-      <p className="mt-1.5 text-sm font-medium leading-snug text-foreground">
-        {value}
-      </p>
-    </div>
+                </Stack>
+              </Box>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Container>
+    </Box>
   );
 }

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx

@@ -14,6 +14,20 @@ import {
   User,
   X,
 } from "lucide-react";
+import {
+  Container,
+  Stack,
+  Group,
+  Title,
+  Text,
+  Card,
+  TextInput,
+  ActionIcon,
+  Badge as MantineBadge,
+  Button as MantineButton,
+  ThemeIcon,
+  Paper,
+} from "@mantine/core";
 
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
@@ -26,12 +40,7 @@ import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
 import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell";
 import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
 import { BookingTableEmpty } from "@/components/bookings/BookingTableEmpty";
-import {
-  bookingGlass,
-  bookingInput,
-  bookingSurface,
-  bookingTable,
-} from "@/components/bookings/booking-ui.styles";
+import { bookingTable } from "@/components/bookings/booking-ui.styles";
 import { BOOKING_LIST_TABS } from "@/features/bookings/booking-status.config";
 import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
 import { useBookingList, useBookingListSummary } from "@/hooks/bookings/useBookings";
@@ -176,8 +185,18 @@ export default function BookingRequestsPage() {
     },
     {
       id: "status",
+      size: 200,
+      minSize: 180,
       header: () => <span className={bookingTable.headerCell}>Status</span>,
-      cell: ({ row }) => <BookingStatusBadge status={row.original.status} />,
+      cell: ({ row }) => (
+        <div className="py-1">
+          <BookingStatusBadge status={row.original.status} />
+        </div>
+      ),
+      meta: {
+        headerClassName: "min-w-[11rem]",
+        cellClassName: "min-w-[11rem]",
+      },
     },
     {
       id: "approval",
@@ -237,168 +256,189 @@ export default function BookingRequestsPage() {
   ];
 
   return (
-    <div className={bookingSurface.page}>
-      <div className={bookingSurface.pageInner}>
+    <div style={{ background: "var(--mantine-color-gray-0)", minHeight: "100vh" }}>
+      <Container size="xxl" py="xl">
         <Breadcrumbs items={[{ label: "Operations" }, { label: "Booking requests" }]} />
-
-        <div className={bookingSurface.hero}>
-          <div className={bookingSurface.heroGlow} />
-          <div className={bookingSurface.heroSheen} />
-          <div className="relative flex flex-col gap-6 p-6 sm:flex-row sm:items-center sm:justify-between sm:p-8">
-            <div className="flex items-start gap-4">
-              <div
-                className={cn(
-                  "flex size-14 shrink-0 items-center justify-center rounded-2xl",
-                  bookingGlass.iconWellGreen,
-                )}
-              >
-                <Inbox className="size-6" strokeWidth={1.75} />
-              </div>
-              <div>
-                <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
-                  Operations
-                </p>
-                <h1 className="mt-1 text-2xl font-semibold tracking-tight text-foreground sm:text-[1.75rem]">
-                  Booking requests
-                </h1>
-                <p className="mt-1.5 max-w-xl text-sm leading-relaxed text-muted-foreground">
-                  Track bookings from submission through payment and operations.
-                </p>
-              </div>
-            </div>
-            <div className="flex shrink-0 items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                className="gap-2 border-border/60 bg-background/60 backdrop-blur-sm hover:bg-background/80"
-                disabled={isFetching}
-                onClick={handleRefresh}
-              >
-                <RefreshCw
-                  className={cn("size-4", isFetching && "animate-spin")}
-                />
-                Refresh
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        <BookingStatGrid
-          items={[
-            {
-              label: "In queue",
-              value: statValue(metrics?.inQueue),
-              hint: "Total matching filter",
-              icon: LayoutList,
-            },
-            {
-              label: "On this page",
-              value: statValue(metrics?.onThisPage),
-              hint: "Current page",
-              icon: FileText,
-            },
-            {
-              label: "Needs action",
-              value: statValue(metrics?.needsAction),
-              hint: "Submitted or pending approval",
-              icon: Clock,
-              accent:
-                !summaryLoading && (metrics?.needsAction ?? 0) > 0
-                  ? "amber"
-                  : "default",
-            },
-            {
-              label: "Urgent",
-              value: statValue(metrics?.urgent),
-              hint: "High priority score",
-              icon: AlertCircle,
-              accent:
-                !summaryLoading && (metrics?.urgent ?? 0) > 0 ? "rose" : "default",
-            },
-          ]}
-        />
-
-        <BookingStatusTabs
-          active={activeTab}
-          onChange={(tab) => {
-            setActiveTab(tab);
-            setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+{/* 
+        <Card
+          p="lg"
+          radius="lg"
+          withBorder
+          mb="xl"
+          style={{
+            background: "white",
+            border: "1px solid var(--mantine-color-gray-2)",
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)",
           }}
-          counts={tabCounts}
-        />
-
-        <div className={bookingSurface.panel}>
-          <div className={bookingSurface.panelToolbar}>
-            <div className="relative min-w-[12rem] flex-1 sm:max-w-sm">
-              <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                type="search"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search reference or customer…"
-                className={bookingInput.search}
-              />
-              {query && (
-                <button
-                  type="button"
-                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
-                  onClick={() => setQuery("")}
-                  aria-label="Clear search"
-                >
-                  <X className="size-3.5" />
-                </button>
-              )}
-            </div>
-
-            <div className="flex flex-wrap items-center gap-2">
-              <span
-                className={cn(
-                  "hidden rounded-md border border-border/50 bg-background/50 px-2.5 py-1 text-xs text-muted-foreground backdrop-blur-sm sm:inline",
-                )}
+        >
+          <Group justify="space-between" align="flex-start">
+            <Group gap="md" align="flex-start">
+              <ThemeIcon
+                size="lg"
+                radius="lg"
+                color="green"
+                variant="light"
               >
-                {total} record{total !== 1 ? "s" : ""}
-              </span>
-            </div>
-          </div>
+                <Inbox size={28} />
+              </ThemeIcon>
+              <Stack gap={8}>
+                <Text size="xs" fw={600} c="dimmed" tt="uppercase">
+                  Operations
+                </Text>
+                <Title order={1} size="h2">
+                  Booking Requests
+                </Title>
+                <Text size="sm" c="dimmed" maw="500px">
+                  Track bookings from submission through payment and operations. Monitor status, prioritize urgent bookings, and manage approvals.
+                </Text>
+              </Stack>
+            </Group>
+            <MantineButton
+              variant="light"
+              color="green"
+              leftSection={<RefreshCw size={18} />}
+              disabled={isFetching}
+              onClick={handleRefresh}
+              loading={isFetching}
+            >
+              Refresh
+            </MantineButton>
+          </Group>
+        </Card> */}
 
-          {showEmpty ? (
-            <BookingTableEmpty
-              isError={isError}
-              hasSearch={hasSearch}
-              onRetry={handleRefresh}
+<div className="mt-6"></div>
+        <Stack gap="lg">
+          <BookingStatGrid
+            items={[
+              {
+                label: "In queue",
+                value: statValue(metrics?.inQueue),
+                hint: "Total matching filter",
+                icon: LayoutList,
+              },
+              {
+                label: "On this page",
+                value: statValue(metrics?.onThisPage),
+                hint: "Current page",
+                icon: FileText,
+              },
+              {
+                label: "Needs action",
+                value: statValue(metrics?.needsAction),
+                hint: "Submitted or pending approval",
+                icon: Clock,
+                accent:
+                  !summaryLoading && (metrics?.needsAction ?? 0) > 0
+                    ? "amber"
+                    : "default",
+              },
+              {
+                label: "Urgent",
+                value: statValue(metrics?.urgent),
+                hint: "High priority score",
+                icon: AlertCircle,
+                accent:
+                  !summaryLoading && (metrics?.urgent ?? 0) > 0 ? "rose" : "default",
+              },
+            ]}
+          />
+
+          <Paper
+            p="md"
+            radius="lg"
+            withBorder
+            style={{
+              background: "white",
+              border: "1px solid var(--mantine-color-gray-2)",
+            }}
+          >
+            <BookingStatusTabs
+              active={activeTab}
+              onChange={(tab) => {
+                setActiveTab(tab);
+                setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+              }}
+              counts={tabCounts}
             />
-          ) : (
-            <div className={bookingSurface.tableWrap}>
-              <DataTable
-                columns={columns}
-                data={rows}
-                status={isLoading ? "loading" : isError ? "error" : "success"}
-                onRowClick={handleRowClick}
-                pagination={{
-                  pageIndex: pagination.pageIndex,
-                  pageSize: pagination.pageSize,
-                  pageCount,
-                  totalCount: total,
-                }}
-                tableOptions={{
-                  state: { pagination },
-                  onPaginationChange: setPagination,
-                  manualPagination: true,
-                  pageCount,
-                }}
-                containerClassName={cn(
-                  "border-0 shadow-none",
-                  "[&_thead_tr]:border-b [&_thead_tr]:border-border/50",
-                  "[&_thead_th]:bg-muted/20 [&_thead_th]:backdrop-blur-sm",
-                  "[&_tbody_tr]:group/tr [&_tbody_tr]:cursor-pointer [&_tbody_tr]:border-b [&_tbody_tr]:border-border/30",
-                  "[&_tbody_tr]:transition-colors [&_tbody_tr:hover]:bg-muted/20",
-                )}
-                footer={DataTableFooter}
-              />
-            </div>
-          )}
-        </div>
-      </div>
+          </Paper>
+
+          <Card
+            p="md"
+            radius="lg"
+            withBorder
+            style={{
+              background: "white",
+              border: "1px solid var(--mantine-color-gray-2)",
+            }}
+          >
+            <Stack gap="md">
+              <Group justify="space-between" gap="md" wrap="wrap">
+                <TextInput
+                  placeholder="Search reference or customer…"
+                  leftSection={<Search size={18} />}
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  rightSection={
+                    query && (
+                      <ActionIcon
+                        size="sm"
+                        color="gray"
+                        radius="md"
+                        variant="transparent"
+                        onClick={() => setQuery("")}
+                      >
+                        <X size={16} />
+                      </ActionIcon>
+                    )
+                  }
+                  style={{ flex: 1, minWidth: "200px" }}
+                  radius="lg"
+                />
+                <Text size="sm" c="dimmed">
+                  {total} record{total !== 1 ? "s" : ""}
+                </Text>
+              </Group>
+
+              {showEmpty ? (
+                <BookingTableEmpty
+                  isError={isError}
+                  hasSearch={hasSearch}
+                  onRetry={handleRefresh}
+                />
+              ) : (
+                <div style={{ overflowX: "auto" }}>
+                  <DataTable
+                    columns={columns}
+                    data={rows}
+                    status={isLoading ? "loading" : isError ? "error" : "success"}
+                    onRowClick={handleRowClick}
+                    pagination={{
+                      pageIndex: pagination.pageIndex,
+                      pageSize: pagination.pageSize,
+                      pageCount,
+                      totalCount: total,
+                    }}
+                    tableOptions={{
+                      state: { pagination },
+                      onPaginationChange: setPagination,
+                      manualPagination: true,
+                      pageCount,
+                    }}
+                    containerClassName={cn(
+                      "border-0 shadow-none",
+                      "[&_thead_tr]:border-b [&_thead_tr]:border-border/50",
+                      "[&_thead_th]:bg-muted/20 [&_thead_th]:backdrop-blur-sm",
+                      "[&_tbody_tr]:group/tr [&_tbody_tr]:cursor-pointer [&_tbody_tr]:border-b [&_tbody_tr]:border-border/30",
+                      "[&_tbody_tr]:transition-colors [&_tbody_tr:hover]:bg-muted/20",
+                    )}
+                    footer={DataTableFooter}
+                  />
+                </div>
+              )}
+            </Stack>
+          </Card>
+        </Stack>
+      </Container>
     </div>
   );
 }

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) => {
@@ -209,14 +191,19 @@ const RuleEngineResourcePage = () => {
 
     base.push({
       id: "actions",
-      header: "Details",
-      size: 120,
-      meta: { headerClassName, cellClassName },
+      header: "Actions",
+      size: 140,
+      minSize: 120,
+      meta: {
+        headerClassName,
+        cellClassName: `${cellClassName} whitespace-nowrap`,
+      },
       cell: ({ row }) => (
-        <div onClick={(e) => e.stopPropagation()}>
+        <div onClick={(e) => e.stopPropagation()} data-stop-row-click>
           <RuleEngineRecordActions
             record={row.original}
             config={config}
+            layout="row"
             readOnly={!canManage}
             onEdit={(record) => {
               setEditing(record);
@@ -284,9 +271,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 +286,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 +366,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 +390,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>
   );
 };
 

apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts

@@ -180,6 +180,46 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
       { name: "displayOrder", label: "Display order", type: "number" },
     ],
   },
+  {
+    slug: "wagon-types",
+    label: "Wagon Types",
+    category: "configuration",
+    subtitle: "Configure wagon classes used for capacity and train planning",
+    searchPlaceholder: "Search wagon types by name or code...",
+    cardTitleKey: "name",
+    columns: [
+      codeColumn("code"),
+      { id: "name", header: "Name", accessorKey: "name" },
+      { id: "capacityTons", header: "Capacity (t)", accessorKey: "capacityTons", format: "number" },
+      { id: "lengthMeters", header: "Length (m)", accessorKey: "lengthMeters", format: "number" },
+      { id: "maxWagonsPerTrain", header: "Max / train", accessorKey: "maxWagonsPerTrain", format: "number" },
+      {
+        id: "supportedLoadTypes",
+        header: "Load types",
+        accessorKey: "supportedLoadTypes",
+      },
+      activeColumn,
+    ],
+    formFields: [
+      { name: "name", label: "Name", type: "text", required: true },
+      { name: "capacityTons", label: "Capacity (tons)", type: "number", required: true },
+      { name: "lengthMeters", label: "Length (meters)", type: "number", required: true },
+      {
+        name: "maxWagonsPerTrain",
+        label: "Max wagons per train",
+        type: "number",
+        optional: true,
+      },
+      {
+        name: "supportedLoadTypes",
+        label: "Supported load types",
+        type: "textarea",
+        optional: true,
+        placeholder: "CONTAINER, BULK",
+      },
+      { name: "isActive", label: "Active", type: "boolean" },
+    ],
+  },
   {
     slug: "priority-rules",
     label: "Priority Rules",
@@ -270,6 +310,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",

apps/edr-freight-web/backoffice/src/services/ruleEngine/ruleEngine.service.ts

@@ -19,6 +19,7 @@ export interface RuleEngineListParams {
 const RESOURCE_BASE: Record<RuleEngineResourceSlug, string> = {
   "cargo-types": URL_CONSTANTS.RULE_ENGINE.CARGO_TYPES,
   "container-types": URL_CONSTANTS.RULE_ENGINE.CONTAINER_TYPES,
+  "wagon-types": URL_CONSTANTS.RULE_ENGINE.WAGON_TYPES,
   "priority-rules": URL_CONSTANTS.RULE_ENGINE.PRIORITY_RULES,
   "service-types": URL_CONSTANTS.RULE_ENGINE.SERVICE_TYPES,
   "surcharge-types": URL_CONSTANTS.RULE_ENGINE.SURCHARGE_TYPES,
@@ -35,6 +36,8 @@ const byIdPath = (resource: RuleEngineResourceSlug, id: string): string => {
       return URL_CONSTANTS.RULE_ENGINE.CARGO_TYPE_BY_ID(id);
     case "container-types":
       return URL_CONSTANTS.RULE_ENGINE.CONTAINER_TYPE_BY_ID(id);
+    case "wagon-types":
+      return URL_CONSTANTS.RULE_ENGINE.WAGON_TYPE_BY_ID(id);
     case "priority-rules":
       return URL_CONSTANTS.RULE_ENGINE.PRIORITY_RULE_BY_ID(id);
     case "service-types":

apps/edr-freight-web/backoffice/src/services/wagon-types.service.ts

@@ -7,7 +7,9 @@ const asList = <T>(payload: ListResponse<T>): T[] =>
 
 export const wagonTypesService = {
   async getWagonTypes() {
-    const response = await api.get<ListResponse<unknown>>('/wagon-types');
+    const response = await api.get<ListResponse<unknown>>('/wagon-types', {
+      params: { isActive: true, pageSize: 500 },
+    });
     return asList(response.data);
   },
 };

apps/edr-freight-web/backoffice/src/theme/freight-brand.ts

@@ -0,0 +1,40 @@
+import { createTheme, type MantineColorsTuple } from "@mantine/core";
+
+/** EDR Freight primary brand green */
+export const FREIGHT_BRAND = "#15803d";
+export const FREIGHT_BRAND_DARK = "#166534";
+export const FREIGHT_BRAND_LIGHT = "#22c55e";
+
+export const freightBrand = {
+  primary: FREIGHT_BRAND,
+  primaryDark: FREIGHT_BRAND_DARK,
+  primaryLight: FREIGHT_BRAND_LIGHT,
+  gradient: `linear-gradient(135deg, ${FREIGHT_BRAND} 0%, ${FREIGHT_BRAND_DARK} 100%)`,
+  shadow: "0 4px 12px rgba(21, 128, 61, 0.28)",
+  shadowSm: "0 2px 6px rgba(21, 128, 61, 0.22)",
+  ring: "rgba(21, 128, 61, 0.2)",
+  mutedBg: "#f0fdf4",
+  mutedBorder: "#bbf7d0",
+} as const;
+
+/** Mantine green scale with #15803d at index 6 (filled buttons, nav active). */
+const freightGreen: MantineColorsTuple = [
+  "#f0fdf4",
+  "#dcfce7",
+  "#bbf7d0",
+  "#86efac",
+  "#4ade80",
+  "#22c55e",
+  FREIGHT_BRAND,
+  FREIGHT_BRAND_DARK,
+  "#14532d",
+  "#052e16",
+];
+
+export const freightMantineTheme = createTheme({
+  primaryColor: "green",
+  colors: {
+    green: freightGreen,
+  },
+  fontFamily: "'Outfit', var(--font-sans)",
+});

apps/edr-freight-web/backoffice/src/types/rule-engine/index.ts

@@ -1,6 +1,7 @@
 export type RuleEngineResourceSlug =
   | "cargo-types"
   | "container-types"
+  | "wagon-types"
   | "priority-rules"
   | "service-types"
   | "surcharge-types"

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();

pnpm-lock.yaml

@@ -190,6 +190,15 @@ importers:
       '@hello-pangea/dnd':
         specifier: ^18.0.1
         version: 18.0.1(@types/react@18.3.29)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@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)
@@ -1735,6 +1744,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:
@@ -1749,6 +1765,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
@@ -12892,7 +12913,7 @@ snapshots:
   '@jest/console@29.7.0':
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       chalk: 4.1.2
       jest-message-util: 29.7.0
       jest-util: 29.7.0
@@ -12937,7 +12958,7 @@ snapshots:
     dependencies:
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       jest-mock: 29.7.0
 
   '@jest/expect-utils@29.7.0':
@@ -12955,7 +12976,7 @@ snapshots:
     dependencies:
       '@jest/types': 29.6.3
       '@sinonjs/fake-timers': 10.3.0
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       jest-message-util: 29.7.0
       jest-mock: 29.7.0
       jest-util: 29.7.0
@@ -12983,7 +13004,7 @@ snapshots:
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
       '@jridgewell/trace-mapping': 0.3.31
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       chalk: 4.1.2
       collect-v8-coverage: 1.0.3
       exit: 0.1.2
@@ -13145,6 +13166,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)
@@ -13158,6 +13192,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
@@ -15442,11 +15480,11 @@ snapshots:
 
   '@types/connect@3.4.38':
     dependencies:
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
 
   '@types/conventional-commits-parser@5.0.2':
     dependencies:
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
 
   '@types/cookiejar@2.1.5': {}
 
@@ -15590,7 +15628,7 @@ snapshots:
 
   '@types/send@1.2.1':
     dependencies:
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
 
   '@types/serve-static@2.2.0':
     dependencies:
@@ -15599,7 +15637,7 @@ snapshots:
 
   '@types/set-cookie-parser@2.4.10':
     dependencies:
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
 
   '@types/signature_pad@2.3.6': {}
 
@@ -20391,7 +20429,7 @@ snapshots:
       '@jest/expect': 29.7.0
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       chalk: 4.1.2
       co: 4.6.0
       dedent: 1.7.2(babel-plugin-macros@3.1.0)
@@ -20516,7 +20554,7 @@ snapshots:
       '@jest/environment': 29.7.0
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       jest-mock: 29.7.0
       jest-util: 29.7.0
 
@@ -20526,7 +20564,7 @@ snapshots:
     dependencies:
       '@jest/types': 29.6.3
       '@types/graceful-fs': 4.1.9
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -20581,7 +20619,7 @@ snapshots:
   jest-mock@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       jest-util: 29.7.0
 
   jest-pnp-resolver@1.2.3(jest-resolve@29.7.0):
@@ -20619,7 +20657,7 @@ snapshots:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       chalk: 4.1.2
       emittery: 0.13.1
       graceful-fs: 4.2.11
@@ -20647,7 +20685,7 @@ snapshots:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       chalk: 4.1.2
       cjs-module-lexer: 1.4.3
       collect-v8-coverage: 1.0.3
@@ -20693,7 +20731,7 @@ snapshots:
   jest-util@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -20722,7 +20760,7 @@ snapshots:
     dependencies:
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.13.1
@@ -20731,13 +20769,13 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
   jest-worker@29.7.0:
     dependencies:
-      '@types/node': 20.19.41
+      '@types/node': 24.13.0
       jest-util: 29.7.0
       merge-stream: 2.0.0
       supports-color: 8.1.1