Merge branch 'master' of https://github.com/abouolia/Bigcapital

client/src/containers/Entries/ItemsEntriesTable.js

@@ -51,8 +51,8 @@ function ItemsEntriesTable({
   const handleUpdateData = useCallback(
     (rowIndex, columnId, value) => {
       const newRows = compose(
-        updateTableRow(rowIndex, columnId, value),
         updateItemsEntriesTotal,
+        updateTableRow(rowIndex, columnId, value),
       )(entries);
 
       setRows(newRows);

client/src/containers/Entries/components.js

@@ -9,6 +9,7 @@ import {
   MoneyFieldCell,
   ItemsListCell,
   PercentFieldCell,
+  NumericInputCell
 } from 'components/DataTableCells';
 
 /**
@@ -62,7 +63,7 @@ export function ActionsCellRenderer({
  */
 export function QuantityTotalFooterCell({ rows }) {
   const quantity = sumBy(rows, r => parseInt(r.original.quantity, 10));
-  return <span>{ formattedAmount(quantity, 'USD') }</span>;
+  return <span>{ quantity }</span>;
 }
 
 /**
@@ -80,6 +81,11 @@ export function TotalCell({ value }) {
   return <span>{ formattedAmount(value, 'USD', { noZero: true }) }</span>;
 }
 
+// Index table cell.
+export function IndexTableCell({ row: { index } }){
+  return (<span>{index + 1}</span>); 
+}
+
 /**
  * Retrieve editable items entries columns.
  */
@@ -91,7 +97,7 @@ export function useEditableItemsEntriesColumns() {
       {
         Header: '#',
         accessor: 'index',
-        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
+        Cell: IndexTableCell,
         width: 40,
         disableResizing: true,
         disableSortBy: true,
@@ -119,7 +125,7 @@ export function useEditableItemsEntriesColumns() {
       {
         Header: formatMessage({ id: 'quantity' }),
         accessor: 'quantity',
-        Cell: InputGroupCell,
+        Cell: NumericInputCell,
         Footer: QuantityTotalFooterCell,
         disableSortBy: true,
         width: 80,

client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
 
 import 'style/pages/FinancialStatements/ARAgingSummary.scss';
@@ -12,7 +12,7 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { APAgingSummaryProvider } from './APAgingSummaryProvider';
 
 import withSettings from 'containers/Settings/withSettings';
-
+import withAPAgingSummaryActions from './withAPAgingSummaryActions'
 import { compose } from 'utils';
 
 /**
@@ -21,6 +21,9 @@ import { compose } from 'utils';
 function APAgingSummary({
   // #withSettings
   organizationName,
+
+  // #withAPAgingSummaryActions
+  toggleAPAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
 }) {
   const [filter, setFilter] = useState({
     asDate: moment().endOf('day').format('YYYY-MM-DD'),
@@ -45,6 +48,11 @@ function APAgingSummary({
     });
   };
 
+  // Hide the report filter drawer once the page unmount.
+  useEffect(() => () => {
+    toggleDisplayFilterDrawer(false);
+  }, [toggleDisplayFilterDrawer])
+
   return (
     <APAgingSummaryProvider filter={filter}>
       <APAgingSummaryActionsBar
@@ -70,4 +78,5 @@ export default compose(
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings?.name,
   })),
+  withAPAgingSummaryActions  
 )(APAgingSummary);

client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.js

@@ -17,20 +17,20 @@ import { Icon } from 'components';
 import NumberFormatDropdown from 'components/NumberFormatDropdown';
 
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
-import withARAgingSummaryActions from './withAPAgingSummaryActions';
+import withAPAgingSummary from './withAPAgingSummary';
+import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
-import { compose } from 'utils';
-import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
+import { saveInvoke, compose } from 'utils';
 
 /**
  * AP Aging summary sheet - Actions bar.
  */
 function APAgingSummaryActionsBar({
-  //#withPayableAgingSummary
+  // #withPayableAgingSummary
   payableAgingFilter,
 
-  //#withARAgingSummaryActions
-  toggleFilterAPAgingSummary,
+  // #withARAgingSummaryActions
+  toggleAPAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
 
   //#ownProps
   numberFormat,
@@ -38,14 +38,19 @@ function APAgingSummaryActionsBar({
 }) {
   const { isAPAgingFetching, refetch } = useAPAgingSummaryContext();
 
-  const handleFilterToggleClick = () => toggleFilterAPAgingSummary();
+  const handleFilterToggleClick = () => {
+    toggleFilterDrawerDisplay();
+  }
 
   // handle recalculate report button.
-  const handleRecalculateReport = () => refetch();
+  const handleRecalculateReport = () => { 
+    refetch();
+  }
 
   // handle number format submit.
-  const handleNumberFormatSubmit = (numberFormat) =>
-    safeInvoke(onNumberFormatSubmit, numberFormat);
+  const handleNumberFormatSubmit = (numberFormat) => {
+    saveInvoke(onNumberFormatSubmit, numberFormat);
+  }
 
   return (
     <DashboardActionsBar>
@@ -112,4 +117,9 @@ function APAgingSummaryActionsBar({
   );
 }
 
-export default compose(withARAgingSummaryActions)(APAgingSummaryActionsBar);
+export default compose(
+  withAPAgingSummaryActions,
+  withAPAgingSummary(({ APAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: APAgingSummaryFilterDrawer
+  }))
+)(APAgingSummaryActionsBar);

client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js

@@ -17,12 +17,15 @@ import { compose } from 'utils';
  * AP Aging Summary Report - Drawer Header.
  */
 function APAgingSummaryHeader({
+  // #ownProps
   pageFilter,
   onSubmitFilter,
-  payableAgingFilter,
 
-  // #withPayableAgingSummaryActions
-  toggleFilterAPAgingSummary,
+  // #withAPAgingSummaryActions
+  toggleAPAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
+
+  // #withAPAgingSummary
+  isFilterDrawerOpen
 }) {
   const validationSchema = Yup.object({
     as_date: Yup.date().required().label('asDate'),
@@ -38,25 +41,32 @@ function APAgingSummaryHeader({
       .label('agingPeriods'),
   });
 
-  // initial values.
+  // Initial values.
   const initialValues = {
     as_date: moment(pageFilter.asDate).toDate(),
     aging_days_before: 30,
     aging_periods: 3,
   };
 
-  // handle form submit.
+  // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
-    toggleFilterAPAgingSummary();
+    toggleFilterDrawerDisplay(false);
     setSubmitting(false);
   };
 
   // handle cancel button click.
-  const handleCancelClick = () => toggleFilterAPAgingSummary();
+  const handleCancelClick = () => {
+    toggleFilterDrawerDisplay(false);
+  };
+
+  // Handle the drawer closing.
+  const handleDrawerClose = () => {
+    toggleFilterDrawerDisplay(false);
+  };
 
   return (
-    <FinancialStatementHeader isOpen={payableAgingFilter}>
+    <FinancialStatementHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
@@ -86,7 +96,7 @@ function APAgingSummaryHeader({
 
 export default compose(
   withAPAgingSummaryActions,
-  withAPAgingSummary(({ payableAgingSummaryFilter }) => ({
-    payableAgingFilter: payableAgingSummaryFilter,
+  withAPAgingSummary(({ APAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: APAgingSummaryFilterDrawer,
   })),
 )(APAgingSummaryHeader);

client/src/containers/FinancialStatements/APAgingSummary/components.js

@@ -36,7 +36,6 @@ export const useAPAgingSummaryColumns = () => {
           minWidth: 120,
         }),
       },
-
       ...agingColumns.map((agingColumn, index) => ({
         Header: agingColumn,
         accessor: `aging-${index}`,

client/src/containers/FinancialStatements/APAgingSummary/withAPAgingSummary.js

@@ -1,33 +1,15 @@
 import { connect } from 'react-redux';
 import {
-  getFinancialSheetFactory,
-  getFinancialSheetColumnsFactory,
-  getFinancialSheetTableRowsFactory,
+  APAgingSummaryFilterDrawerSelector,
 } from 'store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
-    const getAPAgingSheet = getFinancialSheetFactory('payableAgingSummary');
-    const getAPAgingSheetColumns = getFinancialSheetColumnsFactory(
-      'payableAgingSummary',
-    );
-    const getAPAgingSheetRows = getFinancialSheetTableRowsFactory(
-      'payableAgingSummary',
-    );
-
-    const {
-      loading,
-      filter,
-      refresh,
-    } = state.financialStatements.payableAgingSummary;
-
     const mapped = {
-      payableAgingSummarySheet: getAPAgingSheet(state, props),
-      payableAgingSummaryColumns: getAPAgingSheetColumns(state, props),
-      payableAgingSummaryRows: getAPAgingSheetRows(state, props),
-      payableAgingSummaryLoading: loading,
-      payableAgingSummaryFilter: filter,
-      APAgingSummaryRefresh: refresh,
+      APAgingSummaryFilterDrawer: APAgingSummaryFilterDrawerSelector(
+        state,
+        props,
+      ),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/FinancialStatements/APAgingSummary/withAPAgingSummaryActions.js

@@ -1,18 +1,9 @@
 import { connect } from 'react-redux';
-import {
-  fetchPayableAginSummary,
-  payableAgingSummaryRefresh,
-} from 'store/financialStatement/financialStatements.actions';
+import { toggleAPAgingSummaryFilterDrawer } from 'store/financialStatement/financialStatements.actions';
 
 const mapActionsToProps = (dispatch) => ({
-  requestPayableAgingSummary: (query) =>
-    dispatch(fetchPayableAginSummary({ query })),
-  refreshAPAgingSummary: (refresh) =>
-    dispatch(payableAgingSummaryRefresh(refresh)),
-  toggleFilterAPAgingSummary: () =>
-    dispatch({
-      type: 'PAYABLE_AGING_SUMMARY_FILTER_TOGGLE',
-    }),
+  toggleAPAgingSummaryFilterDrawer: (toggle) =>
+    dispatch(toggleAPAgingSummaryFilterDrawer(toggle)),
 });
 
 export default connect(null, mapActionsToProps);

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
 
 import 'style/pages/FinancialStatements/ARAgingSummary.scss';
@@ -11,6 +11,7 @@ import ARAgingSummaryTable from './ARAgingSummaryTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { ARAgingSummaryProvider } from './ARAgingSummaryProvider';
 
+import withARAgingSummaryActions from './withARAgingSummaryActions'
 import withSettings from 'containers/Settings/withSettings';
 
 import { compose } from 'utils';
@@ -21,6 +22,9 @@ import { compose } from 'utils';
 function ReceivableAgingSummarySheet({
   // #withSettings
   organizationName,
+
+  // #withARAgingSummaryActions
+  toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer
 }) {
   const [filter, setFilter] = useState({
     asDate: moment().endOf('day').format('YYYY-MM-DD'),
@@ -42,6 +46,11 @@ function ReceivableAgingSummarySheet({
     setFilter({ ...filter, numberFormat });
   };
 
+  // Hide the filter drawer once the page unmount.
+  useEffect(() => () => {
+    toggleDisplayFilterDrawer(false);
+  }, [toggleDisplayFilterDrawer]);
+
   return (
     <ARAgingSummaryProvider filter={filter}>
       <ARAgingSummaryActionsBar
@@ -67,4 +76,5 @@ export default compose(
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,
   })),
+  withARAgingSummaryActions
 )(ReceivableAgingSummarySheet);

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js

@@ -17,6 +17,7 @@ import NumberFormatDropdown from 'components/NumberFormatDropdown';
 
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
+import withARAgingSummary from './withARAgingSummary';
 
 import { compose } from 'utils';
 import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
@@ -26,10 +27,10 @@ import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
  */
 function ARAgingSummaryActionsBar({
   // #withReceivableAging
-  receivableAgingFilter,
+  isFilterDrawerOpen,
 
   // #withReceivableAgingActions
-  toggleFilterARAgingSummary,
+  toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
 
   // #ownProps
   numberFormat,
@@ -38,16 +39,19 @@ function ARAgingSummaryActionsBar({
   const { isARAgingFetching, refetch } = useARAgingSummaryContext();
 
   const handleFilterToggleClick = () => {
-    toggleFilterARAgingSummary();
+    toggleDisplayFilterDrawer();
   };
+
   // Handles re-calculate report button.
   const handleRecalcReport = () => {
     refetch();
   };
+
   // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
     safeInvoke(onNumberFormatSubmit, numberFormat);
   };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -63,14 +67,14 @@ function ARAgingSummaryActionsBar({
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
           text={
-            receivableAgingFilter ? (
+            isFilterDrawerOpen ? (
               <T id="hide_customizer" />
             ) : (
               <T id={'customize_report'} />
             )
           }
           onClick={handleFilterToggleClick}
-          active={receivableAgingFilter}
+          active={isFilterDrawerOpen}
         />
         <NavbarDivider />
 
@@ -117,4 +121,7 @@ function ARAgingSummaryActionsBar({
 
 export default compose(
   withARAgingSummaryActions,
+  withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
+  }))
 )(ARAgingSummaryActionsBar);

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js

@@ -20,10 +20,12 @@ function ARAgingSummaryHeader({
   // #ownProps
   pageFilter,
   onSubmitFilter,
-  receivableAgingFilter,
 
   // #withReceivableAgingSummaryActions
-  toggleFilterARAgingSummary,
+  toggleARAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
+
+  // #withARAgingSummary
+  isFilterDrawerOpen,
 }) {
   const validationSchema = Yup.object().shape({
     asDate: Yup.date().required().label('asDate'),
@@ -44,19 +46,29 @@ function ARAgingSummaryHeader({
     agingDaysBefore: 30,
     agingPeriods: 3,
   };
+
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
-    toggleFilterARAgingSummary();
+    toggleFilterDrawerDisplay(false);
     setSubmitting(false);
   };
+
   // Handle cancel button click.
   const handleCancelClick = () => {
-    toggleFilterARAgingSummary();
+    toggleFilterDrawerDisplay(false);
+  };
+ 
+  // Handle the drawer close.
+  const handleDrawerClose = () => {
+    toggleFilterDrawerDisplay(false);
   };
 
   return (
-    <FinancialStatementHeader isOpen={receivableAgingFilter}>
+    <FinancialStatementHeader
+      isOpen={isFilterDrawerOpen}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
@@ -87,7 +99,7 @@ function ARAgingSummaryHeader({
 
 export default compose(
   withARAgingSummaryActions,
-  withARAgingSummary(({ receivableAgingSummaryFilter }) => ({
-    receivableAgingFilter: receivableAgingSummaryFilter,
+  withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
   })),
 )(ARAgingSummaryHeader);

client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.js

@@ -1,34 +1,12 @@
 import { connect } from 'react-redux';
 import {
-  getFinancialSheetFactory,
-  getFinancialSheetAccountsFactory,
-  getFinancialSheetColumnsFactory,
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,
+  getARAgingSummaryFilterDrawer,
 } from 'store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
-    const getARAgingSheet = getFinancialSheetFactory('receivableAgingSummary');
-    const getARAgingSheetColumns = getFinancialSheetColumnsFactory(
-      'receivableAgingSummary',
-    );
-    const getARAgingSheetRows = getFinancialSheetTableRowsFactory(
-      'receivableAgingSummary',
-    );
-    const {
-      loading,
-      filter,
-      refresh,
-    } = state.financialStatements.receivableAgingSummary;
-
     const mapped = {
-      receivableAgingSummarySheet: getARAgingSheet(state, props),
-      receivableAgingSummaryColumns: getARAgingSheetColumns(state, props),
-      receivableAgingSummaryRows: getARAgingSheetRows(state, props),
-      receivableAgingSummaryLoading: loading,
-      receivableAgingSummaryFilter: filter,
-      ARAgingSummaryRefresh: refresh,
+      ARAgingSummaryFilterDrawer: getARAgingSummaryFilterDrawer(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummaryActions.js

@@ -1,18 +1,9 @@
 import { connect } from 'react-redux';
-import {
-  fetchReceivableAgingSummary,
-  receivableAgingSummaryRefresh,
-} from 'store/financialStatement/financialStatements.actions';
+import { toggleARAgingSummaryFilterDrawer } from 'store/financialStatement/financialStatements.actions';
 
 const mapActionsToProps = (dispatch) => ({
-  requestReceivableAgingSummary: (query) =>
-    dispatch(fetchReceivableAgingSummary({ query })),
-  toggleFilterARAgingSummary: () =>
-    dispatch({
-      type: 'RECEIVABLE_AGING_SUMMARY_FILTER_TOGGLE',
-    }),
-  refreshARAgingSummary: (refresh) =>
-    dispatch(receivableAgingSummaryRefresh(refresh)),
+  toggleARAgingSummaryFilterDrawer: (toggle) => 
+    dispatch(toggleARAgingSummaryFilterDrawer(toggle)),
 });
 
 export default connect(null, mapActionsToProps);

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import moment from 'moment';
 
 import 'style/pages/FinancialStatements/BalanceSheet.scss';
@@ -10,6 +10,7 @@ import BalanceSheetActionsBar from './BalanceSheetActionsBar';
 
 import { FinancialStatement } from 'components';
 
+import withBalanceSheetActions from './withBalanceSheetActions';
 import withSettings from 'containers/Settings/withSettings';
 import { BalanceSheetProvider } from './BalanceSheetProvider';
 
@@ -21,6 +22,9 @@ import { compose } from 'utils';
 function BalanceSheet({
   // #withPreferences
   organizationName,
+
+  // #withBalanceSheetActions
+  toggleBalanceSheetFilterDrawer
 }) {
   const [filter, setFilter] = useState({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -40,7 +44,7 @@ function BalanceSheet({
     setFilter({ ..._filter });
   };
 
-  // Hnadle number format submit.
+  // Handle number format submit.
   const handleNumberFormatSubmit = (values) => {
     setFilter({
       ...filter,
@@ -48,6 +52,11 @@ function BalanceSheet({
     });
   };
 
+  // Hides the balance sheet filter drawer once the page unmount.
+  useEffect(() => () => {
+    toggleBalanceSheetFilterDrawer(false);
+  }, [toggleBalanceSheetFilterDrawer])
+
   return (
     <BalanceSheetProvider filter={filter}>
       <BalanceSheetActionsBar
@@ -73,4 +82,5 @@ export default compose(
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,
   })),
+  withBalanceSheetActions,
 )(BalanceSheet);

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   NavbarGroup,
   Button,
@@ -16,16 +16,16 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import NumberFormatDropdown from 'components/NumberFormatDropdown';
 
 import { compose, saveInvoke } from 'utils';
-import withBalanceSheetDetail from './withBalanceSheetDetail';
+import withBalanceSheet from './withBalanceSheet';
 import withBalanceSheetActions from './withBalanceSheetActions';
 import { useBalanceSheetContext } from './BalanceSheetProvider';
 
 function BalanceSheetActionsBar({
-  // #withBalanceSheetDetail
-  balanceSheetFilter,
+  // #withBalanceSheet
+  balanceSheetDrawerFilter,
 
   // #withBalanceSheetActions
-  toggleBalanceSheetFilter,
+  toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
 
   // #ownProps
   numberFormat,
@@ -35,7 +35,7 @@ function BalanceSheetActionsBar({
 
   // Handle filter toggle click.
   const handleFilterToggleClick = () => {
-    toggleBalanceSheetFilter();
+    toggleFilterDrawer();
   };
 
   // Handle recalculate the report button.
@@ -63,14 +63,14 @@ function BalanceSheetActionsBar({
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
           text={
-            !balanceSheetFilter ? (
+            !balanceSheetDrawerFilter ? (
               <T id={'customize_report'} />
             ) : (
               <T id={'hide_customizer'} />
             )
           }
           onClick={handleFilterToggleClick}
-          active={balanceSheetFilter}
+          active={balanceSheetDrawerFilter}
         />
         <NavbarDivider />
 
@@ -123,9 +123,6 @@ function BalanceSheetActionsBar({
 }
 
 export default compose(
-  withBalanceSheetDetail(({ balanceSheetFilter, balanceSheetLoading }) => ({
-    balanceSheetFilter,
-    balanceSheetLoading,
-  })),
+  withBalanceSheet(({ balanceSheetDrawerFilter }) => ({ balanceSheetDrawerFilter })),
   withBalanceSheetActions,
 )(BalanceSheetActionsBar);

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js

@@ -7,7 +7,7 @@ import { Formik, Form } from 'formik';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 
-import withBalanceSheet from './withBalanceSheetDetail';
+import withBalanceSheet from './withBalanceSheet';
 import withBalanceSheetActions from './withBalanceSheetActions';
 
 import { compose } from 'utils';
@@ -19,10 +19,10 @@ function BalanceSheetHeader({
   pageFilter,
 
   // #withBalanceSheet
-  balanceSheetFilter,
+  balanceSheetDrawerFilter,
 
   // #withBalanceSheetActions
-  toggleBalanceSheetFilter,
+  toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
 }) {
   const { formatMessage } = useIntl();
 
@@ -51,22 +51,23 @@ function BalanceSheetHeader({
   // Handle form submit.
   const handleSubmit = (values, actions) => {
     onSubmitFilter(values);
-    toggleBalanceSheetFilter();
+    toggleFilterDrawer(false);
     actions.setSubmitting(false);
   };
 
   // Handle cancel button click.
   const handleCancelClick = () => {
-    toggleBalanceSheetFilter();
+    toggleFilterDrawer(false);
   };
+
   // Handle drawer close action.
   const handleDrawerClose = () => {
-    toggleBalanceSheetFilter();
+    toggleFilterDrawer(false);
   };
 
   return (
     <FinancialStatementHeader
-      isOpen={balanceSheetFilter}
+      isOpen={balanceSheetDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
       <Formik
@@ -98,8 +99,8 @@ function BalanceSheetHeader({
 }
 
 export default compose(
-  withBalanceSheet(({ balanceSheetFilter }) => ({
-    balanceSheetFilter,
+  withBalanceSheet(({ balanceSheetDrawerFilter }) => ({
+    balanceSheetDrawerFilter,
   })),
   withBalanceSheetActions,
 )(BalanceSheetHeader);

client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheet.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { getBalanceSheetFilterDrawer } from 'store/financialStatement/financialStatements.selectors';
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      balanceSheetDrawerFilter: getBalanceSheetFilterDrawer(state),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+
+  return connect(mapStateToProps);
+};

client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js

@@ -1,14 +1,11 @@
 import { connect } from 'react-redux';
 import {
-  fetchBalanceSheet,
-  balanceSheetRefresh,
+  toggleBalanceSheetFilterDrawer,
 } from 'store/financialStatement/financialStatements.actions';
 
 const mapDispatchToProps = (dispatch) => ({
-  fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
-  toggleBalanceSheetFilter: () =>
-    dispatch({ type: 'BALANCE_SHEET_FILTER_TOGGLE' }),
-  refreshBalanceSheet: (refresh) => dispatch(balanceSheetRefresh(refresh)),
+  toggleBalanceSheetFilterDrawer: (toggle) =>
+    dispatch(toggleBalanceSheetFilterDrawer(toggle)),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js

@@ -1,36 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  getFinancialSheetFactory,
-  getFinancialSheetAccountsFactory,
-  getFinancialSheetColumnsFactory,
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,
-} from 'store/financialStatement/financialStatements.selectors';
-
-export default (mapState) => {
-  const mapStateToProps = (state, props) => {
-    const getBalanceSheet = getFinancialSheetFactory('balanceSheet');
-    const getBalanceSheetAccounts = getFinancialSheetAccountsFactory(
-      'balanceSheet',
-    );
-    const getBalanceSheetTableRows = getFinancialSheetTableRowsFactory(
-      'balanceSheet',
-    );
-    const getBalanceSheetColumns = getFinancialSheetColumnsFactory('balanceSheet');
-    const getBalanceSheetQuery = getFinancialSheetQueryFactory('balanceSheet');
-
-    const mapped = {
-      balanceSheet: getBalanceSheet(state, props),
-      balanceSheetAccounts: getBalanceSheetAccounts(state, props),
-      balanceSheetTableRows: getBalanceSheetTableRows(state, props),
-      balanceSheetColumns: getBalanceSheetColumns(state, props),
-      balanceSheetQuery: getBalanceSheetQuery(state, props),
-      balanceSheetLoading: state.financialStatements.balanceSheet.loading,
-      balanceSheetFilter: state.financialStatements.balanceSheet.filter,
-      balanceSheetRefresh: state.financialStatements.balanceSheet.refresh,
-    };
-    return mapState ? mapState(mapped, state, props) : mapped;
-  };
-
-  return connect(mapStateToProps);
-};

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -21,7 +21,7 @@ import { compose } from 'utils';
  */
 function GeneralLedger({
   // #withGeneralLedgerActions
-  refreshGeneralLedgerSheet,
+  toggleGeneralLedgerFilterDrawer,
 
   // #withSettings
   organizationName,
@@ -42,9 +42,16 @@ function GeneralLedger({
         toDate: moment(filter.toDate).format('YYYY-MM-DD'),
       };
       setFilter(parsedFilter);
-      refreshGeneralLedgerSheet(true);
     },
-    [setFilter, refreshGeneralLedgerSheet],
+    [setFilter],
+  );
+
+  // Hide the filter drawer once the page unmount.
+  React.useEffect(
+    () => () => {
+      toggleGeneralLedgerFilterDrawer(false);
+    },
+    [toggleGeneralLedgerFilterDrawer],
   );
 
   return (

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js

@@ -25,16 +25,16 @@ import { useGeneralLedgerContext } from './GeneralLedgerProvider';
  */
 function GeneralLedgerActionsBar({
   // #withGeneralLedger
-  generalLedgerSheetFilter,
+  isFilterDrawerOpen,
 
   // #withGeneralLedgerActions
-  toggleGeneralLedgerSheetFilter,
+  toggleGeneralLedgerFilterDrawer: toggleDisplayFilterDrawer,
 }) {
   const { sheetRefresh } = useGeneralLedgerContext();
 
   // Handle customize button click.
   const handleCustomizeClick = () => {
-    toggleGeneralLedgerSheetFilter();
+    toggleDisplayFilterDrawer();
   };
 
   // Handle re-calculate button click.
@@ -57,14 +57,14 @@ function GeneralLedgerActionsBar({
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
           text={
-            generalLedgerSheetFilter ? (
+            isFilterDrawerOpen ? (
               <T id={'hide_customizer'} />
             ) : (
               <T id={'customize_report'} />
             )
           }
           onClick={handleCustomizeClick}
-          active={generalLedgerSheetFilter}
+          active={isFilterDrawerOpen}
         />
         <NavbarDivider />
 
@@ -97,8 +97,8 @@ function GeneralLedgerActionsBar({
 }
 
 export default compose(
-  withGeneralLedger(({ generalLedgerSheetFilter }) => ({
-    generalLedgerSheetFilter,
+  withGeneralLedger(({ generalLedgerFilterDrawer }) => ({
+    isFilterDrawerOpen: generalLedgerFilterDrawer,
   })),
   withGeneralLedgerActions,
 )(GeneralLedgerActionsBar);

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js

@@ -11,7 +11,7 @@ import GeneralLedgerHeaderGeneralPane from './GeneralLedgerHeaderGeneralPane';
 import withGeneralLedger from './withGeneralLedger';
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 
-import { compose } from 'utils';
+import { compose, saveInvoke } from 'utils';
 
 /**
  * Geenral Ledger (GL) - Header.
@@ -22,10 +22,10 @@ function GeneralLedgerHeader({
   pageFilter,
 
   // #withGeneralLedgerActions
-  toggleGeneralLedgerSheetFilter,
+  toggleGeneralLedgerFilterDrawer: toggleDisplayFilterDrawer,
 
   // #withGeneralLedger
-  generalLedgerSheetFilter,
+  isFilterDrawerOpen,
 }) {
   // Initial values.
   const initialValues = {
@@ -43,24 +43,24 @@ function GeneralLedgerHeader({
 
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
-    onSubmitFilter(values);
-    toggleGeneralLedgerSheetFilter();
+    saveInvoke(onSubmitFilter, values);
+    toggleDisplayFilterDrawer();
     setSubmitting(false);
   };
 
   // Handle cancel button click.
   const handleCancelClick = () => {
-    toggleGeneralLedgerSheetFilter(false);
+    toggleDisplayFilterDrawer(false);
   };
 
   // Handle drawer close action.
   const handleDrawerClose = () => {
-    toggleGeneralLedgerSheetFilter(false);
+    toggleDisplayFilterDrawer(false);
   };
 
   return (
     <FinancialStatementHeader
-      isOpen={generalLedgerSheetFilter}
+      isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
       <Formik
@@ -93,8 +93,8 @@ function GeneralLedgerHeader({
 }
 
 export default compose(
-  withGeneralLedger(({ generalLedgerSheetFilter }) => ({
-    generalLedgerSheetFilter,
+  withGeneralLedger(({ generalLedgerFilterDrawer }) => ({
+    isFilterDrawerOpen: generalLedgerFilterDrawer,
   })),
   withGeneralLedgerActions,
 )(GeneralLedgerHeader);

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -6,8 +6,8 @@ import { useIntl } from 'react-intl';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 
-import { getForceWidth, getColumnWidth } from 'utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
+import { useGeneralLedgerTableColumns } from './components';
 
 /**
  * General ledger table.
@@ -23,90 +23,8 @@ export default function GeneralLedgerTable({
     isSheetLoading
   } = useGeneralLedgerContext();
 
-  const columns = useMemo(
-    () => [
-      {
-        Header: formatMessage({ id: 'date' }),
-        accessor: (row) => {
-          if (row.rowType === 'ACCOUNT_ROW') {
-            return (
-              <span
-                className={'force-width'}
-                style={{ minWidth: getForceWidth(row.date) }}
-              >
-                {row.date}
-              </span>
-            );
-          }
-          return row.date;
-        },
-        className: 'date',
-        width: 120,
-      },
-      {
-        Header: formatMessage({ id: 'account_name' }),
-        accessor: 'name',
-        className: 'name',
-        textOverview: true,
-        // width: 200,
-      },
-      {
-        Header: formatMessage({ id: 'transaction_type' }),
-        accessor: 'reference_type_formatted',
-        className: 'transaction_type',
-        width: 125 ,
-      },
-      {
-        Header: formatMessage({ id: 'transaction_number' }),
-        accessor: 'reference_id',
-        className: 'transaction_number',
-        width: 100,
-      },
-      {
-        Header: formatMessage({ id: 'description' }),
-        accessor: 'note',
-        className: 'description',
-        // width: 145,
-      },
-      {
-        Header: formatMessage({ id: 'credit' }),
-        accessor: 'formatted_credit',
-        className: 'credit',
-        width: getColumnWidth(tableRows, 'formatted_credit', {
-          minWidth: 100,
-          magicSpacing: 10,
-        }),
-      },
-      {
-        Header: formatMessage({ id: 'debit' }),
-        accessor: 'formatted_debit',
-        className: 'debit',
-        width: getColumnWidth(tableRows, 'formatted_debit', {
-          minWidth: 100,
-          magicSpacing: 10,
-        }),
-      },
-      {
-        Header: formatMessage({ id: 'amount' }),
-        accessor: 'formatted_amount',
-        className: 'amount',
-        width: getColumnWidth(tableRows, 'formatted_amount', {
-          minWidth: 100,
-          magicSpacing: 10,
-        }),
-      },
-      {
-        Header: formatMessage({ id: 'running_balance' }),
-        accessor: 'formatted_running_balance',
-        className: 'running_balance',
-        width: getColumnWidth(tableRows, 'formatted_running_balance', {
-          minWidth: 100,
-          magicSpacing: 10,
-        }),
-      },
-    ],
-    [formatMessage, tableRows],
-  );
+  // General ledger table columns.
+  const columns = useGeneralLedgerTableColumns();
 
   // Default expanded rows of general ledger table.
   const expandedRows = useMemo(
@@ -127,7 +45,7 @@ export default function GeneralLedgerTable({
       fullWidth={true}
     >
       <DataTable
-        className="bigcapital-datatable--financial-report"
+      className="bigcapital-datatable--financial-report"
         noResults={formatMessage({
           id: 'this_report_does_not_contain_any_data_between_date_period',
         })}

client/src/containers/FinancialStatements/GeneralLedger/components.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { getForceWidth, getColumnWidth } from 'utils';
+import { useGeneralLedgerContext } from './GeneralLedgerProvider';
+
+/**
+ * Retrieve the general ledger table columns.
+ */
+export function useGeneralLedgerTableColumns() {
+  const { formatMessage } = useIntl();
+
+  // General ledger context.
+  const {
+    generalLedger: { tableRows },
+  } = useGeneralLedgerContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'date' }),
+        accessor: (row) => {
+          if (row.rowType === 'ACCOUNT_ROW') {
+            return (
+              <span
+                className={'force-width'}
+                style={{ minWidth: getForceWidth(row.date) }}
+              >
+                {row.date}
+              </span>
+            );
+          }
+          return row.date;
+        },
+        className: 'date',
+        width: 120,
+      },
+      {
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: 'name',
+        className: 'name',
+        textOverview: true,
+        // width: 200,
+      },
+      {
+        Header: formatMessage({ id: 'transaction_type' }),
+        accessor: 'reference_type_formatted',
+        className: 'transaction_type',
+        width: 125,
+      },
+      {
+        Header: formatMessage({ id: 'transaction_number' }),
+        accessor: 'reference_id',
+        className: 'transaction_number',
+        width: 100,
+      },
+      {
+        Header: formatMessage({ id: 'description' }),
+        accessor: 'note',
+        className: 'description',
+        // width: 145,
+      },
+      {
+        Header: formatMessage({ id: 'credit' }),
+        accessor: 'formatted_credit',
+        className: 'credit',
+        width: getColumnWidth(tableRows, 'formatted_credit', {
+          minWidth: 100,
+          magicSpacing: 10,
+        }),
+      },
+      {
+        Header: formatMessage({ id: 'debit' }),
+        accessor: 'formatted_debit',
+        className: 'debit',
+        width: getColumnWidth(tableRows, 'formatted_debit', {
+          minWidth: 100,
+          magicSpacing: 10,
+        }),
+      },
+      {
+        Header: formatMessage({ id: 'amount' }),
+        accessor: 'formatted_amount',
+        className: 'amount',
+        width: getColumnWidth(tableRows, 'formatted_amount', {
+          minWidth: 100,
+          magicSpacing: 10,
+        }),
+      },
+      {
+        Header: formatMessage({ id: 'running_balance' }),
+        accessor: 'formatted_running_balance',
+        className: 'running_balance',
+        width: getColumnWidth(tableRows, 'formatted_running_balance', {
+          minWidth: 100,
+          magicSpacing: 10,
+        }),
+      },
+    ],
+    [formatMessage, tableRows],
+  );
+}

client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js

@@ -1,25 +1,12 @@
 import { connect } from 'react-redux';
 import {
-  getFinancialSheetFactory,
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,
+  getGeneralLedgerFilterDrawer
 } from 'store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
-    const getGeneralLedgerSheet = getFinancialSheetFactory('generalLedger');
-    const getSheetTableRows = getFinancialSheetTableRowsFactory('generalLedger');
-    const getSheetQuery = getFinancialSheetQueryFactory('generalLedger');
-
     const mapped = {
-      generalLedgerSheet: getGeneralLedgerSheet(state, props),
-      generalLedgerTableRows: getSheetTableRows(state, props),
-      generalLedgerQuery: getSheetQuery(state, props),
-      generalLedgerSheetLoading:
-        state.financialStatements.generalLedger.loading,
-      generalLedgerSheetFilter: state.financialStatements.generalLedger.filter,
-      generalLedgerSheetRefresh:
-        state.financialStatements.generalLedger.refresh,
+      generalLedgerFilterDrawer: getGeneralLedgerFilterDrawer(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js

@@ -1,13 +1,11 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import {
-  fetchGeneralLedger,
-  refreshGeneralLedgerSheet,
+  toggleGeneralLedgerFilterDrawer,
 } from 'store/financialStatement/financialStatements.actions';
 
 const mapDispatchToProps = (dispatch) => ({
-  fetchGeneralLedger: (query = {}) => dispatch(fetchGeneralLedger({ query })),
-  toggleGeneralLedgerSheetFilter: () => dispatch({ type: 'GENERAL_LEDGER_FILTER_TOGGLE' }),
-  refreshGeneralLedgerSheet: (refresh) => dispatch(refreshGeneralLedgerSheet(refresh)),
+  toggleGeneralLedgerFilterDrawer: (toggle) =>
+    dispatch(toggleGeneralLedgerFilterDrawer(toggle)),
 });
 
-export default connect(null, mapDispatchToProps);
+export default connect(null, mapDispatchToProps);

client/src/containers/FinancialStatements/Journal/Journal.js

@@ -13,9 +13,6 @@ import { JournalSheetProvider } from './JournalProvider';
 import withSettings from 'containers/Settings/withSettings';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withJournalActions from './withJournalActions';
-import withJournal from './withJournal';
-
-import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
 
 import 'style/pages/FinancialStatements/Journal.scss';
 
@@ -23,35 +20,17 @@ import 'style/pages/FinancialStatements/Journal.scss';
  * Journal sheet.
  */
 function Journal({
-  // #withDashboardActions
-  changePageTitle,
-  setDashboardBackLink,
-  setSidebarShrink,
-
   // #withPreferences
   organizationName,
+
+  // #withJournalActions
+  toggleJournalSheetFilter
 }) {
   const [filter, setFilter] = useState({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
     toDate: moment().endOf('year').format('YYYY-MM-DD'),
     basis: 'accural',
   });
-  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'journal_sheet' }));
-  }, [changePageTitle, formatMessage]);
-
-  useEffect(() => {
-    setSidebarShrink();
-    // Show the back link on dashboard topbar.
-    setDashboardBackLink(true);
-
-    return () => {
-      // Hide the back link on dashboard topbar.
-      setDashboardBackLink(false);
-    };
-  }, [setDashboardBackLink, setSidebarShrink]);
 
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback(
@@ -66,6 +45,11 @@ function Journal({
     [setFilter],
   );
 
+  // Hide the journal sheet filter drawer once the page unmount.
+  useEffect(() => () => {
+    toggleJournalSheetFilter(false);
+  }, [toggleJournalSheetFilter]);
+
   return (
     <JournalSheetProvider query={filter}>
       <JournalActionsBar />
@@ -94,7 +78,4 @@ export default compose(
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,
   })),
-  withJournal(({ journalSheetRefresh }) => ({
-    journalSheetRefresh,
-  })),
 )(Journal);

client/src/containers/FinancialStatements/Journal/JournalActionsBar.js

@@ -24,7 +24,7 @@ import { useJournalSheetContext } from './JournalProvider';
  */
 function JournalActionsBar({
   // #withJournal
-  journalSheetFilter,
+  isFilterDrawerOpen,
 
   // #withJournalActions
   toggleJournalSheetFilter,
@@ -56,13 +56,13 @@ function JournalActionsBar({
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
           text={
-            (journalSheetFilter) ? (
+            (isFilterDrawerOpen) ? (
               <T id={'hide_customizer'} />
             ) : (
               <T id={'customize_report'} />
             )
           }
-          active={journalSheetFilter}
+          active={isFilterDrawerOpen}
           onClick={handleFilterToggleClick}
         />
         <NavbarDivider />
@@ -96,6 +96,8 @@ function JournalActionsBar({
 }
 
 export default compose(
-  withJournal(({ journalSheetFilter }) => ({ journalSheetFilter })),
+  withJournal(({ journalSheetDrawerFilter }) => ({
+    isFilterDrawerOpen: journalSheetDrawerFilter
+  })),
   withJournalActions,
 )(JournalActionsBar);

client/src/containers/FinancialStatements/Journal/JournalHeader.js

@@ -5,8 +5,7 @@ import { Tab, Tabs, Button, Intent } from '@blueprintjs/core';
 import * as Yup from 'yup';
 import { FormattedMessage as T } from 'react-intl';
 
-import JournalSheetHeaderGeneralPanel from './JournalSheetHeaderGeneralPanel';
-
+import JournalSheetHeaderGeneral from './JournalSheetHeaderGeneral';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 
 import withJournal from './withJournal';
@@ -22,12 +21,10 @@ function JournalHeader({
   onSubmitFilter,
 
   // #withJournalActions
-  refreshJournalSheet,
   toggleJournalSheetFilter,
 
   // #withJournal
-  journalSheetFilter,
-  journalSheetRefresh,
+  journalSheetDrawerFilter,
 }) {
   const initialValues = {
     ...pageFilter,
@@ -59,7 +56,7 @@ function JournalHeader({
 
   return (
     <FinancialStatementHeader
-      isOpen={journalSheetFilter}
+      isOpen={journalSheetDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
       <Formik
@@ -72,7 +69,7 @@ function JournalHeader({
             <Tab
               id="general"
               title={'General'}
-              panel={<JournalSheetHeaderGeneralPanel />}
+              panel={<JournalSheetHeaderGeneral />}
             />
           </Tabs>
 
@@ -91,9 +88,8 @@ function JournalHeader({
 }
 
 export default compose(
-  withJournal(({ journalSheetFilter, journalSheetRefresh }) => ({
-    journalSheetFilter,
-    journalSheetRefresh,
+  withJournal(({ journalSheetDrawerFilter }) => ({
+    journalSheetDrawerFilter,
   })),
   withJournalActions,
 )(JournalHeader);

client/src/containers/FinancialStatements/Journal/JournalTable.js

@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
-import moment from 'moment';
 import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import { useJournalSheetContext } from './JournalProvider';
 
-import { defaultExpanderReducer, getForceWidth } from 'utils';
+import { defaultExpanderReducer } from 'utils';
+import { useJournalTableColumns } from './components';
 
 export default function JournalSheetTable({
   // #ownProps
@@ -21,63 +21,8 @@ export default function JournalSheetTable({
     isLoading
   } = useJournalSheetContext();
 
-  const columns = useMemo(
-    () => [
-      {
-        Header: formatMessage({ id: 'date' }),
-        accessor: row => row.date ? moment(row.date).format('YYYY MMM DD') : '',
-        className: 'date',
-        width: 100,
-      },
-      {
-        Header: formatMessage({ id: 'transaction_type' }),
-        accessor: 'reference_type_formatted',
-        className: 'reference_type_formatted',
-        width: 120,
-      },
-      {
-        Header: formatMessage({ id: 'num' }),
-        accessor: 'reference_id',
-        className: 'reference_id',
-        width: 70,
-      },
-      {
-        Header: formatMessage({ id: 'description' }),
-        accessor: 'note',
-        className: 'note'
-      },
-      {
-        Header: formatMessage({ id: 'acc_code' }),
-        accessor: 'account_code',
-        width: 95,
-        className: 'account_code',
-      },
-      {
-        Header: formatMessage({ id: 'account' }),
-        accessor: 'account_name',
-        className: 'account_name',
-        textOverview: true,
-      },
-      {
-        Header: formatMessage({ id: 'credit' }),
-        accessor: 'formatted_credit',
-        className: 'credit'
-      },
-      {
-        Header: formatMessage({ id: 'debit' }),
-        accessor: 'formatted_debit',
-        className: 'debit'
-      },
-    ],
-    [formatMessage],
-  );
-
-  const handleFetchData = useCallback(
-    (...args) => {
-      onFetchData && onFetchData(...args);
-    },
-    [onFetchData],
-  );
+  // Retreive the journal table columns.
+  const columns = useJournalTableColumns();
 
   // Default expanded rows of general journal table.
   const expandedRows = useMemo(() => defaultExpanderReducer([], 1), []);
@@ -112,7 +57,6 @@ export default function JournalSheetTable({
         columns={columns}
         data={tableRows}
         rowClassNames={rowClassNames}
-        onFetchData={handleFetchData}
         noResults={formatMessage({
           id: 'this_report_does_not_contain_any_data_between_date_period',
         })}

client/src/containers/FinancialStatements/Journal/components.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import moment from 'moment';
+
+/**
+ * Retrieve the journal table columns.
+ */
+export const useJournalTableColumns = () => {
+  const { formatMessage } = useIntl();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'date' }),
+        accessor: (row) =>
+          row.date ? moment(row.date).format('YYYY MMM DD') : '',
+        className: 'date',
+        width: 100,
+      },
+      {
+        Header: formatMessage({ id: 'transaction_type' }),
+        accessor: 'reference_type_formatted',
+        className: 'reference_type_formatted',
+        width: 120,
+      },
+      {
+        Header: formatMessage({ id: 'num' }),
+        accessor: 'reference_id',
+        className: 'reference_id',
+        width: 70,
+      },
+      {
+        Header: formatMessage({ id: 'description' }),
+        accessor: 'note',
+        className: 'note',
+      },
+      {
+        Header: formatMessage({ id: 'acc_code' }),
+        accessor: 'account_code',
+        width: 95,
+        className: 'account_code',
+      },
+      {
+        Header: formatMessage({ id: 'account' }),
+        accessor: 'account_name',
+        className: 'account_name',
+        textOverview: true,
+      },
+      {
+        Header: formatMessage({ id: 'credit' }),
+        accessor: 'formatted_credit',
+        className: 'credit',
+      },
+      {
+        Header: formatMessage({ id: 'debit' }),
+        accessor: 'formatted_debit',
+        className: 'debit',
+      },
+    ],
+    [formatMessage],
+  );
+};

client/src/containers/FinancialStatements/Journal/withJournal.js

@@ -1,25 +1,12 @@
 import { connect } from 'react-redux';
 import {
-  getFinancialSheetFactory,
-  getFinancialSheetTableRowsFactory,
-  getFinancialSheetQueryFactory,
+  getJournalFilterDrawer,
 } from 'store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
-    const getJournalSheet = getFinancialSheetFactory('journal');
-    const getJournalSheetTableRows = getFinancialSheetTableRowsFactory(
-      'journal',
-    );
-    const getJournalSheetQuery = getFinancialSheetQueryFactory('journal');
-
     const mapped = {
-      journalSheet: getJournalSheet(state, props),
-      journalSheetTableRows: getJournalSheetTableRows(state, props),
-      journalSheetQuery: getJournalSheetQuery(state, props),
-      journalSheetLoading: state.financialStatements.journal.loading,
-      journalSheetFilter: state.financialStatements.journal.filter,
-      journalSheetRefresh: state.financialStatements.journal.refresh,
+      journalSheetDrawerFilter: getJournalFilterDrawer(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/FinancialStatements/Journal/withJournalActions.js

@@ -1,13 +1,9 @@
-import {connect} from 'react-redux';
-import {
-  fetchJournalSheet,
-  refreshJournalSheet,
-} from 'store/financialStatement/financialStatements.actions';
+import { connect } from 'react-redux';
+import { toggleJournalSheeetFilterDrawer } from 'store/financialStatement/financialStatements.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
-  requestFetchJournalSheet: (query) => dispatch(fetchJournalSheet({ query })),
-  toggleJournalSheetFilter: () => dispatch({ type: 'JOURNAL_FILTER_TOGGLE' }),
-  refreshJournalSheet: (refresh) => dispatch(refreshJournalSheet(refresh)),
+  toggleJournalSheetFilter: (toggle) =>
+    dispatch(toggleJournalSheeetFilterDrawer(toggle)),
 });
 
-export default connect(null, mapDispatchToProps);
+export default connect(null, mapDispatchToProps);

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js

@@ -26,10 +26,10 @@ import { useProfitLossSheetContext } from './ProfitLossProvider';
  */
 function ProfitLossActionsBar({
   // #withProfitLoss
-  profitLossSheetFilter,
+  profitLossDrawerFilter,
 
   // #withProfitLossActions
-  toggleProfitLossSheetFilter,
+  toggleProfitLossFilterDrawer: toggleFilterDrawer,
 
   // #ownProps
   numberFormat,
@@ -38,7 +38,7 @@ function ProfitLossActionsBar({
   const { sheetRefetch, isLoading } = useProfitLossSheetContext();
 
   const handleFilterClick = () => {
-    toggleProfitLossSheetFilter();
+    toggleFilterDrawer();
   };
 
   const handleRecalcReport = () => {
@@ -64,14 +64,14 @@ function ProfitLossActionsBar({
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
           text={
-            profitLossSheetFilter ? (
+            profitLossDrawerFilter ? (
               <T id={'hide_customizer'} />
             ) : (
               <T id={'customize_report'} />
             )
           }
           onClick={handleFilterClick}
-          active={profitLossSheetFilter}
+          active={profitLossDrawerFilter}
         />
         <NavbarDivider />
 
@@ -122,6 +122,6 @@ function ProfitLossActionsBar({
 }
 
 export default compose(
-  withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })),
+  withProfitLoss(({ profitLossDrawerFilter }) => ({ profitLossDrawerFilter })),
   withProfitLossActions,
 )(ProfitLossActionsBar);

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js

@@ -1,7 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import moment from 'moment';
 import { compose } from 'utils';
-import { useIntl } from 'react-intl';
 
 import ProfitLossSheetHeader from './ProfitLossSheetHeader';
 import ProfitLossSheetTable from './ProfitLossSheetTable';
@@ -20,13 +19,11 @@ import { ProfitLossSheetProvider } from './ProfitLossProvider';
  * Profit/Loss financial statement sheet.
  */
 function ProfitLossSheet({
-  // #withDashboardActions
-  changePageTitle,
-  setDashboardBackLink,
-  setSidebarShrink,
-
   // #withPreferences
   organizationName,
+
+  // #withProfitLossActions
+  toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer
 }) {
   const [filter, setFilter] = useState({
     basis: 'cash',
@@ -35,24 +32,7 @@ function ProfitLossSheet({
     displayColumnsType: 'total',
     accountsFilter: 'all-accounts',
   });
-  const { formatMessage } = useIntl();
-
-  // Change page title of the dashboard.
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'profit_loss_sheet' }));
-  }, [changePageTitle, formatMessage]);
-
-  useEffect(() => {
-    setSidebarShrink();
-    // Show the back link on dashboard topbar.
-    setDashboardBackLink(true);
-
-    return () => {
-      // Hide the back link on dashboard topbar.
-      setDashboardBackLink(false);
-    };
-  }, [setDashboardBackLink, setSidebarShrink]);
-
+ 
   // Handle submit filter.
   const handleSubmitFilter = (filter) => {
     const _filter = {
@@ -71,6 +51,11 @@ function ProfitLossSheet({
     });
   };
 
+  // Hide the filter drawer once the page unmount.
+  React.useEffect(() => () => {
+    toggleDisplayFilterDrawer(false);
+  }, [toggleDisplayFilterDrawer])
+
   return (
     <ProfitLossSheetProvider query={filter}>
       <ProfitLossActionsBar

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js

@@ -19,10 +19,10 @@ function ProfitLossHeader({
   onSubmitFilter,
 
   // #withProfitLoss
-  profitLossSheetFilter,
+  profitLossDrawerFilter,
 
   // #withProfitLossActions
-  toggleProfitLossSheetFilter,
+  toggleProfitLossFilterDrawer: toggleFilterDrawer,
 }) {
   const { formatMessage } = useIntl();
 
@@ -49,21 +49,21 @@ function ProfitLossHeader({
   // Handle form submit.
   const handleSubmit = (values, actions) => {
     onSubmitFilter(values);
-    toggleProfitLossSheetFilter();
+    toggleFilterDrawer(false);
   };
 
   // Handles the cancel button click.
   const handleCancelClick = () => {
-    toggleProfitLossSheetFilter();
+    toggleFilterDrawer(false);
   };
   // Handles the drawer close action.
   const handleDrawerClose = () => {
-    toggleProfitLossSheetFilter();
+    toggleFilterDrawer(false);
   };
 
   return (
     <FinancialStatementHeader
-      isOpen={profitLossSheetFilter}
+      isOpen={profitLossDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
       <Formik
@@ -95,8 +95,8 @@ function ProfitLossHeader({
 }
 
 export default compose(
-  withProfitLoss(({ profitLossSheetFilter }) => ({
-    profitLossSheetFilter,
+  withProfitLoss(({ profitLossDrawerFilter }) => ({
+    profitLossDrawerFilter,
   })),
   withProfitLossActions,
 )(ProfitLossHeader);

client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js

@@ -1,27 +1,12 @@
 import {connect} from 'react-redux';
 import {
-  getFinancialSheetFactory,
-  getFinancialSheetColumnsFactory,
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,
+  getProfitLossFilterDrawer,
 } from 'store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
-    const getProfitLossSheet = getFinancialSheetFactory('profitLoss');
-    const getProfitLossColumns = getFinancialSheetColumnsFactory('profitLoss');
-    const getProfitLossQuery = getFinancialSheetQueryFactory('profitLoss');
-    const getProfitLossTableRows = getFinancialSheetTableRowsFactory('profitLoss');
-
     const mapped = {
-      profitLossSheet: getProfitLossSheet(state, props),
-      profitLossColumns: getProfitLossColumns(state, props),
-      profitLossQuery: getProfitLossQuery(state, props),
-      profitLossTableRows: getProfitLossTableRows(state, props),
-
-      profitLossSheetLoading: state.financialStatements.profitLoss.loading,
-      profitLossSheetFilter: state.financialStatements.profitLoss.filter,
-      profitLossSheetRefresh: state.financialStatements.profitLoss.refresh,
+      profitLossDrawerFilter: getProfitLossFilterDrawer(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js

@@ -1,13 +1,9 @@
-import {connect} from 'react-redux';
-import {
-  fetchProfitLossSheet,
-  profitLossRefresh,
-} from 'store/financialStatement/financialStatements.actions';
+import { connect } from 'react-redux';
+import { toggleProfitLossFilterDrawer } from 'store/financialStatement/financialStatements.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
-  fetchProfitLossSheet: (query = {}) => dispatch(fetchProfitLossSheet({ query })),
-  toggleProfitLossSheetFilter: () => dispatch({ type: 'PROFIT_LOSS_FILTER_TOGGLE' }),
-  refreshProfitLossSheet: (refresh) => dispatch(profitLossRefresh(refresh)),
+  toggleProfitLossFilterDrawer: (toggle) =>
+    dispatch(toggleProfitLossFilterDrawer(toggle)),
 });
 
-export default connect(null, mapDispatchToProps);
+export default connect(null, mapDispatchToProps);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js

@@ -22,10 +22,10 @@ import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 
 function TrialBalanceActionsBar({
   // #withTrialBalance
-  trialBalanceSheetFilter,
+  trialBalanceDrawerFilter,
 
   // #withTrialBalanceActions
-  toggleTrialBalanceFilter,
+  toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 
   // #ownProps
   numberFormat,
@@ -35,7 +35,7 @@ function TrialBalanceActionsBar({
 
   // Handle filter toggle click.
   const handleFilterToggleClick = () => {
-    toggleTrialBalanceFilter();
+    toggleFilterDrawer();
   };
 
   // Handle re-calc button click.
@@ -63,13 +63,13 @@ function TrialBalanceActionsBar({
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
           text={
-            trialBalanceSheetFilter ? (
+            trialBalanceDrawerFilter ? (
               <T id={'hide_customizer'} />
             ) : (
               <T id={'customize_report'} />
             )
           }
-          active={trialBalanceSheetFilter}
+          active={trialBalanceDrawerFilter}
           onClick={handleFilterToggleClick}
         />
         <NavbarDivider />
@@ -121,9 +121,8 @@ function TrialBalanceActionsBar({
 }
 
 export default compose(
-  withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetLoading }) => ({
-    trialBalanceSheetFilter,
-    trialBalanceSheetLoading,
+  withTrialBalance(({ trialBalanceDrawerFilter }) => ({
+    trialBalanceDrawerFilter,
   })),
   withTrialBalanceActions,
 )(TrialBalanceActionsBar);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import moment from 'moment';
 
 import 'style/pages/FinancialStatements/TrialBalanceSheet.scss';
@@ -11,7 +11,6 @@ import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withSettings from 'containers/Settings/withSettings';
-import withTrialBalance from './withTrialBalance';
 
 import { compose } from 'utils';
 
@@ -21,6 +20,9 @@ import { compose } from 'utils';
 function TrialBalanceSheet({
   // #withPreferences
   organizationName,
+
+  // #withTrialBalanceSheetActions
+  toggleTrialBalanceFilterDrawer: toggleFilterDrawer
 }) {
   const [filter, setFilter] = useState({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -50,6 +52,11 @@ function TrialBalanceSheet({
     });
   };
 
+  // Hide the filter drawer once the page unmount.
+  useEffect(() => () => {
+    toggleFilterDrawer(false)
+  }, [toggleFilterDrawer]);
+
   return (
     <TrialBalanceSheetProvider query={filter}>
       <TrialBalanceActionsBar
@@ -73,9 +80,6 @@ function TrialBalanceSheet({
 
 export default compose(
   withTrialBalanceActions,
-  withTrialBalance(({ trialBalanceQuery }) => ({
-    trialBalanceQuery,
-  })),
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,
   })),

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js

@@ -13,16 +13,19 @@ import withTrialBalanceActions from './withTrialBalanceActions';
 
 import { compose } from 'utils';
 
+/**
+ * Trial balance sheet header.
+ */
 function TrialBalanceSheetHeader({
   // #ownProps
   pageFilter,
   onSubmitFilter,
 
   // #withTrialBalance
-  trialBalanceSheetFilter,
+  trialBalanceDrawerFilter,
 
   // #withTrialBalanceActions
-  toggleTrialBalanceFilter
+  toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 }) {
   const { formatMessage } = useIntl();
 
@@ -48,22 +51,22 @@ function TrialBalanceSheetHeader({
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     setSubmitting(false);
-    toggleTrialBalanceFilter(false);
+    toggleFilterDrawer(false);
   };
 
   // Handle drawer close action.
   const handleDrawerClose = () => {
-    toggleTrialBalanceFilter(false);
+    toggleFilterDrawer(false);
   };
 
   // Handle cancel button click.
   const handleCancelClick = () => {
-    toggleTrialBalanceFilter(false);
+    toggleFilterDrawer(false);
   };
 
   return (
     <FinancialStatementHeader
-      isOpen={trialBalanceSheetFilter}
+      isOpen={trialBalanceDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
       <Formik
@@ -81,11 +84,7 @@ function TrialBalanceSheetHeader({
           </Tabs>
 
           <div class="financial-header-drawer__footer">
-            <Button
-              className={'mr1'}
-              intent={Intent.PRIMARY}
-              type={'submit'}
-            >
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
             <Button onClick={handleCancelClick} minimal={true}>
@@ -99,9 +98,8 @@ function TrialBalanceSheetHeader({
 }
 
 export default compose(
-  withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetRefresh }) => ({
-    trialBalanceSheetFilter,
-    trialBalanceSheetRefresh,
+  withTrialBalance(({ trialBalanceDrawerFilter }) => ({
+    trialBalanceDrawerFilter,
   })),
   withTrialBalanceActions,
 )(TrialBalanceSheetHeader);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -1,12 +1,13 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
-import { CellTextSpan } from 'components/Datatable/Cells';
+
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 
-import { getColumnWidth } from 'utils';
+
+import { useTrialBalanceTableColumns } from './components';
 
 /**
  * Trial Balance sheet data table.
@@ -22,42 +23,8 @@ export default function TrialBalanceSheetTable({
     isLoading
   } = useTrialBalanceSheetContext();
 
-  const columns = useMemo(
-    () => [
-      {
-        Header: formatMessage({ id: 'account_name' }),
-        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
-        className: 'name',
-        width: 160,
-        textOverview: true,
-      },
-      {
-        Header: formatMessage({ id: 'credit' }),
-        Cell: CellTextSpan,
-        accessor: 'formatted_credit',
-        className: 'credit',
-        width: getColumnWidth(tableRows, `credit`, {
-          minWidth: 95,
-        }),
-      },
-      {
-        Header: formatMessage({ id: 'debit' }),
-        Cell: CellTextSpan,
-        accessor: 'formatted_debit',
-        width: getColumnWidth(tableRows, `debit`, { minWidth: 95 }),
-      },
-      {
-        Header: formatMessage({ id: 'balance' }),
-        Cell: CellTextSpan,
-        accessor: 'formatted_balance',
-        className: 'balance',
-        width: getColumnWidth(tableRows, `balance`, {
-          minWidth: 95,
-        }),
-      },
-    ],
-    [tableRows, formatMessage],
-  );
+  // Trial balance sheet table columns.
+  const columns = useTrialBalanceTableColumns();;
 
   const rowClassNames = (row) => {
     const { original } = row;

client/src/containers/FinancialStatements/TrialBalanceSheet/components.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { getColumnWidth } from 'utils';
+import { CellTextSpan } from 'components/Datatable/Cells';
+import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
+
+
+/**
+ * Retrieve trial balance sheet table columns.
+ */
+export const useTrialBalanceTableColumns = () => {
+  const { formatMessage } = useIntl();
+
+  // Trial balance sheet context.
+  const {
+    trialBalanceSheet: { tableRows },
+  } = useTrialBalanceSheetContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
+        className: 'name',
+        width: 160,
+        textOverview: true,
+      },
+      {
+        Header: formatMessage({ id: 'credit' }),
+        Cell: CellTextSpan,
+        accessor: 'formatted_credit',
+        className: 'credit',
+        width: getColumnWidth(tableRows, `credit`, {
+          minWidth: 95,
+        }),
+      },
+      {
+        Header: formatMessage({ id: 'debit' }),
+        Cell: CellTextSpan,
+        accessor: 'formatted_debit',
+        width: getColumnWidth(tableRows, `debit`, { minWidth: 95 }),
+      },
+      {
+        Header: formatMessage({ id: 'balance' }),
+        Cell: CellTextSpan,
+        accessor: 'formatted_balance',
+        className: 'balance',
+        width: getColumnWidth(tableRows, `balance`, {
+          minWidth: 95,
+        }),
+      },
+    ],
+    [tableRows, formatMessage],
+  );
+};

client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js

@@ -1,23 +1,10 @@
-import {connect} from 'react-redux';
-import {
-  getFinancialSheetFactory,
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,  
-} from 'store/financialStatement/financialStatements.selectors';
+import { connect } from 'react-redux';
+import { getTrialBalanceSheetFilterDrawer } from 'store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
-    const getTrialBalance = getFinancialSheetFactory('trialBalance');
-    const getBalanceSheetQuery = getFinancialSheetQueryFactory('trialBalance');
-    const getTrialBalanceRows = getFinancialSheetTableRowsFactory('trialBalance');
-
     const mapped = {
-      trialBalance: getTrialBalance(state, props),
-      trialBalanceQuery: getBalanceSheetQuery(state, props),
-      trialBalanceTableRows: getTrialBalanceRows(state, props),
-      trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
-      trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
-      trialBalanceSheetRefresh: state.financialStatements.trialBalance.refresh,
+      trialBalanceDrawerFilter: getTrialBalanceSheetFilterDrawer(state),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js

@@ -1,13 +1,9 @@
-import {connect} from 'react-redux';
-import {
-  fetchTrialBalanceSheet,
-  trialBalanceRefresh,
-} from 'store/financialStatement/financialStatements.actions';
+import { connect } from 'react-redux';
+import { toggleTrialBalanceSheetFilterDrawer } from 'store/financialStatement/financialStatements.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
-  fetchTrialBalanceSheet: (query = {}) => dispatch(fetchTrialBalanceSheet({ query })),
-  toggleTrialBalanceFilter: () => dispatch({ type: 'TRIAL_BALANCE_FILTER_TOGGLE' }),
-  refreshTrialBalance: (refresh) => dispatch(trialBalanceRefresh(refresh)),
+  toggleTrialBalanceFilterDrawer: (toggle) =>
+    dispatch(toggleTrialBalanceSheetFilterDrawer(toggle)),
 });
 
-export default connect(null, mapDispatchToProps);
+export default connect(null, mapDispatchToProps);

client/src/containers/Sales/Invoices/InvoiceForm/utils.js

@@ -1,8 +1,10 @@
 import moment from 'moment';
-import { transformToForm, repeatValue } from 'utils';
+import { compose, transformToForm, repeatValue } from 'utils';
+import { updateItemsEntriesTotal } from 'containers/Entries/utils';
 
 export const MIN_LINES_NUMBER = 4;
 
+// Default invoice entry object.
 export const defaultInvoiceEntry = {
   index: 0,
   item_id: '',
@@ -13,6 +15,7 @@ export const defaultInvoiceEntry = {
   total: 0,
 };
 
+// Default invoice object.
 export const defaultInvoice = {
   customer_id: '',
   invoice_date: moment(new Date()).format('YYYY-MM-DD'),
@@ -29,16 +32,18 @@ export const defaultInvoice = {
  * Transform invoice to initial values in edit mode.
  */
 export function transformToEditForm(invoice) {
+  const entries = compose(updateItemsEntriesTotal)([
+    ...invoice.entries.map((invoice) => ({
+      ...transformToForm(invoice, defaultInvoiceEntry),
+    })),
+    ...repeatValue(
+      defaultInvoiceEntry,
+      Math.max(MIN_LINES_NUMBER - invoice.entries.length, 0),
+    ),
+  ]);
+
   return {
     ...transformToForm(invoice, defaultInvoice),
-    entries: [
-      ...invoice.entries.map((invoice) => ({
-        ...transformToForm(invoice, defaultInvoiceEntry),
-      })),
-      ...repeatValue(
-        defaultInvoiceEntry,
-        Math.max(MIN_LINES_NUMBER - invoice.entries.length, 0),
-      ),
-    ],
+    entries,
   };
-}
+}