feat: APAgingSummary.

2026-02-17 05:10:31 +00:00 · 2021-01-24 22:58:47 +02:00
parent 1a89730855
commit 201d789cb8
17 changed files with 893 additions and 154 deletions
--- a/client/src/config/sidebarMenu.js
+++ b/client/src/config/sidebarMenu.js
@@ -1,4 +1,4 @@
-  import React from 'react';
+import React from 'react';
 import { FormattedMessage as T } from 'react-intl';

 export default [
@@ -167,11 +167,11 @@ export default [
        href: '/financial-reports/profit-loss-sheet',
      },
      {
-        text: 'Receivable Aging Summary',
+        text: <T id={'receivable_aging_summary'} />,
        href: '/financial-reports/receivable-aging-summary',
      },
      {
-        text: 'Payable Aging Summary',
+        text: <T id={'payable_aging_summary'} />,
        href: '/financial-reports/payable-aging-summary',
      },
    ],
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
@@ -0,0 +1,128 @@
+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 DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
+import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
+import APAgingSummaryHeader from './APAgingSummaryHeader';
+import APAgingSummaryTable from './APAgingSummaryTable';
+
+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 { compose } from 'utils';
+
+import 'style/pages/FinancialStatements/ARAgingSummary.scss';
+
+/**
+ * AP aging summary report.
+ */
+function APAgingSummary({
+  // #withSettings
+  organizationName,
+
+  // #withDashboardActions
+  changePageTitle,
+  setDashboardBackLink,
+
+  // #withAPAgingSummary
+  APAgingSummaryRefresh,
+
+  // #withAPAgingSummaryActions
+  requestPayableAgingSummary,
+  refreshAPAgingSummary,
+  toggleFilterAPAgingSummary,
+}) {
+  const { formatMessage } = useIntl();
+
+  const [query, setQuery] = 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) => {
+    const _filter = {
+      ...filter,
+      asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+    };
+    setQuery(_filter);
+    refreshAPAgingSummary(true);
+    toggleFilterAPAgingSummary(false);
+  };
+
+  const handleNumberFormatSubmit = (numberFormat) => {
+    setQuery({
+      ...query,
+      numberFormat,
+    });
+    refreshAPAgingSummary(true);
+  };
+
+  return (
+    <DashboardInsider>
+      <APAgingSummaryActionsBar
+        numberFormat={query.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <DashboardPageContent>
+        <FinancialStatement>
+          <APAgingSummaryHeader
+            pageFilter={query}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <div className={'financial-statement__body'}>
+            <APAgingSummaryTable organizationName={organizationName} />
+          </div>
+        </FinancialStatement>
+      </DashboardPageContent>
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withAPAgingSummaryActions,
+  withSettings(({ organizationSettings }) => ({
+    organizationName: organizationSettings.name,
+  })),
+  withAPAgingSummary(({ APAgingSummaryRefresh }) => ({
+    APAgingSummaryRefresh,
+  })),
+)(APAgingSummary);
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import {
+  NavbarDivider,
+  NavbarGroup,
+  Classes,
+  Button,
+  Popover,
+  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';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { Icon } from 'components';
+import NumberFormatDropdown from 'components/NumberFormatDropdown';
+
+import withAPAgingSummary from './withAPAgingSummary';
+import withARAgingSummaryActions from './withAPAgingSummaryActions';
+
+import { compose } from 'utils';
+
+/**
+ * AP Aging summary sheet - Actions bar.
+ */
+function APAgingSummaryActionsBar({
+  //#withPayableAgingSummary
+  payableAgingFilter,
+  payableAgingLoading,
+
+  //#withARAgingSummaryActions
+  toggleFilterAPAgingSummary,
+  refreshAPAgingSummary,
+
+  //#ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+}) {
+  const handleFilterToggleClick = () => toggleFilterAPAgingSummary();
+
+  // handle recalculate report button.
+  const handleRecalculateReport = () => refreshAPAgingSummary(true);
+
+  // handle number format submit.
+  const handleNumberFormatSubmit = (numberFormat) =>
+    safeInvoke(onNumberFormatSubmit, numberFormat);
+    
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
+          text={<T id={'recalc_report'} />}
+          onClick={handleRecalculateReport}
+          icon={<Icon icon="refresh-16" iconSize={16} />}
+        />
+        <NavbarDivider />
+        <Button
+          className={classNames(Classes.MINIMAL, 'button--table-views')}
+          icon={<Icon icon="cog-16" iconSize={16} />}
+          text={
+            payableAgingFilter ? (
+              <T id={'hide_customizer'} />
+            ) : (
+              <T id={'customize_report'} />
+            )
+          }
+          onClick={handleFilterToggleClick}
+          active={payableAgingFilter}
+        />
+        <NavbarDivider />
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={payableAgingLoading}
+            />
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="numbers" width={23} height={16} />}
+          />
+        </Popover>
+
+        <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,
+  withAPAgingSummary(
+    ({ payableAgingSummaryLoading, payableAgingSummaryFilter }) => ({
+      payableAgingLoading: payableAgingSummaryLoading,
+      payableAgingFilter: payableAgingSummaryFilter,
+    }),
+  ),
+)(APAgingSummaryActionsBar);
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import { FormattedMessage as T } from 'react-intl';
+import { Formik, Form, validateYupSchema } 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 APAgingSummaryHeaderGeneral from './APAgingSummaryHeaderGeneral';
+
+import withAPAgingSummary from './withAPAgingSummary';
+import withAPAgingSummaryActions from './withAPAgingSummaryActions';
+
+import { compose } from 'utils';
+
+/**
+ * AP Aging Summary Report - Drawer Header.
+ */
+function APAgingSummaryHeader({
+  pageFilter,
+  onSubmitFilter,
+  payableAgingFilter,
+
+  // #withPayableAgingSummaryActions
+  toggleFilterAPAgingSummary,
+}) {
+  const validationSchema = Yup.object({
+    as_date: Yup.date().required().label('asDate'),
+    aging_days_before: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingBeforeDays'),
+    aging_periods: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingPeriods'),
+  });
+
+  // initial values.
+  const initialValues = {
+    as_date: moment(pageFilter.asDate).toDate(),
+    aging_days_before: 30,
+    aging_periods: 3,
+  };
+
+  // handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    setSubmitting(false);
+  };
+
+  // handle cancel button click.
+  const handleCancelClick = () => toggleFilterAPAgingSummary();
+  return (
+    <FinancialStatementHeader isOpen={payableAgingFilter}>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id={'general'}
+              title={<T id={'general'} />}
+              panel={<APAgingSummaryHeaderGeneral />}
+            />
+          </Tabs>
+          <div className={'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(
+  withAPAgingSummaryActions,
+  withAPAgingSummary(({ payableAgingSummaryFilter }) => ({
+    payableAgingFilter: payableAgingSummaryFilter,
+  })),
+)(APAgingSummaryHeader);
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js
@@ -0,0 +1,77 @@
+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,
+  tansformDateValue,
+  inputIntent,
+  handleDateChange,
+} from 'utils';
+
+/**
+ * AP Aging Summary - Drawer Header - General Fields.
+ */
+export default function APAgingSummaryHeaderGeneral() {
+  return (
+    <div>
+      <Row>
+        <Col xs={5}>
+          <FastField name={'asDate'}>
+            {({ form, field: { value }, meta: { error } }) => (
+              <FormGroup
+                label={<T id={'as_date'} />}
+                labelInfo={<FieldHint />}
+                fill={true}
+                intent={inputIntent({ error })}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={tansformDateValue(value)}
+                  onChange={handleDateChange((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={'aging_days_before'}>
+            {({ field, meta: { error } }) => (
+              <FormGroup
+                label={<T id={'aging_before_days'} />}
+                labelInfo={<FieldHint />}
+                intent={inputIntent({ error })}
+              >
+                <InputGroup intent={error && Intent.DANGER} {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={5}>
+          <FastField name={'aging_periods'}>
+            {({ field, meta: { error } }) => (
+              <FormGroup
+                label={<T id={'aging_periods'} />}
+                labelInfo={<FieldHint />}
+                intent={inputIntent({ error })}
+              >
+                <InputGroup intent={error && Intent.DANGER} {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+    </div>
+  );
+}
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js
@@ -0,0 +1,103 @@
+import React, { useMemo, 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';
+
+/**
+ * AP aging summary table sheet.
+ */
+function APAgingSummaryTable({
+  //#withPayableAgingSummary
+  payableAgingColumns,
+  payableAgingRows,
+  payableAgingLoading,
+
+  //#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,
+        }),
+      },
+
+      ...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 (
+    <FinancialSheet
+      companyName={organizationName}
+      name={'payable-aging-summary'}
+      sheetType={formatMessage({ id: 'payable_aging_summary' })}
+      asDate={new Date()}
+      loading={payableAgingLoading}
+    >
+      <DataTable
+        className={'bigcapital-datatable--financial-report'}
+        columns={columns}
+        data={payableAgingRows}
+        rowClassNames={rowClassNames}
+        noInitialFetch={true}
+        sticky={true}
+      />
+    </FinancialSheet>
+  );
+}
+
+export default compose(
+  withAPAgingSummary(
+    ({
+      payableAgingSummaryLoading,
+      payableAgingSummaryColumns,
+      payableAgingSummaryRows,
+    }) => ({
+      payableAgingLoading: payableAgingSummaryLoading,
+      payableAgingColumns: payableAgingSummaryColumns,
+      payableAgingRows: payableAgingSummaryRows,
+    }),
+  ),
+)(APAgingSummaryTable);
--- a/client/src/containers/FinancialStatements/APAgingSummary/common.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/common.js
@@ -0,0 +1,5 @@
+import { transformToCamelCase, flatObject } from 'utils';
+
+export const transformFilterFormToQuery = (form) => {
+  return flatObject(transformToCamelCase(form));
+};
--- a/client/src/containers/FinancialStatements/APAgingSummary/withAPAgingSummary.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/withAPAgingSummary.js
@@ -0,0 +1,35 @@
+import { connect } from 'react-redux';
+import {
+  getFinancialSheetFactory,
+  getFinancialSheetColumnsFactory,
+  getFinancialSheetTableRowsFactory,
+} 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,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
--- a/client/src/containers/FinancialStatements/APAgingSummary/withAPAgingSummaryActions.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/withAPAgingSummaryActions.js
@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import {
+  fetchPayableAginSummary,
+  payableAgingSummaryRefresh,
+} 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',
+    }),
+});
+
+export default connect(null, mapActionsToProps);
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
@@ -97,16 +97,17 @@ function ReceivableAgingSummarySheet({
  const handleNumberFormatSubmit = (numberFormat) => {
    setQuery({
      ...query,
-      numberFormat
+      numberFormat,
    });
    refreshARAgingSummary(true);
  };
-
+  console.log(query, 'EE');
  return (
    <DashboardInsider>
      <ARAgingSummaryActionsBar
        numberFormat={query.numberFormat}
-        onNumberFormatSubmit={handleNumberFormatSubmit}/>
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />

      <DashboardPageContent>
        <FinancialStatement>
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js
@@ -48,7 +48,6 @@ function ARAgingSummaryActionsBar({
  const handleNumberFormatSubmit = (numberFormat) => {
    safeInvoke(onNumberFormatSubmit, numberFormat);
  };
-
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -98,7 +97,7 @@ function ARAgingSummaryActionsBar({
          className={Classes.MINIMAL}
          text={<T id={'filter'} />}
          icon={<Icon icon="filter-16" iconSize={16} />}
-        />        
+        />
        <NavbarDivider />

        <Button
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -972,5 +972,6 @@ export default {
  current: 'Current',
  adjustment_reasons: 'Adjustment reasons',
  transaction_number: 'Transaction #',
-  running_balance: 'Running balance'
+  running_balance: 'Running balance',
+  payable_aging_summary: 'Payable Aging Summary',
 };
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -149,6 +149,14 @@ export default [
    }),
    breadcrumb: 'Receivable Aging Summary',
  },
+  {
+    path: '/financial-reports/payable-aging-summary',
+    component: LazyLoader({
+      loader: () =>
+        import('containers/FinancialStatements/APAgingSummary/APAgingSummary'),
+    }),
+    breadcrumb: 'Payable Aging Summary',
+  },
  {
    path: `/financial-reports/journal-sheet`,
    component: LazyLoader({
--- a/client/src/store/financialStatement/financialStatements.actions.js
+++ b/client/src/store/financialStatement/financialStatements.actions.js
@@ -1,185 +1,266 @@
-import ApiService from "services/ApiService";
+import ApiService from 'services/ApiService';
 import t from 'store/types';

 export const balanceSheetRefresh = (refresh) => {
-  return dispatch => dispatch({
-    type: 'BALANCE_SHEET_REFRESH',
-    payload: { refresh },
-  });
+  return (dispatch) =>
+    dispatch({
+      type: 'BALANCE_SHEET_REFRESH',
+      payload: { refresh },
+    });
 };

 export const fetchGeneralLedger = ({ query }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    dispatch({
-      type: t.GENERAL_LEDGER_SHEET_LOADING,
-      loading: true,
-    });
-    ApiService.get('/financial_statements/general_ledger', { params: query }).then((response) => {
-      dispatch({
-        type: t.GENERAL_LEDGER_STATEMENT_SET,
-        data: response.data,
-      });
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
      dispatch({
        type: t.GENERAL_LEDGER_SHEET_LOADING,
-        loading: false,
+        loading: true,
      });
-      resolve(response);
-    }).catch((error) => { reject(error); });
-  });
+      ApiService.get('/financial_statements/general_ledger', { params: query })
+        .then((response) => {
+          dispatch({
+            type: t.GENERAL_LEDGER_STATEMENT_SET,
+            data: response.data,
+          });
+          dispatch({
+            type: t.GENERAL_LEDGER_SHEET_LOADING,
+            loading: false,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
 };

 export const refreshGeneralLedgerSheet = (refresh) => {
-  return (dispatch) => dispatch({
-    type: t.GENERAL_LEDGER_REFRESH,
-    payload: { refresh },
-  });
+  return (dispatch) =>
+    dispatch({
+      type: t.GENERAL_LEDGER_REFRESH,
+      payload: { refresh },
+    });
 };

 export const fetchBalanceSheet = ({ query }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    dispatch({
-      type: t.BALANCE_SHEET_LOADING,
-      loading: true,
-    });
-    ApiService.get('/financial_statements/balance_sheet', { params: query }).then((response) => {
-      dispatch({
-        type: t.BALANCE_SHEET_STATEMENT_SET,
-        data: response.data,
-        query: query,
-      });
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
      dispatch({
        type: t.BALANCE_SHEET_LOADING,
-        loading: false,
+        loading: true,
      });
-      dispatch({
-        type: t.SET_DASHBOARD_REQUEST_COMPLETED,
-      });
-      resolve(response);
-    }).catch((error) => { reject(error); });
-  });
+      ApiService.get('/financial_statements/balance_sheet', { params: query })
+        .then((response) => {
+          dispatch({
+            type: t.BALANCE_SHEET_STATEMENT_SET,
+            data: response.data,
+            query: query,
+          });
+          dispatch({
+            type: t.BALANCE_SHEET_LOADING,
+            loading: false,
+          });
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
 };

 export const fetchTrialBalanceSheet = ({ query }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    dispatch({
-      type: t.TRIAL_BALANCE_SHEET_LOADING,
-      loading: true,
-    });
-    ApiService.get('/financial_statements/trial_balance_sheet', { params: query }).then((response) => {
-      dispatch({
-        type: t.TRAIL_BALANCE_STATEMENT_SET,
-        data: response.data,
-      });
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
      dispatch({
        type: t.TRIAL_BALANCE_SHEET_LOADING,
-        loading: false,
+        loading: true,
      });
-      resolve(response.data);
-    }).catch((error) => { reject(error); })
-  })
+      ApiService.get('/financial_statements/trial_balance_sheet', {
+        params: query,
+      })
+        .then((response) => {
+          dispatch({
+            type: t.TRAIL_BALANCE_STATEMENT_SET,
+            data: response.data,
+          });
+          dispatch({
+            type: t.TRIAL_BALANCE_SHEET_LOADING,
+            loading: false,
+          });
+          resolve(response.data);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
 };

 export const trialBalanceRefresh = (refresh) => {
-  return (dispatch) => dispatch({
-    type: t.TRIAL_BALANCE_REFRESH,
-    payload: { refresh },
-  });
+  return (dispatch) =>
+    dispatch({
+      type: t.TRIAL_BALANCE_REFRESH,
+      payload: { refresh },
+    });
 };

 export const fetchProfitLossSheet = ({ query }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    dispatch({
-      type: t.PROFIT_LOSS_SHEET_LOADING,
-      loading: true,
-    }); 
-    ApiService.get('/financial_statements/profit_loss_sheet', { params: query }).then((response) => {
-      dispatch({
-        type: t.PROFIT_LOSS_SHEET_SET,
-        profitLoss: response.data.data,
-        columns: response.data.columns,
-        query: response.data.query,
-      });
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
      dispatch({
        type: t.PROFIT_LOSS_SHEET_LOADING,
-        loading: false,
+        loading: true,
      });
-      resolve(response.data);
-    }).catch((error) => { reject(error); });
-  })
+      ApiService.get('/financial_statements/profit_loss_sheet', {
+        params: query,
+      })
+        .then((response) => {
+          dispatch({
+            type: t.PROFIT_LOSS_SHEET_SET,
+            profitLoss: response.data.data,
+            columns: response.data.columns,
+            query: response.data.query,
+          });
+          dispatch({
+            type: t.PROFIT_LOSS_SHEET_LOADING,
+            loading: false,
+          });
+          resolve(response.data);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
 };

 export const profitLossRefresh = (refresh) => {
-  return dispatch => dispatch({
-    type: t.PROFIT_LOSS_REFRESH,
-    payload: { refresh },
-  });
-}
+  return (dispatch) =>
+    dispatch({
+      type: t.PROFIT_LOSS_REFRESH,
+      payload: { refresh },
+    });
+};

 export const fetchJournalSheet = ({ query }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    dispatch({
-      type: t.JOURNAL_SHEET_LOADING,
-      loading: true,
-    });
-    ApiService.get('/financial_statements/journal', { params: query }).then((response) => {
-      dispatch({
-        type: t.JOURNAL_SHEET_SET,
-        data: response.data,
-        query: response.data.query,
-      });
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
      dispatch({
        type: t.JOURNAL_SHEET_LOADING,
-        loading: false,
+        loading: true,
      });
-      resolve(response.data);
-    }).catch(error => { reject(error); });
-  });
+      ApiService.get('/financial_statements/journal', { params: query })
+        .then((response) => {
+          dispatch({
+            type: t.JOURNAL_SHEET_SET,
+            data: response.data,
+            query: response.data.query,
+          });
+          dispatch({
+            type: t.JOURNAL_SHEET_LOADING,
+            loading: false,
+          });
+          resolve(response.data);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
 };

 export const refreshJournalSheet = (refresh) => {
-  return dispatch => dispatch({
-    type: t.JOURNAL_SHEET_REFRESH,
-    payload: { refresh },
-  });
-}
+  return (dispatch) =>
+    dispatch({
+      type: t.JOURNAL_SHEET_REFRESH,
+      payload: { refresh },
+    });
+};

 export const fetchReceivableAgingSummary = ({ query }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    dispatch({
-      type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
-      payload: {
-        loading: true,
-      },
-    });
-    ApiService
-      .get('/financial_statements/receivable_aging_summary', { params: query })
-      .then((response) => {
-        dispatch({
-          type: t.RECEIVABLE_AGING_SUMMARY_SET,
-          payload: {
-            customers: response.data.data.customers,
-            total: response.data.data.total,
-            columns: response.data.columns,
-            query,
-          },
-        });
-        dispatch({
-          type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
-          payload: {
-            loading: false,
-          },
-        });
-        resolve(response);
-      })
-      .catch((error) => {
-        reject(error);
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
+        payload: {
+          loading: true,
+        },
      });
-  });
-}
+      ApiService.get('/financial_statements/receivable_aging_summary', {
+        params: query,
+      })
+        .then((response) => {
+          dispatch({
+            type: t.RECEIVABLE_AGING_SUMMARY_SET,
+            payload: {
+              customers: response.data.data.customers,
+              total: response.data.data.total,
+              columns: response.data.columns,
+              query,
+            },
+          });
+          dispatch({
+            type: t.RECEIVABLE_AGING_SUMMARY_LOADING,
+            payload: {
+              loading: false,
+            },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+};

 export const receivableAgingSummaryRefresh = (refresh) => {
-  return (dispatch) => dispatch({
-    type: t.RECEIVABLE_AGING_SUMMARY_REFRESH,
-    payload: { refresh },
-  });
-}
+  return (dispatch) =>
+    dispatch({
+      type: t.RECEIVABLE_AGING_SUMMARY_REFRESH,
+      payload: { refresh },
+    });
+};
+
+export const fetchPayableAginSummary = ({ query }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.PAYABLE_AGING_SUMMARY_LOADING,
+        payload: {
+          loading: true,
+        },
+      });
+      ApiService.get('/financial_statements/payable_aging_summary', {
+        params: query,
+      })
+        .then((response) => {
+          dispatch({
+            type: t.PAYABLE_AGING_SUMMARY_SET,
+            payload: {
+              vendors: response.data.data.vendors,
+              total: response.data.data.total,
+              columns: response.data.columns,
+              query,
+            },
+          });
+          dispatch({
+            type: t.PAYABLE_AGING_SUMMARY_LOADING,
+            payload: {
+              loading: false,
+            },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+};
+
+export const payableAgingSummaryRefresh = (refresh) => {
+  return (dispatch) =>
+    dispatch({
+      type: t.PAYABLE_AGING_SUMMARY_REFRESH,
+      payload: { refresh },
+    });
+};
--- a/client/src/store/financialStatement/financialStatements.mappers.js
+++ b/client/src/store/financialStatement/financialStatements.mappers.js
@@ -193,7 +193,7 @@ export const profitLossToTableRowsMapper = (profitLoss) => {
      total: profitLoss.gross_profit.total,
      total_periods: profitLoss.gross_profit.total_periods,
      rowTypes: ['gross_total', 'section_total', 'total'],
-    })
+    });
  }
  if (profitLoss.expenses) {
    results.push({
@@ -209,7 +209,7 @@ export const profitLossToTableRowsMapper = (profitLoss) => {
        },
      ],
      total_periods: profitLoss.expenses.total_periods,
-    })
+    });
  }
  if (profitLoss.operating_profit) {
    results.push({
@@ -217,7 +217,7 @@ export const profitLossToTableRowsMapper = (profitLoss) => {
      total: profitLoss.operating_profit.total,
      total_periods: profitLoss.income.total_periods,
      rowTypes: ['net_operating_total', 'section_total', 'total'],
-    })
+    });
  }
  if (profitLoss.other_income) {
    results.push({
@@ -257,7 +257,42 @@ export const profitLossToTableRowsMapper = (profitLoss) => {
      total: profitLoss.net_income.total,
      total_periods: profitLoss.net_income.total_periods,
      rowTypes: ['net_income_total', 'section_total', 'total'],
-    })
-  };
+    });
+  }
  return results;
 };
+
+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,
+    },
+  ];
+};
--- a/client/src/store/financialStatement/financialStatements.reducer.js
+++ b/client/src/store/financialStatement/financialStatements.reducer.js
@@ -6,6 +6,7 @@ import {
  generalLedgerToTableRows,
  profitLossToTableRowsMapper,
  ARAgingSummaryTableRowsMapper,
+  APAgingSummaryTableRowsMapper,
  mapTrialBalanceSheetToRows,
 } from './financialStatements.mappers';

@@ -48,6 +49,13 @@ const initialState = {
    filter: true,
    refresh: false,
  },
+  payableAgingSummary: {
+    sheet: {},
+    loading: false,
+    tableRows: [],
+    filter: true,
+    refresh: false,
+  },
 };

 const financialStatementFilterToggle = (financialName, statePath) => {
@@ -172,7 +180,7 @@ export default createReducer(initialState, {
    const { refresh } = action.payload;
    state.receivableAgingSummary.refresh = !!refresh;
  },
-   [t.RECEIVABLE_AGING_SUMMARY_LOADING]: (state, action) => {
+  [t.RECEIVABLE_AGING_SUMMARY_LOADING]: (state, action) => {
    const { loading } = action.payload;
    state.receivableAgingSummary.loading = loading;
  },
@@ -180,4 +188,29 @@ export default createReducer(initialState, {
    'RECEIVABLE_AGING_SUMMARY',
    'receivableAgingSummary',
  ),
+
+  [t.PAYABLE_AGING_SUMMARY_SET]: (state, action) => {
+    const { vendors, total, columns, query } = action.payload;
+
+    const receivableSheet = {
+      query,
+      columns,
+      vendors,
+      total,
+      tableRows: APAgingSummaryTableRowsMapper({ vendors, columns, total }),
+    };
+    state.payableAgingSummary.sheet = receivableSheet;
+  },
+  [t.PAYABLE_AGING_SUMMARY_REFRESH]: (state, action) => {
+    const { refresh } = action.payload;
+    state.payableAgingSummary.refresh = !!refresh;
+  },
+  [t.PAYABLE_AGING_SUMMARY_LOADING]: (state, action) => {
+    const { loading } = action.payload;
+    state.payableAgingSummary.loading = loading;
+  },
+  ...financialStatementFilterToggle(
+    'PAYABLE_AGING_SUMMARY',
+    'payableAgingSummary',
+  ),
 });
--- a/client/src/store/financialStatement/financialStatements.types.js
+++ b/client/src/store/financialStatement/financialStatements.types.js
@@ -1,5 +1,3 @@
-
-
 export default {
  GENERAL_LEDGER_STATEMENT_SET: 'GENERAL_LEDGER_STATEMENT_SET',
  GENERAL_LEDGER_SHEET_LOADING: 'GENERAL_LEDGER_SHEET_LOADING',
@@ -25,4 +23,8 @@ export default {
  RECEIVABLE_AGING_SUMMARY_SET: 'RECEIVABLE_AGING_SUMMARY_SET',
  RECEIVABLE_AGING_REFRECH: 'RECEIVABLE_AGING_REFRECH',
  RECEIVABLE_AGING_SUMMARY_REFRESH: 'RECEIVABLE_AGING_SUMMARY_REFRESH',
-}
+
+  PAYABLE_AGING_SUMMARY_LOADING: 'PAYABLE_AGING_SUMMARY_LOADING',
+  PAYABLE_AGING_SUMMARY_SET: 'PAYABLE_AGING_SUMMARY_SET',
+  PAYABLE_AGING_SUMMARY_REFRESH: 'PAYABLE_AGING_SUMMARY_REFRESH',
+};