fix: AR aging summary report.

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

@@ -1,25 +1,19 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { useIntl } from 'react-intl';
-import { queryCache, useQuery } from 'react-query';
+import React, { useState, useCallback } from 'react';
 import moment from 'moment';
 
+import 'style/pages/FinancialStatements/ARAgingSummary.scss';
+
 import { FinancialStatement } from 'components';
 
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import ARAgingSummaryHeader from './ARAgingSummaryHeader';
-import ReceivableAgingSummaryTable from './ARAgingSummaryTable';
+import ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar';
+import ARAgingSummaryTable from './ARAgingSummaryTable';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import { ARAgingSummaryProvider } from './ARAgingSummaryProvider';
 
 import withSettings from 'containers/Settings/withSettings';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withARAgingSummaryActions from './withARAgingSummaryActions';
-import withARAgingSummary from './withARAgingSummary';
 
 import { compose } from 'utils';
-import { transfromFilterFormToQuery } from './common';
-
-import 'style/pages/FinancialStatements/ARAgingSummary.scss';
 
 /**
  * AR aging summary report.
@@ -27,115 +21,55 @@ import 'style/pages/FinancialStatements/ARAgingSummary.scss';
 function ReceivableAgingSummarySheet({
   // #withSettings
   organizationName,
-
-  // #withDashboardActions
-  changePageTitle,
-  setDashboardBackLink,
-  setSidebarShrink,
-
-  // #withARAgingSummaryActions
-  requestReceivableAgingSummary,
-  refreshARAgingSummary,
-  toggleFilterARAgingSummary,
-
-  // #withARAgingSummary
-  ARAgingSummaryRefresh,
 }) {
-  const { formatMessage } = useIntl();
-  const [query, setQuery] = useState({
+  const [filter, setFilter] = useState({
     asDate: moment().endOf('day').format('YYYY-MM-DD'),
-    agingBeforeDays: 30,
+    agingDaysBefore: 30,
     agingPeriods: 3,
   });
 
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'receivable_aging_summary' }));
-  }, [changePageTitle, formatMessage]);
-
-  useEffect(() => {
-    if (ARAgingSummaryRefresh) {
-      queryCache.invalidateQueries('receivable-aging-summary');
-      refreshARAgingSummary(false);
-    }
-  }, [ARAgingSummaryRefresh, refreshARAgingSummary]);
-
-  useEffect(() => {
-    setSidebarShrink()
-    // Show the back link on dashboard topbar.
-    setDashboardBackLink(true);
-
-    return () => {
-      // Hide the back link on dashboard topbar.
-      setDashboardBackLink(false);
-    };
-  }, [setDashboardBackLink,setSidebarShrink]);
-
-  // Handle fetching receivable aging summary report.
-  const fetchARAgingSummarySheet = useQuery(
-    ['receivable-aging-summary', query],
-    (key, q) =>
-      requestReceivableAgingSummary({
-        ...transfromFilterFormToQuery(q),
-      }),
-    { manual: true },
-  );
-
-  // Handle fetch the data of receivable aging summary sheet.
-  const handleFetchData = useCallback((...args) => {}, []);
-
+  // Handle filter submit.
   const handleFilterSubmit = useCallback(
     (filter) => {
       const _filter = {
         ...filter,
         asDate: moment(filter.asDate).format('YYYY-MM-DD'),
       };
-      setQuery(_filter);
-      refreshARAgingSummary(true);
-      toggleFilterARAgingSummary(false);
+      setFilter(_filter);
     },
-    [refreshARAgingSummary, toggleFilterARAgingSummary],
+    [],
   );
 
+  // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
-    setQuery({
-      ...query,
-      numberFormat
-    });
-    refreshARAgingSummary(true);
+    setFilter({ ...filter, numberFormat });
   };
 
   return (
-    <DashboardInsider>
+    <ARAgingSummaryProvider filter={filter}>
       <ARAgingSummaryActionsBar
-        numberFormat={query.numberFormat}
+        numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}/>
 
       <DashboardPageContent>
         <FinancialStatement>
           <ARAgingSummaryHeader
-            pageFilter={query}
+            pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
           <div class="financial-statement__body">
-            <ReceivableAgingSummaryTable
+            <ARAgingSummaryTable
               organizationName={organizationName}
-              receivableAgingSummaryQuery={query}
-              onFetchData={handleFetchData}
             />
           </div>
         </FinancialStatement>
       </DashboardPageContent>
-    </DashboardInsider>
+    </ARAgingSummaryProvider>
   );
 }
 
 export default compose(
-  withDashboardActions,
-  withARAgingSummaryActions,
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,
   })),
-  withARAgingSummary(({ ARAgingSummaryRefresh }) => ({
-    ARAgingSummaryRefresh: ARAgingSummaryRefresh,
-  })),
 )(ReceivableAgingSummarySheet);

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

@@ -15,34 +15,34 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import NumberFormatDropdown from 'components/NumberFormatDropdown';
 
-import withARAgingSummary from './withARAgingSummary';
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 
 import { compose } from 'utils';
 import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
 
 /**
- * AR Aging summary sheet - Actions bar.
+ * A/R Aging summary sheet - Actions bar.
  */
 function ARAgingSummaryActionsBar({
   // #withReceivableAging
   receivableAgingFilter,
-  ARAgingSummaryLoading,
 
   // #withReceivableAgingActions
   toggleFilterARAgingSummary,
-  refreshARAgingSummary,
 
   // #ownProps
   numberFormat,
   onNumberFormatSubmit,
 }) {
+  const { isARAgingFetching, refetch } = useARAgingSummaryContext();
+
   const handleFilterToggleClick = () => {
     toggleFilterARAgingSummary();
   };
   // Handles re-calculate report button.
   const handleRecalcReport = () => {
-    refreshARAgingSummary(true);
+    refetch();
   };
   // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
@@ -80,7 +80,7 @@ function ARAgingSummaryActionsBar({
             <NumberFormatDropdown
               numberFormat={numberFormat}
               onSubmit={handleNumberFormatSubmit}
-              submitDisabled={ARAgingSummaryLoading}
+              submitDisabled={isARAgingFetching}
             />
           }
           minimal={true}
@@ -118,7 +118,4 @@ function ARAgingSummaryActionsBar({
 
 export default compose(
   withARAgingSummaryActions,
-  withARAgingSummary(({ receivableAgingSummaryLoading }) => ({
-    ARAgingSummaryLoading: receivableAgingSummaryLoading,
-  })),
 )(ARAgingSummaryActionsBar);

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

@@ -17,24 +17,21 @@ import { compose } from 'utils';
  * AR Aging Summary Report - Drawer Header.
  */
 function ARAgingSummaryHeader({
+  // #ownProps
   pageFilter,
   onSubmitFilter,
   receivableAgingFilter,
 
-  // #withReceivableAgingSummary
-  receivableAgingRefresh,
-
   // #withReceivableAgingSummaryActions
-  refreshReceivableAgingSummary,
   toggleFilterARAgingSummary,
 }) {
   const validationSchema = Yup.object().shape({
     asDate: Yup.date().required().label('asDate'),
-    agingBeforeDays: Yup.number()
+    agingDaysBefore: Yup.number()
       .required()
       .integer()
       .positive()
-      .label('agingBeforeDays'),
+      .label('agingDaysBefore'),
     agingPeriods: Yup.number()
       .required()
       .integer()
@@ -44,12 +41,13 @@ function ARAgingSummaryHeader({
   // Initial values.
   const initialValues = {
     asDate: moment(pageFilter.asDate).toDate(),
-    agingBeforeDays: 30,
+    agingDaysBefore: 30,
     agingPeriods: 3,
   };
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
+    toggleFilterARAgingSummary();
     setSubmitting(false);
   };
   // Handle cancel button click.
@@ -89,10 +87,7 @@ function ARAgingSummaryHeader({
 
 export default compose(
   withARAgingSummaryActions,
-  withARAgingSummary(
-    ({ receivableAgingSummaryFilter, receivableAgingSummaryRefresh }) => ({
-      receivableAgingFilter: receivableAgingSummaryFilter,
-      receivableAgingRefresh: receivableAgingSummaryRefresh,
-    }),
-  ),
+  withARAgingSummary(({ receivableAgingSummaryFilter }) => ({
+    receivableAgingFilter: receivableAgingSummaryFilter,
+  })),
 )(ARAgingSummaryHeader);

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

@@ -12,17 +12,16 @@ import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 import { CustomersMultiSelect, Row, Col, FieldHint } from 'components';
 import { momentFormatter } from 'utils';
-// import withCustomers from 'containers/Customers/withCustomers';
 
-import { compose } from 'redux';
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 
 /**
  * AR Aging Summary - Drawer Header - General Fields.
  */
-function ARAgingSummaryHeaderGeneral({
-  // #withCustomers
-  customers,
-}) {
+export default function ARAgingSummaryHeaderGeneral() {
+  // AR Aging summary context.
+  const { customers } = useARAgingSummaryContext();
+
   return (
     <div>
       <Row>
@@ -53,7 +52,7 @@ function ARAgingSummaryHeaderGeneral({
 
       <Row>
         <Col xs={5}>
-          <FastField name={'agingBeforeDays'}>
+          <FastField name={'agingDaysBefore'}>
             {({ field, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'aging_before_days'} />}
@@ -104,9 +103,4 @@ function ARAgingSummaryHeaderGeneral({
       </Row>
     </div>
   );
-}
-export default compose(
-  // withCustomers(({ customers }) => ({
-  //   customers,
-  // })),
-)(ARAgingSummaryHeaderGeneral);
+}

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

@@ -0,0 +1,47 @@
+import React, { useMemo, createContext, useContext } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useARAgingSummaryReport, useCustomers } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const ARAgingSummaryContext = createContext();
+
+/**
+ * A/R aging summary provider.
+ */
+function ARAgingSummaryProvider({ filter, ...props }) {
+  // Transformes the filter from to the Url query.
+  const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
+
+  const {
+    data: ARAgingSummary,
+    isLoading: isARAgingLoading,
+    isFetching: isARAgingFetching,
+    refetch,
+  } = useARAgingSummaryReport(query);
+
+  // Retrieve the customers list.
+  const {
+    data: { customers },
+    isFetching: isCustomersFetching,
+  } = useCustomers();
+
+  const provider = {
+    ARAgingSummary,
+    customers,
+
+    isARAgingLoading,
+    isARAgingFetching,
+    isCustomersFetching,
+    refetch,
+  };
+
+  return (
+    <DashboardInsider name={'AR-Aging-Summary'}>
+      <ARAgingSummaryContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useARAgingSummaryContext = () => useContext(ARAgingSummaryContext);
+
+export { ARAgingSummaryProvider, useARAgingSummaryContext };

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

@@ -1,72 +1,25 @@
-import React, { useMemo, useCallback } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
 import DataTable from 'components/DataTable';
 import FinancialSheet from 'components/FinancialSheet';
 
-import withARAgingSummary from './withARAgingSummary';
-
-import { compose, getColumnWidth } from 'utils';
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+import { useARAgingSummaryColumns } from './components';
 
 /**
  * AR aging summary table sheet.
  */
-function ReceivableAgingSummaryTable({
-  // #withReceivableAgingSummary
-  receivableAgingRows,
-  receivableAgingLoading,
-  receivableAgingColumns,
-
+export default function ReceivableAgingSummaryTable({
   // #ownProps
-  onFetchData,
   organizationName,
 }) {
   const { formatMessage } = useIntl();
 
-  const agingColumns = useMemo(() => {
-    return receivableAgingColumns.map((agingColumn) => {
-      return `${agingColumn.before_days} - ${
-        agingColumn.to_days || 'And Over'
-      }`;
-    });
-  }, [receivableAgingColumns]);
+  // AR aging summary report context.
+  const { ARAgingSummary, isARAgingFetching } = useARAgingSummaryContext();
 
-  const columns = useMemo(
-    () => [
-      {
-        Header: <T id={'customer_name'} />,
-        accessor: 'name',
-        className: 'customer_name',
-        sticky: 'left',
-        width: 240,
-        textOverview: true,
-      },
-      {
-        Header: <T id={'current'} />,
-        accessor: 'current',
-        className: 'current',
-        width: getColumnWidth(receivableAgingRows, `current`, {
-          minWidth: 120,
-        }),
-      },
-      ...agingColumns.map((agingColumn, index) => ({
-        Header: agingColumn,
-        accessor: `aging-${index }`,
-        width: getColumnWidth(receivableAgingRows, `aging-${index }`, {
-          minWidth: 120,
-        }),
-      })),
-      {
-        Header: (<T id={'total'} />),
-        id: 'total',
-        accessor: 'total',
-        className: 'total',
-        width: getColumnWidth(receivableAgingRows, 'total', {
-          minWidth: 120,
-        }),
-      },
-    ],
-    [receivableAgingRows, agingColumns],
-  );
+  // AR aging summary columns.
+  const columns = useARAgingSummaryColumns();
 
   const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
 
@@ -80,12 +33,12 @@ function ReceivableAgingSummaryTable({
       name={'receivable-aging-summary'}
       sheetType={formatMessage({ id: 'receivable_aging_summary' })}
       asDate={new Date()}
-      loading={receivableAgingLoading}
+      loading={isARAgingFetching}
     >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
-        data={receivableAgingRows}
+        data={ARAgingSummary.tableRows}
         rowClassNames={rowClassNames}
         onFetchData={handleFetchData}
         noInitialFetch={true}
@@ -94,17 +47,3 @@ function ReceivableAgingSummaryTable({
     </FinancialSheet>
   );
 }
-
-export default compose(
-  withARAgingSummary(
-    ({
-      receivableAgingSummaryLoading,
-      receivableAgingSummaryColumns,
-      receivableAgingSummaryRows,
-    }) => ({
-      receivableAgingLoading: receivableAgingSummaryLoading,
-      receivableAgingColumns: receivableAgingSummaryColumns,
-      receivableAgingRows: receivableAgingSummaryRows,
-    }),
-  ),
-)(ReceivableAgingSummaryTable);

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+import { getColumnWidth } from 'utils';
+import { FormattedMessage as T } from 'react-intl';
+
+/**
+ * Retrieve AR aging summary columns.
+ */
+export const useARAgingSummaryColumns = () => {
+  const {
+    ARAgingSummary: { tableRows, columns },
+  } = useARAgingSummaryContext();
+
+  const agingColumns = React.useMemo(() => {
+    return columns.map(
+      (agingColumn) =>
+        `${agingColumn.before_days} - ${agingColumn.to_days || 'And Over'}`,
+    );
+  }, [columns]);
+
+  return React.useMemo(
+    () => [
+      {
+        Header: <T id={'customer_name'} />,
+        accessor: 'name',
+        className: 'customer_name',
+        sticky: 'left',
+        width: 240,
+        textOverview: true,
+      },
+      {
+        Header: <T id={'current'} />,
+        accessor: 'current',
+        className: 'current',
+        width: getColumnWidth(tableRows, `current`, {
+          minWidth: 120,
+        }),
+      },
+      ...agingColumns.map((agingColumn, index) => ({
+        Header: agingColumn,
+        accessor: `aging-${index}`,
+        width: getColumnWidth(tableRows, `aging-${index}`, {
+          minWidth: 120,
+        }),
+      })),
+      {
+        Header: <T id={'total'} />,
+        id: 'total',
+        accessor: 'total',
+        className: 'total',
+        width: getColumnWidth(tableRows, 'total', {
+          minWidth: 120,
+        }),
+      },
+    ],
+    [tableRows, agingColumns],
+  );
+};

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

@@ -40,6 +40,7 @@ function BalanceSheet({
     setFilter({ ..._filter });
   };
 
+  // Hnadle number format submit.
   const handleNumberFormatSubmit = (values) => {
     setFilter({
       ...filter,
@@ -48,7 +49,7 @@ function BalanceSheet({
   };
 
   return (
-    <BalanceSheetProvider query={filter}>
+    <BalanceSheetProvider filter={filter}>
       <BalanceSheetActionsBar
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}

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

@@ -5,15 +5,20 @@ import { transformFilterFormToQuery } from '../common';
 
 const BalanceSheetContext = createContext();
 
-function BalanceSheetProvider({ query, ...props }) {
-  const { data: balanceSheet, isFetching, refetch } = useBalanceSheet({
-    ...transformFilterFormToQuery(query),
-  });
+function BalanceSheetProvider({ filter, ...props }) {
+  // Transformes the given filter to query.
+  const query = React.useMemo(() => transformFilterFormToQuery(filter), [filter]);
+
+  // Fetches the balance sheet report.
+  const { data: balanceSheet, isFetching, refetch } = useBalanceSheet(query);
 
   const provider = {
     balanceSheet,
     isLoading: isFetching,
-    refetchBalanceSheet: refetch
+    refetchBalanceSheet: refetch,
+    
+    query,
+    filter,
   };
   return (
     <DashboardInsider name={'balance-sheet'}>

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

@@ -1,6 +1,5 @@
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import moment from 'moment';
-import { useIntl } from 'react-intl';
 
 import 'style/pages/FinancialStatements/GeneralLedger.scss';
 
@@ -12,28 +11,21 @@ import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
 import { GeneralLedgerProvider } from './GeneralLedgerProvider';
 
 import withGeneralLedgerActions from './withGeneralLedgerActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
 
-import { compose } from 'utils';
-
 import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
+import { compose } from 'utils';
 
 /**
  * General Ledger (GL) sheet.
  */
 function GeneralLedger({
-  // #withDashboardActions
-  changePageTitle,
-  setDashboardBackLink,
-
   // #withGeneralLedgerActions
   refreshGeneralLedgerSheet,
 
   // #withSettings
   organizationName,
 }) {
-  const { formatMessage } = useIntl();
   const [filter, setFilter] = useState({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
     toDate: moment().endOf('year').format('YYYY-MM-DD'),
@@ -41,21 +33,6 @@ function GeneralLedger({
     accountsFilter: 'with-transactions',
   });
 
-  // Change page title of the dashboard.
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'general_ledger' }));
-  }, [changePageTitle, formatMessage]);
-
-  useEffect(() => {
-    // Show the back link on dashboard topbar.
-    setDashboardBackLink(true);
-
-    return () => {
-      // Hide the back link on dashboard topbar.
-      setDashboardBackLink(false);
-    };
-  });
-  
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback(
     (filter) => {
@@ -71,7 +48,7 @@ function GeneralLedger({
   );
 
   return (
-    <GeneralLedgerProvider query={filter}>
+    <GeneralLedgerProvider query={transformFilterFormToQuery(filter)}>
       <GeneralLedgerActionsBar />
 
       <DashboardPageContent>
@@ -95,7 +72,6 @@ function GeneralLedger({
 
 export default compose(
   withGeneralLedgerActions,
-  withDashboardActions,
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,
   })),

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

@@ -5,7 +5,6 @@ import {
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
-import { compose } from 'redux';
 
 import { AccountsMultiSelect, Row, Col } from 'components';
 
@@ -13,17 +12,15 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
 import FinancialAccountsFilter from '../FinancialAccountsFilter';
 
-import withAccounts from 'containers/Accounts/withAccounts';
-
 import { filterAccountsOptions } from './common';
+import { useGeneralLedgerContext } from './GeneralLedgerProvider'
 
 /**
  * General ledger (GL) - Header - General panel.
  */
-function GeneralLedgerHeaderGeneralPane({
-  // #withAccounts
-  accountsList,
-}) {
+export default function GeneralLedgerHeaderGeneralPane() {
+  const { accounts } = useGeneralLedgerContext();
+
   return (
     <div>
       <FinancialStatementDateRange />
@@ -37,7 +34,7 @@ function GeneralLedgerHeaderGeneralPane({
             label={<T id={'specific_accounts'} />}
             className={classNames('form-group--select-list', Classes.FILL)}
           >
-            <AccountsMultiSelect accounts={accountsList} />
+            <AccountsMultiSelect accounts={accounts} />
           </FormGroup>
         </Col>
       </Row>
@@ -45,8 +42,4 @@ function GeneralLedgerHeaderGeneralPane({
       <RadiosAccountingBasis key={'basis'} />
     </div>
   );
-}
-
-export default compose(withAccounts(({ accountsList }) => ({ accountsList })))(
-  GeneralLedgerHeaderGeneralPane,
-);
+}

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

@@ -1,14 +1,14 @@
 import React, { createContext, useContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useGeneralLedgerSheet, useAccounts } from 'hooks/query';
-import { transformFilterFormToQuery } from '../common';
 
 const GeneralLedgerContext = createContext();
 
+/**
+ * General ledger provider.
+ */
 function GeneralLedgerProvider({ query, ...props }) {
-  const { data: generalLedger, isFetching, refetch } = useGeneralLedgerSheet({
-    ...transformFilterFormToQuery(query),
-  });
+  const { data: generalLedger, isFetching, refetch } = useGeneralLedgerSheet(query);
 
   // Accounts list.
   const { data: accounts, isFetching: isAccountsLoading } = useAccounts();

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

@@ -1,6 +1,5 @@
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import moment from 'moment';
-import { useIntl } from 'react-intl';
 
 import 'style/pages/FinancialStatements/TrialBalanceSheet.scss';
 
@@ -10,7 +9,6 @@ import TrialBalanceSheetHeader from './TrialBalanceSheetHeader';
 import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withSettings from 'containers/Settings/withSettings';
 import withTrialBalance from './withTrialBalance';
@@ -21,16 +19,9 @@ import { compose } from 'utils';
  * Trial balance sheet.
  */
 function TrialBalanceSheet({
-  // #withDashboardActions
-  changePageTitle,
-  setDashboardBackLink,
-  setSidebarShrink,
-
   // #withPreferences
   organizationName,
 }) {
-  const { formatMessage } = useIntl();
-
   const [filter, setFilter] = useState({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
     toDate: moment().endOf('year').format('YYYY-MM-DD'),
@@ -38,22 +29,6 @@ function TrialBalanceSheet({
     accountsFilter: 'all-accounts',
   });
 
-  // Change page title of the dashboard.
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'trial_balance_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 filter form submit.
   const handleFilterSubmit = useCallback(
     (filter) => {
@@ -97,7 +72,6 @@ function TrialBalanceSheet({
 }
 
 export default compose(
-  withDashboardActions,
   withTrialBalanceActions,
   withTrialBalance(({ trialBalanceQuery }) => ({
     trialBalanceQuery,

client/src/containers/FinancialStatements/common.js

@@ -1,5 +1,5 @@
 import { omit } from 'lodash';
-import { transformToCamelCase, flatObject } from 'utils';
+import { transfromToSnakeCase, flatObject } from 'utils';
 import { formatMessage } from 'services/intl';
 
 export const displayColumnsByOptions = [
@@ -53,7 +53,7 @@ export const transformDisplayColumnsType = (form) => {
 };
 
 export const transformFilterFormToQuery = (form) => {
-  const transformed = transformToCamelCase({
+  const transformed = transfromToSnakeCase({
     ...omit(form, ['accountsFilter']),
     ...transformDisplayColumnsType(form),
     noneZero: form.accountsFilter === 'without-zero-balance',

client/src/containers/FinancialStatements/reducers.js

@@ -226,3 +226,38 @@ export const generalLedgerTableRowsReducer = (accounts) => {
     })
     .value();
 };
+
+export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
+  const rows = [];
+
+  const mapAging = (agingPeriods) => {
+    return agingPeriods.reduce((acc, aging, index) => {
+      acc[`aging-${index}`] = aging.total.formatted_amount;
+      return acc;
+    }, {});
+  };
+  sheet.customers.forEach((customer) => {
+    const agingRow = mapAging(customer.aging);
+
+    rows.push({
+      rowType: 'customer',
+      name: customer.customer_name,
+      ...agingRow,
+      current: customer.current.formatted_amount,
+      total: customer.total.formatted_amount,
+    });
+  });
+  if (rows.length <= 0) {
+    return [];
+  }
+  return [
+    ...rows,
+    {
+      name: '',
+      rowType: 'total',
+      current: sheet.total.current.formatted_amount,
+      ...mapAging(sheet.total.aging),
+      total: sheet.total.total.formatted_amount,
+    },
+  ];
+};

client/src/hooks/query/financialReports.js

@@ -6,6 +6,7 @@ import {
   profitLossSheetReducer,
   generalLedgerTableRowsReducer,
   journalTableRowsReducer,
+  ARAgingSummaryTableRowsMapper
 } from 'containers/FinancialStatements/reducers';
 import useApiRequest from '../useRequest';
  
@@ -175,6 +176,29 @@ export function useARAgingSummaryReport(query, props) {
       apiRequest.get('/financial_statements/receivable_aging_summary', {
         params: query,
       }),
-    props,
+    {
+      select: (res) => ({
+        columns: res.data.columns,
+        data: res.data.data,
+        query: res.data.query,
+        tableRows: ARAgingSummaryTableRowsMapper({
+          customers: res.data.data.customers,
+          total: res.data.data.total,
+          columns: res.data.columns,
+        }), 
+      }),
+      initialData: {
+        data: {
+          data: {
+            customers: [],
+            total: {},
+          },
+          columns: [],
+          tableRows: []
+        }
+      },
+      initialDataUpdatedAt: 0,
+      ...props
+    },
   );
 }

client/src/routes/dashboard.js

@@ -110,6 +110,9 @@ export default [
     ),
     breadcrumb: 'General Ledger',
     hotkey: 'shift+4',
+    pageTitle: formatMessage({ id: 'general_ledger' }),
+    backLink: true,
+    sidebarShrink: true
   },
   {
     path: `/financial-reports/balance-sheet`,
@@ -131,6 +134,8 @@ export default [
     ),
     breadcrumb: 'Trial Balance Sheet',
     hotkey: 'shift+5',
+    pageTitle: formatMessage({ id: 'trial_balance_sheet' }),
+    backLink: true,
   },
   {
     path: `/financial-reports/profit-loss-sheet`,
@@ -146,6 +151,9 @@ export default [
       import('containers/FinancialStatements/ARAgingSummary/ARAgingSummary'),
     ),
     breadcrumb: 'Receivable Aging Summary',
+    pageTitle: formatMessage({ id: 'receivable_aging_summary' }),
+    backLink: true,
+    sidebarShrink: true,
   },
   {
     path: `/financial-reports/journal-sheet`,