From 832fc6177e7f8ff337b79170e76e4cd53ea99e95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Tue, 3 Mar 2026 11:24:50 +0000
Subject: [PATCH] feat(dashboard): make top spending categories clickable with
 transaction filter link (#189)

## Summary

- Makes each top spending category in the dashboard card a clickable
link to the transactions page, pre-filtered by that category and the
last 30 days
- Uses the same muted background hover effect (`hover:bg-muted`) as the
account title links on the dashboard for visual consistency
---
 .../dashboard/top-categories-card.tsx         | 24 ++++++++++++++++---
 resources/js/components/ui/progress.tsx       |  2 +-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/dashboard/top-categories-card.tsx b/resources/js/components/dashboard/top-categories-card.tsx
index 406a85c9..2768af43 100644
--- a/resources/js/components/dashboard/top-categories-card.tsx
+++ b/resources/js/components/dashboard/top-categories-card.tsx
@@ -1,3 +1,4 @@
+import { index as transactionsIndex } from '@/actions/App/Http/Controllers/TransactionController';
 import { AmountDisplay } from '@/components/ui/amount-display';
 import {
     Card,
@@ -12,7 +13,8 @@ import { cn } from '@/lib/utils';
 import { SharedData } from '@/types';
 import { Category, getCategoryColorClasses } from '@/types/category';
 import { __ } from '@/utils/i18n';
-import { usePage } from '@inertiajs/react';
+import { Link, usePage } from '@inertiajs/react';
+import { format, subDays } from 'date-fns';
 import * as Icons from 'lucide-react';
 import { LucideIcon } from 'lucide-react';
 import { PercentageTrendIndicator } from './percentage-trend-indicator';
@@ -60,6 +62,10 @@ export function TopCategoriesCard({
         );
     }
 
+    const now = new Date();
+    const dateFrom = format(subDays(now, 30), 'yyyy-MM-dd');
+    const dateTo = format(now, 'yyyy-MM-dd');
+
     return (
         <Card className="w-full">
             <CardHeader className="gap-2">
@@ -91,8 +97,20 @@ export function TopCategoriesCard({
                             index,
                         );
 
+                        const categoryUrl = transactionsIndex({
+                            query: {
+                                category_ids: item.category.id,
+                                date_from: dateFrom,
+                                date_to: dateTo,
+                            },
+                        }).url;
+
                         return (
-                            <div key={item.category.id} className="space-y-2">
+                            <Link
+                                key={item.category.id}
+                                href={categoryUrl}
+                                className="-mx-1.5 my-1.5 block space-y-2 rounded-md px-1.5 py-1 transition-colors hover:bg-muted group"
+                            >
                                 <div className="flex min-w-0 items-center gap-2">
                                     <div
                                         className={cn([
@@ -134,7 +152,7 @@ export function TopCategoriesCard({
                                     className="h-2"
                                     indicatorColor={chartColor}
                                 />
-                            </div>
+                            </Link>
                         );
                     })}
                     {categories.length === 0 && (
diff --git a/resources/js/components/ui/progress.tsx b/resources/js/components/ui/progress.tsx
index 6219ad82..7dd92dde 100644
--- a/resources/js/components/ui/progress.tsx
+++ b/resources/js/components/ui/progress.tsx
@@ -16,7 +16,7 @@ const Progress = React.forwardRef<
     <ProgressPrimitive.Root
         ref={ref}
         className={cn(
-            'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+            'relative h-4 w-full overflow-hidden rounded-full bg-secondary group-hover:bg-muted-foreground/10 transition-colors',
             className,
         )}
         {...props}