fix: toggle display filter drawer of financial statements.

client/src/components/DataTableCells/InputGroupCell.js

@@ -25,11 +25,7 @@ const InputEditableCell = ({
   return (
     <FormGroup
       intent={error ? Intent.DANGER : null}
-      className={classNames(
+      className={classNames(Classes.FILL)}
-        'form-group--select-list',
-        'form-group--account',
-        Classes.FILL,
-      )}
     >
       <InputGroup
         value={value}

client/src/components/DataTableCells/NumericInputCell.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { FormGroup, NumericInput, Intent } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+/**
+ * Numeric input table cell.
+ */
+export default function NumericInputCell({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  payload,
+}) {
+  const [value, setValue] = useState(initialValue);
+
+  const handleValueChange = (newValue) => {
+    setValue(newValue);
+  };
+  const onBlur = () => {
+    payload.updateData(index, id, value);
+  };
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(CLASSES.FILL)}
+    >
+      <NumericInput
+        value={value}
+        onValueChange={handleValueChange}
+        onBlur={onBlur}
+        fill={true}
+        buttonPosition={"none"}
+      />
+    </FormGroup>
+  );
+}

client/src/components/DataTableCells/index.js

@@ -5,6 +5,7 @@ import ContactsListFieldCell from './ContactsListFieldCell';
 import ItemsListCell from './ItemsListCell';
 import PercentFieldCell from './PercentFieldCell';
 import { DivFieldCell, EmptyDiv } from './DivFieldCell';
+import NumericInputCell from './NumericInputCell';
 
 export {
   AccountsListFieldCell,
@@ -15,4 +16,5 @@ export {
   PercentFieldCell,
   DivFieldCell,
   EmptyDiv,
+  NumericInputCell
 };

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/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(false);
   };
+
   // 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,20 @@ 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);
   };
 
   return (
-    <FinancialStatementHeader isOpen={receivableAgingFilter}>
+    <FinancialStatementHeader isOpen={isFilterDrawerOpen}>
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
@@ -87,7 +90,7 @@ function ARAgingSummaryHeader({
 
 export default compose(
   withARAgingSummaryActions,
-  withARAgingSummary(({ receivableAgingSummaryFilter }) => ({
+  withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
-    receivableAgingFilter: receivableAgingSummaryFilter,
+    isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
   })),
 )(ARAgingSummaryHeader);

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

@@ -1,34 +1,12 @@
 import { connect } from 'react-redux';
 import {
-  getFinancialSheetFactory,
+  getARAgingSummaryFilterDrawer,
-  getFinancialSheetAccountsFactory,
-  getFinancialSheetColumnsFactory,
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,
 } 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),
+      ARAgingSummaryFilterDrawer: getARAgingSummaryFilterDrawer(state, props),
-      receivableAgingSummaryColumns: getARAgingSheetColumns(state, props),
-      receivableAgingSummaryRows: getARAgingSheetRows(state, props),
-      receivableAgingSummaryLoading: loading,
-      receivableAgingSummaryFilter: filter,
-      ARAgingSummaryRefresh: refresh,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -1,18 +1,9 @@
 import { connect } from 'react-redux';
-import {
+import { toggleARAgingSummaryFilterDrawer } from 'store/financialStatement/financialStatements.actions';
-  fetchReceivableAgingSummary,
-  receivableAgingSummaryRefresh,
-} from 'store/financialStatement/financialStatements.actions';
 
 const mapActionsToProps = (dispatch) => ({
-  requestReceivableAgingSummary: (query) =>
+  toggleARAgingSummaryFilterDrawer: (toggle) => 
-    dispatch(fetchReceivableAgingSummary({ query })),
+    dispatch(toggleARAgingSummaryFilterDrawer(toggle)),
-  toggleFilterARAgingSummary: () =>
-    dispatch({
-      type: 'RECEIVABLE_AGING_SUMMARY_FILTER_TOGGLE',
-    }),
-  refreshARAgingSummary: (refresh) =>
-    dispatch(receivableAgingSummaryRefresh(refresh)),
 });
 
 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
+  // #withBalanceSheet
-  balanceSheetFilter,
+  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 }) => ({
+  withBalanceSheet(({ balanceSheetDrawerFilter }) => ({ balanceSheetDrawerFilter })),
-    balanceSheetFilter,
-    balanceSheetLoading,
-  })),
   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 }) => ({
+  withBalanceSheet(({ balanceSheetDrawerFilter }) => ({
-    balanceSheetFilter,
+    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,
+  toggleBalanceSheetFilterDrawer,
-  balanceSheetRefresh,
 } from 'store/financialStatement/financialStatements.actions';
 
 const mapDispatchToProps = (dispatch) => ({
-  fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
+  toggleBalanceSheetFilterDrawer: (toggle) =>
-  toggleBalanceSheetFilter: () =>
+    dispatch(toggleBalanceSheetFilterDrawer(toggle)),
-    dispatch({ type: 'BALANCE_SHEET_FILTER_TOGGLE' }),
-  refreshBalanceSheet: (refresh) => dispatch(balanceSheetRefresh(refresh)),
 });
 
 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 }) => ({
+  withGeneralLedger(({ generalLedgerFilterDrawer }) => ({
-    generalLedgerSheetFilter,
+    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);
+    saveInvoke(onSubmitFilter, values);
-    toggleGeneralLedgerSheetFilter();
+    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 }) => ({
+  withGeneralLedger(({ generalLedgerFilterDrawer }) => ({
-    generalLedgerSheetFilter,
+    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(
+  // General ledger table columns.
-    () => [
+  const columns = useGeneralLedgerTableColumns();
-      {
-        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],
-  );
 
   // 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,
+  getGeneralLedgerFilterDrawer
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,
 } 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),
+      generalLedgerFilterDrawer: getGeneralLedgerFilterDrawer(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,
     };
     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,
+  toggleGeneralLedgerFilterDrawer,
-  refreshGeneralLedgerSheet,
 } from 'store/financialStatement/financialStatements.actions';
 
 const mapDispatchToProps = (dispatch) => ({
-  fetchGeneralLedger: (query = {}) => dispatch(fetchGeneralLedger({ query })),
+  toggleGeneralLedgerFilterDrawer: (toggle) =>
-  toggleGeneralLedgerSheetFilter: () => dispatch({ type: 'GENERAL_LEDGER_FILTER_TOGGLE' }),
+    dispatch(toggleGeneralLedgerFilterDrawer(toggle)),
-  refreshGeneralLedgerSheet: (refresh) => dispatch(refreshGeneralLedgerSheet(refresh)),
 });
 
-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,
+  journalSheetDrawerFilter,
-  journalSheetRefresh,
 }) {
   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 }) => ({
+  withJournal(({ journalSheetDrawerFilter }) => ({
-    journalSheetFilter,
+    journalSheetDrawerFilter,
-    journalSheetRefresh,
   })),
   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(
+  // Retreive the journal table columns.
-    () => [
+  const columns = useJournalTableColumns();
-      {
-        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],
-  );
 
   // 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,
+  getJournalFilterDrawer,
-  getFinancialSheetTableRowsFactory,
-  getFinancialSheetQueryFactory,
 } 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),
+      journalSheetDrawerFilter: getJournalFilterDrawer(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,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -1,13 +1,9 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
-import {
+import { toggleJournalSheeetFilterDrawer } from 'store/financialStatement/financialStatements.actions';
-  fetchJournalSheet,
-  refreshJournalSheet,
-} from 'store/financialStatement/financialStatements.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
-  requestFetchJournalSheet: (query) => dispatch(fetchJournalSheet({ query })),
+  toggleJournalSheetFilter: (toggle) =>
-  toggleJournalSheetFilter: () => dispatch({ type: 'JOURNAL_FILTER_TOGGLE' }),
+    dispatch(toggleJournalSheeetFilterDrawer(toggle)),
-  refreshJournalSheet: (refresh) => dispatch(refreshJournalSheet(refresh)),
 });
 
-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 }) => ({
+  withProfitLoss(({ profitLossDrawerFilter }) => ({
-    profitLossSheetFilter,
+    profitLossDrawerFilter,
   })),
   withProfitLossActions,
 )(ProfitLossHeader);

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

@@ -1,27 +1,12 @@
 import {connect} from 'react-redux';
 import {
-  getFinancialSheetFactory,
+  getProfitLossFilterDrawer,
-  getFinancialSheetColumnsFactory,
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,
 } 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),
+      profitLossDrawerFilter: getProfitLossFilterDrawer(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,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -1,13 +1,9 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
-import {
+import { toggleProfitLossFilterDrawer } from 'store/financialStatement/financialStatements.actions';
-  fetchProfitLossSheet,
-  profitLossRefresh,
-} from 'store/financialStatement/financialStatements.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
-  fetchProfitLossSheet: (query = {}) => dispatch(fetchProfitLossSheet({ query })),
+  toggleProfitLossFilterDrawer: (toggle) =>
-  toggleProfitLossSheetFilter: () => dispatch({ type: 'PROFIT_LOSS_FILTER_TOGGLE' }),
+    dispatch(toggleProfitLossFilterDrawer(toggle)),
-  refreshProfitLossSheet: (refresh) => dispatch(profitLossRefresh(refresh)),
 });
 
-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 }) => ({
+  withTrialBalance(({ trialBalanceDrawerFilter }) => ({
-    trialBalanceSheetFilter,
+    trialBalanceDrawerFilter,
-    trialBalanceSheetLoading,
   })),
   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
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
-              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 }) => ({
+  withTrialBalance(({ trialBalanceDrawerFilter }) => ({
-    trialBalanceSheetFilter,
+    trialBalanceDrawerFilter,
-    trialBalanceSheetRefresh,
   })),
   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(
+  // Trial balance sheet table columns.
-    () => [
+  const columns = useTrialBalanceTableColumns();;
-      {
-        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],
-  );
 
   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 { connect } from 'react-redux';
-import {
+import { getTrialBalanceSheetFilterDrawer } from 'store/financialStatement/financialStatements.selectors';
-  getFinancialSheetFactory,
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,  
-} 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),
+      trialBalanceDrawerFilter: getTrialBalanceSheetFilterDrawer(state),
-      trialBalanceQuery: getBalanceSheetQuery(state, props),
-      trialBalanceTableRows: getTrialBalanceRows(state, props),
-      trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
-      trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
-      trialBalanceSheetRefresh: state.financialStatements.trialBalance.refresh,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -1,13 +1,9 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
-import {
+import { toggleTrialBalanceSheetFilterDrawer } from 'store/financialStatement/financialStatements.actions';
-  fetchTrialBalanceSheet,
-  trialBalanceRefresh,
-} from 'store/financialStatement/financialStatements.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
-  fetchTrialBalanceSheet: (query = {}) => dispatch(fetchTrialBalanceSheet({ query })),
+  toggleTrialBalanceFilterDrawer: (toggle) =>
-  toggleTrialBalanceFilter: () => dispatch({ type: 'TRIAL_BALANCE_FILTER_TOGGLE' }),
+    dispatch(toggleTrialBalanceSheetFilterDrawer(toggle)),
-  refreshTrialBalance: (refresh) => dispatch(trialBalanceRefresh(refresh)),
 });
 
-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: [
+    entries,
-      ...invoice.entries.map((invoice) => ({
-        ...transformToForm(invoice, defaultInvoiceEntry),
-      })),
-      ...repeatValue(
-        defaultInvoiceEntry,
-        Math.max(MIN_LINES_NUMBER - invoice.entries.length, 0),
-      ),
-    ],
   };
-}
+}

client/src/routes/dashboard.js

@@ -136,6 +136,7 @@ export default [
     hotkey: 'shift+5',
     pageTitle: formatMessage({ id: 'trial_balance_sheet' }),
     backLink: true,
+    sidebarShrink: true
   },
   {
     path: `/financial-reports/profit-loss-sheet`,
@@ -144,6 +145,9 @@ export default [
     ),
     breadcrumb: 'Profit Loss Sheet',
     hotkey: 'shift+2',
+    pageTitle: formatMessage({ id: 'profit_loss_sheet' }),
+    backLink: true,
+    sidebarShrink: true,
   },
   {
     path: '/financial-reports/receivable-aging-summary',
@@ -169,6 +173,9 @@ export default [
     ),
     breadcrumb: 'Journal Sheet',
     hotkey: 'shift+3',
+    pageTitle: formatMessage({ id: 'journal_sheet' }),
+    sidebarShrink: true,
+    backLink: true,
   },
   {
     path: '/financial-reports',

client/src/store/financialStatement/financialStatements.actions.js

@@ -1,266 +1,79 @@
-import ApiService from 'services/ApiService';
 import t from 'store/types';
 
-export const balanceSheetRefresh = (refresh) => {
+/**
-  return (dispatch) =>
+ * Toggles display of the balance sheet filter drawer.
-    dispatch({
+ * @param {boolean} toggle 
-      type: 'BALANCE_SHEET_REFRESH',
+ */
-      payload: { refresh },
+export function toggleBalanceSheetFilterDrawer(toggle) {
-    });
+  return {
-};
+    type: `${t.BALANCE_SHEET}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
+    payload: {
+      toggle
+    },
+  };
+}
 
-export const fetchGeneralLedger = ({ query }) => {
+/**
-  return (dispatch) =>
+ * Toggles display of the trial balance sheet filter drawer.
-    new Promise((resolve, reject) => {
+ * @param {boolean} toggle 
-      dispatch({
+ */
-        type: t.GENERAL_LEDGER_SHEET_LOADING,
+export function toggleTrialBalanceSheetFilterDrawer(toggle) {
-        loading: true,
+  return {
-      });
+    type: `${t.TRIAL_BALANCE_SHEET}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
-      ApiService.get('/financial_statements/general_ledger', { params: query })
+    payload: {
-        .then((response) => {
+      toggle,
-          dispatch({
+    },
-            type: t.GENERAL_LEDGER_STATEMENT_SET,
+  };
-            data: response.data,
+}
-          });
-          dispatch({
-            type: t.GENERAL_LEDGER_SHEET_LOADING,
-            loading: false,
-          });
-          resolve(response);
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-};
 
-export const refreshGeneralLedgerSheet = (refresh) => {
+/**
-  return (dispatch) =>
+ * Toggles display of the journal sheet filter drawer.
-    dispatch({
+ * @param {boolean} toggle 
-      type: t.GENERAL_LEDGER_REFRESH,
+ */
-      payload: { refresh },
+export function toggleJournalSheeetFilterDrawer(toggle) {
-    });
+  return {
-};
+    type: `${t.JOURNAL}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
+    payload: {
+      toggle
+    },
+  };
+}
 
-export const fetchBalanceSheet = ({ query }) => {
+/**
-  return (dispatch) =>
+ * Toggles display of the profit/loss filter drawer.
-    new Promise((resolve, reject) => {
+ * @param {boolean} toggle 
-      dispatch({
+ */
-        type: t.BALANCE_SHEET_LOADING,
+export function toggleProfitLossFilterDrawer(toggle) {
-        loading: true,
+  return {
-      });
+    type: `${t.PROFIT_LOSS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
-      ApiService.get('/financial_statements/balance_sheet', { params: query })
+    payload: {
-        .then((response) => {
+      toggle
-          dispatch({
+    },
-            type: t.BALANCE_SHEET_STATEMENT_SET,
+  };
-            data: response.data,
+}
-            query: query,
-          });
-          dispatch({
-            type: t.BALANCE_SHEET_LOADING,
-            loading: false,
-          });
-          dispatch({
-            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
-          });
-          resolve(response);
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-};
 
-export const fetchTrialBalanceSheet = ({ query }) => {
+/**
-  return (dispatch) =>
+ * Toggles display of the general ledger filter drawer.
-    new Promise((resolve, reject) => {
+ * @param {boolean} toggle 
-      dispatch({
+ */
-        type: t.TRIAL_BALANCE_SHEET_LOADING,
+export function toggleGeneralLedgerFilterDrawer(toggle) {
-        loading: true,
+  return {
-      });
+    type: `${t.GENERAL_LEDGER}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
-      ApiService.get('/financial_statements/trial_balance_sheet', {
+    payload: {
-        params: query,
+      toggle
-      })
+    },
-        .then((response) => {
+  };
-          dispatch({
+}
-            type: t.TRAIL_BALANCE_STATEMENT_SET,
-            data: response.data,
-          });
-          dispatch({
-            type: t.TRIAL_BALANCE_SHEET_LOADING,
-            loading: false,
-          });
-          resolve(response.data);
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-};
 
-export const trialBalanceRefresh = (refresh) => {
+/**
-  return (dispatch) =>
+ * Toggles display of the AR aging summary filter drawer.
-    dispatch({
+ * @param {boolean} toggle -
-      type: t.TRIAL_BALANCE_REFRESH,
+ */
-      payload: { refresh },
+export function toggleARAgingSummaryFilterDrawer(toggle) {
-    });
+  return {
-};
+    type: `${t.AR_AGING_SUMMARY}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`,
-
+    payload: {
-export const fetchProfitLossSheet = ({ query }) => {
+      toggle,
-  return (dispatch) =>
+    }
-    new Promise((resolve, reject) => {
+  };
-      dispatch({
+}
-        type: t.PROFIT_LOSS_SHEET_LOADING,
-        loading: true,
-      });
-      ApiService.get('/financial_statements/profit_loss_sheet', {
-        params: query,
-      })
-        .then((response) => {
-          dispatch({
-            type: t.PROFIT_LOSS_SHEET_SET,
-            profitLoss: response.data.data,
-            columns: response.data.columns,
-            query: response.data.query,
-          });
-          dispatch({
-            type: t.PROFIT_LOSS_SHEET_LOADING,
-            loading: false,
-          });
-          resolve(response.data);
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-};
-
-export const profitLossRefresh = (refresh) => {
-  return (dispatch) =>
-    dispatch({
-      type: t.PROFIT_LOSS_REFRESH,
-      payload: { refresh },
-    });
-};
-
-export const fetchJournalSheet = ({ query }) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      dispatch({
-        type: t.JOURNAL_SHEET_LOADING,
-        loading: true,
-      });
-      ApiService.get('/financial_statements/journal', { params: query })
-        .then((response) => {
-          dispatch({
-            type: t.JOURNAL_SHEET_SET,
-            data: response.data,
-            query: response.data.query,
-          });
-          dispatch({
-            type: t.JOURNAL_SHEET_LOADING,
-            loading: false,
-          });
-          resolve(response.data);
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-};
-
-export const refreshJournalSheet = (refresh) => {
-  return (dispatch) =>
-    dispatch({
-      type: t.JOURNAL_SHEET_REFRESH,
-      payload: { refresh },
-    });
-};
-
-export const fetchReceivableAgingSummary = ({ query }) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      dispatch({
-        type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
-        payload: {
-          loading: true,
-        },
-      });
-      ApiService.get('/financial_statements/receivable_aging_summary', {
-        params: query,
-      })
-        .then((response) => {
-          dispatch({
-            type: t.RECEIVABLE_AGING_SUMMARY_SET,
-            payload: {
-              customers: response.data.data.customers,
-              total: response.data.data.total,
-              columns: response.data.columns,
-              query,
-            },
-          });
-          dispatch({
-            type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
-            payload: {
-              loading: false,
-            },
-          });
-          resolve(response);
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-};
-
-export const receivableAgingSummaryRefresh = (refresh) => {
-  return (dispatch) =>
-    dispatch({
-      type: t.RECEIVABLE_AGING_SUMMARY_REFRESH,
-      payload: { refresh },
-    });
-};
-
-export const fetchPayableAginSummary = ({ query }) => {
-  return (dispatch) =>
-    new Promise((resolve, reject) => {
-      dispatch({
-        type: t.PAYABLE_AGING_SUMMARY_LOADING,
-        payload: {
-          loading: true,
-        },
-      });
-      ApiService.get('/financial_statements/payable_aging_summary', {
-        params: query,
-      })
-        .then((response) => {
-          dispatch({
-            type: t.PAYABLE_AGING_SUMMARY_SET,
-            payload: {
-              vendors: response.data.data.vendors,
-              total: response.data.data.total,
-              columns: response.data.columns,
-              query,
-            },
-          });
-          dispatch({
-            type: t.PAYABLE_AGING_SUMMARY_LOADING,
-            payload: {
-              loading: false,
-            },
-          });
-          resolve(response);
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-};
-
-export const payableAgingSummaryRefresh = (refresh) => {
-  return (dispatch) =>
-    dispatch({
-      type: t.PAYABLE_AGING_SUMMARY_REFRESH,
-      payload: { refresh },
-    });
-};

client/src/store/financialStatement/financialStatements.reducer.js

@@ -1,216 +1,51 @@
 import { createReducer } from '@reduxjs/toolkit';
 import t from 'store/types';
-import {
-  mapBalanceSheetToTableRows,
-  journalToTableRowsMapper,
-  generalLedgerToTableRows,
-  profitLossToTableRowsMapper,
-  ARAgingSummaryTableRowsMapper,
-  APAgingSummaryTableRowsMapper,
-  mapTrialBalanceSheetToRows,
-} from './financialStatements.mappers';
 
+// Initial state.
 const initialState = {
   balanceSheet: {
-    sheet: {},
+    displayFilterDrawer: false,
-    loading: true,
-    filter: true,
-    refresh: false,
   },
   trialBalance: {
-    sheet: {},
+    displayFilterDrawer: false,
-    loading: true,
-    filter: true,
-    refresh: false,
   },
   generalLedger: {
-    sheet: {},
+    displayFilterDrawer: false,
-    loading: false,
-    filter: true,
-    refresh: false,
   },
   journal: {
-    sheet: {},
+    displayFilterDrawer: false,
-    loading: false,
-    tableRows: [],
-    filter: true,
-    refresh: true,
   },
   profitLoss: {
-    sheet: {},
+    displayFilterDrawer: false,
-    loading: true,
-    tableRows: [],
-    filter: true,
   },
-  receivableAgingSummary: {
+  ARAgingSummary: {
-    sheet: {},
+    displayFilterDrawer: false,
-    loading: false,
-    tableRows: [],
-    filter: true,
-    refresh: false,
   },
-  payableAgingSummary: {
+  APAgingSummary: {
-    sheet: {},
+    displayFilterDrawer: false,
-    loading: false,
-    tableRows: [],
-    filter: true,
-    refresh: false,
   },
 };
 
+/**
+ * Financial statement filter toggle.
+ */
 const financialStatementFilterToggle = (financialName, statePath) => {
   return {
-    [`${financialName}_FILTER_TOGGLE`]: (state, action) => {
+    [`${financialName}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`]: (state, action) => {
-      state[statePath].filter = !state[statePath].filter;
+      state[statePath].displayFilterDrawer =
+        typeof action?.payload?.toggle !== 'undefined'
+          ? action.payload.toggle
+          : !state[statePath].displayFilterDrawer;
     },
   };
 };
 
 export default createReducer(initialState, {
-  [t.BALANCE_SHEET_STATEMENT_SET]: (state, action) => {
+  ...financialStatementFilterToggle(t.BALANCE_SHEET, 'balanceSheet'),
-    const balanceSheet = {
+  ...financialStatementFilterToggle(t.TRIAL_BALANCE_SHEET, 'trialBalance'),
-      sheet: action.data.data,
+  ...financialStatementFilterToggle(t.JOURNAL, 'journal'),
-      columns: action.data.columns,
+  ...financialStatementFilterToggle(t.GENERAL_LEDGER, 'generalLedger'),
-      query: action.data.query,
+  ...financialStatementFilterToggle(t.PROFIT_LOSS, 'profitLoss'),
-      tableRows: mapBalanceSheetToTableRows(action.data.data),
+  ...financialStatementFilterToggle(t.AR_AGING_SUMMARY, 'ARAgingSummary'),
-    };
+  ...financialStatementFilterToggle(t.AP_AGING_SUMMARY, 'APAgingSummary'),
-    state.balanceSheet.sheet = balanceSheet;
-  },
-
-  [t.BALANCE_SHEET_LOADING]: (state, action) => {
-    state.balanceSheet.loading = !!action.loading;
-  },
-
-  [t.BALANCE_SHEET_REFRESH]: (state, action) => {
-    const { refresh } = action.payload;
-    state.balanceSheet.refresh = refresh;
-  },
-
-  ...financialStatementFilterToggle('BALANCE_SHEET', 'balanceSheet'),
-
-  [t.TRAIL_BALANCE_STATEMENT_SET]: (state, action) => {
-    const trailBalanceSheet = {
-      sheet: action.data.data,
-      tableRows: mapTrialBalanceSheetToRows(action.data.data),
-      query: action.data.query,
-    };
-    state.trialBalance.sheet = trailBalanceSheet;
-  },
-
-  [t.TRIAL_BALANCE_SHEET_LOADING]: (state, action) => {
-    state.trialBalance.loading = !!action.loading;
-  },
-
-  [t.TRIAL_BALANCE_REFRESH]: (state, action) => {
-    const { refresh } = action.payload;
-    state.trialBalance.refresh = refresh;
-  },
-
-  ...financialStatementFilterToggle('TRIAL_BALANCE', 'trialBalance'),
-
-  [t.JOURNAL_SHEET_SET]: (state, action) => {
-    const journal = {
-      query: action.data.query,
-      data: action.data.data,
-      tableRows: journalToTableRowsMapper(action.data.data),
-    };
-    state.journal.sheet = journal;
-  },
-
-  [t.JOURNAL_SHEET_LOADING]: (state, action) => {
-    state.journal.loading = !!action.loading;
-  },
-  [t.JOURNAL_SHEET_REFRESH]: (state, action) => {
-    const { refresh } = action.payload;
-    state.journal.refresh = !!refresh;
-  },
-  ...financialStatementFilterToggle('JOURNAL', 'journal'),
-
-  [t.GENERAL_LEDGER_STATEMENT_SET]: (state, action) => {
-    const generalLedger = {
-      query: action.data.query,
-      accounts: action.data.data,
-      tableRows: generalLedgerToTableRows(action.data.data),
-    };
-    state.generalLedger.sheet = generalLedger;
-  },
-
-  [t.GENERAL_LEDGER_SHEET_LOADING]: (state, action) => {
-    state.generalLedger.loading = !!action.loading;
-  },
-  [t.GENERAL_LEDGER_REFRESH]: (state, action) => {
-    const { refresh } = action.payload;
-    state.generalLedger.refresh = !!refresh;
-  },
-  ...financialStatementFilterToggle('GENERAL_LEDGER', 'generalLedger'),
-
-  [t.PROFIT_LOSS_SHEET_SET]: (state, action) => {
-    const profitLossSheet = {
-      query: action.query,
-      profitLoss: action.profitLoss,
-      columns: action.columns,
-      tableRows: profitLossToTableRowsMapper(action.profitLoss),
-    };
-    state.profitLoss.sheet = profitLossSheet;
-  },
-
-  [t.PROFIT_LOSS_SHEET_LOADING]: (state, action) => {
-    state.profitLoss.loading = !!action.loading;
-  },
-
-  [t.PROFIT_LOSS_REFRESH]: (state, action) => {
-    const { refresh } = action.payload;
-    state.profitLoss.refresh = !!refresh;
-  },
-  ...financialStatementFilterToggle('PROFIT_LOSS', 'profitLoss'),
-
-  [t.RECEIVABLE_AGING_SUMMARY_SET]: (state, action) => {
-    const { customers, total, columns, query } = action.payload;
-
-    const receivableSheet = {
-      query,
-      columns,
-      customers,
-      total,
-      tableRows: ARAgingSummaryTableRowsMapper({ customers, columns, total }),
-    };
-    state.receivableAgingSummary.sheet = receivableSheet;
-  },
-  [t.RECEIVABLE_AGING_SUMMARY_REFRESH]: (state, action) => {
-    const { refresh } = action.payload;
-    state.receivableAgingSummary.refresh = !!refresh;
-  },
-  [t.RECEIVABLE_AGING_SUMMARY_LOADING]: (state, action) => {
-    const { loading } = action.payload;
-    state.receivableAgingSummary.loading = loading;
-  },
-  ...financialStatementFilterToggle(
-    'RECEIVABLE_AGING_SUMMARY',
-    'receivableAgingSummary',
-  ),
-
-  [t.PAYABLE_AGING_SUMMARY_SET]: (state, action) => {
-    const { vendors, total, columns, query } = action.payload;
-
-    const receivableSheet = {
-      query,
-      columns,
-      vendors,
-      total,
-      // tableRows: APAgingSummaryTableRowsMapper({ vendors, columns, total }),
-    };
-    state.payableAgingSummary.sheet = receivableSheet;
-  },
-  [t.PAYABLE_AGING_SUMMARY_REFRESH]: (state, action) => {
-    const { refresh } = action.payload;
-    state.payableAgingSummary.refresh = !!refresh;
-  },
-  [t.PAYABLE_AGING_SUMMARY_LOADING]: (state, action) => {
-    const { loading } = action.payload;
-    state.payableAgingSummary.loading = loading;
-  },
-  ...financialStatementFilterToggle(
-    'PAYABLE_AGING_SUMMARY',
-    'payableAgingSummary',
-  ),
 });

client/src/store/financialStatement/financialStatements.selectors.js

@@ -1,71 +1,103 @@
 import { createSelector } from 'reselect';
-import { camelCase } from 'lodash';
-
-const transformSheetType = (sheetType) => {
-  return camelCase(sheetType);
-};
 
 // Financial Statements selectors.
 export const sheetByTypeSelector = (sheetType) => (state, props) => {
-  const sheetName = transformSheetType(sheetType);
+  return state.financialStatements[sheetType];
-  return state.financialStatements[sheetName].sheet;
+};
+
+export const filterDrawerByTypeSelector = (sheetType) => (state) => {
+  return sheetByTypeSelector(sheetType)(state)?.displayFilterDrawer;
+};
+
+export const balanceSheetFilterDrawerSelector = (state) => {
+  return filterDrawerByTypeSelector('balanceSheet')(state);
+};
+
+export const profitLossSheetFilterDrawerSelector = (state) => {
+  return filterDrawerByTypeSelector('profitLoss')(state);
+};
+
+export const generalLedgerFilterDrawerSelector = (state) => {
+  return filterDrawerByTypeSelector('generalLedger')(state);
+};
+
+// Trial balance filter drawer selector.
+export const trialBalanceFilterDrawerSelector = (state) => {
+  return filterDrawerByTypeSelector('trialBalance')(state);
+};
+
+export const journalFilterDrawerSelector = (state) => {
+  return filterDrawerByTypeSelector('journal')(state);
+};
+
+export const ARAgingSummaryFilterDrawerSelector = (state) => {
+  return filterDrawerByTypeSelector('ARAgingSummary')(state);
 };
 
 /**
- * Retrieve financial statement sheet by the given sheet index.
+ * Retrieve balance sheet filter drawer.
- * @param {array} sheets 
- * @param {number} index 
  */
-export const getFinancialSheetFactory = (sheetType) => 
+export const getBalanceSheetFilterDrawer = createSelector(
-  createSelector(
+  balanceSheetFilterDrawerSelector,
-    sheetByTypeSelector(sheetType),
+  (isOpen) => {
-    (sheet) => {
+    return isOpen;
-      return sheet;
+  },
-    },
+);
-  );
 
 /**
- * Retrieve financial statement columns by the given sheet index.
+ * Retrieve whether trial balance sheet display filter drawer.
- * @param {array} sheets 
- * @param {number} index 
  */
-export const getFinancialSheetColumnsFactory = (sheetType) => 
+export const getTrialBalanceSheetFilterDrawer = createSelector(
-  createSelector(
+  trialBalanceFilterDrawerSelector,
-    sheetByTypeSelector(sheetType),
+  (isOpen) => {
-    (sheet) => {
+    return isOpen;
-      return (sheet && sheet.columns) ? sheet.columns : [];    
+  },
-    },
+);
-  );
+
+/**
+ * Retrieve profit/loss filter drawer.
+ */
+export const getProfitLossFilterDrawer = createSelector(
+  profitLossSheetFilterDrawerSelector,
+  (isOpen) => {
+    return isOpen;
+  },
+);
+
+/**
+ * Retrieve whether display general ledger (GL) filter drawer.
+ */
+export const getGeneralLedgerFilterDrawer = createSelector(
+  generalLedgerFilterDrawerSelector,
+  (isOpen) => {
+    return isOpen;
+  },
+);
+
+/**
+ * Retrieve whether display journal sheet filter drawer.
+ */
+export const getJournalFilterDrawer = createSelector(
+  journalFilterDrawerSelector,
+  (isOpen) => {
+    return isOpen;
+  },
+);
+
+/**
+ * Retrieve whether display AR aging summary drawer filter.
+ */
+export const getARAgingSummaryFilterDrawer = createSelector(
+  ARAgingSummaryFilterDrawerSelector,
+  (isOpen) => {
+    return isOpen;
+  },
+);
 
 /**
  * Retrieve financial statement query by the given sheet index.
  */
 export const getFinancialSheetQueryFactory = (sheetType) =>
-  createSelector(
+  createSelector(sheetByTypeSelector(sheetType), (sheet) => {
-    sheetByTypeSelector(sheetType),
+    return sheet && sheet.query ? sheet.query : {};
-    (sheet) => {
+  });
-      return (sheet && sheet.query) ? sheet.query : {};
-    },
-  );
-
-/**
- * Retrieve financial statement accounts by the given sheet index.
- */
-export const getFinancialSheetAccountsFactory = (sheetType) => 
-  createSelector(
-    sheetByTypeSelector(sheetType),
-    (sheet) => {
-      return (sheet && sheet.accounts) ? sheet.accounts : []; 
-    }
-  );
-
-/**
- * Retrieve financial statement table rows by the given sheet index.
- */
-export const getFinancialSheetTableRowsFactory = (sheetType) => 
-  createSelector(
-    sheetByTypeSelector(sheetType),
-    (sheet) => {
-      return (sheet && sheet.tableRows) ? sheet.tableRows : []; 
-    }
-  );

client/src/store/financialStatement/financialStatements.types.js

@@ -1,30 +1,10 @@
 export default {
-  GENERAL_LEDGER_STATEMENT_SET: 'GENERAL_LEDGER_STATEMENT_SET',
+  BALANCE_SHEET: 'BALANCE_SHEET',
-  GENERAL_LEDGER_SHEET_LOADING: 'GENERAL_LEDGER_SHEET_LOADING',
+  TRIAL_BALANCE_SHEET: 'TRIAL_BALANCE_SHEET',
-  GENERAL_LEDGER_REFRESH: 'GENERAL_LEDGER_REFRESH',
+  JOURNAL: 'JOURNAL',
-
+  GENERAL_LEDGER: 'GENERAL_LEDGER',
-  BALANCE_SHEET_STATEMENT_SET: 'BALANCE_SHEET_STATEMENT_SET',
+  PROFIT_LOSS: 'PROFIT_LOSS',
-  BALANCE_SHEET_LOADING: 'BALANCE_SHEET_LOADING',
+  AR_AGING_SUMMARY: 'AR_AGING_SUMMARY',
-  BALANCE_SHEET_REFRESH: 'BALANCE_SHEET_REFRESH',
+  AP_AGING_SUMMARY: 'AP_AGING_SUMMARY',
-
+  DISPLAY_FILTER_DRAWER_TOGGLE: 'DISPLAY_FILTER_DRAWER_TOGGLE'
-  TRAIL_BALANCE_STATEMENT_SET: 'TRAIL_BALANCE_STATEMENT_SET',
-  TRIAL_BALANCE_SHEET_LOADING: 'TRIAL_BALANCE_SHEET_LOADING',
-  TRIAL_BALANCE_REFRESH: 'TRIAL_BALANCE_REFRESH',
-
-  JOURNAL_SHEET_SET: 'JOURNAL_SHEET_SET',
-  JOURNAL_SHEET_LOADING: 'JOURNAL_SHEET_LOADING',
-  JOURNAL_SHEET_REFRESH: 'JOURNAL_SHEET_REFRESH',
-
-  PROFIT_LOSS_SHEET_SET: 'PROFIT_LOSS_SHEET_SET',
-  PROFIT_LOSS_SHEET_LOADING: 'PROFIT_LOSS_SHEET_LOADING',
-  PROFIT_LOSS_REFRESH: 'PROFIT_LOSS_REFRESH',
-
-  RECEIVABLE_AGING_SUMMARY_LOADING: 'RECEIVABLE_AGING_SUMMARY_LOADING',
-  RECEIVABLE_AGING_SUMMARY_SET: 'RECEIVABLE_AGING_SUMMARY_SET',
-  RECEIVABLE_AGING_REFRECH: 'RECEIVABLE_AGING_REFRECH',
-  RECEIVABLE_AGING_SUMMARY_REFRESH: 'RECEIVABLE_AGING_SUMMARY_REFRESH',
-
-  PAYABLE_AGING_SUMMARY_LOADING: 'PAYABLE_AGING_SUMMARY_LOADING',
-  PAYABLE_AGING_SUMMARY_SET: 'PAYABLE_AGING_SUMMARY_SET',
-  PAYABLE_AGING_SUMMARY_REFRESH: 'PAYABLE_AGING_SUMMARY_REFRESH',
 };