301 lines
13 KiB
TypeScript
301 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import Link from "next/link";
|
|
import { trpc } from "~/lib/trpc/client.js";
|
|
import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
|
|
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
|
import { ShoringBadge } from "~/components/projects/ShoringIndicator.js";
|
|
import { WidgetFilterBar, type WidgetFilter } from "~/components/dashboard/WidgetFilterBar.js";
|
|
import { useWidgetFilterOptions } from "~/hooks/useWidgetFilterOptions.js";
|
|
import { formatMoney } from "~/lib/format.js";
|
|
|
|
type ProjectHealthRow = {
|
|
id: string;
|
|
projectName: string;
|
|
shortCode: string;
|
|
status: string;
|
|
clientId: string | null;
|
|
clientName: string | null;
|
|
budgetHealth: number;
|
|
staffingHealth: number;
|
|
timelineHealth: number;
|
|
compositeScore: number;
|
|
budgetCents?: number | null;
|
|
spentCents?: number;
|
|
remainingBudgetCents?: number | null;
|
|
budgetUtilizationPercent?: number | null;
|
|
demandHeadcountTotal?: number;
|
|
demandHeadcountFilled?: number;
|
|
demandHeadcountOpen?: number;
|
|
demandRequirementCount?: number;
|
|
plannedEndDate?: string | Date | null;
|
|
daysUntilEndDate?: number | null;
|
|
timelineStatus?: "ON_TRACK" | "DUE_SOON" | "OVERDUE" | "UNSCHEDULED" | null;
|
|
calendarLocations?: Array<{
|
|
countryCode?: string | null;
|
|
countryName?: string | null;
|
|
federalState?: string | null;
|
|
metroCityName?: string | null;
|
|
assignmentCount: number;
|
|
spentCents: number;
|
|
}>;
|
|
derivation?: {
|
|
periodStart: string;
|
|
periodEnd: string;
|
|
calendarContextCount: number;
|
|
holidayAwareAssignmentCount: number;
|
|
fallbackAssignmentCount: number;
|
|
baseSpentCents: number;
|
|
adjustedSpentCents: number;
|
|
publicHolidayDayEquivalent: number;
|
|
publicHolidayCostDeductionCents: number;
|
|
absenceDayEquivalent: number;
|
|
absenceCostDeductionCents: number;
|
|
} | null;
|
|
};
|
|
|
|
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";
|
|
}
|
|
|
|
function formatShortDate(value?: string | Date | null): string {
|
|
if (!value) {
|
|
return "No end date";
|
|
}
|
|
|
|
const date = value instanceof Date ? value : new Date(value);
|
|
if (Number.isNaN(date.getTime())) {
|
|
return "No end date";
|
|
}
|
|
|
|
return new Intl.DateTimeFormat("de-DE", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
year: "numeric",
|
|
}).format(date);
|
|
}
|
|
|
|
function formatTimeline(daysUntilEndDate?: number | null, timelineStatus?: string | null): string {
|
|
if (timelineStatus === "UNSCHEDULED" || daysUntilEndDate == null) {
|
|
return "No end date";
|
|
}
|
|
|
|
if (daysUntilEndDate < 0) {
|
|
return `${Math.abs(daysUntilEndDate)} days overdue`;
|
|
}
|
|
|
|
if (daysUntilEndDate === 0) {
|
|
return "Due today";
|
|
}
|
|
|
|
return `${daysUntilEndDate} days left`;
|
|
}
|
|
|
|
function formatLocation(location: {
|
|
countryCode?: string | null;
|
|
countryName?: string | null;
|
|
federalState?: string | null;
|
|
metroCityName?: string | null;
|
|
}): string {
|
|
const parts = [
|
|
location.countryCode ?? location.countryName ?? null,
|
|
location.federalState ?? null,
|
|
location.metroCityName ?? null,
|
|
].filter((part): part is string => Boolean(part));
|
|
return parts.length > 0 ? parts.join(" / ") : "No calendar context";
|
|
}
|
|
|
|
function formatDayEquivalent(value?: number | null): string {
|
|
if (value == null) return "—";
|
|
return Number.isInteger(value) ? String(value) : value.toFixed(1);
|
|
}
|
|
|
|
export function ProjectHealthWidget({ config, onConfigChange }: WidgetProps) {
|
|
const showDetails = config.showDetails === true;
|
|
const { clients } = useWidgetFilterOptions({ clients: true });
|
|
|
|
const filters = useMemo<WidgetFilter[]>(
|
|
() => [
|
|
{ type: "search", key: "search", placeholder: "Search project..." },
|
|
{ type: "select", key: "clientId", label: "Client", options: clients },
|
|
],
|
|
[clients],
|
|
);
|
|
|
|
const { data, isLoading } = trpc.dashboard.getProjectHealth.useQuery(
|
|
undefined,
|
|
{ staleTime: 60_000, placeholderData: (prev) => prev },
|
|
);
|
|
|
|
const search = ((config.search as string) ?? "").toLowerCase();
|
|
const clientId = (config.clientId as string) ?? "";
|
|
|
|
const rows = useMemo(() => {
|
|
const all = (data ?? []) as ProjectHealthRow[];
|
|
return all.filter((r) => {
|
|
if (search && !r.projectName.toLowerCase().includes(search) && !r.shortCode.toLowerCase().includes(search)) return false;
|
|
if (clientId && r.clientId !== clientId) return false;
|
|
return true;
|
|
});
|
|
}, [data, search, clientId]);
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
if (rows.length === 0) {
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<WidgetFilterBar filters={filters} values={config} onChange={onConfigChange ?? (() => {})} />
|
|
<div className="flex items-center justify-center flex-1 text-sm text-gray-400">
|
|
No active projects found.
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full overflow-hidden">
|
|
<WidgetFilterBar filters={filters} values={config} onChange={onConfigChange ?? (() => {})} />
|
|
<div className="overflow-auto flex-1">
|
|
<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 including visible budget, staffing, and timeline basis." />
|
|
</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 demanded headcount), Timeline health (end date and remaining horizon)." />
|
|
</th>
|
|
<th className="px-3 py-2 text-center font-medium text-gray-500 dark:text-gray-400">
|
|
Shoring <InfoTooltip content="Offshore staffing ratio: percentage of hours from non-onshore resources. Color indicates threshold status." />
|
|
</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 text-gray-900 dark:text-gray-100 max-w-[320px]">
|
|
<Link href={`/projects/${(row as any).id}`} className="block hover:text-brand-600 dark:hover:text-brand-400 transition-colors">
|
|
<div className="truncate font-medium">
|
|
<span className="font-mono text-gray-500 dark:text-gray-400 mr-1">{row.shortCode}</span>
|
|
{row.projectName}
|
|
</div>
|
|
</Link>
|
|
{showDetails ? (
|
|
<div className="mt-1 space-y-0.5 text-[11px] leading-4 text-gray-500 dark:text-gray-400">
|
|
<div>
|
|
Budget: {formatMoney(row.spentCents ?? 0)} spent
|
|
{row.budgetCents != null ? ` / ${formatMoney(row.budgetCents)} budget` : " / no budget"}
|
|
{row.remainingBudgetCents != null ? ` / ${formatMoney(row.remainingBudgetCents)} remaining` : ""}
|
|
</div>
|
|
<div>
|
|
Staffing: {row.demandHeadcountFilled ?? 0}/{row.demandHeadcountTotal ?? 0} HC
|
|
{typeof row.demandHeadcountOpen === "number" ? `, ${row.demandHeadcountOpen} open` : ""}
|
|
{typeof row.demandRequirementCount === "number" ? ` across ${row.demandRequirementCount} demands` : ""}
|
|
</div>
|
|
<div>
|
|
Timeline: {formatShortDate(row.plannedEndDate)} · {formatTimeline(row.daysUntilEndDate, row.timelineStatus)}
|
|
</div>
|
|
{row.derivation ? (
|
|
<>
|
|
<div>
|
|
Spend basis: {row.derivation.calendarContextCount} calendar bases · {row.derivation.holidayAwareAssignmentCount} holiday-aware
|
|
{row.derivation.fallbackAssignmentCount > 0 ? ` · ${row.derivation.fallbackAssignmentCount} fallback` : ""}
|
|
</div>
|
|
<div>
|
|
Base {formatMoney(row.derivation.baseSpentCents)} {"->"} Effective {formatMoney(row.derivation.adjustedSpentCents)}
|
|
</div>
|
|
<div>
|
|
Holidays -{formatMoney(row.derivation.publicHolidayCostDeductionCents)} ({formatDayEquivalent(row.derivation.publicHolidayDayEquivalent)}d)
|
|
{" · "}
|
|
Absence -{formatMoney(row.derivation.absenceCostDeductionCents)} ({formatDayEquivalent(row.derivation.absenceDayEquivalent)}d)
|
|
</div>
|
|
</>
|
|
) : null}
|
|
{(row.calendarLocations ?? []).length > 0 ? (
|
|
<div>
|
|
Calendar basis: {(row.calendarLocations ?? [])
|
|
.slice(0, 2)
|
|
.map((location) => `${formatLocation(location)} (${formatMoney(location.spentCents)} / ${location.assignmentCount} assign.)`)
|
|
.join(" · ")}
|
|
{(row.calendarLocations ?? []).length > 2
|
|
? ` · +${(row.calendarLocations ?? []).length - 2} more`
|
|
: ""}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</td>
|
|
<td className="px-3 py-2">
|
|
<div className="flex flex-col items-center justify-center gap-1 text-[11px] text-gray-500 dark:text-gray-400">
|
|
<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>
|
|
<div className="text-center tabular-nums">
|
|
B {row.budgetUtilizationPercent ?? 0}% used
|
|
</div>
|
|
{showDetails ? (
|
|
<div className="text-center tabular-nums">
|
|
S {row.demandHeadcountFilled ?? 0}/{row.demandHeadcountTotal ?? 0} · T {formatTimeline(row.daysUntilEndDate, row.timelineStatus)}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-2 text-center">
|
|
<ShoringBadge projectId={(row as any).id} />
|
|
</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>
|
|
</div>
|
|
);
|
|
}
|