refactor(GeneralLedger)

src/containers/FinancialStatements/GeneralLedger/components.js

@@ -2,12 +2,14 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
-import { FormattedMessage as T } from 'components';
+import { ForceWidth, FormattedMessage as T } from 'components';
 
-import { getForceWidth, getColumnWidth } from 'utils';
+import { getColumnWidth } from 'utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
+import { Align } from 'common';
+
 /**
  * Retrieve the general ledger table columns.
  */
@@ -23,19 +25,11 @@ export function useGeneralLedgerTableColumns() {
         Header: intl.get('date'),
         accessor: (row) => {
           if (row.rowType === 'ACCOUNT_ROW') {
-            return (
-              <span
-                className={'force-width'}
-                style={{ minWidth: getForceWidth(row.date) }}
-              >
-                {row.date}
-              </span>
-            );
+            return <ForceWidth children={row.date} />;
           }
           return row.date;
         },
         className: 'date',
-        // textOverview: true,
         width: 120,
       },
       {
@@ -73,6 +67,7 @@ export function useGeneralLedgerTableColumns() {
           magicSpacing: 10,
         }),
         textOverview: true,
+        align: Align.Right,
       },
       {
         Header: intl.get('debit'),
@@ -83,6 +78,7 @@ export function useGeneralLedgerTableColumns() {
           magicSpacing: 10,
         }),
         textOverview: true,
+        align: Align.Right,
       },
       {
         Header: intl.get('amount'),
@@ -93,6 +89,7 @@ export function useGeneralLedgerTableColumns() {
           magicSpacing: 10,
         }),
         textOverview: true,
+        align: Align.Right,
       },
       {
         Header: intl.get('running_balance'),
@@ -103,6 +100,7 @@ export function useGeneralLedgerTableColumns() {
           magicSpacing: 10,
         }),
         textOverview: true,
+        align: Align.Right,
       },
     ],
     [tableRows],