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

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

@@ -1,27 +1,20 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { useIntl } from 'react-intl';
-import { queryCache, useQuery } from 'react-query';
+import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
 
+import 'style/pages/FinancialStatements/ARAgingSummary.scss';
+
 import { FinancialStatement } from 'components';
 
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-
-import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
 import APAgingSummaryHeader from './APAgingSummaryHeader';
+import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
 import APAgingSummaryTable from './APAgingSummaryTable';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import { APAgingSummaryProvider } from './APAgingSummaryProvider';
 
 import withSettings from 'containers/Settings/withSettings';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withAPAgingSummaryActions from './withAPAgingSummaryActions';
-import withAPAgingSummary from './withAPAgingSummary';
-import { transformFilterFormToQuery } from './common';
-
+import withAPAgingSummaryActions from './withAPAgingSummaryActions'
 import { compose } from 'utils';
 
-import 'style/pages/FinancialStatements/ARAgingSummary.scss';
-
 /**
  * AP aging summary report.
  */
@@ -29,82 +22,47 @@ function APAgingSummary({
   // #withSettings
   organizationName,
 
-  // #withDashboardActions
-  changePageTitle,
-  setDashboardBackLink,
-
-  // #withAPAgingSummary
-  APAgingSummaryRefresh,
-
   // #withAPAgingSummaryActions
-  requestPayableAgingSummary,
-  refreshAPAgingSummary,
-  toggleFilterAPAgingSummary,
+  toggleAPAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
-
-  const [query, setQuery] = useState({
+  const [filter, setFilter] = useState({
     asDate: moment().endOf('day').format('YYYY-MM-DD'),
     agingBeforeDays: 30,
     agingPeriods: 3,
   });
 
-  // handle fetching payable aging summary report.
-  const fetchAPAgingSummarySheet = useQuery(
-    ['payable-aging-summary', query],
-    (key, _query) =>
-      requestPayableAgingSummary({
-        ...transformFilterFormToQuery(_query),
-      }),
-    { enable: true },
-  );
-
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'payable_aging_summary' }));
-  }, [changePageTitle, formatMessage]);
-
-  useEffect(() => {
-    if (APAgingSummaryRefresh) {
-      queryCache.invalidateQueries('payable-aging-summary');
-      refreshAPAgingSummary(false);
-    }
-  }, [APAgingSummaryRefresh, refreshAPAgingSummary]);
-
-  useEffect(() => {
-    setDashboardBackLink(true);
-    return () => {
-      setDashboardBackLink(false);
-    };
-  }, [setDashboardBackLink]);
-
-  const handleFilterSubmit = (filter) => {
+  // Handle filter submit.
+  const handleFilterSubmit = useCallback((filter) => {
     const _filter = {
       ...filter,
       asDate: moment(filter.asDate).format('YYYY-MM-DD'),
     };
-    setQuery(_filter);
-    refreshAPAgingSummary(true);
-    toggleFilterAPAgingSummary(false);
-  };
+    setFilter(_filter);
+  }, []);
 
+  // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
-    setQuery({
-      ...query,
+    setFilter({
+      ...filter,
       numberFormat,
     });
-    refreshAPAgingSummary(true);
   };
 
+  // Hide the report filter drawer once the page unmount.
+  useEffect(() => () => {
+    toggleDisplayFilterDrawer(false);
+  }, [toggleDisplayFilterDrawer])
+
   return (
-    <DashboardInsider>
+    <APAgingSummaryProvider filter={filter}>
       <APAgingSummaryActionsBar
-        numberFormat={query.numberFormat}
+        numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <DashboardPageContent>
         <FinancialStatement>
           <APAgingSummaryHeader
-            pageFilter={query}
+            pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
           <div className={'financial-statement__body'}>
@@ -112,17 +70,13 @@ function APAgingSummary({
           </div>
         </FinancialStatement>
       </DashboardPageContent>
-    </DashboardInsider>
+    </APAgingSummaryProvider>
   );
 }
 
 export default compose(
-  withDashboardActions,
-  withAPAgingSummaryActions,
   withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
-  })),
-  withAPAgingSummary(({ APAgingSummaryRefresh }) => ({
-    APAgingSummaryRefresh,
+    organizationName: organizationSettings?.name,
   })),
+  withAPAgingSummaryActions  
 )(APAgingSummary);

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

@@ -8,7 +8,6 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
-import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
 
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
@@ -17,36 +16,42 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { Icon } from 'components';
 import NumberFormatDropdown from 'components/NumberFormatDropdown';
 
+import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
 import withAPAgingSummary from './withAPAgingSummary';
-import withARAgingSummaryActions from './withAPAgingSummaryActions';
+import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
-import { compose } from 'utils';
+import { saveInvoke, compose } from 'utils';
 
 /**
  * AP Aging summary sheet - Actions bar.
  */
 function APAgingSummaryActionsBar({
-  //#withPayableAgingSummary
+  // #withPayableAgingSummary
   payableAgingFilter,
-  payableAgingLoading,
 
-  //#withARAgingSummaryActions
-  toggleFilterAPAgingSummary,
-  refreshAPAgingSummary,
+  // #withARAgingSummaryActions
+  toggleAPAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
 
   //#ownProps
   numberFormat,
   onNumberFormatSubmit,
 }) {
-  const handleFilterToggleClick = () => toggleFilterAPAgingSummary();
+  const { isAPAgingFetching, refetch } = useAPAgingSummaryContext();
+
+  const handleFilterToggleClick = () => {
+    toggleFilterDrawerDisplay();
+  }
 
   // handle recalculate report button.
-  const handleRecalculateReport = () => refreshAPAgingSummary(true);
+  const handleRecalculateReport = () => { 
+    refetch();
+  }
 
   // handle number format submit.
-  const handleNumberFormatSubmit = (numberFormat) =>
-    safeInvoke(onNumberFormatSubmit, numberFormat);
-    
+  const handleNumberFormatSubmit = (numberFormat) => {
+    saveInvoke(onNumberFormatSubmit, numberFormat);
+  }
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -76,7 +81,7 @@ function APAgingSummaryActionsBar({
             <NumberFormatDropdown
               numberFormat={numberFormat}
               onSubmit={handleNumberFormatSubmit}
-              submitDisabled={payableAgingLoading}
+              submitDisabled={isAPAgingFetching}
             />
           }
           minimal={true}
@@ -113,11 +118,8 @@ function APAgingSummaryActionsBar({
 }
 
 export default compose(
-  withARAgingSummaryActions,
-  withAPAgingSummary(
-    ({ payableAgingSummaryLoading, payableAgingSummaryFilter }) => ({
-      payableAgingLoading: payableAgingSummaryLoading,
-      payableAgingFilter: payableAgingSummaryFilter,
-    }),
-  ),
+  withAPAgingSummaryActions,
+  withAPAgingSummary(({ APAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: APAgingSummaryFilterDrawer
+  }))
 )(APAgingSummaryActionsBar);

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

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

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

@@ -1,9 +1,17 @@
 import React from 'react';
 import { FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
+import {
+  Intent,
+  FormGroup,
+  InputGroup,
+  Position,
+  Classes,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
-import { Row, Col, FieldHint } from 'components';
+import classNames from 'classnames';
+import { ContactsMultiSelect, Row, Col, FieldHint } from 'components';
+import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
 import {
   momentFormatter,
   tansformDateValue,
@@ -15,6 +23,7 @@ import {
  * AP Aging Summary - Drawer Header - General Fields.
  */
 export default function APAgingSummaryHeaderGeneral() {
+  const { vendors } = useAPAgingSummaryContext();
   return (
     <div>
       <Row>
@@ -72,6 +81,19 @@ export default function APAgingSummaryHeaderGeneral() {
           </FastField>
         </Col>
       </Row>
+      <Row>
+        <Col xs={5}>
+          <FormGroup
+            label={<T id={'specific_vendors'} />}
+            className={classNames('form-group--select-list', Classes.FILL)}
+          >
+            <ContactsMultiSelect
+              defaultText={<T id={'all_vendors'} />}
+              contacts={vendors}
+            />
+          </FormGroup>
+        </Col>
+      </Row>
     </div>
   );
 }

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

@@ -0,0 +1,49 @@
+import React, { useMemo, createContext, useContext } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useAPAgingSummaryReport,useARAgingSummaryReport , useVendors } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const APAgingSummaryContext = createContext();
+
+/**
+ * A/P aging summary provider.
+ */
+function APAgingSummaryProvider({ filter, ...props }) {
+  // Transformers the filter from to the Url query.
+  const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
+
+  const {
+    data: APAgingSummary,
+    isLoading: isAPAgingLoading,
+    isFetching: isAPAgingFetching,
+    refetch,
+  } = useAPAgingSummaryReport(query);
+
+  // Retrieve the vendors list.
+  const {
+    data: { vendors },
+    isFetching: isVendorsLoading,
+  } = useVendors();
+
+  const provider = {
+    APAgingSummary,
+    vendors,
+
+    isAPAgingLoading,
+    isAPAgingFetching,
+    isVendorsLoading,
+    refetch,
+  };
+
+  return (
+    <DashboardInsider name={'AP-Aging-Summary'}>
+      <APAgingSummaryContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+
+const useAPAgingSummaryContext = () => useContext(APAgingSummaryContext);
+
+
+export { APAgingSummaryProvider, useAPAgingSummaryContext };

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

@@ -1,71 +1,29 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { DataTable } from 'components';
 import FinancialSheet from 'components/FinancialSheet';
 
-import withAPAgingSummary from './withAPAgingSummary';
-
-import { compose, getColumnWidth } from 'utils';
+import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
+import { useAPAgingSummaryColumns } from './components';
 
 /**
  * AP aging summary table sheet.
  */
-function APAgingSummaryTable({
-  //#withPayableAgingSummary
-  payableAgingColumns,
-  payableAgingRows,
-  payableAgingLoading,
-
+export default function APAgingSummaryTable({
   //#ownProps
   organizationName,
 }) {
   const { formatMessage } = useIntl();
-  const agingColumns = useMemo(
-    () =>
-      payableAgingColumns.map((agingColumn) => {
-        return `${agingColumn.before_days} - ${
-          agingColumn.to_days || 'And Over'
-        }`;
-      }),
-    [payableAgingColumns],
-  );
 
-  const columns = useMemo(
-    () => [
-      {
-        Header: <T id={'vendor_name'} />,
-        accessor: 'name',
-        className: 'name',
-        width: 240,
-        sticky: 'left',
-        textOverview: true,
-      },
-      {
-        Header: <T id={'current'} />,
-        accessor: 'current',
-        className: 'current',
-        width: getColumnWidth(payableAgingRows, `current`, {
-          minWidth: 120,
-        }),
-      },
+  // AP aging summary report content.
+  const {
+    APAgingSummary: { tableRows },
+    isAPAgingFetching,
+  } = useAPAgingSummaryContext();
+
+  // AP aging summary columns.
+  const columns = useAPAgingSummaryColumns();
 
-      ...agingColumns.map((agingColumn, index) => ({
-        Header: agingColumn,
-        accessor: `aging-${index}`,
-        width: getColumnWidth(payableAgingRows, `aging-${index}`, {
-          minWidth: 120,
-        }),
-      })),
-      {
-        Header: <T id={'total'} />,
-        accessor: 'total',
-        width: getColumnWidth(payableAgingRows, 'total', {
-          minWidth: 120,
-        }),
-      },
-    ],
-    [payableAgingRows],
-  );
   const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
 
   return (
@@ -74,12 +32,12 @@ function APAgingSummaryTable({
       name={'payable-aging-summary'}
       sheetType={formatMessage({ id: 'payable_aging_summary' })}
       asDate={new Date()}
-      loading={payableAgingLoading}
+      loading={isAPAgingFetching}
     >
       <DataTable
         className={'bigcapital-datatable--financial-report'}
         columns={columns}
-        data={payableAgingRows}
+        data={tableRows}
         rowClassNames={rowClassNames}
         noInitialFetch={true}
         sticky={true}
@@ -87,17 +45,3 @@ function APAgingSummaryTable({
     </FinancialSheet>
   );
 }
-
-export default compose(
-  withAPAgingSummary(
-    ({
-      payableAgingSummaryLoading,
-      payableAgingSummaryColumns,
-      payableAgingSummaryRows,
-    }) => ({
-      payableAgingLoading: payableAgingSummaryLoading,
-      payableAgingColumns: payableAgingSummaryColumns,
-      payableAgingRows: payableAgingSummaryRows,
-    }),
-  ),
-)(APAgingSummaryTable);

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

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
+import { getColumnWidth } from 'utils';
+import { FormattedMessage as T } from 'react-intl';
+
+/**
+ * Retrieve AP aging summary columns.
+ */
+export const useAPAgingSummaryColumns = () => {
+  const {
+    APAgingSummary: { tableRows, columns },
+  } = useAPAgingSummaryContext();
+
+  const agingColumns = React.useMemo(() => {
+    return columns.map(
+      (agingColumn) =>
+        `${agingColumn.before_days} - ${agingColumn.to_days || 'And Over'}`,
+    );
+  }, [columns]);
+
+  return useMemo(
+    () => [
+      {
+        Header: <T id={'vendor_name'} />,
+        accessor: 'name',
+        className: 'name',
+        width: 240,
+        sticky: 'left',
+        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'} />,
+        accessor: 'total',
+        width: getColumnWidth(tableRows, 'total', {
+          minWidth: 120,
+        }),
+      },
+    ],
+    [tableRows, agingColumns],
+  );
+};

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

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

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

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

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

@@ -39,7 +39,7 @@ function ARAgingSummaryActionsBar({
   const { isARAgingFetching, refetch } = useARAgingSummaryContext();
 
   const handleFilterToggleClick = () => {
-    toggleDisplayFilterDrawer(false);
+    toggleDisplayFilterDrawer();
   };
 
   // Handles re-calculate report button.

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

@@ -25,7 +25,7 @@ function ARAgingSummaryHeader({
   toggleARAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
 
   // #withARAgingSummary
-  isFilterDrawerOpen
+  isFilterDrawerOpen,
 }) {
   const validationSchema = Yup.object().shape({
     asDate: Yup.date().required().label('asDate'),
@@ -53,13 +53,22 @@ function ARAgingSummaryHeader({
     toggleFilterDrawerDisplay(false);
     setSubmitting(false);
   };
+
   // Handle cancel button click.
   const handleCancelClick = () => {
     toggleFilterDrawerDisplay(false);
   };
+ 
+  // Handle the drawer close.
+  const handleDrawerClose = () => {
+    toggleFilterDrawerDisplay(false);
+  };
 
   return (
-    <FinancialStatementHeader isOpen={isFilterDrawerOpen}>
+    <FinancialStatementHeader
+      isOpen={isFilterDrawerOpen}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}

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

@@ -10,7 +10,7 @@ import {
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
-import { CustomersMultiSelect, Row, Col, FieldHint } from 'components';
+import { ContactsMultiSelect, Row, Col, FieldHint } from 'components';
 import { momentFormatter } from 'utils';
 
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
@@ -97,7 +97,7 @@ export default function ARAgingSummaryHeaderGeneral() {
             label={<T id={'specific_customers'} />}
             className={classNames('form-group--select-list', Classes.FILL)}
           >
-            <CustomersMultiSelect customers={customers} />
+            <ContactsMultiSelect contacts={customers} />
           </FormGroup>
         </Col>
       </Row>

client/src/containers/FinancialStatements/reducers.js

@@ -261,3 +261,38 @@ export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
     },
   ];
 };
+
+export const APAgingSummaryTableRowsMapper = (sheet, total) => {
+  const rows = [];
+
+  const mapAging = (agingPeriods) => {
+    return agingPeriods.reduce((acc, aging, index) => {
+      acc[`aging-${index}`] = aging.total.formatted_amount;
+      return acc;
+    }, {});
+  };
+  sheet.vendors.forEach((vendor) => {
+    const agingRow = mapAging(vendor.aging);
+
+    rows.push({
+      rowType: 'vendor',
+      name: vendor.vendor_name,
+      ...agingRow,
+      current: vendor.current.formatted_amount,
+      total: vendor.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,
+    },
+  ];
+};