From fc483d05730c733f9b648645155a74aa6e1e46b6 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 28 Nov 2025 13:56:58 +0100
Subject: [PATCH] feat: enhance category breakdown and pie chart components
 with icon support and improved tooltip formatting

---
 app/statistics/page.tsx                      |  1 +
 components/dashboard/category-breakdown.tsx  | 81 ++++---------------
 components/statistics/balance-line-chart.tsx |  4 +-
 components/statistics/category-pie-chart.tsx | 85 ++++++++++++++++----
 components/statistics/monthly-chart.tsx      |  4 +-
 5 files changed, 92 insertions(+), 83 deletions(-)

diff --git a/app/statistics/page.tsx b/app/statistics/page.tsx
index d9d0c8b..4017a2c 100644
--- a/app/statistics/page.tsx
+++ b/app/statistics/page.tsx
@@ -97,6 +97,7 @@ export default function StatisticsPage() {
           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)
diff --git a/components/dashboard/category-breakdown.tsx b/components/dashboard/category-breakdown.tsx
index de41275..d637123 100644
--- a/components/dashboard/category-breakdown.tsx
+++ b/components/dashboard/category-breakdown.tsx
@@ -1,15 +1,10 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import type { BankingData } from "@/lib/types";
 import {
-  PieChart,
-  Pie,
-  Cell,
-  ResponsiveContainer,
-  Legend,
-  Tooltip,
-} from "recharts";
+  CategoryPieChart,
+  type CategoryChartData,
+} from "@/components/statistics/category-pie-chart";
+import type { BankingData } from "@/lib/types";
 
 interface CategoryBreakdownProps {
   data: BankingData;
@@ -22,7 +17,7 @@ export function CategoryBreakdown({ data }: CategoryBreakdownProps) {
   const thisMonthStr = thisMonth.toISOString().slice(0, 7);
 
   const monthExpenses = data.transactions.filter(
-    (t) => t.date.startsWith(thisMonthStr) && t.amount < 0,
+    (t) => t.date.startsWith(thisMonthStr) && t.amount < 0
   );
 
   const categoryTotals = new Map<string, number>();
@@ -33,13 +28,14 @@ export function CategoryBreakdown({ data }: CategoryBreakdownProps) {
     categoryTotals.set(catId, current + Math.abs(t.amount));
   });
 
-  const chartData = Array.from(categoryTotals.entries())
+  const chartData: CategoryChartData[] = Array.from(categoryTotals.entries())
     .map(([categoryId, total]) => {
       const category = data.categories.find((c) => c.id === categoryId);
       return {
         name: category?.name || "Non catégorisé",
         value: total,
         color: category?.color || "#94a3b8",
+        icon: category?.icon || "HelpCircle",
       };
     })
     .sort((a, b) => b.value - a.value)
@@ -52,60 +48,15 @@ export function CategoryBreakdown({ data }: CategoryBreakdownProps) {
     }).format(value);
   };
 
-  if (chartData.length === 0) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Dépenses par catégorie</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col items-center justify-center py-8 text-center">
-            <p className="text-muted-foreground">Pas de données ce mois-ci</p>
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Dépenses par catégorie</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="h-[250px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <PieChart>
-              <Pie
-                data={chartData}
-                cx="50%"
-                cy="50%"
-                innerRadius={50}
-                outerRadius={80}
-                paddingAngle={2}
-                dataKey="value"
-              >
-                {chartData.map((entry, index) => (
-                  <Cell key={`cell-${index}`} fill={entry.color} />
-                ))}
-              </Pie>
-              <Tooltip
-                formatter={(value: number) => formatCurrency(value)}
-                contentStyle={{
-                  backgroundColor: "hsl(var(--card))",
-                  border: "1px solid hsl(var(--border))",
-                  borderRadius: "8px",
-                }}
-              />
-              <Legend
-                formatter={(value) => (
-                  <span className="text-sm text-foreground">{value}</span>
-                )}
-              />
-            </PieChart>
-          </ResponsiveContainer>
-        </div>
-      </CardContent>
-    </Card>
+    <CategoryPieChart
+      data={chartData}
+      formatCurrency={formatCurrency}
+      title="Dépenses par catégorie"
+      height={250}
+      innerRadius={50}
+      outerRadius={80}
+      emptyMessage="Pas de données ce mois-ci"
+    />
   );
 }
diff --git a/components/statistics/balance-line-chart.tsx b/components/statistics/balance-line-chart.tsx
index b3bfe7f..ef30e4e 100644
--- a/components/statistics/balance-line-chart.tsx
+++ b/components/statistics/balance-line-chart.tsx
@@ -45,8 +45,8 @@ export function BalanceLineChart({
                 <Tooltip
                   formatter={(value: number) => formatCurrency(value)}
                   contentStyle={{
-                    backgroundColor: "hsl(var(--card))",
-                    border: "1px solid hsl(var(--border))",
+                    backgroundColor: "var(--card)",
+                    border: "1px solid var(--border)",
                     borderRadius: "8px",
                   }}
                 />
diff --git a/components/statistics/category-pie-chart.tsx b/components/statistics/category-pie-chart.tsx
index e472e7f..421655d 100644
--- a/components/statistics/category-pie-chart.tsx
+++ b/components/statistics/category-pie-chart.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CategoryIcon } from "@/components/ui/category-icon";
 import {
   PieChart,
   Pie,
@@ -10,37 +11,49 @@ import {
   Legend,
 } from "recharts";
 
-interface CategoryChartData {
+export interface CategoryChartData {
   name: string;
   value: number;
   color: string;
+  icon: string;
+  [key: string]: string | number;
 }
 
 interface CategoryPieChartProps {
   data: CategoryChartData[];
   formatCurrency: (amount: number) => string;
+  title?: string;
+  height?: number;
+  innerRadius?: number;
+  outerRadius?: number;
+  emptyMessage?: string;
 }
 
 export function CategoryPieChart({
   data,
   formatCurrency,
+  title = "Répartition par catégorie",
+  height = 300,
+  innerRadius = 60,
+  outerRadius = 100,
+  emptyMessage = "Pas de données pour cette période",
 }: CategoryPieChartProps) {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Répartition par catégorie</CardTitle>
+        <CardTitle>{title}</CardTitle>
       </CardHeader>
       <CardContent>
         {data.length > 0 ? (
-          <div className="h-[300px]">
+          <div style={{ height }}>
             <ResponsiveContainer width="100%" height="100%">
               <PieChart>
                 <Pie
                   data={data}
                   cx="50%"
                   cy="50%"
-                  innerRadius={60}
-                  outerRadius={100}
+                  innerRadius={innerRadius}
+                  outerRadius={outerRadius}
                   paddingAngle={2}
                   dataKey="value"
                 >
@@ -49,24 +62,68 @@ export function CategoryPieChart({
                   ))}
                 </Pie>
                 <Tooltip
-                  formatter={(value: number) => formatCurrency(value)}
-                  contentStyle={{
-                    backgroundColor: "hsl(var(--card))",
-                    border: "1px solid hsl(var(--border))",
-                    borderRadius: "8px",
+                  content={({ active, payload }) => {
+                    if (!active || !payload?.length) return null;
+                    const item = payload[0].payload as CategoryChartData;
+                    return (
+                      <div
+                        className="px-3 py-2 rounded-lg shadow-lg"
+                        style={{
+                          backgroundColor: "var(--card)",
+                          border: "1px solid var(--border)",
+                        }}
+                      >
+                        <div className="flex items-center gap-2">
+                          <CategoryIcon
+                            icon={item.icon}
+                            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
-                  formatter={(value) => (
-                    <span className="text-sm text-foreground">{value}</span>
+                  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"}
+                              color={item?.color || "#94a3b8"}
+                              size={14}
+                            />
+                            <span className="text-foreground">{entry.value}</span>
+                          </div>
+                        );
+                      })}
+                    </div>
                   )}
                 />
               </PieChart>
             </ResponsiveContainer>
           </div>
         ) : (
-          <div className="h-[300px] flex items-center justify-center text-muted-foreground">
-            Pas de données pour cette période
+          <div
+            style={{ height }}
+            className="flex items-center justify-center text-muted-foreground"
+          >
+            {emptyMessage}
           </div>
         )}
       </CardContent>
diff --git a/components/statistics/monthly-chart.tsx b/components/statistics/monthly-chart.tsx
index 9020e64..f5132d5 100644
--- a/components/statistics/monthly-chart.tsx
+++ b/components/statistics/monthly-chart.tsx
@@ -41,8 +41,8 @@ export function MonthlyChart({ data, formatCurrency }: MonthlyChartProps) {
                 <Tooltip
                   formatter={(value: number) => formatCurrency(value)}
                   contentStyle={{
-                    backgroundColor: "hsl(var(--card))",
-                    border: "1px solid hsl(var(--border))",
+                    backgroundColor: "var(--card)",
+                    border: "1px solid var(--border)",
                     borderRadius: "8px",
                   }}
                 />