Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-09-06 11:15:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: overview revamp

Browse Source
This commit is contained in:
Nathnael
2026-08-13 12:44:06 +00:00
parent 3190b9bd38
commit 0df4be1820
34 changed files with 2412 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
apps/edr-freight-web/backoffice/src/components/overview/OverviewRecentBookingsTable.tsx
View File

@@ -1,9 +1,11 @@
import { useNavigate } from "react-router-dom";
import { Paper, Stack, Table, Text } from "@mantine/core";
import { History } from "lucide-react";
import { Link, useNavigate } from "react-router-dom";
import { Table, Text } from "@mantine/core";
import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
import type { IOverviewRecentBooking } from "@/types/overview";
import { SummaryCard } from "./summary/SummaryCard";
function formatAmount(amount: number | null, currency: string | null) {
if (amount == null) return "—";
@@ -23,56 +25,90 @@ export function OverviewRecentBookingsTable({
const navigate = useNavigate();
return (
<Paper p="lg" radius="lg" withBorder>
<Stack gap="md">
<Text fw={600}>Recent bookings</Text>
{bookings.length === 0 ? (
<Text size="sm" c="dimmed" ta="center" py="lg">
No recent bookings
</Text>
) : (
<Table highlightOnHover verticalSpacing="sm">
<Table.Thead>
<Table.Tr>
<Table.Th>Reference</Table.Th>
<Table.Th>Customer</Table.Th>
<Table.Th>Status</Table.Th>
<Table.Th>Priority</Table.Th>
<Table.Th>Amount</Table.Th>
<Table.Th>Created</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{bookings.map((booking) => (
<Table.Tr
key={booking.id}
style={{ cursor: "pointer" }}
onClick={() => navigate(`/dashboard/booking-requests/${booking.id}`)}
>
<Table.Td>
<Text fw={600} size="sm">
{booking.reference}
</Text>
</Table.Td>
<Table.Td>{booking.customerLabel}</Table.Td>
<Table.Td>
<BookingStatusBadge status={booking.status} />
</Table.Td>
<Table.Td>
<BookingPriorityBadge score={booking.priorityScore} />
</Table.Td>
<Table.Td>
<SummaryCard
icon={History}
accent="gray"
title="Recent bookings"
subtitle="Latest submissions, newest first"
minHeight={260}
action={
<Text
component={Link}
to="/dashboard/booking-requests"
size="xs"
fw={600}
c="edr-green"
style={{ whiteSpace: "nowrap", textDecoration: "none" }}
>
View all →
</Text>
}
>
{bookings.length === 0 ? (
<Text size="sm" c="dimmed" ta="center" py="lg">
No recent bookings
</Text>
) : (
<Table highlightOnHover verticalSpacing="sm" horizontalSpacing="sm">
<Table.Thead>
<Table.Tr>
{["Reference", "Customer", "Status", "Priority", "Amount", "Created"].map(
(header) => (
<Table.Th
key={header}
style={{
fontSize: 11,
fontWeight: 700,
textTransform: "uppercase",
letterSpacing: 0.3,
color: "var(--mantine-color-edr-muted-6)",
borderBottom: "1px solid var(--mantine-color-gray-2)",
}}
>
{header}
</Table.Th>
),
)}
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{bookings.map((booking) => (
<Table.Tr
key={booking.id}
style={{ cursor: "pointer" }}
onClick={() => navigate(`/dashboard/booking-requests/${booking.id}`)}
>
<Table.Td>
<Text fw={600} size="sm">
{booking.reference}
</Text>
</Table.Td>
<Table.Td>
<Text size="sm" truncate style={{ maxWidth: 180 }}>
{booking.customerLabel}
</Text>
</Table.Td>
<Table.Td>
<BookingStatusBadge status={booking.status} />
</Table.Td>
<Table.Td>
<BookingPriorityBadge score={booking.priorityScore} />
</Table.Td>
<Table.Td>
<Text size="sm" style={{ fontVariantNumeric: "tabular-nums" }}>
{formatAmount(booking.totalAmount, booking.paymentCurrency)}
</Table.Td>
<Table.Td>
</Text>
</Table.Td>
<Table.Td>
<Text size="sm" c="dimmed">
{new Date(booking.createdAt).toLocaleDateString()}
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
)}
</Stack>
</Paper>
</Text>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
)}
</SummaryCard>
);
}