feat: implement clickable category links in charts and lists; handle uncategorized transactions in URL parameters

components/statistics/category-pie-chart.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { CategoryIcon } from "@/components/ui/category-icon";
@@ -13,7 +14,8 @@ export interface CategoryChartData {
   value: number;
   color: string;
   icon: string;
-  [key: string]: string | number;
+  categoryId?: string | null; // null for "Non catégorisé"
+  [key: string]: string | number | null | undefined;
 }
 
 interface CategoryPieChartProps {
@@ -162,24 +164,32 @@ export function CategoryPieChart({
                 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>
-                ))}
+                {currentData.map((item, index) => {
+                  const href =
+                    item.categoryId === null || item.categoryId === undefined
+                      ? "/transactions?includeUncategorized=true"
+                      : `/transactions?categoryIds=${item.categoryId}`;
+
+                  return (
+                    <Link
+                      key={`legend-${index}`}
+                      href={href}
+                      className="flex items-center gap-2 text-sm hover:opacity-80 transition-opacity cursor-pointer"
+                    >
+                      <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>
+                    </Link>
+                  );
+                })}
               </div>
             </div>
           </div>