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

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

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import moment from 'moment';
 import * as R from 'ramda';
 
@@ -10,11 +10,10 @@ import CustomersBalanceSummaryHeader from './CustomersBalanceSummaryHeader';
 
 import { CustomerBalanceSummaryBody } from './CustomerBalanceSummaryBody';
 import { CustomersBalanceSummaryProvider } from './CustomersBalanceSummaryProvider';
-import { getDefaultCustomersBalanceQuery } from './utils';
+import { useCustomerBalanceSummaryQuery } from './utils';
 import { CustomersBalanceLoadingBar } from './components';
 import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
 
-
 /**
  * Customers Balance summary.
  */
@@ -22,36 +21,33 @@ function CustomersBalanceSummary({
   // #withCustomersBalanceSummaryActions
   toggleCustomerBalanceFilterDrawer,
 }) {
-  const [filter, setFilter] = useState({
-    ...getDefaultCustomersBalanceQuery(),
-  });
+  const { query, setLocationQuery } = useCustomerBalanceSummaryQuery();
+
   // Handle re-fetch customers balance summary after filter change.
   const handleFilterSubmit = (filter) => {
     const _filter = {
       ...filter,
       asDate: moment(filter.asDate).format('YYYY-MM-DD'),
     };
-    setFilter({ ..._filter });
+    setLocationQuery({ ..._filter });
   };
   // Handle number format.
   const handleNumberFormat = (values) => {
-    setFilter({
+    setLocationQuery({
       ...filter,
       numberFormat: values,
     });
   };
 
   useEffect(
-    () => () => {
-      toggleCustomerBalanceFilterDrawer(false);
-    },
+    () => () => toggleCustomerBalanceFilterDrawer(false),
     [toggleCustomerBalanceFilterDrawer],
   );
 
   return (
-    <CustomersBalanceSummaryProvider filter={filter}>
+    <CustomersBalanceSummaryProvider filter={query}>
       <CustomersBalanceSummaryActionsBar
-        numberFormat={filter?.numberFormat}
+        numberFormat={query?.numberFormat}
         onNumberFormatSubmit={handleNumberFormat}
       />
       <CustomersBalanceLoadingBar />
@@ -59,7 +55,7 @@ function CustomersBalanceSummary({
       <DashboardPageContent>
         <FinancialStatement>
           <CustomersBalanceSummaryHeader
-            pageFilter={filter}
+            pageFilter={query}
             onSubmitFilter={handleFilterSubmit}
           />
           <CustomerBalanceSummaryBody />

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.tsx

@@ -1,17 +1,16 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field } from 'formik';
+import { FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import { Classes, FormGroup, Position, Checkbox } from '@blueprintjs/core';
+import { FormGroup, Position, Checkbox } from '@blueprintjs/core';
 import {
-  ContactsMultiSelect,
   FormattedMessage as T,
   Row,
   Col,
   FieldHint,
+  CustomersMultiSelect,
+  FFormGroup,
 } from '@/components';
-import classNames from 'classnames';
-
 import {
   momentFormatter,
   tansformDateValue,
@@ -86,26 +85,12 @@ export default function CustomersBalanceSummaryGeneralPanelContent() {
 
       <Row>
         <Col xs={5}>
-          <Field name={'customersIds'}>
-            {({
-              form: { setFieldValue },
-              field: { value },
-              meta: { error, touched },
-            }) => (
-              <FormGroup
-                label={<T id={'specific_customers'} />}
-                className={classNames('form-group--select-list', Classes.FILL)}
-              >
-                <ContactsMultiSelect
-                  items={customers}
-                  onItemSelect={(contacts) => {
-                    const customersIds = contacts.map((contact) => contact.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/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import * as Yup from 'yup';
+
 import styled from 'styled-components';
 import moment from 'moment';
 import { Formik, Form } from 'formik';
@@ -13,6 +13,7 @@ import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryAct
 import CustomersBalanceSummaryGeneralPanel from './CustomersBalanceSummaryGeneralPanel';
 
 import { compose, transformToForm } from '@/utils';
+import { getCustomersBalanceQuerySchema } from './utils';
 
 /**
  * Customers balance summary.
@@ -29,9 +30,8 @@ function CustomersBalanceSummaryHeader({
   toggleCustomerBalanceFilterDrawer,
 }) {
   // validation schema.
-  const validationSchema = Yup.object().shape({
-    asDate: Yup.date().required().label('asDate'),
-  });
+  const validationSchema = getCustomersBalanceQuerySchema();
+
   // Default form values.
   const defaultValues = {
     ...pageFilter,

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/utils.tsx

@@ -1,9 +1,59 @@
 // @ts-nocheck
+import { useMemo } from 'react';
+import { castArray } from 'lodash';
 import moment from 'moment';
+import * as Yup from 'yup';
+import { useAppQueryString } from '@/hooks';
+import { getDefaultARAgingSummaryQuery } from '../ARAgingSummary/common';
+import { transformToForm } from '@/utils';
 
 export const getDefaultCustomersBalanceQuery = () => {
   return {
     asDate: moment().endOf('day').format('YYYY-MM-DD'),
     filterByOption: 'with-transactions',
+    customersIds: [],
   };
 };
+
+/**
+ * Retrieves the customers balance query schema.
+ * @returns {Yup}
+ */
+export const getCustomersBalanceQuerySchema = () => {
+  return Yup.object().shape({
+    asDate: Yup.date().required().label('asDate'),
+  });
+};
+
+/**
+ * Parses the customer balance summary query.
+ * @returns
+ */
+const parseCustomersBalanceSummaryQuery = (locationQuery) => {
+  const defaultQuery = getDefaultARAgingSummaryQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+  return {
+    ...transformed,
+
+    // 
+    customersIds: castArray(transformed.customersIds),
+  };
+};
+
+/**
+ *
+ * @returns
+ */
+export const useCustomerBalanceSummaryQuery = () => {
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  const query = useMemo(
+    () => parseCustomersBalanceSummaryQuery(locationQuery),
+    [locationQuery],
+  );
+  return { query, locationQuery, setLocationQuery };
+};