Making the transactions show 2 decimal places.

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<TableProps> = ({
           }}
         >
           {currencyFormat(
-            formatNumber(row.expenseAmount),
+            formatTransactionAmount(row.expenseAmount, true),
             row.currency,
             locale,
           )}
@@ -240,7 +240,11 @@ export const AccountTransactionTable: React.FC<TableProps> = ({
             fontWeight: isBalanceRow(row.id) ? 'bold' : 'inherit',
           }}
         >
-          {currencyFormat(formatNumber(row.incomeAmount), row.currency, locale)}
+          {currencyFormat(
+            formatTransactionAmount(row.incomeAmount),
+            row.currency,
+            locale,
+          )}
         </Typography>
       );
     }
@@ -321,6 +325,7 @@ export const AccountTransactionTable: React.FC<TableProps> = ({
             amount={debits}
             currency={currency}
             locale={locale}
+            isDebit
           />
 
           <TotalTableRow
@@ -338,13 +343,15 @@ export const AccountTransactionTable: React.FC<TableProps> = ({
 interface TotalTableRowProps {
   title: string;
   amount?: string | null;
+  isDebit?: boolean;
   currency?: string | null;
   locale?: string;
 }
 
 const TotalTableRow: React.FC<TotalTableRowProps> = ({
   title,
   amount,
+  isDebit = false,
   currency,
   locale,
 }) => (
@@ -358,7 +365,11 @@ const TotalTableRow: React.FC<TotalTableRowProps> = ({
       {amount &&
         currency &&
         locale &&
-        currencyFormat(formatNumber(amount), currency, locale)}
+        currencyFormat(
+          formatTransactionAmount(amount, isDebit),
+          currency,
+          locale,
+        )}
     </TableCell>
   </TableRow>
 );

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 () => {

src/components/Reports/FinancialAccountsReport/AccountTransactions/AccountTransactions.tsx

@@ -19,32 +19,14 @@ import {
   AccountTransactionTable,
   FinancialAccountEntryTypeEnum,
 } from './AccountTransactionTable/AccountTransactionTable';
+import { formatTransactionAmount } from './AccountTransactionsHelper';
 import { useFinancialAccountEntriesQuery } from './financialAccountTransactions.generated';
 
 const Container = styled(Box)(() => ({
   height: `calc(100vh - ${headerHeight})`,
   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)}`
               : '',
           ],
         ];

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);
+};