From 9d9c7c1568ff7f2fe60666fd55cab1863b9e5744 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Sun, 12 Jul 2020 12:31:12 +0200
Subject: [PATCH] - fix: store children accounts with Redux store. - fix: store
 expense payment date with transactions. - fix: Total assets, liabilities and
 equity on balance sheet. - tweaks: dashboard content and sidebar style. -
 fix: reset form with contact list on journal entry form. - feat: Add hints to
 filter accounts in financial statements.

---
 client/src/components/ContactsListField.js    |  58 +-
 .../components/Dashboard/DashboardTopbar.js   |  13 +-
 client/src/components/DataTable.js            |  29 +-
 .../DataTableCells/ContactsListFieldCell.js   |  18 +-
 client/src/components/FinancialSheet.js       |  21 +-
 client/src/components/ListSelect.js           |  64 ++-
 client/src/components/index.js                |   2 +
 client/src/components/modifiers.js            |   3 +
 .../Accounting/MakeJournalEntriesForm.js      |   3 +-
 .../Accounting/ManualJournalActionsBar.js     |   2 +-
 .../Accounting/ManualJournalsDataTable.js     |   1 +
 .../src/containers/Accounts/AccountsChart.js  |   8 +
 .../containers/Accounts/AccountsDataTable.js  |   5 +
 .../src/containers/Accounts/withAccounts.js   |   1 -
 client/src/containers/Customers/Customer.js   |  10 +-
 .../Customers/CustomerActionsBar.js           |  26 +-
 .../src/containers/Customers/CustomerForm.js  |  11 +-
 ...oCustomer.js => CustomerTypeRadioField.js} |   0
 .../containers/Dialogs/AccountFormDialog.js   |  16 +-
 .../containers/Expenses/ExpenseFormHeader.js  |   2 +-
 .../BalanceSheet/BalanceSheetHeader.js        |  89 +--
 .../BalanceSheet/BalanceSheetTable.js         |  42 +-
 .../BalanceSheet/withBalanceSheetDetail.js    |   2 +
 .../FinancialAccountsFilter.js                |  73 +++
 .../GeneralLedger/GeneralLedger.js            |   1 -
 .../GeneralLedger/GeneralLedgerHeader.js      |   4 +-
 .../GeneralLedger/GeneralLedgerTable.js       |  13 +-
 .../Journal/JournalTable.js                   |   8 +-
 .../ProfitLossSheet/ProfitLossSheetHeader.js  |  22 +-
 .../TrialBalanceSheetHeader.js                |  66 ++-
 .../TrialBalanceSheetTable.js                 |  10 +-
 .../Resources/withResourceDetails.js          |   4 +-
 client/src/lang/en/index.js                   |  13 +-
 .../src/store/accounts/accounts.selectors.js  |  37 +-
 .../financialStatements.reducer.js            |  58 +-
 .../src/store/resources/resources.reducer.js  |   2 +-
 client/src/style/components/data-table.scss   |  12 +-
 client/src/style/objects/form.scss            |  11 +-
 client/src/style/pages/accounts-chart.scss    |   5 +-
 client/src/style/pages/dashboard.scss         |  18 +-
 .../src/style/pages/financial-statements.scss |  77 ++-
 client/src/style/views/Sidebar.scss           |  13 +-
 client/src/utils.js                           |  26 +-
 common/utils.js                               |  34 +-
 server/bin/utils.js                           |  14 +
 server/src/data/BalanceSheetStructure.js      |  62 ++
 ...190822214904_create_account_types_table.js |   1 +
 .../src/database/seeds/seed_account_types.js  |  62 +-
 server/src/http/controllers/Accounts.js       | 104 ++--
 server/src/http/controllers/Expenses.js       |   1 +
 .../FinancialStatements/BalanceSheet.js       | 209 ++++---
 .../FinancialStatements/ProfitLossSheet.js    | 228 ++++----
 .../http/controllers/Sales/SalesEstimates.js  |   0
 .../http/controllers/Sales/SalesInvoicing.js  |   0
 .../controllers/Sales/SalesPaymentReceive.js  |   0
 .../http/controllers/Sales/SalesReceipt.js    |   0
 server/src/utils/index.js                     |  16 +-
 server/tests/routes/accounting.test.js        |   2 +-
 server/tests/routes/balance_sheet.test.js     | 541 ++++++++++++++++++
 .../tests/routes/financial_statements.test.js | 441 +-------------
 60 files changed, 1685 insertions(+), 929 deletions(-)
 rename client/src/containers/Customers/{RadioCustomer.js => CustomerTypeRadioField.js} (100%)
 create mode 100644 client/src/containers/FinancialStatements/FinancialAccountsFilter.js
 create mode 100644 server/src/data/BalanceSheetStructure.js
 create mode 100644 server/src/http/controllers/Sales/SalesEstimates.js
 create mode 100644 server/src/http/controllers/Sales/SalesInvoicing.js
 create mode 100644 server/src/http/controllers/Sales/SalesPaymentReceive.js
 create mode 100644 server/src/http/controllers/Sales/SalesReceipt.js
 create mode 100644 server/tests/routes/balance_sheet.test.js

diff --git a/client/src/components/ContactsListField.js b/client/src/components/ContactsListField.js
index 8db5fa0de..39a07d739 100644
--- 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}
+    />
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Dashboard/DashboardTopbar.js b/client/src/components/Dashboard/DashboardTopbar.js
index a598c06b9..50326792a 100644
--- 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} />}
diff --git a/client/src/components/DataTable.js b/client/src/components/DataTable.js
index cffcaaba1..7a9134a27 100644
--- 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}
diff --git a/client/src/components/DataTableCells/ContactsListFieldCell.js b/client/src/components/DataTableCells/ContactsListFieldCell.js
index e04e35ec3..0c3cd966f 100644
--- 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>
-  )
+  );
 }
\ No newline at end of file
diff --git a/client/src/components/FinancialSheet.js b/client/src/components/FinancialSheet.js
index 581f67023..a387d6c3d 100644
--- 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}
diff --git a/client/src/components/ListSelect.js b/client/src/components/ListSelect.js
index 88b7440e2..6142c3688 100644
--- 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>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 49025b12a..3883e9cff 100644
--- 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,
 };
\ No newline at end of file
diff --git a/client/src/components/modifiers.js b/client/src/components/modifiers.js
index f4f9dbb5a..891c281d0 100644
--- 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'
 }
\ No newline at end of file
diff --git a/client/src/containers/Accounting/MakeJournalEntriesForm.js b/client/src/containers/Accounting/MakeJournalEntriesForm.js
index e247bca8c..3f5d89176 100644
--- 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: '',
     }),
     [],
diff --git a/client/src/containers/Accounting/ManualJournalActionsBar.js b/client/src/containers/Accounting/ManualJournalActionsBar.js
index e687d7a4d..bfd49572a 100644
--- 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
diff --git a/client/src/containers/Accounting/ManualJournalsDataTable.js b/client/src/containers/Accounting/ManualJournalsDataTable.js
index f88b7c1f2..71bfbb4a2 100644
--- 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)}
         />
diff --git a/client/src/containers/Accounts/AccountsChart.js b/client/src/containers/Accounts/AccountsChart.js
index 2c225618f..de9ee1a6a 100644
--- 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
diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js
index bca718d49..39493f877 100644
--- 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}
     />
   );
 }
diff --git a/client/src/containers/Accounts/withAccounts.js b/client/src/containers/Accounts/withAccounts.js
index 38186b3c1..711889b8a 100644
--- 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();
 
diff --git a/client/src/containers/Customers/Customer.js b/client/src/containers/Customers/Customer.js
index 7d8b0f70f..c179fc8f5 100644
--- 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
diff --git a/client/src/containers/Customers/CustomerActionsBar.js b/client/src/containers/Customers/CustomerActionsBar.js
index 8dae4374b..2f2e62318 100644
--- 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);
diff --git a/client/src/containers/Customers/CustomerForm.js b/client/src/containers/Customers/CustomerForm.js
index f535623ac..9157d100b 100644
--- 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);
diff --git a/client/src/containers/Customers/RadioCustomer.js b/client/src/containers/Customers/CustomerTypeRadioField.js
similarity index 100%
rename from client/src/containers/Customers/RadioCustomer.js
rename to client/src/containers/Customers/CustomerTypeRadioField.js
diff --git a/client/src/containers/Dialogs/AccountFormDialog.js b/client/src/containers/Dialogs/AccountFormDialog.js
index 6d43a91f3..542f28ca1 100644
--- 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' ? (
diff --git a/client/src/containers/Expenses/ExpenseFormHeader.js b/client/src/containers/Expenses/ExpenseFormHeader.js
index 82ed9b620..adff36a41 100644
--- 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>
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
index 6c7d2ff68..49bfba256 100644
--- 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);
\ No newline at end of file
+)(BalanceSheetHeader);
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
index 94090a0b0..0060e214a 100644
--- 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,
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
index e69448f30..19a3c85ce 100644
--- 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,
diff --git a/client/src/containers/FinancialStatements/FinancialAccountsFilter.js b/client/src/containers/FinancialStatements/FinancialAccountsFilter.js
new file mode 100644
index 000000000..b2401dbfe
--- /dev/null
+++ 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}
+    />
+  );
+}
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
index 2ce9bc12d..ac1f45d42 100644
--- 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 = () => { };
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
index 99a34682d..bfc4c1e6b 100644
--- 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) => {
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
index 46b3b870e..55d95800d 100644
--- 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"
diff --git a/client/src/containers/FinancialStatements/Journal/JournalTable.js b/client/src/containers/FinancialStatements/Journal/JournalTable.js
index c7b204242..31ccf99ae 100644
--- 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"
diff --git a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
index b3ab27135..8210e19f3 100644
--- 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}
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
index 16f4e8cd2..03cba7b3c 100644
--- 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);
\ No newline at end of file
+)(TrialBalanceSheetHeader);
diff --git a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
index 193ed756c..2e2171970 100644
--- 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>
diff --git a/client/src/containers/Resources/withResourceDetails.js b/client/src/containers/Resources/withResourceDetails.js
index 5f1fc3d56..d77e1a661 100644
--- 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 =  {
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index 6ed582826..b501e64b7 100644
--- 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'
 };
diff --git a/client/src/store/accounts/accounts.selectors.js b/client/src/store/accounts/accounts.selectors.js
index 7033a556e..4c086dfe6 100644
--- 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);
-  }
-);
\ No newline at end of file
+  },
+);
diff --git a/client/src/store/financialStatement/financialStatements.reducer.js b/client/src/store/financialStatement/financialStatements.reducer.js
index d3832aa80..8576b228f 100644
--- 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',
+  ),
 });
diff --git a/client/src/store/resources/resources.reducer.js b/client/src/store/resources/resources.reducer.js
index f814a8c84..07e0d3f91 100644
--- 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) => {
diff --git a/client/src/style/components/data-table.scss b/client/src/style/components/data-table.scss
index b1b1b193d..b67db572d 100644
--- 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;
         }
       }
     }  
diff --git a/client/src/style/objects/form.scss b/client/src/style/objects/form.scss
index 65b5e8134..b34e3f34c 100644
--- 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;
 }
\ No newline at end of file
diff --git a/client/src/style/pages/accounts-chart.scss b/client/src/style/pages/accounts-chart.scss
index cb861702b..398984175 100644
--- 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;
     }
diff --git a/client/src/style/pages/dashboard.scss b/client/src/style/pages/dashboard.scss
index 073b2502b..1c34c9f12 100644
--- 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;
     }
   }
 
diff --git a/client/src/style/pages/financial-statements.scss b/client/src/style/pages/financial-statements.scss
index f4c66e07e..ab637f636 100644
--- 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;
     }
-
   }
 }
\ No newline at end of file
diff --git a/client/src/style/views/Sidebar.scss b/client/src/style/views/Sidebar.scss
index 5b6290406..d46a4512b 100644
--- 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{
 
diff --git a/client/src/utils.js b/client/src/utils.js
index 2135f7d15..021ef3a7a 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -218,4 +218,28 @@ export const repeatValue = (value, len) => {
     arr.push(value);
   }
   return arr;
-};
\ No newline at end of file
+};
+
+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;
+};
diff --git a/common/utils.js b/common/utils.js
index 907c3c7f0..a6f8d6847 100644
--- a/common/utils.js
+++ b/common/utils.js
@@ -1,4 +1,34 @@
 
-export function roundTo(num, to = 2) {
+function roundTo(num, to = 2) {
   return +(Math.round(num + "e+" + to)  + "e-" + to);
-}
\ No newline at end of file
+}
+
+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;
+};
+
+export default {
+  roundTo,
+  flatToNestedArray,
+};
\ No newline at end of file
diff --git a/server/bin/utils.js b/server/bin/utils.js
index a00578baf..eaf5ae4e8 100644
--- a/server/bin/utils.js
+++ b/server/bin/utils.js
@@ -57,6 +57,19 @@ function log(text) {
   console.log(text);
 }
 
+function getDeepValue(prop, obj) {
+  if (!Object.keys(obj).length) { return []; }
+
+  return Object.entries(obj).reduce((acc, [key, val]) => {
+    if (key === prop) {
+      acc.push(val);
+    } else {
+      acc.push(Array.isArray(val) ? val.map(getIds).flat() : getIds(val));
+    }
+    return acc.flat();
+  }, []);
+}
+
 module.exports = {
   initTenantKnex,
   initSystemKnex,
@@ -64,4 +77,5 @@ module.exports = {
   exit,
   success,
   log,
+  getDeepValue,
 }
\ No newline at end of file
diff --git a/server/src/data/BalanceSheetStructure.js b/server/src/data/BalanceSheetStructure.js
new file mode 100644
index 000000000..5b9261ad1
--- /dev/null
+++ b/server/src/data/BalanceSheetStructure.js
@@ -0,0 +1,62 @@
+
+export default [
+  {
+    name: 'Assets',
+    section_type: 'assets',
+    type: 'section',
+    children: [
+      {
+        name: 'Current Asset',
+        type: 'section',
+        _accounts_types_related: ['current_asset'],
+      },
+      {
+        name: 'Fixed Asset',
+        type: 'section',
+        _accounts_types_related: ['fixed_asset'],
+      },
+      {
+        name: 'Other Asset',
+        type: 'section',
+        _accounts_types_related: ['other_asset'],
+      },
+    ],
+    _forceShow: true,
+  },
+  {
+    name: 'Liabilities and Equity',
+    section_type: 'liabilities_equity',
+    type: 'section',
+    children: [
+      {
+        name: 'Liabilities',
+        section_type: 'liability',
+        type: 'section',
+        children: [
+          {
+            name: 'Current Liability',
+            type: 'section',
+            _accounts_types_related: ['current_liability'],
+          },
+          {
+            name: 'Long Term Liability',
+            type: 'section',
+            _accounts_types_related: ['long_term_liability'],
+          },
+          {
+            name: 'Other Liability',
+            type: 'section',
+            _accounts_types_related: ['other_liability'],
+          },
+        ],
+      },
+      {
+        name: 'Equity',
+        section_type: 'equity',
+        type: 'section',
+        _accounts_types_related: ['equity'],
+      },
+    ],
+    _forceShow: true,
+  },
+];
diff --git a/server/src/database/migrations/20190822214904_create_account_types_table.js b/server/src/database/migrations/20190822214904_create_account_types_table.js
index 0dd47c741..234e45830 100644
--- a/server/src/database/migrations/20190822214904_create_account_types_table.js
+++ b/server/src/database/migrations/20190822214904_create_account_types_table.js
@@ -6,6 +6,7 @@ exports.up = (knex) => {
     table.string('key');
     table.string('normal');
     table.string('root_type');
+    table.string('child_type');
     table.boolean('balance_sheet');
     table.boolean('income_sheet');
   }).raw('ALTER TABLE `ACCOUNT_TYPES` AUTO_INCREMENT = 1000').then(() => {
diff --git a/server/src/database/seeds/seed_account_types.js b/server/src/database/seeds/seed_account_types.js
index a81cc5d0a..36df5ad45 100644
--- a/server/src/database/seeds/seed_account_types.js
+++ b/server/src/database/seeds/seed_account_types.js
@@ -11,6 +11,7 @@ exports.seed = (knex) => {
           key: 'fixed_asset',
           normal: 'debit',
           root_type: 'asset',
+          child_type: 'fixed_asset',
           balance_sheet: true,
           income_sheet: false,
         },
@@ -20,6 +21,17 @@ exports.seed = (knex) => {
           key: 'current_asset',
           normal: 'debit',
           root_type: 'asset',
+          child_type: 'current_asset',
+          balance_sheet: true,
+          income_sheet: false,
+        },
+        {
+          id: 14,
+          name: 'Other Asset',
+          key: 'other_asset',
+          normal: 'debit',
+          root_type: 'asset',
+          child_type: 'other_asset',
           balance_sheet: true,
           income_sheet: false,
         },
@@ -29,6 +41,7 @@ exports.seed = (knex) => {
           key: 'long_term_liability',
           normal: 'credit',
           root_type: 'liability',
+          child_type: 'long_term_liability',
           balance_sheet: false,
           income_sheet: true,
         },
@@ -38,6 +51,17 @@ exports.seed = (knex) => {
           key: 'current_liability',
           normal: 'credit',
           root_type: 'liability',
+          child_type: 'current_liability',
+          balance_sheet: false,
+          income_sheet: true,
+        },
+        {
+          id: 13,
+          name: 'Other Liability',
+          key: 'other_liability',
+          normal: 'credit',
+          root_type: 'liability',
+          child_type: 'other_liability',
           balance_sheet: false,
           income_sheet: true,
         },
@@ -47,6 +71,7 @@ exports.seed = (knex) => {
           key: 'equity',
           normal: 'credit',
           root_type: 'equity',
+          child_type: 'equity',
           balance_sheet: true,
           income_sheet: false,
         },
@@ -56,6 +81,16 @@ exports.seed = (knex) => {
           key: 'expense',
           normal: 'debit',
           root_type: 'expense',
+          child_type: 'expense',
+          balance_sheet: false,
+          income_sheet: true,
+        },
+        {
+          id: 10,
+          name: 'Other Expense',
+          key: 'other_expense',
+          normal: 'debit',
+          root_type: 'expense',
           balance_sheet: false,
           income_sheet: true,
         },
@@ -65,24 +100,47 @@ exports.seed = (knex) => {
           key: 'income',
           normal: 'credit',
           root_type: 'income',
+          child_type: 'income',
           balance_sheet: false,
           income_sheet: true,
         },
+        {
+          id: 11,
+          name: 'Other Income',
+          key: 'other_income',
+          normal: 'credit',
+          root_type: 'income',
+          child_type: 'other_income',
+          balance_sheet: false,
+          income_sheet: true,
+        },
+        {
+          id: 12,
+          name: 'Cost of Goods Sold (COGS)',
+          key: 'cost_of_goods_sold',
+          normal: 'debit',
+          root_type: 'asset',
+          child_type: 'current_asset',
+          balance_sheet: true,
+          income_sheet: false,
+        },
         {
           id: 8,
-          name: 'Accounts Receivable',
+          name: 'Accounts Receivable (A/R)',
           key: 'accounts_receivable',
           normal: 'debit',
           root_type: 'asset',
+          child_type: 'current_asset',
           balance_sheet: true,
           income_sheet: false,
         },
         {
           id: 9,
-          name: 'Accounts Payable',
+          name: 'Accounts Payable (A/P)',
           key: 'accounts_payable',
           normal: 'credit',
           root_type: 'liability',
+          child_type: 'current_liability',
           balance_sheet: true,
           income_sheet: false,
         },
diff --git a/server/src/http/controllers/Accounts.js b/server/src/http/controllers/Accounts.js
index 1b742cb2a..8d82c870c 100644
--- a/server/src/http/controllers/Accounts.js
+++ b/server/src/http/controllers/Accounts.js
@@ -3,7 +3,6 @@ import { check, validationResult, param, query } from 'express-validator';
 import { difference } from 'lodash';
 import asyncMiddleware from '@/http/middleware/asyncMiddleware';
 import JournalPoster from '@/services/Accounting/JournalPoster';
-import NestedSet from '@/collection/NestedSet';
 import {
   mapViewRolesToConditionals,
   mapFilterRolesToDynamicFilter,
@@ -97,9 +96,13 @@ export default {
   newAccount: {
     validation: [
       check('name').exists().isLength({ min: 3, max: 255 }).trim().escape(),
-      check('code').optional().isLength({ min: 3, max: 6, }).trim().escape(),
+      check('code').optional().isLength({ min: 3, max: 6 }).trim().escape(),
       check('account_type_id').exists().isNumeric().toInt(),
       check('description').optional().isLength({ max: 512 }).trim().escape(),
+      check('parent_account_id')
+        .optional({ nullable: true })
+        .isNumeric()
+        .toInt(),
     ],
     async handler(req, res) {
       const validationErrors = validationResult(req);
@@ -125,7 +128,6 @@ export default {
         foundAccountCodePromise,
         foundAccountTypePromise,
       ]);
-
       if (foundAccountCodePromise && foundAccountCode.length > 0) {
         return res.boom.badRequest(null, {
           errors: [{ type: 'NOT_UNIQUE_CODE', code: 100 }],
@@ -136,6 +138,24 @@ export default {
           errors: [{ type: 'NOT_EXIST_ACCOUNT_TYPE', code: 200 }],
         });
       }
+      if (form.parent_account_id) {
+        const parentAccount = await Account.query()
+          .where('id', form.parent_account_id)
+          .first();
+
+        if (!parentAccount) {
+          return res.boom.badRequest(null, {
+            errors: [{ type: 'PARENT_ACCOUNT_NOT_FOUND', code: 300 }],
+          });
+        }
+        if (parentAccount.accountTypeId !== form.parent_account_id) {
+          return res.boom.badRequest(null, {
+            errors: [
+              { type: 'PARENT.ACCOUNT.HAS.DIFFERENT.ACCOUNT.TYPE', code: 400 },
+            ],
+          });
+        }
+      }
       const insertedAccount = await Account.query().insertAndFetch({ ...form });
 
       return res.status(200).send({ account: { ...insertedAccount } });
@@ -148,8 +168,8 @@ export default {
   editAccount: {
     validation: [
       param('id').exists().toInt(),
-      check('name').exists().isLength({ min: 3, max: 255, }).trim().escape(),
-      check('code').optional().isLength({ min: 3, max: 6, }).trim().escape(),
+      check('name').exists().isLength({ min: 3, max: 255 }).trim().escape(),
+      check('code').optional().isLength({ min: 3, max: 6 }).trim().escape(),
       check('account_type_id').exists().isNumeric().toInt(),
       check('description').optional().isLength({ max: 512 }).trim().escape(),
     ],
@@ -189,7 +209,26 @@ export default {
           errorReasons.push({ type: 'NOT_UNIQUE_CODE', code: 200 });
         }
       }
+      if (form.parent_account_id) {
+        const parentAccount = await Account.query()
+          .where('id', form.parent_account_id)
+          .whereNot('id', account.id)
+          .first();
 
+        if (!parentAccount) {
+          errorReasons.push({
+            type: 'PARENT_ACCOUNT_NOT_FOUND',
+            code: 300,
+          });
+        }
+        if (parentAccount.accountTypeId !== account.parentAccountId) {
+          return res.boom.badRequest(null, {
+            errors: [
+              { type: 'PARENT.ACCOUNT.HAS.DIFFERENT.ACCOUNT.TYPE', code: 400 },
+            ],
+          });
+        }
+      }
       if (errorReasons.length > 0) {
         return res.status(400).send({ errors: errorReasons });
       }
@@ -238,11 +277,22 @@ export default {
           errors: [{ type: 'ACCOUNT.PREDEFINED', code: 200 }],
         });
       }
+
+      // Validate the account has no child accounts.
+      const childAccounts = await Account.query().where(
+        'parent_account_id',
+        account.id
+      );
+
+      if (childAccounts.length > 0) {
+        return res.boom.badRequest(null, {
+          errors: [{ type: 'ACCOUNT.HAS.CHILD.ACCOUNTS', code: 300 }],
+        });
+      }
       const accountTransactions = await AccountTransaction.query().where(
         'account_id',
         account.id
       );
-
       if (accountTransactions.length > 0) {
         return res.boom.badRequest(null, {
           errors: [{ type: 'ACCOUNT.HAS.ASSOCIATED.TRANSACTIONS', code: 100 }],
@@ -279,8 +329,8 @@ export default {
         });
       }
       const filter = {
+        display_type: 'flat',
         account_types: [],
-        display_type: 'tree',
         filter_roles: [],
         sort_order: 'asc',
         ...req.query,
@@ -364,38 +414,18 @@ export default {
         return res.status(400).send({ errors: errorReasons });
       }
 
-      const query = Account.query()
-        // .remember()
-        .onBuild((builder) => {
-          builder.modify('filterAccountTypes', filter.account_types);
-          builder.withGraphFetched('type');
-          builder.withGraphFetched('balance');
-
-          dynamicFilter.buildQuery()(builder);
-
-          // console.log(builder.toKnexQuery().toSQL());
-        })
-        .toKnexQuery()
-        .toSQL();
-
-      console.log(query);
-
-      const accounts = await Account.query()
-        // .remember()
-        .onBuild((builder) => {
-          builder.modify('filterAccountTypes', filter.account_types);
-          builder.withGraphFetched('type');
-          builder.withGraphFetched('balance');
-
-          dynamicFilter.buildQuery()(builder);
-
-          // console.log(builder.toKnexQuery().toSQL());
-        });
-
-      const nestedAccounts = Account.toNestedArray(accounts);
+      const accounts = await Account.query().onBuild((builder) => {
+        builder.modify('filterAccountTypes', filter.account_types);
+        builder.withGraphFetched('type');
+        builder.withGraphFetched('balance');
 
+        dynamicFilter.buildQuery()(builder);
+      });
       return res.status(200).send({
-        accounts: nestedAccounts,
+        accounts:
+          filter.display_type === 'tree'
+            ? Account.toNestedArray(accounts)
+            : accounts,
         ...(view
           ? {
               customViewId: view.id,
diff --git a/server/src/http/controllers/Expenses.js b/server/src/http/controllers/Expenses.js
index c8f635c6f..d17e5d4b9 100644
--- a/server/src/http/controllers/Expenses.js
+++ b/server/src/http/controllers/Expenses.js
@@ -181,6 +181,7 @@ export default {
       const mixinEntry = {
         referenceType: 'Expense',
         referenceId: expenseTransaction.id,
+        date: moment(form.payment_date).format('YYYY-MM-DD'),
         userId: user.id,
         draft: !form.publish,
       };
diff --git a/server/src/http/controllers/FinancialStatements/BalanceSheet.js b/server/src/http/controllers/FinancialStatements/BalanceSheet.js
index d8d0cb5d9..397e5cd7c 100644
--- a/server/src/http/controllers/FinancialStatements/BalanceSheet.js
+++ b/server/src/http/controllers/FinancialStatements/BalanceSheet.js
@@ -1,13 +1,12 @@
 import express from 'express';
-import { query, oneOf, validationResult } from 'express-validator';
+import { query, validationResult } from 'express-validator';
 import moment from 'moment';
-import { pick, difference, groupBy } from 'lodash';
+import { pick, omit, sumBy } from 'lodash';
 import JournalPoster from '@/services/Accounting/JournalPoster';
-import { dateRangeCollection } from '@/utils';
-import DependencyGraph from '@/lib/DependencyGraph';
-import asyncMiddleware from '@/http/middleware/asyncMiddleware'
+import { dateRangeCollection, itemsStartWith, getTotalDeep } from '@/utils';
+import asyncMiddleware from '@/http/middleware/asyncMiddleware';
 import { formatNumberClosure } from './FinancialStatementMixin';
-
+import BalanceSheetStructure from '@/data/BalanceSheetStructure'; 
 
 export default {
   /**
@@ -16,13 +15,15 @@ export default {
   router() {
     const router = express.Router();
 
-    router.get('/', 
+    router.get(
+      '/',
       this.balanceSheet.validation,
-      asyncMiddleware(this.balanceSheet.handler));
+      asyncMiddleware(this.balanceSheet.handler)
+    );
 
     return router;
   },
-  
+
   /**
    * Retrieve the balance sheet.
    */
@@ -32,7 +33,8 @@ export default {
       query('from_date').optional(),
       query('to_date').optional(),
       query('display_columns_type').optional().isIn(['date_periods', 'total']),
-      query('display_columns_by').optional({ nullable: true, checkFalsy: true })
+      query('display_columns_by')
+        .optional({ nullable: true, checkFalsy: true })
         .isIn(['year', 'month', 'week', 'day', 'quarter']),
       query('number_format.no_cents').optional().isBoolean().toBoolean(),
       query('number_format.divide_1000').optional().isBoolean().toBoolean(),
@@ -45,7 +47,8 @@ export default {
 
       if (!validationErrors.isEmpty()) {
         return res.boom.badData(null, {
-          code: 'validation_error', ...validationErrors,
+          code: 'validation_error',
+          ...validationErrors,
         });
       }
       const { Account, AccountType } = req.models;
@@ -67,106 +70,168 @@ export default {
       if (!Array.isArray(filter.account_ids)) {
         filter.account_ids = [filter.account_ids];
       }
-      
       // Account balance formmatter based on the given query.
-      const balanceFormatter = formatNumberClosure(filter.number_format);
-      const comparatorDateType = filter.display_columns_type === 'total' ? 'day' : filter.display_columns_by;
-
-      const balanceSheetTypes = await AccountType.query().where('balance_sheet', true);
+      const amountFormatter = formatNumberClosure(filter.number_format);
+      const comparatorDateType =
+        filter.display_columns_type === 'total'
+          ? 'day'
+          : filter.display_columns_by;
 
+      const balanceSheetTypes = await AccountType.query().where(
+        'balance_sheet',
+        true
+      );
       // Fetch all balance sheet accounts from the storage.
       const accounts = await Account.query()
-        // .remember('balance_sheet_accounts')
-        .whereIn('account_type_id', balanceSheetTypes.map((a) => a.id))
+        .whereIn(
+          'account_type_id',
+          balanceSheetTypes.map((a) => a.id)
+        )
         .modify('filterAccounts', filter.account_ids)
         .withGraphFetched('type')
         .withGraphFetched('transactions')
         .modifyGraph('transactions', (builder) => {
           builder.modify('filterDateRange', null, filter.to_date);
         });
-
       // Accounts dependency graph.
-      const accountsGraph = DependencyGraph.fromArray(
-        accounts, { itemId: 'id', parentItemId: 'parentAccountId' }
-      );
+      const accountsGraph = Account.toDependencyGraph(accounts);
       // Load all entries that associated to the given accounts.
       const journalEntriesCollected = Account.collectJournalEntries(accounts);
       const journalEntries = new JournalPoster(accountsGraph);
-
       journalEntries.loadEntries(journalEntriesCollected);
 
-      // Date range collection. 
-      const dateRangeSet = (filter.display_columns_type === 'date_periods')
-        ? dateRangeCollection(
-          filter.from_date, filter.to_date, comparatorDateType,
-        ) : [];
-
+      // Date range collection.
+      const dateRangeSet =
+        filter.display_columns_type === 'date_periods'
+          ? dateRangeCollection(
+              filter.from_date,
+              filter.to_date,
+              comparatorDateType
+            )
+          : [];
       // Gets the date range set from start to end date.
-      const totalPeriods = (account) => ({
+      const getAccountTotalPeriods = (account) => ({
         total_periods: dateRangeSet.map((date) => {
-          const amount = journalEntries.getAccountBalance(account.id, date, comparatorDateType);
-
+          const amount = journalEntries.getAccountBalance(
+            account.id,
+            date,
+            comparatorDateType
+          );
           return {
             amount,
-            formatted_amount: balanceFormatter(amount),
             date,
+            formatted_amount: amountFormatter(amount),
           };
         }),
       });
-
-      const accountsMapperToResponse = (account) => {
-        // Calculates the closing balance to the given date.
-        const closingBalance = journalEntries.getAccountBalance(account.id, filter.to_date);
+      // Retrieve accounts total periods.
+      const getAccountsTotalPeriods = (_accounts) =>
+        Object.values(
+          dateRangeSet.reduce((acc, date, index) => {
+            const amount = sumBy(_accounts, `total_periods[${index}].amount`);
+            acc[date] = {
+              date,
+              amount,
+              formatted_amount: amountFormatter(amount),
+            };
+            return acc;
+          }, {})
+        );
+      // Retrieve account total and total periods with account meta.
+      const getAccountTotal = (account) => {
+        const closingBalance = journalEntries.getAccountBalance(
+          account.id,
+          filter.to_date
+        );
+        const totalPeriods =
+          (filter.display_columns_type === 'date_periods' &&
+            getAccountTotalPeriods(account)) ||
+          null;
 
         return {
           ...pick(account, ['id', 'index', 'name', 'code', 'parentAccountId']),
-
-          // Date periods when display columns.
-          ...(filter.display_columns_type === 'date_periods') && totalPeriods(account),
-
+          ...(totalPeriods && { totalPeriods }),
           total: {
             amount: closingBalance,
-            formatted_amount: balanceFormatter(closingBalance),
+            formatted_amount: amountFormatter(closingBalance),
             date: filter.to_date,
           },
         };
       };
+      // Get accounts total of the given structure section
+      const getAccountsSectionTotal = (_accounts) => {
+        const total = getTotalDeep(_accounts, 'children', 'total.amount');
+        return {
+          total: {
+            total,
+            formatted_amount: amountFormatter(total),
+          },
+        };
+      };
+      // Strcuture accounts related mapper.
+      const structureAccountsRelatedMapper = (accountsTypes) => {
+        const filteredAccounts = accounts
+          // Filter accounts that have no transaction when `none_zero` is on.
+          .filter(
+            (account) => account.transactions.length > 0 || !filter.none_zero
+          )
+          // Filter accounts that associated to the section accounts types.
+          .filter(
+            (account) => accountsTypes.indexOf(account.type.childType) !== -1
+          )
+          .map(getAccountTotal);
+        // Gets total amount of the given accounts.
+        const totalAmount = sumBy(filteredAccounts, 'total.amount');
 
-      // Retrieve all assets accounts.
-      const assetsAccounts = accounts.filter((account) => (
-        account.type.normal === 'debit'
-          && (account.transactions.length > 0 || !filter.none_zero)))
-          .map(accountsMapperToResponse);
-
-      // Retrieve all liability accounts.
-      const liabilitiesAccounts = accounts.filter((account) => (
-        account.type.normal === 'credit'
-          && (account.transactions.length > 0 || !filter.none_zero)))
-          .map(accountsMapperToResponse);
-
-      // Retrieve the asset balance sheet.
-      const assetsAccountsResponse = Account.toNestedArray(assetsAccounts);
-
-      // Retrieve liabilities and equity balance sheet.
-      const liabilitiesEquityResponse = Account.toNestedArray(liabilitiesAccounts);
+        return {
+          children: Account.toNestedArray(filteredAccounts),
+          total: {
+            amount: totalAmount,
+            formatted_amount: amountFormatter(totalAmount),
+          },
+          ...(filter.display_columns_type === 'date_periods'
+            ? {
+                total_periods: getAccountsTotalPeriods(filteredAccounts),
+              }
+            : {}),
+        };
+      };
+      // Structure section mapper.
+      const structureSectionMapper = (structure) => {
+        const result = {
+          ...omit(structure, itemsStartWith(Object.keys(structure), '_')),
+          ...(structure.children
+            ? {
+                children: balanceSheetWalker(structure.children),
+              }
+            : {}),
+          ...(structure._accounts_types_related
+            ? {
+                ...structureAccountsRelatedMapper(
+                  structure._accounts_types_related
+                ),
+              }
+            : {}),
+        };
+        return {
+          ...result,
+          ...(!structure._accounts_types_related
+            ? getAccountsSectionTotal(result.children)
+            : {}),
+        };
+      };
+      const balanceSheetWalker = (reportStructure) =>
+        reportStructure.map(structureSectionMapper).filter(
+          // Filter the structure sections that have no children.
+          (structure) => structure.children.length > 0 || structure._forceShow
+        );
 
       // Response.
       return res.status(200).send({
         query: { ...filter },
         columns: { ...dateRangeSet },
-        accounts: [
-          {
-            name: 'Assets',
-            type: 'assets',
-            children: [...assetsAccountsResponse],
-          },
-          {
-            name: 'Liabilities & Equity',
-            type: 'liabilities_equity',
-            children: [...liabilitiesEquityResponse],
-          },
-        ],
+        balance_sheet: [...balanceSheetWalker(BalanceSheetStructure)],
       });
     },
   },
-}
\ No newline at end of file
+};
diff --git a/server/src/http/controllers/FinancialStatements/ProfitLossSheet.js b/server/src/http/controllers/FinancialStatements/ProfitLossSheet.js
index 1e85427d3..9b70ea808 100644
--- a/server/src/http/controllers/FinancialStatements/ProfitLossSheet.js
+++ b/server/src/http/controllers/FinancialStatements/ProfitLossSheet.js
@@ -1,12 +1,11 @@
 import express from 'express';
 import { query, oneOf, validationResult } from 'express-validator';
 import moment from 'moment';
-import { pick } from 'lodash';
+import { pick, sumBy } from 'lodash';
 import JournalPoster from '@/services/Accounting/JournalPoster';
 import { dateRangeCollection } from '@/utils';
 import asyncMiddleware from '@/http/middleware/asyncMiddleware';
 import { formatNumberClosure } from './FinancialStatementMixin';
-import DependencyGraph from '@/lib/DependencyGraph';
 
 export default {
   /**
@@ -15,10 +14,11 @@ export default {
   router() {
     const router = express.Router();
 
-    router.get('/', 
+    router.get(
+      '/',
       this.profitLossSheet.validation,
-      asyncMiddleware(this.profitLossSheet.handler));
-
+      asyncMiddleware(this.profitLossSheet.handler)
+    );
     return router;
   },
 
@@ -36,10 +36,9 @@ export default {
       query('none_zero').optional().isBoolean().toBoolean(),
       query('account_ids').isArray().optional(),
       query('account_ids.*').isNumeric().toInt(),
-      query('display_columns_type').optional().isIn([
-        'total', 'date_periods',
-      ]),
-      query('display_columns_by').optional({ nullable: true, checkFalsy: true })
+      query('display_columns_type').optional().isIn(['total', 'date_periods']),
+      query('display_columns_by')
+        .optional({ nullable: true, checkFalsy: true })
         .isIn(['year', 'month', 'week', 'day', 'quarter']),
     ],
     async handler(req, res) {
@@ -47,7 +46,8 @@ export default {
 
       if (!validationErrors.isEmpty()) {
         return res.boom.badData(null, {
-          code: 'validation_error', ...validationErrors,
+          code: 'validation_error',
+          ...validationErrors,
         });
       }
       const { Account, AccountType } = req.models;
@@ -68,91 +68,110 @@ export default {
       if (!Array.isArray(filter.account_ids)) {
         filter.account_ids = [filter.account_ids];
       }
-      const incomeStatementTypes = await AccountType.query().where('income_sheet', true);
-
+      const incomeStatementTypes = await AccountType.query().where(
+        'income_sheet',
+        true
+      );
       // Fetch all income accounts from storage.
       const accounts = await Account.query()
         // .remember('profit_loss_accounts')
         .modify('filterAccounts', filter.account_ids)
-        .whereIn('account_type_id', incomeStatementTypes.map((t) => t.id))
+        .whereIn(
+          'account_type_id',
+          incomeStatementTypes.map((t) => t.id)
+        )
         .withGraphFetched('type')
         .withGraphFetched('transactions');
 
       // Accounts dependency graph.
-      const accountsGraph = DependencyGraph.fromArray(
-        accounts, { itemId: 'id', parentItemId: 'parentAccountId' }
-      );
+      const accountsGraph = Account.toDependencyGraph(accounts);
 
       // Filter all none zero accounts if it was enabled.
-      const filteredAccounts = accounts.filter((account) => (
-        account.transactions.length > 0 || !filter.none_zero
-      ));
+      const filteredAccounts = accounts.filter(
+        (account) => account.transactions.length > 0 || !filter.none_zero
+      );
       const journalEntriesCollected = Account.collectJournalEntries(accounts);
       const journalEntries = new JournalPoster(accountsGraph);
       journalEntries.loadEntries(journalEntriesCollected);
 
       // Account balance formmatter based on the given query.
       const numberFormatter = formatNumberClosure(filter.number_format);
-      const comparatorDateType = filter.display_columns_type === 'total'
-        ? 'day' : filter.display_columns_by;
-
+      const comparatorDateType =
+        filter.display_columns_type === 'total'
+          ? 'day'
+          : filter.display_columns_by;
       // Gets the date range set from start to end date.
       const dateRangeSet = dateRangeCollection(
         filter.from_date,
         filter.to_date,
-        comparatorDateType,
+        comparatorDateType
       );
-
-      const accountsMapper = (incomeExpenseAccounts) => (
+      const accountsMapper = (incomeExpenseAccounts) =>
         incomeExpenseAccounts.map((account) => ({
           ...pick(account, ['id', 'index', 'name', 'code', 'parentAccountId']),
-
           // Total closing balance of the account.
-          ...(filter.display_columns_type === 'total') && {
+          ...(filter.display_columns_type === 'total' && {
             total: (() => {
-              const amount = journalEntries.getAccountBalance(account.id, filter.to_date);
-              return { amount, date: filter.to_date, formatted_amount: numberFormatter(amount) };
+              const amount = journalEntries.getAccountBalance(
+                account.id,
+                filter.to_date
+              );
+              return {
+                amount,
+                date: filter.to_date,
+                formatted_amount: numberFormatter(amount),
+              };
             })(),
-          },
+          }),
           // Date periods when display columns type `periods`.
-          ...(filter.display_columns_type === 'date_periods') && {
+          ...(filter.display_columns_type === 'date_periods' && {
             periods: dateRangeSet.map((date) => {
               const type = comparatorDateType;
-              const amount = journalEntries.getAccountBalance(account.id, date, type);
-
-              return { date, amount, formatted_amount: numberFormatter(amount) };
+              const amount = journalEntries.getAccountBalance(
+                account.id,
+                date,
+                type
+              );
+              return {
+                date,
+                amount,
+                formatted_amount: numberFormatter(amount),
+              };
             }),
-          },
-        })));
+          }),
+        }));
 
-      const totalAccountsReducer = (incomeExpenseAccounts) => (
-        incomeExpenseAccounts.reduce((acc, account) => {
-          const amount = (account) ? account.total.amount : 0;
-          return amount + acc;
-        }, 0));
+      const accountsIncome = Account.toNestedArray(
+        accountsMapper(
+          filteredAccounts.filter((account) => account.type.normal === 'credit')
+        )
+      );
+      const accountsExpenses = Account.toNestedArray(
+        accountsMapper(
+          filteredAccounts.filter((account) => account.type.normal === 'debit')
+        )
+      );
+      const totalPeriodsMapper = (incomeExpenseAccounts) =>
+        Object.values(
+          dateRangeSet.reduce((acc, date, index) => {
+            let amount = sumBy(
+              incomeExpenseAccounts,
+              `periods[${index}].amount`
+            );
+            acc[date] = {
+              date,
+              amount,
+              formatted_amount: numberFormatter(amount),
+            };
+            return acc;
+          }, {})
+        );
 
-      const accountsIncome = Account.toNestedArray(accountsMapper(filteredAccounts
-        .filter((account) => account.type.normal === 'credit')));
-
-      const accountsExpenses = Account.toNestedArray(accountsMapper(filteredAccounts
-        .filter((account) => account.type.normal === 'debit')));
-
-      // @return {Array}
-      const totalPeriodsMapper = (incomeExpenseAccounts) => (
-        Object.values(dateRangeSet.reduce((acc, date, index) => {
-          let amount = 0;
-
-          incomeExpenseAccounts.forEach((account) => {
-            const currentDate = account.periods[index];
-            amount += currentDate.amount || 0;
-          });
-          acc[date] = { date, amount, formatted_amount: numberFormatter(amount) };
-          return acc;
-        }, {})));
-
-      // Total income(date) - Total expenses(date) = Net income(date)
-      // @return {Array}
-      const netIncomePeriodsMapper = (totalIncomeAcocunts, totalExpenseAccounts) => (
+      // Total income - Total expenses = Net income
+      const netIncomePeriodsMapper = (
+        totalIncomeAcocunts,
+        totalExpenseAccounts
+      ) =>
         dateRangeSet.map((date, index) => {
           const totalIncome = totalIncomeAcocunts[index];
           const totalExpenses = totalExpenseAccounts[index];
@@ -160,66 +179,71 @@ export default {
           let amount = totalIncome.amount || 0;
           amount -= totalExpenses.amount || 0;
           return { date, amount, formatted_amount: numberFormatter(amount) };
-        }));
+        });
 
       // @return {Object}
       const netIncomeTotal = (totalIncome, totalExpenses) => {
         const netIncomeAmount = totalIncome.amount - totalExpenses.amount;
-        return { amount: netIncomeAmount, formatted_amount: netIncomeAmount, date: filter.to_date };
+        return {
+          amount: netIncomeAmount,
+          formatted_amount: netIncomeAmount,
+          date: filter.to_date,
+        };
       };
 
       const incomeResponse = {
         entry_normal: 'credit',
         accounts: accountsIncome,
-        ...(filter.display_columns_type === 'total') && (() => {
-          const totalIncomeAccounts = totalAccountsReducer(accountsIncome);
-          return {
-            total: {
-              amount: totalIncomeAccounts,
-              date: filter.to_date,
-              formatted_amount: numberFormatter(totalIncomeAccounts),
-            },
-          };
-        })(),
-        ...(filter.display_columns_type === 'date_periods') && {
-          total_periods: [
-            ...totalPeriodsMapper(accountsIncome),
-          ],
-        },
+        ...(filter.display_columns_type === 'total' &&
+          (() => {
+            const totalIncomeAccounts = sumBy(accountsIncome, 'total.amount');
+            return {
+              total: {
+                amount: totalIncomeAccounts,
+                date: filter.to_date,
+                formatted_amount: numberFormatter(totalIncomeAccounts),
+              },
+            };
+          })()),
+        ...(filter.display_columns_type === 'date_periods' && {
+          total_periods: [...totalPeriodsMapper(accountsIncome)],
+        }),
       };
       const expenseResponse = {
         entry_normal: 'debit',
         accounts: accountsExpenses,
-        ...(filter.display_columns_type === 'total') && (() => {
-          const totalExpensesAccounts = totalAccountsReducer(accountsExpenses);
-          return {
-            total: {
-              amount: totalExpensesAccounts,
-              date: filter.to_date,
-              formatted_amount: numberFormatter(totalExpensesAccounts),
-            },
-          };
-        })(),
-        ...(filter.display_columns_type === 'date_periods') && {
-          total_periods: [
-            ...totalPeriodsMapper(accountsExpenses),
-          ],
-        },
+        ...(filter.display_columns_type === 'total' &&
+          (() => {
+            const totalExpensesAccounts = sumBy(
+              accountsExpenses,
+              'total.amount'
+            );
+            return {
+              total: {
+                amount: totalExpensesAccounts,
+                date: filter.to_date,
+                formatted_amount: numberFormatter(totalExpensesAccounts),
+              },
+            };
+          })()),
+        ...(filter.display_columns_type === 'date_periods' && {
+          total_periods: [...totalPeriodsMapper(accountsExpenses)],
+        }),
       };
       const netIncomeResponse = {
-        ...(filter.display_columns_type === 'total') && {
+        ...(filter.display_columns_type === 'total' && {
           total: {
             ...netIncomeTotal(incomeResponse.total, expenseResponse.total),
           },
-        },
-        ...(filter.display_columns_type === 'date_periods') && {
+        }),
+        ...(filter.display_columns_type === 'date_periods' && {
           total_periods: [
             ...netIncomePeriodsMapper(
               incomeResponse.total_periods,
-              expenseResponse.total_periods,
+              expenseResponse.total_periods
             ),
           ],
-        },
+        }),
       };
       return res.status(200).send({
         query: { ...filter },
@@ -228,8 +252,8 @@ export default {
           income: incomeResponse,
           expenses: expenseResponse,
           net_income: netIncomeResponse,
-        },        
+        },
       });
     },
   },
-}
\ No newline at end of file
+};
diff --git a/server/src/http/controllers/Sales/SalesEstimates.js b/server/src/http/controllers/Sales/SalesEstimates.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/server/src/http/controllers/Sales/SalesInvoicing.js b/server/src/http/controllers/Sales/SalesInvoicing.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/server/src/http/controllers/Sales/SalesPaymentReceive.js b/server/src/http/controllers/Sales/SalesPaymentReceive.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/server/src/http/controllers/Sales/SalesReceipt.js b/server/src/http/controllers/Sales/SalesReceipt.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/server/src/utils/index.js b/server/src/utils/index.js
index 2e891a4e1..9c51451fb 100644
--- a/server/src/utils/index.js
+++ b/server/src/utils/index.js
@@ -1,7 +1,6 @@
 import bcrypt from 'bcryptjs';
 import moment from 'moment';
 import _ from 'lodash';
-const { map, isArray, isPlainObject, mapKeys, mapValues } = require('lodash');
 
 const hashPassword = (password) =>
   new Promise((resolve) => {
@@ -118,10 +117,21 @@ const flatToNestedArray = (
       map[parentItemId].children.push(item);
     }
   });
-
   return nestedArray;
 };
 
+const itemsStartWith = (items, char) => {
+  return items.filter((item) => item.indexOf(char) === 0);
+};
+
+const getTotalDeep = (items, deepProp, totalProp) =>
+  items.reduce((acc, item) => {
+    const total = Array.isArray(item[deepProp])
+      ? getTotalDeep(item[deepProp], deepProp, totalProp)
+      : 0;
+    return _.sumBy(item, totalProp) + total + acc;
+  }, 0);
+
 export {
   hashPassword,
   origin,
@@ -131,4 +141,6 @@ export {
   mapKeysDeep,
   promiseSerial,
   flatToNestedArray,
+  itemsStartWith,
+  getTotalDeep,
 };
diff --git a/server/tests/routes/accounting.test.js b/server/tests/routes/accounting.test.js
index bbde332cc..eae51689b 100644
--- a/server/tests/routes/accounting.test.js
+++ b/server/tests/routes/accounting.test.js
@@ -13,7 +13,7 @@ import {
 } from '~/dbInit';
 
 
-describe.only('routes: `/accounting`', () => {
+describe('routes: `/accounting`', () => {
   describe('route: `/accounting/make-journal-entries`', async () => {
     it('Should sumation of credit or debit does not equal zero.', async () => {
       const account = await tenantFactory.create('account');
diff --git a/server/tests/routes/balance_sheet.test.js b/server/tests/routes/balance_sheet.test.js
new file mode 100644
index 000000000..a1e5deaa4
--- /dev/null
+++ b/server/tests/routes/balance_sheet.test.js
@@ -0,0 +1,541 @@
+import moment from 'moment';
+import {
+  request,
+  expect,
+} from '~/testInit';
+import {
+  tenantWebsite,
+  tenantFactory,
+  loginRes
+} from '~/dbInit';
+import { iteratee } from 'lodash';
+
+let creditAccount;
+let debitAccount;
+let incomeAccount;
+let incomeType;
+
+describe('routes: `/financial_statements`', () => {
+  beforeEach(async () => {
+    const accountTransactionMixied = { date: '2020-1-10' };
+
+    // Expense --
+    // 1000 Credit  - Cash account 
+    //    1000 Debit - Bank account.
+    await tenantFactory.create('account_transaction', {
+      credit: 1000, debit: 0, account_id: 2, referenceType: 'Expense',
+      referenceId: 1, ...accountTransactionMixied,
+    });
+    await tenantFactory.create('account_transaction', {
+      credit: 0, debit: 1000, account_id: 7, referenceType: 'Expense',
+      referenceId: 1, ...accountTransactionMixied,
+    });
+
+    // Jounral
+    // 4000 Credit - Opening balance account.
+    //     2000 Debit - Bank account
+    //     2000 Debit - Bank account
+    await tenantFactory.create('account_transaction', {
+      credit: 4000, debit: 0, account_id: 5, ...accountTransactionMixied,
+    });
+    await tenantFactory.create('account_transaction', {
+      debit: 2000, credit: 0, account_id: 2, ...accountTransactionMixied,
+    });
+    await tenantFactory.create('account_transaction', {
+      debit: 2000, credit: 0, account_id: 2, ...accountTransactionMixied,
+    });
+
+    // Income Journal.
+    // 2000 Credit - Income account.
+    //    2000 Debit - Bank account.
+    await tenantFactory.create('account_transaction', {
+      credit: 2000, account_id: 4, ...accountTransactionMixied
+    });
+    await tenantFactory.create('account_transaction', {
+      debit: 2000, credit: 0, account_id: 2, ...accountTransactionMixied,
+    });
+
+    // -----------------------------------------
+    // Bank account balance  = 5000  |  Opening balance account balance = 4000
+    // Expense account balance = 1000  |  Income account balance   = 2000
+  });
+ 
+  describe.only('routes: `financial_statements/balance_sheet`', () => {
+    it('Should response unauthorzied in case the user was not authorized.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .send();
+
+      expect(res.status).equals(401);
+    });
+
+    it('Should retrieve query of the balance sheet with default values.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          display_columns_by: 'year',
+          from_date: '2020-01-01',
+          to_date: '2020-02-01',
+        })
+        .send();
+
+      expect(res.body.query.display_columns_by).equals('year');
+      expect(res.body.query.from_date).equals('2020-01-01');
+      expect(res.body.query.to_date).equals('2020-02-01');
+
+      expect(res.body.query.number_format.no_cents).equals(false);
+      expect(res.body.query.number_format.divide_1000).equals(false);
+
+      expect(res.body.query.none_zero).equals(false);
+    });
+
+    it('Should retrieve assets and liabilities/equity section.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          display_columns_by: 'year',
+        })
+        .send();
+
+      expect(res.body.balance_sheet[0].name).equals('Assets');
+      expect(res.body.balance_sheet[1].name).equals('Liabilities and Equity');
+
+      expect(res.body.balance_sheet[0].section_type).equals('assets');
+      expect(res.body.balance_sheet[1].section_type).equals('liabilities_equity');
+
+      expect(res.body.balance_sheet[0].type).equals('section');
+      expect(res.body.balance_sheet[1].type).equals('section');
+    });
+
+    it.only('Should retrieve assets and liabilities/equity total of each section.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          to_date: '2020-12-10',
+        })
+        .send();
+
+      expect(res.body.balance_sheet[0].total.amount).equals(5000);
+      expect(res.body.balance_sheet[1].total.amount).equals(4000);
+    });
+
+    it('Should retrieve the asset and liabilities/equity accounts.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          display_columns_type: 'total',
+          from_date: '2012-01-01',
+          to_date: '2032-02-02',
+        })
+        .send();
+
+      expect(res.body.balance_sheet[0].children).to.be.a('array');
+      expect(res.body.balance_sheet[0].children).to.be.a('array');
+
+      expect(res.body.balance_sheet[0].children.length).is.not.equals(0);
+      expect(res.body.balance_sheet[1].children.length).is.not.equals(0);
+
+      expect(res.body.balance_sheet[1].children[0].children.length).is.not.equals(0);
+      expect(res.body.balance_sheet[1].children[1].children.length).is.not.equals(0);
+    });
+
+    it('Should retrieve assets/liabilities total balance between the given date range.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          display_columns_type: 'total',
+          from_date: '2012-01-01',
+          to_date: '2032-02-02',
+        })
+        .send();
+
+      expect(res.body.accounts[0].children).include.something.deep.equals({
+        id: 1001,
+        index: null,
+        name: debitAccount.name,
+        code: debitAccount.code,
+        parentAccountId: null,
+        children: [],
+        total: { formatted_amount: 5000, amount: 5000, date: '2032-02-02' }
+      });
+
+      expect(res.body.accounts[1].children).include.something.deep.equals({        
+        id: 1000,
+        index: null,
+        name: creditAccount.name,
+        code: creditAccount.code,
+        parentAccountId: null,
+        children: [],
+        total: { formatted_amount: 4000, amount: 4000, date: '2032-02-02' }
+      });
+    });
+
+    it('Should retrieve asset/liabilities balance sheet with display columns by `year`.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          display_columns_by: 'year',
+          display_columns_type: 'date_periods',
+          from_date: '2012-01-01',
+          to_date: '2018-02-02',
+        })
+        .send();
+
+      expect(res.body.accounts[0].children[0].total_periods.length).equals(7);
+      expect(res.body.accounts[1].children[0].total_periods.length).equals(7);
+
+      expect(res.body.accounts[0].children[0].total_periods).deep.equals([
+        {
+          amount: 0,
+          formatted_amount: 0,
+          date: '2012',
+        },
+        {
+          amount: 0,
+          formatted_amount: 0,
+          date: '2013',
+        },
+        {
+          amount: 0,
+          formatted_amount: 0,
+          date: '2014',
+        },
+        {
+          amount: 0,
+          formatted_amount: 0,
+          date: '2015',
+        },
+        {
+          amount: 0,
+          formatted_amount: 0,
+          date: '2016',
+        },
+        {
+          amount: 0,
+          formatted_amount: 0,
+          date: '2017',
+        },
+        {
+          amount: 0,
+          formatted_amount: 0,
+          date: '2018',
+        },
+      ]);
+    });
+
+    it('Should retrieve balance sheet with display columns by `day`.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          display_columns_by: 'day',
+          display_columns_type: 'date_periods',
+          from_date: '2020-01-08',
+          to_date: '2020-01-12',
+        })
+        .send();
+
+      expect(res.body.accounts[0].children).include.something.deep.equals({
+        id: debitAccount.id,
+        index: debitAccount.index,
+        name: debitAccount.name,
+        code: debitAccount.code,
+        parentAccountId: null,
+        children: [],
+        total_periods: [
+          { date: '2020-01-08', formatted_amount: 0, amount: 0 },
+          { date: '2020-01-09', formatted_amount: 0, amount: 0 },
+          { date: '2020-01-10', formatted_amount: 5000, amount: 5000 },
+          { date: '2020-01-11', formatted_amount: 5000, amount: 5000 },
+          { date: '2020-01-12', formatted_amount: 5000, amount: 5000 },
+        ],
+        total: { formatted_amount: 5000, amount: 5000, date: '2020-01-12' }
+      });
+      expect(res.body.accounts[1].children).include.something.deep.equals({
+        id: creditAccount.id,
+        index: creditAccount.index,
+        name: creditAccount.name,
+        code: creditAccount.code,
+        parentAccountId: null,
+        children: [],
+        total_periods: [
+          { date: '2020-01-08', formatted_amount: 0, amount: 0 },
+          { date: '2020-01-09', formatted_amount: 0, amount: 0 },
+          { date: '2020-01-10', formatted_amount: 4000, amount: 4000 },
+          { date: '2020-01-11', formatted_amount: 4000, amount: 4000 },
+          { date: '2020-01-12', formatted_amount: 4000, amount: 4000 }
+        ],
+        total: { formatted_amount: 4000, amount: 4000, date: '2020-01-12' }
+      });
+    });
+
+    it('Should retrieve the balance sheet with display columns by `month`.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          display_columns_by: 'month',
+          display_columns_type: 'date_periods',
+          from_date: '2019-07-01',
+          to_date: '2020-06-30',
+        })
+        .send();
+
+      expect(res.body.accounts[0].children).include.something.deep.equals({
+        id: debitAccount.id,
+        index: debitAccount.index,
+        name: debitAccount.name,
+        code: debitAccount.code,
+        parentAccountId: null,
+        children: [],
+        total_periods: [
+          { date: '2019-07', formatted_amount: 0, amount: 0 },
+          { date: '2019-08', formatted_amount: 0, amount: 0 },
+          { date: '2019-09', formatted_amount: 0, amount: 0 },
+          { date: '2019-10', formatted_amount: 0, amount: 0 },
+          { date: '2019-11', formatted_amount: 0, amount: 0 },
+          { date: '2019-12', formatted_amount: 0, amount: 0 },
+          { date: '2020-01', formatted_amount: 5000, amount: 5000 },
+          { date: '2020-02', formatted_amount: 5000, amount: 5000 },
+          { date: '2020-03', formatted_amount: 5000, amount: 5000 },
+          { date: '2020-04', formatted_amount: 5000, amount: 5000 },
+          { date: '2020-05', formatted_amount: 5000, amount: 5000 },
+          { date: '2020-06', formatted_amount: 5000, amount: 5000 },
+        ],
+        total: { formatted_amount: 5000, amount: 5000, date: '2020-06-30' } 
+      });
+    });
+
+    it('Should retrieve the balance sheet with display columns `quarter`.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          display_columns_by: 'quarter',
+          display_columns_type: 'date_periods',
+          from_date: '2020-01-01',
+          to_date: '2020-12-31',
+        })
+        .send();
+
+      expect(res.body.accounts[0].children).include.something.deep.equals({
+        id: debitAccount.id,
+        index: debitAccount.index,
+        name: debitAccount.name,
+        code: debitAccount.code,
+        parentAccountId: null,
+        children: [],
+        total_periods: [
+          { date: '2020-03', formatted_amount: 5000, amount: 5000 },
+          { date: '2020-06', formatted_amount: 5000, amount: 5000 },
+          { date: '2020-09', formatted_amount: 5000, amount: 5000 },
+          { date: '2020-12', formatted_amount: 5000, amount: 5000 },
+        ],
+        total: { formatted_amount: 5000, amount: 5000, date: '2020-12-31' },
+      });
+    });
+
+    it('Should retrieve the balance sheet amounts without cents.', async () => {
+      await tenantFactory.create('account_transaction', {
+        debit: 0.25, credit: 0, account_id: debitAccount.id, date: '2020-1-10',
+      });
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          display_columns_by: 'quarter',
+          display_columns_type: 'date_periods',
+          from_date: '2020-01-01',
+          to_date: '2020-12-31',
+          number_format: {
+            no_cents: true,
+          },
+        })
+        .send();
+
+      expect(res.body.accounts[0].children).include.something.deep.equals({
+        id: debitAccount.id,
+        index: debitAccount.index,
+        name: debitAccount.name,
+        code: debitAccount.code,
+        parentAccountId: null,
+        children: [],
+        total_periods: [
+          { date: '2020-03', formatted_amount: 5000, amount: 5000.25 },
+          { date: '2020-06', formatted_amount: 5000, amount: 5000.25 },
+          { date: '2020-09', formatted_amount: 5000, amount: 5000.25 },
+          { date: '2020-12', formatted_amount: 5000, amount: 5000.25 },  
+        ],
+        total: { formatted_amount: 5000, amount: 5000.25, date: '2020-12-31' },
+      });
+    });
+
+    it('Should retrieve the balance sheet amounts divided on 1000.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          display_columns_by: 'quarter',
+          display_columns_type: 'date_periods',
+          from_date: '2020',
+          to_date: '2021',
+          number_format: {
+            divide_1000: true,
+          },
+        })
+        .send();
+      
+      expect(res.body.accounts[0].children).include.something.deep.equals({
+        id: debitAccount.id,
+        index: debitAccount.index,
+        name: debitAccount.name,
+        code: debitAccount.code,
+        parentAccountId: null,
+        children: [],
+        total_periods: [
+          { date: '2020-03', formatted_amount: 5, amount: 5000 },
+          { date: '2020-06', formatted_amount: 5, amount: 5000 },
+          { date: '2020-09', formatted_amount: 5, amount: 5000 },
+          { date: '2020-12', formatted_amount: 5, amount: 5000 },
+          { date: '2021-03', formatted_amount: 5, amount: 5000 },
+        ],
+        total: { formatted_amount: 5, amount: 5000, date: '2021' },
+      });
+    });
+
+    it('Should not retrieve accounts has no transactions between the given date range in case query none_zero is true.', async () => {
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          display_columns_by: 'quarter',
+          from_date: '2002',
+          to_date: '2003',
+          number_format: {
+            divide_1000: true,
+          },
+          none_zero: true,
+        })
+        .send();
+
+      expect(res.body.accounts[0].children.length).equals(0);
+      expect(res.body.accounts[1].children.length).equals(0);
+    });
+
+    it('Should retrieve accounts in nested structure parent and children accounts.', async () => {
+      const childAccount = await tenantFactory.create('account', {
+        parent_account_id: debitAccount.id,
+        account_type_id: 1
+      });
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          none_zero: false,
+          account_ids: [childAccount.id, debitAccount.id]
+        })
+        .send();
+
+      expect(res.body.accounts[0].children).include.something.deep.equals({
+        id: debitAccount.id,
+        index: null,
+        name: debitAccount.name,
+        code: debitAccount.code,
+        parentAccountId: null,
+        total: { formatted_amount: 5000, amount: 5000, date: '2020-12-31' },
+        children: [
+          {
+            id: childAccount.id,
+            index: null,
+            name: childAccount.name,
+            code: childAccount.code,
+            parentAccountId: debitAccount.id,
+            total: { formatted_amount: 0, amount: 0, date: '2020-12-31' },
+            children: [],
+          }
+        ]
+      });
+    });
+    
+    it('Should parent account balance sumation of total balane all children accounts.', async () => {
+      const childAccount = await tenantFactory.create('account', {
+        parent_account_id: debitAccount.id,
+        account_type_id: 1
+      });
+      await tenantFactory.create('account_transaction', {
+        credit: 0, debit: 1000, account_id: childAccount.id, date: '2020-1-10'
+      });
+
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          none_zero: false,
+          account_ids: [childAccount.id, debitAccount.id]
+        })
+        .send();
+
+      expect(res.body.accounts[0].children[0].total.amount).equals(6000);
+      expect(res.body.accounts[0].children[0].total.formatted_amount).equals(6000);
+    });
+
+    it('Should parent account balance sumation of total periods amounts all children accounts.', async () => {
+      const childAccount = await tenantFactory.create('account', {
+        parent_account_id: debitAccount.id,
+        account_type_id: 1
+      });
+      await tenantFactory.create('account_transaction', {
+        credit: 0, debit: 1000, account_id: childAccount.id, date: '2020-2-10'
+      });
+
+      const res = await request()
+        .get('/api/financial_statements/balance_sheet')
+        .set('x-access-token', loginRes.body.token)
+        .set('organization-id', tenantWebsite.organizationId)
+        .query({
+          none_zero: false,
+          account_ids: [childAccount.id, debitAccount.id],
+          display_columns_type: 'date_periods',
+          display_columns_by: 'month',
+          from_date: '2020-01-01',
+          to_date: '2020-12-12',
+        })
+        .send();
+
+      expect(res.body.accounts[0].children[0].total_periods).deep.equals([
+        { amount: 5000, formatted_amount: 5000, date: '2020-01' },
+        { amount: 6000, formatted_amount: 6000, date: '2020-02' },
+        { amount: 6000, formatted_amount: 6000, date: '2020-03' },
+        { amount: 6000, formatted_amount: 6000, date: '2020-04' },
+        { amount: 6000, formatted_amount: 6000, date: '2020-05' },
+        { amount: 6000, formatted_amount: 6000, date: '2020-06' },
+        { amount: 6000, formatted_amount: 6000, date: '2020-07' },
+        { amount: 6000, formatted_amount: 6000, date: '2020-08' },
+        { amount: 6000, formatted_amount: 6000, date: '2020-09' },
+        { amount: 6000, formatted_amount: 6000, date: '2020-10' },
+        { amount: 6000, formatted_amount: 6000, date: '2020-11' },
+        { amount: 6000, formatted_amount: 6000, date: '2020-12' }
+      ])
+    });
+  });
+});
diff --git a/server/tests/routes/financial_statements.test.js b/server/tests/routes/financial_statements.test.js
index 03139e438..e7a0893e1 100644
--- a/server/tests/routes/financial_statements.test.js
+++ b/server/tests/routes/financial_statements.test.js
@@ -8,6 +8,7 @@ import {
   tenantFactory,
   loginRes
 } from '~/dbInit';
+import { iteratee } from 'lodash';
 
 let creditAccount;
 let debitAccount;
@@ -436,446 +437,6 @@ describe('routes: `/financial_statements`', () => {
     });
   });
 
-  describe('routes: `financial_statements/balance_sheet`', () => {
-    it('Should response unauthorzied in case the user was not authorized.', async () => {
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .send();
-
-      expect(res.status).equals(401);
-    });
-
-    it('Should retrieve query of the balance sheet with default values.', async () => {
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          display_columns_by: 'year',
-          from_date: '2020-01-01',
-          to_date: '2020-02-01',
-        })
-        .send();
-
-      expect(res.body.query.display_columns_by).equals('year');
-      expect(res.body.query.from_date).equals('2020-01-01');
-      expect(res.body.query.to_date).equals('2020-02-01');
-
-      expect(res.body.query.number_format.no_cents).equals(false);
-      expect(res.body.query.number_format.divide_1000).equals(false);
-
-      expect(res.body.query.none_zero).equals(false);
-    });
-
-    it('Should retrieve the asset accounts balance.', async () => {
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          display_columns_by: 'year',
-        })
-        .send();
-
-      expect(res.body.accounts[0].children).to.be.a('array');
-      expect(res.body.accounts[1].children).to.be.a('array');
-
-      expect(res.body.accounts[0].children.length).is.not.equals(0);
-      expect(res.body.accounts[1].children.length).is.not.equals(0);
-    });
-
-    it('Should retrieve assets/liabilities total balance between the given date range.', async () => {
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          display_columns_type: 'total',
-          from_date: '2012-01-01',
-          to_date: '2032-02-02',
-        })
-        .send();
-
-      expect(res.body.accounts[0].children).include.something.deep.equals({
-        id: 1001,
-        index: null,
-        name: debitAccount.name,
-        code: debitAccount.code,
-        parentAccountId: null,
-        children: [],
-        total: { formatted_amount: 5000, amount: 5000, date: '2032-02-02' }
-      });
-
-      expect(res.body.accounts[1].children).include.something.deep.equals({        
-        id: 1000,
-        index: null,
-        name: creditAccount.name,
-        code: creditAccount.code,
-        parentAccountId: null,
-        children: [],
-        total: { formatted_amount: 4000, amount: 4000, date: '2032-02-02' }
-      });
-    });
-
-    it('Should retrieve asset/liabilities balance sheet with display columns by `year`.', async () => {
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          display_columns_by: 'year',
-          display_columns_type: 'date_periods',
-          from_date: '2012-01-01',
-          to_date: '2018-02-02',
-        })
-        .send();
-
-      expect(res.body.accounts[0].children[0].total_periods.length).equals(7);
-      expect(res.body.accounts[1].children[0].total_periods.length).equals(7);
-
-      expect(res.body.accounts[0].children[0].total_periods).deep.equals([
-        {
-          amount: 0,
-          formatted_amount: 0,
-          date: '2012',
-        },
-        {
-          amount: 0,
-          formatted_amount: 0,
-          date: '2013',
-        },
-        {
-          amount: 0,
-          formatted_amount: 0,
-          date: '2014',
-        },
-        {
-          amount: 0,
-          formatted_amount: 0,
-          date: '2015',
-        },
-        {
-          amount: 0,
-          formatted_amount: 0,
-          date: '2016',
-        },
-        {
-          amount: 0,
-          formatted_amount: 0,
-          date: '2017',
-        },
-        {
-          amount: 0,
-          formatted_amount: 0,
-          date: '2018',
-        },
-      ]);
-    });
-
-    it('Should retrieve balance sheet with display columns by `day`.', async () => {
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          display_columns_by: 'day',
-          display_columns_type: 'date_periods',
-          from_date: '2020-01-08',
-          to_date: '2020-01-12',
-        })
-        .send();
-
-      expect(res.body.accounts[0].children).include.something.deep.equals({
-        id: debitAccount.id,
-        index: debitAccount.index,
-        name: debitAccount.name,
-        code: debitAccount.code,
-        parentAccountId: null,
-        children: [],
-        total_periods: [
-          { date: '2020-01-08', formatted_amount: 0, amount: 0 },
-          { date: '2020-01-09', formatted_amount: 0, amount: 0 },
-          { date: '2020-01-10', formatted_amount: 5000, amount: 5000 },
-          { date: '2020-01-11', formatted_amount: 5000, amount: 5000 },
-          { date: '2020-01-12', formatted_amount: 5000, amount: 5000 },
-        ],
-        total: { formatted_amount: 5000, amount: 5000, date: '2020-01-12' }
-      });
-      expect(res.body.accounts[1].children).include.something.deep.equals({
-        id: creditAccount.id,
-        index: creditAccount.index,
-        name: creditAccount.name,
-        code: creditAccount.code,
-        parentAccountId: null,
-        children: [],
-        total_periods: [
-          { date: '2020-01-08', formatted_amount: 0, amount: 0 },
-          { date: '2020-01-09', formatted_amount: 0, amount: 0 },
-          { date: '2020-01-10', formatted_amount: 4000, amount: 4000 },
-          { date: '2020-01-11', formatted_amount: 4000, amount: 4000 },
-          { date: '2020-01-12', formatted_amount: 4000, amount: 4000 }
-        ],
-        total: { formatted_amount: 4000, amount: 4000, date: '2020-01-12' }
-      });
-    });
-
-    it('Should retrieve the balance sheet with display columns by `month`.', async () => {
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          display_columns_by: 'month',
-          display_columns_type: 'date_periods',
-          from_date: '2019-07-01',
-          to_date: '2020-06-30',
-        })
-        .send();
-
-      expect(res.body.accounts[0].children).include.something.deep.equals({
-        id: debitAccount.id,
-        index: debitAccount.index,
-        name: debitAccount.name,
-        code: debitAccount.code,
-        parentAccountId: null,
-        children: [],
-        total_periods: [
-          { date: '2019-07', formatted_amount: 0, amount: 0 },
-          { date: '2019-08', formatted_amount: 0, amount: 0 },
-          { date: '2019-09', formatted_amount: 0, amount: 0 },
-          { date: '2019-10', formatted_amount: 0, amount: 0 },
-          { date: '2019-11', formatted_amount: 0, amount: 0 },
-          { date: '2019-12', formatted_amount: 0, amount: 0 },
-          { date: '2020-01', formatted_amount: 5000, amount: 5000 },
-          { date: '2020-02', formatted_amount: 5000, amount: 5000 },
-          { date: '2020-03', formatted_amount: 5000, amount: 5000 },
-          { date: '2020-04', formatted_amount: 5000, amount: 5000 },
-          { date: '2020-05', formatted_amount: 5000, amount: 5000 },
-          { date: '2020-06', formatted_amount: 5000, amount: 5000 },
-        ],
-        total: { formatted_amount: 5000, amount: 5000, date: '2020-06-30' } 
-      });
-    });
-
-    it('Should retrieve the balance sheet with display columns `quarter`.', async () => {
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          display_columns_by: 'quarter',
-          display_columns_type: 'date_periods',
-          from_date: '2020-01-01',
-          to_date: '2020-12-31',
-        })
-        .send();
-
-      expect(res.body.accounts[0].children).include.something.deep.equals({
-        id: debitAccount.id,
-        index: debitAccount.index,
-        name: debitAccount.name,
-        code: debitAccount.code,
-        parentAccountId: null,
-        children: [],
-        total_periods: [
-          { date: '2020-03', formatted_amount: 5000, amount: 5000 },
-          { date: '2020-06', formatted_amount: 5000, amount: 5000 },
-          { date: '2020-09', formatted_amount: 5000, amount: 5000 },
-          { date: '2020-12', formatted_amount: 5000, amount: 5000 },
-        ],
-        total: { formatted_amount: 5000, amount: 5000, date: '2020-12-31' },
-      });
-    });
-
-    it('Should retrieve the balance sheet amounts without cents.', async () => {
-      await tenantFactory.create('account_transaction', {
-        debit: 0.25, credit: 0, account_id: debitAccount.id, date: '2020-1-10',
-      });
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          display_columns_by: 'quarter',
-          display_columns_type: 'date_periods',
-          from_date: '2020-01-01',
-          to_date: '2020-12-31',
-          number_format: {
-            no_cents: true,
-          },
-        })
-        .send();
-
-      expect(res.body.accounts[0].children).include.something.deep.equals({
-        id: debitAccount.id,
-        index: debitAccount.index,
-        name: debitAccount.name,
-        code: debitAccount.code,
-        parentAccountId: null,
-        children: [],
-        total_periods: [
-          { date: '2020-03', formatted_amount: 5000, amount: 5000.25 },
-          { date: '2020-06', formatted_amount: 5000, amount: 5000.25 },
-          { date: '2020-09', formatted_amount: 5000, amount: 5000.25 },
-          { date: '2020-12', formatted_amount: 5000, amount: 5000.25 },  
-        ],
-        total: { formatted_amount: 5000, amount: 5000.25, date: '2020-12-31' },
-      });
-    });
-
-    it('Should retrieve the balance sheet amounts divided on 1000.', async () => {
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          display_columns_by: 'quarter',
-          display_columns_type: 'date_periods',
-          from_date: '2020',
-          to_date: '2021',
-          number_format: {
-            divide_1000: true,
-          },
-        })
-        .send();
-      
-      expect(res.body.accounts[0].children).include.something.deep.equals({
-        id: debitAccount.id,
-        index: debitAccount.index,
-        name: debitAccount.name,
-        code: debitAccount.code,
-        parentAccountId: null,
-        children: [],
-        total_periods: [
-          { date: '2020-03', formatted_amount: 5, amount: 5000 },
-          { date: '2020-06', formatted_amount: 5, amount: 5000 },
-          { date: '2020-09', formatted_amount: 5, amount: 5000 },
-          { date: '2020-12', formatted_amount: 5, amount: 5000 },
-          { date: '2021-03', formatted_amount: 5, amount: 5000 },
-        ],
-        total: { formatted_amount: 5, amount: 5000, date: '2021' },
-      });
-    });
-
-    it('Should not retrieve accounts has no transactions between the given date range in case query none_zero is true.', async () => {
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          display_columns_by: 'quarter',
-          from_date: '2002',
-          to_date: '2003',
-          number_format: {
-            divide_1000: true,
-          },
-          none_zero: true,
-        })
-        .send();
-
-      expect(res.body.accounts[0].children.length).equals(0);
-      expect(res.body.accounts[1].children.length).equals(0);
-    });
-
-    it('Should retrieve accounts in nested structure parent and children accounts.', async () => {
-      const childAccount = await tenantFactory.create('account', {
-        parent_account_id: debitAccount.id,
-        account_type_id: 1
-      });
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          none_zero: false,
-          account_ids: [childAccount.id, debitAccount.id]
-        })
-        .send();
-
-      expect(res.body.accounts[0].children).include.something.deep.equals({
-        id: debitAccount.id,
-        index: null,
-        name: debitAccount.name,
-        code: debitAccount.code,
-        parentAccountId: null,
-        total: { formatted_amount: 5000, amount: 5000, date: '2020-12-31' },
-        children: [
-          {
-            id: childAccount.id,
-            index: null,
-            name: childAccount.name,
-            code: childAccount.code,
-            parentAccountId: debitAccount.id,
-            total: { formatted_amount: 0, amount: 0, date: '2020-12-31' },
-            children: [],
-          }
-        ]
-      });
-    });
-    
-    it('Should parent account balance sumation of total balane all children accounts.', async () => {
-      const childAccount = await tenantFactory.create('account', {
-        parent_account_id: debitAccount.id,
-        account_type_id: 1
-      });
-      await tenantFactory.create('account_transaction', {
-        credit: 0, debit: 1000, account_id: childAccount.id, date: '2020-1-10'
-      });
-
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          none_zero: false,
-          account_ids: [childAccount.id, debitAccount.id]
-        })
-        .send();
-
-      expect(res.body.accounts[0].children[0].total.amount).equals(6000);
-      expect(res.body.accounts[0].children[0].total.formatted_amount).equals(6000);
-    });
-
-    it('Should parent account balance sumation of total periods amounts all children accounts.', async () => {
-      const childAccount = await tenantFactory.create('account', {
-        parent_account_id: debitAccount.id,
-        account_type_id: 1
-      });
-      await tenantFactory.create('account_transaction', {
-        credit: 0, debit: 1000, account_id: childAccount.id, date: '2020-2-10'
-      });
-
-      const res = await request()
-        .get('/api/financial_statements/balance_sheet')
-        .set('x-access-token', loginRes.body.token)
-        .set('organization-id', tenantWebsite.organizationId)
-        .query({
-          none_zero: false,
-          account_ids: [childAccount.id, debitAccount.id],
-          display_columns_type: 'date_periods',
-          display_columns_by: 'month',
-          from_date: '2020-01-01',
-          to_date: '2020-12-12',
-        })
-        .send();
-
-      expect(res.body.accounts[0].children[0].total_periods).deep.equals([
-        { amount: 5000, formatted_amount: 5000, date: '2020-01' },
-        { amount: 6000, formatted_amount: 6000, date: '2020-02' },
-        { amount: 6000, formatted_amount: 6000, date: '2020-03' },
-        { amount: 6000, formatted_amount: 6000, date: '2020-04' },
-        { amount: 6000, formatted_amount: 6000, date: '2020-05' },
-        { amount: 6000, formatted_amount: 6000, date: '2020-06' },
-        { amount: 6000, formatted_amount: 6000, date: '2020-07' },
-        { amount: 6000, formatted_amount: 6000, date: '2020-08' },
-        { amount: 6000, formatted_amount: 6000, date: '2020-09' },
-        { amount: 6000, formatted_amount: 6000, date: '2020-10' },
-        { amount: 6000, formatted_amount: 6000, date: '2020-11' },
-        { amount: 6000, formatted_amount: 6000, date: '2020-12' }
-      ])
-    });
-  });
-
   describe('routes: `/financial_statements/trial_balance`', () => {
     it('Should response unauthorized in case the user was not authorized.', async () => {
       const res = await request()