174 lines
7.9 KiB
TypeScript
174 lines
7.9 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { trpc } from "~/lib/trpc/client.js";
|
||
import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
|
||
import { ProjectStatus } from "@planarchy/shared/types";
|
||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||
|
||
const STATUS_COLORS: Record<string, string> = {
|
||
DRAFT: "bg-gray-100 text-gray-700",
|
||
ACTIVE: "bg-green-100 text-green-700",
|
||
ON_HOLD: "bg-yellow-100 text-yellow-700",
|
||
COMPLETED: "bg-blue-100 text-blue-700",
|
||
CANCELLED: "bg-red-100 text-red-700",
|
||
};
|
||
|
||
export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
|
||
const status = (config.status as ProjectStatus) || undefined;
|
||
const search = (config.search as string) || "";
|
||
|
||
const { data: projects, isLoading } = trpc.project.listWithCosts.useQuery(
|
||
{ status, search: search || undefined },
|
||
{ staleTime: 60_000 },
|
||
);
|
||
|
||
type SortKey = "code" | "name" | "status" | "cost" | "personDays";
|
||
const [sortKey, setSortKey] = useState<SortKey>("name");
|
||
const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
|
||
|
||
function toggleSort(key: SortKey) {
|
||
if (sortKey === key) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
|
||
else { setSortKey(key); setSortDir("asc"); }
|
||
}
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="animate-pulse flex flex-col gap-2 pt-1">
|
||
{/* header row */}
|
||
<div className="flex gap-3 px-3 py-2">
|
||
{[40, 120, 80, 60, 60].map((w, i) => (
|
||
<div key={i} className="h-2.5 bg-gray-200 dark:bg-gray-700 rounded" style={{ width: w }} />
|
||
))}
|
||
</div>
|
||
{/* data rows */}
|
||
{[...Array(6)].map((_, i) => (
|
||
<div key={i} className="flex gap-3 px-3 py-2 border-t border-gray-100 dark:border-gray-800">
|
||
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
|
||
<div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
|
||
<div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded" />
|
||
<div className="h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded" />
|
||
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface ProjectRow {
|
||
id: string;
|
||
shortCode: string;
|
||
name: string;
|
||
status: string;
|
||
totalCostCents: number;
|
||
totalPersonDays: number;
|
||
}
|
||
const list = ((projects as unknown as { projects: ProjectRow[] } | undefined)?.projects ?? []) as ProjectRow[];
|
||
|
||
const sorted = [...list].sort((a, b) => {
|
||
const mult = sortDir === "asc" ? 1 : -1;
|
||
switch (sortKey) {
|
||
case "code": return mult * a.shortCode.localeCompare(b.shortCode);
|
||
case "name": return mult * a.name.localeCompare(b.name);
|
||
case "status": return mult * a.status.localeCompare(b.status);
|
||
case "cost": return mult * (a.totalCostCents - b.totalCostCents);
|
||
case "personDays": return mult * (a.totalPersonDays - b.totalPersonDays);
|
||
default: return 0;
|
||
}
|
||
});
|
||
|
||
return (
|
||
<div className="flex flex-col h-full gap-3">
|
||
{/* Filters */}
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="search"
|
||
placeholder="Search projects..."
|
||
value={search}
|
||
onChange={(e) => onConfigChange?.({ search: e.target.value })}
|
||
className="flex-1 min-w-0 px-2 py-1 text-xs border border-gray-300 rounded-lg"
|
||
/>
|
||
<select
|
||
value={status ?? ""}
|
||
onChange={(e) => onConfigChange?.({ status: e.target.value || undefined })}
|
||
className="px-2 py-1 text-xs border border-gray-300 rounded-lg bg-white"
|
||
>
|
||
<option value="">All Statuses</option>
|
||
{Object.values(ProjectStatus).map((s) => (
|
||
<option key={s} value={s}>{s}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Table */}
|
||
<div className="overflow-auto flex-1">
|
||
<table className="w-full text-xs">
|
||
<thead className="bg-gray-50 sticky top-0">
|
||
<tr>
|
||
<th className="px-3 py-2 text-left font-medium text-gray-500">
|
||
<button type="button" onClick={() => toggleSort("code")} className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer">
|
||
Code
|
||
<span className="text-[10px] ml-0.5">{sortKey === "code" ? (sortDir === "asc" ? "▲" : "▼") : <span className="text-gray-300">⇅</span>}</span>
|
||
</button>
|
||
</th>
|
||
<th className="px-3 py-2 text-left font-medium text-gray-500">
|
||
<button type="button" onClick={() => toggleSort("name")} className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer">
|
||
Name
|
||
<span className="text-[10px] ml-0.5">{sortKey === "name" ? (sortDir === "asc" ? "▲" : "▼") : <span className="text-gray-300">⇅</span>}</span>
|
||
</button>
|
||
</th>
|
||
<th className="px-3 py-2 text-left font-medium text-gray-500">
|
||
<button type="button" onClick={() => toggleSort("status")} className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer">
|
||
Status
|
||
<span className="text-[10px] ml-0.5">{sortKey === "status" ? (sortDir === "asc" ? "▲" : "▼") : <span className="text-gray-300">⇅</span>}</span>
|
||
</button>
|
||
</th>
|
||
<th className="px-3 py-2 text-right font-medium text-gray-500">
|
||
<span className="inline-flex items-center justify-end">
|
||
<button type="button" onClick={() => toggleSort("cost")} className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer">
|
||
Cost
|
||
<span className="text-[10px] ml-0.5">{sortKey === "cost" ? (sortDir === "asc" ? "▲" : "▼") : <span className="text-gray-300">⇅</span>}</span>
|
||
</button>
|
||
<InfoTooltip
|
||
content="Sum of (resource LCR × hours per day × working days) across all non-cancelled allocations on this project."
|
||
width="w-72"
|
||
/>
|
||
</span>
|
||
</th>
|
||
<th className="px-3 py-2 text-right font-medium text-gray-500">
|
||
<span className="inline-flex items-center justify-end">
|
||
<button type="button" onClick={() => toggleSort("personDays")} className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer">
|
||
Person Days
|
||
<span className="text-[10px] ml-0.5">{sortKey === "personDays" ? (sortDir === "asc" ? "▲" : "▼") : <span className="text-gray-300">⇅</span>}</span>
|
||
</button>
|
||
<InfoTooltip content="Total working days allocated across all non-cancelled allocations (sum of allocation durations in working days)." />
|
||
</span>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-gray-100">
|
||
{sorted.map((p) => (
|
||
<tr key={p.id} className="hover:bg-gray-50">
|
||
<td className="px-3 py-2 font-mono text-gray-600">{p.shortCode}</td>
|
||
<td className="px-3 py-2 font-medium text-gray-900 max-w-[180px] truncate">{p.name}</td>
|
||
<td className="px-3 py-2">
|
||
<span className={`inline-block px-1.5 py-0.5 rounded-full text-xs ${STATUS_COLORS[p.status] ?? ""}`}>
|
||
{p.status}
|
||
</span>
|
||
</td>
|
||
<td className="px-3 py-2 text-right text-gray-700">
|
||
{(p.totalCostCents / 100).toLocaleString("de-DE", { maximumFractionDigits: 0 })} €
|
||
</td>
|
||
<td className="px-3 py-2 text-right text-gray-700">{p.totalPersonDays}d</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
{list.length === 0 && (
|
||
<div className="text-center py-8 text-sm text-gray-400">No projects found.</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|