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

import {
  AlertCircle,
  Clock,
  FileText,
  UserCheck,
} from "lucide-react";
import { Grid, Stack } from "@mantine/core";

import { BOOKING_STATUS_META } from "@/features/bookings/booking-status.config";
import type { IOverviewBookingsTab } from "@/types/overview";
import { OverviewBookingTrendChart } from "../OverviewBookingTrendChart";
import { OverviewDonutChart } from "../OverviewDonutChart";
import { OverviewHorizontalBarChart } from "../OverviewHorizontalBarChart";
import { OverviewKpiStrip } from "../OverviewKpiStrip";
import { OverviewRecentBookingsTable } from "../OverviewRecentBookingsTable";
import { OverviewStatusChart } from "../OverviewStatusChart";

interface OverviewBookingsTabPanelProps {
  data: IOverviewBookingsTab;
}

export function OverviewBookingsTabPanel({ data }: OverviewBookingsTabPanelProps) {
  return (
    <Stack gap="lg">
      <OverviewKpiStrip
        items={[
          {
            label: "Total bookings",
            value: data.kpis.total,
            icon: FileText,
            accent: "gold",
            hint: "All time",
          },
          {
            label: "Active bookings",
            value: data.kpis.totalActive,
            icon: FileText,
            accent: "emerald",
            hint: "Currently in workflow",
          },
          {
            label: "Needs action",
            value: data.kpis.needsAction,
            icon: AlertCircle,
            accent: "amber",
            hint: "Awaiting your review",
          },
          {
            label: "Urgent",
            value: data.kpis.urgent,
            icon: Clock,
            accent: "rose",
            hint: "High priority queue",
          },
          {
            label: "In approval",
            value: data.kpis.inApproval,
            icon: UserCheck,
            accent: "sky",
            hint: "Pending sign-off",
          },
        ]}
      />

      <Grid gap="md">
        <Grid.Col span={{ base: 12, lg: 7 }}>
          <OverviewBookingTrendChart data={data.bookingTrend} />
        </Grid.Col>
        <Grid.Col span={{ base: 12, lg: 5 }}>
          <OverviewStatusChart data={data.bookingsByPipeline} />
        </Grid.Col>
      </Grid>

      <Grid gap="md">
        <Grid.Col span={{ base: 12, md: 4 }}>
          <OverviewDonutChart
            title="By status"
            data={data.bookingsByStatus.map((item) => ({
              name: BOOKING_STATUS_META[item.status]?.title ?? item.status,
              value: item.count,
            }))}
            emptyMessage="No bookings yet"
          />
        </Grid.Col>
        <Grid.Col span={{ base: 12, md: 4 }}>
          <OverviewHorizontalBarChart
            title="By freight type"
            data={data.bookingsByFreightType.map((item) => ({
              label: item.label,
              value: item.count,
            }))}
            valueLabel="Bookings"
          />
        </Grid.Col>
        <Grid.Col span={{ base: 12, md: 4 }}>
          <OverviewDonutChart
            title="By payment currency"
            data={data.bookingsByCurrency.map((item) => ({
              name: item.label,
              value: item.count,
            }))}
          />
        </Grid.Col>
      </Grid>

      <OverviewRecentBookingsTable bookings={data.recentBookings} />
    </Stack>
  );
}