feat: SprintStatusDonut + getSprintStatusBreakdown helper

PieChart (donut) met TO_DO/IN_PROGRESS/DONE verdeling over alle active sprints.
REVIEW wordt samengevoegd in IN_PROGRESS. MD3 status-kleuren via CSS-variabelen.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/(app)/insights/components/sprint-status-donut.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts'
+import type { StatusCount } from '@/lib/insights/sprint-status'
+
+interface Props {
+  data: StatusCount[]
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  TO_DO: 'var(--status-todo)',
+  IN_PROGRESS: 'var(--status-in-progress)',
+  DONE: 'var(--status-done)',
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  TO_DO: 'To do',
+  IN_PROGRESS: 'In progress',
+  DONE: 'Done',
+}
+
+export function SprintStatusDonut({ data }: Props) {
+  if (data.length === 0) {
+    return <p className="text-muted-foreground text-sm">Geen actieve sprint-taken</p>
+  }
+
+  const labeled = data.map(d => ({ ...d, name: STATUS_LABELS[d.status] ?? d.status }))
+
+  return (
+    <ResponsiveContainer width="100%" height={240}>
+      <PieChart>
+        <Pie
+          data={labeled}
+          dataKey="count"
+          nameKey="name"
+          innerRadius={50}
+          outerRadius={80}
+        >
+          {labeled.map(entry => (
+            <Cell key={entry.status} fill={STATUS_COLORS[entry.status]} />
+          ))}
+        </Pie>
+        <Tooltip />
+        <Legend />
+      </PieChart>
+    </ResponsiveContainer>
+  )
+}