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/APAgingSummary/APAgingSummaryHeaderGeneralContent.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { FastField, Field } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import {
+  Intent,
+  FormGroup,
+  InputGroup,
+  Position,
+  Classes,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import {
+  FormattedMessage as T,
+  ContactsMultiSelect,
+  Row,
+  Col,
+  FieldHint,
+} from 'components';
+import { useAPAgingSummaryGeneralContext } from './APAgingSummaryGeneralProvider';
+import {
+  momentFormatter,
+  tansformDateValue,
+  inputIntent,
+  handleDateChange,
+} from 'utils';
+
+/**
+ * AP Aging Summary - Drawer Header - General panel - Content.
+ */
+export default function APAgingSummaryHeaderGeneralContent() {
+  const { vendors } = useAPAgingSummaryGeneralContext();
+
+  return (
+    <div>
+      <Row>
+        <Col xs={5}>
+          <FastField name={'asDate'}>
+            {({ form, field: { value }, meta: { error } }) => (
+              <FormGroup
+                label={<T id={'as_date'} />}
+                labelInfo={<FieldHint />}
+                fill={true}
+                intent={inputIntent({ error })}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={tansformDateValue(value)}
+                  onChange={handleDateChange((selectedDate) => {
+                    form.setFieldValue('asDate', selectedDate);
+                  })}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  minimal={true}
+                  fill={true}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FastField name={'agingDaysBefore'}>
+            {({ field, meta: { error } }) => (
+              <FormGroup
+                label={<T id={'aging_before_days'} />}
+                labelInfo={<FieldHint />}
+                intent={inputIntent({ error })}
+              >
+                <InputGroup intent={error && Intent.DANGER} {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={5}>
+          <FastField name={'agingPeriods'}>
+            {({ field, meta: { error } }) => (
+              <FormGroup
+                label={<T id={'aging_periods'} />}
+                labelInfo={<FieldHint />}
+                intent={inputIntent({ error })}
+              >
+                <InputGroup intent={error && Intent.DANGER} {...field} />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <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
+                  defaultText={<T id={'all_vendors'} />}
+                  contacts={vendors}
+                  contactsSelected={value}
+                  onContactSelect={(contactsIds) => {
+                    setFieldValue('vendorsIds', contactsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
+    </div>
+  );
+}