From 7507c3aefbc021d7bdf1b16c49b16b13383756f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20Falco=CC=81n?= <victoor89@gmail.com>
Date: Sat, 6 Dec 2025 22:05:15 +0100
Subject: [PATCH] Make account balances clickable to open update balance dialog

Add click handlers to balance displays in account chart and list card components, allowing users to quickly update account balances by clicking on the displayed balance amount.
---
 .../js/components/accounts/account-balance-chart.tsx   | 10 ++++++++--
 resources/js/components/accounts/account-list-card.tsx |  8 ++++++--
 resources/js/pages/Accounts/Show.tsx                   |  1 +
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/accounts/account-balance-chart.tsx b/resources/js/components/accounts/account-balance-chart.tsx
index 81e926af..84d3360e 100644
--- a/resources/js/components/accounts/account-balance-chart.tsx
+++ b/resources/js/components/accounts/account-balance-chart.tsx
@@ -39,6 +39,7 @@ interface AccountBalanceChartProps {
     account: Account;
     loading?: boolean;
     refreshKey?: number;
+    onBalanceClick?: () => void;
 }
 
 function formatXAxisLabel(value: string): string {
@@ -117,6 +118,7 @@ export function AccountBalanceChart({
     account,
     loading: initialLoading,
     refreshKey,
+    onBalanceClick,
 }: AccountBalanceChartProps) {
     const [balanceData, setBalanceData] = useState<AccountBalanceData | null>(
         null,
@@ -235,12 +237,16 @@ export function AccountBalanceChart({
                         </CardDescription>
                     </div>
                     <div>
-                        <span className="text-4xl font-semibold tabular-nums">
+                        <button
+                            type="button"
+                            onClick={onBalanceClick}
+                            className="-mr-2 cursor-pointer rounded-md px-2 py-1 text-4xl font-semibold tabular-nums transition-colors hover:bg-muted"
+                        >
                             {formatCurrency(
                                 currentBalance,
                                 account.currency_code,
                             )}
-                        </span>
+                        </button>
                     </div>
                 </div>
             </CardHeader>
diff --git a/resources/js/components/accounts/account-list-card.tsx b/resources/js/components/accounts/account-list-card.tsx
index 6ed2b360..11fc70c1 100644
--- a/resources/js/components/accounts/account-list-card.tsx
+++ b/resources/js/components/accounts/account-list-card.tsx
@@ -95,9 +95,13 @@ export function AccountListCard({
                             </div>
                         </div>
                         <div className="flex flex-col items-end">
-                            <span className="text-2xl font-bold tabular-nums">
+                            <button
+                                type="button"
+                                onClick={() => setUpdateBalanceOpen(true)}
+                                className="-mr-2 cursor-pointer rounded-md px-2 py-1 text-2xl font-bold tabular-nums transition-colors hover:bg-muted"
+                            >
                                 {formatter.format(account.currentBalance / 100)}
-                            </span>
+                            </button>
                             <div
                                 className={`flex items-center gap-1 text-sm ${trendColorClass}`}
                             >
diff --git a/resources/js/pages/Accounts/Show.tsx b/resources/js/pages/Accounts/Show.tsx
index 5d388697..f7de9d43 100644
--- a/resources/js/pages/Accounts/Show.tsx
+++ b/resources/js/pages/Accounts/Show.tsx
@@ -156,6 +156,7 @@ export default function AccountShow({
                 <AccountBalanceChart
                     account={account}
                     refreshKey={chartRefreshKey}
+                    onBalanceClick={() => setUpdateBalanceOpen(true)}
                 />
 
                 {isTransactionalAccount(account) && (