From f042e23e6c7a504fcd4ab0b92c9a786cb23c3ee2 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Tue, 12 Jan 2021 15:37:25 +0200
Subject: [PATCH 1/6] fix: remove opening quantity & cost & date from item.

---
 client/src/containers/Items/ItemForm.js       |  3 -
 .../src/containers/Items/ItemForm.schema.js   | 20 ------
 .../Items/ItemFormInventorySection.js         | 71 -------------------
 3 files changed, 94 deletions(-)

diff --git a/client/src/containers/Items/ItemForm.js b/client/src/containers/Items/ItemForm.js
index b30b6c3ee..89af435d6 100644
--- a/client/src/containers/Items/ItemForm.js
+++ b/client/src/containers/Items/ItemForm.js
@@ -43,9 +43,6 @@ const defaultInitialValues = {
   category_id: '',
   sellable: 1,
   purchasable: true,
-  opening_quantity: '',
-  opening_cost: '',
-  opening_date: moment(new Date()).format('YYYY-MM-DD'),
 };
 
 /**
diff --git a/client/src/containers/Items/ItemForm.schema.js b/client/src/containers/Items/ItemForm.schema.js
index 963b12f12..8eade519d 100644
--- a/client/src/containers/Items/ItemForm.schema.js
+++ b/client/src/containers/Items/ItemForm.schema.js
@@ -61,26 +61,6 @@ const Schema = Yup.object().shape({
   stock: Yup.string() || Yup.boolean(),
   sellable: Yup.boolean().required(),
   purchasable: Yup.boolean().required(),
-  opening_cost: Yup.number().when(['opening_quantity'], {
-    is: (value) => value,
-    then: Yup.number()
-      .min(0)
-      .required()
-      .label(formatMessage({ id: 'opening_cost_' })),
-    otherwise: Yup.number().nullable(),
-  }),
-  opening_quantity: Yup.number()
-    .integer()
-    .min(1)
-    .nullable()
-    .label(formatMessage({ id: 'opening_quantity_' })),
-  opening_date: Yup.date().when(['opening_quantity', 'opening_cost'], {
-    is: (quantity, cost) => !isBlank(quantity) && !isBlank(cost),
-    then: Yup.date()
-      .required()
-      .label(formatMessage({ id: 'opening_date_' })),
-    otherwise: Yup.date().nullable(),
-  }),
 });
 
 export const transformItemFormData = (item, defaultValue) => {
diff --git a/client/src/containers/Items/ItemFormInventorySection.js b/client/src/containers/Items/ItemFormInventorySection.js
index f595635cc..efb2762fe 100644
--- a/client/src/containers/Items/ItemFormInventorySection.js
+++ b/client/src/containers/Items/ItemFormInventorySection.js
@@ -65,77 +65,6 @@ function ItemFormInventorySection({ accountsList, baseCurrency }) {
               </FormGroup>
             )}
           </FastField>
-
-          {/*------------- Opening quantity ------------- */}
-          <FastField name={'opening_quantity'}>
-            {({ field, meta: { touched, error } }) => (
-              <FormGroup
-                label={<T id={'opening_quantity'} />}
-                labelInfo={<Hint />}
-                className={'form-group--opening_quantity'}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'opening_quantity'} />}
-                inline={true}
-              >
-                <InputGroup medium={true} {...field} />
-              </FormGroup>
-            )}
-          </FastField>
-
-          {/*------------- Opening date ------------- */}
-          <FastField name={'opening_date'}>
-            {({ form, field: { value }, meta: { touched, error } }) => (
-              <FormGroup
-                label={<T id={'opening_date'} />}
-                labelInfo={<Hint />}
-                className={classNames(
-                  'form-group--select-list',
-                  'form-group--opening_date',
-                  CLASSES.FILL,
-                )}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'opening_date'} />}
-                inline={true}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  value={tansformDateValue(value)}
-                  onChange={handleDateChange((value) => {
-                    form.setFieldValue('opening_date', value);
-                  })}
-                  helperText={<ErrorMessage name={'opening_date'} />}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
-
-        {/*------------- Opening cost ------------- */}
-        <Col xs={6}>
-          <FastField name={'opening_cost'}>
-            {({ form, field: { value }, meta: { touched, error } }) => (
-              <FormGroup
-                label={<T id={'opening_average_cost'} />}
-                labelInfo={<Hint />}
-                className={'form-group--opening_cost'}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'opening_cost'} />}
-                inline={true}
-              >
-                <ControlGroup>
-                  <InputPrependText text={baseCurrency} />
-                  <MoneyInputGroup
-                    value={value}
-                    inputGroupProps={{ fill: true }}
-                    onChange={(unformattedValue) => {
-                      form.setFieldValue('opening_cost', unformattedValue);
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </FastField>
         </Col>
       </Row>
     </div>

From 244a32e5fd8eb633572fd84d0a033226ec87f7fd Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Wed, 13 Jan 2021 07:14:38 +0200
Subject: [PATCH 2/6] feat: adjustments.

---
 .../DecrementAdjustmentFields.js              |  46 ++-
 .../IncrementAdjustmentFields.js              |  46 ++-
 .../InventoryAdjustmentFloatingActions.js     |  51 ++++
 .../InventoryAdjustmentForm.schema.js         |  19 +-
 .../InventoryAdjustmentFormDialogContent.js   |  66 ++--
 .../InventoryAdjustmentFormDialogFields.js    | 284 ++++++++----------
 .../InventoryAdjustmentFormDialog/index.js    |   2 +-
 .../InventoryAdjustmentFormDialog/utils.js    |  20 ++
 .../Items/InventoryAdjustmentDataTable.js     | 125 ++++++--
 .../Items/InventoryAdjustmentList.js          |  63 +++-
 client/src/containers/Items/ItemsDataTable.js |  19 +-
 .../Items/withInventoryAdjustmentActions.js   |   2 +-
 .../Items/withInventoryAdjustments.js         |  30 ++
 client/src/lang/en/index.js                   |   9 +-
 .../inventoryAdjustment.actions.js            |  13 +-
 .../inventoryAdjustment.reducer.js            |   5 -
 .../inventoryAdjustment.selector.js           |  52 ++++
 .../inventoryAdjustment.type.js               |   2 +-
 18 files changed, 582 insertions(+), 272 deletions(-)
 create mode 100644 client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFloatingActions.js
 create mode 100644 client/src/containers/Dialogs/InventoryAdjustmentFormDialog/utils.js

diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js
index 85c3c0f2c..56564d374 100644
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js
@@ -1,21 +1,23 @@
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
-import { FormGroup, InputGroup } from '@blueprintjs/core';
-import { Row, Col, FieldRequiredHint } from 'components';
+import { sumBy, subtract, add } from 'lodash';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FormGroup, InputGroup, Intent } from '@blueprintjs/core';
 import { inputIntent } from 'utils';
+import { Row, Col, If, FieldRequiredHint } from 'components';
 import { FormattedMessage as T } from 'react-intl';
+import { calculate } from './utils';
 
 function DecrementAdjustmentFields() {
   return (
     <Row>
       {/*------------ Quantity on hand  -----------*/}
       <Col sm={3}>
-        <FastField name={'quantity'}>
+        <FastField name={'quantity_on_hand'}>
           {({ field, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'qty_on_hand'} />}
               intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="quantity" />}
+              helperText={<ErrorMessage name="quantity_on_hand" />}
             >
               <InputGroup disabled={true} medium={'true'} {...field} />
             </FormGroup>
@@ -24,15 +26,24 @@ function DecrementAdjustmentFields() {
       </Col>
       {/*------------ Decrement -----------*/}
       <Col sm={2}>
-        <FastField name={'decrement'}>
-          {({ field, meta: { error, touched } }) => (
+        <FastField name={'quantity'}>
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
             <FormGroup
               label={<T id={'decrement'} />}
               intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="decrement" />}
+              helperText={<ErrorMessage name="quantity" />}
               fill={true}
             >
-              <InputGroup medium={'true'} {...field} />
+              <InputGroup
+                {...field}
+                onBlur={(event) => {
+                  setFieldValue('new_quantity', calculate(values, field.value));
+                }}
+              />
             </FormGroup>
           )}
         </FastField>
@@ -40,13 +51,26 @@ function DecrementAdjustmentFields() {
       {/*------------ New quantity -----------*/}
       <Col sm={4}>
         <FastField name={'new_quantity'}>
-          {({ field, meta: { error, touched } }) => (
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
             <FormGroup
               label={<T id={'new_quantity'} />}
               intent={inputIntent({ error, touched })}
               helperText={<ErrorMessage name="new_quantity" />}
             >
-              <InputGroup medium={'true'} {...field} />
+              <InputGroup
+                medium={'true'}
+                {...field}
+                onBlur={(event) => {
+                  setFieldValue(
+                    'quantity',
+                    subtract(field.value, values.quantity_on_hand),
+                  );
+                }}
+              />
             </FormGroup>
           )}
         </FastField>
diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js
index 4a667e94d..558a58a9f 100644
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js
@@ -1,21 +1,23 @@
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { add, sumBy, subtract } from 'lodash';
 import { FormGroup, InputGroup, Intent } from '@blueprintjs/core';
 import { Row, Col, FieldRequiredHint } from 'components';
 import { inputIntent } from 'utils';
 import { FormattedMessage as T } from 'react-intl';
+import { calculate } from './utils';
 
 function IncrementAdjustmentFields() {
   return (
     <Row>
       {/*------------ Quantity on hand  -----------*/}
       <Col sm={3}>
-        <FastField name={'quantity'}>
+        <FastField name={'quantity_on_hand'}>
           {({ field, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'qty_on_hand'} />}
               intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="quantity" />}
+              helperText={<ErrorMessage name="quantity_on_hand" />}
             >
               <InputGroup disabled={true} medium={'true'} {...field} />
             </FormGroup>
@@ -24,15 +26,28 @@ function IncrementAdjustmentFields() {
       </Col>
       {/*------------ Increment -----------*/}
       <Col sm={2}>
-        <FastField name={'increment'}>
-          {({ field, meta: { error, touched } }) => (
+        <FastField name={'quantity'}>
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
             <FormGroup
               label={<T id={'increment'} />}
               intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="increment" />}
+              helperText={<ErrorMessage name="quantity" />}
               fill={true}
             >
-              <InputGroup medium={'true'} {...field} />
+              <InputGroup
+                medium={'true'}
+                {...field}
+                onBlur={(event) => {
+                  setFieldValue(
+                    'new_quantity',
+                    calculate(values, event.currentTarget.value),
+                  );
+                }}
+              />
             </FormGroup>
           )}
         </FastField>
@@ -54,13 +69,26 @@ function IncrementAdjustmentFields() {
       {/*------------ New quantity -----------*/}
       <Col sm={4}>
         <FastField name={'new_quantity'}>
-          {({ field, meta: { error, touched } }) => (
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
             <FormGroup
               label={<T id={'new_quantity'} />}
               intent={inputIntent({ error, touched })}
               helperText={<ErrorMessage name="new_quantity" />}
             >
-              <InputGroup medium={'true'} {...field} />
+              <InputGroup
+                medium={'true'}
+                {...field}
+                onBlur={(event) => {
+                  setFieldValue(
+                    'quantity',
+                    subtract(field.value, values.quantity_on_hand),
+                  );
+                }}
+              />
             </FormGroup>
           )}
         </FastField>
diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFloatingActions.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFloatingActions.js
new file mode 100644
index 000000000..1665e8adf
--- /dev/null
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFloatingActions.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
+import { saveInvoke } from 'utils';
+
+export default function InventoryAdjustmentFloatingActions({
+  onCloseClick,
+  onSubmitClick,
+}) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleSubmitDraftBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      publish: false,
+    });
+  };
+  const handleSubmitMakeAdjustmentBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event, {
+      publish: true,
+    });
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={onCloseClick} style={{ minWidth: '75px' }}>
+          <T id={'close'} />
+        </Button>
+
+        <Button
+          disabled={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+          onClick={handleSubmitDraftBtnClick}
+        >
+          {<T id={'save_as_draft'} />}
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          disabled={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+          onClick={handleSubmitMakeAdjustmentBtnClick}
+        >
+          {<T id={'make_adjustment'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.js
index 7b0048f2d..25fe6c687 100644
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.js
@@ -6,22 +6,25 @@ const Schema = Yup.object().shape({
   date: Yup.date()
     .required()
     .label(formatMessage({ id: 'date' })),
-  type: Yup.number().required(),
-  adjustment_account_id: Yup.number().required(),
+  type: Yup.string().required(),
+  adjustment_account_id: Yup.string().required(),
+  item_id: Yup.number().required(),
   reason: Yup.string()
     .required()
     .label(formatMessage({ id: 'reason' })),
-  quantity: Yup.number().when(['type'], {
-    is: (type) => type,
-    then: Yup.number().required(),
-  }),
+  quantity_on_hand: Yup.number()
+    .min(0)
+    .required()
+    .label(formatMessage({ id: 'qty' })),
+  quantity: Yup.number().integer().max(Yup.ref('quantity_on_hand')).required(),
   cost: Yup.number().when(['type'], {
     is: (type) => type,
-    then: Yup.number().required(),
+    then: Yup.number(),
   }),
   reference_no: Yup.string(),
-  new_quantity: Yup.number(),
+  new_quantity: Yup.number().min(Yup.ref('quantity')).required(),
   description: Yup.string().min(3).max(DATATYPES_LENGTH.TEXT).nullable().trim(),
+  publish: Yup.boolean(),
 });
 
 export const CreateInventoryAdjustmentFormSchema = Schema;
diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.js
index 4887fbc00..c66401cfb 100644
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.js
@@ -1,33 +1,31 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { Intent } from '@blueprintjs/core';
-import { Formik } from 'formik';
+import { Formik, Form } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useQuery, queryCache } from 'react-query';
 import moment from 'moment';
 import { omit } from 'lodash';
 
-import {
-  AppToaster,
-  DialogContent,
-  Row,
-  Col,
-  ListSelect,
-  IF,
-} from 'components';
+import { AppToaster, DialogContent } from 'components';
 import { CreateInventoryAdjustmentFormSchema } from './InventoryAdjustmentForm.schema';
 import InventoryAdjustmentFormDialogFields from './InventoryAdjustmentFormDialogFields';
-
+import InventoryAdjustmentFloatingActions from './InventoryAdjustmentFloatingActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-
+import withInventoryAdjustmentActions from 'containers/Items/withInventoryAdjustmentActions';
 import { compose } from 'utils';
 
 const defaultInitialValues = {
   date: moment(new Date()).format('YYYY-MM-DD'),
   type: 'decrement',
   adjustment_account_id: '',
+  item_id: '',
   reason: '',
+  cost: '',
+  quantity: '',
   reference_no: '',
+  quantity_on_hand: '',
   description: '',
+  publish: '',
 };
 
 /**
@@ -40,31 +38,38 @@ function InventoryAdjustmentFormDialogContent({
   // #withAccountsActions
   requestFetchAccounts,
 
+  // #withInventoryAdjustmentActions
+  requestSubmitInventoryAdjustment,
+
   // #ownProp
+  itemDetail,
   dialogName,
-  action,
 }) {
   const { formatMessage } = useIntl();
+  const [submitPayload, setSubmitPayload] = useState({});
 
   // Fetches accounts list.
-  const fetchAccountsList = useQuery('accounts-list', () =>
-    requestFetchAccounts(),
-  );
+  const fetchAccount = useQuery('accounts-list', () => requestFetchAccounts());
 
   const initialValues = useMemo(
     () => ({
       ...defaultInitialValues,
+      ...itemDetail,
     }),
     [],
   );
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
-    const form = { ...values };
+    const form = {
+      ...omit(values, ['quantity_on_hand', 'new_quantity', 'action']),
+      publish: submitPayload.publish,
+    };
 
     const onSuccess = ({ response }) => {
       closeDialog(dialogName);
       queryCache.invalidateQueries('accounts-list');
+      queryCache.invalidateQueries('items-table');
 
       AppToaster.show({
         message: formatMessage({
@@ -76,14 +81,21 @@ function InventoryAdjustmentFormDialogContent({
     const onError = (error) => {
       setSubmitting(false);
     };
-    //requestInventoryAdjustment
+    requestSubmitInventoryAdjustment({ form }).then(onSuccess).catch(onError);
   };
 
   // Handles dialog close.
-  const handleClose = useCallback(() => {
+  const handleCloseClick = useCallback(() => {
     closeDialog(dialogName);
   }, [closeDialog, dialogName]);
 
+  const handleSubmitClick = useCallback(
+    (event, payload) => {
+      setSubmitPayload({ ...payload });
+    },
+    [setSubmitPayload],
+  );
+
   return (
     <DialogContent>
       <Formik
@@ -91,13 +103,19 @@ function InventoryAdjustmentFormDialogContent({
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >
-        <InventoryAdjustmentFormDialogFields
-          dialogName={dialogName}
-          onClose={handleClose}
-        />
+        <Form>
+          <InventoryAdjustmentFormDialogFields dialogName={dialogName} />
+          <InventoryAdjustmentFloatingActions
+            onSubmitClick={handleSubmitClick}
+            onCloseClick={handleCloseClick}
+          />
+        </Form>
       </Formik>
     </DialogContent>
   );
 }
 
-export default compose(withDialogActions)(InventoryAdjustmentFormDialogContent);
+export default compose(
+  withInventoryAdjustmentActions,
+  withDialogActions,
+)(InventoryAdjustmentFormDialogContent);
diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
index fca2d3b27..af6982c01 100644
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
@@ -1,24 +1,16 @@
 import React from 'react';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import {
-  Form,
-  FastField,
-  ErrorMessage,
-  useFormikContext,
-  useField,
-} from 'formik';
-import {
-  Button,
   Classes,
   FormGroup,
   InputGroup,
-  Intent,
   TextArea,
   Position,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { DateInput } from '@blueprintjs/datetime';
-import { ListSelect, Choose, If, FieldRequiredHint } from 'components';
+import { ListSelect, Choose, FieldRequiredHint } from 'components';
 import {
   inputIntent,
   momentFormatter,
@@ -30,7 +22,6 @@ import adjustmentType from 'common/adjustmentType';
 import IncrementAdjustmentFields from './IncrementAdjustmentFields';
 import DecrementAdjustmentFields from './DecrementAdjustmentFields';
 import AccountsSuggestField from 'components/AccountsSuggestField';
-
 import withAccounts from 'containers/Accounts/withAccounts';
 import { compose } from 'redux';
 
@@ -38,158 +29,135 @@ import { compose } from 'redux';
  * Inventory adjustment form dialogs fields.
  */
 function InventoryAdjustmentFormDialogFields({
-  // #ownProps
-  onClose,
-
   //# withAccount
   accountsList,
 }) {
-  const { values, isSubmitting } = useFormikContext();
-
+  const { values } = useFormikContext();
+  const { formatMessage } = useIntl();
+  // console.log(values, 'EE');
   return (
-    <Form>
-      <div className={Classes.DIALOG_BODY}>
-        {/*------------ Date -----------*/}
-        <FastField name={'date'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'date'} />}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="date" />}
-              minimal={true}
-              className={classNames(CLASSES.FILL)}
-            >
-              <DateInput
-                {...momentFormatter('YYYY/MM/DD')}
-                onChange={handleDateChange((formattedDate) => {
-                  form.setFieldValue('date', formattedDate);
-                })}
-                value={tansformDateValue(value)}
-                popoverProps={{
-                  position: Position.BOTTOM,
-                  minimal: true,
-                }}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/*------------ Adjustment type -----------*/}
-        <FastField name={'type'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'adjustment_type'} />}
-              labelInfo={<FieldRequiredHint />}
-              helperText={<ErrorMessage name="type" />}
-              intent={inputIntent({ error, touched })}
-              className={classNames(CLASSES.FILL)}
-            >
-              <ListSelect
-                items={adjustmentType}
-                onItemSelect={(type) => {
-                  console.log(type.value, 'EE');
-                  form.setFieldValue('type', type.value);
-                }}
-                selectedItem={value}
-                selectedItemProp={'value'}
-                labelProp={'name'}
-                popoverProps={{ minimal: true }}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-        <Choose>
-          <Choose.When condition={values.type === 'decrement'}>
-            <DecrementAdjustmentFields />
-          </Choose.When>
-          <Choose.When condition={values.type === 'increment'}>
-            <IncrementAdjustmentFields />
-          </Choose.When>
-        </Choose>
-
-        {/*------------ Reason -----------*/}
-        <FastField name={'reason'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'reason'} />}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="reason" />}
-            >
-              <InputGroup fill={true} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
-        {/*------------ Adjustment account -----------*/}
-        <FastField name={'adjustment_account_id'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'adjustment_account'} />}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="reason" />}
-            >
-              <AccountsSuggestField
-                accounts={accountsList}
-                onAccountSelected={(item) =>
-                  form.setFieldValue('adjustment_account_id', item)
-                }
-              />
-            </FormGroup>
-          )}
-        </FastField>
-        {/*------------ Reference -----------*/}
-        <FastField name={'reference_no'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'reference_no'} />}
-              className={classNames(CLASSES.FILL)}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="reference_no" />}
-            >
-              <InputGroup {...field} />
-            </FormGroup>
-          )}
-        </FastField>
-        {/*------------ description -----------*/}
-        <FastField name={'description'}>
-          {({ field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'description'} />}
-              className={'form-group--description'}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name={'description'} />}
-            >
-              <TextArea growVertically={true} large={true} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
-      </div>
-      <div className={Classes.DIALOG_FOOTER}>
-        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          <Button onClick={onClose} style={{ minWidth: '75px' }}>
-            <T id={'close'} />
-          </Button>
-
-          <Button
-            disabled={isSubmitting}
-            style={{ minWidth: '75px' }}
-            type="submit"
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Date -----------*/}
+      <FastField name={'date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'date'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="date" />}
+            minimal={true}
+            className={classNames(CLASSES.FILL)}
           >
-            {<T id={'save_as_draft'} />}
-          </Button>
-          <Button
-            intent={Intent.PRIMARY}
-            disabled={isSubmitting}
-            style={{ minWidth: '75px' }}
-            type="submit"
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('date', formattedDate);
+              })}
+              value={tansformDateValue(value)}
+              popoverProps={{
+                position: Position.BOTTOM,
+                minimal: true,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Adjustment type -----------*/}
+      <FastField name={'type'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'adjustment_type'} />}
+            labelInfo={<FieldRequiredHint />}
+            helperText={<ErrorMessage name="type" />}
+            intent={inputIntent({ error, touched })}
+            className={classNames(CLASSES.FILL)}
           >
-            {<T id={'make_adjustment'} />}
-          </Button>
-        </div>
-      </div>
-    </Form>
+            <ListSelect
+              items={adjustmentType}
+              onItemSelect={(type) => {
+                form.setFieldValue('type', type.value);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'value'}
+              labelProp={'name'}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      <Choose>
+        <Choose.When condition={values.type === 'decrement'}>
+          <DecrementAdjustmentFields />
+        </Choose.When>
+        <Choose.When condition={values.type === 'increment'}>
+          <IncrementAdjustmentFields />
+        </Choose.When>
+      </Choose>
+      {/*------------ Reason -----------*/}
+      <FastField name={'reason'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reason'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reason" />}
+          >
+            <InputGroup fill={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ Adjustment account -----------*/}
+      <FastField name={'adjustment_account_id'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'adjustment_account'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reason" />}
+          >
+            <AccountsSuggestField
+              accounts={accountsList}
+              onAccountSelected={(item) =>
+                form.setFieldValue('adjustment_account_id', item.id)
+              }
+              inputProps={{
+                placeholder: formatMessage({
+                  id: 'select_adjustment_account',
+                }),
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ Reference -----------*/}
+      <FastField name={'reference_no'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference_no'} />}
+            className={classNames(CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference_no" />}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*------------ description -----------*/}
+      <FastField name={'description'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'description'} />}
+            className={'form-group--description'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'description'} />}
+          >
+            <TextArea growVertically={true} large={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
   );
 }
 
diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/index.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/index.js
index 604bad6d1..e32d749ee 100644
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/index.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/index.js
@@ -27,7 +27,7 @@ function InventoryAdjustmentFormDialog({
       <DialogSuspense>
         <InventoryAdjustmentFormDialogContent
           dialogName={dialogName}
-          action={payload.action}
+          itemDetail={payload}
         />
       </DialogSuspense>
     </Dialog>
diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/utils.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/utils.js
new file mode 100644
index 000000000..0394d80d4
--- /dev/null
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/utils.js
@@ -0,0 +1,20 @@
+import { add, sumBy, subtract } from 'lodash';
+
+export const calculate = ({ type, quantity_on_hand }, operator) => {
+  const qty = parseInt(quantity_on_hand);
+  const quantity = parseInt(operator);
+
+  if (type == 'decrement') {
+    return subtract(qty, quantity);
+  } else {
+    return add(qty, quantity);
+  }
+};
+
+// function calculate(qty, operator) {
+//   return operator > 0
+//     ? calculate(qty + 1, operator - 1)
+//     : operator < 0
+//     ? calculate(qty - 1, operator + 1)
+//     : qty;
+// }
diff --git a/client/src/containers/Items/InventoryAdjustmentDataTable.js b/client/src/containers/Items/InventoryAdjustmentDataTable.js
index 7c0abedc4..9b898592d 100644
--- a/client/src/containers/Items/InventoryAdjustmentDataTable.js
+++ b/client/src/containers/Items/InventoryAdjustmentDataTable.js
@@ -7,38 +7,42 @@ import {
   MenuItem,
   MenuDivider,
   Position,
+  Tag,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';
 import classNames from 'classnames';
-import {
-  DataTable,
-  If,
-  Money,
-  Choose,
-  Icon,
-  LoadingIndicator,
-} from 'components';
+import { DataTable, Icon, LoadingIndicator } from 'components';
 import { CLASSES } from 'common/classes';
 import { useIsValuePassed } from 'hooks';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
-// withInventoryAdjustments
-// withInventoryAdjustmentsActions
+import withInventoryAdjustments from './withInventoryAdjustments';
+import withInventoryAdjustmentActions from './withInventoryAdjustmentActions';
 
 import { compose, saveInvoke } from 'utils';
 import { withRouter } from 'react-router-dom';
 
 function InventoryAdjustmentDataTable({
+  // withInventoryAdjustments
+  inventoryAdjustmentItems,
+  inventoryAdjustmentCurrentPage,
+  inventoryAdjustmentLoading,
+  inventoryAdjustmentsPagination,
+
+  // withInventoryAdjustmentsActions
+  addInventoryAdjustmentTableQueries,
+
   // #ownProps
   onDeleteInventoryAdjustment,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
+  const isLoadedBefore = useIsValuePassed(inventoryAdjustmentLoading, false);
 
   const handleDeleteInventoryAdjustment = useCallback(
-    (_inventory) => {
-      saveInvoke(onDeleteInventoryAdjustment, _inventory);
+    (_adjustment) => () => {
+      saveInvoke(onDeleteInventoryAdjustment, _adjustment);
     },
     [onDeleteInventoryAdjustment],
   );
@@ -53,9 +57,9 @@ function InventoryAdjustmentDataTable({
         <MenuDivider />
         <MenuItem
           text={formatMessage({ id: 'delete_adjustment' })}
-          icon={<Icon icon="trash-16" iconSize={16} />}
           intent={Intent.DANGER}
           onClick={handleDeleteInventoryAdjustment(adjustment)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
         />
       </Menu>
     ),
@@ -79,41 +83,53 @@ function InventoryAdjustmentDataTable({
       {
         id: 'type',
         Header: formatMessage({ id: 'type' }),
-        accessor: 'type',
+        accessor: (row) =>
+          row.type ? (
+            <Tag minimal={true} round={true} intent={Intent.NONE}>
+              {formatMessage({ id: row.type })}
+            </Tag>
+          ) : (
+            ''
+          ),
         className: 'type',
         width: 100,
       },
       {
         id: 'reason',
         Header: formatMessage({ id: 'reason' }),
-        // accessor: (r) => (
-        //   <Tooltip
-        //     content={}
-        //     position={Position.RIGHT_BOTTOM}
-        //   >
-        //   </Tooltip>
-        // ),
+        accessor: 'reason',
         className: 'reason',
         width: 115,
       },
       {
-        id: 'reference',
-        Header: formatMessage({ id: 'reference' }),
-        accessor: (row) => `#${row.reference}`,
-        className: 'reference',
+        id: 'reference_no',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference_no',
+        className: 'reference_no',
         width: 100,
       },
       {
-        id: 'status',
+        id: 'publish',
         Header: formatMessage({ id: 'status' }),
-        accessor: 'status',
+        accessor: (r) => {
+          return r.is_published ? (
+            <Tag minimal={true}>
+              <T id={'published'} />
+            </Tag>
+          ) : (
+            <Tag minimal={true} intent={Intent.WARNING}>
+              <T id={'draft'} />
+            </Tag>
+          );
+        },
         width: 95,
-        className: 'status',
+        className: 'publish',
       },
 
       {
         id: 'description',
         Header: formatMessage({ id: 'description' }),
+        accessor: 'description',
         disableSorting: true,
         width: 85,
         className: 'description',
@@ -144,6 +160,23 @@ function InventoryAdjustmentDataTable({
     [actionMenuList, formatMessage],
   );
 
+  const handleDataTableFetchData = useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      addInventoryAdjustmentTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page: pageIndex + 1,
+      });
+    },
+    [addInventoryAdjustmentTableQueries],
+  );
+  
+
   const handleSelectedRowsChange = useCallback(
     (selectedRows) => {
       saveInvoke(
@@ -160,11 +193,23 @@ function InventoryAdjustmentDataTable({
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator
-
-      // loading={}
-      >
-        <DataTable noInitialFetch={true} columns={columns} data={[]} />
+      <LoadingIndicator loading={inventoryAdjustmentLoading && !isLoadedBefore}>
+        <DataTable
+          columns={columns}
+          data={inventoryAdjustmentItems}
+          onFetchData={handleDataTableFetchData}
+          manualSortBy={true}
+          selectionColumn={true}
+          noInitialFetch={true}
+          onSelectedRowsChange={handleSelectedRowsChange}
+          rowContextMenu={onRowContextMenu}
+          pagination={true}
+          autoResetSortBy={false}
+          autoResetPage={false}
+          pagesCount={inventoryAdjustmentsPagination.pagesCount}
+          initialPageSize={inventoryAdjustmentsPagination.pageSize}
+          initialPageIndex={inventoryAdjustmentsPagination.page - 1}
+        />
       </LoadingIndicator>
     </div>
   );
@@ -173,4 +218,18 @@ function InventoryAdjustmentDataTable({
 export default compose(
   withRouter,
   withDialogActions,
+  withInventoryAdjustmentActions,
+  withInventoryAdjustments(
+    ({
+      inventoryAdjustmentLoading,
+      inventoryAdjustmentItems,
+      inventoryAdjustmentCurrentPage,
+      inventoryAdjustmentsPagination,
+    }) => ({
+      inventoryAdjustmentLoading,
+      inventoryAdjustmentItems,
+      inventoryAdjustmentCurrentPage,
+      inventoryAdjustmentsPagination,
+    }),
+  ),
 )(InventoryAdjustmentDataTable);
diff --git a/client/src/containers/Items/InventoryAdjustmentList.js b/client/src/containers/Items/InventoryAdjustmentList.js
index 03bc43b6b..b6f35eecb 100644
--- a/client/src/containers/Items/InventoryAdjustmentList.js
+++ b/client/src/containers/Items/InventoryAdjustmentList.js
@@ -3,13 +3,15 @@ import { useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
+import AppToaster from 'components/AppToaster';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 import InventoryAdjustmentDataTable from './InventoryAdjustmentDataTable';
-
+import withInventoryAdjustmentActions from './withInventoryAdjustmentActions';
+import withInventoryAdjustments from './withInventoryAdjustments';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-//withInventoryAdjustmentsActions
+
 import { compose } from 'utils';
 import { Route, Switch } from 'react-router-dom';
 
@@ -19,7 +21,13 @@ import { Route, Switch } from 'react-router-dom';
 function InventoryAdjustmentList({
   // #withDashboardActions
   changePageTitle,
+
+  // #withInventoryAdjustments
+  inventoryAdjustmentTableQuery,
+
   // #withInventoryAdjustmentsActions
+  requestFetchInventoryAdjustmentTable,
+  requestDeleteInventoryAdjustment,
 }) {
   const { formatMessage } = useIntl();
   const [selectedRows, setSelectedRows] = useState([]);
@@ -32,8 +40,8 @@ function InventoryAdjustmentList({
   }, [changePageTitle, formatMessage]);
 
   const fetchInventoryAdjustments = useQuery(
-    ['inventory-adjustment-list'],
-    () => {},
+    ['inventory-adjustment-list' ,inventoryAdjustmentTableQuery],
+    (key, query) => requestFetchInventoryAdjustmentTable({ ...query }),
   );
 
   // Handle selected rows change.
@@ -55,7 +63,25 @@ function InventoryAdjustmentList({
     setDeleteInventoryAdjustment(false);
   }, [setDeleteInventoryAdjustment]);
 
-  const handleConfirmInventoryAdjustmentDelete = useCallback(() => {}, []);
+  const handleConfirmInventoryAdjustmentDelete = useCallback(() => {
+    requestDeleteInventoryAdjustment(deleteInventoryAdjustment.id)
+      .then(() => {
+        setDeleteInventoryAdjustment(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_adjustment_has_been_successfully_deleted',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        setDeleteInventoryAdjustment(false);
+      });
+  }, [
+    deleteInventoryAdjustment,
+    requestDeleteInventoryAdjustment,
+    formatMessage,
+  ]);
 
   // Calculates the data table selected rows count.
   const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
@@ -63,7 +89,7 @@ function InventoryAdjustmentList({
   ]);
 
   return (
-    <DashboardInsider>
+    <DashboardInsider name={'inventory_adjustments'}>
       <DashboardPageContent>
         <Switch>
           <Route exact={true}>
@@ -73,9 +99,32 @@ function InventoryAdjustmentList({
             />
           </Route>
         </Switch>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'delete'} />}
+          icon={'trash'}
+          intent={Intent.DANGER}
+          isOpen={deleteInventoryAdjustment}
+          onCancel={handleCancelInventoryAdjustmentDelete}
+          onConfirm={handleConfirmInventoryAdjustmentDelete}
+        >
+          <p>
+            <T
+              id={
+                'once_delete_this_inventory_a_adjustment_you_will_able_to_restore_it'
+              }
+            />
+          </p>
+        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
 }
 
-export default compose(withDashboardActions)(InventoryAdjustmentList);
+export default compose(
+  withDashboardActions,
+  withInventoryAdjustmentActions,
+  withInventoryAdjustments(({ inventoryAdjustmentTableQuery }) => ({
+    inventoryAdjustmentTableQuery,
+  })),
+)(InventoryAdjustmentList);
diff --git a/client/src/containers/Items/ItemsDataTable.js b/client/src/containers/Items/ItemsDataTable.js
index 3c7bde719..f0dcfbbbf 100644
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/client/src/containers/Items/ItemsDataTable.js
@@ -75,6 +75,17 @@ function ItemsDataTable({
     [addItemsTableQueries],
   );
 
+  const handleMakeAdjustment = useCallback(
+    (item) => () => {
+      openDialog('inventory-adjustment-form', {
+        action: 'make_adjustment',
+        item_id: item.id,
+        quantity_on_hand: item.quantity_on_hand,
+      });
+    },
+    [openDialog],
+  );
+
   const handleEditItem = useCallback(
     (item) => () => {
       onEditItem && onEditItem(item);
@@ -89,10 +100,6 @@ function ItemsDataTable({
     [onDeleteItem],
   );
 
-  const handleMakeAdjustment = useCallback(() => {
-    openDialog('inventory-adjustment-form', {});
-  }, [openDialog]);
-
   const actionMenuList = useCallback(
     (item) => (
       <Menu>
@@ -120,11 +127,11 @@ function ItemsDataTable({
             onClick={() => onActivateItem(item)}
           />
         </If>
-        
+
         <If condition={item.type === 'inventory'}>
           <MenuItem
             text={formatMessage({ id: 'make_adjustment' })}
-            onClick={handleMakeAdjustment}
+            onClick={handleMakeAdjustment(item)}
           />
         </If>
         <MenuItem
diff --git a/client/src/containers/Items/withInventoryAdjustmentActions.js b/client/src/containers/Items/withInventoryAdjustmentActions.js
index 3cadd6fed..f596e2b0f 100644
--- a/client/src/containers/Items/withInventoryAdjustmentActions.js
+++ b/client/src/containers/Items/withInventoryAdjustmentActions.js
@@ -7,7 +7,7 @@ import {
 import t from 'store/types';
 
 const mapDispatchToProps = (dispatch) => ({
-  requestSubmitInventoryAdjustment: (form) =>
+  requestSubmitInventoryAdjustment: ({ form }) =>
     dispatch(submitInventoryAdjustment({ form })),
   requestFetchInventoryAdjustmentTable: (query = {}) =>
     dispatch(fetchInventoryAdjustmentsTable({ query: { ...query } })),
diff --git a/client/src/containers/Items/withInventoryAdjustments.js b/client/src/containers/Items/withInventoryAdjustments.js
index 87fbdd40c..c35b646a0 100644
--- a/client/src/containers/Items/withInventoryAdjustments.js
+++ b/client/src/containers/Items/withInventoryAdjustments.js
@@ -1,4 +1,34 @@
 import { connect } from 'react-redux';
+import {
+  getInvoiceTableQueryFactory,
+  getInventoryAdjustmentCurrentPageFactory,
+  getInventoryAdjustmentPaginationMetaFactory,
+} from 'store/inventoryAdjustments/inventoryAdjustment.selector';
 
+export default (mapState) => {
+  const getInventoryAdjustmentItems = getInventoryAdjustmentCurrentPageFactory();
+  const getInventoryAdjustmentTableQuery = getInvoiceTableQueryFactory();
+  const getInventoryAdjustmentsPaginationMeta = getInventoryAdjustmentPaginationMetaFactory();
 
+  const mapStateToProps = (state, props) => {
+    const query = getInventoryAdjustmentTableQuery(state, props);
 
+    const mapped = {
+      inventoryAdjustmentCurrentPage: getInventoryAdjustmentItems(
+        state,
+        props,
+        query,
+      ),
+      inventoryAdjustmentItems: Object.values(state.inventoryAdjustments.items),
+      inventoryAdjustmentTableQuery: query,
+      inventoryAdjustmentsPagination: getInventoryAdjustmentsPaginationMeta(
+        state,
+        props,
+        query,
+      ),
+      inventoryAdjustmentLoading: state.inventoryAdjustments.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index 82c345370..b5eed474e 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -950,8 +950,13 @@ export default {
   cost: 'Cost',
   qty_on_hand: 'Qty on hand',
   adjustment_account: 'Adjustment account',
-  inventory_adjustment_list:'Inventory Adjustment List',
-  delete_adjustment:'Delete Adjustment',
+  inventory_adjustment_list: 'Inventory Adjustment List',
+  delete_adjustment: 'Delete Adjustment',
   the_make_adjustment_has_been_successfully_created:
     'The make adjustment has been successfully created.',
+  the_adjustment_has_been_successfully_deleted:
+    'The adjustment has been successfully deleted.',
+  once_delete_this_inventory_a_adjustment_you_will_able_to_restore_it: `Once you delete this inventory a adjustment, you won\'t be able to restore it later. Are you sure you want to delete this invoice?`,
+  select_adjustment_account: 'Select Adjustment account',
+  qty: 'Quantity on hand',
 };
diff --git a/client/src/store/inventoryAdjustments/inventoryAdjustment.actions.js b/client/src/store/inventoryAdjustments/inventoryAdjustment.actions.js
index e82db2779..89fd1f50a 100644
--- a/client/src/store/inventoryAdjustments/inventoryAdjustment.actions.js
+++ b/client/src/store/inventoryAdjustments/inventoryAdjustment.actions.js
@@ -4,10 +4,11 @@ import t from 'store/types';
 export const submitInventoryAdjustment = ({ form }) => {
   return (dispatch) =>
     new Promise((resolve, reject) => {
-      ApiService.post('inventory_adjustments', form).then((response) => {
-        resolve(response);
-      }),
-        caches((error) => {
+      ApiService.post('inventory_adjustments/quick', form)
+        .then((response) => {
+          resolve(response);
+        })
+        .catch((error) => {
           const { response } = error;
           const { data } = response;
 
@@ -51,7 +52,7 @@ export const fetchInventoryAdjustmentsTable = ({ query } = {}) => {
           dispatch({
             type: t.INVENTORY_ADJUSTMENTS_PAGE_SET,
             payload: {
-              inventory_adjustments: response.data,
+              inventory_adjustments: response.data.inventoy_adjustments,
               pagination: response.data.pagination,
               customViewId:
                 response.data?.filter_meta?.view?.custom_view_id || -1,
@@ -60,7 +61,7 @@ export const fetchInventoryAdjustmentsTable = ({ query } = {}) => {
           dispatch({
             type: t.INVENTORY_ADJUSTMENT_ITEMS_SET,
             payload: {
-              inventory_adjustment: response.data,
+              inventory_adjustment: response.data.inventoy_adjustments,
             },
           });
           dispatch({
diff --git a/client/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js b/client/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js
index 8b84c1084..6ebdc0b71 100644
--- a/client/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js
+++ b/client/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js
@@ -14,9 +14,6 @@ const initialState = {
     page_size: 12,
     page: 1,
   },
-  paginationMeta: {
-    total: 0,
-  },
 };
 
 export default createReducer(initialState, {
@@ -37,7 +34,6 @@ export default createReducer(initialState, {
 
     const viewId = customViewId || -1;
     const view = state.views[viewId] || {};
-
     state.views[viewId] = {
       ...view,
       pages: {
@@ -49,7 +45,6 @@ export default createReducer(initialState, {
     };
   },
 
-  //useless
   [t.INVENTORY_ADJUSTMENT_ITEMS_SET]: (state, action) => {
     const { inventory_adjustment } = action.payload;
     const _inventory_adjustment = {};
diff --git a/client/src/store/inventoryAdjustments/inventoryAdjustment.selector.js b/client/src/store/inventoryAdjustments/inventoryAdjustment.selector.js
index 3f45271a8..1625e57f3 100644
--- a/client/src/store/inventoryAdjustments/inventoryAdjustment.selector.js
+++ b/client/src/store/inventoryAdjustments/inventoryAdjustment.selector.js
@@ -5,3 +5,55 @@ import {
   defaultPaginationMeta,
 } from 'store/selectors';
 
+const inventoryAdjustmentTableQuery = (state) =>
+  state.inventoryAdjustments.tableQuery;
+
+const inventoryAdjustmentsPaginationSelector = (state, props) => {
+  const viewId = state.inventoryAdjustments.currentViewId;
+  return state.inventoryAdjustments.views?.[viewId];
+};
+
+const inventoryAdjustmentItemsSelector = (state) =>
+  state.inventoryAdjustments.items;
+
+const inventoryAdjustmentCurrentPageSelector = (state, props) => {
+  const currentViewId = state.inventoryAdjustments.currentViewId;
+  const currentView = state.inventoryAdjustments.views?.[currentViewId];
+  const currentPageId = currentView?.paginationMeta?.page;
+
+  return currentView?.pages?.[currentPageId];
+};
+
+const getinventoryAdjustmentCurrentViewIdSelector = (state) =>
+  state.inventoryAdjustments.currentViewId;
+
+export const getInvoiceTableQueryFactory = () =>
+  createSelector(
+    paginationLocationQuery,
+    inventoryAdjustmentTableQuery,
+    (locationQuery, tableQuery) => {
+      return {
+        ...locationQuery,
+        ...tableQuery,
+      };
+    },
+  );
+
+export const getInventoryAdjustmentCurrentPageFactory = () =>
+  createSelector(
+    inventoryAdjustmentCurrentPageSelector,
+    inventoryAdjustmentItemsSelector,
+    (currentPage, items) => {
+      return typeof currentPage === 'object'
+        ? pickItemsFromIds(items, currentPage.ids) || []
+        : [];
+    },
+  );
+
+export const getInventoryAdjustmentPaginationMetaFactory = () =>
+  createSelector(inventoryAdjustmentsPaginationSelector, (Page) => {
+    return {
+      ...defaultPaginationMeta(),
+      ...(Page?.paginationMeta || {}),
+    };
+  });
diff --git a/client/src/store/inventoryAdjustments/inventoryAdjustment.type.js b/client/src/store/inventoryAdjustments/inventoryAdjustment.type.js
index 20837993e..677e6ed22 100644
--- a/client/src/store/inventoryAdjustments/inventoryAdjustment.type.js
+++ b/client/src/store/inventoryAdjustments/inventoryAdjustment.type.js
@@ -8,7 +8,7 @@ export default {
 
 
   INVENTORY_ADJUSTMENTS_TABLE_QUERIES_ADD:
-    'INVENTORY_ADJUSTMENTS_TABLE_QUERIES_ADD',
+    'INVENTORY_ADJUSTMENTS/TABLE_QUERIES_ADD',
   INVENTORY_ADJUSTMENTS_SET_CURRENT_VIEW:
     'INVENTORY_ADJUSTMENTS_SET_CURRENT_VIEW',
 };

From 14f2fdf4fcb645ecc6463dd7895f636b214a3314 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Thu, 14 Jan 2021 13:36:27 +0200
Subject: [PATCH 3/6] feat: number formats.

---
 client/src/common/numberFormatsOptions.js     |  18 ++
 client/src/components/ListSelect.js           |   6 +-
 .../NumberFormats/NumberFormatFields.js       | 156 ++++++++++++++++++
 .../NumberFormats/NumberFormats.schema.js     |  14 ++
 client/src/components/NumberFormats/index.js  |  42 +++++
 .../BalanceSheet/BalanceSheetActionsBar.js    |  23 ++-
 client/src/containers/Items/ItemsList.js      |  40 +++--
 client/src/lang/en/index.js                   |   9 +
 client/src/style/App.scss                     |   1 +
 client/src/style/pages/number-format.scss     |  24 +++
 10 files changed, 317 insertions(+), 16 deletions(-)
 create mode 100644 client/src/common/numberFormatsOptions.js
 create mode 100644 client/src/components/NumberFormats/NumberFormatFields.js
 create mode 100644 client/src/components/NumberFormats/NumberFormats.schema.js
 create mode 100644 client/src/components/NumberFormats/index.js
 create mode 100644 client/src/style/pages/number-format.scss

diff --git a/client/src/common/numberFormatsOptions.js b/client/src/common/numberFormatsOptions.js
new file mode 100644
index 000000000..d39845288
--- /dev/null
+++ b/client/src/common/numberFormatsOptions.js
@@ -0,0 +1,18 @@
+export const moneyFormat = [
+  { id: 'total', text: 'Total rows' },
+  { id: 'always', text: 'Always' },
+  { id: 'none', text: 'None' },
+];
+
+export const negativeFormat = [
+  { id: 'parentheses', text: 'Parentheses ($1000)' },
+  { id: 'mines', text: 'Minus -$1000' },
+];
+
+export const decimalPlaces = [
+  { text: '1 Decimals', label: '$0.1', id: 1 },
+  { text: '2 Decimals', label: '$0.01', id: 2 },
+  { text: '3 Decimals', label: '$0.001', id: 3 },
+  { text: '4 Decimals', label: '$0.0001', id: 4 },
+  { text: '5 Decimals', label: '$0.00001', id: 5 },
+];
diff --git a/client/src/components/ListSelect.js b/client/src/components/ListSelect.js
index c0aedf686..ebbfb5479 100644
--- a/client/src/components/ListSelect.js
+++ b/client/src/components/ListSelect.js
@@ -10,6 +10,7 @@ export default function ListSelect({
   defaultText,
   noResultsText = <T id="no_results" />,
   isLoading = false,
+  textProp,
   labelProp,
 
   selectedItem,
@@ -52,8 +53,9 @@ export default function ListSelect({
   const itemRenderer = (item, { handleClick, modifiers, query }) => {
     return (
       <MenuItem
-        text={item[labelProp]}
+        text={item[textProp]}
         key={item[selectedItemProp]}
+        label={item[labelProp]}
         onClick={handleClick}
       />
     );
@@ -77,7 +79,7 @@ export default function ListSelect({
       )}
     >
       <Button
-        text={currentItem ? currentItem[labelProp] : defaultText}
+        text={currentItem ? currentItem[textProp] : defaultText}
         loading={isLoading}
         disabled={disabled}
         {...buttonProps}
diff --git a/client/src/components/NumberFormats/NumberFormatFields.js b/client/src/components/NumberFormats/NumberFormatFields.js
new file mode 100644
index 000000000..e6d380d76
--- /dev/null
+++ b/client/src/components/NumberFormats/NumberFormatFields.js
@@ -0,0 +1,156 @@
+import React from 'react';
+import { Form, FastField, ErrorMessage, useFormikContext } from 'formik';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+  Checkbox,
+} from '@blueprintjs/core';
+import { CLASSES } from 'common/classes';
+import { Row, Col, ListSelect } from 'components';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { inputIntent } from 'utils';
+import {
+  moneyFormat,
+  negativeFormat,
+  decimalPlaces,
+} from 'common/numberFormatsOptions';
+import classNames from 'classnames';
+
+/**
+ *  Number Formats Fields.
+ */
+export default function NumberFormatFields({
+  // #ownProps
+  onCancelClick,
+}) {
+  const { isSubmitting } = useFormikContext();
+  return (
+    <Form>
+      <div className={'number-format__content'}>
+        {/*------------ Money formats -----------*/}
+        <FastField name={'format_money'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'money_format'} />}
+              helperText={<ErrorMessage name="format_money" />}
+              intent={inputIntent({ error, touched })}
+              className={classNames(CLASSES.FILL)}
+            >
+              <ListSelect
+                items={moneyFormat}
+                onItemSelect={(format) => {
+                  form.setFieldValue('format_money', format.name);
+                }}
+                filterable={false}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'text'}
+                popoverProps={{ minimal: true, captureDismiss: true }}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+        {/*------------ Negative formats -----------*/}
+        <FastField name={'negative_format'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'negative_format'} />}
+              helperText={<ErrorMessage name="negative_format" />}
+              intent={inputIntent({ error, touched })}
+              className={classNames(CLASSES.FILL)}
+            >
+              <ListSelect
+                items={negativeFormat}
+                onItemSelect={(format) => {
+                  form.setFieldValue('negative_format', format.name);
+                }}
+                filterable={false}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'text'}
+                popoverProps={{ minimal: true, captureDismiss: true }}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/*------------ Decimal places -----------*/}
+        <FastField name={'precision'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'decimal_places'} />}
+              helperText={<ErrorMessage name="format_money" />}
+              intent={inputIntent({ error, touched })}
+              className={classNames(CLASSES.FILL)}
+            >
+              <ListSelect
+                items={decimalPlaces}
+                onItemSelect={(format) => {
+                  form.setFieldValue('precision', format.key);
+                }}
+                filterable={false}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                labelProp={'label'}
+                textProp={'text'}
+                popoverProps={{ minimal: true, captureDismiss: true }}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/*------------ show zero -----------*/}
+        <FastField name={'show_zero'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Checkbox
+                inline={true}
+                label={<T id={'show_zero'} />}
+                name={'show_zero'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+        {/*------------ Divide on 1000 -----------*/}
+        <FastField name={'divide_on_1000'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Checkbox
+                inline={true}
+                label={<T id={'divide_on_1000'} />}
+                name={'divide_on_1000'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+      <div
+        className={classNames('number-format__footer', Classes.POPOVER_DISMISS)}
+      >
+        <Button
+          className={'mr1'}
+          onClick={onCancelClick}
+          small={true}
+          style={{ minWidth: '75px' }}
+        >
+          <T id={'cancel'} />
+        </Button>
+
+        <Button
+          intent={Intent.PRIMARY}
+          disabled={isSubmitting}
+          small={true}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          <T id={'run'} />
+        </Button>
+      </div>
+    </Form>
+  );
+}
diff --git a/client/src/components/NumberFormats/NumberFormats.schema.js b/client/src/components/NumberFormats/NumberFormats.schema.js
new file mode 100644
index 000000000..bd5412c58
--- /dev/null
+++ b/client/src/components/NumberFormats/NumberFormats.schema.js
@@ -0,0 +1,14 @@
+import * as Yup from 'yup';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { defaultTo } from 'lodash';
+
+
+const Schema = Yup.object().shape({
+  format_money: Yup.string(),
+  show_zero: Yup.boolean(),
+  divide_on_1000: Yup.boolean(),
+  negative_format: Yup.string(),
+  precision: Yup.string(),
+});
+
+export const CreateNumberFormateSchema = Schema;
diff --git a/client/src/components/NumberFormats/index.js b/client/src/components/NumberFormats/index.js
new file mode 100644
index 000000000..7357cc3d8
--- /dev/null
+++ b/client/src/components/NumberFormats/index.js
@@ -0,0 +1,42 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { Classes } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import classNames from 'classnames';
+import NumberFormatFields from './NumberFormatFields';
+
+import { compose } from 'utils';
+
+/**
+ * Number format form popover content.
+ */
+function NumberFormats() {
+  const initialValues = useMemo(
+    () => ({
+      format_money: '',
+      show_zero: '',
+      divide_on_1000: '',
+      negative_format: '',
+      precision: '',
+    }),
+    [],
+  );
+  // Handle cancel button click.
+  const handleCancelClick = useCallback(() => {
+  }, []);
+
+  // Handle form submit.
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    setSubmitting(true);
+    const form = { ...values };
+  };
+
+  return (
+    <div className={'number-format'}>
+      <Formik initialValues={initialValues} onSubmit={handleFormSubmit}>
+        <NumberFormatFields onCancelClick={handleCancelClick} />
+      </Formik>
+    </div>
+  );
+}
+
+export default NumberFormats;
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
index ad79d6d36..ea21c3849 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   NavbarGroup,
   Button,
@@ -13,6 +13,7 @@ import classNames from 'classnames';
 
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormats from 'components/NumberFormats';
 
 import { compose } from 'utils';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
@@ -49,7 +50,13 @@ function BalanceSheetActionsBar({
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
-          text={!balanceSheetFilter ? <T id={'customize_report'} /> : <T id={'hide_customizer'} />}
+          text={
+            !balanceSheetFilter ? (
+              <T id={'customize_report'} />
+            ) : (
+              <T id={'hide_customizer'} />
+            )
+          }
           onClick={handleFilterToggleClick}
           active={balanceSheetFilter}
         />
@@ -66,6 +73,18 @@ function BalanceSheetActionsBar({
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
+        <Popover
+          content={<NumberFormats />}
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="filter-16" iconSize={16} />}
+          />
+        </Popover>
 
         <NavbarDivider />
 
diff --git a/client/src/containers/Items/ItemsList.js b/client/src/containers/Items/ItemsList.js
index 76f8678c9..442f91a91 100644
--- a/client/src/containers/Items/ItemsList.js
+++ b/client/src/containers/Items/ItemsList.js
@@ -93,6 +93,33 @@ function ItemsList({
     setDeleteItem(false);
   }, [setDeleteItem]);
 
+  const handleDeleteErrors = (errors) => {
+    if (
+      errors.find((error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')
+    ) {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_item_has_associated_transactions',
+        }),
+        intent: Intent.DANGER,
+      });
+    }
+
+    if (
+      errors.find(
+        (error) => error.type === 'ITEM_HAS_ASSOCIATED_INVENTORY_ADJUSTMENT',
+      )
+    ) {
+      AppToaster.show({
+        message: formatMessage({
+          id:
+            'you_could_not_delete_item_that_has_associated_inventory_adjustments_transacions',
+        }),
+        intent: Intent.DANGER,
+      });
+    }
+  };
+
   // handle confirm delete item.
   const handleConfirmDeleteItem = useCallback(() => {
     requestDeleteItem(deleteItem.id)
@@ -107,19 +134,8 @@ function ItemsList({
         setDeleteItem(false);
       })
       .catch(({ errors }) => {
-        if (
-          errors.find(
-            (error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS',
-          )
-        ) {
-          AppToaster.show({
-            message: formatMessage({
-              id: 'the_item_has_associated_transactions',
-            }),
-            intent: Intent.DANGER,
-          });
-        }
         setDeleteItem(false);
+        handleDeleteErrors(errors);
       });
   }, [requestDeleteItem, deleteItem, formatMessage]);
 
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index b5eed474e..93aefba99 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -959,4 +959,13 @@ export default {
   once_delete_this_inventory_a_adjustment_you_will_able_to_restore_it: `Once you delete this inventory a adjustment, you won\'t be able to restore it later. Are you sure you want to delete this invoice?`,
   select_adjustment_account: 'Select Adjustment account',
   qty: 'Quantity on hand',
+  money_format: 'Money format',
+  show_zero: 'Show zero',
+  divide_on_1000: 'Divide on 1000',
+  negative_format: 'Negative format',
+  decimal_places: 'Decimal places',
+  run: 'Run',
+  you_could_not_delete_item_that_has_associated_inventory_adjustments_transacions:
+    'You could not delete item that has associated inventory adjustments transactions',
+  format: 'Format',
 };
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index 5de0242af..1c9ebd54e 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -80,6 +80,7 @@ $button-background-color-hover: #CFDCEE !default;
 @import 'pages/receipt-form';
 @import 'pages/payment-made';
 @import 'pages/payment-receive';
+@import 'pages/number-format.scss';
 
 // Views
 @import 'views/filter-dropdown';
diff --git a/client/src/style/pages/number-format.scss b/client/src/style/pages/number-format.scss
new file mode 100644
index 000000000..dce18cf3f
--- /dev/null
+++ b/client/src/style/pages/number-format.scss
@@ -0,0 +1,24 @@
+.number-format {
+  width: 400px;
+  padding: 12px;
+  //    width: 300px;
+  //    padding: 10px;
+  &__content {
+    .bp3-form-group {
+      margin-bottom: 5px;
+      // margin-bottom: 0px;
+      .bp3-form-content {
+        .bp3-label {
+          margin-bottom: 3px;
+        }
+        .bp3-control {
+          margin: 5px 0px 0px;
+        }
+      }
+    }
+  }
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

From dbf8cae5e53a86d1530fbb164a2c32c3146ff3dc Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Thu, 14 Jan 2021 14:21:52 +0200
Subject: [PATCH 4/6] fix: change labelProp to textProp

---
 client/src/components/AccountsTypesSelect.js           |  2 +-
 client/src/components/CategoriesSelectList.js          |  2 +-
 client/src/components/DisplayNameList.js               |  2 +-
 .../DynamicFilter/DynamicFilterValueField.js           |  2 +-
 client/src/components/ItemsListField.js                |  2 +-
 client/src/components/PaymentReceiveListField.js       |  2 +-
 client/src/components/SalutationList.js                |  2 +-
 .../InventoryAdjustmentFormDialogFields.js             |  2 +-
 .../FinancialStatements/FinancialAccountsFilter.js     |  2 +-
 .../FinancialStatements/SelectDisplayColumnsBy.js      |  2 +-
 .../src/containers/Preferences/General/GeneralForm.js  | 10 +++++-----
 client/src/containers/Setup/SetupOrganizationForm.js   |  6 +++---
 12 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/client/src/components/AccountsTypesSelect.js b/client/src/components/AccountsTypesSelect.js
index 1803f49f6..69782bab7 100644
--- a/client/src/components/AccountsTypesSelect.js
+++ b/client/src/components/AccountsTypesSelect.js
@@ -39,7 +39,7 @@ export default function AccountsTypesSelect({
       items={items}
       selectedItemProp={'id'}
       selectedItem={selectedTypeId}
-      labelProp={'label'}
+      textProp={'label'}
       defaultText={defaultSelectText}
       onItemSelect={handleItemSelected}
       itemPredicate={filterAccountTypeItems}
diff --git a/client/src/components/CategoriesSelectList.js b/client/src/components/CategoriesSelectList.js
index 541c2d813..52bf07a14 100644
--- a/client/src/components/CategoriesSelectList.js
+++ b/client/src/components/CategoriesSelectList.js
@@ -44,7 +44,7 @@ export default function CategoriesSelectList({
       items={categoriesList}
       selectedItemProp={'id'}
       selectedItem={selecetedCategoryId}
-      labelProp={'name'}
+      textProp={'name'}
       defaultText={defaultSelectText}
       onItemSelect={handleItemCategorySelected}
       itemPredicate={filterItemCategory}
diff --git a/client/src/components/DisplayNameList.js b/client/src/components/DisplayNameList.js
index eb0cb28b3..cb09cb4ac 100644
--- a/client/src/components/DisplayNameList.js
+++ b/client/src/components/DisplayNameList.js
@@ -34,7 +34,7 @@ export default function DisplayNameList({
     <ListSelect
       items={formatOptions}
       selectedItemProp={'label'}
-      labelProp={'label'}
+      textProp={'label'}
       defaultText={'Select display name as'}
       filterable={false}
       { ...restProps }
diff --git a/client/src/components/DynamicFilter/DynamicFilterValueField.js b/client/src/components/DynamicFilter/DynamicFilterValueField.js
index 241465ec1..1d56e1bbb 100644
--- a/client/src/components/DynamicFilter/DynamicFilterValueField.js
+++ b/client/src/components/DynamicFilter/DynamicFilterValueField.js
@@ -158,7 +158,7 @@ function DynamicFilterValueField({
             selectedItem={value}
             selectedItemProp={optionsKey}
             defaultText={`Select an option`}
-            labelProp={optionsLabel}
+            textProp={optionsLabel}
             buttonProps={{
               onClick: handleBtnClick
             }}
diff --git a/client/src/components/ItemsListField.js b/client/src/components/ItemsListField.js
index 495772c9a..8b23401a4 100644
--- a/client/src/components/ItemsListField.js
+++ b/client/src/components/ItemsListField.js
@@ -75,7 +75,7 @@ function ItemsListField({
       onItemSelect={onItemSelect}
       selectedItem={`${selectedItemId}`}
       selectedItemProp={'id'}
-      labelProp={'name'}
+      textProp={'name'}
       defaultText={selectedItem ? selectedItem.name : defautlSelectText}
     />
   );
diff --git a/client/src/components/PaymentReceiveListField.js b/client/src/components/PaymentReceiveListField.js
index 4c9f828ba..6b6b3a34d 100644
--- a/client/src/components/PaymentReceiveListField.js
+++ b/client/src/components/PaymentReceiveListField.js
@@ -29,7 +29,7 @@ function PaymentReceiveListField({
       onItemSelect={onInvoiceSelect}
       selectedItem={`${selectedInvoiceId}`}
       selectedItemProp={'id'}
-      labelProp={'name'}
+      textProp={'name'}
       defaultText={defaultSelectText}
     />
   );
diff --git a/client/src/components/SalutationList.js b/client/src/components/SalutationList.js
index 9b7e1d660..96b881589 100644
--- a/client/src/components/SalutationList.js
+++ b/client/src/components/SalutationList.js
@@ -13,7 +13,7 @@ export default function SalutationList({
     <ListSelect
       items={items}
       selectedItemProp={'key'}
-      labelProp={'label'}
+      textProp={'label'}
       defaultText={'Salutation'}
       filterable={false}
       {...restProps}
diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
index af6982c01..a6dd528e6 100644
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
@@ -81,7 +81,7 @@ function InventoryAdjustmentFormDialogFields({
               filterable={false}
               selectedItem={value}
               selectedItemProp={'value'}
-              labelProp={'name'}
+              textProp={'name'}
               popoverProps={{ minimal: true }}
             />
           </FormGroup>
diff --git a/client/src/containers/FinancialStatements/FinancialAccountsFilter.js b/client/src/containers/FinancialStatements/FinancialAccountsFilter.js
index 4f6e89585..233865ad0 100644
--- a/client/src/containers/FinancialStatements/FinancialAccountsFilter.js
+++ b/client/src/containers/FinancialStatements/FinancialAccountsFilter.js
@@ -54,7 +54,7 @@ export default function FinancialAccountsFilter({ ...restProps }) {
                 filterable={false}
                 selectedItem={value}
                 selectedItemProp={'key'}
-                labelProp={'name'}
+                textProp={'name'}
                 onItemSelect={(item) => {
                   setFieldValue('accountsFilter', item.key);
                 }}
diff --git a/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js b/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js
index 7c2f1446e..09346a795 100644
--- a/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js
+++ b/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js
@@ -27,7 +27,7 @@ export default function SelectsListColumnsBy(props) {
                 filterable={false}
                 selectedItem={value}
                 selectedItemProp={'key'}
-                labelProp={'name'}
+                textProp={'name'}
                 onItemSelect={(item) => {
                   form.setFieldValue('displayColumnsType', item.key);
                 }}
diff --git a/client/src/containers/Preferences/General/GeneralForm.js b/client/src/containers/Preferences/General/GeneralForm.js
index ef1239cbd..46a711c8a 100644
--- a/client/src/containers/Preferences/General/GeneralForm.js
+++ b/client/src/containers/Preferences/General/GeneralForm.js
@@ -105,7 +105,7 @@ export default function PreferencesGeneralForm({}) {
               selectedItem={value}
               selectedItemProp={'value'}
               defaultText={<T id={'select_business_location'} />}
-              labelProp={'name'}
+              textProp={'name'}
               popoverProps={{ minimal: true }}
             />
           </FormGroup>
@@ -130,7 +130,7 @@ export default function PreferencesGeneralForm({}) {
               selectedItem={value}
               selectedItemProp={'code'}
               defaultText={<T id={'select_base_currency'} />}
-              labelProp={'label'}
+              textProp={'label'}
               popoverProps={{ minimal: true }}
             />
           </FormGroup>
@@ -150,7 +150,7 @@ export default function PreferencesGeneralForm({}) {
             <ListSelect
               items={fiscalYearOptions}
               selectedItemProp={'value'}
-              labelProp={'name'}
+              textProp={'name'}
               defaultText={<T id={'select_fiscal_year'} />}
               selectedItem={value}
               onItemSelect={(item) => {}}
@@ -173,7 +173,7 @@ export default function PreferencesGeneralForm({}) {
             <ListSelect
               items={languages}
               selectedItemProp={'value'}
-              labelProp={'name'}
+              textProp={'name'}
               defaultText={<T id={'select_language'} />}
               selectedItem={value}
               onItemSelect={(item) => {}}
@@ -227,7 +227,7 @@ export default function PreferencesGeneralForm({}) {
               selectedItem={value}
               selectedItemProp={'value'}
               defaultText={<T id={'select_date_format'} />}
-              labelProp={'name'}
+              textProp={'name'}
               popoverProps={{ minimal: true }}
             />
           </FormGroup>
diff --git a/client/src/containers/Setup/SetupOrganizationForm.js b/client/src/containers/Setup/SetupOrganizationForm.js
index a78ff2651..c8212594b 100644
--- a/client/src/containers/Setup/SetupOrganizationForm.js
+++ b/client/src/containers/Setup/SetupOrganizationForm.js
@@ -321,7 +321,7 @@ function SetupOrganizationForm({
                 selectedItem={values.base_currency}
                 selectedItemProp={'value'}
                 defaultText={<T id={'select_base_currency'} />}
-                labelProp={'name'}
+                textProp={'name'}
               />
             </FormGroup>
           </Col>
@@ -351,7 +351,7 @@ function SetupOrganizationForm({
                 selectedItem={values.language}
                 selectedItemProp={'value'}
                 defaultText={<T id={'select_language'} />}
-                labelProp={'name'}
+                textProp={'name'}
               />
             </FormGroup>
           </Col>
@@ -380,7 +380,7 @@ function SetupOrganizationForm({
             selectedItem={values.fiscal_year}
             selectedItemProp={'value'}
             defaultText={<T id={'select_fiscal_year'} />}
-            labelProp={'name'}
+            textProp={'name'}
           />
         </FormGroup>
 

From b24a5e31e8692ceb4a358dd952360cfb26e92066 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Thu, 14 Jan 2021 15:21:09 +0200
Subject: [PATCH 5/6] feat: checkbox show negative in red.

---
 .../components/NumberFormats/NumberFormatFields.js  | 13 +++++++++++++
 .../NumberFormats/NumberFormats.schema.js           |  1 +
 client/src/components/NumberFormats/index.js        |  4 ++--
 client/src/lang/en/index.js                         |  1 +
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/components/NumberFormats/NumberFormatFields.js b/client/src/components/NumberFormats/NumberFormatFields.js
index e6d380d76..c2a41fea1 100644
--- a/client/src/components/NumberFormats/NumberFormatFields.js
+++ b/client/src/components/NumberFormats/NumberFormatFields.js
@@ -115,6 +115,19 @@ export default function NumberFormatFields({
             </FormGroup>
           )}
         </FastField>
+        {/*------------ show negative in red-----------*/}
+        <FastField name={'show_in_red'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Checkbox
+                inline={true}
+                label={<T id={'show_negative_in_red'} />}
+                name={'show_in_red'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
         {/*------------ Divide on 1000 -----------*/}
         <FastField name={'divide_on_1000'} type={'checkbox'}>
           {({ field }) => (
diff --git a/client/src/components/NumberFormats/NumberFormats.schema.js b/client/src/components/NumberFormats/NumberFormats.schema.js
index bd5412c58..4b67fa97b 100644
--- a/client/src/components/NumberFormats/NumberFormats.schema.js
+++ b/client/src/components/NumberFormats/NumberFormats.schema.js
@@ -6,6 +6,7 @@ import { defaultTo } from 'lodash';
 const Schema = Yup.object().shape({
   format_money: Yup.string(),
   show_zero: Yup.boolean(),
+  show_in_red: Yup.boolean(),
   divide_on_1000: Yup.boolean(),
   negative_format: Yup.string(),
   precision: Yup.string(),
diff --git a/client/src/components/NumberFormats/index.js b/client/src/components/NumberFormats/index.js
index 7357cc3d8..1d1a5a87a 100644
--- a/client/src/components/NumberFormats/index.js
+++ b/client/src/components/NumberFormats/index.js
@@ -14,6 +14,7 @@ function NumberFormats() {
     () => ({
       format_money: '',
       show_zero: '',
+      show_in_red: '',
       divide_on_1000: '',
       negative_format: '',
       precision: '',
@@ -21,8 +22,7 @@ function NumberFormats() {
     [],
   );
   // Handle cancel button click.
-  const handleCancelClick = useCallback(() => {
-  }, []);
+  const handleCancelClick = useCallback(() => {}, []);
 
   // Handle form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index e00248503..fd5942b91 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -961,6 +961,7 @@ export default {
   qty: 'Quantity on hand',
   money_format: 'Money format',
   show_zero: 'Show zero',
+  show_negative_in_red: 'Show negative in red',
   divide_on_1000: 'Divide on 1000',
   negative_format: 'Negative format',
   decimal_places: 'Decimal places',

From 09ea16559d296c66108f57adc6aaf5efd2885f8b Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Sun, 17 Jan 2021 02:40:30 +0200
Subject: [PATCH 6/6] increment & decrement adjustment.

---
 .../DecrementAdjustmentFields.js              | 13 ++++--------
 .../IncrementAdjustmentFields.js              | 15 +++----------
 .../InventoryAdjustmentFormDialogFields.js    | 11 ++++++++--
 .../InventoryAdjustmentFormDialog/utils.js    | 21 ++++++-------------
 4 files changed, 22 insertions(+), 38 deletions(-)

diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js
index 56564d374..4e1820f83 100644
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js
@@ -1,11 +1,10 @@
-import React from 'react';
-import { sumBy, subtract, add } from 'lodash';
+import React, { useRef } from 'react';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { FormGroup, InputGroup, Intent } from '@blueprintjs/core';
 import { inputIntent } from 'utils';
 import { Row, Col, If, FieldRequiredHint } from 'components';
 import { FormattedMessage as T } from 'react-intl';
-import { calculate } from './utils';
+import { decrementCalc, dec } from './utils';
 
 function DecrementAdjustmentFields() {
   return (
@@ -41,7 +40,7 @@ function DecrementAdjustmentFields() {
               <InputGroup
                 {...field}
                 onBlur={(event) => {
-                  setFieldValue('new_quantity', calculate(values, field.value));
+                  setFieldValue('new_quantity', decrementCalc(values, event));
                 }}
               />
             </FormGroup>
@@ -62,13 +61,9 @@ function DecrementAdjustmentFields() {
               helperText={<ErrorMessage name="new_quantity" />}
             >
               <InputGroup
-                medium={'true'}
                 {...field}
                 onBlur={(event) => {
-                  setFieldValue(
-                    'quantity',
-                    subtract(field.value, values.quantity_on_hand),
-                  );
+                  setFieldValue('quantity', decrementCalc(values, event));
                 }}
               />
             </FormGroup>
diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js
index 558a58a9f..286bea519 100644
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
-import { add, sumBy, subtract } from 'lodash';
 import { FormGroup, InputGroup, Intent } from '@blueprintjs/core';
 import { Row, Col, FieldRequiredHint } from 'components';
 import { inputIntent } from 'utils';
 import { FormattedMessage as T } from 'react-intl';
-import { calculate } from './utils';
+import { decrementCalc, incrementCalc } from './utils';
 
 function IncrementAdjustmentFields() {
   return (
@@ -39,13 +38,9 @@ function IncrementAdjustmentFields() {
               fill={true}
             >
               <InputGroup
-                medium={'true'}
                 {...field}
                 onBlur={(event) => {
-                  setFieldValue(
-                    'new_quantity',
-                    calculate(values, event.currentTarget.value),
-                  );
+                  setFieldValue('new_quantity', incrementCalc(values, event));
                 }}
               />
             </FormGroup>
@@ -80,13 +75,9 @@ function IncrementAdjustmentFields() {
               helperText={<ErrorMessage name="new_quantity" />}
             >
               <InputGroup
-                medium={'true'}
                 {...field}
                 onBlur={(event) => {
-                  setFieldValue(
-                    'quantity',
-                    subtract(field.value, values.quantity_on_hand),
-                  );
+                  setFieldValue('quantity', decrementCalc(values, event));
                 }}
               />
             </FormGroup>
diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
index a6dd528e6..c950dc918 100644
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
@@ -10,7 +10,7 @@ import {
 import classNames from 'classnames';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { DateInput } from '@blueprintjs/datetime';
-import { ListSelect, Choose, FieldRequiredHint } from 'components';
+import { ListSelect, Choose, If, FieldRequiredHint } from 'components';
 import {
   inputIntent,
   momentFormatter,
@@ -24,6 +24,7 @@ import DecrementAdjustmentFields from './DecrementAdjustmentFields';
 import AccountsSuggestField from 'components/AccountsSuggestField';
 import withAccounts from 'containers/Accounts/withAccounts';
 import { compose } from 'redux';
+import { decrementCalc, incrementCalc, dec } from './utils';
 
 /**
  * Inventory adjustment form dialogs fields.
@@ -34,7 +35,7 @@ function InventoryAdjustmentFormDialogFields({
 }) {
   const { values } = useFormikContext();
   const { formatMessage } = useIntl();
-  // console.log(values, 'EE');
+
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------ Date -----------*/}
@@ -77,6 +78,12 @@ function InventoryAdjustmentFormDialogFields({
               items={adjustmentType}
               onItemSelect={(type) => {
                 form.setFieldValue('type', type.value);
+                type?.value == 'increment'
+                  ? form.setFieldValue('new_quantity', incrementCalc(values))
+                  : form.setFieldValue(
+                      'new_quantity',
+                      values.quantity_on_hand - values.quantity,
+                    );
               }}
               filterable={false}
               selectedItem={value}
diff --git a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/utils.js b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/utils.js
index 0394d80d4..5585d3707 100644
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/utils.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/utils.js
@@ -1,20 +1,11 @@
-import { add, sumBy, subtract } from 'lodash';
-
-export const calculate = ({ type, quantity_on_hand }, operator) => {
-  const qty = parseInt(quantity_on_hand);
-  const quantity = parseInt(operator);
-
+export const decrementCalc = ({ quantity_on_hand, type }, e) => {
   if (type == 'decrement') {
-    return subtract(qty, quantity);
+    return parseInt(quantity_on_hand, 10) - parseInt(e.currentTarget.value, 10);
   } else {
-    return add(qty, quantity);
+    return e.currentTarget.value - quantity_on_hand;
   }
 };
 
-// function calculate(qty, operator) {
-//   return operator > 0
-//     ? calculate(qty + 1, operator - 1)
-//     : operator < 0
-//     ? calculate(qty - 1, operator + 1)
-//     : qty;
-// }
+export const incrementCalc = ({ quantity_on_hand, quantity }, e) => {
+  return parseInt(quantity_on_hand, 10) + parseInt(quantity, 10);
+};