From 876ea5ed8e22471160dc49da912e9d889507e1ea Mon Sep 17 00:00:00 2001
From: janpeter visser <janpetervisser2@gmail.com>
Date: Sat, 2 May 2026 16:18:15 +0200
Subject: [PATCH] =?UTF-8?q?feat(insights):=20add=20BacklogHealthCard=20?=
 =?UTF-8?q?=E2=80=94=20counters=20+=20stuck-tasks=20table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three counter tiles (green checkmark when 0, amber warning icon otherwise)
and a table of stuck tasks with orange/red day-colouring and router.push
deeplinks to /products/[id]/solo?task=...

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../insights/components/backlog-health.tsx    | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 app/(app)/insights/components/backlog-health.tsx

diff --git a/app/(app)/insights/components/backlog-health.tsx b/app/(app)/insights/components/backlog-health.tsx
new file mode 100644
index 0000000..fbf23c9
--- /dev/null
+++ b/app/(app)/insights/components/backlog-health.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { CheckCircle, AlertTriangle, XCircle } from 'lucide-react'
+import type { BacklogHealth, StuckTask } from '@/lib/insights/backlog-health'
+
+interface Props {
+  data: BacklogHealth
+}
+
+function Counter({ label, count }: { label: string; count: number }) {
+  const healthy = count === 0
+  return (
+    <div className="flex flex-col items-center gap-1 rounded-lg border border-border bg-surface-container p-3">
+      {healthy ? (
+        <CheckCircle className="h-5 w-5 text-status-done" />
+      ) : (
+        <AlertTriangle className="h-5 w-5 text-priority-medium" />
+      )}
+      <span className="text-xl font-semibold text-foreground">{count}</span>
+      <span className="text-xs text-muted-foreground text-center leading-tight">{label}</span>
+    </div>
+  )
+}
+
+function daysStuckClass(days: number): string {
+  if (days >= 14) return 'bg-priority-critical/15 text-priority-critical font-semibold'
+  if (days >= 7) return 'bg-priority-medium/15 text-priority-medium font-semibold'
+  return ''
+}
+
+function StuckTable({ tasks }: { tasks: StuckTask[] }) {
+  const router = useRouter()
+
+  if (tasks.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground py-2">Geen stuck tasks 🎉</p>
+    )
+  }
+
+  return (
+    <table className="w-full text-sm">
+      <thead>
+        <tr className="border-b border-border text-left text-xs text-muted-foreground uppercase tracking-wide">
+          <th className="pb-1 pr-3 font-medium">Taak</th>
+          <th className="pb-1 pr-3 font-medium">Product</th>
+          <th className="pb-1 pr-3 font-medium">Days</th>
+          <th className="pb-1 font-medium">Sprint</th>
+        </tr>
+      </thead>
+      <tbody>
+        {tasks.map(t => (
+          <tr
+            key={t.taskId}
+            className="border-b border-border last:border-0 cursor-pointer hover:bg-surface-container-high transition-colors"
+            onClick={() => router.push(`/products/${t.productId}/solo?task=${t.taskId}`)}
+          >
+            <td className="py-1.5 pr-3 line-clamp-1 max-w-[200px]">{t.title}</td>
+            <td className="py-1.5 pr-3 text-muted-foreground whitespace-nowrap">{t.productName}</td>
+            <td className={`py-1.5 pr-3 whitespace-nowrap px-1 rounded ${daysStuckClass(t.daysStuck)}`}>
+              {t.daysStuck}d
+            </td>
+            <td className="py-1.5 text-muted-foreground whitespace-nowrap line-clamp-1 max-w-[140px]">
+              {t.sprintGoal ?? '—'}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
+
+export function BacklogHealthCard({ data }: Props) {
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-3 gap-3">
+        <Counter label="Stories zonder AC" count={data.storiesWithoutAc} />
+        <Counter label="Tasks zonder plan" count={data.tasksWithoutPlan} />
+        <Counter label="Stuck > 7 dagen" count={data.stuckTasks.length} />
+      </div>
+
+      <div>
+        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
+          Stuck tasks
+        </p>
+        <StuckTable tasks={data.stuckTasks} />
+      </div>
+    </div>
+  )
+}