feat: AR aging summary sheet frontend.

client/src/components/DialogsContainer.js

@@ -1,7 +1,6 @@
 import React, { lazy } from 'react';
 
 import AccountFormDialog from 'containers/Dialogs/AccountFormDialog';
-
 import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
 import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
 import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog';

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);

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);

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);

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>
+  );
+}

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);

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));
+};

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);
+};

client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummaryActions.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)),
 });
 

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(

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}
         />

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);

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)

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);

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);

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);
-}

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);

client/src/lang/en/index.js

@@ -954,4 +954,5 @@ export default {
   delete_adjustment:'Delete Adjustment',
   the_make_adjustment_has_been_successfully_created:
     'The make adjustment has been successfully created.',
+  current: 'Current',
 };

client/src/routes/dashboard.js

@@ -135,16 +135,16 @@ export default [
     }),
     breadcrumb: 'Profit Loss Sheet',
   },
-  // {
+  {
-  //   path: '/financial-reports/receivable-aging-summary',
+    path: '/financial-reports/receivable-aging-summary',
-  //   component: LazyLoader({
+    component: LazyLoader({
-  //     loader: () =>
+      loader: () =>
-  //       import(
+        import(
-  //         'containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummary'
+          'containers/FinancialStatements/ARAgingSummary/ARAgingSummary'
-  //       ),
+        ),
-  //   }),
+    }),
-  //   breadcrumb: 'Receivable Aging Summary',
+    breadcrumb: 'Receivable Aging Summary',
-  // },
+  },
   {
     path: `/financial-reports/journal-sheet`,
     component: LazyLoader({

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

@@ -157,7 +157,8 @@ export const fetchReceivableAgingSummary = ({ query }) => {
         dispatch({
           type: t.RECEIVABLE_AGING_SUMMARY_SET,
           payload: {
-            aging: response.data.aging,
+            customers: response.data.data.customers,
+            total: response.data.data.total,
             columns: response.data.columns,
             query,
           },
@@ -172,7 +173,7 @@ export const fetchReceivableAgingSummary = ({ query }) => {
       })
       .catch((error) => {
         reject(error);
-      })
+      });
   });
 }
 

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

@@ -78,6 +78,48 @@ export const generalLedgerToTableRows = (accounts) => {
   }, []);
 };
 
+export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
+  const rows = [];
+
+  const mapAging = (agingPeriods) => {
+    return agingPeriods.reduce((acc, aging, index) => {
+      acc[`aging-${index}`] = aging.formatted_total;
+      return acc;
+    }, {});
+  };
+  sheet.customers.forEach((customer) => {
+    const agingRow = mapAging(customer.aging);
+
+    rows.push({
+      rowType: 'customer',
+      name: customer.customer_name,
+      ...agingRow,
+      current: customer.current.formatted_total,
+      total: customer.total.formatted_total,
+    });
+  });
+  return [
+    ...rows,
+    {
+      name: 'TOTAL',
+      rowType: 'total',
+      current: sheet.total.current.formatted_total,
+      ...mapAging(sheet.total.aging),
+      total: sheet.total.total.formatted_total,
+    } 
+  ];
+};
+
+export const mapTrialBalanceSheetToRows = (sheet) => {
+  return [
+    {
+      name: 'Total',
+      ...sheet.total,
+    },
+    ...sheet.accounts,
+  ];
+};
+
 export const profitLossToTableRowsMapper = (profitLoss) => {
 
   return [

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

@@ -1,11 +1,12 @@
 import { createReducer } from '@reduxjs/toolkit';
 import t from 'store/types';
-import { omit } from 'lodash';
 import {
   mapBalanceSheetToTableRows,
   journalToTableRowsMapper,
   generalLedgerToTableRows,
-  profitLossToTableRowsMapper
+  profitLossToTableRowsMapper,
+  ARAgingSummaryTableRowsMapper,
+  mapTrialBalanceSheetToRows,
 } from './financialStatements.mappers';
 
 const initialState = {
@@ -41,7 +42,7 @@ const initialState = {
     filter: true,
   },
   receivableAgingSummary: {
-    sheets: [],
+    sheet: {},
     loading: false,
     tableRows: [],
     filter: true,
@@ -49,38 +50,6 @@ const initialState = {
   },
 };
 
-
-
-
-const mapContactAgingSummary = (sheet) => {
-  const rows = [];
-
-  const mapAging = (agingPeriods) => {
-    return agingPeriods.reduce((acc, aging, index) => {
-      acc[`aging-${index}`] = aging.formatted_total;
-      return acc;
-    }, {});
-  };
-  sheet.customers.forEach((customer) => {
-    const agingRow = mapAging(customer.aging);
-
-    rows.push({
-      rowType: 'customer',
-      customer_name: customer.customer_name,
-      ...agingRow,
-      total: customer.total,
-    });
-  });
-
-  rows.push({
-    rowType: 'total',
-    customer_name: 'Total',
-    ...mapAging(sheet.total),
-    total: 0,
-  });
-  return rows;
-};
-
 const financialStatementFilterToggle = (financialName, statePath) => {
   return {
     [`${financialName}_FILTER_TOGGLE`]: (state, action) => {
@@ -112,8 +81,10 @@ export default createReducer(initialState, {
   ...financialStatementFilterToggle('BALANCE_SHEET', 'balanceSheet'),
 
   [t.TRAIL_BALANCE_STATEMENT_SET]: (state, action) => {
+    debugger;
     const trailBalanceSheet = {
-      data: action.data.data,
+      sheet: action.data.data,
+      tableRows: mapTrialBalanceSheetToRows(action.data.data),
       query: action.data.query,
     };
     state.trialBalance.sheet = trailBalanceSheet;
@@ -187,34 +158,28 @@ export default createReducer(initialState, {
 
   ...financialStatementFilterToggle('PROFIT_LOSS', 'profitLoss'),
 
-  // [t.RECEIVABLE_AGING_SUMMARY_LOADING]: (state, action) => {
-  //   const { loading } = action.payload;
-  //   state.receivableAgingSummary.loading = loading;
-  // },
  
-  // [t.RECEIVABLE_AGING_SUMMARY_SET]: (state, action) => {
-  //   const { aging, columns, query } = action.payload;
-  //   const index = getFinancialSheetIndexByQuery(
-  //     state.receivableAgingSummary.sheets,
-  //     query,
-  //   );
 
-  //   const receivableSheet = {
+  [t.RECEIVABLE_AGING_SUMMARY_SET]: (state, action) => {
-  //     query,
+    const { customers, total, columns, query } = action.payload;
-  //     columns,
+
-  //     aging,
+    const receivableSheet = {
-  //     tableRows: mapContactAgingSummary(aging),
+      query,
-  //   };
+      columns,
-  //   if (index !== -1) {
+      customers,
-  //     state.receivableAgingSummary[index] = receivableSheet;
+      total,
-  //   } else {
+      tableRows: ARAgingSummaryTableRowsMapper({ customers, columns, total }),
-  //     state.receivableAgingSummary.sheets.push(receivableSheet);
+    };
-  //   }
+    state.receivableAgingSummary.sheet = receivableSheet;
-  // },
+  },
-  // [t.RECEIVABLE_AGING_SUMMARY_REFRESH]: (state, action) => {
+  [t.RECEIVABLE_AGING_SUMMARY_REFRESH]: (state, action) => {
-  //   const { refresh } = action.payload;
+    const { refresh } = action.payload;
-  //   state.receivableAgingSummary.refresh = !!refresh;
+    state.receivableAgingSummary.refresh = !!refresh;
-  // },
+  },
+   [t.RECEIVABLE_AGING_SUMMARY_LOADING]: (state, action) => {
+    const { loading } = action.payload;
+    state.receivableAgingSummary.loading = loading;
+  },
   ...financialStatementFilterToggle(
     'RECEIVABLE_AGING_SUMMARY',
     'receivableAgingSummary',

client/src/style/pages/financial-statements.scss

@@ -145,7 +145,7 @@
 }
 
 .financial-sheet{
-  border: 2px solid #EBEBEB;
+  border: 2px solid #f0f0f0;
   border-radius: 10px;
   min-width: 640px;
   width: auto;
@@ -366,14 +366,25 @@
   &--receivable-aging-summary{
 
     .financial-sheet__table{
+
+      .bigcapital-datatable{
+        .tbody,
+        .thead{
+          .tr .td.customer_name ~ .td,
+          .tr .th.customer_name ~ .th{
+            justify-content: flex-end;
+          }
+        }
         .tbody{
+          
           .row-type--total{
             font-weight: 600;
   
             .td{
-            background-color: #fafbff;
+              border-top-color: #BBB;
-            border-bottom-color: #666;
+              border-top-style: solid;
-            border-bottom-style: dotted;
+              border-bottom: 3px double #666;
+            }
           }
         }
       }

server/src/interfaces/ARAgingSummaryReport.ts

@@ -25,6 +25,7 @@ export interface IARAgingSummaryCustomer {
 export interface IARAgingSummaryTotal {
   current: IAgingPeriodTotal,
   aging: (IAgingPeriodTotal & IAgingPeriod)[],
+  total: IAgingPeriodTotal,
 };
 
 export interface IARAgingSummaryData {

server/src/services/FinancialStatements/AgingSummary/ARAgingSummarySheet.ts

@@ -96,12 +96,14 @@ export default class ARAgingSummarySheet extends AgingSummaryReport {
     const customersAgingPeriods = this.customersWalker(this.contacts);
     const totalAgingPeriods = this.getTotalAgingPeriods(customersAgingPeriods);
     const totalCurrent = this.getTotalCurrent(customersAgingPeriods);
+    const totalCustomersTotal = this.getTotalContactsTotals(customersAgingPeriods);
 
     return {
       customers: customersAgingPeriods,
       total: {
         current: this.formatTotalAmount(totalCurrent),
         aging: totalAgingPeriods,
+        total: this.formatTotalAmount(totalCustomersTotal),
       }
     };
   }

server/src/services/FinancialStatements/AgingSummary/AgingSummary.ts

@@ -79,7 +79,6 @@ export default abstract class AgingSummaryReport extends AgingReport {
       return {
         ...agingPeriod,
         total,
-        formattedAmount: this.formatAmount(total),
       };
     });
     return newAgingPeriods;
@@ -198,4 +197,11 @@ export default abstract class AgingSummaryReport extends AgingReport {
   protected getAgingPeriodsTotal(agingPeriods: IAgingPeriodTotal[]): number {
     return sumBy(agingPeriods, 'total');
   }
+
+
+  protected getTotalContactsTotals(
+    customersSummary: IARAgingSummaryCustomer[]
+  ): number {
+    return sumBy(customersSummary, (summary) => summary.total.total);
+  }
 }

server/src/services/Inventory/InventoryAdjustmentService.ts

@@ -239,9 +239,7 @@ export default class InventoryAdjustmentService {
       inventoryAdjustmentId,
     });
     // Publish the inventory adjustment transaction.
-    await InventoryAdjustment.query()
+    await InventoryAdjustment.query().findById(inventoryAdjustmentId).patch({
-      .findById(inventoryAdjustmentId)
-      .patch({
       publishedAt: moment().toMySqlDateTime(),
     });