From 1db8aa4643601745d6fda4ef0fa8df32dd1c81d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20Falco=CC=81n?= <victoor89@gmail.com>
Date: Thu, 25 Dec 2025 12:15:35 +0000
Subject: [PATCH] ui(fix): use amount display for chart current balance

---
 .../accounts/account-balance-chart.tsx        | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/accounts/account-balance-chart.tsx b/resources/js/components/accounts/account-balance-chart.tsx
index cc3320bd..324533b3 100644
--- a/resources/js/components/accounts/account-balance-chart.tsx
+++ b/resources/js/components/accounts/account-balance-chart.tsx
@@ -17,6 +17,7 @@ import { Account } from '@/types/account';
 import { format, subMonths } from 'date-fns';
 import { useEffect, useMemo, useState } from 'react';
 import { Bar, BarChart, XAxis } from 'recharts';
+import { AmountDisplay } from '../ui/amount-display';
 
 interface BalanceDataPoint {
     month: string;
@@ -204,10 +205,12 @@ export function AccountBalanceChart({
                             onClick={onBalanceClick}
                             className="-ml-3 cursor-pointer rounded-md px-2 py-1 text-4xl font-semibold tabular-nums transition-colors hover:bg-muted sm:hidden"
                         >
-                            {formatCurrency(
-                                currentBalance,
-                                account.currency_code,
-                            )}
+                            <AmountDisplay
+                                amountInCents={currentBalance}
+                                currencyCode={account.currency_code}
+                                minimumFractionDigits={0}
+                                maximumFractionDigits={0}
+                            />
                         </button>
                         <CardDescription className="flex flex-col gap-1 text-sm">
                             <PercentageTrendIndicator
@@ -232,10 +235,12 @@ export function AccountBalanceChart({
                             onClick={onBalanceClick}
                             className="-mt-1 -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,
-                            )}
+                            <AmountDisplay
+                                amountInCents={currentBalance}
+                                currencyCode={account.currency_code}
+                                minimumFractionDigits={0}
+                                maximumFractionDigits={0}
+                            />
                         </button>
                     </div>
                 </div>