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

This commit is contained in:
Julien Froidefond
2025-12-20 11:07:35 +01:00
parent d61d9181c7
commit 4f7a80de1c
5 changed files with 113 additions and 41 deletions

View File

@@ -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 { Badge } from "@/components/ui/badge";
@@ -53,24 +54,29 @@ export function TopExpensesList({
{new Date(expense.date).toLocaleDateString("fr-FR")}
</span>
{category && (
<Badge
variant="secondary"
className="text-[10px] md:text-xs px-1.5 md:px-2 py-0.5 inline-flex items-center gap-1 shrink-0"
style={{
backgroundColor: `${category.color}20`,
color: category.color,
borderColor: `${category.color}30`,
}}
<Link
href={`/transactions?categoryIds=${category.id}`}
className="inline-block"
>
<CategoryIcon
icon={category.icon}
color={category.color}
size={isMobile ? 8 : 10}
/>
<span className="truncate max-w-[120px] md:max-w-none">
{category.name}
</span>
</Badge>
<Badge
variant="secondary"
className="text-[10px] md:text-xs px-1.5 md:px-2 py-0.5 inline-flex items-center gap-1 shrink-0 hover:opacity-80 transition-opacity cursor-pointer"
style={{
backgroundColor: `${category.color}20`,
color: category.color,
borderColor: `${category.color}30`,
}}
>
<CategoryIcon
icon={category.icon}
color={category.color}
size={isMobile ? 8 : 10}
/>
<span className="truncate max-w-[120px] md:max-w-none">
{category.name}
</span>
</Badge>
</Link>
)}
</div>
</div>