shoc-frontend-new/src/app/(protected)/dashboard/_components/dispatcher-workload-card.tsx

import { useNavigate } from "react-router";
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
import { Text } from "@/components/ui/text";
import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
import type { DispatcherWorkloadRow } from "@/domain/dashboard/types/dashboard-workload";
import {
  workOrderDispatcherDrilldownSearch,
  workOrderDrilldownUrl,
} from "@/domain/dashboard/utils/work-order-drilldown-links";
import { DashboardCard } from "./dashboard-card";

const EMPTY_MESSAGE = "No dispatchers are set up yet.";

interface DispatcherWorkloadCardProps {
  rows: DispatcherWorkloadRow[];
  range: DashboardRangeKey;
  isLoading?: boolean;
  error?: unknown;
}

function DispatcherNameCell({
  row,
  range,
}: {
  row: DispatcherWorkloadRow;
  range: DashboardRangeKey;
}) {
  const navigate = useNavigate();
  const drillable = Boolean(row.dispatcherId) && row.totalWorkOrders > 0;

  if (!drillable) {
    return <Text variant="description">{row.dispatcherName}</Text>;
  }

  return (
    <Text
      variant="description"
      as="button"
      className="cursor-pointer text-left font-medium underline-offset-2 hover:underline"
      onClick={() =>
        navigate(workOrderDrilldownUrl(workOrderDispatcherDrilldownSearch(row.dispatcherId, range)))
      }
    >
      {row.dispatcherName}
    </Text>
  );
}

export function DispatcherWorkloadCard({
  rows,
  range,
  isLoading = false,
  error,
}: DispatcherWorkloadCardProps) {
  return (
    <DashboardCard
      title="Dispatcher Workload"
      isLoading={isLoading}
      error={error}
      isEmpty={!isLoading && !error && rows.length === 0}
      emptyMessage={EMPTY_MESSAGE}
    >
      <TableContainer>
        <Table size="small" aria-label="Dispatcher Workload">
          <TableHead>
            <TableRow>
              <TableCell className="font-semibold">Dispatcher</TableCell>
              <TableCell align="right" className="font-semibold">
                Open
              </TableCell>
              <TableCell align="right" className="font-semibold">
                Total
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => (
              <TableRow key={row.dispatcherId || row.dispatcherName}>
                <TableCell>
                  <DispatcherNameCell row={row} range={range} />
                </TableCell>
                <TableCell align="right">{row.openWorkOrders.toLocaleString()}</TableCell>
                <TableCell align="right">{row.totalWorkOrders.toLocaleString()}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </DashboardCard>
  );
}