feat: implement category breakdown by parent in dashboard; enhance chart data handling to include totals for parent categories

components/dashboard/category-breakdown.tsx

@@ -36,10 +36,43 @@ export function CategoryBreakdown({ data }: CategoryBreakdownProps) {
         value: total,
         color: category?.color || "#94a3b8",
         icon: category?.icon || "HelpCircle",
+        categoryId: categoryId === "uncategorized" ? null : categoryId,
       };
     })
-    .sort((a, b) => b.value - a.value)
-    .slice(0, 6);
+    .sort((a, b) => b.value - a.value);
+
+  // Category breakdown grouped by parent
+  const categoryTotalsByParent = new Map<string, number>();
+  monthExpenses.forEach((t) => {
+    const category = data.categories.find((c) => c.id === t.categoryId);
+    // Use parent category ID if exists, otherwise use the category itself
+    let groupId: string;
+    if (!category) {
+      groupId = "uncategorized";
+    } else if (category.parentId) {
+      groupId = category.parentId;
+    } else {
+      // Category is a parent itself
+      groupId = category.id;
+    }
+    const current = categoryTotalsByParent.get(groupId) || 0;
+    categoryTotalsByParent.set(groupId, current + Math.abs(t.amount));
+  });
+
+  const chartDataByParent: CategoryChartData[] = Array.from(
+    categoryTotalsByParent.entries(),
+  )
+    .map(([groupId, total]) => {
+      const category = data.categories.find((c) => c.id === groupId);
+      return {
+        name: category?.name || "Non catégorisé",
+        value: total,
+        color: category?.color || "#94a3b8",
+        icon: category?.icon || "HelpCircle",
+        categoryId: groupId === "uncategorized" ? null : groupId,
+      };
+    })
+    .sort((a, b) => b.value - a.value);
 
   const formatCurrency = (value: number) => {
     return new Intl.NumberFormat("fr-FR", {
@@ -51,6 +84,8 @@ export function CategoryBreakdown({ data }: CategoryBreakdownProps) {
   return (
     <CategoryPieChart
       data={chartData}
+      dataByParent={chartDataByParent}
+      categories={data.categories}
       formatCurrency={formatCurrency}
       title="Dépenses par catégorie"
       height={250}