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

components/statistics/category-bar-chart.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { CategoryIcon } from "@/components/ui/category-icon";
 import {
@@ -29,6 +30,48 @@ export function CategoryBarChart({
 }: CategoryBarChartProps) {
   const displayData = data.slice(0, maxItems).reverse(); // Reverse pour avoir le plus grand en haut
 
+  // Custom tick component for clickable labels
+  const CustomYAxisTick = ({ x, y, payload }: any) => {
+    const categoryName = payload.value;
+    const item = displayData.find((d) => d.name === categoryName);
+    
+    if (!item) {
+      return (
+        <text
+          x={x}
+          y={y}
+          fill="var(--muted-foreground)"
+          fontSize={12}
+          textAnchor="end"
+          dominantBaseline="middle"
+        >
+          {categoryName}
+        </text>
+      );
+    }
+
+    const href =
+      item.categoryId === null || item.categoryId === undefined
+        ? "/transactions?includeUncategorized=true"
+        : `/transactions?categoryIds=${item.categoryId}`;
+
+    return (
+      <Link href={href}>
+        <text
+          x={x}
+          y={y}
+          fill="var(--muted-foreground)"
+          fontSize={12}
+          className="hover:opacity-80 transition-opacity cursor-pointer"
+          textAnchor="end"
+          dominantBaseline="middle"
+        >
+          {categoryName}
+        </text>
+      </Link>
+    );
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -60,11 +103,7 @@ export function CategoryBarChart({
                   dataKey="name"
                   className="text-xs"
                   width={90}
-                  tick={{ fill: "var(--muted-foreground)" }}
-                  tickFormatter={(value) => {
-                    const item = displayData.find((d) => d.name === value);
-                    return item ? value : "";
-                  }}
+                  tick={CustomYAxisTick}
                 />
                 <Tooltip
                   content={({ active, payload }) => {