fix(webapp): filter by customers, vendors and items in reports do not work

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

@@ -2,7 +2,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
 
-
 import ARAgingSummaryHeader from './ARAgingSummaryHeader';
 import ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar';
 
@@ -13,7 +12,7 @@ import { ARAgingSummaryBody } from './ARAgingSummaryBody';
 
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 
-import { getDefaultARAgingSummaryQuery } from './common';
+import { useARAgingSummaryQuery } from './common';
 import { compose } from '@/utils';
 
 /**
@@ -23,9 +22,7 @@ function ReceivableAgingSummarySheet({
   // #withARAgingSummaryActions
   toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
 }) {
-  const [filter, setFilter] = useState({
-    ...getDefaultARAgingSummaryQuery(),
-  });
+  const { query, setLocationQuery } = useARAgingSummaryQuery();
 
   // Handle filter submit.
   const handleFilterSubmit = useCallback((filter) => {
@@ -33,25 +30,23 @@ function ReceivableAgingSummarySheet({
       ...filter,
       asDate: moment(filter.asDate).format('YYYY-MM-DD'),
     };
-    setFilter(_filter);
+    setLocationQuery(_filter);
   }, []);
 
   // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
-    setFilter({ ...filter, numberFormat });
+    setLocationQuery({ ...query, numberFormat });
   };
   // Hide the filter drawer once the page unmount.
   useEffect(
-    () => () => {
-      toggleDisplayFilterDrawer(false);
-    },
+    () => () => toggleDisplayFilterDrawer(false),
     [toggleDisplayFilterDrawer],
   );
 
   return (
-    <ARAgingSummaryProvider filter={filter}>
+    <ARAgingSummaryProvider filter={query}>
       <ARAgingSummaryActionsBar
-        numberFormat={filter.numberFormat}
+        numberFormat={query.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <ARAgingSummarySheetLoadingBar />
@@ -59,7 +54,7 @@ function ReceivableAgingSummarySheet({
       <DashboardPageContent>
         <FinancialStatement>
           <ARAgingSummaryHeader
-            pageFilter={filter}
+            pageFilter={query}
             onSubmitFilter={handleFilterSubmit}
           />
           <ARAgingSummaryBody />

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

@@ -2,7 +2,6 @@
 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';
@@ -17,6 +16,10 @@ import withARAgingSummaryActions from './withARAgingSummaryActions';
 import { compose, transformToForm } from '@/utils';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
+import {
+  getARAgingSummaryQuerySchema,
+  getDefaultARAgingSummaryQuery,
+} from './common';
 
 /**
  * AR Aging Summary Report - Drawer Header.
@@ -33,32 +36,15 @@ function ARAgingSummaryHeader({
   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'),
-  });
+  const validationSchema = getARAgingSummaryQuerySchema();
+
   // Initial values.
-  const defaultValues = {
-    asDate: moment().toDate(),
-    agingDaysBefore: 30,
-    agingPeriods: 3,
-    customersIds: [],
-    branchesIds: [],
-    filterByOption: 'without-zero-balance',
-  };
+  const defaultValues = getDefaultARAgingSummaryQuery();
 
   // Initial values.
   const initialValues = transformToForm(
     {
+      ...defaultValues,
       ...pageFilter,
       asDate: moment(pageFilter.asDate).toDate(),
     },
@@ -80,7 +66,6 @@ function ARAgingSummaryHeader({
   };
   // Detarmines the feature whether is enabled.
   const { featureCan } = useFeatureCan();
-
   const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (

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

@@ -2,22 +2,16 @@
 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 { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import {
   FormattedMessage as T,
-  ContactsMultiSelect,
   Row,
   Col,
   FieldHint,
+  FInputGroup,
+  FFormGroup,
+  CustomersMultiSelect,
 } from '@/components';
 import { momentFormatter } from '@/utils';
 import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider';
@@ -81,22 +75,13 @@ export default function ARAgingSummaryHeaderGeneralContent() {
 
       <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>
+          <FFormGroup
+            name={'agingPeriods'}
+            label={<T id={'aging_periods'} />}
+            labelInfo={<FieldHint />}
+          >
+            <FInputGroup name={'agingPeriods'} medium={true} />
+          </FFormGroup>
         </Col>
       </Row>
 
@@ -111,24 +96,12 @@ export default function ARAgingSummaryHeaderGeneralContent() {
 
       <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>
+          <FFormGroup
+            name="customersIds"
+            label={<T id={'specific_customers'} />}
+          >
+            <CustomersMultiSelect name="customersIds" items={customers} />
+          </FFormGroup>
         </Col>
       </Row>
     </div>

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

@@ -1,6 +1,10 @@
 // @ts-nocheck
 import moment from 'moment';
-import { transformToCamelCase, flatObject } from '@/utils';
+import * as Yup from 'yup';
+import { transformToCamelCase, flatObject, transformToForm } from '@/utils';
+import { useAppQueryString } from '@/hooks';
+import { useMemo } from 'react';
+import { castArray } from 'lodash';
 
 export const transfromFilterFormToQuery = (form) => {
   return flatObject(transformToCamelCase(form));
@@ -19,3 +23,56 @@ export const getDefaultARAgingSummaryQuery = () => {
     branchesIds: [],
   };
 };
+
+/**
+ * Retrieves the AR aging summary query schema.
+ * @returns {Yup}
+ */
+export const getARAgingSummaryQuerySchema = () => {
+  return 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'),
+  });
+};
+
+/**
+ *
+ * @param locationQuery
+ * @returns
+ */
+const parseARAgingSummaryQuery = (locationQuery) => {
+  const defaultQuery = getDefaultARAgingSummaryQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+  return {
+    ...transformed,
+
+    // 
+    branchesIds: castArray(transformed.branchesIds),
+  };
+};
+
+/**
+ *
+ */
+export const useARAgingSummaryQuery = () => {
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  const query = useMemo(
+    () => parseARAgingSummaryQuery(locationQuery),
+    [locationQuery],
+  );
+  return { query, locationQuery, setLocationQuery };
+};