fix ui

2026-08-26 18:42:49 +00:00 · 2026-06-07 00:32:07 +03:00
parent 08b46c306f
commit 3fa1f54e3a
10 changed files with 84 additions and 58 deletions
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/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 {
-  CargoesCrudPage,
-  ContainersCrudPage,
-  TrainMasterDataPage,
-  WagonsCrudPage,
-} from "./pages/fleet/FleetCrudPages";
-import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
-import TrainDetailPage from "./pages/trains/TrainDetailPage";
+import TrainsPage from "./pages/trains/TrainsPage";
+import {
+  CargoesCrudPage,
+  ContainersCrudPage,
+  TrainMasterDataPage,
+  WagonsCrudPage,
+} from "./pages/fleet/FleetCrudPages";
+import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
+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="trains" element={<TrainMasterDataPage />} />
-          <Route path="trains/:id" element={<TrainDetailPage />} />
-          <Route path="wagons" element={<WagonsCrudPage />} />
-          <Route path="containers" element={<ContainersCrudPage />} />
-          <Route path="cargoes" element={<CargoesCrudPage />} />
+          />
+          <Route path="operations/train-scheduling" element={<TrainsPage />} />
+          <Route path="trains" element={<TrainMasterDataPage />} />
+          <Route path="trains/:id" element={<TrainDetailPage />} />
+          <Route path="wagons" element={<WagonsCrudPage />} />
+          <Route path="containers" element={<ContainersCrudPage />} />
+          <Route path="cargoes" element={<CargoesCrudPage />} />

          <Route path="user-management" element={<UserManagementPage />} />
          <Route path="user-management/users" element={<UsersPage />} />
--- a/apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx
+++ b/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)"}`,
-        background: isNext ? "var(--mantine-color-green-0)" : "white",
+        border: "1px solid var(--mantine-color-gray-2)",
+        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)",
-            color: isNext ? "var(--mantine-color-green-8)" : "var(--mantine-color-gray-6)",
+            background: "var(--mantine-color-gray-1)",
+            color: isNext ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-6)",
          }}
        >
          {step.stepOrder}
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
+++ b/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>
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx
+++ b/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",
--- a/apps/edr-freight-web/backoffice/src/components/bookings/BookingWorkflowStepper.tsx
+++ b/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={{
-          background: isTerminal
-            ? "var(--mantine-color-red-0)"
-            : "var(--mantine-color-green-0)",
-          borderColor: isTerminal
-            ? "var(--mantine-color-red-2)"
-            : "var(--mantine-color-green-2)",
-        }}
+        style={
+          isTerminal ? detailStyles.statusBannerTerminal : detailStyles.statusBanner
+        }
      >
-        <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}>
--- a/apps/edr-freight-web/backoffice/src/components/bookings/NextStepBanner.tsx
+++ b/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={
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRouteServiceCard.tsx
+++ b/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)",
-              border: "1px solid var(--mantine-color-green-2)",
+              background: "var(--mantine-color-gray-1)",
+              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}
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/booking-detail.styles.ts
+++ b/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)",
-    borderColor: "var(--mantine-color-green-2)",
+    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: {
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx
+++ b/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)",
-                  color: "var(--mantine-color-green-7)",
+                  background: "var(--mantine-color-gray-1)",
+                  color: "var(--mantine-color-gray-6)",
                }}
              >
                <Package size={32} />
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
+++ b/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
-                active={activeTab}
-                onChange={(tab) => {
-                  setActiveTab(tab);
-                  setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
-                }}
-                counts={tabCounts}
-              />
-            </div>
+            <BookingStatusTabs
+              active={activeTab}
+              onChange={(tab) => {
+                setActiveTab(tab);
+                setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+              }}
+              counts={tabCounts}
+            />
          </Paper>

          <Card