ui fix

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

@@ -1,11 +1,10 @@
 import type { ReactNode } from "react";
-import { Box, Button, Group, Paper, Stack, Text, ThemeIcon, Title } from "@mantine/core";
+import { Box, Button, Group, Paper, Stack, Text } from "@mantine/core";
 import type { LucideIcon } from "lucide-react";
 import {
   AlertTriangle,
   CheckCircle2,
   Clock,
-  Inbox,
   LayoutList,
   Plus,
   RefreshCw,
@@ -55,76 +54,45 @@ export function BookingRequestsHeader({
   const val = (n?: number) => (loading ? "—" : (n ?? 0));
 
   return (
-    <Paper
-      radius="xl"
-      p="xl"
-      style={{
-        position: "relative",
-        overflow: "hidden",
-        background: "#ffffff",
-        border: "1px solid var(--mantine-color-gray-2)",
-        boxShadow: "0 1px 3px rgba(15,23,42,0.04)",
-      }}
-    >
-      <Stack gap="lg" style={{ position: "relative" }}>
-        <Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
-          <Group gap="md" align="center" wrap="nowrap">
-            <ThemeIcon size={56} radius="lg" variant="light" color="green">
-              <Inbox size={28} />
-            </ThemeIcon>
-            <Stack gap={4}>
-              <Text size="xs" fw={700} c="green.7" tt="uppercase" style={{ letterSpacing: 1 }}>
-                Operations
-              </Text>
-              <Title order={2} fw={700} style={{ color: "#0f172a" }}>
-                Booking Requests
-              </Title>
-              <Text size="sm" c="dimmed" maw={520}>
-                Track every booking from submission through approval, payment, and
-                dispatch — prioritize what needs action.
-              </Text>
-            </Stack>
-          </Group>
-          <Group gap="sm">
-            <Button color="green" radius="lg" leftSection={<Plus size={18} />} onClick={onCreate}>
-              Create booking
-            </Button>
-            <Button
-              variant="default"
-              radius="lg"
-              leftSection={<RefreshCw size={16} />}
-              loading={isFetching}
-              onClick={onRefresh}
-            >
-              Refresh
-            </Button>
-          </Group>
-        </Group>
+    <Stack gap="lg">
+      <Group justify="flex-end" gap="sm">
+        <Button color="green" radius="lg" leftSection={<Plus size={18} />} onClick={onCreate}>
+          Create booking
+        </Button>
+        <Button
+          variant="default"
+          radius="lg"
+          leftSection={<RefreshCw size={16} />}
+          loading={isFetching}
+          onClick={onRefresh}
+        >
+          Refresh
+        </Button>
+      </Group>
 
-        <Group grow gap="md" align="stretch" wrap="wrap">
-          <HeroStat icon={LayoutList} label="In queue" value={val(metrics?.inQueue)} hint="Matching current filter" />
-          <HeroStat
-            icon={Clock}
-            label="Needs action"
-            value={val(metrics?.needsAction)}
-            hint="Submitted or pending"
-            ratio={metrics?.inQueue ? (metrics.needsAction ?? 0) / metrics.inQueue : 0}
-            ratioColor="#f59e0b"
-          />
-          <HeroStat
-            icon={AlertTriangle}
-            label="Urgent"
-            value={val(metrics?.urgent)}
-            hint="High priority score"
-            ratio={metrics?.inQueue ? (metrics.urgent ?? 0) / metrics.inQueue : 0}
-            ratioColor="#ef4444"
-          />
-          <HeroStat icon={CheckCircle2} label="Completed" value={val(tabs?.completed)} hint="Fully executed" />
-        </Group>
+      <Group grow gap="md" align="stretch" wrap="wrap">
+        <HeroStat icon={LayoutList} label="In queue" value={val(metrics?.inQueue)} hint="Matching current filter" />
+        <HeroStat
+          icon={Clock}
+          label="Needs action"
+          value={val(metrics?.needsAction)}
+          hint="Submitted or pending"
+          ratio={metrics?.inQueue ? (metrics.needsAction ?? 0) / metrics.inQueue : 0}
+          ratioColor="#f59e0b"
+        />
+        <HeroStat
+          icon={AlertTriangle}
+          label="Urgent"
+          value={val(metrics?.urgent)}
+          hint="High priority score"
+          ratio={metrics?.inQueue ? (metrics.urgent ?? 0) / metrics.inQueue : 0}
+          ratioColor="#ef4444"
+        />
+        <HeroStat icon={CheckCircle2} label="Completed" value={val(tabs?.completed)} hint="Fully executed" />
+      </Group>
 
-        {tabs ? <PipelineBar tabs={tabs} /> : null}
-      </Stack>
-    </Paper>
+      {tabs ? <PipelineBar tabs={tabs} /> : null}
+    </Stack>
   );
 }