fix

apps/edr-freight-web/backoffice/src/pages/operations/FirstMilePage.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode, useMemo, useState } from "react";
 import {
   ArrowRight,
+  ChevronRight,
   Eye,
   MoreHorizontal,
   Printer,
@@ -26,6 +27,7 @@ import {
   Stack,
   Text,
   TextInput,
+  UnstyledButton,
 } from "@mantine/core";
 
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
@@ -865,33 +867,54 @@ const FirstMilePage = () => {
                 <Text c="dimmed" size="sm" ta="center" py="md">No paid bookings found.</Text>
               ) : (
                 filteredPaidBookings.map((b) => (
-                  <Card
+                  <UnstyledButton
                     key={b.id}
-                    withBorder
-                    padding="sm"
-                    radius="md"
-                    style={{ cursor: "pointer" }}
+                    w="100%"
                     onClick={() => {
                       setSelectedBooking(b);
                       setAcceptStep(2);
                     }}
+                    style={{
+                      borderRadius: "var(--mantine-radius-md)",
+                      border: "1px solid var(--mantine-color-gray-3)",
+                      padding: "10px 12px",
+                      backgroundColor: "var(--mantine-color-white)",
+                      transition: "background-color 120ms ease, border-color 120ms ease",
+                    }}
+                    onMouseEnter={(e) => {
+                      (e.currentTarget as HTMLButtonElement).style.backgroundColor =
+                        "var(--mantine-color-blue-0)";
+                      (e.currentTarget as HTMLButtonElement).style.borderColor =
+                        "var(--mantine-color-blue-4)";
+                    }}
+                    onMouseLeave={(e) => {
+                      (e.currentTarget as HTMLButtonElement).style.backgroundColor =
+                        "var(--mantine-color-white)";
+                      (e.currentTarget as HTMLButtonElement).style.borderColor =
+                        "var(--mantine-color-gray-3)";
+                    }}
                   >
-                    <Group justify="space-between" wrap="nowrap">
-                      <Stack gap={2}>
-                        <Text fw={600} size="sm">{b.reference}</Text>
-                        <Text size="xs" c="dimmed">{b.company?.name ?? b.company?.companyName ?? "—"}</Text>
+                    <Group justify="space-between" wrap="nowrap" gap="sm">
+                      <Stack gap={3} style={{ flex: 1, minWidth: 0 }}>
+                        <Text fw={700} size="sm" c="dark">{b.reference}</Text>
+                        <Text size="xs" c="dimmed" truncate>
+                          {b.company?.name ?? b.company?.companyName ?? "—"}
+                        </Text>
                       </Stack>
-                      <Stack gap={2} align="flex-end">
+                      <Stack gap={3} align="flex-end" style={{ flexShrink: 0 }}>
                         <Text size="xs" c="dimmed">
                           {b.originYard?.name ?? "—"} → {b.destinationYard?.name ?? "—"}
                         </Text>
-                        <Text size="sm" fw={500}>{formatPrice(b.totalAmount)}</Text>
+                        <Text size="sm" fw={600} c="blue">
+                          {formatPrice(b.totalAmount)}
+                        </Text>
                         <Text size="xs" c="dimmed">
                           {b.scheduledDate ? b.scheduledDate.slice(0, 10) : "—"}
                         </Text>
                       </Stack>
+                      <ChevronRight size={16} color="var(--mantine-color-gray-5)" />
                     </Group>
-                  </Card>
+                  </UnstyledButton>
                 ))
               )}
             </Stack>