shoc-frontend-new/src/app/(protected)/dashboard/_components/work-order-breakdown-card.tsx

import { useNavigate } from "react-router";
import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
import type { DashboardBreakdownRow } from "@/domain/dashboard/types/dashboard-stats";
import {
  workOrderDrilldownUrl,
  workOrderTypeDrilldownSearch,
} from "@/domain/dashboard/utils/work-order-drilldown-links";
import { DashboardBarList } from "./dashboard-bar-list";
import { DashboardCard } from "./dashboard-card";

const EMPTY_MESSAGE = "No work orders match the current filters.";

interface WorkOrderBreakdownCardProps {
  breakdown: DashboardBreakdownRow[];
  range: DashboardRangeKey;
  isLoading?: boolean;
  error?: unknown;
}

export function WorkOrderBreakdownCard({
  breakdown,
  range,
  isLoading = false,
  error,
}: WorkOrderBreakdownCardProps) {
  const navigate = useNavigate();

  return (
    <DashboardCard
      title="Work Order Breakdown"
      isLoading={isLoading}
      error={error}
      isEmpty={!isLoading && !error && breakdown.length === 0}
      emptyMessage={EMPTY_MESSAGE}
    >
      <DashboardBarList
        ariaLabel="Work Order Breakdown"
        rows={breakdown.map((row) => ({ id: row.status, label: row.status, count: row.count }))}
        isSelectable={(row) => workOrderTypeDrilldownSearch(row.id, range) !== null}
        onSelectRow={(row) => {
          const search = workOrderTypeDrilldownSearch(row.id, range);
          if (search) navigate(workOrderDrilldownUrl(search));
        }}
      />
    </DashboardCard>
  );
}