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

client/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js

@@ -64,7 +64,7 @@ function InventoryValuation({
       <InventoryValuationLoadingBar />
 
       <DashboardPageContent>
-        <div class="financial-statement">
+        <div class="financial-statement financial-statement--inventory-valuation">
           <InventoryValuationHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}

client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js

@@ -2,7 +2,6 @@ import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 
@@ -11,7 +10,7 @@ import InventoryValuationHeaderGeneralPanel from './InventoryValuationHeaderGene
 import withInventoryValuation from './withInventoryValuation';
 import withInventoryValuationActions from './withInventoryValuationActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 /**
  * inventory valuation header.
@@ -27,18 +26,23 @@ function InventoryValuationHeader({
   // #withInventoryValuationActions
   toggleInventoryValuationFilterDrawer,
 }) {
-  
-
   // Form validation schema.
   const validationSchema = Yup.object().shape({
-    as_date: Yup.date().required().label('asDate'),
+    asDate: Yup.date().required().label('asDate'),
   });
 
-  // Initial values.
-  const initialValues = {
-    as_date: moment(pageFilter.asDate).toDate(),
+  // Default values.
+  const defaultValues = {
+    asDate: moment().toDate(),
+    itemsIds: [],
   };
+  // Initial values.
+  const initialValues = transformToForm({
+    ...pageFilter,
+    asDate: moment(pageFilter.asDate).toDate(),
+  }, defaultValues);
 
+  // Handle the form of header submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     toggleInventoryValuationFilterDrawer(false);

client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js

@@ -1,20 +1,24 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormGroup, Position } from '@blueprintjs/core';
+import { FormGroup, Position, Classes } from '@blueprintjs/core';
+import classNames from 'classnames';
 import { FormattedMessage as T } from 'components';
-import { Row, Col, FieldHint } from 'components';
+import { ItemsMultiSelect, Row, Col, FieldHint } from 'components';
 import {
   momentFormatter,
   tansformDateValue,
   inputIntent,
   handleDateChange,
 } from 'utils';
+import { useInventoryValuationContext } from './InventoryValuationProvider';
 
 /**
- * inventory valuation - Drawer Header - General panel.
+ * Inventory valuation - Drawer Header - General panel.
  */
 export default function InventoryValuationHeaderGeneralPanel() {
+  const { items } = useInventoryValuationContext();
+
   return (
     <div>
       <Row>
@@ -42,6 +46,31 @@ export default function InventoryValuationHeaderGeneralPanel() {
           </FastField>
         </Col>
       </Row>
+
+      <Row>
+        <Col xs={5}>
+          <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/InventoryValuation/InventoryValuationProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useInventoryValuation } from 'hooks/query';
+import { useInventoryValuation, useItems } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const InventoryValuationContext = React.createContext();
@@ -20,11 +20,23 @@ function InventoryValuationProvider({ query, ...props }) {
     },
   );
 
+  // Handle fetching the items based on the given query.
+  const {
+    data: { items },
+    isLoading: isItemsLoading,
+    isFetching: isItemsFetching,
+  } = useItems({ page_size: 10000 });
+
+  // Provider data.
   const provider = {
     inventoryValuation,
     isLoading,
     isFetching,
     refetchSheet: refetch,
+
+    items,
+    isItemsFetching,
+    isItemsLoading
   };
 
   return (