feat: enhance category breakdown and pie chart components with icon support and improved tooltip formatting

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"
+    />
   );
 }