added api logic, vitest, minimal testing ui

web/src/components/charts/VariableAllocationDonut.tsx

@@ -0,0 +1,35 @@
+// web/src/components/charts/VariableAllocationDonut.tsx
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from "recharts";
+
+export type VariableSlice = { name: string; value: number; isSavings: boolean };
+
+export default function VariableAllocationDonut({ data }: { data: VariableSlice[] }) {
+  const total = data.reduce((s, d) => s + d.value, 0);
+  if (!data.length || total === 0) {
+    return (
+      <div className="card">
+        <h3 className="text-sm mb-2" style={{ color: "var(--color-sage)" }}>Variable Allocation</h3>
+        <div className="muted text-sm">No categories configured yet.</div>
+      </div>
+    );
+  }
+
+  const fillFor = (s: boolean) => (s ? "#165F46" : "#374151");
+
+  return (
+    <div className="card">
+      <h3 className="text-sm mb-2" style={{ color: "var(--color-sage)" }}>Variable Allocation</h3>
+      <div className="chart-md">
+        <ResponsiveContainer>
+          <PieChart>
+            <Pie data={data} dataKey="value" nameKey="name" innerRadius={70} outerRadius={100} stroke="#0B1020" strokeWidth={2}>
+              {data.map((d, i) => <Cell key={i} fill={fillFor(d.isSavings)} />)}
+            </Pie>
+            <Tooltip formatter={(v: number) => `${v}%`} contentStyle={{ background: "#111827", border: "1px solid #111827", borderRadius: 12, color: "#E7E3D7" }} />
+            <Legend verticalAlign="bottom" height={24} />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}