Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: add InfoTooltip column descriptions + dark theme to 3 new widgets

Browse Source 
Budget Forecast Widget:
- Project: "Active projects with a defined budget"
- Budget Usage: "Percentage of total budget consumed by current allocations"
- Burn/mo: "Monthly burn rate based on currently active allocations"
- Exhaustion: "Projected date when budget will be fully consumed"

Project Health Widget:
- Project: "Active projects scored across three health dimensions"
- B / S / T: "Budget health, Staffing health, Timeline health"
- Score: "Composite score: average of Budget, Staffing, Timeline (0-100)"
- Score badge: dark theme variants for green/amber/red

Skill Gap Widget:
- Skill: "Skills required by open demand positions"
- Demand: "Number of unfilled demand requirements needing this skill"
- Supply: "Number of active resources with this skill at proficiency 3+"
- Gap: "Supply minus Demand: negative = shortage, positive = surplus"

All three: added dark:bg-gray-800/50 thead, dark:divide-gray-800 tbody,
dark:hover:bg-gray-800/30 rows, dark:text-gray-100/300/400 text colors.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
Hartmut Nörenberg
2026-03-22 22:04:30 +01:00
parent 2c65abd231
commit 0f129dc0de
3 changed files with 57 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx
+17 -12
View File
@@ -2,6 +2,7 @@
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";
@@ -10,9 +11,9 @@ function healthDot(value: number): string {
}
function scoreBadge(score: number): string {
if (score >= 70) return "bg-green-100 text-green-700";
if (score >= 40) return "bg-amber-100 text-amber-700";
return "bg-red-100 text-red-700";
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) {
@@ -53,20 +54,24 @@ export function ProjectHealthWidget(_props: WidgetProps) {
return (
<div className="overflow-auto h-full">
<table className="w-full text-xs">
<thead className="bg-gray-50 sticky top-0">
<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">Project</th>
<th className="px-3 py-2 text-center font-medium text-gray-500" title="Budget / Staffing / Timeline">
B / S / T
<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>
<th className="px-3 py-2 text-right font-medium text-gray-500">Score</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100">
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
{rows.map((row) => (
<tr key={row.shortCode} className="hover:bg-gray-50">
<td className="px-3 py-2 font-medium text-gray-900 max-w-[160px] truncate">
<span className="font-mono text-gray-500 mr-1">{row.shortCode}</span>
<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">