fix ui

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

@@ -34,15 +34,15 @@ import DropdownSettingsPage from "./pages/dropdown_settings/DropdownSettingsPage
 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 TrainsPage from "./pages/trains/TrainsPage";
-import {
+import {
-  CargoesCrudPage,
+  CargoesCrudPage,
-  ContainersCrudPage,
+  ContainersCrudPage,
-  TrainMasterDataPage,
+  TrainMasterDataPage,
-  WagonsCrudPage,
+  WagonsCrudPage,
-} from "./pages/fleet/FleetCrudPages";
+} from "./pages/fleet/FleetCrudPages";
-import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
+import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
-import TrainDetailPage from "./pages/trains/TrainDetailPage";
+import TrainDetailPage from "./pages/trains/TrainDetailPage";
 
 const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
   {
@@ -241,13 +241,13 @@ const App = () => {
           <Route
             path="booking-requests/:id/contract"
             element={<BookingContractPage />}
-          />
+          />
-          <Route path="operations/train-scheduling" element={<TrainsPage />} />
+          <Route path="operations/train-scheduling" element={<TrainsPage />} />
-          <Route path="trains" element={<TrainMasterDataPage />} />
+          <Route path="trains" element={<TrainMasterDataPage />} />
-          <Route path="trains/:id" element={<TrainDetailPage />} />
+          <Route path="trains/:id" element={<TrainDetailPage />} />
-          <Route path="wagons" element={<WagonsCrudPage />} />
+          <Route path="wagons" element={<WagonsCrudPage />} />
-          <Route path="containers" element={<ContainersCrudPage />} />
+          <Route path="containers" element={<ContainersCrudPage />} />
-          <Route path="cargoes" element={<CargoesCrudPage />} />
+          <Route path="cargoes" element={<CargoesCrudPage />} />
 
           <Route path="user-management" element={<UserManagementPage />} />
           <Route path="user-management/users" element={<UsersPage />} />

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

@@ -150,7 +150,6 @@ function StepRow({
         : isNext
           ? "green"
           : "gray";
-  const highlighted = isNext || step.status === "APPROVED";
 
   return (
     <Group
@@ -161,8 +160,11 @@ function StepRow({
       py="xs"
       style={{
         borderRadius: 8,
-        border: `1px solid ${highlighted ? "var(--mantine-color-green-2)" : "var(--mantine-color-gray-2)"}`,
+        border: "1px solid var(--mantine-color-gray-2)",
-        background: isNext ? "var(--mantine-color-green-0)" : "white",
+        borderLeft: isNext
+          ? "3px solid var(--mantine-color-green-6)"
+          : "1px solid var(--mantine-color-gray-2)",
+        background: isNext ? "var(--mantine-color-gray-0)" : "white",
       }}
     >
       <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
@@ -177,8 +179,8 @@ function StepRow({
             flexShrink: 0,
             fontSize: 12,
             fontWeight: 700,
-            background: isNext ? "var(--mantine-color-green-1)" : "var(--mantine-color-gray-1)",
+            background: "var(--mantine-color-gray-1)",
-            color: isNext ? "var(--mantine-color-green-8)" : "var(--mantine-color-gray-6)",
+            color: isNext ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-6)",
           }}
         >
           {step.stepOrder}

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

@@ -37,7 +37,14 @@ export function BookingStatusBadge({ status }: { status: string }) {
       radius="md"
       tt="uppercase"
       fw={600}
-      style={{ fontSize: "0.7rem", letterSpacing: "0.05em" }}
+      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

@@ -40,12 +40,17 @@ export function BookingStatusTabs({
   return (
     <Group
       gap="sm"
-      wrap="wrap"
+      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) => {
@@ -56,6 +61,7 @@ export function BookingStatusTabs({
             key={tab.key}
             onClick={() => onChange(tab.key)}
             style={{
+              flexShrink: 0,
               background: isActive ? "white" : "transparent",
               border: isActive ? "1px solid var(--mantine-color-green-3)" : "1px solid var(--mantine-color-gray-2)",
               borderRadius: "10px",

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

@@ -13,7 +13,7 @@ import {
   WORKFLOW_STAGES,
 } from "@/features/bookings/booking-status.config";
 import { SectionCard } from "./detail/SectionCard";
-import { BRAND_GREEN } from "./detail/booking-detail.styles";
+import { BRAND_GREEN, detailStyles } from "./detail/booking-detail.styles";
 
 const STAGE_ICONS: LucideIcon[] = [
   FileText,
@@ -112,16 +112,11 @@ export function BookingWorkflowStepper({
         radius="md"
         withBorder
         p="md"
-        style={{
+        style={
-          background: isTerminal
+          isTerminal ? detailStyles.statusBannerTerminal : detailStyles.statusBanner
-            ? "var(--mantine-color-red-0)"
+        }
-            : "var(--mantine-color-green-0)",
-          borderColor: isTerminal
-            ? "var(--mantine-color-red-2)"
-            : "var(--mantine-color-green-2)",
-        }}
       >
-        <Text size="sm" fw={600} c={isTerminal ? "red.7" : "green.8"}>
+        <Text size="sm" fw={600} c={isTerminal ? "red.7" : "dark"}>
           {title}
         </Text>
         <Text size="sm" c="dimmed" mt={4}>

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

@@ -11,7 +11,7 @@ export function NextStepBanner({ nextStep }: NextStepBannerProps) {
   return (
     <Alert
       variant="light"
-      color="green"
+      color="gray"
       radius="md"
       icon={<ArrowRight size={16} />}
       title={

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

@@ -75,11 +75,11 @@ export function BookingRouteServiceCard({
               width: 36,
               height: 36,
               borderRadius: "50%",
-              background: "var(--mantine-color-green-0)",
+              background: "var(--mantine-color-gray-1)",
-              border: "1px solid var(--mantine-color-green-2)",
+              border: "1px solid var(--mantine-color-gray-3)",
             }}
           >
-            <Train size={18} color="var(--mantine-color-green-7)" />
+            <Train size={18} color="var(--mantine-color-gray-7)" />
           </Box>
           <Badge variant="light" color="gray" size="sm" radius="sm" tt="uppercase">
             {serviceLabel}

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

@@ -20,10 +20,22 @@ export const detailStyles = {
     borderBottom: "1px solid var(--mantine-color-gray-2)",
   } satisfies CSSProperties,
 
-  /** Subtle key-figure card (e.g. payment) — tinted, still flat. */
+  /** Subtle key-figure card (e.g. payment) — neutral tint, still flat. */
   highlightCard: {
-    background: "var(--mantine-color-green-0)",
+    background: "var(--mantine-color-gray-0)",
-    borderColor: "var(--mantine-color-green-2)",
+    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: {

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

@@ -40,7 +40,7 @@ export default function BookingRequestDetailPage() {
       <Box style={detailStyles.page}>
         <Center mih="60vh">
           <Stack align="center" gap="md">
-            <Loader color="green" />
+            <Loader color="gray" />
             <Text size="sm" c="dimmed" fw={500}>
               Loading booking…
             </Text>
@@ -64,8 +64,8 @@ export default function BookingRequestDetailPage() {
                   width: 64,
                   height: 64,
                   borderRadius: 16,
-                  background: "var(--mantine-color-green-0)",
+                  background: "var(--mantine-color-gray-1)",
-                  color: "var(--mantine-color-green-7)",
+                  color: "var(--mantine-color-gray-6)",
                 }}
               >
                 <Package size={32} />

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

@@ -185,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",
@@ -340,22 +350,16 @@ export default function BookingRequestsPage() {
             style={{
               background: "white",
               border: "1px solid var(--mantine-color-gray-2)",
-              overflowX: "auto",
-              overflowY: "hidden",
-              WebkitOverflowScrolling: "touch",
-              scrollBehavior: "smooth",
             }}
           >
-            <div style={{ minWidth: "min-content", display: "inline-block", width: "100%" }}>
+            <BookingStatusTabs
-              <BookingStatusTabs
+              active={activeTab}
-                active={activeTab}
+              onChange={(tab) => {
-                onChange={(tab) => {
+                setActiveTab(tab);
-                  setActiveTab(tab);
+                setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
-                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+              }}
-                }}
+              counts={tabCounts}
-                counts={tabCounts}
+            />
-              />
-            </div>
           </Paper>
 
           <Card