feat: Sprint 4 — scenario planner, report builder, comments, dashboard widgets

What-If Scenario Planner (G5): - New /projects/[id]/scenario page with side-by-side baseline vs scenario - simulate mutation: pure cost/hours/headcount/utilization computation - apply mutation: creates real PROPOSED assignments from scenario - Impact cards: cost delta, hours delta, headcount, skill coverage % - Per-resource utilization impact table with over-allocation warnings - "What-If" button added to project detail page Custom Report Builder (G7): - New /reports/builder page with full config panel - Entity selector (resource/project/assignment), column picker, filter builder - Dynamic Prisma query with eq/neq/gt/lt/contains/in operators - Sortable results table with pagination (50/page) - CSV export via exportReport mutation - Sidebar nav link under Analytics Collaboration Layer (G8): - Comment model in Prisma (entityType/entityId, replies, @mentions, resolved) - comment router: list, count, create, resolve, delete - @mention parsing with notification creation + SSE delivery - CommentInput with @mention autocomplete (arrow nav, Enter/Tab confirm) - CommentThread with avatar, timestamp, reply, resolve, delete - Integrated as "Comments" tab in estimate workspace with count badge Dashboard Widgets: - BudgetForecastWidget: progress bars per project, burn rate, exhaustion date - SkillGapWidget: supply vs demand per skill, shortage/surplus indicators - ProjectHealthWidget: 3-dimension health circles + composite score - 3 new application use-cases + dashboard router queries - All registered in widget-registry with lazy imports Co-Authored-By: claude-flow <ruv@ruv.net>
2026-03-19 21:47:47 +01:00
parent 6f34659587
commit e1368c7ef7
27 changed files with 3889 additions and 1 deletions
@@ -0,0 +1,93 @@
+"use client";
+
+import { trpc } from "~/lib/trpc/client.js";
+import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
+
+function colorClass(pct: number): string {
+  if (pct > 90) return "bg-red-500";
+  if (pct > 70) return "bg-amber-400";
+  return "bg-green-500";
+}
+
+function textColorClass(pct: number): string {
+  if (pct > 90) return "text-red-700";
+  if (pct > 70) return "text-amber-700";
+  return "text-green-700";
+}
+
+export function BudgetForecastWidget(_props: WidgetProps) {
+  const { data, isLoading } = trpc.dashboard.getBudgetForecast.useQuery(
+    undefined,
+    { staleTime: 60_000, placeholderData: (prev) => prev },
+  );
+
+  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="h-3 w-12 shimmer-skeleton rounded" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  const rows = data ?? [];
+
+  if (rows.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full text-sm text-gray-400">
+        No active projects with budgets.
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-auto h-full">
+      <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">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>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100">
+          {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>
+                {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={`h-full rounded-full transition-all ${colorClass(row.pctUsed)}`}
+                      style={{ width: `${Math.min(row.pctUsed, 100)}%` }}
+                    />
+                  </div>
+                  <span className={`text-[11px] font-semibold tabular-nums w-10 text-right ${textColorClass(row.pctUsed)}`}>
+                    {row.pctUsed}%
+                  </span>
+                </div>
+              </td>
+              <td className="px-3 py-2 text-right text-gray-700 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">
+                {row.estimatedExhaustionDate ?? "\u2014"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}