From 38cf672c8e9ba24e8f8f956e2b19a2c05c98064a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Fri, 10 Apr 2026 14:41:36 +0100
Subject: [PATCH] fix: default account charts to user currency (#271)

## Summary
- default account charts to the user's currency when a currency toggle
is available
- reverse the account chart currency toggle order so the user currency
appears first
- add a focused frontend test covering the toggle order and selected
state

## Testing
- npm test -- chart-currency-toggle
---
 .../accounts/account-balance-chart.tsx        |  3 +--
 .../charts/chart-currency-toggle.test.tsx     | 24 +++++++++++++++++++
 .../charts/chart-currency-toggle.tsx          | 14 +++++------
 3 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 resources/js/components/charts/chart-currency-toggle.test.tsx

diff --git a/resources/js/components/accounts/account-balance-chart.tsx b/resources/js/components/accounts/account-balance-chart.tsx
index 420163aa..9021cd71 100644
--- a/resources/js/components/accounts/account-balance-chart.tsx
+++ b/resources/js/components/accounts/account-balance-chart.tsx
@@ -359,8 +359,7 @@ export function AccountBalanceChart({
     const isLoan = account.type === 'loan';
     const isRealEstate = isRealEstateAccount(account);
     const [granularity, setGranularity] = useState<ChartGranularity>('monthly');
-    const [currencyMode, setCurrencyMode] =
-        useState<ChartCurrencyMode>('account');
+    const [currencyMode, setCurrencyMode] = useState<ChartCurrencyMode>('user');
     const [balanceData, setBalanceData] = useState<AccountBalanceData | null>(
         null,
     );
diff --git a/resources/js/components/charts/chart-currency-toggle.test.tsx b/resources/js/components/charts/chart-currency-toggle.test.tsx
new file mode 100644
index 00000000..8c63305d
--- /dev/null
+++ b/resources/js/components/charts/chart-currency-toggle.test.tsx
@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ChartCurrencyToggle } from './chart-currency-toggle';
+
+describe('ChartCurrencyToggle', () => {
+    it('renders user currency before account currency', () => {
+        render(
+            <ChartCurrencyToggle
+                value="user"
+                onValueChange={vi.fn()}
+                userCurrencyCode="USD"
+                accountCurrencyCode="EUR"
+                showTooltip={false}
+            />,
+        );
+
+        const buttons = screen.getAllByRole('radio');
+
+        expect(buttons).toHaveLength(2);
+        expect(buttons[0]).toHaveTextContent('USD');
+        expect(buttons[1]).toHaveTextContent('EUR');
+        expect(buttons[0]).toHaveAttribute('data-state', 'on');
+    });
+});
diff --git a/resources/js/components/charts/chart-currency-toggle.tsx b/resources/js/components/charts/chart-currency-toggle.tsx
index 882f94b2..fe5d21e9 100644
--- a/resources/js/components/charts/chart-currency-toggle.tsx
+++ b/resources/js/components/charts/chart-currency-toggle.tsx
@@ -31,13 +31,6 @@ export function ChartCurrencyToggle({
         label: string;
         tooltip: string;
     }> = [
-        {
-            mode: 'account',
-            label: accountCurrencyCode,
-            tooltip: __('Show in account currency (:currency)', {
-                currency: accountCurrencyCode,
-            }),
-        },
         {
             mode: 'user',
             label: userCurrencyCode,
@@ -45,6 +38,13 @@ export function ChartCurrencyToggle({
                 currency: userCurrencyCode,
             }),
         },
+        {
+            mode: 'account',
+            label: accountCurrencyCode,
+            tooltip: __('Show in account currency (:currency)', {
+                currency: accountCurrencyCode,
+            }),
+        },
     ];
 
     return (