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/Purchases/Bill/BillForm.js

@@ -12,7 +12,7 @@ import { EditBillFormSchema, CreateBillFormSchema } from './BillForm.schema';
 import BillFormHeader from './BillFormHeader';
 import BillFloatingActions from './BillFloatingActions';
 import BillFormFooter from './BillFormFooter';
-import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
+
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
@@ -23,6 +23,7 @@ import { AppToaster } from 'components';
 
 import { ERROR } from 'common/errors';
 import { compose, repeatValue, defaultToTransform, orderingLinesIndexes } from 'utils';
+import BillFormBody from './BillFormBody';
 
 const MIN_LINES_NUMBER = 5;
 
@@ -31,7 +32,7 @@ const defaultBill = {
   item_id: '',
   rate: '',
   discount: '',
-  quantity: '',
+  quantity: 1,
   description: '',
 };
 
@@ -198,7 +199,11 @@ function BillForm({
   }, [history]);
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_BILL)}>
+    <div className={classNames(
+      CLASSES.PAGE_FORM,
+      CLASSES.PAGE_FORM_STRIP_STYLE,
+      CLASSES.PAGE_FORM_BILL,
+    )}>
       <Formik
         validationSchema={isNewMode ? CreateBillFormSchema : EditBillFormSchema}
         initialValues={initialValues}
@@ -207,10 +212,7 @@ function BillForm({
         {({ isSubmitting, values }) => (
           <Form>
             <BillFormHeader onBillNumberChanged={handleBillNumberChanged} />
-            <EditableItemsEntriesTable
-              defaultEntry={defaultBill}
-              filterPurchasableItems={true}
-            />
+            <BillFormBody defaultBill={defaultBill} />
             <BillFormFooter
               oninitialFiles={[]}
               // onDropFiles={handleDeleteFile}

client/src/containers/Purchases/Bill/BillForm.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 BillFormSchema = Yup.object().shape({
   vendor_id: Yup.number()
@@ -34,7 +35,7 @@ const BillFormSchema = 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(),
         }),
       total: Yup.number().nullable(),

client/src/containers/Purchases/Bill/BillFormBody.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 BillFormBody({ defaultBill }) {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <EditableItemsEntriesTable
+        defaultEntry={defaultBill}
+        filterPurchasableItems={true}
+      />
+    </div>
+  );
+}

client/src/containers/Purchases/Bill/BillFormHeader.js

@@ -1,164 +1,20 @@
 import React from 'react';
-import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
-import { FastField, ErrorMessage } from 'formik';
 import classNames from 'classnames';
+
 import { CLASSES } from 'common/classes';
-import { ContactSelecetList, FieldRequiredHint, Row, Col } from 'components';
 
-import withVendors from 'containers/Vendors/withVendors';
-import withAccounts from 'containers/Accounts/withAccounts';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-import {
-  momentFormatter,
-  compose,
-  tansformDateValue,
-  handleDateChange,
-  inputIntent,
-  saveInvoke,
-} from 'utils';
+import BillFormHeaderFields from './BillFormHeaderFields';
+import { PageFormBigNumber } from 'components';
 
 /**
  * Fill form header.
  */
-function BillFormHeader({
-  onBillNumberChanged,
-
-  //#withVendors
-  vendorItems,
-}) {
-  const handleBillNumberBlur = (event) => {
-    saveInvoke(onBillNumberChanged, event.currentTarget.value);
-  };
-
+export default function BillFormHeader({ onBillNumberChanged }) {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <div className={'page-form__primary-section'}>
-        {/* ------- Vendor name ------ */}
-        <FastField name={'vendor_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'vendor_name'} />}
-              inline={true}
-              className={classNames(CLASSES.FILL, 'form-group--vendor')}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name={'vendor_id'} />}
-            >
-              <ContactSelecetList
-                contactsList={vendorItems}
-                selectedContactId={value}
-                defaultSelectText={<T id={'select_vender_account'} />}
-                onContactSelected={(contact) => {
-                  form.setFieldValue('vendor_id', contact.id);
-                }}
-                popoverFill={true}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+      <BillFormHeaderFields onBillNumberChanged={onBillNumberChanged} />
 
-        <Row className={'row--bill-date'}>
-          <Col md={7}>
-            {/* ------- Bill date ------- */}
-            <FastField name={'bill_date'}>
-              {({ form, field: { value }, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'bill_date'} />}
-                  inline={true}
-                  labelInfo={<FieldRequiredHint />}
-                  className={classNames(CLASSES.FILL)}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name="bill_date" />}
-                >
-                  <DateInput
-                    {...momentFormatter('YYYY/MM/DD')}
-                    value={tansformDateValue(value)}
-                    onChange={handleDateChange((formattedDate) => {
-                      form.setFieldValue('bill_date', formattedDate);
-                    })}
-                    popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-
-          <Col md={5}>
-            {/* ------- 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',
-                    'form-group--select-list',
-                    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>
-
-        {/* ------- Bill number ------- */}
-        <FastField name={'bill_number'}>
-          {({ field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'bill_number'} />}
-              inline={true}
-              className={('form-group--bill_number', CLASSES.FILL)}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="bill_number" />}
-            >
-              <InputGroup
-                minimal={true}
-                {...field}
-                onBlur={handleBillNumberBlur}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/* ------- Reference ------- */}
-        <FastField name={'reference_no'}>
-          {({ 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(
-  withVendors(({ vendorItems }) => ({
-    vendorItems,
-  })),
-  withAccounts(({ accountsList }) => ({
-    accountsList,
-  })),
-  withDialogActions,
-)(BillFormHeader);

client/src/containers/Purchases/Bill/BillFormHeaderFields.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import { FastField, ErrorMessage } from 'formik';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import { ContactSelecetList, FieldRequiredHint, Icon } from 'components';
+
+import withVendors from 'containers/Vendors/withVendors';
+import withAccounts from 'containers/Accounts/withAccounts';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import {
+  momentFormatter,
+  compose,
+  tansformDateValue,
+  handleDateChange,
+  inputIntent,
+  saveInvoke,
+} from 'utils';
+
+/**
+ * Fill form header.
+ */
+function BillFormHeader({
+  onBillNumberChanged,
+
+  //#withVendors
+  vendorItems,
+}) {
+  const handleBillNumberBlur = (event) => {
+    saveInvoke(onBillNumberChanged, event.currentTarget.value);
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ------- Vendor name ------ */}
+      <FastField name={'vendor_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'vendor_name'} />}
+            inline={true}
+            className={classNames(CLASSES.FILL, 'form-group--vendor')}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'vendor_id'} />}
+          >
+            <ContactSelecetList
+              contactsList={vendorItems}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_vender_account'} />}
+              onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
+              }}
+              popoverFill={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------- Bill date ------- */}
+      <FastField name={'bill_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'bill_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames(CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="bill_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('bill_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, 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',
+              'form-group--select-list',
+              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 }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------- Bill number ------- */}
+      <FastField name={'bill_number'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'bill_number'} />}
+            inline={true}
+            className={('form-group--bill_number', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="bill_number" />}
+          >
+            <InputGroup
+              minimal={true}
+              {...field}
+              onBlur={handleBillNumberBlur}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------- Reference ------- */}
+      <FastField name={'reference_no'}>
+        {({ 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(
+  withVendors(({ vendorItems }) => ({
+    vendorItems,
+  })),
+  withAccounts(({ accountsList }) => ({
+    accountsList,
+  })),
+  withDialogActions,
+)(BillFormHeader);

client/src/containers/Purchases/Bill/Bills.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 withBillActions from './withBillActions';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
@@ -28,10 +29,24 @@ function Bills({
 
   // #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]);
+
   // Handle fetch accounts
   const fetchAccounts = useQuery('accounts-list', (key) =>
     requestFetchAccounts(),
@@ -89,4 +104,5 @@ export default compose(
   withItemsActions,
   withAccountsActions,
   withSettingsActions,
+  withDashboardActions
 )(Bills);

client/src/containers/Purchases/PaymentMades/PaymentMade.js

@@ -34,10 +34,22 @@ function PaymentMade({
 
   // #withDashboardActions
   changePageTitle,
+  setSidebarShrink,
+  resetSidebarPreviousExpand,
 }) {
   const { id: paymentMadeId } = useParams();
   const { formatMessage } = useIntl();
 
+  useEffect(() => {
+    // Shrink the sidebar by foce.
+    setSidebarShrink();
+
+    return () => {
+      // Reset the sidebar to the previous status.
+      resetSidebarPreviousExpand();
+    };
+  }, [resetSidebarPreviousExpand, setSidebarShrink]);
+
   // Handle page title change in new and edit mode.
   useEffect(() => {
     if (paymentMadeId) {

client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js

@@ -31,7 +31,7 @@ const ERRORS = {
   PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
 };
 
-// Default payment made entry values.
+// Default payment made entry values.x
 const defaultPaymentMadeEntry = {
   bill_id: '',
   payment_amount: '',
@@ -96,7 +96,7 @@ function PaymentMadeForm({
   const validationSchema = isNewMode
     ? CreatePaymentMadeFormSchema
     : EditPaymentMadeFormSchema;
-    
+
   // Form initial values.
   const initialValues = useMemo(
     () => ({
@@ -302,7 +302,11 @@ function PaymentMadeForm({
 
   return (
     <div
-      className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_PAYMENT_MADE)}
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_PAYMENT_MADE,
+      )}
     >
       <form onSubmit={handleSubmit}>
         <PaymentMadeHeader
@@ -318,17 +322,20 @@ function PaymentMadeForm({
           onPaymentNumberChanged={handlePaymentNoChanged}
           amountPaid={fullAmountPaid}
         />
-        <PaymentMadeItemsTable
-          fullAmount={fullAmount}
-          paymentEntries={localPaymentEntries}
-          vendorId={values.vendor_id}
-          paymentMadeId={paymentMadeId}
-          onUpdateData={handleUpdataData}
-          onClickClearAllLines={handleClearAllLines}
-          errors={errors?.entries}
-          onFetchEntriesSuccess={handleFetchEntriesSuccess}
-          vendorPayableBillsEntrie={[]}
-        />
+
+        <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+          <PaymentMadeItemsTable
+            fullAmount={fullAmount}
+            paymentEntries={localPaymentEntries}
+            vendorId={values.vendor_id}
+            paymentMadeId={paymentMadeId}
+            onUpdateData={handleUpdataData}
+            onClickClearAllLines={handleClearAllLines}
+            errors={errors?.entries}
+            onFetchEntriesSuccess={handleFetchEntriesSuccess}
+            vendorPayableBillsEntrie={[]}
+          />
+        </div>
         <Alert
           cancelButtonText={<T id={'cancel'} />}
           confirmButtonText={<T id={'ok'} />}

client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js

@@ -1,13 +1,12 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import {
   FormGroup,
   InputGroup,
   Intent,
   Position,
-  MenuItem,
   Classes,
+  ControlGroup,
 } from '@blueprintjs/core';
-import { sumBy } from 'lodash';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
 import moment from 'moment';
@@ -19,12 +18,15 @@ import {
   ContactSelecetList,
   ErrorMessage,
   FieldRequiredHint,
+  InputPrependText,
   Money,
   Hint,
+  Icon,
 } from 'components';
 
 import withVender from 'containers/Vendors/withVendors';
 import withAccounts from 'containers/Accounts/withAccounts';
+import withSettings from 'containers/Settings/withSettings';
 
 /**
  * Payment made header form.
@@ -42,6 +44,9 @@ function PaymentMadeFormHeader({
   getFieldProps,
   values,
 
+  //#withSettings
+  baseCurrency,
+
   onFullAmountChanged,
 
   //#withVender
@@ -83,7 +88,7 @@ function PaymentMadeFormHeader({
   };
 
   const handlePaymentNumberBlur = (event) => {
-    onPaymentNumberChanged && onPaymentNumberChanged(event.currentTarget.value)
+    onPaymentNumberChanged && onPaymentNumberChanged(event.currentTarget.value);
   };
 
   return (
@@ -104,7 +109,7 @@ function PaymentMadeFormHeader({
             <ContactSelecetList
               contactsList={vendorItems}
               selectedContactId={values.vendor_id}
-              defaultSelectText={ <T id={'select_vender_account'} /> }
+              defaultSelectText={<T id={'select_vender_account'} />}
               onContactSelected={onChangeSelect('vendor_id')}
               disabled={!isNewMode}
               popoverFill={true}
@@ -117,7 +122,9 @@ function PaymentMadeFormHeader({
             inline={true}
             labelInfo={<FieldRequiredHint />}
             className={classNames('form-group--select-list', Classes.FILL)}
-            intent={errors.payment_date && touched.payment_date && Intent.DANGER}
+            intent={
+              errors.payment_date && touched.payment_date && Intent.DANGER
+            }
             helperText={
               <ErrorMessage name="payment_date" {...{ errors, touched }} />
             }
@@ -127,6 +134,9 @@ function PaymentMadeFormHeader({
               value={tansformDateValue(values.payment_date)}
               onChange={handleDateChange('payment_date')}
               popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
             />
           </FormGroup>
 
@@ -135,26 +145,32 @@ function PaymentMadeFormHeader({
             label={<T id={'full_amount'} />}
             inline={true}
             className={('form-group--full-amount', Classes.FILL)}
-            intent={
-              errors.full_amount && touched.full_amount && Intent.DANGER
-            }
+            intent={errors.full_amount && touched.full_amount && Intent.DANGER}
             labelInfo={<Hint />}
             helperText={
               <ErrorMessage name="full_amount" {...{ errors, touched }} />
             }
           >
-            <InputGroup
-              intent={
-                errors.full_amount && touched.full_amount && Intent.DANGER
-              }
-              minimal={true}
-              value={values.full_amount}
-              {...getFieldProps('full_amount')}
-              onBlur={handleFullAmountBlur}
-            />
+            <ControlGroup>
+              <InputPrependText text={baseCurrency} />
+              <InputGroup
+                intent={
+                  errors.full_amount && touched.full_amount && Intent.DANGER
+                }
+                minimal={true}
+                value={values.full_amount}
+                {...getFieldProps('full_amount')}
+                onBlur={handleFullAmountBlur}
+              />
+            </ControlGroup>
 
-            <a onClick={handleReceiveFullAmountClick} href="#" className={'receive-full-amount'}>
-              Receive full amount (<Money amount={payableFullAmount} currency={'USD'} />)
+            <a
+              onClick={handleReceiveFullAmountClick}
+              href="#"
+              className={'receive-full-amount'}
+            >
+              Receive full amount (
+              <Money amount={payableFullAmount} currency={'USD'} />)
             </a>
           </FormGroup>
 
@@ -200,7 +216,7 @@ function PaymentMadeFormHeader({
                 name={'payment_account_id'}
                 {...{ errors, touched }}
               />
-          }
+            }
           >
             <AccountsSelectList
               accounts={accountsList}
@@ -218,7 +234,9 @@ function PaymentMadeFormHeader({
             inline={true}
             className={classNames('form-group--reference', Classes.FILL)}
             intent={errors.reference && touched.reference && Intent.DANGER}
-            helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+            helperText={
+              <ErrorMessage name="reference" {...{ errors, touched }} />
+            }
           >
             <InputGroup
               intent={errors.reference && touched.reference && Intent.DANGER}
@@ -249,4 +267,7 @@ export default compose(
   withAccounts(({ accountsList }) => ({
     accountsList,
   })),
+  withSettings(({ organizationSettings }) => ({
+    baseCurrency: organizationSettings?.baseCurrency,
+  })),
 )(PaymentMadeFormHeader);