From 970e85814e108b995711926e4c80e5580fa2736d 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 10:47:37 +0000
Subject: [PATCH] feat(budgets): make budget title clickable with muted hover
 effect (#186)

## Summary

- Wraps the budget name in `BudgetListCard` with an Inertia `<Link>`
that navigates to the budget detail page
- Applies the same `-my-1 -ml-1.5 ... rounded-md px-1.5 py-1
transition-colors hover:bg-muted` hover effect used on dashboard account
card titles
- The existing "View Details" button in the card footer is unchanged
---
 .../components/budgets/budget-list-card.tsx   |  9 ++++++-
 .../budgets/budget-period-navigation.tsx      |  2 +-
 resources/js/pages/budgets/show.tsx           | 26 +------------------
 3 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/resources/js/components/budgets/budget-list-card.tsx b/resources/js/components/budgets/budget-list-card.tsx
index 7a705948..1f93c24a 100644
--- a/resources/js/components/budgets/budget-list-card.tsx
+++ b/resources/js/components/budgets/budget-list-card.tsx
@@ -84,7 +84,14 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
             <CardHeader>
                 <div className="flex items-start justify-between">
                     <div className="space-y-1">
-                        <CardTitle className="text-xl">{budget.name}</CardTitle>
+                        <CardTitle className="text-xl">
+                            <Link
+                                href={show({ budget: budget.id }).url}
+                                className="-my-1 -ml-1.5 inline-flex items-center rounded-md px-1.5 py-1 transition-colors hover:bg-muted"
+                            >
+                                {budget.name}
+                            </Link>
+                        </CardTitle>
                         <CardDescription className="flex items-center gap-2">
                             <Calendar className="h-3 w-3" />
                             {periodLabel}
diff --git a/resources/js/components/budgets/budget-period-navigation.tsx b/resources/js/components/budgets/budget-period-navigation.tsx
index 33890ee4..c5a0c9ab 100644
--- a/resources/js/components/budgets/budget-period-navigation.tsx
+++ b/resources/js/components/budgets/budget-period-navigation.tsx
@@ -67,7 +67,7 @@ export function BudgetPeriodNavigation({
 
             <button
                 onClick={handleCurrent}
-                className="border border-border bg-background px-3 py-1.5 text-center text-sm font-medium hover:bg-accent focus-visible:relative focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+                className="border border-border bg-background px-3 py-1.5 text-center text-sm font-medium text-nowrap hover:bg-accent focus-visible:relative focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
             >
                 {periodLabel}
             </button>
diff --git a/resources/js/pages/budgets/show.tsx b/resources/js/pages/budgets/show.tsx
index 4c2b2c93..11d778af 100644
--- a/resources/js/pages/budgets/show.tsx
+++ b/resources/js/pages/budgets/show.tsx
@@ -13,13 +13,11 @@ import {
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useLocale } from '@/hooks/use-locale';
 import AppSidebarLayout from '@/layouts/app/app-sidebar-layout';
 import { BreadcrumbItem } from '@/types';
 import { Account, Bank } from '@/types/account';
-import { Budget, BudgetPeriod, getBudgetPeriodTypeLabel } from '@/types/budget';
+import { Budget, BudgetPeriod } from '@/types/budget';
 import { Category } from '@/types/category';
-import { formatDate } from '@/utils/date';
 import { __ } from '@/utils/i18n';
 import { Head, router } from '@inertiajs/react';
 import { ChevronDown, Loader2 } from 'lucide-react';
@@ -46,7 +44,6 @@ export default function BudgetShow({
     banks,
     currencyCode,
 }: Props) {
-    const locale = useLocale();
     const [editOpen, setEditOpen] = useState(false);
     const [deleteOpen, setDeleteOpen] = useState(false);
 
@@ -82,10 +79,6 @@ export default function BudgetShow({
         return null;
     }, [budget]);
 
-    const periodTypeLabel = useMemo(() => {
-        return getBudgetPeriodTypeLabel(budget.period_type);
-    }, [budget.period_type]);
-
     const periodTransactions = useMemo(() => {
         return (
             currentPeriod.budget_transactions
@@ -94,16 +87,6 @@ export default function BudgetShow({
         );
     }, [currentPeriod]);
 
-    const periodDescriptionLabel = useMemo(() => {
-        const start = formatDate(
-            currentPeriod.start_date,
-            "MMM d, ''yy",
-            locale,
-        );
-        const end = formatDate(currentPeriod.end_date, "MMM d, ''yy", locale);
-        return `${start} - ${end}`;
-    }, [currentPeriod, locale]);
-
     return (
         <AppSidebarLayout breadcrumbs={breadcrumbs}>
             <Head title={budget.name} />
@@ -129,13 +112,6 @@ export default function BudgetShow({
                                             </span>
                                         )}
                                     </div>
-                                    <span className="opacity-25">/</span>
-                                    <div className="inline">
-                                        <span>{periodDescriptionLabel} </span>
-                                        <span className="opacity-50">
-                                            ({__(periodTypeLabel)})
-                                        </span>
-                                    </div>
                                 </div>
                             }
                         />