refactor(GeneralLedger)

src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -25,9 +25,6 @@ import { getDefaultGeneralLedgerQuery } from './common';
 function GeneralLedger({
   // #withGeneralLedgerActions
   toggleGeneralLedgerFilterDrawer,
-
-  // #withSettings
-  organizationName,
 }) {
   const [filter, setFilter] = useState({
     ...getDefaultGeneralLedgerQuery(),

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
-
-import { defaultExpanderReducer } from 'utils';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
-import { FinancialSheet } from 'components';
-import DataTable from 'components/DataTable';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
+
+import { FinancialSheet, DataTable } from 'components';
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableFastCell from 'components/Datatable/TableFastCell';
 
@@ -27,11 +27,10 @@ export default function GeneralLedgerTable({ companyName }) {
   const columns = useGeneralLedgerTableColumns();
 
   // Default expanded rows of general ledger table.
-  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 1), [
-    tableRows,
-  ]);
-
-  const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(tableRows, 1),
+    [tableRows],
+  );
 
   return (
     <FinancialSheet
@@ -42,11 +41,13 @@ export default function GeneralLedgerTable({ companyName }) {
       loading={isLoading}
       fullWidth={true}
     >
-      <DataTable
-        noResults={intl.get('this_report_does_not_contain_any_data_between_date_period')}
+      <GeneralLedgerDataTable
+        noResults={intl.get(
+          'this_report_does_not_contain_any_data_between_date_period',
+        )}
         columns={columns}
         data={tableRows}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         expanded={expandedRows}
         virtualizedRows={true}
         fixedItemSize={30}
@@ -55,14 +56,64 @@ export default function GeneralLedgerTable({ companyName }) {
         expandToggleColumn={1}
         sticky={true}
         TableRowsRenderer={TableVirtualizedListRows}
-
         // #TableVirtualizedListRows props.
         vListrowHeight={28}
         vListOverscanRowCount={0}
         TableCellRenderer={TableFastCell}
-
         styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const GeneralLedgerDataTable = styled(DataTable)`
+  .tbody {
+    .tr .td {
+      padding-top: 0.2rem;
+      padding-bottom: 0.2rem;
+    }
+    .tr.is-expanded {
+      .td:not(.date) .cell-inner {
+        opacity: 0;
+      }
+    }
+
+    .tr:not(.no-results) .td {
+      border-left: 1px solid #ececec;
+    }
+    .tr:last-child .td {
+      border-bottom: 1px solid #ececec;
+    }
+
+    .tr.row_type {
+      &--ACCOUNT_ROW {
+        .td {
+          &.date {
+            font-weight: 500;
+          }
+
+          &.name {
+            border-left-color: transparent;
+          }
+        }
+
+        &:not(:first-child).is-expanded .td {
+          border-top: 1px solid #ddd;
+        }
+      }
+
+      &--OPENING_BALANCE,
+      &--CLOSING_BALANCE {
+        .amount {
+          font-weight: 500;
+        }
+      }
+
+      &--CLOSING_BALANCE {
+        .name {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+`;

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

src/containers/FinancialStatements/reducers.js

@@ -73,13 +73,13 @@ export const generalLedgerTableRowsReducer = (accounts) => {
       return {
         name: '',
         code: account.code,
-        rowType: 'ACCOUNT_ROW',
+        row_types: 'ACCOUNT_ROW',
         date: account.name,
         children: [
           {
             ...account.opening_balance,
             name: <T id={'opening_balance'} />,
-            rowType: 'OPENING_BALANCE',
+            row_types: 'OPENING_BALANCE',
             date: moment(account.opening_balance.date).format('DD MMM YYYY'),
           },
           ...account.transactions.map((transaction) => ({
@@ -91,7 +91,7 @@ export const generalLedgerTableRowsReducer = (accounts) => {
           {
             ...account.closing_balance,
             name: <T id={'closing_balance'} />,
-            rowType: 'CLOSING_BALANCE',
+            row_types: 'CLOSING_BALANCE',
             date: moment(account.closing_balance.date).format('DD MMM YYYY'),
           },
         ],

src/style/pages/FinancialStatements/GeneralLedger.scss

@@ -1,93 +0,0 @@
-.financial-sheet {
-  &--general-ledger {
-    .financial-sheet__table {
-
-      .tbody,
-      .thead {
-
-        .tr .td,
-        .tr .th {
-
-          &.credit,
-          &.debit,
-          &.running_balance,
-          &.amount {
-            text-align: right;
-          }
-        }
-      }
-
-      .tbody {
-        .tr .td {
-          padding-top: 0.2rem;
-          padding-bottom: 0.2rem;
-          border-top-color: transparent;
-          border-bottom-color: transparent;
-
-          &.date {
-            >div {
-              display: flex;
-            }
-
-            span.force-width {
-              position: relative;
-            }
-          }
-        }
-
-        .tr:not(.no-results) .td {
-          border-left: 1px solid #ececec;
-        }
-
-        .tr:last-child .td {
-          border-bottom: 1px solid #ececec;
-        }
-
-        .tr {
-          &.is-expanded {
-
-            .td.amount {
-
-              .cell-inner {
-                display: none
-              }
-            }
-          }
-        }
-
-        .tr.row-type {
-
-
-          &--ACCOUNT_ROW {
-            .td {
-              &.date {
-                font-weight: 500;
-              }
-
-              &.name {
-                border-left-color: transparent;
-              }
-            }
-
-            &:not(:first-child).is-expanded .td {
-              border-top: 1px solid #DDD;
-            }
-          }
-
-          &--OPENING_BALANCE,
-          &--CLOSING_BALANCE {
-            .amount {
-              font-weight: 500;
-            }
-          }
-
-          &--CLOSING_BALANCE {
-            .name {
-              font-weight: 500;
-            }
-          }
-        }
-      }
-    }
-  }
-}

src/style/pages/FinancialStatements/TrialBalanceSheet.scss

@@ -1,32 +0,0 @@
-
-.financial-sheet{
-
-  &--trial-balance{
-    min-width: 720px;
-
-    .financial-sheet__table{
-      .thead,
-      .tbody{
-        .tr .td:not(:first-child),
-        .tr .th:not(:first-child) {
-          text-align: right;
-        }
-      }
-      .tbody{
-        .tr .td{
-          border-bottom: 0;
-          padding-top: 0.4rem;
-          padding-bottom: 0.4rem;
-        }
-        .balance.td{
-          border-top-color: #000;
-        }
-        .tr.row_type--total .td{
-          border-top: 1px solid #bbb;
-          font-weight: 500;
-          border-bottom: 3px double #000;
-        }
-      }
-    }
-  }
-}