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)
+      .sort((a, b) => b.value - a.value);
-      .slice(0, 8);
+
+    // 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

components/statistics/category-pie-chart.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import { CategoryIcon } from "@/components/ui/category-icon";
 import {
   PieChart,
@@ -10,6 +12,8 @@ import {
   ResponsiveContainer,
   Legend,
 } from "recharts";
+import { Layers, List, ChevronDown, ChevronUp } from "lucide-react";
+import type { Category } from "@/lib/types";
 
 export interface CategoryChartData {
   name: string;
@@ -21,6 +25,8 @@ export interface CategoryChartData {
 
 interface CategoryPieChartProps {
   data: CategoryChartData[];
+  dataByParent?: CategoryChartData[];
+  categories?: Category[];
   formatCurrency: (amount: number) => string;
   title?: string;
   height?: number;
@@ -31,6 +37,8 @@ interface CategoryPieChartProps {
 
 export function CategoryPieChart({
   data,
+  dataByParent,
+  categories = [],
   formatCurrency,
   title = "Répartition par catégorie",
   height = 300,
@@ -38,85 +46,143 @@ export function CategoryPieChart({
   outerRadius = 100,
   emptyMessage = "Pas de données pour cette période",
 }: CategoryPieChartProps) {
+  const [groupByParent, setGroupByParent] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const hasParentData = dataByParent && dataByParent.length > 0;
+  const baseData = (groupByParent && hasParentData) ? dataByParent : data;
+  
+  // Limit to top 8 by default, show all if expanded
+  const maxItems = 8;
+  const currentData = isExpanded ? baseData : baseData.slice(0, maxItems);
+
   return (
     <Card>
-      <CardHeader>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle>{title}</CardTitle>
+        <div className="flex gap-2">
+          {hasParentData && (
+            <Button
+              variant={groupByParent ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setGroupByParent(!groupByParent)}
+              title={groupByParent ? "Afficher toutes les catégories" : "Regrouper par catégories parentes"}
+            >
+              {groupByParent ? (
+                <>
+                  <List className="w-4 h-4 mr-1" />
+                  Par catégorie
+                </>
+              ) : (
+                <>
+                  <Layers className="w-4 h-4 mr-1" />
+                  Par parent
+                </>
+              )}
+            </Button>
+          )}
+          {baseData.length > maxItems && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsExpanded(!isExpanded)}
+            >
+              {isExpanded ? (
+                <>
+                  <ChevronUp className="w-4 h-4 mr-1" />
+                  Réduire
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="w-4 h-4 mr-1" />
+                  Voir tout ({baseData.length})
+                </>
+              )}
+            </Button>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
-        {data.length > 0 ? (
+        {currentData.length > 0 ? (
-          <div style={{ height }}>
+          <div className="flex flex-col lg:flex-row gap-6">
-            <ResponsiveContainer width="100%" height="100%">
+            {/* Graphique */}
-              <PieChart>
+            <div className="flex-1" style={{ minHeight: height }}>
-                <Pie
+              <ResponsiveContainer width="100%" height={height}>
-                  data={data}
+                <PieChart>
-                  cx="50%"
+                  <Pie
-                  cy="50%"
+                    data={currentData}
-                  innerRadius={innerRadius}
+                    cx="50%"
-                  outerRadius={outerRadius}
+                    cy="50%"
-                  paddingAngle={2}
+                    innerRadius={innerRadius}
-                  dataKey="value"
+                    outerRadius={outerRadius}
-                >
+                    paddingAngle={2}
-                  {data.map((entry, index) => (
+                    dataKey="value"
-                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  >
-                  ))}
+                    {currentData.map((entry, index) => (
-                </Pie>
+                      <Cell key={`cell-${index}`} fill={entry.color} />
-                <Tooltip
+                    ))}
-                  content={({ active, payload }) => {
+                  </Pie>
-                    if (!active || !payload?.length) return null;
+                  <Tooltip
-                    const item = payload[0].payload as CategoryChartData;
+                    content={({ active, payload }) => {
-                    return (
+                      if (!active || !payload?.length) return null;
-                      <div
+                      const item = payload[0].payload as CategoryChartData;
-                        className="px-3 py-2 rounded-lg shadow-lg"
+                      return (
-                        style={{
+                        <div
-                          backgroundColor: "var(--card)",
+                          className="px-3 py-2 rounded-lg shadow-lg"
-                          border: "1px solid var(--border)",
+                          style={{
-                        }}
+                            backgroundColor: "var(--card)",
-                      >
+                            border: "1px solid var(--border)",
-                        <div className="flex items-center gap-2">
+                          }}
-                          <CategoryIcon
+                        >
-                            icon={item.icon}
+                          <div className="flex items-center gap-2">
-                            color={item.color}
-                            size={16}
-                          />
-                          <span
-                            className="font-medium"
-                            style={{ color: item.color }}
-                          >
-                            {item.name}
-                          </span>
-                        </div>
-                        <div className="text-foreground font-semibold mt-1">
-                          {formatCurrency(item.value)}
-                        </div>
-                      </div>
-                    );
-                  }}
-                />
-                <Legend
-                  content={({ payload }) => (
-                    <div className="flex flex-wrap justify-center gap-x-4 gap-y-1 mt-2">
-                      {payload?.map((entry, index) => {
-                        const item = data.find((d) => d.name === entry.value);
-                        return (
-                          <div
-                            key={`legend-${index}`}
-                            className="flex items-center gap-1.5 text-sm"
-                          >
                             <CategoryIcon
-                              icon={item?.icon || "HelpCircle"}
+                              icon={item.icon}
-                              color={item?.color || "#94a3b8"}
+                              color={item.color}
-                              size={14}
+                              size={16}
                             />
-                            <span className="text-foreground">{entry.value}</span>
+                            <span
+                              className="font-medium"
+                              style={{ color: item.color }}
+                            >
+                              {item.name}
+                            </span>
                           </div>
-                        );
+                          <div className="text-foreground font-semibold mt-1">
-                      })}
+                            {formatCurrency(item.value)}
-                    </div>
+                          </div>
-                  )}
+                        </div>
-                />
+                      );
-              </PieChart>
+                    }}
-            </ResponsiveContainer>
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+
+            {/* Légende */}
+            <div className="lg:w-[280px] lg:min-w-[280px]">
+              <div className="text-sm font-medium mb-3 text-muted-foreground">
+                Légende
+              </div>
+              <div className="max-h-[300px] overflow-y-auto overflow-x-hidden pr-2 space-y-2">
+                {currentData.map((item, index) => (
+                  <div
+                    key={`legend-${index}`}
+                    className="flex items-center gap-2 text-sm"
+                  >
+                    <CategoryIcon
+                      icon={item.icon}
+                      color={item.color}
+                      size={16}
+                    />
+                    <span className="text-foreground flex-1 min-w-0 truncate">
+                      {item.name}
+                    </span>
+                    <span className="text-foreground font-semibold tabular-nums whitespace-nowrap">
+                      {formatCurrency(item.value)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
         ) : (
           <div