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

client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js

@@ -12,7 +12,7 @@ import VendorsTransactionsHeaderGeneralPanel from './VendorsTransactionsHeaderGe
 import withVendorsTransaction from './withVendorsTransaction';
 import withVendorsTransactionsActions from './withVendorsTransactionsActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * Vendors transactions header.
@@ -29,14 +29,19 @@ function VendorsTransactionsHeader({
   //#withVendorsTransactionsActions
   toggleVendorsTransactionsFilterDrawer: toggleFilterDrawer,
 }) {
-  
+  // Default form values.
+  const defaultValues = {
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
+    vendorsIds: [],
+  };
 
-  // Filter form initial values.
-  const initialValues = {
+  // Initial form values.
+  const initialValues = transformToForm({
     ...pageFilter,
     fromDate: moment(pageFilter.fromDate).toDate(),
     toDate: moment(pageFilter.toDate).toDate(),
-  };
+  }, defaultValues);
 
   // Validation schema.
   const validationSchema = Yup.object().shape({
@@ -57,9 +62,7 @@ function VendorsTransactionsHeader({
   };
 
   // Handle drawer close action.
-  const handleDrawerClose = () => {
-    toggleFilterDrawer(false);
-  };
+  const handleDrawerClose = () => { toggleFilterDrawer(false); };
 
   return (
     <FinancialStatementHeader

client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js

@@ -1,13 +1,42 @@
 import React from 'react';
+import { Field } from 'formik';
+import classNames from 'classnames';
+import { Classes, FormGroup } from '@blueprintjs/core';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import { Row, Col } from 'components';
+import { ContactsMultiSelect, FormattedMessage as T } from 'components';
+import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 
 /**
  * Vendors transactions header - General panel.
  */
 export default function VendorsTransactionsHeaderGeneralPanel() {
+  const { vendors } = useVendorsTransactionsContext();
+
   return (
     <div>
       <FinancialStatementDateRange />
+
+      <Row>
+        <Col xs={5}>
+          <Field name={'vendorsIds'}>
+            {({ form: { setFieldValue }, field: { value } }) => (
+              <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/VendorsTransactions/VendorsTransactionsProvider.js

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useVendorsTransactionsReport } from 'hooks/query';
+import { useVendorsTransactionsReport, useVendors } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const VendorsTransactionsContext = createContext();
@@ -11,6 +11,7 @@ const VendorsTransactionsContext = createContext();
 function VendorsTransactionsProvider({ filter, ...props }) {
   const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
 
+  // Fetch vendors transactions based on the given query.
   const {
     data: vendorsTransactions,
     isFetching: isVendorsTransactionFetching,
@@ -18,10 +19,22 @@ function VendorsTransactionsProvider({ filter, ...props }) {
     refetch,
   } = useVendorsTransactionsReport(query, { keepPreviousData: true });
 
+  // Fetch vendors list based on the given query.
+  const {
+    data: { vendors },
+    isLoading: isVendorsLoading,
+    isFetching: isVendorsFetching,
+  } = useVendors({ page_size: 100000 });
+
   const provider = {
     vendorsTransactions,
     isVendorsTransactionsLoading,
     isVendorsTransactionFetching,
+
+    vendors,
+    isVendorsLoading,
+    
+    isVendorsFetching,
     refetch,
     filter,
     query,