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

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

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import moment from 'moment';
 
 import GeneralLedgerHeader from './GeneralLedgerHeader';
@@ -41,10 +41,8 @@ function GeneralLedger({
   );
 
   // Hide the filter drawer once the page unmount.
-  React.useEffect(
-    () => () => {
-      toggleGeneralLedgerFilterDrawer(false);
-    },
+  useEffect(
+    () => () => toggleGeneralLedgerFilterDrawer(false),
     [toggleGeneralLedgerFilterDrawer],
   );
 

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx

@@ -2,12 +2,14 @@
 import React from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
-import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 
 import { FormattedMessage as T } from '@/components';
-import { getDefaultGeneralLedgerQuery } from './common';
+import {
+  getDefaultGeneralLedgerQuery,
+  getGeneralLedgerQuerySchema,
+} from './common';
 import { compose, transformToForm, saveInvoke } from '@/utils';
 
 import FinancialStatementHeader from '../FinancialStatementHeader';
@@ -39,6 +41,7 @@ function GeneralLedgerHeader({
   // Initial values.
   const initialValues = transformToForm(
     {
+      ...defaultValues,
       ...pageFilter,
       fromDate: moment(pageFilter.fromDate).toDate(),
       toDate: moment(pageFilter.toDate).toDate(),
@@ -46,11 +49,8 @@ function GeneralLedgerHeader({
     defaultValues,
   );
   // Validation schema.
-  const validationSchema = Yup.object().shape({
-    dateRange: Yup.string().optional(),
-    fromDate: Yup.date().required(),
-    toDate: Yup.date().min(Yup.ref('fromDate')).required(),
-  });
+  const validationSchema = getGeneralLedgerQuerySchema();
+
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     saveInvoke(onSubmitFilter, values);
@@ -68,6 +68,7 @@ function GeneralLedgerHeader({
   // Detarmines the feature whether is enabled.
   const { featureCan } = useFeatureCan();
 
+  // Detarmine if the feature is enabled.
   const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
+import * as Yup from 'yup';
 import { castArray } from 'lodash';
 
 import { useAppQueryString } from '@/hooks';
@@ -26,15 +27,25 @@ export const filterAccountsOptions = [
 /**
  * Retrieves the default general ledger query.
  */
-export const getDefaultGeneralLedgerQuery = () => {
-  return {
-    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
-    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    basis: 'accrual',
-    filterByOption: 'with-transactions',
-    branchesIds: [],
-    accountsIds: [],
-  };
+export const getDefaultGeneralLedgerQuery = () => ({
+  fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+  toDate: moment().endOf('year').format('YYYY-MM-DD'),
+  basis: 'accrual',
+  filterByOption: 'with-transactions',
+  branchesIds: [],
+  accountsIds: [],
+});
+
+/**
+ * Retrieves the validation schema of general ledger.
+ * @returns {Yup}
+ */
+export const getGeneralLedgerQuerySchema = () => {
+  return Yup.object().shape({
+    dateRange: Yup.string().optional(),
+    fromDate: Yup.date().required(),
+    toDate: Yup.date().min(Yup.ref('fromDate')).required(),
+  });
 };
 
 /**