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

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",
                   }}
                 />

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>

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",
                   }}
                 />