feat: expand sidebar once open form editor page.

feat: rounding money amount.
feat: optimize page form structure.
feat: refactoring make journal and expense form with FastField component.

client/src/containers/Sales/Estimate/EstimateForm.js

@@ -14,7 +14,7 @@ import {
 } from './EstimateForm.schema';
 
 import EstimateFormHeader from './EstimateFormHeader';
-import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
+import EstimateFormBody from './EstimateFormBody';
 import EstimateFloatingActions from './EstimateFloatingActions';
 import EstimateFormFooter from './EstimateFormFooter';
 import EstimateNumberWatcher from './EstimateNumberWatcher';
@@ -43,9 +43,9 @@ const MIN_LINES_NUMBER = 4;
 const defaultEstimate = {
   index: 0,
   item_id: '',
-  rate: '',
-  discount: 0,
-  quantity: '',
+  rate: 0,
+  discount: '',
+  quantity: 1,
   description: '',
 };
 
@@ -242,7 +242,11 @@ const EstimateForm = ({
   );
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_ESTIMATE)}>
+    <div className={classNames(
+      CLASSES.PAGE_FORM,
+      CLASSES.PAGE_FORM_STRIP_STYLE,
+      CLASSES.PAGE_FORM_ESTIMATE,
+    )}>
       <Formik
         validationSchema={
           isNewMode ? CreateEstimateFormSchema : EditEstimateFormSchema
@@ -256,7 +260,7 @@ const EstimateForm = ({
               onEstimateNumberChanged={handleEstimateNumberChange}
             />
             <EstimateNumberWatcher estimateNumber={estimateNumber} />
-            <EditableItemsEntriesTable filterSellableItems={true} />
+            <EstimateFormBody />
             <EstimateFormFooter />
             <EstimateFloatingActions
               isSubmitting={isSubmitting}

client/src/containers/Sales/Estimate/EstimateForm.schema.js

@@ -1,6 +1,7 @@
 import * as Yup from 'yup';
 import { formatMessage } from 'services/intl';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { isBlank } from 'utils';
 
 const Schema = Yup.object().shape({
   customer_id: Yup.number()
@@ -40,7 +41,7 @@ const Schema = Yup.object().shape({
       item_id: Yup.number()
         .nullable()
         .when(['quantity', 'rate'], {
-          is: (quantity, rate) => quantity || rate,
+          is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
           then: Yup.number().required(),
         }),
       discount: Yup.number().nullable().min(0).max(DATATYPES_LENGTH.INT_10),

client/src/containers/Sales/Estimate/EstimateFormBody.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
+
+export default function EstimateFormBody() {
+
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <EditableItemsEntriesTable filterSellableItems={true} />
+
+    </div>
+  )
+}

client/src/containers/Sales/Estimate/EstimateFormHeader.js

@@ -1,183 +1,26 @@
-import React, { useCallback } from 'react';
-import {
-  FormGroup,
-  InputGroup,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
-import { FastField, ErrorMessage } from 'formik';
-import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
+import React from 'react';
+import { compose } from 'utils';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import {
-  ContactSelecetList,
-  FieldRequiredHint,
-  Icon,
-  InputPrependButton,
-  Row,
-  Col,
-} from 'components';
+
+import { PageFormBigNumber } from 'components';
 
 import withCustomers from 'containers/Customers/withCustomers';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
-import { inputIntent, handleDateChange } from 'utils';
-import { formatMessage } from 'services/intl';
+import EstimateFormHeaderFields from './EstimateFormHeaderFields';
 
 function EstimateFormHeader({
-  //#withCustomers
-  customers,
-  // #withDialogActions
-  openDialog,
   // #ownProps
   onEstimateNumberChanged,
 }) {
-  const handleEstimateNumberChange = useCallback(() => {
-    openDialog('estimate-number-form', {});
-  }, [openDialog]);
-
-  const handleEstimateNumberChanged = (event) => {
-    saveInvoke(onEstimateNumberChanged, event.currentTarget.value);
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <div className={'page-form__primary-section'}>
-        {/* ----------- Customer name ----------- */}
-        <FastField name={'customer_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'customer_name'} />}
-              inline={true}
-              className={classNames(
-                CLASSES.FILL,
-                'form-group--customer',
-              )}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name={'customer_id'} />}
-            >
-              <ContactSelecetList
-                contactsList={customers}
-                selectedContactId={value}
-                defaultSelectText={<T id={'select_customer_account'} />}
-                onContactSelected={(customer) => {
-                  form.setFieldValue('customer_id', customer.id);
-                }}
-                popoverFill={true}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+      <EstimateFormHeaderFields
+        onEstimateNumberChanged={onEstimateNumberChanged}
+      />
 
-        <Row>
-          <Col md={8} className={'col--estimate-date'}>
-            {/* ----------- Estimate date ----------- */}
-            <FastField name={'estimate_date'}>
-              {({ form, field: { value }, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'estimate_date'} />}
-                  inline={true}
-                  labelInfo={<FieldRequiredHint />}
-                  className={classNames(
-                    CLASSES.FILL,
-                    'form-group--estimate-date',
-                  )}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name="estimate_date" />}
-                >
-                  <DateInput
-                    {...momentFormatter('YYYY/MM/DD')}
-                    value={tansformDateValue(value)}
-                    onChange={handleDateChange((formattedDate) => {
-                      form.setFieldValue('estimate_date', formatMessage);
-                    })}
-                    popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-
-          <Col md={4} className={'col--expiration-date'}>
-            {/* ----------- Expiration date ----------- */}
-            <FastField name={'expiration_date'}>
-              {({ form, field: { value }, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'expiration_date'} />}
-                  inline={true}
-                  className={classNames(
-                    CLASSES.FORM_GROUP_LIST_SELECT,
-                    CLASSES.FILL,
-                    'form-group--expiration-date',
-                  )}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name="expiration_date" />}
-                >
-                  <DateInput
-                    {...momentFormatter('YYYY/MM/DD')}
-                    value={tansformDateValue(value)}
-                    onChange={handleDateChange((formattedDate) => {
-                      form.setFieldValue('expiration_date', formattedDate);
-                    })}
-                    popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-        </Row>
-
-        {/* ----------- Estimate number ----------- */}
-        <FastField name={'estimate_number'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'estimate'} />}
-              inline={true}
-              className={('form-group--estimate-number', CLASSES.FILL)}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="estimate_number" />}
-            >
-              <ControlGroup fill={true}>
-                <InputGroup
-                  minimal={true}
-                  {...field}
-                  onBlur={handleEstimateNumberChanged}
-                />
-                <InputPrependButton
-                  buttonProps={{
-                    onClick: handleEstimateNumberChange,
-                    icon: <Icon icon={'settings-18'} />,
-                  }}
-                  tooltip={true}
-                  tooltipProps={{
-                    content: 'Setting your auto-generated estimate number',
-                    position: Position.BOTTOM_LEFT,
-                  }}
-                />
-              </ControlGroup>
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/* ----------- Reference ----------- */}
-        <FastField name={'reference'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'reference'} />}
-              inline={true}
-              className={classNames('form-group--reference', CLASSES.FILL)}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="reference" />}
-            >
-              <InputGroup minimal={true} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
-      </div>
+      <PageFormBigNumber label={'Amount'} amount={0} currencyCode={'LYD'} />
     </div>
   );
 }

client/src/containers/Sales/Estimate/EstimateFormHeaderFields.js

@@ -0,0 +1,182 @@
+import React, { useCallback } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import { FastField, ErrorMessage } from 'formik';
+import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import {
+  ContactSelecetList,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+  Row,
+  Col,
+} from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { inputIntent, handleDateChange } from 'utils';
+import { formatMessage } from 'services/intl';
+
+function EstimateFormHeader({
+  //#withCustomers
+  customers,
+  // #withDialogActions
+  openDialog,
+  // #ownProps
+  onEstimateNumberChanged,
+}) {
+  const handleEstimateNumberChange = useCallback(() => {
+    openDialog('estimate-number-form', {});
+  }, [openDialog]);
+
+  const handleEstimateNumberChanged = (event) => {
+    saveInvoke(onEstimateNumberChanged, event.currentTarget.value);
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ----------- Customer name ----------- */}
+      <FastField name={'customer_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'customer_name'} />}
+            inline={true}
+            className={classNames(CLASSES.FILL, 'form-group--customer')}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_id'} />}
+          >
+            <ContactSelecetList
+              contactsList={customers}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
+              }}
+              popoverFill={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Estimate date ----------- */}
+      <FastField name={'estimate_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'estimate_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames(CLASSES.FILL, 'form-group--estimate-date')}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="estimate_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('estimate_date', formatMessage);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Expiration date ----------- */}
+      <FastField name={'expiration_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'expiration_date'} />}
+            inline={true}
+            className={classNames(
+              CLASSES.FORM_GROUP_LIST_SELECT,
+              CLASSES.FILL,
+              'form-group--expiration-date',
+            )}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="expiration_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('expiration_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Estimate number ----------- */}
+      <FastField name={'estimate_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'estimate'} />}
+            inline={true}
+            className={('form-group--estimate-number', CLASSES.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="estimate_number" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                {...field}
+                onBlur={handleEstimateNumberChanged}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleEstimateNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated estimate number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Reference ----------- */}
+      <FastField name={'reference'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+  withDialogActions,
+)(EstimateFormHeader);

client/src/containers/Sales/Estimate/Estimates.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
@@ -9,6 +9,7 @@ import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withEstimateActions from './withEstimateActions';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
@@ -24,10 +25,24 @@ function Estimates({
 
   // #withSettingsActions
   requestFetchOptions,
+
+  // #withDashboardActions
+  setSidebarShrink,
+  resetSidebarPreviousExpand
 }) {
   const history = useHistory();
   const { id } = useParams();
 
+  useEffect(() => {
+    // Shrink the sidebar by foce.
+    setSidebarShrink();
+
+    return () => {
+      // Reset the sidebar to the previous status.
+      resetSidebarPreviousExpand();
+    };
+  }, [resetSidebarPreviousExpand, setSidebarShrink]);
+
   const fetchEstimate = useQuery(
     ['estimate', id],
     (key, _id) => requsetFetchEstimate(_id),
@@ -78,4 +93,5 @@ export default compose(
   withCustomersActions,
   withItemsActions,
   withSettingsActions,
+  withDashboardActions,
 )(Estimates);

client/src/containers/Sales/Invoice/InvoiceForm.js

@@ -44,8 +44,8 @@ const defaultInvoice = {
   index: 0,
   item_id: '',
   rate: '',
-  discount: 0,
-  quantity: '',
+  discount: '',
+  quantity: 1,
   description: '',
 };
 
@@ -232,7 +232,11 @@ function InvoiceForm({
   );
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_INVOICE)}>
+    <div className={classNames(
+      CLASSES.PAGE_FORM,
+      CLASSES.PAGE_FORM_STRIP_STYLE,
+      CLASSES.PAGE_FORM_INVOICE
+    )}>
       <Formik
         validationSchema={
           isNewMode ? CreateInvoiceFormSchema : EditInvoiceFormSchema
@@ -246,10 +250,13 @@ function InvoiceForm({
               onInvoiceNumberChanged={handleInvoiceNumberChanged}
             />
             <InvoiceNumberChangeWatcher invoiceNumber={invoiceNumber} />
-            <EditableItemsEntriesTable
-              defaultEntry={defaultInvoice}
-              filterSellableItems={true}
-            />
+
+            <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+              <EditableItemsEntriesTable
+                defaultEntry={defaultInvoice}
+                filterSellableItems={true}
+              />
+            </div>
             <InvoiceFormFooter />
             <InvoiceFloatingActions
               isSubmitting={isSubmitting}
@@ -269,7 +276,6 @@ export default compose(
   withDashboardActions,
   withMediaActions,
   withInvoiceDetail(),
-
   withSettings(({ invoiceSettings }) => ({
     invoiceNextNumber: invoiceSettings?.nextNumber,
     invoiceNumberPrefix: invoiceSettings?.numberPrefix,

client/src/containers/Sales/Invoice/InvoiceForm.schema.js

@@ -1,6 +1,7 @@
 import * as Yup from 'yup';
 import { formatMessage } from 'services/intl';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { isBlank } from 'utils';
 
 const Schema = Yup.object().shape({
   customer_id: Yup.string()
@@ -39,7 +40,7 @@ const Schema = Yup.object().shape({
       item_id: Yup.number()
         .nullable()
         .when(['quantity', 'rate'], {
-          is: (quantity, rate) => quantity || rate,
+          is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
           then: Yup.number().required(),
         }),
       discount: Yup.number().nullable().min(0).max(DATATYPES_LENGTH.INT_10),

client/src/containers/Sales/Invoice/InvoiceFormHeader.js

@@ -1,188 +1,28 @@
-import React, { useCallback } from 'react';
-import {
-  FormGroup,
-  InputGroup,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
-import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
+import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import {
-  ContactSelecetList,
-  FieldRequiredHint,
-  Icon,
-  InputPrependButton,
-  Row,
-  Col,
-} from 'components';
 
-import withCustomers from 'containers/Customers/withCustomers';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-import { inputIntent, handleDateChange } from 'utils';
-
-function InvoiceFormHeader({
-  //#withCustomers
-  customers,
-  //#withDialogActions
-  openDialog,
+import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
+import { PageFormBigNumber } from 'components';
 
+/**
+ * Invoice form header section.
+ */
+export default function InvoiceFormHeader({
   // #ownProps
   onInvoiceNumberChanged,
 }) {
-  const handleInvoiceNumberChange = useCallback(() => {
-    openDialog('invoice-number-form', {});
-  }, [openDialog]);
-
-  const handleInvoiceNumberChanged = (event) => {
-    saveInvoke(onInvoiceNumberChanged, event.currentTarget.value);
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-        {/* ----------- Customer name ----------- */}
-        <FastField name={'customer_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'customer_name'} />}
-              inline={true}
-              className={classNames(
-                'form-group--customer-name',
-                CLASSES.FILL,
-              )}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name={'customer_id'} />}
-            >
-              <ContactSelecetList
-                contactsList={customers}
-                selectedContactId={value}
-                defaultSelectText={<T id={'select_customer_account'} />}
-                onContactSelected={(customer) => {
-                  form.setFieldValue('customer_id', customer.id);
-                }}
-                popoverFill={true}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+      <InvoiceFormHeaderFields
+        onInvoiceNumberChanged={onInvoiceNumberChanged}
+      />
 
-        <Row>
-          <Col md={7} className={'col--invoice-date'}>
-            {/* ----------- Invoice date ----------- */}
-            <FastField name={'invoice_date'}>
-              {({ form, field: { value }, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'invoice_date'} />}
-                  inline={true}
-                  labelInfo={<FieldRequiredHint />}
-                  className={classNames(
-                    'form-group--invoice-date',
-                    CLASSES.FILL,
-                  )}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name="invoice_date" />}
-                >
-                  <DateInput
-                    {...momentFormatter('YYYY/MM/DD')}
-                    value={tansformDateValue(value)}
-                    onChange={handleDateChange((formattedDate) => {
-                      form.setFieldValue('invoice_date', formattedDate);
-                    })}
-                    popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-
-          <Col md={5} className={'col--due-date'}>
-            {/* ----------- Due date ----------- */}
-            <FastField name={'due_date'}>
-              {({ form, field: { value }, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'due_date'} />}
-                  inline={true}
-                  className={classNames(
-                    'form-group--due-date',
-                    CLASSES.FILL,
-                  )}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name="due_date" />}
-                >
-                  <DateInput
-                    {...momentFormatter('YYYY/MM/DD')}
-                    value={tansformDateValue(value)}
-                    onChange={handleDateChange((formattedDate) => {
-                      form.setFieldValue('due_date', formattedDate);
-                    })}
-                    popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-        </Row>
-
-        {/* ----------- Invoice number ----------- */}
-        <FastField name={'invoice_no'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'invoice_no'} />}
-              inline={true}
-              className={classNames('form-group--invoice-no', CLASSES.FILL)}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="invoice_no" />}
-            >
-              <ControlGroup fill={true}>
-                <InputGroup
-                  minimal={true}
-                  {...field}
-                  onBlur={handleInvoiceNumberChanged}
-                />
-                <InputPrependButton
-                  buttonProps={{
-                    onClick: handleInvoiceNumberChange,
-                    icon: <Icon icon={'settings-18'} />,
-                  }}
-                  tooltip={true}
-                  tooltipProps={{
-                    content: 'Setting your auto-generated invoice number',
-                    position: Position.BOTTOM_LEFT,
-                  }}
-                />
-              </ControlGroup>
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/* ----------- Reference ----------- */}
-        <FastField name={'reference'}>
-          {({ field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'reference'} />}
-              inline={true}
-              className={classNames('form-group--reference', CLASSES.FILL)}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="reference" />}
-            >
-              <InputGroup minimal={true} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
-      </div>
+      <PageFormBigNumber
+        label={'Due Amount'}
+        amount={0}
+        currencyCode={'LYD'}
+      />
     </div>
   );
-}
-
-export default compose(
-  withCustomers(({ customers }) => ({
-    customers,
-  })),
-  withDialogActions,
-)(InvoiceFormHeader);
+}

client/src/containers/Sales/Invoice/InvoiceFormHeaderFields.js

@@ -0,0 +1,176 @@
+import React, { useCallback } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
+import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import {
+  ContactSelecetList,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+} from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { inputIntent, handleDateChange } from 'utils';
+
+function InvoiceFormHeaderFields({
+  // #withCustomers
+  customers,
+
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
+  onInvoiceNumberChanged,
+}) {
+  const handleInvoiceNumberChange = useCallback(() => {
+    openDialog('invoice-number-form', {});
+  }, [openDialog]);
+
+  const handleInvoiceNumberChanged = (event) => {
+    saveInvoke(onInvoiceNumberChanged, event.currentTarget.value);
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ----------- Customer name ----------- */}
+      <FastField name={'customer_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'customer_name'} />}
+            inline={true}
+            className={classNames('form-group--customer-name', CLASSES.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_id'} />}
+          >
+            <ContactSelecetList
+              contactsList={customers}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
+              }}
+              popoverFill={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Invoice date ----------- */}
+      <FastField name={'invoice_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'invoice_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--invoice-date', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="invoice_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('invoice_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Due date ----------- */}
+      <FastField name={'due_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'due_date'} />}
+            inline={true}
+            className={classNames('form-group--due-date', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="due_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('due_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Invoice number ----------- */}
+      <FastField name={'invoice_no'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'invoice_no'} />}
+            inline={true}
+            className={classNames('form-group--invoice-no', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="invoice_no" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                {...field}
+                onBlur={handleInvoiceNumberChanged}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleInvoiceNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated invoice number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Reference ----------- */}
+      <FastField name={'reference'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+  withDialogActions,
+)(InvoiceFormHeaderFields);

client/src/containers/Sales/Invoice/Invoices.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
@@ -9,6 +9,7 @@ import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withInvoiceActions from './withInvoiceActions';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
@@ -24,15 +25,29 @@ function Invoices({
 
   // #withSettingsActions
   requestFetchOptions,
+
+  // #withDashboardActions
+  setSidebarShrink,
+  resetSidebarPreviousExpand,
 }) {
   const history = useHistory();
   const { id } = useParams();
 
+  useEffect(() => {
+    // Shrink the sidebar by foce.
+    setSidebarShrink();
+
+    return () => {
+      // Reset the sidebar to the previous status.
+      resetSidebarPreviousExpand();
+    };
+  }, [resetSidebarPreviousExpand, setSidebarShrink]);
+
   const fetchInvoice = useQuery(
     ['invoice', id],
     (key, _id) => requsetFetchInvoice(_id),
     { enabled: !!id },
-  );
+);
 
   const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
 
@@ -64,8 +79,8 @@ function Invoices({
       name={'invoice-form'}
     >
       <InvoiceForm
-        onFormSubmit={handleFormSubmit}
         invoiceId={id}
+        onFormSubmit={handleFormSubmit}
         onCancelForm={handleCancel}
       />
     </DashboardInsider>
@@ -77,4 +92,5 @@ export default compose(
   withCustomersActions,
   withItemsActions,
   withSettingsActions,
+  withDashboardActions,
 )(Invoices);

client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js

@@ -371,6 +371,7 @@ function PaymentReceiveForm({
     <div
       className={classNames(
         CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
         CLASSES.PAGE_FORM_PAYMENT_RECEIVE,
       )}
     >
@@ -388,16 +389,18 @@ function PaymentReceiveForm({
           amountReceived={fullAmountReceived}
           onPaymentReceiveNumberChanged={handlePaymentReceiveNumberChanged}
         />
-        <PaymentReceiveItemsTable
-          paymentReceiveId={paymentReceiveId}
-          customerId={values.customer_id}
-          fullAmount={fullAmount}
-          onUpdateData={handleUpdataData}
-          paymentReceiveEntries={localPaymentEntries}
-          errors={errors?.entries}
-          onClickClearAllLines={handleClearAllLines}
-          onFetchEntriesSuccess={handleFetchEntriesSuccess}
-        />
+        <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+          <PaymentReceiveItemsTable
+            paymentReceiveId={paymentReceiveId}
+            customerId={values.customer_id}
+            fullAmount={fullAmount}
+            onUpdateData={handleUpdataData}
+            paymentReceiveEntries={localPaymentEntries}
+            errors={errors?.entries}
+            onClickClearAllLines={handleClearAllLines}
+            onFetchEntriesSuccess={handleFetchEntriesSuccess}
+          />
+        </div>
         <Alert
           cancelButtonText={<T id={'cancel'} />}
           confirmButtonText={<T id={'ok'} />}

client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js

@@ -142,6 +142,9 @@ function PaymentReceiveFormHeader({
               value={tansformDateValue(values.payment_date)}
               onChange={handleDateChange('payment_date')}
               popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: (<Icon icon={'date-range'} />),
+              }}
             />
           </FormGroup>
 

client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js

@@ -32,10 +32,24 @@ function PaymentReceiveFormPage({
   requestFetchPaymentReceive,
 
   // #withCustomersActions
-  requestFetchCustomers
+  requestFetchCustomers,
+
+  // #withDashboardActions
+  setSidebarShrink,
+  resetSidebarPreviousExpand,
 }) {
   const { id: paymentReceiveId } = useParams();
 
+  useEffect(() => {
+    // Shrink the sidebar by foce.
+    setSidebarShrink();
+
+    return () => {
+      // Reset the sidebar to the previous status.
+      resetSidebarPreviousExpand();
+    };
+  }, [resetSidebarPreviousExpand, setSidebarShrink]);
+
   // Fetches payment recevie details.
   const fetchPaymentReceive = useQuery(
     ['payment-receive', paymentReceiveId],

client/src/containers/Sales/Receipt/ReceiptForm.js

@@ -16,7 +16,7 @@ import {
 } from './ReceiptForm.schema';
 
 import ReceiptFromHeader from './ReceiptFormHeader';
-import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
+import ReceiptFormBody from './ReceiptFormBody';
 import ReceiptFormFloatingActions from './ReceiptFormFloatingActions';
 import ReceiptFormFooter from './ReceiptFormFooter';
 import ReceiptNumberWatcher from './ReceiptNumberWatcher';
@@ -245,7 +245,11 @@ function ReceiptForm({
   );
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_RECEIPT, CLASSES.PAGE_FORM)}>
+    <div className={classNames(
+      CLASSES.PAGE_FORM,
+      CLASSES.PAGE_FORM_STRIP_STYLE,
+      CLASSES.PAGE_FORM_RECEIPT,
+    )}>
       <Formik
         validationSchema={
           isNewMode ? CreateReceiptFormSchema : EditReceiptFormSchema
@@ -259,7 +263,7 @@ function ReceiptForm({
               onReceiptNumberChanged={handleReceiptNumberChanged}
             />
             <ReceiptNumberWatcher receiptNumber={receiptNumber} />
-            <EditableItemsEntriesTable filterSellableItems={true} />
+            <ReceiptFormBody />
             <ReceiptFormFooter />
             <ReceiptFormFloatingActions
               isSubmitting={isSubmitting}

client/src/containers/Sales/Receipt/ReceiptForm.schema.js

@@ -1,6 +1,7 @@
 import * as Yup from 'yup';
 import { formatMessage } from 'services/intl';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { isBlank } from 'utils';
 
 const Schema = Yup.object().shape({
   customer_id: Yup.string()
@@ -40,7 +41,7 @@ const Schema = Yup.object().shape({
       item_id: Yup.number()
         .nullable()
         .when(['quantity', 'rate'], {
-          is: (quantity, rate) => quantity || rate,
+          is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
           then: Yup.number().required(),
         }),
       discount: Yup.number().nullable().min(0).max(DATATYPES_LENGTH.INT_10),

client/src/containers/Sales/Receipt/ReceiptFormBody.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
+
+export default function ExpenseFormBody() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <EditableItemsEntriesTable filterSellableItems={true} />
+    </div>
+  )
+}

client/src/containers/Sales/Receipt/ReceiptFormHeader.js

@@ -1,195 +1,28 @@
-import React, { useCallback } from 'react';
-import {
-  FormGroup,
-  InputGroup,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
-
-import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
+import React from 'react';
 import classNames from 'classnames';
-import { FastField, ErrorMessage } from 'formik';
 
+import { Money } from 'components';
 import { CLASSES } from 'common/classes';
-import {
-  AccountsSelectList,
-  ContactSelecetList,
-  FieldRequiredHint,
-  Icon,
-  InputPrependButton,
-} from 'components';
-
-import withCustomers from 'containers/Customers/withCustomers';
-import withAccounts from 'containers/Accounts/withAccounts';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-import {
-  momentFormatter,
-  compose,
-  tansformDateValue,
-  saveInvoke,
-  handleDateChange,
-  inputIntent,
-} from 'utils';
-
-
-function ReceiptFormHeader({
-  //#withCustomers
-  customers,
-
-  //#withAccouts
-  accountsList,
-
-  //#withDialogActions
-  openDialog,
+import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';
 
+export default function ReceiptFormHeader({
   // #ownProps
   onReceiptNumberChanged,
 }) {
-  const handleReceiptNumberChange = useCallback(() => {
-    openDialog('receipt-number-form', {});
-  }, [openDialog]);
-
-  const handleReceiptNumberChanged = (event) => {
-    saveInvoke(onReceiptNumberChanged, event.currentTarget.value);
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-        {/* ----------- Customer name ----------- */}
-        <FastField name={'customer_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'customer_name'} />}
-              inline={true}
-              className={classNames(CLASSES.FILL, 'form-group--customer')}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name={'customer_id'} />}
-            >
-              <ContactSelecetList
-                contactsList={customers}
-                selectedContactId={value}
-                defaultSelectText={<T id={'select_customer_account'} />}
-                onContactSelected={(contact) => {
-                  form.setFieldValue('customer_id', contact.id);
-                }}
-                popoverFill={true}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+      <ReceiptFormHeaderFields
+        onReceiptNumberChanged={onReceiptNumberChanged}
+      />
 
-        {/* ----------- Deposit account ----------- */}
-        <FastField name={'deposit_account_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'deposit_account'} />}
-              className={classNames(
-                'form-group--deposit-account',
-                CLASSES.FILL,
-              )}
-              inline={true}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name={'deposit_account_id'} />}
-            >
-              <AccountsSelectList
-                accounts={accountsList}
-                onAccountSelected={(account) => {
-                  form.setFieldValue('deposit_account_id', account.id);
-                }}
-                defaultSelectText={<T id={'select_deposit_account'} />}
-                selectedAccountId={value}
-                filterByTypes={['current_asset']}
-                popoverFill={true}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/* ----------- Receipt date ----------- */}
-        <FastField name={'receipt_date'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'receipt_date'} />}
-              inline={true}
-              className={classNames(CLASSES.FILL)}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="receipt_date" />}
-            >
-              <DateInput
-                {...momentFormatter('YYYY/MM/DD')}
-                value={tansformDateValue(value)}
-                onChange={handleDateChange((formattedDate) => {
-                  form.setFieldValue('receipt_date', formattedDate);
-                })}
-                popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/* ----------- Receipt number ----------- */}
-        <FastField name={'receipt_number'}>
-          {({ field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'receipt'} />}
-              inline={true}
-              className={('form-group--receipt_number', CLASSES.FILL)}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="receipt_number" />}
-            >
-              <ControlGroup fill={true}>
-                <InputGroup
-                  minimal={true}
-                  {...field}
-                  onBlur={handleReceiptNumberChanged}
-                />
-                <InputPrependButton
-                  buttonProps={{
-                    onClick: handleReceiptNumberChange,
-                    icon: <Icon icon={'settings-18'} />,
-                  }}
-                  tooltip={true}
-                  tooltipProps={{
-                    content: 'Setting your auto-generated receipt number',
-                    position: Position.BOTTOM_LEFT,
-                  }}
-                />
-              </ControlGroup>
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/* ----------- Reference ----------- */}
-        <FastField name={'reference'}>
-          {({ field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'reference'} />}
-              inline={true}
-              className={classNames('form-group--reference', CLASSES.FILL)}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="reference" />}
-            >
-              <InputGroup minimal={true} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
+      <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
+        <div class="big-amount">
+          <span class="big-amount__label">Due Amount</span>
+          <h1 class="big-amount__number">
+            <Money amount={0} currency={'LYD'} />
+          </h1>
+        </div>
       </div>
     </div>
   );
 }
-
-export default compose(
-  withCustomers(({ customers }) => ({
-    customers,
-  })),
-  withAccounts(({ accountsList }) => ({
-    accountsList,
-  })),
-  withDialogActions,
-)(ReceiptFormHeader);

client/src/containers/Sales/Receipt/ReceiptFormHeaderFields.js

@@ -0,0 +1,195 @@
+import React, { useCallback } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+import { FastField, ErrorMessage } from 'formik';
+
+import { CLASSES } from 'common/classes';
+import {
+  AccountsSelectList,
+  ContactSelecetList,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+} from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+import withAccounts from 'containers/Accounts/withAccounts';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import {
+  momentFormatter,
+  compose,
+  tansformDateValue,
+  saveInvoke,
+  handleDateChange,
+  inputIntent,
+} from 'utils';
+
+function ReceiptFormHeader({
+  //#withCustomers
+  customers,
+
+  //#withAccouts
+  accountsList,
+
+  //#withDialogActions
+  openDialog,
+
+  // #ownProps
+  onReceiptNumberChanged,
+}) {
+  const handleReceiptNumberChange = useCallback(() => {
+    openDialog('receipt-number-form', {});
+  }, [openDialog]);
+
+  const handleReceiptNumberChanged = (event) => {
+    saveInvoke(onReceiptNumberChanged, event.currentTarget.value);
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ----------- Customer name ----------- */}
+      <FastField name={'customer_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'customer_name'} />}
+            inline={true}
+            className={classNames(CLASSES.FILL, 'form-group--customer')}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_id'} />}
+          >
+            <ContactSelecetList
+              contactsList={customers}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(contact) => {
+                form.setFieldValue('customer_id', contact.id);
+              }}
+              popoverFill={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Deposit account ----------- */}
+      <FastField name={'deposit_account_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'deposit_account'} />}
+            className={classNames('form-group--deposit-account', CLASSES.FILL)}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'deposit_account_id'} />}
+          >
+            <AccountsSelectList
+              accounts={accountsList}
+              onAccountSelected={(account) => {
+                form.setFieldValue('deposit_account_id', account.id);
+              }}
+              defaultSelectText={<T id={'select_deposit_account'} />}
+              selectedAccountId={value}
+              filterByTypes={['current_asset']}
+              popoverFill={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Receipt date ----------- */}
+      <FastField name={'receipt_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'receipt_date'} />}
+            inline={true}
+            className={classNames(CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="receipt_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('receipt_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Receipt number ----------- */}
+      <FastField name={'receipt_number'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'receipt'} />}
+            inline={true}
+            className={('form-group--receipt_number', CLASSES.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="receipt_number" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                {...field}
+                onBlur={handleReceiptNumberChanged}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleReceiptNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated receipt number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+                inputProps={{
+                  leftIcon: <Icon icon={'date-range'} />,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Reference ----------- */}
+      <FastField name={'reference'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+  withAccounts(({ accountsList }) => ({
+    accountsList,
+  })),
+  withDialogActions,
+)(ReceiptFormHeader);

client/src/containers/Sales/Receipt/Receipts.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
@@ -10,6 +10,7 @@ import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withReceiptActions from './withReceiptActions';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
@@ -28,10 +29,24 @@ function Receipts({
 
   // #withSettingsActions
   requestFetchOptions,
+
+  // #withDashboardActions
+  setSidebarShrink,
+  resetSidebarPreviousExpand,
 }) {
   const history = useHistory();
   const { id } = useParams();
 
+  useEffect(() => {
+    // Shrink the sidebar by foce.
+    setSidebarShrink();
+
+    return () => {
+      // Reset the sidebar to the previous status.
+      resetSidebarPreviousExpand();
+    };
+  }, [resetSidebarPreviousExpand, setSidebarShrink]);  
+
   const fetchReceipt = useQuery(
     ['receipt', id],
     (key, _id) => requestFetchReceipt(_id),
@@ -86,4 +101,5 @@ export default compose(
   withItemsActions,
   withAccountsActions,
   withSettingsActions,
+  withDashboardActions
 )(Receipts);