This commit is contained in:
natib21
2026-06-24 08:16:24 +00:00
parent 7d1474896e
commit 7fed72ea7a

View File

@@ -1,6 +1,7 @@
import { type ReactNode, useMemo, useState } from "react"; import { type ReactNode, useMemo, useState } from "react";
import { import {
ArrowRight, ArrowRight,
ChevronRight,
Eye, Eye,
MoreHorizontal, MoreHorizontal,
Printer, Printer,
@@ -26,6 +27,7 @@ import {
Stack, Stack,
Text, Text,
TextInput, TextInput,
UnstyledButton,
} from "@mantine/core"; } from "@mantine/core";
import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles"; 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> <Text c="dimmed" size="sm" ta="center" py="md">No paid bookings found.</Text>
) : ( ) : (
filteredPaidBookings.map((b) => ( filteredPaidBookings.map((b) => (
<Card <UnstyledButton
key={b.id} key={b.id}
withBorder w="100%"
padding="sm"
radius="md"
style={{ cursor: "pointer" }}
onClick={() => { onClick={() => {
setSelectedBooking(b); setSelectedBooking(b);
setAcceptStep(2); 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"> <Group justify="space-between" wrap="nowrap" gap="sm">
<Stack gap={2}> <Stack gap={3} style={{ flex: 1, minWidth: 0 }}>
<Text fw={600} size="sm">{b.reference}</Text> <Text fw={700} size="sm" c="dark">{b.reference}</Text>
<Text size="xs" c="dimmed">{b.company?.name ?? b.company?.companyName ?? "—"}</Text> <Text size="xs" c="dimmed" truncate>
{b.company?.name ?? b.company?.companyName ?? "—"}
</Text>
</Stack> </Stack>
<Stack gap={2} align="flex-end"> <Stack gap={3} align="flex-end" style={{ flexShrink: 0 }}>
<Text size="xs" c="dimmed"> <Text size="xs" c="dimmed">
{b.originYard?.name ?? "—"} {b.destinationYard?.name ?? "—"} {b.originYard?.name ?? "—"} {b.destinationYard?.name ?? "—"}
</Text> </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"> <Text size="xs" c="dimmed">
{b.scheduledDate ? b.scheduledDate.slice(0, 10) : "—"} {b.scheduledDate ? b.scheduledDate.slice(0, 10) : "—"}
</Text> </Text>
</Stack> </Stack>
<ChevronRight size={16} color="var(--mantine-color-gray-5)" />
</Group> </Group>
</Card> </UnstyledButton>
)) ))
)} )}
</Stack> </Stack>