- 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/components/ContactsListField.js
+++ b/client/src/components/ContactsListField.js
@@ -1,43 +1,51 @@
-import React, { useCallback, useState } from 'react';
-import {
-  MenuItem,
-  Button,
-} from '@blueprintjs/core';
+import React, { useCallback, useMemo } from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
 import ListSelect from 'components/ListSelect';
 import { FormattedMessage as T } from 'react-intl';

 export default function ContactsListField({
  contacts,
  onContactSelected,
-  error,
-  initialContact,
-  defautlSelectText = (<T id={'select_contact'} />)
+  selectedContactId,
+  selectedContactType,
+  defautlSelectText = <T id={'select_contact'} />,
 }) {
-  const [selectedContact, setSelectedContact] = useState(
-    initialContact || null
+  // Contact item of select accounts field.
+  const contactRenderer = useCallback(
+    (item, { handleClick, modifiers, query }) => (
+      <MenuItem text={item.display_name} key={item.id} onClick={handleClick} />
+    ),
+    [],
  );

-  // Contact item of select accounts field.
-  const contactItem = useCallback((item, { handleClick, modifiers, query }) => (
-    <MenuItem text={item.display_name} key={item.id} onClick={handleClick} />
-  ), []);
+  const onContactSelect = useCallback(
+    (contact) => {
+      onContactSelected && onContactSelected(contact);
+    },
+    [onContactSelected],
+  );

-  const onContactSelect = useCallback((contact) => {
-    setSelectedContact(contact.id);
-    onContactSelected && onContactSelected(contact);
-  }, [setSelectedContact, onContactSelected]);
+  const items = useMemo(
+    () =>
+      contacts.map((contact) => ({
+        ...contact,
+        _id: `${contact.id}_${contact.contact_type}`,
+      })),
+    [contacts],
+  );

  return (
    <ListSelect
-      items={contacts}
-      noResults={<MenuItem disabled={true} text='No results.' />}
-      itemRenderer={contactItem}
+      items={items}
+      noResults={<MenuItem disabled={true} text="No results." />}
+      itemRenderer={contactRenderer}
      popoverProps={{ minimal: true }}
      filterable={true}
      onItemSelect={onContactSelect}
      labelProp={'display_name'}
-      selectedItem={selectedContact}
-      selectedItemProp={'id'} 
-      defaultText={defautlSelectText} />
+      selectedItem={`${selectedContactId}_${selectedContactType}`}
+      selectedItemProp={'_id'}
+      defaultText={defautlSelectText}
+    />
  );
-}
+}
--- a/client/src/components/Dashboard/DashboardTopbar.js
+++ b/client/src/components/Dashboard/DashboardTopbar.js
@@ -110,10 +110,15 @@ function DashboardTopbar({
              icon={<Icon icon={'plus-24'} iconSize={20} />}
              text={<T id={'quick_new'} />}
            />
-            <Button
-              className={Classes.MINIMAL}
-              icon={<Icon icon={'notification-24'} iconSize={20} />}
-            />
+            <Tooltip
+              content={<T id={'notifications'} />}
+              position={Position.BOTTOM}
+            >
+              <Button
+                className={Classes.MINIMAL}
+                icon={<Icon icon={'notification-24'} iconSize={20} />}
+              />
+            </Tooltip>
            <Button
              className={Classes.MINIMAL}
              icon={<Icon icon={'help-24'} iconSize={20} />}
--- a/client/src/components/DataTable.js
+++ b/client/src/components/DataTable.js
@@ -8,7 +8,13 @@ import {
  useSortBy,
  useFlexLayout,
 } from 'react-table';
-import { Checkbox, Spinner, ContextMenu, Menu, MenuItem } from '@blueprintjs/core';
+import {
+  Checkbox,
+  Spinner,
+  ContextMenu,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
 import classnames from 'classnames';
 import { FixedSizeList } from 'react-window';
 import { useSticky } from 'react-table-sticky';
@@ -30,7 +36,7 @@ export default function DataTable({
  loading,
  onFetchData,
  onSelectedRowsChange,
-  manualSortBy = 'false',
+  manualSortBy = false,
  selectionColumn = false,
  expandSubRows = true,
  className,
@@ -51,7 +57,9 @@ export default function DataTable({
  pagesCount: controlledPageCount,
  initialPageIndex,
  initialPageSize,
-  rowContextMenu
+  rowContextMenu,
+
+  expandColumnSpace = 1.5,
 }) {
  const {
    getTableProps,
@@ -91,7 +99,6 @@ export default function DataTable({
      manualSortBy,
      expandSubRows,
      payload,
-      autoResetSelectedRows: false,
    },
    useSortBy,
    useExpanded,
@@ -148,7 +155,7 @@ export default function DataTable({
    } else {
      onFetchData && onFetchData({ pageIndex, pageSize, sortBy });
    }
-  }, [pageIndex, pageSize, sortBy, onFetchData]);
+  }, [pageIndex, pageSize, manualSortBy ? sortBy : null, onFetchData]);

  useUpdateEffect(() => {
    onSelectedRowsChange && onSelectedRowsChange(selectedFlatRows);
@@ -162,7 +169,7 @@ export default function DataTable({
        wrapper={(children) => (
          <div
            style={{
-              'padding-left': `${row.depth * 1.5}rem`,
+              'padding-left': `${row.depth * expandColumnSpace}rem`,
            }}
          >
            {children}
@@ -198,9 +205,9 @@ export default function DataTable({
      e.preventDefault();
      const tr = e.currentTarget.closest('.tr');
      tr.classList.add('is-context-menu-active');
-  
+
      const DropdownEl = rowContextMenu(cell, row);
-  
+
      ContextMenu.show(DropdownEl, { left: e.clientX, top: e.clientY }, () => {
        tr.classList.remove('is-context-menu-active');
      });
@@ -216,7 +223,9 @@ export default function DataTable({
      return (
        <div
          {...row.getRowProps({
-            className: classnames('tr', rowClasses),
+            className: classnames('tr', {
+              'is-expanded': row.isExpanded && row.canExpand,
+            }, rowClasses),
            style,
          })}
        >
@@ -369,7 +378,7 @@ export default function DataTable({
          </ScrollSyncPane>
        </div>
      </ScrollSync>
-      
+
      <If condition={pagination && pageCount && !loading}>
        <Pagination
          initialPage={pageIndex + 1}
--- a/client/src/components/DataTableCells/ContactsListFieldCell.js
+++ b/client/src/components/DataTableCells/ContactsListFieldCell.js
@@ -1,12 +1,12 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { FormGroup, Intent, Classes } from "@blueprintjs/core";
 import classNames from 'classnames';
 import ContactsListField from 'components/ContactsListField';

 export default function ContactsListCellRenderer({
-  column: { id, value },
+  column: { id },
  row: { index, original },
-  cell: { value: initialValue },
+  cell: { value },
  payload: { contacts, updateData, errors }
 }) {
  const handleContactSelected = useCallback((contact) => {
@@ -16,10 +16,6 @@ export default function ContactsListCellRenderer({
    });
  }, [updateData, index, id]);

-  const initialContact = useMemo(() => {
-    return contacts.find(c => c.id === initialValue);
-  }, [contacts, initialValue]);
-
  const error = errors?.[index]?.[id];

  return (
@@ -33,10 +29,10 @@ export default function ContactsListCellRenderer({
    >
      <ContactsListField
        contacts={contacts}
-        onContactSelected={handleContactSelected}
-        initialContact={initialContact}
-        
+        onContactSelected={handleContactSelected} 
+        selectedContactId={original?.contact_id}
+        selectedContactType={original?.contact_type}
      />
    </FormGroup>
-  )
+  );
 }
--- a/client/src/components/FinancialSheet.js
+++ b/client/src/components/FinancialSheet.js
@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import moment from 'moment';
 import classnames from 'classnames';
-import LoadingIndicator from 'components/LoadingIndicator';
+import { LoadingIndicator, MODIFIER } from 'components';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { If } from 'components';

@@ -17,6 +17,8 @@ export default function FinancialSheet({
  loading,
  className,
  basis,
+  minimal = false,
+  fullWidth = false
 }) {
  const { formatMessage } = useIntl();
  const format = 'DD MMMM YYYY';
@@ -45,7 +47,12 @@ export default function FinancialSheet({
  ]);

  return (
-    <div className={classnames('financial-sheet', nameModifer, className)}>
+    <div
+      className={classnames('financial-sheet', nameModifer, className, {
+        [MODIFIER.FINANCIAL_SHEET_MINIMAL]: minimal,
+        'is-full-width': fullWidth,
+      })}
+    >
      <LoadingIndicator loading={loading} spinnerSize={34} />

      <div
@@ -53,8 +60,14 @@ export default function FinancialSheet({
          'is-loading': loading,
        })}
      >
-        <h1 class="financial-sheet__title">{companyName}</h1>
-        <h6 class="financial-sheet__sheet-type">{sheetType}</h6>
+        <If condition={!!companyName}>
+          <h1 class="financial-sheet__title">{companyName}</h1>
+        </If>
+
+        <If condition={!!sheetType}>
+          <h6 class="financial-sheet__sheet-type">{sheetType}</h6>
+        </If>
+
        <div class="financial-sheet__date">
          <If condition={asDate}>
            <T id={'as'} /> {formattedAsDate}
--- a/client/src/components/ListSelect.js
+++ b/client/src/components/ListSelect.js
@@ -1,44 +1,68 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Button,
-  MenuItem,
-} from '@blueprintjs/core';
+import React, { useState, useMemo, useEffect } from 'react';
+import { Button, MenuItem } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 import { FormattedMessage as T } from 'react-intl';

-export default function ListSelect ({
+export default function ListSelect({
  buttonProps,
  defaultText,
-  noResultsText = (<T id="no_results" />),
+  noResultsText = <T id="no_results" />,
  isLoading = false,
  labelProp,

  selectedItem,
  selectedItemProp = 'id',

-  // itemTextProp,
-  // itemLabelProp,
+  initialSelectedItem,
+  onItemSelect,
+
  ...selectProps
 }) {
-  const [currentItem, setCurrentItem] = useState(null);
+  const selectedItemObj = useMemo(
+    () => selectProps.items.find((i) => i[selectedItemProp] === selectedItem),
+    [selectProps.items, selectedItemProp, selectedItem],
+  );
+
+  const selectedInitialItem = useMemo(
+    () => selectProps.items.find((i) => i[selectedItemProp] === initialSelectedItem),
+    [initialSelectedItem],
+  );
+
+  const [currentItem, setCurrentItem] = useState(
+    (initialSelectedItem && selectedInitialItem) || null,
+  );

  useEffect(() => {
-    if (selectedItem && selectedItemProp) {
-      const item = selectProps.items.find(i => i[selectedItemProp] === selectedItem);
-      setCurrentItem(item);
+    if (selectedItemObj) {
+      setCurrentItem(selectedItemObj);
    }
-  }, [selectedItem, selectedItemProp, selectProps.items]);
+  }, [selectedItemObj, setCurrentItem]);

-  const noResults = isLoading ?
-    ('loading') : <MenuItem disabled={true} text={noResultsText} />;
+  const noResults = isLoading ? (
+    'loading'
+  ) : (
+    <MenuItem disabled={true} text={noResultsText} />
+  );

-  const itemRenderer =  (item, { handleClick, modifiers, query }) => {
-    return (<MenuItem text={item[labelProp]} key={item[selectedItemProp]} onClick={handleClick} />);
+  const itemRenderer = (item, { handleClick, modifiers, query }) => {
+    return (
+      <MenuItem
+        text={item[labelProp]}
+        key={item[selectedItemProp]}
+        onClick={handleClick}
+      />
+    );
+  };
+
+  const handleItemSelect = (_item) => {
+    setCurrentItem(_item);
+    onItemSelect && onItemSelect(_item);
  };

  return (
    <Select
      itemRenderer={itemRenderer}
+      onItemSelect={handleItemSelect}
      {...selectProps}
      noResults={noResults}
    >
@@ -48,5 +72,5 @@ export default function ListSelect ({
        {...buttonProps}
      />
    </Select>
-  )
-}
+  );
+}
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -20,6 +20,7 @@ import AppToaster from './AppToaster';
 import DataTable from './DataTable';
 import AccountsSelectList from './AccountsSelectList';
 import AccountsTypesSelect from './AccountsTypesSelect';
+import LoadingIndicator from './LoadingIndicator';

 const Hint = FieldHint;

@@ -47,4 +48,5 @@ export {
  DataTable,
  AccountsSelectList,
  AccountsTypesSelect,
+  LoadingIndicator,
 };
--- a/client/src/components/modifiers.js
+++ b/client/src/components/modifiers.js
@@ -1,4 +1,7 @@
 export default {
  SELECT_LIST_FILL_POPOVER: 'select-list--fill-popover',
  SELECT_LIST_FILL_BUTTON: 'select-list--fill-button',
+  SELECT_LIST_TOOLTIP_ITEMS: 'select-list--tooltip-items',
+
+  FINANCIAL_SHEET_MINIMAL: 'financial-sheet--minimal'
 }
--- 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 =  {
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -441,7 +441,7 @@ export default {
  once_delete_these_expenses_you_will_not_able_restore_them:
    "Once you delete these expenses, you won't be able to retrieve them later. Are you sure you want to delete them?",
  the_expense_has_been_published: 'The expense has been published',
-  select_beneficiary_account: 'Select Beneficiary Account',
+  select_customer: 'Select customer',
  total_amount_equals_zero: 'Total amount equals zero',
  value: 'Value',
  you_reached_conditions_limit: 'You have reached to conditions limit.',
@@ -458,7 +458,7 @@ export default {
  display_name_: 'Display name',
  new_customer: 'New Customer',
  customer_type: 'Customer Type',
-  business: 'business',
+  business: 'Business',
  individual: 'Individual',
  display_name: 'Display Name',
  the_customer_has_been_successfully_created:
@@ -543,4 +543,13 @@ export default {
    "Once you delete these journalss, you won't be able to retrieve them later. Are you sure you want to delete them?",
  once_delete_this_journal_you_will_able_to_restore_it: `Once you delete this journal, you won\'t be able to restore it later. Are you sure you want to delete ?`,
  the_expense_is_already_published: 'The expense is already published.',
+
+  accounts_without_zero_balance: 'Accounts without zero-balance',
+  accounts_with_transactions: 'Accounts with transactions',
+  include_accounts_once_has_transactions_on_given_date_period: 'Include accounts that onces have transactions on the given date period only.',
+  include_accounts_and_exclude_zero_balance: 'Include accounts and exclude that ones have zero-balance.',
+  all_accounts_including_with_zero_balance: 'All accounts, including that ones have zero-balance.',
+  notifications: 'Notifications',
+  you_could_not_delete_account_has_child_accounts: 'You could not delete account has child accounts.',
+  journal_entry: 'Journal Entry'
 };
--- a/client/src/store/accounts/accounts.selectors.js
+++ b/client/src/store/accounts/accounts.selectors.js
@@ -1,13 +1,12 @@
 import { createSelector } from 'reselect';
 import { pickItemsFromIds, getItemById } from 'store/selectors';
+import { flatToNestedArray } from 'utils';

 const accountsViewsSelector = (state) => state.accounts.views;
 const accountsDataSelector = (state) => state.accounts.items;
 const accountsCurrentViewSelector = (state) => state.accounts.currentViewId;
 const accountIdPropSelector = (state, props) => props.accountId;
-
-const accountsListSelector = state => state.accounts.list;
-
+const accountsListSelector = (state) => state.accounts.list;

 export const getAccountsItems = createSelector(
  accountsViewsSelector,
@@ -15,25 +14,31 @@ export const getAccountsItems = createSelector(
  accountsCurrentViewSelector,
  (accountsViews, accountsItems, viewId) => {
    const accountsView = accountsViews[viewId || -1];
-
-    return typeof accountsView === 'object'
-      ? pickItemsFromIds(accountsItems, accountsView.ids) || []
-      : [];
+    const config = { id: 'id', parentId: 'parent_account_id' };
+    const accounts =
+      typeof accountsView === 'object'
+        ? pickItemsFromIds(accountsItems, accountsView.ids) || []
+        : [];
+    return flatToNestedArray(
+      accounts.map((a) => ({ ...a })),
+      config,
+    );
  },
 );

-export const getAccountsListFactory = () => createSelector(
-  accountsListSelector,
-  accountsDataSelector,
-  (accounts, accountsItems) => {
-    return pickItemsFromIds(accountsItems, accounts);
-  },
-)
+export const getAccountsListFactory = () =>
+  createSelector(
+    accountsListSelector,
+    accountsDataSelector,
+    (accounts, accountsItems) => {
+      return pickItemsFromIds(accountsItems, accounts);
+    },
+  );

 export const getAccountById = createSelector(
  accountsDataSelector,
  accountIdPropSelector,
  (accountsItems, accountId) => {
    return getItemById(accountsItems, accountId);
-  }
-);
+  },
+);
--- a/client/src/store/financialStatement/financialStatements.reducer.js
+++ b/client/src/store/financialStatement/financialStatements.reducer.js
@@ -1,8 +1,6 @@
 import { createReducer } from '@reduxjs/toolkit';
 import t from 'store/types';
-import {
-  getFinancialSheetIndexByQuery,
-} from './financialStatements.selectors';
+import { getFinancialSheetIndexByQuery } from './financialStatements.selectors';
 import { omit } from 'lodash';

 const initialState = {
@@ -93,8 +91,7 @@ const mapJournalTableRows = (journal) => {
  }, []);
 };

-
-const mapContactAgingSummary = sheet => {
+const mapContactAgingSummary = (sheet) => {
  const rows = [];

  const mapAging = (agingPeriods) => {
@@ -102,10 +99,10 @@ const mapContactAgingSummary = sheet => {
      acc[`aging-${index}`] = aging.formatted_total;
      return acc;
    }, {});
-  }
+  };
  sheet.customers.forEach((customer) => {
    const agingRow = mapAging(customer.aging);
-  
+
    rows.push({
      rowType: 'customer',
      customer_name: customer.customer_name,
@@ -113,7 +110,7 @@ const mapContactAgingSummary = sheet => {
      total: customer.total,
    });
  });
- 
+
  rows.push({
    rowType: 'total',
    customer_name: 'Total',
@@ -157,6 +154,36 @@ const mapProfitLossToTableRows = (profitLoss) => {
  ];
 };

+const mapTotalToChildrenRows = (accounts) => {
+  return accounts.map((account) => {
+    return {
+      ...account,
+      children: mapTotalToChildrenRows([
+        ...(account.children ? account.children : []),
+        ...(account.total &&
+        account.children &&
+        account.children.length > 0 &&
+        account.row_type !== 'total_row'
+          ? [
+              {
+                name: `Total ${account.name}`,
+                row_type: 'total_row',
+                total: { ...account.total },
+                ...(account.total_periods && {
+                  total_periods: account.total_periods,
+                }),
+              },
+            ]
+          : []),
+      ]),
+    };
+  });
+};
+
+const mapBalanceSheetRows = (balanceSheet) => {
+  return balanceSheet.map((section) => {});
+};
+
 const financialStatementFilterToggle = (financialName, statePath) => {
  return {
    [`${financialName}_FILTER_TOGGLE`]: (state, action) => {
@@ -173,9 +200,10 @@ export default createReducer(initialState, {
    );

    const balanceSheet = {
-      accounts: action.data.accounts,
+      sheet: action.data.balanceSheet,
      columns: Object.values(action.data.columns),
      query: action.data.query,
+      tableRows: mapTotalToChildrenRows(action.data.balance_sheet),
    };
    if (index !== -1) {
      state.balanceSheet.sheets[index] = balanceSheet;
@@ -313,13 +341,16 @@ export default createReducer(initialState, {

  [t.RECEIVABLE_AGING_SUMMARY_SET]: (state, action) => {
    const { aging, columns, query } = action.payload;
-    const index = getFinancialSheetIndexByQuery(state.receivableAgingSummary.sheets, query);
+    const index = getFinancialSheetIndexByQuery(
+      state.receivableAgingSummary.sheets,
+      query,
+    );

    const receivableSheet = {
      query,
      columns,
      aging,
-      tableRows: mapContactAgingSummary(aging)
+      tableRows: mapContactAgingSummary(aging),
    };
    if (index !== -1) {
      state.receivableAgingSummary[index] = receivableSheet;
@@ -331,5 +362,8 @@ export default createReducer(initialState, {
    const { refresh } = action.payload;
    state.receivableAgingSummary.refresh = !!refresh;
  },
-  ...financialStatementFilterToggle('RECEIVABLE_AGING_SUMMARY', 'receivableAgingSummary'),
+  ...financialStatementFilterToggle(
+    'RECEIVABLE_AGING_SUMMARY',
+    'receivableAgingSummary',
+  ),
 });
--- a/client/src/store/resources/resources.reducer.js
+++ b/client/src/store/resources/resources.reducer.js
@@ -72,7 +72,7 @@ const resourceFieldsItemsSelector = (state) => state.resources.fields;
 * @param {String} resourceSlug 
 * @return {Array}
 */
-export const getResourceFields = createSelector(
+export const getResourceFieldsFactory = () => createSelector(
  resourceFieldsIdsSelector,
  resourceFieldsItemsSelector,
  (fieldsIds, fieldsItems) => {
--- a/client/src/style/components/data-table.scss
+++ b/client/src/style/components/data-table.scss
@@ -22,10 +22,10 @@
      overflow-x: hidden;

      .th{
-        padding: 0.75rem 0.5rem;
+        padding: 0.6rem 0.5rem;
        background: #fafafa;
        font-size: 14px;
-        color: rgb(59, 71, 91);
+        color: #445165;
        font-weight: 500;
        border-bottom: 1px solid rgb(224, 224, 224);
      }
@@ -156,13 +156,17 @@
        border: 0;
        box-shadow: none;
        padding: 5px 15px;
-        border-radius: 5px;
+        border-radius: 8px;

        &:hover,
        &:focus{
          background-color: #CFDCEE;
        }

+        svg{
+          color: #425361
+        }
+
        .bp3-icon-more-h-16{
          margin-top: 2px;
        }
@@ -289,7 +293,7 @@

      .tbody{
        .tr .td{
-          border-bottom: 1px dotted #BBB;
+          border-bottom: 1px dotted #CCC;
        }
      }
    }  
--- a/client/src/style/objects/form.scss
+++ b/client/src/style/objects/form.scss
@@ -138,7 +138,11 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
    .bp3-button:not(.bp3-minimal){
      border-color: #db3737;
    }
-  }  
+  }
+}
+
+.select-list--tooltip-items .bp3-popover-target {
+  display: block;
 }


@@ -332,4 +336,9 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
      -moz-outline-radius: $control-indicator-size;
    }
  }
+}
+
+
+.bp3-menu-item::before, .bp3-menu-item > .bp3-icon{
+  color: #4b5d6b;
 }
--- a/client/src/style/pages/accounts-chart.scss
+++ b/client/src/style/pages/accounts-chart.scss
@@ -62,7 +62,7 @@
 .dialog--account-form{

  &:not(.dialog--loading) .bp3-dialog-body{
-    margin-bottom: 25px;
+    margin-bottom: 30px;
  }

  .bp3-dialog-body{
@@ -91,9 +91,6 @@
      }
    }

-    .form-group--parent-account{
-      margin-bottom: 35px;
-    }
    .form-group--account-code{
      margin-bottom: 16px;
    }
--- a/client/src/style/pages/dashboard.scss
+++ b/client/src/style/pages/dashboard.scss
@@ -15,7 +15,7 @@
 
  &__topbar{
    width: 100%;
-    min-height: 66px;
+    min-height: 62px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #F2EFEF;
@@ -137,17 +137,17 @@
        margin-right: 0;
      }
      .#{$ns}-button{
-        color: #4d4d4d;
+        color: #32304a;
        padding: 8px 12px;

        &:hover{
          background: rgba(167, 182, 194, 0.12);
-          color: #4d4d4d;
+          color: #32304a;
        }
        &.bp3-minimal:active,
        &.bp3-minimal.bp3-active{
          background: rgba(167, 182, 194, 0.12);
-          color: #4d4d4d;
+          color: #32304a;
        }

        &.has-active-filters{
@@ -158,7 +158,7 @@
          }
        }
        .#{$ns}-icon{
-          color: #4d4d4d;
+          color: #2A293D;
          margin-right: 7px;
        }
        &.#{$ns}-minimal.#{$ns}-intent-danger{
@@ -207,12 +207,12 @@
  &__title{
    align-items: center;;
    display: flex;
-    margin-left: 4px;
+    margin-left: 2px;

    h1{
      font-size: 26px;
      font-weight: 300;
-      color: #050035;
+      color: #2c2c39;
      margin: 0;
    }
    h3{
@@ -278,7 +278,7 @@
        .tbody{
          .th.selection,
          .td.selection{
-            padding-left: 14px;
+            padding-left: 16px;
          }
        }
      }
@@ -350,7 +350,7 @@

  .#{$ns}-tab-indicator-wrapper{
    .#{$ns}-tab-indicator{
-      height: 2px;
+      height: 3px;
    }
  }

--- a/client/src/style/pages/financial-statements.scss
+++ b/client/src/style/pages/financial-statements.scss
@@ -35,15 +35,14 @@
  }

  &__body{
-    padding-left: 20px;
-    padding-right: 20px;
+    padding-left: 15px;
+    padding-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__header.is-hidden + .financial-statement__body{
-
    .financial-sheet{
      margin-top: 40px;
    }
@@ -55,7 +54,7 @@
  border-radius: 10px;
  min-width: 640px;
  width: auto;
-  padding: 30px 20px;
+  padding: 30px 18px;
  max-width: 100%;
  margin: 15px auto 35px;
  min-height: 400px;
@@ -65,7 +64,7 @@
  &__title{
    margin: 0;
    font-weight: 400;
-    font-size: 22px;
+    font-size: 20px;
    color: #464646;
    text-align: center;
  }
@@ -93,6 +92,7 @@
          background: #fff;
        }
      }
+
      .tr.no-results{
        .td{
          flex-direction: column;
@@ -117,7 +117,8 @@
    font-size: 12px;
  }
  .dashboard__loading-indicator{
-    margin: 60px auto 0;
+    margin: auto;
+    padding: 0;
  }

  &--expended{
@@ -141,7 +142,9 @@

          &--opening_balance,
          &--closing_balance{
-            background-color: #fbfbfb;
+            .td{
+              background-color: #fbfbfb;
+            }
          }

          &--closing_balance .td{
@@ -158,28 +161,22 @@

  &--general-ledger,
  &--journal{
-    width: auto;
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-top: 10px;
-    border-color: #EEEDED;
+  
  }
  &--journal{
    .financial-sheet__table{
+
      .tbody{
        .tr:not(.no-results) .td{
          padding: 0.4rem;
-          color: #444;
-          border-bottom-color: #F0F0F0;
+          color: #000;
+          border-bottom-color: #DDD;
          min-height: 32px;
-          border-left: 1px solid #F0F0F0;
+          border-left: 1px dotted #DDD;

          &:first-of-type{
            border-left: 0;
          }
-          &.account_code{
-            color: #666;
-          }
        }
      }
    }
@@ -189,9 +186,6 @@

    .financial-sheet__table{
      .tbody{
-        .account_code.td{
-          color: #666;
-        }
        .total.td {
          border-bottom-color: #000;
        }
@@ -212,10 +206,25 @@
  &--balance-sheet{
    .financial-sheet__table{
      .tbody{
-
        .total.td{
          border-bottom-color: #000;
        }
+        .tr.row_type--total_row{
+          .total.td,
+          .account_name.td{
+            font-weight: 600;
+            color: #333;
+          }
+        }
+
+        .tr.is-expanded{
+          .td.total,
+          .td.total-period{
+            > span{
+              display: none;
+            }
+          }
+        }
      }
    }
  }
@@ -236,6 +245,29 @@
      }
    }    
  }
+
+  &--minimal{
+    border: 0;
+    padding: 0;
+    margin-top: 20px;
+
+    .financial-sheet{
+      &__title{
+        font-size: 18px;
+        color: #333;
+      }
+      &__title + .financial-sheet__date{
+        margin-top: 8px;
+      }
+      &__table{
+        margin-top: 20px;
+      }
+    }
+  }
+
+  &.is-full-width{
+    width: 100%;
+  }
 }


@@ -272,6 +304,5 @@
      line-height: 1.55;
      margin-top: 12px;
    }
-
  }
 }
--- a/client/src/style/views/Sidebar.scss
+++ b/client/src/style/views/Sidebar.scss
@@ -2,10 +2,11 @@ $sidebar-background: #01194e;
 $sidebar-text-color: #fff;
 $sidebar-width: 100%;
 $sidebar-menu-item-color: rgba(255, 255, 255, 0.9);
+$sidebar-menu-item-color-active: rgb(255, 255, 255);
 $sidebar-popover-submenu-bg: rgb(1, 20, 62);
 $sidebar-menu-label-color: rgba(255, 255, 255, 0.5);
-$sidebar-submenu-item-color: rgba(255, 255, 255, 0.55);
-$sidebar-submenu-item-hover-color: rgba(255, 255, 255, 0.8);
+$sidebar-submenu-item-color: rgba(255, 255, 255, 0.6);
+$sidebar-submenu-item-hover-color: rgba(255, 255, 255, 0.85);
 $sidebar-logo-opacity: 0.55;
 $sidebar-submenu-item-bg-color: #01287d;

@@ -71,7 +72,7 @@ $sidebar-submenu-item-bg-color: #01287d;
      &:hover,
      &.bp3-active {
        background: $sidebar-submenu-item-bg-color;
-        color: $sidebar-menu-item-color;
+        color: $sidebar-menu-item-color-active;
      }
      &:focus,
      &:active {
@@ -105,9 +106,8 @@ $sidebar-submenu-item-bg-color: #01287d;
          padding-bottom: 6px;
          padding-top: 6px;
        }
-
        .#{$ns}-menu-item {
-          padding: 7px 16px 7px 18px;
+          padding: 7px 16px;
          font-size: 15px;
          color: $sidebar-submenu-item-color;

@@ -116,7 +116,6 @@ $sidebar-submenu-item-bg-color: #01287d;
            background: transparent;
            color: $sidebar-submenu-item-hover-color;
          }
-
          &.bp3-active{
            font-weight: 500;
          }
@@ -173,7 +172,7 @@ $sidebar-submenu-item-bg-color: #01287d;
      min-width: 50px;

      &:hover{
-        min-width: 220px;
+        min-width: 190px;

        .sidebar__head-logo{

--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -218,4 +218,28 @@ export const repeatValue = (value, len) => {
    arr.push(value);
  }
  return arr;
-};
+};
+
+export const flatToNestedArray = (
+  data,
+  config = { id: 'id', parentId: 'parent_id' }
+) => {
+  const map = {};
+  const nestedArray = [];
+
+  data.forEach((item) => {
+    map[item[config.id]] = item;
+    map[item[config.id]].children = [];
+  });
+  data.forEach((item) => {
+    const parentItemId = item[config.parentId];
+
+    if (!item[config.parentId]) {
+      nestedArray.push(item);
+    }
+    if (parentItemId) {
+      map[parentItemId].children.push(item);
+    }
+  });
+  return nestedArray;
+};