diff --git a/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactionTable/AccountTransactionTable.tsx b/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactionTable/AccountTransactionTable.tsx index e5e96a544..26f29370a 100644 --- a/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactionTable/AccountTransactionTable.tsx +++ b/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactionTable/AccountTransactionTable.tsx @@ -14,11 +14,11 @@ import { useTranslation } from 'react-i18next'; import { Maybe } from 'src/graphql/types.generated'; import { useLocale } from 'src/hooks/useLocale'; import { currencyFormat, dateFormatShort } from 'src/lib/intlFormat'; -import { formatNumber } from '../../AccountSummary/AccountSummaryHelper'; import { FinancialAccountContext, FinancialAccountType, } from '../../Context/FinancialAccountsContext'; +import { formatTransactionAmount } from '../AccountTransactionsHelper'; import { FinancialAccountEntriesQuery } from '../financialAccountTransactions.generated'; const StyledDataGrid = styled(DataGrid)(({ theme }) => ({ @@ -223,7 +223,7 @@ export const AccountTransactionTable: React.FC = ({ }} > {currencyFormat( - formatNumber(row.expenseAmount), + formatTransactionAmount(row.expenseAmount, true), row.currency, locale, )} @@ -240,7 +240,11 @@ export const AccountTransactionTable: React.FC = ({ fontWeight: isBalanceRow(row.id) ? 'bold' : 'inherit', }} > - {currencyFormat(formatNumber(row.incomeAmount), row.currency, locale)} + {currencyFormat( + formatTransactionAmount(row.incomeAmount), + row.currency, + locale, + )} ); } @@ -321,6 +325,7 @@ export const AccountTransactionTable: React.FC = ({ amount={debits} currency={currency} locale={locale} + isDebit /> = ({ interface TotalTableRowProps { title: string; amount?: string | null; + isDebit?: boolean; currency?: string | null; locale?: string; } @@ -345,6 +351,7 @@ interface TotalTableRowProps { const TotalTableRow: React.FC = ({ title, amount, + isDebit = false, currency, locale, }) => ( @@ -358,7 +365,11 @@ const TotalTableRow: React.FC = ({ {amount && currency && locale && - currencyFormat(formatNumber(amount), currency, locale)} + currencyFormat( + formatTransactionAmount(amount, isDebit), + currency, + locale, + )} ); diff --git a/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.test.tsx b/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.test.tsx index ffd4362fc..6dfec3a26 100644 --- a/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.test.tsx +++ b/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.test.tsx @@ -145,13 +145,13 @@ describe('Financial Account Transactions', () => { // Header expect(getByText('8/31/2024')).toBeInTheDocument(); expect(getByText('Closing Balance')).toBeInTheDocument(); - expect(getByText('UAH 280,414')).toBeInTheDocument(); + expect(getByText('UAH 280,413.99')).toBeInTheDocument(); // Row 1 expect(getByText('8/9/2024')).toBeInTheDocument(); expect(getByText('description3')).toBeInTheDocument(); expect(getByText('code3')).toBeInTheDocument(); - expect(getByText('UAH 7,048')).toBeInTheDocument(); + expect(getByText('UAH 7,047.28')).toBeInTheDocument(); // Row 2 expect(getByText('8/8/2024')).toBeInTheDocument(); @@ -163,22 +163,22 @@ describe('Financial Account Transactions', () => { expect(getByText('8/7/2024')).toBeInTheDocument(); expect(getByText('description2')).toBeInTheDocument(); expect(getByText('code2')).toBeInTheDocument(); - expect(getByText('UAH 37')).toBeInTheDocument(); + expect(getByText('UAH 36.20')).toBeInTheDocument(); // Footer expect(getByText('8/1/2024')).toBeInTheDocument(); expect(getByText('Opening Balance')).toBeInTheDocument(); - expect(getByText('UAH 202,240')).toBeInTheDocument(); + expect(getByText('UAH 202,239.12')).toBeInTheDocument(); // Totals expect(getByText('Income:')).toBeInTheDocument(); - expect(getByText('UAH 307,519')).toBeInTheDocument(); + expect(getByText('UAH 307,518.87')).toBeInTheDocument(); expect(getByText('Expenses:')).toBeInTheDocument(); expect(getByText('UAH 229,344')).toBeInTheDocument(); expect(getByText('Differences:')).toBeInTheDocument(); - expect(getByText('UAH 78,175')).toBeInTheDocument(); + expect(getByText('UAH 78,174.87')).toBeInTheDocument(); }); it('should render closing and opening dates correctly when using filtered dates', async () => { diff --git a/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.tsx b/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.tsx index 7c6f6271f..a2b70c3a3 100644 --- a/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.tsx +++ b/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.tsx @@ -19,6 +19,7 @@ import { AccountTransactionTable, FinancialAccountEntryTypeEnum, } from './AccountTransactionTable/AccountTransactionTable'; +import { formatTransactionAmount } from './AccountTransactionsHelper'; import { useFinancialAccountEntriesQuery } from './financialAccountTransactions.generated'; const Container = styled(Box)(() => ({ @@ -26,25 +27,6 @@ const Container = styled(Box)(() => ({ overflowY: 'auto', })); -/** - * Converts the "amount" string to a number to remove ".0" - * If the value is 0 or isExpense is true, it returns the value as is. - * Otherwise, it removes the '-' character if present, or prepends it if absent. - */ -const formatAmountForExport = ( - amount?: string | null, - isExpense?: boolean, -): number => { - if (!amount) { - return 0; - } - - if (amount === '0' || isExpense) { - return Number(amount); - } - return -Number(amount); -}; - const formatDateRange = (startDate?: DateTime, endDate?: DateTime) => { const minDate = startDate ?? DateTime.local().minus({ months: 1 }).plus({ days: 1 }); @@ -144,10 +126,10 @@ export const AccountTransactions: React.FC = () => { entry.description ?? '', entry.category?.name ?? entry.category?.code ?? '', entry.type === FinancialAccountEntryTypeEnum.Debit - ? `${formatAmountForExport(entry.amount, true)}` + ? `${formatTransactionAmount(entry.amount, true)}` : '', entry.type === FinancialAccountEntryTypeEnum.Credit - ? `${formatAmountForExport(entry.amount)}` + ? `${formatTransactionAmount(entry.amount)}` : '', ], ]; diff --git a/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactionsHelper.ts b/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactionsHelper.ts new file mode 100644 index 000000000..fa7409dea --- /dev/null +++ b/src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactionsHelper.ts @@ -0,0 +1,18 @@ +/** + * Converts the "amount" string to a number to remove ".0" + * If the value is 0 or isExpense is true, it returns the value as is. + * Otherwise, it removes the '-' character if present, or prepends it if absent. + */ +export const formatTransactionAmount = ( + amount?: string | null, + isExpense?: boolean, +): number => { + if (!amount) { + return 0; + } + + if (amount === '0' || isExpense) { + return Number(amount); + } + return -Number(amount); +};