re-structure to monorepo.

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React, { useState, useCallback, useEffect } from 'react';
+import moment from 'moment';
+
+
+import ARAgingSummaryHeader from './ARAgingSummaryHeader';
+import ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar';
+
+import { FinancialStatement, DashboardPageContent } from '@/components';
+import { ARAgingSummaryProvider } from './ARAgingSummaryProvider';
+import { ARAgingSummarySheetLoadingBar } from './components';
+import { ARAgingSummaryBody } from './ARAgingSummaryBody';
+
+import withARAgingSummaryActions from './withARAgingSummaryActions';
+
+import { getDefaultARAgingSummaryQuery } from './common';
+import { compose } from '@/utils';
+
+/**
+ * A/R aging summary report.
+ */
+function ReceivableAgingSummarySheet({
+  // #withARAgingSummaryActions
+  toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
+}) {
+  const [filter, setFilter] = useState({
+    ...getDefaultARAgingSummaryQuery(),
+  });
+
+  // Handle filter submit.
+  const handleFilterSubmit = useCallback((filter) => {
+    const _filter = {
+      ...filter,
+      asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+    };
+    setFilter(_filter);
+  }, []);
+
+  // Handle number format submit.
+  const handleNumberFormatSubmit = (numberFormat) => {
+    setFilter({ ...filter, numberFormat });
+  };
+  // Hide the filter drawer once the page unmount.
+  useEffect(
+    () => () => {
+      toggleDisplayFilterDrawer(false);
+    },
+    [toggleDisplayFilterDrawer],
+  );
+
+  return (
+    <ARAgingSummaryProvider filter={filter}>
+      <ARAgingSummaryActionsBar
+        numberFormat={filter.numberFormat}
+        onNumberFormatSubmit={handleNumberFormatSubmit}
+      />
+      <ARAgingSummarySheetLoadingBar />
+
+      <DashboardPageContent>
+        <FinancialStatement>
+          <ARAgingSummaryHeader
+            pageFilter={filter}
+            onSubmitFilter={handleFilterSubmit}
+          />
+          <ARAgingSummaryBody />
+        </FinancialStatement>
+      </DashboardPageContent>
+    </ARAgingSummaryProvider>
+  );
+}
+
+export default compose(withARAgingSummaryActions)(ReceivableAgingSummarySheet);

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx

@@ -0,0 +1,126 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  NavbarDivider,
+  NavbarGroup,
+  Classes,
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { DashboardActionsBar, FormattedMessage as T, Icon } from '@/components';
+import classNames from 'classnames';
+
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
+
+import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+import withARAgingSummaryActions from './withARAgingSummaryActions';
+import withARAgingSummary from './withARAgingSummary';
+
+import { compose } from '@/utils';
+
+/**
+ * A/R Aging summary sheet - Actions bar.
+ */
+function ARAgingSummaryActionsBar({
+  // #withReceivableAging
+  isFilterDrawerOpen,
+
+  // #withReceivableAgingActions
+  toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
+
+  // #ownProps
+  numberFormat,
+  onNumberFormatSubmit,
+}) {
+  const { isARAgingFetching, refetch } = useARAgingSummaryContext();
+
+  const handleFilterToggleClick = () => {
+    toggleDisplayFilterDrawer();
+  };
+
+  // Handles re-calculate report button.
+  const handleRecalcReport = () => {
+    refetch();
+  };
+
+  // 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={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={
+            isFilterDrawerOpen ? (
+              <T id="hide_customizer" />
+            ) : (
+              <T id={'customize_report'} />
+            )
+          }
+          onClick={handleFilterToggleClick}
+          active={isFilterDrawerOpen}
+        />
+        <NavbarDivider />
+
+        <Popover
+          content={
+            <NumberFormatDropdown
+              numberFormat={numberFormat}
+              onSubmit={handleNumberFormatSubmit}
+              submitDisabled={isARAgingFetching}
+            />
+          }
+          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,
+  withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
+  })),
+)(ARAgingSummaryActionsBar);

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryBody.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import ARAgingSummaryTable from './ARAgingSummaryTable';
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '@/components';
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+/**
+ * A/R Aging summary body.
+ * @returns {JSX.Element}
+ */
+function ARAgingSummaryBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isARAgingLoading } = useARAgingSummaryContext();
+
+  return (
+    <FinancialReportBody>
+      {isARAgingLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <ARAgingSummaryTable organizationName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const ARAgingSummaryBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(ARAgingSummaryBodyJSX);

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryGeneralProvider.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+import { useCustomers } from '@/hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const ARAgingSummaryGeneralContext = createContext();
+
+/**
+ * A/R aging summary general tab provider.
+ */
+function ARAgingSummaryGeneralProvider({ ...props }) {
+  // Retrieve the customers list.
+  const {
+    data: { customers },
+    isLoading: isCustomersLoading,
+  } = useCustomers();
+
+  const provider = {
+    customers,
+    isCustomersLoading,
+  };
+  // Loading state.
+  const loading = isCustomersLoading;
+
+  return loading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <ARAgingSummaryGeneralContext.Provider value={provider} {...props} />
+  );
+}
+
+const useARAgingSummaryGeneralContext = () =>
+  useContext(ARAgingSummaryGeneralContext);
+
+export { ARAgingSummaryGeneralProvider, useARAgingSummaryGeneralContext };

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx

@@ -0,0 +1,137 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import moment from 'moment';
+import * as Yup from 'yup';
+import { FormattedMessage as T } from '@/components';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+
+import FinancialStatementHeader from '@/containers/FinancialStatements/FinancialStatementHeader';
+import ARAgingSummaryHeaderGeneral from './ARAgingSummaryHeaderGeneral';
+import ARAgingSummaryHeaderDimensions from './ARAgingSummaryHeaderDimensions';
+
+import withARAgingSummary from './withARAgingSummary';
+import withARAgingSummaryActions from './withARAgingSummaryActions';
+
+import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+/**
+ * AR Aging Summary Report - Drawer Header.
+ */
+function ARAgingSummaryHeader({
+  // #ownProps
+  pageFilter,
+  onSubmitFilter,
+
+  // #withReceivableAgingSummaryActions
+  toggleARAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
+
+  // #withARAgingSummary
+  isFilterDrawerOpen,
+}) {
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    asDate: Yup.date().required().label('asDate'),
+    agingDaysBefore: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingDaysBefore'),
+    agingPeriods: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingPeriods'),
+  });
+  // Initial values.
+  const defaultValues = {
+    asDate: moment().toDate(),
+    agingDaysBefore: 30,
+    agingPeriods: 3,
+    customersIds: [],
+    branchesIds: [],
+    filterByOption: 'without-zero-balance',
+  };
+
+  // Initial values.
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      asDate: moment(pageFilter.asDate).toDate(),
+    },
+    defaultValues,
+  );
+  // Handle form submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    onSubmitFilter(values);
+    toggleFilterDrawerDisplay(false);
+    setSubmitting(false);
+  };
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    toggleFilterDrawerDisplay(false);
+  };
+  // Handle the drawer close.
+  const handleDrawerClose = () => {
+    toggleFilterDrawerDisplay(false);
+  };
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
+  return (
+    <ARAgingDrawerHeader
+      isOpen={isFilterDrawerOpen}
+      drawerProps={{ onClose: handleDrawerClose }}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          <Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
+            <Tab
+              id="general"
+              title={<T id={'general'} />}
+              panel={<ARAgingSummaryHeaderGeneral />}
+            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<ARAgingSummaryHeaderDimensions />}
+              />
+            )}
+          </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>
+    </ARAgingDrawerHeader>
+  );
+}
+
+export default compose(
+  withARAgingSummaryActions,
+  withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
+  })),
+)(ARAgingSummaryHeader);
+
+const ARAgingDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensions.tsx

@@ -0,0 +1,49 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { BranchMultiSelect, Row, Col } from '@/components';
+import {
+  ARAgingSummaryHeaderDimensionsProvider,
+  useARAgingSummaryHeaderDimensonsContext,
+} from './ARAgingSummaryHeaderDimensionsProvider';
+
+/**
+ * ARAging summary header dimensions.
+ * @returns {JSX.Element}
+ */
+export default function ARAgingSummaryHeaderDimensions() {
+  return (
+    <ARAgingSummaryHeaderDimensionsProvider>
+      <ARAgingSummaryHeaderDimensionsContent />
+    </ARAgingSummaryHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * ARAging summary header dimensions content.
+ * @returns {JSX.Element}
+ */
+function ARAgingSummaryHeaderDimensionsContent() {
+  const { branches } = useARAgingSummaryHeaderDimensonsContext();
+
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
+  return (
+    <Row>
+      <Col xs={4}>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
+      </Col>
+    </Row>
+  );
+}

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensionsProvider.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+import React from 'react';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import { useBranches } from '@/hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const ARAgingSummaryHeaderDimensonsContext = React.createContext();
+
+/**
+ * ARAging summary header dismensions provider.
+ * @returns
+ */
+function ARAgingSummaryHeaderDimensionsProvider({ query, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches(query, {
+    enabled: isBranchFeatureCan,
+    keepPreviousData: true,
+  });
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <ARAgingSummaryHeaderDimensonsContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useARAgingSummaryHeaderDimensonsContext = () =>
+  React.useContext(ARAgingSummaryHeaderDimensonsContext);
+
+export {
+  ARAgingSummaryHeaderDimensionsProvider,
+  useARAgingSummaryHeaderDimensonsContext,
+};

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import React from 'react';
+import { ARAgingSummaryGeneralProvider } from './ARAgingSummaryGeneralProvider';
+import ARAgingSummaryHeaderGeneralContent from './ARAgingSummaryHeaderGeneralContent';
+
+/**
+ * AR Aging Summary - Drawer Header - General Fields - Content.
+ */
+export default function ARAgingSummaryHeaderGeneral() {
+  return (
+    <ARAgingSummaryGeneralProvider>
+      <ARAgingSummaryHeaderGeneralContent />
+    </ARAgingSummaryGeneralProvider>
+  );
+}

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.tsx

@@ -0,0 +1,136 @@
+// @ts-nocheck
+import React from 'react';
+import { FastField, Field } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import {
+  Intent,
+  FormGroup,
+  InputGroup,
+  Position,
+  Classes,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+import {
+  FormattedMessage as T,
+  ContactsMultiSelect,
+  Row,
+  Col,
+  FieldHint,
+} from '@/components';
+import { momentFormatter } from '@/utils';
+import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider';
+import { filterCustomersOptions } from './constants';
+
+/**
+ * AR Aging Summary - Drawer Header - General Fields.
+ */
+export default function ARAgingSummaryHeaderGeneralContent() {
+  // AR Aging summary context.
+  const { customers } = useARAgingSummaryGeneralContext();
+
+  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={'agingDaysBefore'}>
+            {({ 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>
+
+      <Row>
+        <Col xs={5}>
+          <FinancialStatementsFilter
+            items={filterCustomersOptions}
+            label={<T id={'AR_aging_summary.filter_options.label'} />}
+          />
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <Field name="customersIds">
+            {({ form: { setFieldValue }, field: { value } }) => (
+              <FormGroup
+                label={<T id={'specific_customers'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  items={customers}
+                  onItemSelect={(customers) => {
+                    const customersIds = customers.map(
+                      (customer) => customer.id,
+                    );
+                    setFieldValue('customersIds', customersIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
+    </div>
+  );
+}

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.tsx

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React, { useMemo, createContext, useContext } from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useARAgingSummaryReport } from '@/hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const ARAgingSummaryContext = createContext();
+
+/**
+ * A/R aging summary provider.
+ */
+function ARAgingSummaryProvider({ filter, ...props }) {
+  // Transformes the filter from to the url query.
+  const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
+
+  // A/R aging summary sheet context.
+  const {
+    data: ARAgingSummary,
+    isLoading: isARAgingLoading,
+    isFetching: isARAgingFetching,
+    refetch,
+  } = useARAgingSummaryReport(query, { keepPreviousData: true });
+
+  const provider = {
+    ARAgingSummary,
+
+    isARAgingLoading,
+    isARAgingFetching,
+    refetch,
+  };
+
+  return (
+    <FinancialReportPage name={'AR-Aging-Summary'}>
+      <ARAgingSummaryContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+
+const useARAgingSummaryContext = () => useContext(ARAgingSummaryContext);
+
+export { ARAgingSummaryProvider, useARAgingSummaryContext };

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx

@@ -0,0 +1,75 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { TableStyle } from '@/constants';
+import { ReportDataTable, FinancialSheet } from '@/components';
+
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+import { useARAgingSummaryColumns } from './components';
+
+import { tableRowTypesToClassnames } from '@/utils';
+
+/**
+ * AR aging summary table sheet.
+ */
+export default function ReceivableAgingSummaryTable({
+  // #ownProps
+  organizationName,
+}) {
+  // AR aging summary report context.
+  const { ARAgingSummary, isARAgingLoading } = useARAgingSummaryContext();
+
+  // AR aging summary columns.
+  const columns = useARAgingSummaryColumns();
+
+  return (
+    <FinancialSheet
+      companyName={organizationName}
+      sheetType={intl.get('receivable_aging_summary')}
+      asDate={new Date()}
+      loading={isARAgingLoading}
+    >
+      <ARAgingSummaryDataTable
+        columns={columns}
+        data={ARAgingSummary.tableRows}
+        rowClassNames={tableRowTypesToClassnames}
+        noInitialFetch={true}
+        sticky={true}
+        styleName={TableStyle.Constrant}
+      />
+    </FinancialSheet>
+  );
+}
+
+const ARAgingSummaryDataTable = styled(ReportDataTable)`
+  .table {
+    .tbody .tr {
+      .td {
+        border-bottom: 0;
+        padding-top: 0.32rem;
+        padding-bottom: 0.32rem;
+      }
+
+      &:not(.no-results) {
+        .td {
+          border-bottom: 0;
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+        &:not(:first-child) .td {
+          border-top: 1px solid transparent;
+        }
+        &.row_type--total {
+          font-weight: 500;
+
+          .td {
+            border-top: 1px solid #bbb;
+            border-bottom: 3px double #333;
+          }
+        }
+      }
+    }
+  }
+`;

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/common.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import moment from 'moment';
+import { transformToCamelCase, flatObject } from '@/utils';
+
+export const transfromFilterFormToQuery = (form) => {
+  return flatObject(transformToCamelCase(form));
+};
+
+/**
+ * Retrieves the default A/R aging summary query.
+ */
+export const getDefaultARAgingSummaryQuery = () => {
+  return {
+    asDate: moment().endOf('day').format('YYYY-MM-DD'),
+    agingDaysBefore: 30,
+    agingPeriods: 3,
+    customersIds: [],
+    filterByOption: 'without-zero-balance',
+    branchesIds: [],
+  };
+};

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/components.tsx

@@ -0,0 +1,82 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+import { If, FormattedMessage as T } from '@/components';
+import { getColumnWidth } from '@/utils';
+import { Align } from '@/constants';
+
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ * Retrieve AR aging summary columns.
+ */
+export const useARAgingSummaryColumns = () => {
+  const {
+    ARAgingSummary: { tableRows, columns },
+  } = useARAgingSummaryContext();
+
+  const agingColumns = React.useMemo(() => {
+    return columns.map(
+      (agingColumn) =>
+        `${agingColumn.before_days} - ${
+          agingColumn.to_days || intl.get('and_over')
+        }`,
+    );
+  }, [columns]);
+
+  return React.useMemo(
+    () => [
+      {
+        Header: <T id={'customer_name'} />,
+        accessor: 'name',
+        className: 'customer_name',
+        sticky: 'left',
+        width: 240,
+        textOverview: true,
+      },
+      {
+        Header: <T id={'current'} />,
+        accessor: 'current',
+        className: 'current',
+        width: getColumnWidth(tableRows, `current`, {
+          minWidth: 120,
+        }),
+        align: Align.Right
+      },
+      ...agingColumns.map((agingColumn, index) => ({
+        Header: agingColumn,
+        accessor: `aging-${index}`,
+        width: getColumnWidth(tableRows, `aging-${index}`, {
+          minWidth: 120,
+        }),
+        align: Align.Right
+      })),
+      {
+        Header: <T id={'total'} />,
+        id: 'total',
+        accessor: 'total',
+        className: 'total',
+        width: getColumnWidth(tableRows, 'total', {
+          minWidth: 120,
+        }),
+        align: Align.Right
+      },
+    ],
+    [tableRows, agingColumns],
+  );
+};
+
+/**
+ * A/R aging summary sheet loading bar.
+ */
+export function ARAgingSummarySheetLoadingBar() {
+  const { isARAgingFetching } = useARAgingSummaryContext();
+
+  return (
+    <If condition={isARAgingFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/constants.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+
+export const filterCustomersOptions = [
+  {
+    key: 'all-customers',
+    name: intl.get('AR_aging_summary.filter_customers.all_customers'),
+    hint: intl.get('AR_aging_summary.filter_customers.all_customers.hint'),
+  },
+  {
+    key: 'without-zero-balance',
+    name: intl.get('AR_aging_summary.filter_customers.without_zero_balance'),
+    hint: intl.get(
+      'AR_aging_summary.filter_customers.without_zero_balance.hint',
+    ),
+  },
+];

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  getARAgingSummaryFilterDrawer,
+} from '@/store/financialStatement/financialStatements.selectors';
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      ARAgingSummaryFilterDrawer: getARAgingSummaryFilterDrawer(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummaryActions.tsx

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import { toggleARAgingSummaryFilterDrawer } from '@/store/financialStatement/financialStatements.actions';
+
+const mapActionsToProps = (dispatch) => ({
+  toggleARAgingSummaryFilterDrawer: (toggle) => 
+    dispatch(toggleARAgingSummaryFilterDrawer(toggle)),
+});
+
+export default connect(null, mapActionsToProps);