edr-platform/apps/edr-freight-web/backoffice/src/components/contracts/ContractStatusTabs.tsx

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

import "@/components/overview/overview.css";
import {
  CONTRACT_LIST_TABS,
  type ContractStatusTabKey,
} from "@/features/contracts/contract-status.config";

const TAB_ICONS: Record<ContractStatusTabKey, 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} />,
  active: <Truck size={17} strokeWidth={1.85} />,
  closed: <XCircle size={17} strokeWidth={1.85} />,
};

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

export function ContractStatusTabs({
  active,
  onChange,
  counts,
}: ContractStatusTabsProps) {
  return (
    <Tabs
      value={active}
      onChange={(value) => onChange((value as ContractStatusTabKey) ?? "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" }}>
          {CONTRACT_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 { ContractStatusTabKey };