BIG-52: fix customize Report in purchases by items report not working.

BIG-55: fix customize report in inventory valuation report not working.
BIG-56: fix customize report in Inventory item details report not working.

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

@@ -3,14 +3,25 @@ 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';
+import { InventoryItemDetailsHeaderGeneralProvider } from './InventoryItemDetailsHeaderGeneralProvider';
 
 /**
  * Inventory item details header - General panel.
  */
 export default function InventoryItemDetailsHeaderGeneralPanel() {
+  return (
+    <InventoryItemDetailsHeaderGeneralProvider>
+      <InventoryItemDetailsHeaderGeneralPanelContent />
+    </InventoryItemDetailsHeaderGeneralProvider>
+  );
+}
+
+/**
+ * Inventory item details header - General panel - Content.
+ */
+function InventoryItemDetailsHeaderGeneralPanelContent() {
   const { items } = useInventoryItemDetailsContext();
 
   return (
@@ -28,15 +39,7 @@ export default function InventoryItemDetailsHeaderGeneralPanel() {
               <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>
+              ></FormGroup>
             )}
           </Field>
         </Col>

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useItems } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const InventoryItemDetailsHeaderGeneralContext = React.createContext();
+
+/**
+ * Inventory item details provider.
+ */
+function InventoryItemDetailsHeaderGeneralProvider({ ...props }) {
+  // Handle fetching the items based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+    isFetching: isItemsFetching,
+  } = useItems({
+    stringified_filter_roles: JSON.stringify([
+      { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
+    ]),
+    page_size: 10000,
+  });
+
+  const provider = {
+    isItemsFetching,
+    isItemsLoading,
+    items,
+  };
+  // Loading state.
+  const loading = isItemsLoading;
+
+  return loading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <InventoryItemDetailsHeaderGeneralContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+const useInventoryItemDetailsHeaderGeneralContext = () =>
+  React.useContext(InventoryItemDetailsHeaderGeneralContext);
+
+export {
+  InventoryItemDetailsHeaderGeneralProvider,
+  useInventoryItemDetailsHeaderGeneralContext,
+};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useItems, useInventoryItemDetailsReport } from 'hooks/query';
+import { useInventoryItemDetailsReport } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const InventoryItemDetailsContext = React.createContext();
@@ -22,28 +22,12 @@ 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({
-    stringified_filter_roles: JSON.stringify([
-      { fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
-    ]),
-    page_size: 10000,
-  });
-
   const provider = {
     inventoryItemDetails,
     isInventoryItemDetailsFetching,
     isInventoryItemDetailsLoading,
     inventoryItemDetailsRefetch,
 
-    isItemsFetching,
-    isItemsLoading,
-    items,
-
     query,
     filter,
   };