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/BudgetForecastWidget.tsx
+21 -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 colorClass(pct: number): string {
if (pct > 90) return "bg-red-500";
@@ -48,24 +49,32 @@ export function BudgetForecastWidget(_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-left font-medium text-gray-500">Budget Usage</th>
<th className="px-3 py-2 text-right font-medium text-gray-500">Burn/mo</th>
<th className="px-3 py-2 text-right font-medium text-gray-500">Exhaustion</th>
<th className="px-3 py-2 text-left font-medium text-gray-500 dark:text-gray-400">
Project <InfoTooltip content="Active projects with a defined budget" />
</th>
<th className="px-3 py-2 text-left font-medium text-gray-500 dark:text-gray-400">
Budget Usage <InfoTooltip content="Percentage of total budget consumed by current allocations" />
</th>
<th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
Burn/mo <InfoTooltip content="Monthly burn rate based on currently active allocations" />
</th>
<th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
Exhaustion <InfoTooltip content="Projected date when budget will be fully consumed at the current burn rate" />
</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-[140px] 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-[140px] 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 gap-2">
<div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
<div className="flex-1 h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
<div
className={`h-full rounded-full transition-all ${colorClass(row.pctUsed)}`}
style={{ width: `${Math.min(row.pctUsed, 100)}%` }}
@@ -76,12 +85,12 @@ export function BudgetForecastWidget(_props: WidgetProps) {
</span>
</div>
</td>
<td className="px-3 py-2 text-right text-gray-700 tabular-nums">
<td className="px-3 py-2 text-right text-gray-700 dark:text-gray-300 tabular-nums">
{row.burnRate > 0
? `${(row.burnRate / 100).toLocaleString("de-DE", { maximumFractionDigits: 0 })} \u20AC`
: "\u2014"}
</td>
<td className="px-3 py-2 text-right text-gray-500 tabular-nums">
<td className="px-3 py-2 text-right text-gray-500 dark:text-gray-400 tabular-nums">
{row.estimatedExhaustionDate ?? "\u2014"}
</td>
</tr>