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

client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js

@@ -33,7 +33,7 @@ function InventoryItemDetails({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
     toDate: moment().endOf('year').format('YYYY-MM-DD'),
   });
-
+  // Handle filter submit.
   const handleFilterSubmit = (filter) => {
     const _filter = {
       ...filter,
@@ -61,10 +61,14 @@ function InventoryItemDetails({
       />
       <InventoryItemDetailsLoadingBar />
       <InventoryItemDetailsAlerts />
-      
+
       <DashboardPageContent>
         <FinancialStatement>
-          <div className={'financial-statement--inventory-details'}>
+          <div
+            className={
+              'financial-statement financial-statement--inventory-details'
+            }
+          >
             <InventoryItemDetailsHeader
               pageFilter={filter}
               onSubmitFilter={handleFilterSubmit}

client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js

@@ -12,7 +12,7 @@ import InventoryItemDetailsHeaderGeneralPanel from './InventoryItemDetailsHeader
 import withInventoryItemDetails from './withInventoryItemDetails';
 import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * Inventory item details header.
@@ -21,20 +21,25 @@ function InventoryItemDetailsHeader({
   // #ownProps
   onSubmitFilter,
   pageFilter,
-  //#withInventoryItemDetails
+  // #withInventoryItemDetails
   isFilterDrawerOpen,
 
-  //#withInventoryItemDetailsActions
+  // #withInventoryItemDetailsActions
   toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
 }) {
-  
+  // Default form values.
+  const defaultValues = {
+    fromDate: moment().toDate(),
+    toDate: moment().toDate(),
+    itemsIds: [],
+  };
 
-  //Filter form initial values.
-  const initialValues = {
+  // Filter form initial values.
+  const initialValues = transformToForm({
     ...pageFilter,
     fromDate: moment(pageFilter.fromDate).toDate(),
     toDate: moment(pageFilter.toDate).toDate(),
-  };
+  }, defaultValues);
 
   // Validation schema.
   const validationSchema = Yup.object().shape({
@@ -56,9 +61,7 @@ function InventoryItemDetailsHeader({
   };
 
   // Handle drawer close action.
-  const handleDrawerClose = () => {
-    toggleFilterDrawer(false);
-  };
+  const handleDrawerClose = () => { toggleFilterDrawer(false); };
   
   return (
     <FinancialStatementHeader

client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js

@@ -1,13 +1,46 @@
 import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { Field } from 'formik';
+import { Row, Col, FormattedMessage as T } from 'components';
+import { ItemsMultiSelect } from 'components';
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
 
 /**
  * Inventory item details header - General panel.
  */
 export default function InventoryItemDetailsHeaderGeneralPanel() {
+  const { items } = useInventoryItemDetailsContext();
+
   return (
     <div>
       <FinancialStatementDateRange />
+
+      <Row>
+        <Col xs={4}>
+          <Field name={'itemsIds'}>
+            {({
+              form: { setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'Specific items'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ItemsMultiSelect
+                  items={items}
+                  selectedItems={value}
+                  onItemSelect={(itemsIds) => {
+                    setFieldValue('itemsIds', itemsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
     </div>
   );
 }

client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useInventoryItemDetailsReport } from 'hooks/query';
+import { useItems, useInventoryItemDetailsReport } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const InventoryItemDetailsContext = React.createContext();
@@ -14,7 +14,7 @@ function InventoryItemDetailsProvider({ filter, ...props }) {
     [filter],
   );
 
-  // fetch inventory item details.
+  // Fetching inventory item details report based on the givne query.
   const {
     data: inventoryItemDetails,
     isFetching: isInventoryItemDetailsFetching,
@@ -22,11 +22,23 @@ function InventoryItemDetailsProvider({ filter, ...props }) {
     refetch: inventoryItemDetailsRefetch,
   } = useInventoryItemDetailsReport(query, { keepPreviousData: true });
 
+  // Handle fetching the items based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+    isFetching: isItemsFetching,
+  } = useItems({ page_size: 10000 });
+
   const provider = {
     inventoryItemDetails,
     isInventoryItemDetailsFetching,
     isInventoryItemDetailsLoading,
     inventoryItemDetailsRefetch,
+
+    isItemsFetching,
+    isItemsLoading,
+    items,
+
     query,
     filter,
   };