fix: Filter financial reports by items, customers or vendors.

client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js

@@ -10,7 +10,7 @@ import withVendorsBalanceSummary from './withVendorsBalanceSummary';
 import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions';
 import VendorsBalanceSummaryHeaderGeneral from './VendorsBalanceSummaryHeaderGeneral';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * Vendors balance summary drawer header.
@@ -32,10 +32,15 @@ function VendorsBalanceSummaryHeader({
   });
 
   // filter form initial values.
-  const initialValues = {
+  const defaultValues = {
+    asDate: moment().toDate(),
+    vendorsIds: [],
+  };
+  // Initial form values.
+  const initialValues = transformToForm({
     ...pageFilter,
     asDate: moment(pageFilter.asDate).toDate(),
-  };
+  }, defaultValues);
 
   // handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {

client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { Field, FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
+import classNames from 'classnames';
 import { FormGroup, Position, Classes, Checkbox } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { ContactsMultiSelect, FormattedMessage as T } from 'components';
 import { Row, Col, FieldHint } from 'components';
 import {
   momentFormatter,
@@ -10,11 +11,14 @@ import {
   inputIntent,
   handleDateChange,
 } from 'utils';
+import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
 
 /**
  * Vendors balance header -general panel.
  */
 export default function VendorsBalanceSummaryHeaderGeneral() {
+  const { vendors } = useVendorsBalanceSummaryContext();
+
   return (
     <div>
       <Row>
@@ -42,6 +46,7 @@ export default function VendorsBalanceSummaryHeaderGeneral() {
           </FastField>
         </Col>
       </Row>
+
       <Row>
         <Col xs={5}>
           <FastField name={'percentage'} type={'checkbox'}>
@@ -59,6 +64,31 @@ export default function VendorsBalanceSummaryHeaderGeneral() {
           </FastField>
         </Col>
       </Row>
+
+      <Row>
+        <Col xs={4}>
+          <Field name={'vendorsIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'specific_vendors'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ContactsMultiSelect
+                  onContactSelect={(contactsIds) => {
+                    setFieldValue('vendorsIds', contactsIds);
+                  }}
+                  contacts={vendors}
+                  contactsSelected={value}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
     </div>
   );
 }

client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useVendorsBalanceSummaryReport } from 'hooks/query';
+import { useVendorsBalanceSummaryReport, useVendors } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const VendorsBalanceSummaryContext = React.createContext();
@@ -13,6 +13,7 @@ function VendorsBalanceSummaryProvider({ filter, ...props }) {
     filter,
   ]);
 
+  // Fetching vendors balance summary report based on the given query.
   const {
     data: VendorBalanceSummary,
     isLoading: isVendorsBalanceLoading,
@@ -22,10 +23,23 @@ function VendorsBalanceSummaryProvider({ filter, ...props }) {
     keepPreviousData: true,
   });
 
+  // Fetch vendors list with pagination meta.
+  const {
+    data: { vendors },
+    isLoading: isVendorsLoading,
+    isFetching: isVendorsFetching,
+  } = useVendors({ page_size: 1000000 });
+
+  // Provider.
   const provider = {
     VendorBalanceSummary,
     isVendorsBalanceLoading,
     isVendorsBalanceFetching,
+
+    vendors,
+    isVendorsFetching,
+    isVendorsLoading,
+
     refetch,
   };