Nexus/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx

"use client";

import { trpc } from "~/lib/trpc/client.js";
import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";

function healthDot(value: number): string {
  if (value >= 70) return "bg-green-500";
  if (value >= 40) return "bg-amber-400";
  return "bg-red-500";
}

function scoreBadge(score: number): string {
  if (score >= 70) return "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300";
  if (score >= 40) return "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300";
  return "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300";
}

export function ProjectHealthWidget(_props: WidgetProps) {
  const { data, isLoading } = trpc.dashboard.getProjectHealth.useQuery(
    undefined,
    { staleTime: 60_000, placeholderData: (prev) => prev },
  );

  if (isLoading && !data) {
    return (
      <div className="flex flex-col gap-1 pt-1">
        {[...Array(5)].map((_, i) => (
          <div key={i} className="flex items-center gap-3 px-3 py-2">
            <div className="h-3 w-16 shimmer-skeleton rounded" />
            <div className="h-3 flex-1 shimmer-skeleton rounded" />
            <div className="flex gap-1">
              <div className="h-4 w-4 shimmer-skeleton rounded-full" />
              <div className="h-4 w-4 shimmer-skeleton rounded-full" />
              <div className="h-4 w-4 shimmer-skeleton rounded-full" />
            </div>
            <div className="h-5 w-10 shimmer-skeleton rounded-full" />
          </div>
        ))}
      </div>
    );
  }

  const rows = data ?? [];

  if (rows.length === 0) {
    return (
      <div className="flex items-center justify-center h-full text-sm text-gray-400">
        No active projects found.
      </div>
    );
  }

  return (
    <div className="overflow-auto h-full">
      <table className="w-full text-xs">
        <thead className="bg-gray-50 dark:bg-gray-800/50 sticky top-0">
          <tr>
            <th className="px-3 py-2 text-left font-medium text-gray-500 dark:text-gray-400">
              Project <InfoTooltip content="Active projects scored across three health dimensions" />
            </th>
            <th className="px-3 py-2 text-center font-medium text-gray-500 dark:text-gray-400">
              B / S / T <InfoTooltip content="Budget health (spent vs budget), Staffing health (filled vs total demands), Timeline health (within end date)" />
            </th>
            <th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
              Score <InfoTooltip content="Composite score: average of Budget, Staffing, and Timeline health (0-100)" />
            </th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
          {rows.map((row) => (
            <tr key={row.shortCode} className="hover:bg-gray-50 dark:hover:bg-gray-800/30">
              <td className="px-3 py-2 font-medium text-gray-900 dark:text-gray-100 max-w-[160px] truncate">
                <span className="font-mono text-gray-500 dark:text-gray-400 mr-1">{row.shortCode}</span>
                {row.projectName}
              </td>
              <td className="px-3 py-2">
                <div className="flex items-center justify-center gap-2">
                  <span
                    className={`inline-block w-3 h-3 rounded-full ${healthDot(row.budgetHealth)}`}
                    title={`Budget: ${row.budgetHealth}%`}
                  />
                  <span
                    className={`inline-block w-3 h-3 rounded-full ${healthDot(row.staffingHealth)}`}
                    title={`Staffing: ${row.staffingHealth}%`}
                  />
                  <span
                    className={`inline-block w-3 h-3 rounded-full ${healthDot(row.timelineHealth)}`}
                    title={`Timeline: ${row.timelineHealth}%`}
                  />
                </div>
              </td>
              <td className="px-3 py-2 text-right">
                <span
                  className={`inline-block px-2 py-0.5 rounded-full font-semibold tabular-nums ${scoreBadge(row.compositeScore)}`}
                >
                  {row.compositeScore}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}