edr-platform/apps/edr-freight-web/backoffice/src/components/overview/OverviewRecentBookingsTable.tsx

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 "—";
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: currency || "ETB",
    maximumFractionDigits: 0,
  }).format(amount);
}

export function OverviewRecentBookingsTable({
  bookings,
}: {
  bookings: IOverviewRecentBooking[];
}) {
  const navigate = useNavigate();

  return (
    <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)}
                  </Text>
                </Table.Td>
                <Table.Td>
                  <Text size="sm" c="dimmed">
                    {new Date(booking.createdAt).toLocaleDateString()}
                  </Text>
                </Table.Td>
              </Table.Tr>
            ))}
          </Table.Tbody>
        </Table>
      )}
    </SummaryCard>
  );
}