feat: add category breakdown by parent to statistics page and enhance pie chart with toggle for grouping options

app/statistics/page.tsx

@@ -242,8 +242,39 @@ export default function StatisticsPage() {
           icon: category?.icon || "HelpCircle",
         };
       })
-      .sort((a, b) => b.value - a.value)
-      .slice(0, 8);
+      .sort((a, b) => b.value - a.value);
+
+    // Category breakdown grouped by parent (expenses only)
+    const categoryTotalsByParent = new Map<string, number>();
+    transactions
+      .filter((t) => t.amount < 0)
+      .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 categoryChartDataByParent = Array.from(categoryTotalsByParent.entries())
+      .map(([groupId, total]) => {
+        const category = data.categories.find((c) => c.id === groupId);
+        return {
+          name: category?.name || "Non catégorisé",
+          value: Math.round(total),
+          color: category?.color || "#94a3b8",
+          icon: category?.icon || "HelpCircle",
+        };
+      })
+      .sort((a, b) => b.value - a.value);
 
     // Top expenses - deduplicate by ID and sort by amount (most negative first)
     const uniqueTransactions = Array.from(
@@ -537,6 +568,7 @@ export default function StatisticsPage() {
     return {
       monthlyChartData,
       categoryChartData,
+      categoryChartDataByParent,
       topExpenses,
       totalIncome,
       totalExpenses,
@@ -793,9 +825,11 @@ export default function StatisticsPage() {
       {/* Analyse par Catégorie */}
       <section className="mb-8">
         <h2 className="text-2xl font-semibold mb-4">Analyse par Catégorie</h2>
-        <div className="grid gap-6 lg:grid-cols-2">
+        <div className="grid gap-6">
           <CategoryPieChart
             data={stats.categoryChartData}
+            dataByParent={stats.categoryChartDataByParent}
+            categories={data.categories}
             formatCurrency={formatCurrency}
           />
           <CategoryBarChart