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

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 && (

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}