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