Merge pull request #659 from bigcapitalhq/format-money-table-columns

feat: Tabular number of all money columns
2026-02-19 06:10:31 +00:00 · 2024-09-04 18:48:38 +02:00
parent c032a5db16 fe5cd5a8ea
commit 3795322a65
15 changed files with 53 additions and 12 deletions
--- a/packages/webapp/src/containers/FinancialStatements/AgingSummary/dynamicColumns.ts
+++ b/packages/webapp/src/containers/FinancialStatements/AgingSummary/dynamicColumns.ts
@@ -1,5 +1,4 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
 import * as R from 'ramda';
 import { getColumnWidth } from '@/utils';
 import { Align } from '@/constants';
@@ -25,6 +24,7 @@ const currentAccessor = R.curry((data, column) => {
    className: column.id,
    width: getColumnWidth(data, accessor, { minWidth: 120 }),
    align: Align.Right,
+    money: true,
  };
 });

@@ -38,6 +38,7 @@ const totalAccessor = R.curry((data, column) => {
    className: column.key,
    width: getColumnWidth(data, accessor, { minWidth: 120 }),
    align: Align.Right,
+    money: true,
  };
 });

@@ -51,6 +52,7 @@ const agingPeriodAccessor = R.curry((data, column) => {
    className: column.key,
    width: getColumnWidth(data, accessor, { minWidth: 120 }),
    align: Align.Right,
+    money: true,
  };
 });

--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dynamicColumns.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/dynamicColumns.tsx
@@ -3,7 +3,6 @@ import * as R from 'ramda';
 import { isEmpty } from 'lodash';

 import { Align } from '@/constants';
-import { CellTextSpan } from '@/components/Datatable/Cells';
 import { getColumnWidth } from '@/utils';

 const getTableCellValueAccessor = (index) => `cells[${index}].value`;
@@ -12,12 +11,11 @@ const getReportColWidth = (data, accessor, headerText) => {
  return getColumnWidth(
    data,
    accessor,
-    { magicSpacing: 10, minWidth: 100 },
+    { magicSpacing: 12, minWidth: 100 },
    headerText,
  );
 };

-
 /**
 * Account name column mapper.
 */
@@ -77,6 +75,7 @@ const dateRangeMapper = R.curry((data, column) => {
    key: column.key,
    disableSortBy: true,
    textOverview: true,
+    money: true,
    align: isDateColumnHasColumns ? Align.Center : Align.Right,
  };
  return R.compose(
@@ -104,9 +103,9 @@ const totalMapper = R.curry((data, column) => {
    Header: column.label,
    accessor,
    textOverview: true,
-    Cell: CellTextSpan,
    width,
    disableSortBy: true,
+    money: true,
    align: hasChildren ? Align.Center : Align.Right,
  };
  return R.compose(
@@ -129,6 +128,7 @@ const percentageOfColumnAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true,
  };
 });

@@ -147,6 +147,7 @@ const percentageOfRowAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true,
  };
 });

@@ -165,6 +166,7 @@ const previousYearAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true,
  };
 });

@@ -183,6 +185,7 @@ const previousYearChangeAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true,
  };
 });

@@ -201,6 +204,7 @@ const previousYearPercentageAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true,
  };
 });

@@ -219,6 +223,7 @@ const previousPeriodAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true,
  };
 });

@@ -237,6 +242,7 @@ const previousPeriodChangeAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true,
  };
 });

@@ -255,6 +261,7 @@ const previousPeriodPercentageAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true,
  };
 });

--- a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.tsx
@@ -30,13 +30,14 @@ const dateRangeMapper = (data, index, column) => ({
  key: column.key,
  accessor: `cells[${index}].value`,
  width: getColumnWidth(data, `cells.${index}.value`, {
-    magicSpacing: 10,
+    magicSpacing: 12,
    minWidth: 100,
  }),
  className: `date-period ${column.key}`,
  disableSortBy: true,
  textOverview: true,
  align: Align.Right,
+  money: true
 });

 /**
@@ -50,11 +51,12 @@ const totalMapper = (data, index, column) => ({
  textOverview: true,
  Cell: CellTextSpan,
  width: getColumnWidth(data, `cells[${index}].value`, {
-    magicSpacing: 10,
+    magicSpacing: 12,
    minWidth: 100,
  }),
  disableSortBy: true,
  align: Align.Right,
+  money: true
 });

 /**
--- a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/components.tsx
@@ -61,9 +61,10 @@ export const useCustomersTransactionsColumns = () => {
        textOverview: true,
        width: getColumnWidth(tableRows, 'cells[5].value', {
          minWidth: 100,
-          magicSpacing: 10,
+          magicSpacing: 12,
        }),
        align: Align.Right,
+        money: true,
      },
      {
        Header: intl.get('debit'),
@@ -72,9 +73,10 @@ export const useCustomersTransactionsColumns = () => {
        textOverview: true,
        width: getColumnWidth(tableRows, 'cells[6].value', {
          minWidth: 100,
-          magicSpacing: 10,
+          magicSpacing: 12,
        }),
        align: Align.Right,
+        money: true,
      },
      {
        Header: intl.get('running_balance'),
@@ -83,9 +85,10 @@ export const useCustomersTransactionsColumns = () => {
        textOverview: true,
        width: getColumnWidth(tableRows, 'cells[7].value', {
          minWidth: 120,
-          magicSpacing: 10,
+          magicSpacing: 12,
        }),
        align: Align.Right,
+        money: true,
      },
    ],
    [tableRows],
--- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/utils.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/utils.tsx
@@ -29,6 +29,7 @@ const numericColumn = R.curry((data, index, column) => ({
  }),
  disableSortBy: true,
  align: Align.Right,
+  money: true,
 }));

 const columnsMapper = R.curry((data, index, column) => ({
--- a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dynamicColumns.ts
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/dynamicColumns.ts
@@ -41,6 +41,7 @@ const numericColumnAccessor = R.curry((data, column) => {
  return {
    ...column,
    align: Align.Right,
+    money: true,
    width,
  };
 });
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/dynamicColumns.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/dynamicColumns.tsx
@@ -3,7 +3,6 @@ import * as R from 'ramda';
 import { isEmpty } from 'lodash';

 import { Align } from '@/constants';
-import { CellTextSpan } from '@/components/Datatable/Cells';
 import { getColumnWidth } from '@/utils';

 const getTableCellValueAccessor = (index) => `cells[${index}].value`;
@@ -34,6 +33,7 @@ const percentageOfIncomeAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true
  };
 });

@@ -52,6 +52,7 @@ const percentageOfExpenseAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true
  };
 });

@@ -70,6 +71,7 @@ const percentageOfColumnAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true
  };
 });

@@ -88,6 +90,7 @@ const percentageOfRowAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true
  };
 });

@@ -106,6 +109,7 @@ const previousYearAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true
  };
 });

@@ -124,6 +128,7 @@ const previousYearChangeAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true
  };
 });

@@ -142,6 +147,7 @@ const previousYearPercentageAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true
  };
 });

@@ -160,6 +166,7 @@ const previousPeriodAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true
  };
 });

@@ -178,6 +185,7 @@ const previousPeriodChangeAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true
  };
 });

@@ -196,6 +204,7 @@ const previousPeriodPercentageAccessor = R.curry((data, column) => {
    align: Align.Right,
    disableSortBy: true,
    textOverview: true,
+    money: true
  };
 });

@@ -274,10 +283,10 @@ const totalColumn = R.curry((data, column) => {
    Header: column.label,
    accessor,
    textOverview: true,
-    Cell: CellTextSpan,
    width,
    disableSortBy: true,
    align: hasChildren ? Align.Center : Align.Right,
+    money: true
  };
 });

@@ -338,6 +347,7 @@ const dateRangeColumn = R.curry((data, column) => {
    disableSortBy: true,
    textOverview: true,
    align: isDateColumnHasColumns ? Align.Center : Align.Right,
+    money: true
  };
  return R.compose(
    R.when(
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dynamicColumns.ts
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/dynamicColumns.ts
@@ -41,6 +41,7 @@ const numericColumnAccessor = R.curry((data, column) => {
    ...column,
    align: Align.Right,
    width,
+    money: true
  };
 });

--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/dynamicColumns.ts
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/dynamicColumns.ts
@@ -41,6 +41,7 @@ const numericColumnAccessor = R.curry((data, column) => {
    ...column,
    align: Align.Right,
    width,
+    money: true
  };
 });

--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/components.tsx
@@ -49,6 +49,7 @@ const percentageColumnAccessor = () => ({
  width: 140,
  textOverview: true,
  align: Align.Right,
+  money: true
 });

 /**
@@ -61,6 +62,7 @@ const totalColumnAccessor = () => ({
  width: 140,
  textOverview: true,
  align: Align.Right,
+  money: true
 });

 /**
--- a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/components.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/components.tsx
@@ -19,6 +19,7 @@ import {
  useVendorsTransactionsCsvExport,
  useVendorsTransactionsXlsxExport,
 } from '@/hooks/query';
+import { Align } from '@/constants';

 /**
 * Retrieve vendors transactions columns.
@@ -63,6 +64,8 @@ export const useVendorsTransactionsColumns = () => {
          minWidth: 100,
          magicSpacing: 10,
        }),
+        money: true,
+        align: Align.Right,
      },
      {
        Header: intl.get('debit'),
@@ -73,6 +76,8 @@ export const useVendorsTransactionsColumns = () => {
          minWidth: 100,
          magicSpacing: 10,
        }),
+        money: true,
+        align: Align.Right,
      },
      {
        Header: intl.get('running_balance'),
@@ -83,6 +88,8 @@ export const useVendorsTransactionsColumns = () => {
          minWidth: 120,
          magicSpacing: 10,
        }),
+        money: true,
+        align: Align.Right,
      },
    ],
    [table],
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.tsx
@@ -154,6 +154,7 @@ export function useVendorsCreditNoteTableColumns() {
        clickable: true,
        textOverview: true,
        disableSortBy: true,
+        money: true,
        className: clsx(CLASSES.FONT_BOLD),
      },
      {
--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsLanding/components.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsLanding/components.tsx
@@ -117,6 +117,7 @@ export function usePaymentMadesTableColumns() {
        className: 'amount',
        align: 'right',
        clickable: true,
+        money: true,
      },
      {
        id: 'reference_no',
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/components.tsx
@@ -113,6 +113,7 @@ export function usePaymentReceivesColumns() {
        align: 'right',
        clickable: true,
        textOverview: true,
+        money: true,
        className: clsx(CLASSES.FONT_BOLD),
      },
      {
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
@@ -160,6 +160,7 @@ export function useReceiptsTableColumns() {
        align: 'right',
        clickable: true,
        textOverview: true,
+        money: true,
        className: clsx(CLASSES.FONT_BOLD),
      },
      {