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

feat: Tabular number of all money columns

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

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

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
 });
 
 /**

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],

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

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

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(

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

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

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
 });
 
 /**

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],

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),
       },
       {

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',

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),
       },
       {

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),
       },
       {