- 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.

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);

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,

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,