edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx

import { Badge, ScrollArea, Tabs } from "@mantine/core";
import {
  CheckCircle,
  ClipboardCheck,
  ClipboardList,
  FileSignature,
  Inbox,
  LayoutGrid,
  ShieldCheck,
  Train,
  Wallet,
  XCircle,
} from "lucide-react";

import "@/components/overview/overview.css";
import {
  BOOKING_LIST_TABS,
  type BookingStatusTabKey,
} from "@/features/bookings/booking-status.config";

const TAB_ICONS: Record<BookingStatusTabKey, React.ReactNode> = {
  all: <LayoutGrid size={17} strokeWidth={1.85} />,
  intake: <Inbox size={17} strokeWidth={1.85} />,
  in_approval: <ClipboardCheck size={17} strokeWidth={1.85} />,
  approved_contract: <FileSignature size={17} strokeWidth={1.85} />,
  clearance: <ShieldCheck size={17} strokeWidth={1.85} />,
  payment: <Wallet size={17} strokeWidth={1.85} />,
  ops_review: <ClipboardList size={17} strokeWidth={1.85} />,
  operations: <Train size={17} strokeWidth={1.85} />,
  completed: <CheckCircle size={17} strokeWidth={1.85} />,
  closed: <XCircle size={17} strokeWidth={1.85} />,
};

interface BookingStatusTabsProps {
  active: BookingStatusTabKey;
  onChange: (tab: BookingStatusTabKey) => void;
  counts?: Partial<Record<BookingStatusTabKey, number>>;
}

export function BookingStatusTabs({
  active,
  onChange,
  counts,
}: BookingStatusTabsProps) {
  return (
    <Tabs
      value={active}
      onChange={(value) => onChange((value as BookingStatusTabKey) ?? "all")}
      variant="pills"
      color="edr-green"
      keepMounted={false}
      classNames={{ list: "ov-tablist", tab: "ov-tab" }}
    >
      <ScrollArea type="auto" scrollbarSize={6} offsetScrollbars="x">
        <Tabs.List style={{ flexWrap: "nowrap", width: "max-content" }}>
          {BOOKING_LIST_TABS.map((tab) => {
          const isActive = active === tab.key;
          const count = counts?.[tab.key];
          return (
            <Tabs.Tab
              key={tab.key}
              value={tab.key}
              leftSection={TAB_ICONS[tab.key]}
              size={"sm"}
              rightSection={
                count !== undefined ? (
                  <Badge
                    size="sm"
                    radius="sm"
                    variant={isActive ? "white" : "light"}
                    color={isActive ? "edr-green" : "gray"}
                    styles={
                      isActive
                        ? { root: { background: "rgba(255,255,255,0.9)", color: "#15805f" } }
                        : undefined
                    }
                  >
                    {count}
                  </Badge>
                ) : undefined
              }
            >
              {tab.label}
            </Tabs.Tab>
          );
          })}
        </Tabs.List>
      </ScrollArea>
    </Tabs>
  );
}

export type { BookingStatusTabKey };