- fix: store children accounts with Redux store.

- fix: store expense payment date with transactions. - fix: Total assets, liabilities and equity on balance sheet. - tweaks: dashboard content and sidebar style. - fix: reset form with contact list on journal entry form. - feat: Add hints to filter accounts in financial statements.
2026-02-18 05:40:31 +00:00 · 2020-07-12 12:31:12 +02:00
parent 4bd8f1628d
commit 9d9c7c1568
60 changed files with 1685 additions and 929 deletions
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
@@ -1,21 +1,16 @@
-import React, { useMemo, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import { Row, Col, Visible } from 'react-grid-system';
-import {
-  Button,
-  FormGroup,
-  MenuItem,
-} from "@blueprintjs/core";
+import { FormGroup } from '@blueprintjs/core';
 import moment from 'moment';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';

-import Icon from 'components/Icon';
-import SelectList from 'components/SelectList';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import FinancialAccountsFilter from '../FinancialAccountsFilter';

 import withBalanceSheet from './withBalanceSheetDetail';
 import withBalanceSheetActions from './withBalanceSheetActions';
@@ -29,7 +24,7 @@ function BalanceSheetHeader({
  refresh,

  // #withBalanceSheetActions
-  refreshBalanceSheet
+  refreshBalanceSheet,
 }) {
  const { formatMessage } = useIntl();

@@ -40,10 +35,17 @@ function BalanceSheetHeader({
      basis: 'cash',
      from_date: moment(pageFilter.from_date).toDate(),
      to_date: moment(pageFilter.to_date).toDate(),
+      none_zero: false,
    },
    validationSchema: Yup.object().shape({
-      from_date: Yup.date().required().label(formatMessage({id:'from_data'})),
-      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
+      from_date: Yup.date()
+        .required()
+        .label(formatMessage({ id: 'from_data' })),
+      to_date: Yup.date()
+        .min(Yup.ref('from_date'))
+        .required()
+        .label(formatMessage({ id: 'to_date' })),
+      none_zero: Yup.boolean(),
    }),
    onSubmit: (values, actions) => {
      onSubmitFilter(values);
@@ -52,67 +54,68 @@ function BalanceSheetHeader({
  });

  // Handle item select of `display columns by` field.
-  const onItemSelectDisplayColumns = useCallback((item) => {
-    formik.setFieldValue('display_columns_type', item.type);
-    formik.setFieldValue('display_columns_by', item.by);
-  }, [formik]);
+  const onItemSelectDisplayColumns = useCallback(
+    (item) => {
+      formik.setFieldValue('display_columns_type', item.type);
+      formik.setFieldValue('display_columns_by', item.by);
+    },
+    [formik],
+  );

-  const filterAccountsOptions = useMemo(() => [
-    { key: '', name: formatMessage({ id: 'accounts_with_zero_balance' }) },
-    { key: 'all-trans', name: formatMessage({ id: 'all_transactions' }) },
-  ], [formatMessage]);
+  const handleAccountingBasisChange = useCallback(
+    (value) => {
+      formik.setFieldValue('basis', value);
+    },
+    [formik],
+  );

-  const filterAccountRenderer = useCallback((item, { handleClick, modifiers, query }) => {
-    return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
-  }, []);
-
-  const handleAccountingBasisChange = useCallback((value) => {
-    formik.setFieldValue('basis', value);
-  }, [formik]);
-
-  // Handle submit filter submit button.
  useEffect(() => {
    if (refresh) {
-      formik.submitForm();  
+      formik.submitForm();
      refreshBalanceSheet(false);
    }
  }, [refresh]);

+  const handleAccountsFilterSelect = (filterType) => {
+    const noneZero = filterType.key === 'without-zero-balance' ? true : false;
+    formik.setFieldValue('none_zero', noneZero);
+  };
+
  return (
    <FinancialStatementHeader show={show}>
      <Row>
        <FinancialStatementDateRange formik={formik} />

-        <Visible xl><Col width={'100%'} /></Visible>
+        <Visible xl>
+          <Col width={'100%'} />
+        </Visible>

        <Col width={260} offset={10}>
-          <SelectDisplayColumnsBy
-            onItemSelect={onItemSelectDisplayColumns} />
+          <SelectDisplayColumnsBy onItemSelect={onItemSelectDisplayColumns} />
        </Col>

        <Col width={260}>
          <FormGroup
            label={<T id={'filter_accounts'} />}
            className="form-group--select-list bp3-fill"
-            inline={false}>
-
-            <SelectList
-              items={filterAccountsOptions}
-              itemRenderer={filterAccountRenderer}
-              onItemSelect={onItemSelectDisplayColumns}
-              popoverProps={{ minimal: true }}
-              filterable={false} />
+            inline={false}
+          >
+            <FinancialAccountsFilter
+              initialSelectedItem={'all-accounts'}
+              onItemSelect={handleAccountsFilterSelect}
+            />
          </FormGroup>
        </Col>

        <Col width={260}>
          <RadiosAccountingBasis
            selectedValue={formik.values.basis}
-            onChange={handleAccountingBasisChange} />
+            onChange={handleAccountingBasisChange}
+          />
        </Col>
      </Row>
    </FinancialStatementHeader>
-  )
+  );
 }

 export default compose(
@@ -120,4 +123,4 @@ export default compose(
    refresh: balanceSheetRefresh,
  })),
  withBalanceSheetActions,
-)(BalanceSheetHeader);
+)(BalanceSheetHeader);
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
@@ -1,6 +1,7 @@
-import React, { useMemo, useEffect, useState, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { connect } from 'react-redux';
 import { useIntl } from 'react-intl';
+import classNames from 'classnames';

 import Money from 'components/Money';
 import FinancialSheet from 'components/FinancialSheet';
@@ -18,6 +19,7 @@ function BalanceSheetTable({

  // #withBalanceSheetDetail
  balanceSheetAccounts,
+  balanceSheetTableRows,
  balanceSheetColumns,
  balanceSheetQuery,
  balanceSheetLoading,
@@ -33,13 +35,13 @@ function BalanceSheetTable({
        Header: formatMessage({ id: 'account_name' }),
        accessor: 'name',
        className: 'account_name',
-        width: 100,
+        width: 120,
      },
      {
-        Header: formatMessage({ id: 'account_code' }),
+        Header: formatMessage({ id: 'code' }),
        accessor: 'code',
        className: 'code',
-        width: 80,
+        width: 60,
      },
      ...(balanceSheetQuery.display_columns_type === 'total'
        ? [
@@ -67,18 +69,21 @@ function BalanceSheetTable({
        ? balanceSheetColumns.map((column, index) => ({
            id: `date_period_${index}`,
            Header: column,
-            accessor: (row) => {
-              if (row.total_periods && row.total_periods[index]) {
-                const amount = row.total_periods[index].formatted_amount;
+            accessor: `total_periods[${index}]`,
+            Cell: ({ cell }) => {
+              const { original } = cell.row;
+              if (original.total_periods && original.total_periods[index]) {
+                const amount = original.total_periods[index].formatted_amount;
                return <Money amount={amount} currency={'USD'} />;
              }
              return '';
            },
+            className: classNames('total-period', `total-periods-${index}`),
            width: 80,
          }))
        : []),
    ],
-    [balanceSheetQuery, balanceSheetColumns, formatMessage],
+  [balanceSheetQuery, balanceSheetColumns, formatMessage],
  );

  const handleFetchData = useCallback(() => {
@@ -87,10 +92,18 @@ function BalanceSheetTable({

  // Calculates the default expanded rows of balance sheet table.
  const expandedRows = useMemo(
-    () => defaultExpanderReducer(balanceSheetAccounts, 1),
-    [balanceSheetAccounts],
+    () => defaultExpanderReducer(balanceSheetTableRows, 3),
+    [balanceSheetTableRows],
  );

+  const rowClassNames = (row) => {
+    const { original } = row;
+    console.log(row);
+    return {
+      [`row_type--${original.row_type}`]: original.row_type,
+    };
+  };
+
  return (
    <FinancialSheet
      name="balance-sheet"
@@ -104,12 +117,15 @@ function BalanceSheetTable({
      <DataTable
        className="bigcapital-datatable--financial-report"
        columns={columns}
-        data={balanceSheetAccounts}
+        data={balanceSheetTableRows}
+        rowClassNames={rowClassNames}
        onFetchData={handleFetchData}
        noInitialFetch={true}
        expanded={expandedRows}
-        expandSubRows={true}
+        expandable={true}
+        expandToggleColumn={1}
        sticky={true}
+        expandColumnSpace={0.8}
      />
    </FinancialSheet>
  );
@@ -132,11 +148,13 @@ export default compose(
  withBalanceSheetDetail(
    ({
      balanceSheetAccounts,
+      balanceSheetTableRows,
      balanceSheetColumns,
      balanceSheetQuery,
      balanceSheetLoading,
    }) => ({
      balanceSheetAccounts,
+      balanceSheetTableRows,
      balanceSheetColumns,
      balanceSheetQuery,
      balanceSheetLoading,
--- a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
@@ -4,6 +4,7 @@ import {
  getFinancialSheetAccounts,
  getFinancialSheetColumns,
  getFinancialSheetQuery,
+  getFinancialSheetTableRows,
 } from 'store/financialStatement/financialStatements.selectors';


@@ -13,6 +14,7 @@ export default (mapState) => {
    const mapped = {
      balanceSheet: getFinancialSheet(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
      balanceSheetAccounts: getFinancialSheetAccounts(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
+      balanceSheetTableRows: getFinancialSheetTableRows(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
      balanceSheetColumns: getFinancialSheetColumns(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
      balanceSheetQuery: getFinancialSheetQuery(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
      balanceSheetLoading: state.financialStatements.balanceSheet.loading,
--- a/client/src/containers/FinancialStatements/FinancialAccountsFilter.js
+++ b/client/src/containers/FinancialStatements/FinancialAccountsFilter.js
@@ -0,0 +1,73 @@
+import React, { useMemo, useCallback } from 'react';
+
+import {
+  PopoverInteractionKind,
+  Tooltip,
+  MenuItem,
+  Position,
+} from '@blueprintjs/core';
+import { useIntl } from 'react-intl';
+import { ListSelect, MODIFIER } from 'components';
+
+export default function FinancialAccountsFilter({
+  ...restProps
+}) {
+  const { formatMessage } = useIntl();
+  const filterAccountsOptions = useMemo(
+    () => [
+      {
+        key: 'all-accounts',
+        name: formatMessage({ id: 'all_accounts' }),
+        hint: formatMessage({ id: 'all_accounts_including_with_zero_balance' }),
+      },
+      {
+        key: 'without-zero-balance',
+        name: formatMessage({ id: 'accounts_without_zero_balance' }),
+        hint: formatMessage({ id: 'include_accounts_and_exclude_zero_balance' }),
+      },
+      {
+        key: 'with-transactions',
+        name: formatMessage({ id: 'accounts_with_transactions' }),
+        hint: formatMessage({ id: 'include_accounts_once_has_transactions_on_given_date_period' }),
+      },
+    ],
+    [formatMessage],
+  );
+  const SUBMENU_POPOVER_MODIFIERS = {
+    flip: { boundariesElement: 'viewport', padding: 20 },
+    offset: { offset: '0, 10' },
+    preventOverflow: { boundariesElement: 'viewport', padding: 40 },
+  };
+
+  const filterAccountRenderer = useCallback(
+    (item, { handleClick, modifiers, query }) => {
+      return (
+        <Tooltip
+          interactionKind={PopoverInteractionKind.HOVER}
+          position={Position.RIGHT_TOP}
+          content={item.hint}
+          modifiers={SUBMENU_POPOVER_MODIFIERS}
+          inline={true}
+          minimal={true}
+          className={MODIFIER.SELECT_LIST_TOOLTIP_ITEMS}
+        >
+          <MenuItem text={item.name} key={item.key} onClick={handleClick} />
+        </Tooltip>
+      );
+    },
+    [],
+  );
+
+  return (
+    <ListSelect
+      items={filterAccountsOptions}
+      itemRenderer={filterAccountRenderer}
+      popoverProps={{ minimal: true, }}
+      filterable={false}
+      selectedItemProp={'key'}
+      labelProp={'name'}
+      // className={}
+      {...restProps}
+    />
+  );
+}
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
@@ -64,7 +64,6 @@ function GeneralLedger({
      to_date: moment(filter.to_date).format('YYYY-MM-DD'),
    };
    setFilter(parsedFilter);
-    fetchSheet.refetch({ force: true });
  }, [setFilter]);

  const handleFilterChanged = () => { };
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
@@ -52,8 +52,8 @@ function GeneralLedgerHeader({
  });

  const onAccountSelected = useCallback((selectedAccounts) => {
-    
-  }, []);
+    formik.setFieldValue('accounts_ids', Object.keys(selectedAccounts));
+  }, [formik.setFieldValue]);

  const handleAccountingBasisChange = useCallback(
    (value) => {
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
@@ -53,7 +53,7 @@ function GeneralLedgerTable({
      ];

      return TYPES.indexOf(row.rowType) !== -1
-        ? moment(row.date).format('DD-MM-YYYY')
+        ? moment(row.date).format('DD MMM YYYY')
        : '';
    },
    [moment, ROW_TYPE],
@@ -83,36 +83,43 @@ function GeneralLedgerTable({
        Header: formatMessage({ id: 'account_name' }),
        accessor: accountNameAccessor,
        className: 'name',
+        width: 225,
      },
      {
        Header: formatMessage({ id: 'date' }),
        accessor: dateAccessor,
        className: 'date',
+        width: 115,
      },
      {
        Header: formatMessage({ id: 'transaction_type' }),
        accessor: 'referenceType',
        className: 'transaction_type',
+        width: 145,
      },
      {
        Header: formatMessage({ id: 'trans_num' }),
        accessor: referenceLink,
        className: 'transaction_number',
+        width: 110,
      },
      {
        Header: formatMessage({ id: 'description' }),
        accessor: 'note',
        className: 'description',
+        width: 145,
      },
      {
        Header: formatMessage({ id: 'amount' }),
        Cell: amountCell,
        className: 'amount',
+        width: 150,
      },
      {
        Header: formatMessage({ id: 'balance' }),
        Cell: amountCell,
        className: 'balance',
+        width: 150,
      },
    ],
    [],
@@ -133,11 +140,13 @@ function GeneralLedgerTable({
  return (
    <FinancialSheet
      companyName={companyName}
-      sheetType={formatMessage({ id: 'general_ledger_sheet' })}
+      // sheetType={formatMessage({ id: 'general_ledger_sheet' })}
      fromDate={generalLedgerQuery.from_date}
      toDate={generalLedgerQuery.to_date}
      name="general-ledger"
      loading={generalLedgerSheetLoading}
+      minimal={true}
+      fullWidth={true}
    >
      <DataTable
        className="bigcapital-datatable--financial-report"
--- a/client/src/containers/FinancialStatements/Journal/JournalTable.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalTable.js
@@ -37,7 +37,7 @@ function JournalSheetTable({
      {
        Header: formatMessage({ id: 'date' }),
        accessor: (r) =>
-          rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), [
+          rowTypeFilter(r.rowType, moment(r.date).format('YYYY MMM DD'), [
            'first_entry',
          ]),
        className: 'date',
@@ -64,7 +64,7 @@ function JournalSheetTable({
      {
        Header: formatMessage({ id: 'acc_code' }),
        accessor: 'account.code',
-        width: 120,
+        width: 95,
        className: 'account_code',
      },
      {
@@ -106,11 +106,13 @@ function JournalSheetTable({
  return (
    <FinancialSheet
      companyName={companyName}
-      sheetType={formatMessage({ id: 'journal_sheet' })}
+      // sheetType={formatMessage({ id: 'journal_sheet' })}
      fromDate={journalSheetQuery.from_date}
      toDate={journalSheetQuery.to_date}
      name="journal"
      loading={journalSheetLoading}
+      minimal={true}
+      fullWidth={true}
    >
      <DataTable
        className="bigcapital-datatable--financial-report"
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
@@ -1,14 +1,16 @@
 import React, { useCallback, useEffect } from 'react';
 import { Row, Col, Visible } from 'react-grid-system';
-import { Button } from '@blueprintjs/core';
 import moment from 'moment';
 import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormGroup } from '@blueprintjs/core';
 import * as Yup from 'yup';
+
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import SelectsListColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import FinancialAccountsFilter from '../FinancialAccountsFilter';

 import withProfitLoss from './withProfitLoss';
 import withProfitLossActions from './withProfitLossActions';
@@ -73,6 +75,11 @@ function ProfitLossHeader({
    }
  }, [profitLossSheetRefresh]);

+  const handleAccountsFilterSelect = (filterType) => {
+    const noneZero = filterType.key === 'without-zero-balance' ? true : false;
+    formik.setFieldValue('none_zero', noneZero);
+  };
+
  return (
    <FinancialStatementHeader show={profitLossSheetFilter}>
      <Row>
@@ -83,6 +90,19 @@ function ProfitLossHeader({
          <SelectsListColumnsBy onItemSelect={handleItemSelectDisplayColumns} />
        </Col>

+        <Col width={260}>
+          <FormGroup
+            label={<T id={'filter_accounts'} />}
+            className="form-group--select-list bp3-fill"
+            inline={false}
+          >
+            <FinancialAccountsFilter
+              initialSelectedItem={'all-accounts'}
+              onItemSelect={handleAccountsFilterSelect}
+            />
+          </FormGroup>
+        </Col>
+
        <Col width={260}>
          <RadiosAccountingBasis
            selectedValue={formik.values.basis}
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
@@ -1,19 +1,21 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { Row, Col } from 'react-grid-system';
+import { Row, Col, Visible } from 'react-grid-system';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormGroup } from '@blueprintjs/core';
 import { useFormik } from 'formik';
-import { Button } from "@blueprintjs/core";

 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import FinancialAccountsFilter from '../FinancialAccountsFilter';
+
 import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';

 import { compose } from 'utils';

-
 function TrialBalanceSheetHeader({
  pageFilter,
  onSubmitFilter,
@@ -31,16 +33,21 @@ function TrialBalanceSheetHeader({
    initialValues: {
      ...pageFilter,
      from_date: moment(pageFilter.from_date).toDate(),
-      to_date: moment(pageFilter.to_date).toDate()
+      to_date: moment(pageFilter.to_date).toDate(),
    },
    validationSchema: Yup.object().shape({
-      from_date: Yup.date().required().label(formatMessage({id:'from_date'})),
-      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
+      from_date: Yup.date()
+        .required()
+        .label(formatMessage({ id: 'from_date' })),
+      to_date: Yup.date()
+        .min(Yup.ref('from_date'))
+        .required()
+        .label(formatMessage({ id: 'to_date' })),
    }),
    onSubmit: (values, { setSubmitting }) => {
      onSubmitFilter(values);
      setSubmitting(false);
-    }
+    },
  });

  useEffect(() => {
@@ -50,22 +57,55 @@ function TrialBalanceSheetHeader({
    }
  }, [formik, trialBalanceSheetRefresh]);

+  const handleAccountingBasisChange = useCallback(
+    (value) => {
+      formik.setFieldValue('basis', value);
+    },
+    [formik],
+  );
+
+  const handleAccountsFilterSelect = (filterType) => {
+    const noneZero = filterType.key === 'without-zero-balance' ? true : false;
+    formik.setFieldValue('none_zero', noneZero);
+  };
+
  return (
    <FinancialStatementHeader show={trialBalanceSheetFilter}>
      <Row>
        <FinancialStatementDateRange formik={formik} />
+
+        <Visible xl>
+          <Col width={'100%'} />
+        </Visible>
+
+        <Col width={260}>
+          <FormGroup
+            label={<T id={'filter_accounts'} />}
+            className="form-group--select-list bp3-fill"
+            inline={false}
+          >
+            <FinancialAccountsFilter
+              initialSelectedItem={'all-accounts'}
+              onItemSelect={handleAccountsFilterSelect}
+            />
+          </FormGroup>
+        </Col>
+
+        <Col width={260}>
+          <RadiosAccountingBasis
+            selectedValue={formik.values.basis}
+            onChange={handleAccountingBasisChange}
+          />
+        </Col>
      </Row>
    </FinancialStatementHeader>
  );
 }

 export default compose(
-  withTrialBalance(({
+  withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetRefresh }) => ({
    trialBalanceSheetFilter,
    trialBalanceSheetRefresh,
-  }) => ({
-    trialBalanceSheetFilter,
-    trialBalanceSheetRefresh
  })),
  withTrialBalanceActions,
-)(TrialBalanceSheetHeader);
+)(TrialBalanceSheetHeader);
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
@@ -45,7 +45,8 @@ function TrialBalanceSheetTable({
      },
      {
        Header: formatMessage({ id: 'credit' }),
-        accessor: (r) => <Money amount={r.credit} currency="USD" />,
+        accessor: 'credit',
+        Cell: ({ cell }) => <Money amount={cell.row.original.credit} currency="USD" />,
        className: 'credit',
        minWidth: 95,
        maxWidth: 95,
@@ -53,7 +54,8 @@ function TrialBalanceSheetTable({
      },
      {
        Header: formatMessage({ id: 'debit' }),
-        accessor: (r) => <Money amount={r.debit} currency="USD" />,
+        accessor: 'debit',
+        Cell: ({ cell }) => <Money amount={cell.row.original.debit} currency="USD" />,
        className: 'debit',
        minWidth: 95,
        maxWidth: 95,
@@ -61,7 +63,8 @@ function TrialBalanceSheetTable({
      },
      {
        Header: formatMessage({ id: 'balance' }),
-        accessor: (r) => <Money amount={r.balance} currency="USD" />,
+        accessor: 'balance',
+        Cell: ({ cell }) => <Money amount={cell.row.original.balance} currency="USD" />,
        className: 'balance',
        minWidth: 95,
        maxWidth: 95,
@@ -91,6 +94,7 @@ function TrialBalanceSheetTable({
        onFetchData={handleFetchData}
        expandable={true}
        expandToggleColumn={1}
+        expandColumnSpace={1}
        sticky={true}
      />
    </FinancialSheet>