style: use the proper primary color

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

@@ -1,32 +1,31 @@
+import {
+  ActionIcon,
+  Card,
+  Group,
+  Stack,
+  Tabs,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { ArrowRight, Calendar, Package, Search, User, X } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { ArrowRight, Calendar, Package, Search, User, X } from "lucide-react";
-import {
-  Stack,
-  Group,
-  Text,
-  Card,
-  TextInput,
-  ActionIcon,
-  Tabs,
-} from "@mantine/core";
 
-import { PageContainer } from "@/components/page";
-import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
+import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell";
 import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
+import { BookingRequestsHeader } from "@/components/bookings/BookingRequestsHeader";
+import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
 import {
   BookingStatusTabs,
   type BookingStatusTabKey,
 } from "@/components/bookings/BookingStatusTabs";
-import { BookingRequestsHeader } from "@/components/bookings/BookingRequestsHeader";
-import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
-import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell";
-import { AllocateBookingWizard } from "@/components/trainScheduling/AllocateBookingWizard";
-import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
+import { BookingTableEmpty } from "@/components/bookings/BookingTableEmpty";
 import { OperationsBookingQueue } from "@/components/bookings/OperationsBookingQueue";
 import { OperationsScheduledBookings } from "@/components/bookings/OperationsScheduledBookings";
-import { BookingTableEmpty } from "@/components/bookings/BookingTableEmpty";
 import { bookingTable } from "@/components/bookings/booking-ui.styles";
+import { PageContainer } from "@/components/page";
+import { AllocateBookingWizard } from "@/components/trainScheduling/AllocateBookingWizard";
 import { BOOKING_LIST_TABS } from "@/features/bookings/booking-status.config";
 import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
 import {
@@ -34,15 +33,15 @@ import {
   useBookingList,
   useBookingListSummary,
 } from "@/hooks/bookings/useBookings";
+import { cn } from "@/lib/utils";
 import type { BookingListFilter } from "@/services/bookings.service";
 import type { BookingListRow } from "@/types/booking";
-import { cn } from "@/lib/utils";
 import {
+  Badge,
   DataTable,
   DataTableFooter,
-  type ColumnDef,
   usePagination,
-  Badge,
+  type ColumnDef,
 } from "@edr/ui-common";
 
 function getStatusesForTab(tab: BookingStatusTabKey): string | undefined {
@@ -298,8 +297,6 @@ export default function BookingRequestsPage() {
 
   return (
     <PageContainer>
-      <Breadcrumbs items={[{ label: "Operations" }, { label: "Booking requests" }]} />
-
       <Stack gap="lg">
           <BookingRequestsHeader
             metrics={metrics}

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

@@ -147,7 +147,7 @@ function FormSection({
   icon: Icon,
   title,
   subtitle,
-  accent = "green",
+  accent = "edr-green",
   right,
   children,
 }: {
@@ -394,7 +394,7 @@ export default function NewBookingPage() {
         {/* LEFT — form */}
         <Grid.Col span={{ base: 12, lg: 8 }}>
           <Stack gap="lg">
-            <FormSection icon={Layers} title="Booking type" subtitle="Who is booking and what kind of freight" accent="green">
+            <FormSection icon={Layers} title="Booking type" subtitle="Who is booking and what kind of freight" accent="edr-green">
               <Stack gap="md">
                 <Switch
                   label="Government booking"
@@ -745,7 +745,7 @@ export default function NewBookingPage() {
           <Box style={{ position: "sticky", top: 16 }}>
             <Paper radius="lg" withBorder p="lg" style={{ borderColor: "var(--mantine-color-gray-2)" }}>
               <Group gap="sm" mb="md">
-                <ThemeIcon size={34} radius="md" variant="light" color="green">
+                <ThemeIcon size={34} radius="md" variant="light" color="edr-green">
                   <Weight size={17} />
                 </ThemeIcon>
                 <Text fw={700}>Summary</Text>

apps/edr-freight-web/backoffice/src/pages/fleet/FleetCrudPages.tsx

@@ -751,7 +751,7 @@ export function WagonTypesCrudPage() {
                     <MantineTable.Td>{type.lengthMeters}</MantineTable.Td>
                     <MantineTable.Td>{type.supportedLoadTypes?.join(', ') || '-'}</MantineTable.Td>
                     <MantineTable.Td>
-                      <MantineBadge color={type.isActive === false ? 'gray' : 'green'} variant="light">
+                      <MantineBadge color={type.isActive === false ? 'gray' : 'edr-green'} variant="light">
                         {type.isActive === false ? 'Inactive' : 'Active'}
                       </MantineBadge>
                     </MantineTable.Td>

apps/edr-freight-web/backoffice/src/pages/payments/PaymentsPage.tsx

@@ -58,7 +58,7 @@ const METHOD_OPTIONS: { value: PaymentMethod; label: string }[] = [
 ];
 
 const STATUS_COLORS: Record<string, string> = {
-  success: "green",
+  success: "edr-green",
   processing: "yellow",
   "action-required": "yellow",
   failed: "red",
@@ -205,7 +205,7 @@ export default function PaymentsPage() {
             label: "Successful",
             value: summary?.success ?? 0,
             icon: CheckCircle2,
-            color: "green",
+            color: "edr-green",
           },
           {
             label: "Processing",

apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx

@@ -516,12 +516,12 @@ export default function BatchBoardPage() {
               style={{
                 padding: "2px 8px",
                 borderRadius: 8,
-                background: "var(--mantine-color-green-0)",
-                border: "1px solid var(--mantine-color-green-1)",
+                background: "var(--mantine-color-edr-green-0)",
+                border: "1px solid var(--mantine-color-edr-green-1)",
               }}
             >
-              <Package size={12} color="var(--mantine-color-green-7)" />
-              <Text size="xs" fw={700} c="green.8" lh={1.2}>
+              <Package size={12} color="var(--mantine-color-edr-green-7)" />
+              <Text size="xs" fw={700} c="edr-green.8" lh={1.2}>
                 {row.original.capacity.allocatedWagons}
               </Text>
               <Text size="10px" c="dimmed" lh={1.2}>

apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2ListPage.tsx

@@ -180,8 +180,8 @@ export default function TrainScheduleV2ListPage() {
                   width: 34,
                   height: 34,
                   borderRadius: 9,
-                  background: "var(--mantine-color-green-0)",
-                  color: "var(--mantine-color-green-7)",
+                  background: "var(--mantine-color-edr-green-0)",
+                  color: "var(--mantine-color-edr-green-7)",
                   flexShrink: 0,
                 }}
               >
@@ -576,13 +576,13 @@ function MetricChip({
         borderRadius: 8,
         background: subtle
           ? "var(--mantine-color-gray-1)"
-          : "var(--mantine-color-green-0)",
+          : "var(--mantine-color-edr-green-0)",
         border: `1px solid ${
-          subtle ? "var(--mantine-color-gray-2)" : "var(--mantine-color-green-1)"
+          subtle ? "var(--mantine-color-gray-2)" : "var(--mantine-color-edr-green-1)"
         }`,
       }}
     >
-      <Text size="sm" fw={700} c={subtle ? "gray.7" : "green.8"} lh={1.2}>
+      <Text size="sm" fw={700} c={subtle ? "gray.7" : "edr-green.8"} lh={1.2}>
         {value}
       </Text>
       {label ? (
@@ -653,7 +653,7 @@ function ScheduleCard({
         <Group gap="xs" wrap="nowrap">
           <Button
             variant="light"
-            color="green"
+            color="edr-green"
             size="sm"
             radius="md"
             style={{ flex: 1 }}

apps/edr-freight-web/backoffice/src/pages/warehouses/ArrivalQueuePage.tsx

@@ -22,7 +22,7 @@ import type { ArrivalQueueItem } from '@/types/warehouse';
 
 function inspectionBadge(status: string | null) {
   if (!status) return <Badge variant="light" color="gray" size="sm">Not inspected</Badge>;
-  const color = status === 'PASSED' ? 'green' : status === 'FAILED' ? 'red' : 'orange';
+  const color = status === 'PASSED' ? 'edr-green' : status === 'FAILED' ? 'red' : 'orange';
   return <Badge variant="light" color={color} size="sm">{status.replace(/_/g, ' ')}</Badge>;
 }
 
@@ -89,7 +89,7 @@ export default function ArrivalQueuePage() {
       header: 'Status',
       cell: ({ row }) =>
         row.original.unloaded ? (
-          <Badge variant="light" color="green" size="sm">
+          <Badge variant="light" color="edr-green" size="sm">
             {row.original.currentStatus ?? 'RECEIVED'}
           </Badge>
         ) : (
@@ -125,7 +125,7 @@ export default function ArrivalQueuePage() {
               <Button
                 size="compact-xs"
                 variant="light"
-                color="green"
+                color="edr-green"
                 leftSection={<ClipboardList size={14} />}
                 onClick={() => setInspectInventoryId(item.inventoryId)}
               >

apps/edr-freight-web/backoffice/src/pages/warehouses/LoadedInventoryPage.tsx

@@ -49,7 +49,7 @@ const columns: ColumnDef<Loading>[] = [
     cell: ({ row }) => (
       <Badge
         variant="light"
-        color={row.original.inventory?.status === 'DISPATCHED' ? 'green' : 'teal'}
+        color={row.original.inventory?.status === 'DISPATCHED' ? 'edr-green' : 'teal'}
         size="sm"
       >
         {row.original.inventory?.status ?? 'LOADED'}

apps/edr-freight-web/backoffice/src/pages/warehouses/LoadingQueuePage.tsx

@@ -74,7 +74,7 @@ export default function LoadingQueuePage() {
               <Tabs.Tab
                 value="ready"
                 leftSection={
-                  <Badge size="xs" color="green">
+                  <Badge size="xs" color="edr-green">
                     {paidItems.length}
                   </Badge>
                 }

apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInvoicesPage.tsx

@@ -36,7 +36,7 @@ const STATUS_COLOR: Record<WarehouseInvoiceStatus, string> = {
   DRAFT: 'gray',
   ISSUED: 'orange',
   PARTIALLY_PAID: 'yellow',
-  PAID: 'green',
+  PAID: 'edr-green',
   CANCELLED: 'gray',
 };
 

apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx

@@ -119,7 +119,7 @@ function AllocationRules() {
       id: 'active',
       header: 'Active',
       cell: ({ row }) => (
-        <Badge color={row.original.isActive ? 'green' : 'gray'} variant="light">
+        <Badge color={row.original.isActive ? 'edr-green' : 'gray'} variant="light">
           {row.original.isActive ? 'Yes' : 'No'}
         </Badge>
       ),
@@ -240,7 +240,7 @@ function FeeRules() {
       id: 'active',
       header: 'Active',
       cell: ({ row }) => (
-        <Badge color={row.original.isActive ? 'green' : 'gray'} variant="light">
+        <Badge color={row.original.isActive ? 'edr-green' : 'gray'} variant="light">
           {row.original.isActive ? 'Yes' : 'No'}
         </Badge>
       ),