- 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-17 05:10: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/Accounting/MakeJournalEntriesForm.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesForm.js
@@ -117,6 +117,7 @@ function MakeJournalEntriesForm({
            then: Yup.number().required(),
          }),
        contact_id: Yup.number().nullable(),
+        contact_type: Yup.string().nullable(),
        note: Yup.string().max(255).nullable(),
      }),
    ),
@@ -140,9 +141,9 @@ function MakeJournalEntriesForm({
  const defaultEntry = useMemo(
    () => ({
      account_id: null,
-      contact_id: null,
      credit: 0,
      debit: 0,
+      contact_id: null,
      note: '',
    }),
    [],
--- a/client/src/containers/Accounting/ManualJournalActionsBar.js
+++ b/client/src/containers/Accounting/ManualJournalActionsBar.js
@@ -104,7 +104,7 @@ function ManualJournalActionsBar({
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon="plus" />}
-          text={<T id={'new_journal'} />}
+          text={<T id={'journal_entry'} />}
          onClick={onClickNewManualJournal}
        />
        <Popover
--- a/client/src/containers/Accounting/ManualJournalsDataTable.js
+++ b/client/src/containers/Accounting/ManualJournalsDataTable.js
@@ -127,6 +127,7 @@ function ManualJournalsDataTable({
        />
        <MenuItem
          text={formatMessage({ id: 'delete_journal' })}
+          icon={<Icon icon="trash-16" iconSize={16} />}
          intent={Intent.DANGER}
          onClick={handleDeleteJournal(journal)}
        />
--- a/client/src/containers/Accounts/AccountsChart.js
+++ b/client/src/containers/Accounts/AccountsChart.js
@@ -109,6 +109,14 @@ function AccountsChart({
        intent: Intent.DANGER,
      });
    }
+    if (errors.find(e => e.type === 'ACCOUNT.HAS.CHILD.ACCOUNTS')) {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'you_could_not_delete_account_has_child_accounts',
+        }),
+        intent: Intent.DANGER,
+      })
+    }
  };

  // Handle confirm account delete
--- a/client/src/containers/Accounts/AccountsDataTable.js
+++ b/client/src/containers/Accounts/AccountsDataTable.js
@@ -165,6 +165,7 @@ function AccountsDataTable({
          onClick={handleEditAccount(account)}
        />
        <MenuItem
+          icon={<Icon icon="plus" />}
          text={formatMessage({ id: 'new_child_account' })}
          onClick={() => handleNewParentAccount(account)}
        />
@@ -172,17 +173,20 @@ function AccountsDataTable({
        <If condition={account.active}>
          <MenuItem
            text={formatMessage({ id: 'inactivate_account' })}
+            icon={<Icon icon="pause-16" iconSize={16} />}
            onClick={() => onInactiveAccount(account)}
          />
        </If>
        <If condition={!account.active}>
          <MenuItem
            text={formatMessage({ id: 'activate_account' })}
+            icon={<Icon icon="play-16" iconSize={16} />}
            onClick={() => onActivateAccount(account)}
          />
        </If>
        <MenuItem
          text={formatMessage({ id: 'delete_account' })}
+          icon={<Icon icon="trash-16" iconSize={16} />}
          intent={Intent.DANGER}
          onClick={() => onDeleteAccount(account)}
        />
@@ -297,6 +301,7 @@ function AccountsDataTable({
      onSelectedRowsChange={handleSelectedRowsChange}
      loading={accountsLoading && !isMounted}
      rowContextMenu={rowContextMenu}
+      expandColumnSpace={1}
    />
  );
 }
--- a/client/src/containers/Accounts/withAccounts.js
+++ b/client/src/containers/Accounts/withAccounts.js
@@ -6,7 +6,6 @@ import {
  getResourceViews,
 } from 'store/customViews/customViews.selectors';

-
 export default (mapState) => {
  const getAccountsList = getAccountsListFactory();

--- a/client/src/containers/Customers/Customer.js
+++ b/client/src/containers/Customers/Customer.js
@@ -21,12 +21,14 @@ function Customer({
  const { id } = useParams();
  const history = useHistory();

-  const fetchCustomers = useQuery('customers-list', () =>
+  // Handle fetch customers data table
+  const fetchCustomers = useQuery('customers-table', () =>
    requestFetchCustomers({}),
  );
-
-  const fetchCustomerDatails = useQuery(id && ['customer-detail', id], () =>
+  // Handle fetch customer details.
+  const fetchCustomer= useQuery(['customer', id], () =>
    requestFetchCustomers(),
+    { enabled: !!id },
  );

  const handleFormSubmit = useCallback(
@@ -42,7 +44,7 @@ function Customer({

  return (
    <DashboardInsider
-      loading={fetchCustomerDatails.isFetching || fetchCustomers.isFetching}
+      loading={fetchCustomer.isFetching || fetchCustomers.isFetching}
      name={'customer-form'}
    >
      <CustomerForm
--- a/client/src/containers/Customers/CustomerActionsBar.js
+++ b/client/src/containers/Customers/CustomerActionsBar.js
@@ -45,16 +45,16 @@ const CustomerActionsBar = ({
    history.push('/customers/new');
  }, [history]);

-  const filterDropdown = FilterDropdown({
-    fields: resourceFields,
-    onFilterChange: (filterConditions) => {
-      setFilterCount(filterConditions.length || 0);
-      addCustomersTableQueries({
-        filter_roles: filterConditions || '',
-      });
-      onFilterChanged && onFilterChanged(filterConditions);
-    },
-  });
+  // const filterDropdown = FilterDropdown({
+  //   fields: resourceFields,
+  //   onFilterChange: (filterConditions) => {
+  //     setFilterCount(filterConditions.length || 0);
+  //     addCustomersTableQueries({
+  //       filter_roles: filterConditions || '',
+  //     });
+  //     onFilterChanged && onFilterChanged(filterConditions);
+  //   },
+  // });

  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
    selectedRows,
@@ -75,7 +75,7 @@ const CustomerActionsBar = ({
        />
        <NavbarDivider />
        <Popover
-          content={filterDropdown}
+          // content={filterDropdown}
          interactionKind={PopoverInteractionKind.CLICK}
          position={Position.BOTTOM_LEFT}
        >
@@ -101,7 +101,6 @@ const CustomerActionsBar = ({
            onClick={handleBulkDelete}
          />
        </If>
-
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon="file-import-16" iconSize={16} />}
@@ -120,13 +119,12 @@ const CustomerActionsBar = ({
 const mapStateToProps = (state, props) => ({
  resourceName: 'customers',
 });
-
 const withCustomersActionsBar = connect(mapStateToProps);

 export default compose(
  withCustomersActionsBar,
+  withCustomersActions,
  withResourceDetail(({ resourceFields }) => ({
    resourceFields,
  })),
-  withCustomersActions,
 )(CustomerActionsBar);
--- a/client/src/containers/Customers/CustomerForm.js
+++ b/client/src/containers/Customers/CustomerForm.js
@@ -3,25 +3,20 @@ import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import {
  FormGroup,
-  MenuItem,
  Intent,
  InputGroup,
-  Button,
-  Classes,
  Checkbox,
 } from '@blueprintjs/core';
 import { Row, Col } from 'react-grid-system';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { queryCache, useQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { pick } from 'lodash';
-import classNames from 'classnames';

 import AppToaster from 'components/AppToaster';
 import ErrorMessage from 'components/ErrorMessage';

 import CustomersTabs from 'containers/Customers/CustomersTabs';
-import RadioCustomer from 'containers/Customers/RadioCustomer';
+import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';

 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withCustomerDetail from 'containers/Customers/withCustomerDetail';
@@ -51,6 +46,7 @@ function CustomerForm({
  // #withMediaActions
  requestSubmitMedia,
  requestDeleteMedia,
+
  //#Props
  onFormSubmit,
  onCancelForm,
@@ -258,7 +254,7 @@ function CustomerForm({
    <div className={'customer-form'}>
      <form onSubmit={formik.handleSubmit}>
        <div className={'customer-form__primary-section'}>
-          <RadioCustomer
+          <CustomerTypeRadioField
            selectedValue={formik.values.customer_type}
            onChange={handleCustomerTypeCahange}
            className={'form-group--customer-type'}
@@ -440,4 +436,5 @@ export default compose(
  })),
  withDashboardActions,
  withCustomersActions,
+  withMediaActions,
 )(CustomerForm);
--- a/client/src/containers/Customers/CustomerTypeRadioField.js
+++ b/client/src/containers/Customers/CustomerTypeRadioField.js
--- a/client/src/containers/Dialogs/AccountFormDialog.js
+++ b/client/src/containers/Dialogs/AccountFormDialog.js
@@ -11,7 +11,7 @@ import {
 } from '@blueprintjs/core';
 import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick } from 'lodash';
+import { pick, omit } from 'lodash';
 import { useQuery, queryCache } from 'react-query';
 import classNames from 'classnames';
 import Yup from 'services/yup';
@@ -72,7 +72,6 @@ function AccountFormDialog({
      name: '',
      code: '',
      description: '',
-      parent_account_id: null,
    }),
    [],
  );
@@ -103,8 +102,7 @@ function AccountFormDialog({
    },
    validationSchema,
    onSubmit: (values, { setSubmitting, setErrors }) => {
-      const form = pick(values, Object.keys(initialValues));
-
+      const form = omit(values, ['subaccount']);
      const toastAccountName = values.code
        ? `${values.code} - ${values.name}`
        : values.name;
@@ -114,13 +112,11 @@ function AccountFormDialog({
        queryCache.invalidateQueries('accounts-table');
        queryCache.invalidateQueries('accounts-list');
      };
-
      const afterErrors = (errors) => {
        const errorsTransformed = transformApiErrors(errors);
        setErrors({ ...errorsTransformed });
        setSubmitting(false);
      };
-
      if (payload.action === 'edit') {
        requestEditAccount(payload.id, form)
          .then((response) => {
@@ -165,6 +161,11 @@ function AccountFormDialog({
      setFieldValue('subaccount', true);
    }
  }, [values.parent_account_id]);
+  
+  // Reset `parent account id` after change `account type`.
+  useEffect(() => {
+    setFieldValue('parent_account_id', null);
+  }, [values.account_type_id]);

  // Filtered accounts based on the given account type.
  const filteredAccounts = useMemo(
@@ -379,12 +380,13 @@ function AccountFormDialog({

        <div className={Classes.DIALOG_FOOTER}>
          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button onClick={handleClose}>
+            <Button onClick={handleClose} style={{ minWidth: '75px' }}>
              <T id={'close'} />
            </Button>
            <Button
              intent={Intent.PRIMARY}
              disabled={isSubmitting}
+              style={{ minWidth: '75px' }}
              type="submit"
            >
              {payload.action === 'edit' ? (
--- a/client/src/containers/Expenses/ExpenseFormHeader.js
+++ b/client/src/containers/Expenses/ExpenseFormHeader.js
@@ -113,7 +113,7 @@ function ExpenseFormHeader({
              // onItemSelect={}
              selectedItem={values.beneficiary}
              // selectedItemProp={'id'}
-              defaultText={<T id={'select_beneficiary_account'} />}
+              defaultText={<T id={'select_customer'} />}
              labelProp={'beneficiary'}
            />
          </FormGroup>
--- 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>
--- a/client/src/containers/Resources/withResourceDetails.js
+++ b/client/src/containers/Resources/withResourceDetails.js
@@ -1,12 +1,14 @@
 import {connect} from 'react-redux';
 import {
  getResourceColumns,
-  getResourceFields,
+  getResourceFieldsFactory,
  getResourceMetadata,
  getResourceData,
 } from 'store/resources/resources.reducer';

 export default (mapState) => {
+  const getResourceFields = getResourceFieldsFactory();
+
  const mapStateToProps = (state, props) => {
    const { resourceName } = props;
    const mapped =  {