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.

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>

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}`}
                             >

resources/js/pages/Accounts/Show.tsx

@@ -156,6 +156,7 @@ export default function AccountShow({
                 <AccountBalanceChart
                     account={account}
                     refreshKey={chartRefreshKey}
+                    onBalanceClick={() => setUpdateBalanceOpen(true)}
                 />
 
                 {isTransactionalAccount(account) && (