refactor(TrialBalanceSheet).

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { DataTable, FinancialSheet } from 'components';
 
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 import { useTrialBalanceTableColumns } from './components';
 
+import { tableRowTypesToClassnames } from 'utils';
 import { TableStyle } from 'common';
 
 /**
@@ -21,20 +23,6 @@ export default function TrialBalanceSheetTable({ companyName }) {
   // Trial balance sheet table columns.
   const columns = useTrialBalanceTableColumns();
 
-  const rowClassNames = (row) => {
-    const { original } = row;
-    const rowTypes = Array.isArray(original.rowType)
-      ? original.rowType
-      : [original.rowType];
-
-    return {
-      ...rowTypes.reduce((acc, rowType) => {
-        acc[`row_type--${rowType}`] = rowType;
-        return acc;
-      }, {}),
-    };
-  };
-
   return (
     <FinancialSheet
       companyName={companyName}
@@ -45,16 +33,36 @@ export default function TrialBalanceSheetTable({ companyName }) {
       loading={isLoading}
       basis={'cash'}
     >
-      <DataTable
+      <TrialBalanceDataTable
         columns={columns}
         data={tableRows}
         expandable={true}
         expandToggleColumn={1}
         expandColumnSpace={1}
         sticky={true}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const TrialBalanceDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.36rem;
+        padding-bottom: 0.36rem;
+      }
+      .balance.td {
+        border-top-color: #000;
+      }
+      .tr.row_type--total .td {
+        border-top: 1px solid #bbb;
+        font-weight: 500;
+        border-bottom: 3px double #000;
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/TrialBalanceSheet/components.js

@@ -1,12 +1,61 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
+
 import { getColumnWidth } from 'utils';
 import { If, Icon, FormattedMessage as T } from 'components';
 import { CellTextSpan } from 'components/Datatable/Cells';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
+import { Align } from 'common';
+
+/**
+ * Retrieves the credit column.
+ */
+const getCreditColumn = (data) => {
+  const width = getColumnWidth(data, `credit`, { minWidth: 140 });
+
+  return {
+    Header: intl.get('credit'),
+    Cell: CellTextSpan,
+    accessor: 'formatted_credit',
+    className: 'credit',
+    width,
+    textOverview: true,
+    align: Align.Right,
+  };
+};
+
+/**
+ * Retrieves the debit column.
+ */
+const getDebitColumn = (data) => {
+  return {
+    Header: intl.get('debit'),
+    Cell: CellTextSpan,
+    accessor: 'formatted_debit',
+    width: getColumnWidth(data, `debit`, { minWidth: 140 }),
+    textOverview: true,
+    align: Align.Right,
+  };
+};
+
+/**
+ * Retrieves the balance column.
+ */
+const getBalanceColumn = (data) => {
+  return {
+    Header: intl.get('balance'),
+    Cell: CellTextSpan,
+    accessor: 'formatted_balance',
+    className: 'balance',
+    width: getColumnWidth(data, `balance`, { minWidth: 140 }),
+    textOverview: true,
+    align: Align.Right,
+  };
+};
+
 /**
  * Retrieve trial balance sheet table columns.
  */
@@ -25,33 +74,9 @@ export const useTrialBalanceTableColumns = () => {
         width: 350,
         textOverview: true,
       },
-      {
-        Header: intl.get('credit'),
-        Cell: CellTextSpan,
-        accessor: 'formatted_credit',
-        className: 'credit',
-        width: getColumnWidth(tableRows, `credit`, {
-          minWidth: 80,
-        }),
-        textOverview: true,
-      },
-      {
-        Header: intl.get('debit'),
-        Cell: CellTextSpan,
-        accessor: 'formatted_debit',
-        width: getColumnWidth(tableRows, `debit`, { minWidth: 80 }),
-        textOverview: true,
-      },
-      {
-        Header: intl.get('balance'),
-        Cell: CellTextSpan,
-        accessor: 'formatted_balance',
-        className: 'balance',
-        width: getColumnWidth(tableRows, `balance`, {
-          minWidth: 80,
-        }),
-        textOverview: true,
-      },
+      getCreditColumn(tableRows),
+      getDebitColumn(tableRows),
+      getBalanceColumn(tableRows),
     ],
     [tableRows],
   );

src/containers/FinancialStatements/reducers.js

@@ -13,7 +13,7 @@ export const trialBalanceSheetReducer = (sheet) => {
   }
   if (sheet.total) {
     results.push({
-      rowType: 'total',
+      row_types: 'total',
       ...sheet.total,
     });
   }

src/utils/index.js

@@ -908,7 +908,7 @@ export const tableRowTypesToClassnames = ({ original }) => {
   const rowTypes = _.castArray(original.row_types);
   const rowId = original.id;
 
-  const rowTypesClsx = rowTypes.map((t) => `row_type--${t}`);
+  const rowTypesClsx = rowTypes.filter((t) => t).map((t) => `row_type--${t}`);
   const rowIdClsx = `row-id--${original.id}`;
 
   return clsx(rowTypesClsx, { [`${rowIdClsx}`]: rowId });