chrone: sperate client and server to different repos.

src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { Field } from 'formik';
+import {
+  Row,
+  Col,
+  FormattedMessage as T,
+  ItemsMultiSelect,
+} from '../../../components';
+import classNames from 'classnames';
+import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+
+import {
+  PurchasesByItemsGeneralPanelProvider,
+  usePurchaseByItemsGeneralPanelContext,
+} from './PurchasesByItemsGeneralPanelProvider';
+
+/**
+ *
+ */
+export default function PurchasesByItemsGeneralPanel() {
+  return (
+    <PurchasesByItemsGeneralPanelProvider>
+      <PurchasesByItemsGeneralPanelContent />
+    </PurchasesByItemsGeneralPanelProvider>
+  );
+}
+
+/**
+ * Purchases by items - Drawer header - General panel.
+ */
+function PurchasesByItemsGeneralPanelContent() {
+  const { items } = usePurchaseByItemsGeneralPanelContext();
+
+  return (
+    <div>
+      <FinancialStatementDateRange />
+
+      <Row>
+        <Col xs={4}>
+          <Field name={'itemsIds'}>
+            {({ form: { setFieldValue } }) => (
+              <FormGroup
+                label={<T id={'Specific items'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+              >
+                <ItemsMultiSelect
+                  items={items}
+                  onItemSelect={(items) => {
+                    const itemsIds = items.map((item) => item.id);
+                    setFieldValue('itemsIds', itemsIds);
+                  }}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
+    </div>
+  );
+}