fix: Trial balance sheet adjusted balance (#273)

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.tsx

@@ -15,7 +15,6 @@ import {
 } from './components';
 
 import withTrialBalanceActions from './withTrialBalanceActions';
-
 import { compose } from '@/utils';
 
 /**

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx

@@ -8,8 +8,7 @@ import { tableRowTypesToClassnames } from '@/utils';
 import { ReportDataTable, FinancialSheet } from '@/components';
 
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
-import { useTrialBalanceTableColumns } from './components';
-
+import { useTrialBalanceSheetTableColumns } from './hooks';
 
 /**
  * Trial Balance sheet data table.
@@ -17,12 +16,12 @@ import { useTrialBalanceTableColumns } from './components';
 export default function TrialBalanceSheetTable({ companyName }) {
   // Trial balance sheet context.
   const {
-    trialBalanceSheet: { tableRows, query },
+    trialBalanceSheet: { table, query },
     isLoading,
   } = useTrialBalanceSheetContext();
 
   // Trial balance sheet table columns.
-  const columns = useTrialBalanceTableColumns();
+  const columns = useTrialBalanceSheetTableColumns();
 
   return (
     <FinancialSheet
@@ -36,7 +35,7 @@ export default function TrialBalanceSheetTable({ companyName }) {
     >
       <TrialBalanceDataTable
         columns={columns}
-        data={tableRows}
+        data={table.rows}
         expandable={true}
         expandToggleColumn={1}
         expandColumnSpace={1}
@@ -59,7 +58,7 @@ const TrialBalanceDataTable = styled(ReportDataTable)`
       .balance.td {
         border-top-color: #000;
       }
-      .tr.row_type--total .td {
+      .tr.row_type--TOTAL .td {
         border-top: 1px solid #bbb;
         font-weight: 500;
         border-bottom: 3px double #000;

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/components.tsx

@@ -1,88 +1,10 @@
 // @ts-nocheck
-import React from 'react';
-import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
-
-import { Align } from '@/constants';
-import { getColumnWidth } from '@/utils';
-import { CellTextSpan } from '@/components/Datatable/Cells';
 import { If, Icon, FormattedMessage as T } from '@/components';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 import { FinancialComputeAlert } from '../FinancialReportPage';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
-/**
- * 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.
- */
-export const useTrialBalanceTableColumns = () => {
-  // Trial balance sheet context.
-  const {
-    trialBalanceSheet: { tableRows },
-  } = useTrialBalanceSheetContext();
-
-  return React.useMemo(
-    () => [
-      {
-        Header: intl.get('account_name'),
-        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
-        className: 'name',
-        width: 350,
-        textOverview: true,
-      },
-      getCreditColumn(tableRows),
-      getDebitColumn(tableRows),
-      getBalanceColumn(tableRows),
-    ],
-    [tableRows],
-  );
-};
-
 /**
  * Trial balance sheet progress loading bar.
  */
@@ -101,7 +23,7 @@ export function TrialBalanceSheetLoadingBar() {
  */
 export function TrialBalanceSheetAlerts() {
   const {
-    trialBalanceSheet: { meta },
+    trialBalanceSheet,
     isLoading,
     refetchSheet,
   } = useTrialBalanceSheetContext();
@@ -115,7 +37,7 @@ export function TrialBalanceSheetAlerts() {
     return null;
   }
   // Can't continue if the cost compute job is not running.
-  if (!meta.is_cost_compute_running) {
+  if (!trialBalanceSheet?.meta.is_cost_compute_running) {
     return null;
   }
 

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/dynamicColumns.ts

@@ -0,0 +1,56 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { Align } from '@/constants';
+import { getColumnWidth } from '@/utils';
+
+const ACCOUNT_NAME_COLUMN_WIDTH = 320;
+const AMOUNT_COLUMNS_MIN_WIDTH = 120;
+const AMOUNT_COLUMNS_MAGIC_SPACING = 10;
+
+const getTableCellValueAccessor = (index: number) => `cells[${index}].value`;
+
+const accountNameAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    Header: column.label,
+    id: column.key,
+    accessor,
+    className: column.key,
+    width: ACCOUNT_NAME_COLUMN_WIDTH,
+  };
+});
+
+const amountAccessor = R.curry((data, column) => {
+  const accessor = getTableCellValueAccessor(column.cell_index);
+
+  return {
+    Header: column.label,
+    id: column.key,
+    accessor,
+    className: column.key,
+    width: getColumnWidth(data, accessor, {
+      magicSpacing: AMOUNT_COLUMNS_MAGIC_SPACING,
+      minWidth: AMOUNT_COLUMNS_MIN_WIDTH,
+    }),
+    align: Align.Right,
+  };
+});
+
+const dynamicColumnMapper = R.curry((data, column) => {
+  const accountNameColumn = accountNameAccessor(data);
+  const creditColumn = amountAccessor(data);
+  const debitColumn = amountAccessor(data);
+  const totalColumn = amountAccessor(data);
+
+  return R.compose(
+    R.when(R.pathEq(['key'], 'account_name'), accountNameColumn),
+    R.when(R.pathEq(['key'], 'credit'), creditColumn),
+    R.when(R.pathEq(['key'], 'debit'), debitColumn),
+    R.when(R.pathEq(['key'], 'total'), totalColumn),
+  )(column);
+});
+
+export const trialBalancesheetDynamicColumns = (columns, data) => {
+  return R.map(dynamicColumnMapper(data), columns);
+};

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/hooks.ts

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import React from 'react';
+import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
+import { trialBalancesheetDynamicColumns } from './dynamicColumns';
+
+/**
+ * Retrieves the trial balance sheet columns.
+ */
+export const useTrialBalanceSheetTableColumns = () => {
+  const {
+    trialBalanceSheet: { table },
+  } = useTrialBalanceSheetContext();
+
+  return React.useMemo(
+    () => trialBalancesheetDynamicColumns(table.columns, table.rows),
+    [table],
+  );
+};