feat: AR aging summary sheet frontend.

2026-02-16 21:00:31 +00:00 · 2021-01-13 20:58:58 +02:00
parent 7680150a31
commit 343185b8bd
27 changed files with 670 additions and 594 deletions
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
@@ -0,0 +1,127 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { queryCache, useQuery } from 'react-query';
+import moment from 'moment';
+
+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 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';
+
+/**
+ * AR aging summary report.
+ */
+function ReceivableAgingSummarySheet({
+  // #withSettings
+  organizationName,
+
+  // #withDashboardActions
+  changePageTitle,
+  setDashboardBackLink,
+
+  // #withARAgingSummaryActions
+  requestReceivableAgingSummary,
+  refreshARAgingSummary,
+  toggleFilterARAgingSummary,
+
+  // #withARAgingSummary
+  ARAgingSummaryRefresh,
+}) {
+  const { formatMessage } = useIntl();
+  const [query, setQuery] = useState({
+    asDate: moment().endOf('day').format('YYYY-MM-DD'),
+    agingBeforeDays: 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(() => {
+    // Show the back link on dashboard topbar.
+    setDashboardBackLink(true);
+
+    return () => {
+      // Hide the back link on dashboard topbar.
+      setDashboardBackLink(false);
+    };
+  }, [setDashboardBackLink]);
+
+  // 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) => {}, []);
+
+  const handleFilterSubmit = useCallback(
+    (filter) => {
+      const _filter = {
+        ...filter,
+        asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+      };
+      setQuery(_filter);
+      refreshARAgingSummary(true);
+      toggleFilterARAgingSummary(false);
+    },
+    [refreshARAgingSummary, toggleFilterARAgingSummary],
+  );
+
+  return (
+    <DashboardInsider>
+      <ARAgingSummaryActionsBar />
+
+      <DashboardPageContent>
+        <FinancialStatement>
+          <ARAgingSummaryHeader
+            pageFilter={query}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <div class="financial-statement__body">
+            <ReceivableAgingSummaryTable
+              organizationName={organizationName}
+              receivableAgingSummaryQuery={query}
+              onFetchData={handleFetchData}
+            />
+          </div>
+        </FinancialStatement>
+      </DashboardPageContent>
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withARAgingSummaryActions,
+  withSettings(({ organizationSettings }) => ({
+    organizationName: organizationSettings.name,
+  })),
+  withARAgingSummary(({ ARAgingSummaryRefresh }) => ({
+    ARAgingSummaryRefresh: ARAgingSummaryRefresh,
+  })),
+)(ReceivableAgingSummarySheet);
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  NavbarDivider,
+  NavbarGroup,
+  Classes,
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import Icon from 'components/Icon';
+
+import withARAgingSummary from './withARAgingSummary';
+import withARAgingSummaryActions from './withARAgingSummaryActions';
+
+import { compose } from 'utils';
+
+/**
+ * AR Aging summary sheet - Actions bar.
+ */
+function ARAgingSummaryActionsBar({
+  // #withReceivableAging
+  receivableAgingFilter,
+
+  // #withReceivableAgingActions
+  toggleFilterARAgingSummary,
+  refreshARAgingSummary,
+}) {
+  const handleFilterToggleClick = () => {
+    toggleFilterARAgingSummary();
+  };
+  // Handles re-calculate report button.
+  const handleRecalcReport = () => {
+    refreshARAgingSummary(true);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
+          text={<T id={'recalc_report'} />}
+          onClick={handleRecalcReport}
+          icon={<Icon icon="refresh-16" iconSize={16} />}
+        />
+        <NavbarDivider />
+
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--table-views')}
+          icon={<Icon icon="cog-16" iconSize={16} />}
+          text={
+            receivableAgingFilter ? (
+              <T id="hide_customizer" />
+            ) : (
+              <T id={'customize_report'} />
+            )
+          }
+          onClick={handleFilterToggleClick}
+          active={receivableAgingFilter}
+        />
+        <NavbarDivider />
+
+        <Button
+          className={Classes.MINIMAL}
+          text={<T id={'filter'} />}
+          icon={<Icon icon="filter-16" iconSize={16} />}
+        />        
+        <NavbarDivider />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withARAgingSummaryActions,
+  withARAgingSummary(({ receivableAgingSummaryFilter }) => ({
+    receivableAgingFilter: receivableAgingSummaryFilter,
+  })),
+)(ARAgingSummaryActionsBar);
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import { FormattedMessage as T } from 'react-intl';
+import { Formik, Form } from 'formik';
+import * as Yup from 'yup';
+import moment from 'moment';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+
+import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import ARAgingSummaryHeaderGeneral from './ARAgingSummaryHeaderGeneral';
+
+import withARAgingSummary from './withARAgingSummary';
+import withARAgingSummaryActions from './withARAgingSummaryActions';
+
+import { compose } from 'utils';
+
+/**
+ * AR Aging Summary Report - Drawer Header.
+ */
+function ARAgingSummaryHeader({
+  pageFilter,
+  onSubmitFilter,
+  receivableAgingFilter,
+
+  // #withReceivableAgingSummary
+  receivableAgingRefresh,
+
+  // #withReceivableAgingSummaryActions
+  refreshReceivableAgingSummary,
+  toggleFilterARAgingSummary,
+}) {
+  const validationSchema = Yup.object().shape({
+    asDate: Yup.date().required().label('asDate'),
+    agingBeforeDays: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingBeforeDays'),
+    agingPeriods: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingPeriods'),
+  });
+  // Initial values.
+  const initialValues = {
+    asDate: moment(pageFilter.asDate).toDate(),
+    agingBeforeDays: 30,
+    agingPeriods: 3,
+  };
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    setSubmitting(false);
+  };
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    toggleFilterARAgingSummary();
+  };
+
+  return (
+    <FinancialStatementHeader isOpen={receivableAgingFilter}>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<ARAgingSummaryHeaderGeneral />}
+            />
+          </Tabs>
+
+          <div class="financial-header-drawer__footer">
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
+              <T id={'calculate_report'} />
+            </Button>
+            <Button onClick={handleCancelClick} minimal={true}>
+              <T id={'cancel'} />
+            </Button>
+          </div>
+        </Form>
+      </Formik>
+    </FinancialStatementHeader>
+  );
+}
+
+export default compose(
+  withARAgingSummaryActions,
+  withARAgingSummary(
+    ({ receivableAgingSummaryFilter, receivableAgingSummaryRefresh }) => ({
+      receivableAgingFilter: receivableAgingSummaryFilter,
+      receivableAgingRefresh: receivableAgingSummaryRefresh,
+    }),
+  ),
+)(ARAgingSummaryHeader);
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { FastField } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import { Row, Col, FieldHint } from 'components';
+import { momentFormatter } from 'utils';
+
+/**
+ * AR Aging Summary - Drawer Header - General Fields.
+ */
+export default function ARAgingSummaryHeaderGeneral({}) {
+  return (
+    <div>
+      <Row>
+        <Col xs={5}>
+          <FastField name={'asDate'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'as_date'} />}
+                labelInfo={<FieldHint />}
+                fill={true}
+                intent={error && Intent.DANGER}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={value}
+                  onChange={(selectedDate) => {
+                    form.setFieldValue('asDate', selectedDate);
+                  }}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  minimal={true}
+                  fill={true}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FastField name={'agingBeforeDays'}>
+            {({ field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'aging_before_days'} />}
+                labelInfo={<FieldHint />}
+                className={'form-group--aging-before-days'}
+                intent={error && Intent.DANGER}
+              >
+                <InputGroup medium={true} intent={error && Intent.DANGER} {...field } />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FastField name={'agingPeriods'}>
+            {({ field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'aging_periods'} />}
+                labelInfo={<FieldHint />}
+                className={'form-group--aging-periods'}
+                intent={error && Intent.DANGER}
+              >
+                <InputGroup medium={true} intent={error && Intent.DANGER} {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+    </div>
+  );
+}
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js
@@ -0,0 +1,103 @@
+import React, { useMemo, useCallback } from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import DataTable from 'components/DataTable';
+import FinancialSheet from 'components/FinancialSheet';
+
+import withARAgingSummary from './withARAgingSummary';
+
+import { compose } from 'utils';
+
+/**
+ * AR aging summary table sheet.
+ */
+function ReceivableAgingSummaryTable({
+  // #withReceivableAgingSummary
+  receivableAgingRows,
+  receivableAgingLoading,
+  receivableAgingColumns,
+
+  // #ownProps
+  onFetchData,
+  organizationName,
+}) {
+  const { formatMessage } = useIntl();
+
+  const agingColumns = useMemo(() => {
+    return receivableAgingColumns.map((agingColumn) => {
+      return `${agingColumn.before_days} - ${
+        agingColumn.to_days || 'And Over'
+      }`;
+    });
+  }, [receivableAgingColumns]);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: <T id={'customer_name'} />,
+        accessor: 'name',
+        className: 'customer_name',
+        sticky: 'left',
+        width: 200,
+      },
+      {
+        Header: <T id={'current'} />,
+        accessor: 'current',
+        className: 'current',
+        width: 120,
+      },
+      ...agingColumns.map((agingColumn, index) => ({
+        Header: agingColumn,
+        accessor: `aging-${index }`,
+        width: 120,
+      })),
+      {
+        Header: (<T id={'total'} />),
+        id: 'total',
+        accessor: 'total',
+        className: 'total',
+        width: 140,
+      },
+    ],
+    [agingColumns],
+  );
+
+  const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
+
+  const handleFetchData = useCallback((...args) => {
+    // onFetchData && onFetchData(...args);
+  }, []);
+
+  return (
+    <FinancialSheet
+      companyName={organizationName}
+      name={'receivable-aging-summary'}
+      sheetType={formatMessage({ id: 'receivable_aging_summary' })}
+      asDate={new Date()}
+      loading={receivableAgingLoading}
+    >
+      <DataTable
+        className="bigcapital-datatable--financial-report"
+        columns={columns}
+        data={receivableAgingRows}
+        rowClassNames={rowClassNames}
+        onFetchData={handleFetchData}
+        noInitialFetch={true}
+        sticky={true}
+      />
+    </FinancialSheet>
+  );
+}
+
+export default compose(
+  withARAgingSummary(
+    ({
+      receivableAgingSummaryLoading,
+      receivableAgingSummaryColumns,
+      receivableAgingSummaryRows,
+    }) => ({
+      receivableAgingLoading: receivableAgingSummaryLoading,
+      receivableAgingColumns: receivableAgingSummaryColumns,
+      receivableAgingRows: receivableAgingSummaryRows,
+    }),
+  ),
+)(ReceivableAgingSummaryTable);
--- a/client/src/containers/FinancialStatements/ARAgingSummary/common.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/common.js
@@ -0,0 +1,5 @@
+import { mapKeys, snakeCase } from 'lodash';
+
+export const transfromFilterFormToQuery = (form) => {
+  return mapKeys(form, (v, k) => snakeCase(k));
+};
--- a/client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.js
@@ -0,0 +1,36 @@
+import { connect } from 'react-redux';
+import {
+  getFinancialSheetFactory,
+  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),
+      receivableAgingSummaryColumns: getARAgingSheetColumns(state, props),
+      receivableAgingSummaryRows: getARAgingSheetRows(state, props),
+      receivableAgingSummaryLoading: loading,
+      receivableAgingSummaryFilter: filter,
+      ARAgingSummaryRefresh: refresh,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
--- a/client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummaryActions.js
+++ b/client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummaryActions.js
@@ -7,11 +7,11 @@ import {
 const mapActionsToProps = (dispatch) => ({
  requestReceivableAgingSummary: (query) =>
    dispatch(fetchReceivableAgingSummary({ query })),
-  toggleFilterReceivableAgingSummary: () =>
+  toggleFilterARAgingSummary: () =>
    dispatch({
      type: 'RECEIVABLE_AGING_SUMMARY_FILTER_TOGGLE',
    }),
-  refreshReceivableAgingSummary: (refresh) =>
+  refreshARAgingSummary: (refresh) =>
    dispatch(receivableAgingSummaryRefresh(refresh)),
 });

--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
@@ -71,7 +71,7 @@ function BalanceSheet({
      // Hide the back link on dashboard topbar.
      setDashboardBackLink(false);
    };
-  });
+  }, [setDashboardBackLink]);

  // Handle re-fetch balance sheet after filter change.
  const handleFilterSubmit = useCallback(
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
@@ -49,7 +49,13 @@ function BalanceSheetActionsBar({
        <Button
          className={classNames(Classes.MINIMAL, 'button--table-views')}
          icon={<Icon icon="cog-16" iconSize={16} />}
-          text={!balanceSheetFilter ? <T id={'customize_report'} /> : <T id={'hide_customizer'} />}
+          text={
+            !balanceSheetFilter ? (
+              <T id={'customize_report'} />
+            ) : (
+              <T id={'hide_customizer'} />
+            )
+          }
          onClick={handleFilterToggleClick}
          active={balanceSheetFilter}
        />
--- a/client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummary.js
+++ b/client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummary.js
@@ -1,89 +0,0 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { useIntl } from 'react-intl';
-import { useQuery } from 'react-query';
-
-import moment from 'moment';
-import { FinancialStatement } from 'components';
-
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import ReceivableAgingSummaryActionsBar from './ReceivableAgingSummaryActionsBar';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import ReceivableAgingSummaryHeader from './ReceivableAgingSummaryHeader'
-import ReceivableAgingSummaryTable from './ReceivableAgingSummaryTable';
-
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withReceivableAgingSummaryActions from './withReceivableAgingSummaryActions';
-import { compose } from 'utils';
-
-
-function ReceivableAgingSummarySheet({
-  // #withDashboardActions
-  changePageTitle,
-
-  // #withReceivableAgingSummaryActions
-  requestReceivableAgingSummary,
-}) {
-  const { formatMessage } = useIntl();
-  const [query, setQuery] = useState({
-    as_date: moment().endOf('day').format('YYYY-MM-DD'),
-    aging_before_days: 30,
-    aging_periods: 3,
-  });
-  const [refresh, setRefresh] = useState(true);
-
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'receivable_aging_summary' }));
-  }, []);
-
-  const fetchSheet = useQuery(
-    ['receivable-aging-summary', query], 
-    (key, q) => requestReceivableAgingSummary(q),
-    { manual: true });
-
-  // Handle fetch the data of receivable aging summary sheet.
-  const handleFetchData = useCallback((...args) => {
-    setRefresh(true);
-  }, []);
-
-  const handleFilterSubmit = useCallback((filter) => {
-    const _filter = {
-      ...filter,
-      as_date: moment(filter.as_date).format('YYYY-MM-DD'),
-    };
-    setQuery(_filter);
-    setRefresh(true);
-  }, []);
-
-  useEffect(() => {
-    if (refresh) {
-      fetchSheet.refetch({ force: true });
-      setRefresh(false);
-    }
-  }, [fetchSheet, refresh]);
-
-  return (
-    <DashboardInsider>
-      <ReceivableAgingSummaryActionsBar />
- 
-      <DashboardPageContent>
-        <FinancialStatement>
-          <ReceivableAgingSummaryHeader
-            pageFilter={query}
-            onSubmitFilter={handleFilterSubmit} />
-
-          <div class="financial-statement__body">
-            <ReceivableAgingSummaryTable
-              receivableAgingSummaryQuery={query}
-              onFetchData={handleFetchData}
-            />
-          </div>
-        </FinancialStatement>
-      </DashboardPageContent>
-    </DashboardInsider>
-  );
-}
-
-export default compose(
-  withDashboardActions,
-  withReceivableAgingSummaryActions
-)(ReceivableAgingSummarySheet);
--- a/client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryActionsBar.js
+++ b/client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryActionsBar.js
@@ -1,110 +0,0 @@
-import React from 'react';
-import {
-  NavbarDivider,
-  NavbarGroup,
-  Classes,
-  Button,
-  Popover,
-  PopoverInteractionKind,
-  Position,
-} from "@blueprintjs/core";
-import { FormattedMessage as T } from 'react-intl';
-import classNames from 'classnames';
-
-import DashboardActionsBar from "components/Dashboard/DashboardActionsBar";
-import Icon from 'components/Icon';
-import { If } from 'components';
-
-import withReceivableAging from './withReceivableAgingSummary';
-import withReceivableAgingActions from './withReceivableAgingSummaryActions';
-
-import { compose } from 'utils';
-
-
-function ReceivableAgingSummaryActionsBar({
-  // #withReceivableAging
-  receivableAgingFilter,
-  
-  // #withReceivableAgingActions
-  toggleFilterReceivableAgingSummary,
-  refreshReceivableAgingSummary,
-}) {
-  const handleFilterToggleClick = () => {
-    toggleFilterReceivableAgingSummary();
-  };
-
-  const handleRecalcReport = () => {
-    refreshReceivableAgingSummary(true);
-  };
-
-  return (
-    <DashboardActionsBar>
-      <NavbarGroup>
-        <Button
-          className={classNames(Classes.MINIMAL, 'button--table-views')}
-          icon={<Icon icon="cog-16" iconSize={16} />}
-          text={<T id={'customize_report'} />}
-        />
-        <NavbarDivider />
-
-        <Button
-          className={classNames(
-            Classes.MINIMAL,
-            'button--gray-highlight',
-          )}
-          text={<T id={'recalc_report'} />}
-          icon={<Icon icon="refresh-16" iconSize={16} />}
-          onClick={handleRecalcReport}
-        />
-        <If condition={receivableAgingFilter}>
-          <Button
-            className={Classes.MINIMAL}
-            text={<T id={'hide_filter'} />}
-            onClick={handleFilterToggleClick}
-            icon={<Icon icon="arrow-to-top" />}
-          />
-        </If>
-
-        <If condition={!receivableAgingFilter}>
-          <Button
-            className={Classes.MINIMAL}
-            text={<T id={'show_filter'} />}
-            onClick={handleFilterToggleClick}
-            icon={<Icon icon="arrow-to-bottom" />}
-          />
-        </If>
-
-        <Popover
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
-        <NavbarDivider />
-
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon='print-16' iconSize={16} />}
-          text={<T id={'print'} />}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="file-export-16" iconSize={16} />}
-          text={<T id={'export'} />}
-        />
-      </NavbarGroup>
-    </DashboardActionsBar>
-  )
-}
-
-export default compose(
-  withReceivableAgingActions,
-  withReceivableAging(({ receivableAgingSummaryFilter }) => ({
-    receivableAgingFilter: receivableAgingSummaryFilter,
-  })),
-)(ReceivableAgingSummaryActionsBar)
--- a/client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryHeader.js
@@ -1,148 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import { useIntl, FormattedMessage as T } from 'react-intl';
-import { useFormik } from 'formik';
-import { Row, Col } from 'react-grid-system';
-import * as Yup from 'yup';
-import {
-  Intent,
-  FormGroup,
-  InputGroup,
-  Position,
-  Button,
-} from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import moment from 'moment';
-import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-import { ErrorMessage, FieldHint, FieldRequiredHint } from 'components';
-import { momentFormatter } from 'utils';
-
-import withReceivableAging from './withReceivableAgingSummary';
-import withReceivableAgingActions from './withReceivableAgingSummaryActions';
-
-import { compose } from 'utils';
-
-
-function ReceivableAgingSummaryHeader({
-  pageFilter,
-  onSubmitFilter,
-  receivableAgingFilter,
-
-  // #withReceivableAgingSummary
-  receivableAgingRefresh,
-
-  // #withReceivableAgingSummaryActions
-  refreshReceivableAgingSummary
-}) {
-  const { formatMessage } = useIntl();
-
-  const {
-    values,
-    errors,
-    touched,
-    setFieldValue,
-    getFieldProps,
-    submitForm,
-    isSubmitting,
-  } = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      as_date: moment(pageFilter.as_date).toDate(),
-      aging_before_days: 30,
-      aging_periods: 3,
-    },
-    validationSchema: Yup.object().shape({
-      as_date: Yup.date().required().label('as_date'),
-      aging_before_days: Yup.number()
-        .required()
-        .integer()
-        .positive()
-        .label('aging_before_days'),
-      aging_periods: Yup.number()
-        .required()
-        .integer()
-        .positive()
-        .label('aging_periods'),
-    }),
-    onSubmit: (values, { setSubmitting }) => {
-      onSubmitFilter(values);
-      setSubmitting(false);
-    },
-  });
-
-  const handleDateChange = useCallback(
-    (name) => (date) => {
-      setFieldValue(name, date);
-    },
-    [],
-  );
-
-  // Handle submit filter submit button.
-  useEffect(() => {
-    if (receivableAgingRefresh) {
-      submitForm();
-      refreshReceivableAgingSummary(false);
-    }
-  }, [submitForm, receivableAgingRefresh]);
-
-  return (
-    <FinancialStatementHeader show={receivableAgingFilter}>
-      <Row>
-        <Col width={260}>
-          <FormGroup
-            label={formatMessage({ id: 'as_date' })}
-            labelInfo={<FieldHint />}
-            fill={true}
-            intent={errors.as_date && Intent.DANGER}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={values.as_date}
-              onChange={handleDateChange('as_date')}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              minimal={true}
-              fill={true}
-            />
-          </FormGroup>
-        </Col>
-
-        <Col width={260}>
-          <FormGroup
-            label={<T id={'aging_before_days'} />}
-            labelInfo={<FieldHint />}
-            className={'form-group--aging-before-days'}
-            intent={errors.aging_before_days && Intent.DANGER}
-          >
-            <InputGroup
-              medium={true}
-              intent={errors.aging_before_days && Intent.DANGER}
-              {...getFieldProps('aging_before_days')}
-            />
-          </FormGroup>
-        </Col>
-
-        <Col width={260}>
-          <FormGroup
-            label={<T id={'aging_periods'} />}
-            labelInfo={<FieldHint />}
-            className={'form-group--aging-periods'}
-            intent={errors.aging_before_days && Intent.DANGER}
-          >
-            <InputGroup
-              medium={true}
-              intent={errors.aging_before_days && Intent.DANGER}
-              {...getFieldProps('aging_periods')}
-            />
-          </FormGroup>
-        </Col>
-      </Row>
-    </FinancialStatementHeader>
-  );
-}
-
-export default compose(
-  withReceivableAgingActions,
-  withReceivableAging(({ receivableAgingSummaryFilter, receivableAgingSummaryRefresh }) => ({
-    receivableAgingFilter: receivableAgingSummaryFilter,
-    receivableAgingRefresh: receivableAgingSummaryRefresh
-  })),
-)(ReceivableAgingSummaryHeader);
--- a/client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryTable.js
+++ b/client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryTable.js
@@ -1,99 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import DataTable from "components/DataTable";
-import FinancialSheet from 'components/FinancialSheet';
-import Money from 'components/Money';
-
-import withSettings from 'containers/Settings/withSettings';
-
-import { compose } from 'utils';
-import withReceivableAgingSummary from './withReceivableAgingSummary';
-import withReceivableAgingSummaryTable from './withReceivableAgingSummaryTable';
-
-function ReceivableAgingSummaryTable({
-  // #withPreferences
-  organizationSettings,
-
-  // #withReceivableAgingSummary
-  receivableAgingRows,
-  receivableAgingLoading,
-  receivableAgingColumns,
-  
-  // #ownProps
-  onFetchData,
-}) {
-  const { formatMessage } = useIntl();
-
-  const agingColumns = useMemo(() => {
-    return receivableAgingColumns.map((agingColumn) => {
-      return `${agingColumn.before_days} - ${agingColumn.to_days || 'And Over'}`;
-    });
-  }, [receivableAgingColumns]);
-  
-  const columns = useMemo(() => ([
-    {
-      Header: (<T id={'customer_name'} />),
-      accessor: 'customer_name',
-      className: 'customer_name',
-      sticky: 'left',
-    },
-    ...agingColumns.map((agingColumn, index) => ({
-      Header: agingColumn,
-      accessor: (row) => {
-        const amount = row[`aging-${index}`];
-        if (row.rowType === 'total') {
-          return <Money amount={amount} currency={'USD'} />
-        }
-        return amount > 0 ? amount : '';
-      },
-    })),
-    {
-      Header: (<T id={'total'} />),
-      id: 'total',
-      accessor: (row) => {
-        return <Money amount={row.total} currency={'USD'} />;
-      },
-      className: 'total',
-    },
-  ]), [agingColumns]);
-
-  const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
-
-  const handleFetchData = useCallback((...args) => {
-    onFetchData && onFetchData(...args);
-  }, []);
-
-  return (
-    <FinancialSheet
-      companyName={organizationSettings.name}
-      name={'receivable-aging-summary'}
-      sheetType={formatMessage({ id: 'receivable_aging_summary' })}
-      asDate={new Date()}
-      loading={receivableAgingLoading}>
-
-      <DataTable
-        className="bigcapital-datatable--financial-report"
-        columns={columns}
-        data={receivableAgingRows}
-        rowClassNames={rowClassNames}
-        onFetchData={handleFetchData}
-        noInitialFetch={true}
-        sticky={true}
-      />
-    </FinancialSheet>
-  );
-}
-
-export default compose(
-  withSettings,
-  withReceivableAgingSummaryTable,
-  withReceivableAgingSummary(({
-    receivableAgingSummaryLoading,
-    receivableAgingSummaryColumns,
-    receivableAgingSummaryRows,
-  }) => ({
-    receivableAgingLoading: receivableAgingSummaryLoading,
-    receivableAgingColumns: receivableAgingSummaryColumns,
-    receivableAgingRows: receivableAgingSummaryRows, 
-  })),
-)(ReceivableAgingSummaryTable);
--- a/client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummary.js
+++ b/client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummary.js
@@ -1,35 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  getFinancialSheet,
-  getFinancialSheetColumns,
-  getFinancialSheetTableRows,
-} from 'store/financialStatement/financialStatements.selectors';
-
-export default (mapState) => {
-  const mapStateToProps = (state, props) => {
-    const { receivableAgingSummaryIndex } = props;
-
-    const mapped = {
-      receivableAgingSummarySheet: getFinancialSheet(
-        state.financialStatements.receivableAgingSummary.sheets,
-        receivableAgingSummaryIndex,
-      ),
-      receivableAgingSummaryColumns: getFinancialSheetColumns(
-        state.financialStatements.receivableAgingSummary.sheets,
-        receivableAgingSummaryIndex,
-      ),
-      receivableAgingSummaryRows: getFinancialSheetTableRows(
-        state.financialStatements.receivableAgingSummary.sheets,
-        receivableAgingSummaryIndex,
-      ),
-      receivableAgingSummaryLoading:
-        state.financialStatements.receivableAgingSummary.loading,
-      receivableAgingSummaryFilter: 
-        state.financialStatements.receivableAgingSummary.filter,
-      receivableAgingSummaryRefresh: 
-        state.financialStatements.receivableAgingSummary.refresh,
-    };
-    return mapState ? mapState(mapped, state, props) : mapped;
-  };
-  return connect(mapStateToProps);
-}
--- a/client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummaryTable.js
+++ b/client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummaryTable.js
@@ -1,14 +0,0 @@
-import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
-import { connect } from 'react-redux';
-
-const mapStateToProps = (state, props) => {
-  const { receivableAgingSummaryQuery } = props;
-
-  return {
-    receivableAgingSummaryIndex: getFinancialSheetIndexByQuery(
-      state.financialStatements.receivableAgingSummary.sheets,
-      receivableAgingSummaryQuery,
-    ),
-  };
-}
-export default connect(mapStateToProps);