feat: styling item form.

client/src/containers/Items/ItemFormInventorySection.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { FormGroup, Intent, InputGroup, Classes } from '@blueprintjs/core';
+import { AccountsSelectList, ErrorMessage, Col, Row } from 'components';
+import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+import withAccounts from 'containers/Accounts/withAccounts';
+
+import { compose } from 'utils';
+
+/**
+ * Item form inventory sections.
+ */
+function ItemFormInventorySection({
+  errors,
+  touched,
+  setFieldValue,
+  values,
+  getFieldProps,
+
+  accountsList,
+}) {
+  return (
+    <div class="page-form__section page-form__section--inventory">
+      <Row>
+        <Col xs={6}>
+          <h3>
+            <T id={'inventory_information'} />
+          </h3>
+
+          {/*------------- Inventory account ------------- */}
+          <FormGroup
+            label={<T id={'inventory_account'} />}
+            inline={true}
+            intent={
+              errors.inventory_account_id &&
+              touched.inventory_account_id &&
+              Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage
+                {...{ errors, touched }}
+                name="inventory_account_id"
+              />
+            }
+            className={classNames(
+              'form-group--item-inventory_account',
+              'form-group--select-list',
+              Classes.FILL,
+            )}
+          >
+            <AccountsSelectList
+              accounts={accountsList}
+              onAccountSelected={(account) => {
+                setFieldValue('inventory_account_id', account.id);
+              }}
+              defaultSelectText={<T id={'select_account'} />}
+              selectedAccountId={values.inventory_account_id}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={<T id={'opening_stock'} />}
+            className={'form-group--item-stock'}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={errors.stock && Intent.DANGER}
+              {...getFieldProps('stock')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={'Opening average cost'}
+            className={'form-group--item-stock'}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={errors.stock && Intent.DANGER}
+              {...getFieldProps('stock')}
+            />
+          </FormGroup>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+export default compose(
+  withAccounts(({ accountsList }) => ({
+    accountsList,
+  })),
+)(ItemFormInventorySection);