From 0f129dc0de0aca1ea3b7a34eb9ed4994af7df92f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Sun, 22 Mar 2026 22:04:30 +0100
Subject: [PATCH] fix: add InfoTooltip column descriptions + dark theme to 3
 new widgets

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>
---
 .../widgets/BudgetForecastWidget.tsx          | 33 ++++++++++++-------
 .../dashboard/widgets/ProjectHealthWidget.tsx | 29 +++++++++-------
 .../dashboard/widgets/SkillGapWidget.tsx      | 29 ++++++++++------
 3 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx b/apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx
index d32c49d..dd0367b 100644
--- a/apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx
@@ -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>
diff --git a/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx b/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx
index fc29df1..68ffbe7 100644
--- a/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx
@@ -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">
diff --git a/apps/web/src/components/dashboard/widgets/SkillGapWidget.tsx b/apps/web/src/components/dashboard/widgets/SkillGapWidget.tsx
index 035ad05..6af5408 100644
--- a/apps/web/src/components/dashboard/widgets/SkillGapWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/SkillGapWidget.tsx
@@ -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";
 
 export function SkillGapWidget(_props: WidgetProps) {
   const { data, isLoading } = trpc.dashboard.getSkillGaps.useQuery(
@@ -37,27 +38,35 @@ export function SkillGapWidget(_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">Skill</th>
-            <th className="px-3 py-2 text-right font-medium text-gray-500">Demand</th>
-            <th className="px-3 py-2 text-right font-medium text-gray-500">Supply</th>
-            <th className="px-3 py-2 text-center font-medium text-gray-500">Gap</th>
+            <th className="px-3 py-2 text-left font-medium text-gray-500 dark:text-gray-400">
+              Skill <InfoTooltip content="Skills required by open demand positions" />
+            </th>
+            <th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
+              Demand <InfoTooltip content="Number of unfilled demand requirements needing this skill" />
+            </th>
+            <th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
+              Supply <InfoTooltip content="Number of active resources with this skill at proficiency 3+" />
+            </th>
+            <th className="px-3 py-2 text-center font-medium text-gray-500 dark:text-gray-400">
+              Gap <InfoTooltip content="Supply minus Demand: negative (red) = shortage, positive (green) = surplus" />
+            </th>
           </tr>
         </thead>
-        <tbody className="divide-y divide-gray-100">
+        <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
           {rows.map((row) => {
             const isShortage = row.gap < 0;
             const isSurplus = row.gap > 0;
             return (
-              <tr key={row.skill} className="hover:bg-gray-50">
-                <td className="px-3 py-2 font-medium text-gray-900 max-w-[180px] truncate">
+              <tr key={row.skill} 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-[180px] truncate">
                   {row.skill}
                 </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.demand}
                 </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.supply}
                 </td>
                 <td className="px-3 py-2 text-center">