From 69e7612b624cb962660cc414bfe62113c245b3ff Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Thu, 5 Nov 2020 12:16:28 +0200
Subject: [PATCH] feat: payment receive and made form.

---
 client/src/common/classes.js                  |   3 +
 .../src/containers/Purchases/Bill/BillForm.js |  18 +-
 .../Purchases/Bill/BillFormHeader.js          |   6 +
 .../containers/Purchases/Bill/withBills.js    |  11 +-
 .../Purchases/PaymentMades/PaymentMade.js     |   1 +
 .../PaymentMades/PaymentMadeFooter.js         |  32 ++
 .../Purchases/PaymentMades/PaymentMadeForm.js | 175 +++++++---
 .../PaymentMades/PaymentMadeFormHeader.js     | 288 ++++++++--------
 .../PaymentMades/PaymentMadeItemsTable.js     | 106 +++---
 .../PaymentMadeItemsTableEditor.js            |  10 +-
 .../Purchases/PaymentMades/withPaymentMade.js |   7 +-
 .../containers/Sales/Invoice/InvoiceForm.js   |   1 -
 .../Sales/Invoice/InvoiceFormHeader.js        |   1 -
 .../containers/Sales/Invoice/withInvoices.js  |  12 +-
 .../PaymentReceive/PaymentReceiveForm.js      | 188 +++++++----
 .../PaymentReceiveFormFooter.js               |  32 ++
 .../PaymentReceiveFormHeader.js               | 308 +++++++++---------
 .../PaymentReceive/PaymentReceiveFormPage.js  |  13 +-
 .../PaymentReceiveItemsTable.js               |  91 +++---
 .../PaymentReceiveItemsTableEditor.js         |  11 +-
 .../Sales/PaymentReceive/PaymentReceives.js   | 103 ------
 .../withPaymentReceiveDetail.js               |   5 +-
 client/src/lang/en/index.js                   |   3 +-
 client/src/routes/dashboard.js                |   4 +-
 client/src/store/Bills/bills.reducer.js       |   8 +
 client/src/store/Bills/bills.selectors.js     |  60 ++--
 client/src/store/Bills/bills.type.js          |   2 +-
 client/src/store/Invoice/invoices.actions.js  |   1 -
 client/src/store/Invoice/invoices.reducer.js  |  10 +-
 client/src/store/Invoice/invoices.selector.js |  45 +--
 client/src/store/Invoice/invoices.types.js    |   3 +-
 .../store/PaymentMades/paymentMade.actions.js |  19 +-
 .../PaymentMades/paymentMade.selector.js      |  50 ++-
 .../PaymentReceive/paymentReceive.actions.js  |  21 +-
 .../PaymentReceive/paymentReceive.selector.js |  94 ++++--
 client/src/style/App.scss                     |  34 ++
 client/src/style/pages/payment-made.scss      |  14 +
 client/src/style/pages/payment-receive.scss   |  14 +
 client/src/utils.js                           |  12 +
 server/src/interfaces/SaleInvoice.ts          |   1 +
 server/src/services/Purchases/BillPayments.ts |  16 +-
 server/src/services/Sales/PaymentsReceives.ts |  17 +-
 42 files changed, 1100 insertions(+), 750 deletions(-)
 create mode 100644 client/src/containers/Purchases/PaymentMades/PaymentMadeFooter.js
 create mode 100644 client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js
 delete mode 100644 client/src/containers/Sales/PaymentReceive/PaymentReceives.js

diff --git a/client/src/common/classes.js b/client/src/common/classes.js
index f6112b1a8..ca94a067a 100644
--- a/client/src/common/classes.js
+++ b/client/src/common/classes.js
@@ -8,6 +8,9 @@ const CLASSES = {
   PAGE_FORM: 'page-form',
   PAGE_FORM_HEADER: 'page-form__header',
   PAGE_FORM_HEADER_PRIMARY: 'page-form__primary-section',
+  PAGE_FORM_HEADER_FIELDS: 'page-form__header-fields',
+  PAGE_FORM_HEADER_BIG_NUMBERS: 'page-form__big-numbers',
+  
   PAGE_FORM_FOOTER: 'page-form__footer',
   PAGE_FORM_FLOATING_ACTIONS: 'page-form__floating-actions',
 
diff --git a/client/src/containers/Purchases/Bill/BillForm.js b/client/src/containers/Purchases/Bill/BillForm.js
index 47c800e5a..9a05536eb 100644
--- a/client/src/containers/Purchases/Bill/BillForm.js
+++ b/client/src/containers/Purchases/Bill/BillForm.js
@@ -13,10 +13,12 @@ import classNames from 'classnames';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
 import { CLASSES } from 'common/classes';
+
 import BillFormHeader from './BillFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
 import BillFloatingActions from './BillFloatingActions';
 import BillFormFooter from './BillFormFooter';
+
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withBillActions from './withBillActions';
@@ -41,6 +43,7 @@ function BillForm({
 
   //#withDashboard
   changePageTitle,
+  changePageSubtitle,
 
   //#withBillDetail
   bill,
@@ -235,6 +238,7 @@ function BillForm({
             setSubmitting(false);
             saveBillSubmit({ action: 'update', ...payload });
             resetForm();
+            changePageSubtitle('');
           })
           .catch((errors) => {
             handleErrors(errors, { setErrors });
@@ -302,10 +306,22 @@ function BillForm({
       orderingIndex([...formik.values.entries, defaultBill]),
     );
   };
+
+  const handleBillNumberChanged = useCallback((billNumber) => {
+    changePageSubtitle(billNumber);
+  }, []);
+
+  // Clear page subtitle once unmount bill form page.
+  useEffect(() => () => {
+    changePageSubtitle('');
+  }, [changePageSubtitle]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_BILL)}>
       <form onSubmit={formik.handleSubmit}>
-        <BillFormHeader formik={formik} />
+        <BillFormHeader
+          formik={formik}
+          onBillNumberChanged={handleBillNumberChanged} />
 
         <EstimatesItemsTable
           formik={formik}
diff --git a/client/src/containers/Purchases/Bill/BillFormHeader.js b/client/src/containers/Purchases/Bill/BillFormHeader.js
index 135412ce4..6be40af02 100644
--- a/client/src/containers/Purchases/Bill/BillFormHeader.js
+++ b/client/src/containers/Purchases/Bill/BillFormHeader.js
@@ -27,6 +27,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 function BillFormHeader({
   formik: { errors, touched, setFieldValue, getFieldProps, values },
+  onBillNumberChanged,
 
   //#withVendors
   vendorItems,
@@ -73,6 +74,10 @@ function BillFormHeader({
     }
   };
 
+  const handleBillNumberBlur = (event) => {
+    onBillNumberChanged && onBillNumberChanged(event.currentTarget.value);
+  };
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <div className={'page-form__primary-section'}>
@@ -166,6 +171,7 @@ function BillFormHeader({
             intent={errors.bill_number && touched.bill_number && Intent.DANGER}
             minimal={true}
             {...getFieldProps('bill_number')}
+            onBlur={handleBillNumberBlur}
           />
         </FormGroup>
 
diff --git a/client/src/containers/Purchases/Bill/withBills.js b/client/src/containers/Purchases/Bill/withBills.js
index b3c4729f1..94bebc7e2 100644
--- a/client/src/containers/Purchases/Bill/withBills.js
+++ b/client/src/containers/Purchases/Bill/withBills.js
@@ -5,8 +5,7 @@ import {
   getBillPaginationMetaFactory,
   getBillTableQueryFactory,
   getVendorPayableBillsFactory,
-  getPayableBillsByPaymentMadeFactory,
-  getPaymentMadeFormPayableBillsFactory
+  getVendorPayableBillsEntriesFactory,
 } from 'store/Bills/bills.selectors';
 
 export default (mapState) => {
@@ -14,8 +13,7 @@ export default (mapState) => {
   const getBillsPaginationMeta = getBillPaginationMetaFactory();
   const getBillTableQuery = getBillTableQueryFactory();
   const getVendorPayableBills = getVendorPayableBillsFactory();
-  const getPayableBillsByPaymentMade = getPayableBillsByPaymentMadeFactory();
-  const getPaymentMadeFormPayableBills = getPaymentMadeFormPayableBillsFactory();
+  const getVendorPayableBillsEntries = getVendorPayableBillsEntriesFactory();
 
   const mapStateToProps = (state, props) => {
     const tableQuery = getBillTableQuery(state, props);
@@ -29,9 +27,8 @@ export default (mapState) => {
       billsPageination: getBillsPaginationMeta(state, props, tableQuery),
       billsLoading: state.bills.loading,
       nextBillNumberChanged: state.bills.nextBillNumberChanged,
-
-      // vendorPayableBills: getVendorPayableBills(state, props),
-      paymentMadePayableBills: getPaymentMadeFormPayableBills(state, props), 
+      vendorPayableBills: getVendorPayableBills(state, props),
+      vendorPayableBillsEntries: getVendorPayableBillsEntries(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMade.js b/client/src/containers/Purchases/PaymentMades/PaymentMade.js
index 7eee9a8fb..6afad957b 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMade.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMade.js
@@ -83,6 +83,7 @@ function PaymentMade({
     >
       <PaymentMadeForm
         paymentMadeId={paymentMadeId}
+        mode={paymentMadeId ? 'edit' : 'new'}
       /> 
     </DashboardInsider>
   );
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeFooter.js b/client/src/containers/Purchases/PaymentMades/PaymentMadeFooter.js
new file mode 100644
index 000000000..d91bd7606
--- /dev/null
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeFooter.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, TextArea } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import { Row, Col } from 'components';
+import { CLASSES } from 'common/classes';
+
+/**
+ * Payment made form footer.
+ */
+export default function PaymentMadeFooter({
+  getFieldProps
+}) {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <Row>
+        <Col md={8}>
+          {/* --------- Statement --------- */}
+          <FormGroup
+            label={<T id={'statement'} />}
+            className={'form-group--statement'}
+          >
+            <TextArea
+              growVertically={true}
+              {...getFieldProps('description')}
+            />
+          </FormGroup>
+        </Col>
+      </Row>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js b/client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js
index d23cfa486..2d29efe01 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js
@@ -1,30 +1,52 @@
-import React, { useMemo, useState, useCallback } from 'react';
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import moment from 'moment';
 import { Intent, Alert } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick, sumBy } from 'lodash';
+import { pick, sumBy, omit } from 'lodash';
 import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
 
 import { CLASSES } from 'common/classes';
+import { AppToaster } from 'components';
 import PaymentMadeHeader from './PaymentMadeFormHeader';
-import PaymentMadeItemsTable from './PaymentMadeItemsTable';
 import PaymentMadeFloatingActions from './PaymentMadeFloatingActions';
+import PaymentMadeItemsTable from './PaymentMadeItemsTable';
+import PaymentMadeFooter from './PaymentMadeFooter';
 
 import withMediaActions from 'containers/Media/withMediaActions';
 import withPaymentMadeActions from './withPaymentMadeActions';
 import withPaymentMadeDetail from './withPaymentMadeDetail';
 import withPaymentMade from './withPaymentMade';
-import { AppToaster } from 'components';
+import withSettings from 'containers/Settings/withSettings';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose, orderingLinesIndexes } from 'utils';
-import withSettings from 'containers/Settings/withSettings';
-import { useHistory } from 'react-router-dom';
 
 const ERRORS = {
   PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
 };
+
+// Default payment made entry values.
+const defaultPaymentMadeEntry = {
+  bill_id: '',
+  payment_amount: '',
+  id: null,
+  due_amount: null,
+};
+// Default initial values.
+const defaultInitialValues = {
+  full_amount: '',
+  vendor_id: '',
+  payment_account_id: '',
+  payment_date: moment(new Date()).format('YYYY-MM-DD'),
+  reference: '',
+  payment_number: '',
+  description: '',
+  entries: [],
+};
+
 /**
  * Payment made form component.
  */
@@ -40,6 +62,13 @@ function PaymentMadeForm({
   // #withPaymentMadeDetail
   paymentMade,
 
+  // #withBills
+  paymentMadeEntries,
+
+  // #withDashboardActions
+  changePageSubtitle,
+
+  // #ownProps
   paymentMadeId,
 }) {
   const history = useHistory();
@@ -50,6 +79,14 @@ function PaymentMadeForm({
   const [clearFormAlert, setClearFormAlert] = useState(false);
   const [fullAmount, setFullAmount] = useState(null);
 
+  const [localPaymentEntries, setLocalPaymentEntries] = useState(paymentMadeEntries);
+
+  useEffect(() => {
+    if (localPaymentEntries !== paymentMadeEntries) {
+      setLocalPaymentEntries(paymentMadeEntries);
+    }
+  }, [localPaymentEntries, paymentMadeEntries])
+
   // Yup validation schema.
   const validationSchema = Yup.object().shape({
     vendor_id: Yup.string()
@@ -62,7 +99,6 @@ function PaymentMadeForm({
       .required()
       .label(formatMessage({ id: 'payment_account_' })),
     payment_number: Yup.string()
-      .required()
       .label(formatMessage({ id: 'payment_no_' })),
     reference: Yup.string().min(1).max(255).nullable(),
     description: Yup.string(),
@@ -81,27 +117,6 @@ function PaymentMadeForm({
     ),
   });
 
-  // Default payment made entry values.
-  const defaultPaymentMadeEntry = useMemo(
-    () => ({ bill_id: '', payment_amount: '', id: null }),
-    [],
-  );
-
-  // Default initial values.
-  const defaultInitialValues = useMemo(
-    () => ({
-      full_amount: '',
-      vendor_id: '',
-      payment_account_id: '',
-      payment_date: moment(new Date()).format('YYYY-MM-DD'),
-      reference: '',
-      payment_number: '',
-      description: '',
-      entries: [],
-    }),
-    [],
-  );
-
   // Form initial values.
   const initialValues = useMemo(
     () => ({
@@ -110,7 +125,7 @@ function PaymentMadeForm({
             ...pick(paymentMade, Object.keys(defaultInitialValues)),
             full_amount: sumBy(paymentMade.entries, 'payment_amount'),
             entries: [
-              ...paymentMade.entries.map((paymentMadeEntry) => ({
+              ...paymentMadeEntries.map((paymentMadeEntry) => ({
                 ...pick(paymentMadeEntry, Object.keys(defaultPaymentMadeEntry)),
               })),
             ],
@@ -120,7 +135,7 @@ function PaymentMadeForm({
             entries: orderingLinesIndexes(defaultInitialValues.entries),
           }),
     }),
-    [paymentMade, defaultInitialValues, defaultPaymentMadeEntry],
+    [paymentMade, paymentMadeEntries],
   );
 
   const handleSubmitForm = (
@@ -130,9 +145,11 @@ function PaymentMadeForm({
     setSubmitting(true);
 
     // Filters entries that have no `bill_id` or `payment_amount`.
-    const entries = values.entries.filter((item) => {
-      return !item.bill_id || item.payment_amount;
-    });
+    const entries = values.entries
+      .filter((item) => !item.bill_id || item.payment_amount)
+      .map((entry) => ({
+        ...omit(entry, ['due_amount']),
+      }));
     // Total payment amount of entries.
     const totalPaymentAmount = sumBy(entries, 'payment_amount');
 
@@ -159,6 +176,7 @@ function PaymentMadeForm({
       });
       setSubmitting(false);
       resetForm();
+      changePageSubtitle('');
     };
 
     const onError = (errors) => {
@@ -213,10 +231,26 @@ function PaymentMadeForm({
     setAmountChangeAlert(false);
   };
 
+  const transformPaymentEntries = (entries) => {
+    return entries.map((entry) => ({
+      ...pick(entry, Object.keys(defaultPaymentMadeEntry)),
+    }));
+  };
   // Handle update data.
   const handleUpdataData = useCallback(
     (entries) => {
-      setFieldValue('entries', entries);
+      setFieldValue('entries', transformPaymentEntries(entries));
+    },
+    [setFieldValue],
+  );
+
+  const resetEntriesPaymentAmount = (entries) => {
+    return entries.map((entry) => ({ ...entry, payment_amount: 0 }));
+  }
+  // Handle fetch success of vendor bills entries.
+  const handleFetchEntriesSuccess = useCallback(
+    (entries) => {
+      setFieldValue('entries', transformPaymentEntries(entries));
     },
     [setFieldValue],
   );
@@ -236,26 +270,22 @@ function PaymentMadeForm({
   }, [setClearLinesAlert]);
 
   const handleConfirmClearLines = useCallback(() => {
-    setFieldValue(
-      'entries',
-      values.entries.map((entry) => ({
-        ...entry,
-        payment_amount: 0,
-      })),
-    );
+    setLocalPaymentEntries(resetEntriesPaymentAmount(localPaymentEntries));
+    setFieldValue('entries', resetEntriesPaymentAmount(values.entries));
+
     setClearLinesAlert(false);
-  }, [setFieldValue, setClearLinesAlert, values.entries]);
+  }, [setFieldValue, localPaymentEntries, values.entries]);
 
   // Handle clear button click.
   const handleClearBtnClick = useCallback(() => {
     setClearFormAlert(true);
   }, []);
 
-  //
+  // Handle cancel button clear
   const handleCancelClearFormAlert = () => {
     setClearFormAlert(false);
   };
-
+  // Handle confirm button click of clear form alert.
   const handleConfirmCancelClearFormAlert = () => {
     setValues({
       ...defaultInitialValues,
@@ -268,6 +298,24 @@ function PaymentMadeForm({
     });
     setClearFormAlert(false);
   };
+  // Payable full amount.
+  const payableFullAmount = useMemo(() => sumBy(values.entries, 'due_amount'), [
+    values.entries,
+  ]);
+
+  const handlePaymentNoChanged = (paymentNumber) => {
+    changePageSubtitle(paymentNumber);
+  };
+
+ // Clear page subtitle before once page leave.
+  useEffect(() => () => {
+    changePageSubtitle('')
+  }, [changePageSubtitle]);
+
+  const fullAmountPaid = useMemo(
+    () => sumBy(values.entries, 'payment_amount'),
+    [values.entries],
+  );
 
   return (
     <div
@@ -282,50 +330,65 @@ function PaymentMadeForm({
           setFieldValue={setFieldValue}
           getFieldProps={getFieldProps}
           values={values}
+          payableFullAmount={payableFullAmount}
           onFullAmountChanged={handleFullAmountChange}
+          onPaymentNumberChanged={handlePaymentNoChanged}
+          amountPaid={fullAmountPaid}
         />
         <PaymentMadeItemsTable
           fullAmount={fullAmount}
-          paymentEntries={values.entries}
+          paymentEntries={localPaymentEntries}
           vendorId={values.vendor_id}
           paymentMadeId={paymentMadeId}
           onUpdateData={handleUpdataData}
           onClickClearAllLines={handleClearAllLines}
           errors={errors?.entries}
+          onFetchEntriesSuccess={handleFetchEntriesSuccess}
+          vendorPayableBillsEntrie={[]}
         />
         <Alert
           cancelButtonText={<T id={'cancel'} />}
           confirmButtonText={<T id={'ok'} />}
-          intent={Intent.WARNING}
+          intent={Intent.DANGER}
           isOpen={amountChangeAlert}
           onCancel={handleCancelAmountChangeAlert}
           onConfirm={handleConfirmAmountChangeAlert}
         >
-          <p>Are you sure to discard full amount?</p>
+          <p>
+            Changing full amount will change all credit and payment were
+            applied, Is this okay?
+          </p>
         </Alert>
 
         <Alert
           cancelButtonText={<T id={'cancel'} />}
           confirmButtonText={<T id={'ok'} />}
-          intent={Intent.WARNING}
+          intent={Intent.DANGER}
           isOpen={clearLinesAlert}
           onCancel={handleCancelClearLines}
           onConfirm={handleConfirmClearLines}
         >
-          <p>Are you sure to discard full amount?</p>
+          <p>
+            Clearing the table lines will delete all credits and payments were
+            applied. Is this okay?
+          </p>
         </Alert>
 
         <Alert
           cancelButtonText={<T id={'cancel'} />}
           confirmButtonText={<T id={'ok'} />}
-          intent={Intent.WARNING}
+          intent={Intent.DANGER}
           isOpen={clearFormAlert}
           onCancel={handleCancelClearFormAlert}
           onConfirm={handleConfirmCancelClearFormAlert}
         >
-          <p>Are you sure to clear form data.</p>
+          <p>Are you sure you want to clear this transaction?</p>
         </Alert>
 
+        <PaymentMadeFooter
+          getFieldProps={getFieldProps}
+        />
+
         <PaymentMadeFloatingActions
           isSubmitting={isSubmitting}
           onCancelClick={handleCancelClick}
@@ -347,11 +410,15 @@ export default compose(
   withPaymentMadeActions,
   withMediaActions,
   withPaymentMadeDetail(),
-  withPaymentMade(({ nextPaymentNumberChanged }) => ({
-    nextPaymentNumberChanged,
-  })),
+  withPaymentMade(
+    ({ nextPaymentNumberChanged, paymentMadeEntries }, state, props) => ({
+      nextPaymentNumberChanged,
+      paymentMadeEntries,
+    }),
+  ),
   withSettings(({ billPaymentSettings }) => ({
     paymentNextNumber: billPaymentSettings?.next_number,
     paymentNumberPrefix: billPaymentSettings?.number_prefix,
   })),
+  withDashboardActions,
 )(PaymentMadeForm);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js b/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
index 7ceda4763..edda30e8f 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
@@ -23,7 +23,6 @@ import {
   Hint,
 } from 'components';
 
-import withBills from '../Bill/withBills';
 import withVender from 'containers/Vendors/withVendors';
 import withAccounts from 'containers/Accounts/withAccounts';
 
@@ -32,7 +31,9 @@ import withAccounts from 'containers/Accounts/withAccounts';
  */
 function PaymentMadeFormHeader({
   paymentMadeId,
-  vendorId,
+  payableFullAmount,
+  onPaymentNumberChanged,
+  amountPaid = 0,
 
   // #useFormik
   errors,
@@ -49,17 +50,9 @@ function PaymentMadeFormHeader({
 
   //#withAccouts
   accountsList,
-
-  // #withBills
-  paymentMadePayableBills,
 }) {
   const isNewMode = !paymentMadeId;
 
-  const payableFullAmount = useMemo(
-    () => sumBy(paymentMadePayableBills, 'due_amount'),
-    [paymentMadePayableBills],
-  );
-
   const handleDateChange = useCallback(
     (date_filed) => (date) => {
       const formatted = moment(date).format('YYYY-MM-DD');
@@ -119,150 +112,166 @@ function PaymentMadeFormHeader({
     triggerFullAmountChanged(payableFullAmount);
   };
 
+  const handlePaymentNumberBlur = (event) => {
+    onPaymentNumberChanged && onPaymentNumberChanged(event.currentTarget.value)
+  };
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-        {/* ------------ Vendor name ------------ */}
-        <FormGroup
-          label={<T id={'vendor_name'} />}
-          inline={true}
-          className={classNames('form-group--select-list', Classes.FILL)}
-          labelInfo={<FieldRequiredHint />}
-          intent={errors.vendor_id && touched.vendor_id && Intent.DANGER}
-          helperText={
-            <ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
-          }
-        >
-          <ListSelect
-            items={vendorItems}
-            noResults={<MenuItem disabled={true} text="No results." />}
-            itemRenderer={handleVenderRenderer}
-            itemPredicate={handleFilterVender}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onChangeSelect('vendor_id')}
-            selectedItem={values.vendor_id}
-            selectedItemProp={'id'}
-            defaultText={<T id={'select_vender_account'} />}
-            labelProp={'display_name'}
-            buttonProps={{ disabled: !isNewMode }}
-            disabled={!isNewMode}
-          />
-        </FormGroup>
+        <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+          {/* ------------ Vendor name ------------ */}
+          <FormGroup
+            label={<T id={'vendor_name'} />}
+            inline={true}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={errors.vendor_id && touched.vendor_id && Intent.DANGER}
+            helperText={
+              <ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
+            }
+          >
+            <ListSelect
+              items={vendorItems}
+              noResults={<MenuItem disabled={true} text="No results." />}
+              itemRenderer={handleVenderRenderer}
+              itemPredicate={handleFilterVender}
+              popoverProps={{ minimal: true }}
+              onItemSelect={onChangeSelect('vendor_id')}
+              selectedItem={values.vendor_id}
+              selectedItemProp={'id'}
+              defaultText={<T id={'select_vender_account'} />}
+              labelProp={'display_name'}
+              buttonProps={{ disabled: !isNewMode }}
+              disabled={!isNewMode}
+            />
+          </FormGroup>
 
-        {/* ------------ Payment date ------------ */}
-        <FormGroup
-          label={<T id={'payment_date'} />}
-          inline={true}
-          labelInfo={<FieldRequiredHint />}
-          className={classNames('form-group--select-list', Classes.FILL)}
-          intent={errors.payment_date && touched.payment_date && Intent.DANGER}
-          helperText={
-            <ErrorMessage name="payment_date" {...{ errors, touched }} />
-          }
-        >
-          <DateInput
-            {...momentFormatter('YYYY/MM/DD')}
-            value={tansformDateValue(values.payment_date)}
-            onChange={handleDateChange('payment_date')}
-            popoverProps={{ position: Position.BOTTOM, minimal: true }}
-          />
-        </FormGroup>
+          {/* ------------ Payment date ------------ */}
+          <FormGroup
+            label={<T id={'payment_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            intent={errors.payment_date && touched.payment_date && Intent.DANGER}
+            helperText={
+              <ErrorMessage name="payment_date" {...{ errors, touched }} />
+            }
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(values.payment_date)}
+              onChange={handleDateChange('payment_date')}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+            />
+          </FormGroup>
 
-        {/* ------------ Full amount ------------ */}
-        <FormGroup
-          label={<T id={'full_amount'} />}
-          inline={true}
-          className={('form-group--full-amount', Classes.FILL)}
-          intent={
-            errors.full_amount && touched.full_amount && Intent.DANGER
-          }
-          labelInfo={<Hint />}
-          helperText={
-            <ErrorMessage name="full_amount" {...{ errors, touched }} />
-          }
-        >
-          <InputGroup
+          {/* ------------ Full amount ------------ */}
+          <FormGroup
+            label={<T id={'full_amount'} />}
+            inline={true}
+            className={('form-group--full-amount', Classes.FILL)}
             intent={
               errors.full_amount && touched.full_amount && Intent.DANGER
             }
-            minimal={true}
-            value={values.full_amount}
-            {...getFieldProps('full_amount')}
-            onBlur={handleFullAmountBlur}
-          />
+            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}
+            />
 
-          <a onClick={handleReceiveFullAmountClick} href="#" className={'receive-full-amount'}>
-            Receive full amount (<Money amount={payableFullAmount} currency={'USD'} />)
-          </a>
-        </FormGroup>
+            <a onClick={handleReceiveFullAmountClick} href="#" className={'receive-full-amount'}>
+              Receive full amount (<Money amount={payableFullAmount} currency={'USD'} />)
+            </a>
+          </FormGroup>
 
-        {/* ------------ Payment number ------------ */}
-        <FormGroup
-          label={<T id={'payment_no'} />}
-          inline={true}
-          className={('form-group--payment_number', Classes.FILL)}
-          labelInfo={<FieldRequiredHint />}
-          intent={
-            errors.payment_number && touched.payment_number && Intent.DANGER
-          }
-          helperText={
-            <ErrorMessage name="payment_number" {...{ errors, touched }} />
-          }
-        >
-          <InputGroup
+          {/* ------------ Payment number ------------ */}
+          <FormGroup
+            label={<T id={'payment_no'} />}
+            inline={true}
+            className={('form-group--payment_number', Classes.FILL)}
+            labelInfo={<FieldRequiredHint />}
             intent={
               errors.payment_number && touched.payment_number && Intent.DANGER
             }
-            minimal={true}
-            {...getFieldProps('payment_number')}
-          />
-        </FormGroup>
-
-        {/* ------------ Payment account ------------ */}
-        <FormGroup
-          label={<T id={'payment_account'} />}
-          className={classNames(
-            'form-group--payment_account_id',
-            'form-group--select-list',
-            Classes.FILL,
-          )}
-          inline={true}
-          labelInfo={<FieldRequiredHint />}
-          intent={
-            errors.payment_account_id &&
-            touched.payment_account_id &&
-            Intent.DANGER
-          }
-          helperText={
-            <ErrorMessage
-              name={'payment_account_id'}
-              {...{ errors, touched }}
+            helperText={
+              <ErrorMessage name="payment_number" {...{ errors, touched }} />
+            }
+          >
+            <InputGroup
+              intent={
+                errors.payment_number && touched.payment_number && Intent.DANGER
+              }
+              minimal={true}
+              {...getFieldProps('payment_number')}
+              onBlur={handlePaymentNumberBlur}
             />
-        }
-        >
-          <AccountsSelectList
-            accounts={paymentAccounts}
-            labelInfo={<FieldRequiredHint />}
-            onAccountSelected={onChangeSelect('payment_account_id')}
-            defaultSelectText={<T id={'select_payment_account'} />}
-            selectedAccountId={values.payment_account_id}
-          />
-        </FormGroup>
+          </FormGroup>
 
-        {/* ------------ Reference ------------ */}
-        <FormGroup
-          label={<T id={'reference'} />}
-          inline={true}
-          className={classNames('form-group--reference', Classes.FILL)}
-          intent={errors.reference && touched.reference && Intent.DANGER}
-          helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
-        >
-          <InputGroup
+          {/* ------------ Payment account ------------ */}
+          <FormGroup
+            label={<T id={'payment_account'} />}
+            className={classNames(
+              'form-group--payment_account_id',
+              'form-group--select-list',
+              Classes.FILL,
+            )}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            intent={
+              errors.payment_account_id &&
+              touched.payment_account_id &&
+              Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage
+                name={'payment_account_id'}
+                {...{ errors, touched }}
+              />
+          }
+          >
+            <AccountsSelectList
+              accounts={paymentAccounts}
+              labelInfo={<FieldRequiredHint />}
+              onAccountSelected={onChangeSelect('payment_account_id')}
+              defaultSelectText={<T id={'select_payment_account'} />}
+              selectedAccountId={values.payment_account_id}
+            />
+          </FormGroup>
+
+          {/* ------------ Reference ------------ */}
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', Classes.FILL)}
             intent={errors.reference && touched.reference && Intent.DANGER}
-            minimal={true}
-            {...getFieldProps('reference')}
-          />
-        </FormGroup>
+            helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+          >
+            <InputGroup
+              intent={errors.reference && touched.reference && Intent.DANGER}
+              minimal={true}
+              {...getFieldProps('reference')}
+            />
+          </FormGroup>
+        </div>
+
+        <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
+          <div class="big-amount">
+            <span class="big-amount__label">Amount Received</span>
+            <h1 class="big-amount__number">
+              <Money amount={amountPaid} currency={'USD'} />
+            </h1>
+          </div>
+        </div>
       </div>
     </div>
   );
@@ -276,7 +285,4 @@ export default compose(
   withAccounts(({ accountsList }) => ({
     accountsList,
   })),
-  withBills(({ paymentMadePayableBills }) => ({
-    paymentMadePayableBills,
-  })),
 )(PaymentMadeFormHeader);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js b/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js
index 3d323aa84..5c3b6c8b0 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useQuery } from 'react-query';
-import { omit } from 'lodash';
-import { CloudLoadingIndicator } from 'components'
+import { isEmpty } from 'lodash';
+import { CloudLoadingIndicator } from 'components';
 import PaymentMadeItemsTableEditor from './PaymentMadeItemsTableEditor';
 
 import withPaymentMadeActions from './withPaymentMadeActions';
@@ -22,48 +22,51 @@ function PaymentMadeItemsTable({
   paymentEntries = [], // { bill_id: number, payment_amount: number, id?: number }
   onClickClearAllLines,
   errors,
+  onFetchEntriesSuccess,
 
   // #withBillActions
   requestFetchDueBills,
 
   // #withBills
-  paymentMadePayableBills,
-
-  // #withPaymentMadeDetail
-  paymentMade,
+  vendorPayableBillsEntries,
 }) {
-  const [tableData, setTableData] = useState([]);
-  const [localAmount, setLocalAmount] = useState(fullAmount);
-
   const isNewMode = !paymentMadeId;
 
-  const triggerUpdateData = useCallback((entries) => {
-    const _data = entries.map((entry) => ({
-      bill_id: entry?.bill?.id,
-      ...omit(entry, ['bill']),
-    }))
-    onUpdateData && onUpdateData(_data);
-  }, [onUpdateData]);
+  // Detarmines takes vendor payable bills entries in create mode
+  // or payment made entries in edit mode.
+  const computedTableEntries = useMemo(
+    () =>
+      !isEmpty(paymentEntries)
+        ? paymentEntries
+        : (vendorPayableBillsEntries || []),
+    [vendorPayableBillsEntries, paymentEntries],
+  );
+  const [tableData, setTableData] = useState(computedTableEntries);
+  const [localEntries, setLocalEntries] = useState(computedTableEntries);
 
-  // Merges payment entries with payable bills.
-  const computedTableData = useMemo(() => {
-    const entriesTable = new Map(
-      paymentEntries.map((e) => [e.bill_id, e]),
-    );
-    return paymentMadePayableBills.map((bill) => {
-      const entry = entriesTable.get(bill.id);
-      return {
-        bill,
-        id: null,
-        payment_number: 0,
-        ...(entry || {}),
-      }
-    });
-  }, [paymentEntries, paymentMadePayableBills]);
+  const [localAmount, setLocalAmount] = useState(fullAmount);
+
+  // Triggers `onUpdateData` event that passes changed entries.
+  const triggerUpdateData = useCallback(
+    (entries) => {
+      onUpdateData && onUpdateData(entries);
+    },
+    [onUpdateData],
+  );
+
+  const triggerOnFetchBillsSuccess = useCallback(
+    (bills) => {
+      onFetchEntriesSuccess && onFetchEntriesSuccess(bills);
+    },
+    [onFetchEntriesSuccess],
+  );
 
   useEffect(() => {
-    setTableData(computedTableData);
-  }, [computedTableData]);
+    if (computedTableEntries !== localEntries) {
+      setTableData(computedTableEntries);
+      setLocalEntries(computedTableEntries);
+    }
+  }, [computedTableEntries, localEntries]);
 
   // Handle mapping `fullAmount` prop to `localAmount` state.
   useEffect(() => {
@@ -98,14 +101,34 @@ function PaymentMadeItemsTable({
     { enabled: isNewMode && vendorId },
   );
 
-  // Handle update data.
-  const handleUpdateData = (rows) => {
-    triggerUpdateData(rows);
-  };
+  useEffect(() => {
+    const enabled = isNewMode && vendorId;
 
-  const noResultsMessage = (vendorId) ?
-    'There is no payable bills for this vendor that can be applied for this payment' : 
-    'Please select a vendor to display all open bills for it.';
+    if (!fetchVendorDueBills.isFetching && enabled) {
+      triggerOnFetchBillsSuccess(computedTableEntries);
+    }
+  }, [
+    vendorId,
+    isNewMode,
+    fetchVendorDueBills.isFetching,
+    computedTableEntries,
+    triggerOnFetchBillsSuccess,
+  ]);
+
+  // Handle update data.
+  const handleUpdateData = useCallback(
+    (rows) => {
+      setTableData(rows);
+      triggerUpdateData(rows);
+    },
+    [setTableData, triggerUpdateData],
+  );
+
+  // Detarmines the right no results message before selecting vendor and aftering
+  // selecting vendor id.
+  const noResultsMessage = vendorId
+    ? 'There is no payable bills for this vendor that can be applied for this payment'
+    : 'Please select a vendor to display all open bills for it.';
 
   return (
     <CloudLoadingIndicator isLoading={fetchVendorDueBills.isFetching}>
@@ -123,7 +146,8 @@ function PaymentMadeItemsTable({
 export default compose(
   withPaymentMadeActions,
   withBillActions,
-  withBills(({ paymentMadePayableBills }) => ({
+  withBills(({ paymentMadePayableBills, vendorPayableBillsEntries }) => ({
     paymentMadePayableBills,
+    vendorPayableBillsEntries,
   })),
 )(PaymentMadeItemsTable);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js b/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js
index 38860402f..5ead993a8 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js
@@ -43,7 +43,7 @@ export default function PaymentMadeItemsTableEditor({
   noResultsMessage
 }) {
   const transformedData = useMemo(() => {
-    const rows = data;
+    const rows = [ ...data ];
     const totalRow = {
       due_amount: sumBy(data, 'due_amount'),
       payment_amount: sumBy(data, 'payment_amount'),
@@ -74,27 +74,27 @@ export default function PaymentMadeItemsTableEditor({
       {
         Header: formatMessage({ id: 'Date' }),
         id: 'bill_date',
-        accessor: (r) => moment(r.bill?.bill_date).format('YYYY MMM DD'),
+        accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
         Cell: CellRenderer(EmptyDiv, 'bill_date'),
         disableSortBy: true,
       },
       {
         Header: formatMessage({ id: 'bill_number' }),
-        accessor: (row) => `#${row.bill?.bill_number}`,
+        accessor: (row) => `#${row?.bill_number}`,
         Cell: CellRenderer(EmptyDiv, 'bill_number'),
         disableSortBy: true,
         className: 'bill_number',
       },
       {
         Header: formatMessage({ id: 'bill_amount' }),
-        accessor: r => r.bill?.amount,
+        accessor: 'amount',
         Cell: CellRenderer(DivFieldCell, 'amount'),
         disableSortBy: true,
         className: '',
       },
       {
         Header: formatMessage({ id: 'amount_due' }),
-        accessor: r => r.bill?.due_amount,
+        accessor: 'due_amount',
         Cell: TotalCellRederer(DivFieldCell, 'due_amount'),
         disableSortBy: true,
         className: '',
diff --git a/client/src/containers/Purchases/PaymentMades/withPaymentMade.js b/client/src/containers/Purchases/PaymentMades/withPaymentMade.js
index e9e30bce0..4aa1bf8b9 100644
--- a/client/src/containers/Purchases/PaymentMades/withPaymentMade.js
+++ b/client/src/containers/Purchases/PaymentMades/withPaymentMade.js
@@ -5,11 +5,14 @@ import {
   getPaymentMadeCurrentPageFactory,
   getPaymentMadePaginationMetaFactory,
   getPaymentMadeTableQuery,
+  getPaymentMadeEntriesFactory
 } from 'store/PaymentMades/paymentMade.selector';
 
 export default (mapState) => {
   const getPyamentMadesItems = getPaymentMadeCurrentPageFactory();
   const getPyamentMadesPaginationMeta = getPaymentMadePaginationMetaFactory();
+  const getPaymentMadeEntries = getPaymentMadeEntriesFactory();
+
   const mapStateToProps = (state, props) => {
     const query = getPaymentMadeTableQuery(state, props);
     const mapped = {
@@ -23,8 +26,8 @@ export default (mapState) => {
         query,
       ),
       paymentMadesLoading: state.paymentMades.loading,
-      nextPaymentNumberChanged:
-        state.paymentMades.nextPaymentNumberChanged,
+      nextPaymentNumberChanged: state.paymentMades.nextPaymentNumberChanged,
+      paymentMadeEntries: getPaymentMadeEntries(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/client/src/containers/Sales/Invoice/InvoiceForm.js b/client/src/containers/Sales/Invoice/InvoiceForm.js
index 65695d63b..9f963348d 100644
--- a/client/src/containers/Sales/Invoice/InvoiceForm.js
+++ b/client/src/containers/Sales/Invoice/InvoiceForm.js
@@ -98,7 +98,6 @@ function InvoiceForm({
       .required()
       .label(formatMessage({ id: 'due_date_' })),
     invoice_no: Yup.string()
-      .required()
       .label(formatMessage({ id: 'invoice_no_' })),
     reference_no: Yup.string().min(1).max(255),
     status: Yup.string().required(),
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
index ade8b97e0..7ea33ecc4 100644
--- a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
@@ -170,7 +170,6 @@ function InvoiceFormHeader({
           label={<T id={'invoice_no'} />}
           inline={true}
           className={classNames('form-group--invoice-no', CLASSES.FILL)}
-          labelInfo={<FieldRequiredHint />}
           intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
           helperText={
             <ErrorMessage name="invoice_no" {...{ errors, touched }} />
diff --git a/client/src/containers/Sales/Invoice/withInvoices.js b/client/src/containers/Sales/Invoice/withInvoices.js
index 49ec76389..122aaaf80 100644
--- a/client/src/containers/Sales/Invoice/withInvoices.js
+++ b/client/src/containers/Sales/Invoice/withInvoices.js
@@ -4,9 +4,7 @@ import {
   getInvoiceCurrentPageFactory,
   getInvoicePaginationMetaFactory,
   getInvoiceTableQueryFactory,
-  getCustomerReceivableInvoicesFactory,
-  getPaymentReceivableInvoicesFactory,
-  getPaymentReceiveReceivableInvoicesFactory
+  getCustomerReceivableInvoicesEntriesFactory
 } from 'store/Invoice/invoices.selector';
 
 export default (mapState) => {
@@ -15,10 +13,7 @@ export default (mapState) => {
   const getInvoicesPaginationMeta = getInvoicePaginationMetaFactory();
   const getInvoiceTableQuery = getInvoiceTableQueryFactory();
 
-  // const getPaymentReceivableInvoices = getPaymentReceivableInvoicesFactory();
-  // const getCustomerReceivableInvoices = getCustomerReceivableInvoicesFactory();
-  
-  const getPaymentReceiveReceivableInvoices = getPaymentReceiveReceivableInvoicesFactory();
+  const getCustomerReceivableInvoicesEntries = getCustomerReceivableInvoicesEntriesFactory();
 
   const mapStateToProps = (state, props) => {
     const query = getInvoiceTableQuery(state, props);
@@ -30,8 +25,7 @@ export default (mapState) => {
       invoicesTableQuery: query,
       invoicesPageination: getInvoicesPaginationMeta(state, props, query),
       invoicesLoading: state.salesInvoices.loading,
-
-      paymentReceiveReceivableInvoices: getPaymentReceiveReceivableInvoices(state, props),
+      customerInvoiceEntries: getCustomerReceivableInvoicesEntries(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
index 366555a59..38cb287dd 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
@@ -10,7 +10,7 @@ import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import moment from 'moment';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick, sumBy } from 'lodash';
+import { pick, sumBy, omit } from 'lodash';
 import { Intent, Alert } from '@blueprintjs/core';
 import classNames from 'classnames';
 
@@ -18,6 +18,7 @@ import { CLASSES } from 'common/classes';
 import PaymentReceiveHeader from './PaymentReceiveFormHeader';
 import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
 import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
+import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
 
 import withMediaActions from 'containers/Media/withMediaActions';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
@@ -26,23 +27,54 @@ import { AppToaster } from 'components';
 
 import { compose } from 'utils';
 
+// Default payment receive entry.
+const defaultPaymentReceiveEntry = {
+  id: null,
+  payment_amount: null,
+  invoice_id: null,
+  due_amount: null,
+};
+
+// Form initial values.
+const defaultInitialValues = {
+  customer_id: '',
+  deposit_account_id: '',
+  payment_date: moment(new Date()).format('YYYY-MM-DD'),
+  reference_no: '',
+  payment_receive_no: '',
+  description: '',
+  full_amount: '',
+  entries: [],
+};
+
 function PaymentReceiveForm({
   // #ownProps
   paymentReceiveId,
+  mode, //edit, new
 
   //#WithPaymentReceiveActions
   requestSubmitPaymentReceive,
   requestEditPaymentReceive,
 
-  // #withPaymentReceive
+  // #withPaymentReceiveDetail
   paymentReceive,
+  paymentReceiveEntries,
 }) {
   const [amountChangeAlert, setAmountChangeAlert] = useState(false);
   const [clearLinesAlert, setClearLinesAlert] = useState(false);
   const [fullAmount, setFullAmount] = useState(null);
+  const [clearFormAlert, setClearFormAlert] = useState(false);
 
   const { formatMessage } = useIntl();
 
+  const [localPaymentEntries, setLocalPaymentEntries] = useState(paymentReceiveEntries);
+
+  useEffect(() => {
+    if (localPaymentEntries !== paymentReceiveEntries) {
+      setLocalPaymentEntries(paymentReceiveEntries);
+    }
+  }, [localPaymentEntries, paymentReceiveEntries]);
+
   // Form validation schema.
   const validationSchema = Yup.object().shape({
     customer_id: Yup.string()
@@ -55,9 +87,9 @@ function PaymentReceiveForm({
       .required()
       .label(formatMessage({ id: 'deposit_account_' })),
     full_amount: Yup.number().nullable(),
-    payment_receive_no: Yup.number()
-      .required()
-      .label(formatMessage({ id: 'payment_receive_no_' })),
+    payment_receive_no: Yup.number().label(
+      formatMessage({ id: 'payment_receive_no_' }),
+    ),
     reference_no: Yup.string().min(1).max(255).nullable(),
     description: Yup.string().nullable(),
     entries: Yup.array().of(
@@ -74,36 +106,6 @@ function PaymentReceiveForm({
       }),
     ),
   });
-  // Default payment receive.
-  const defaultPaymentReceive = useMemo(
-    () => ({
-      invoice_id: '',
-      invoice_date: moment(new Date()).format('YYYY-MM-DD'),
-      invoice_no: '',
-      balance: '',
-      due_amount: '',
-      payment_amount: '',
-    }),
-    [],
-  );
-  const defaultPaymentReceiveEntry = {
-    id: null,
-    payment_amount: null,
-    invoice_id: null,
-  };
-  // Form initial values.
-  const defaultInitialValues = useMemo(
-    () => ({
-      customer_id: '',
-      deposit_account_id: '',
-      payment_date: moment(new Date()).format('YYYY-MM-DD'),
-      reference_no: '',
-      payment_receive_no: '',
-      description: '',
-      entries: [],
-    }),
-    [],
-  );
 
   // Form initial values.
   const initialValues = useMemo(
@@ -112,8 +114,11 @@ function PaymentReceiveForm({
         ? {
             ...pick(paymentReceive, Object.keys(defaultInitialValues)),
             entries: [
-              ...paymentReceive.entries.map((paymentReceive) => ({
-                ...pick(paymentReceive, Object.keys(defaultPaymentReceive)),
+              ...paymentReceiveEntries.map((paymentReceiveEntry) => ({
+                ...pick(
+                  paymentReceiveEntry,
+                  Object.keys(defaultPaymentReceiveEntry),
+                ),
               })),
             ],
           }
@@ -121,7 +126,7 @@ function PaymentReceiveForm({
             ...defaultInitialValues,
           }),
     }),
-    [paymentReceive, defaultInitialValues, defaultPaymentReceive],
+    [paymentReceive, paymentReceiveEntries],
   );
 
   // Handle form submit.
@@ -135,7 +140,7 @@ function PaymentReceiveForm({
     const entries = values.entries
       .filter((entry) => entry.invoice_id && entry.payment_amount)
       .map((entry) => ({
-        ...pick(entry, Object.keys(defaultPaymentReceiveEntry)),
+        ...omit(entry, ['due_amount']),
       }));
 
     // Calculates the total payment amount of entries.
@@ -148,6 +153,7 @@ function PaymentReceiveForm({
           intent: Intent.WARNING,
         }),
       });
+      setSubmitting(false);
       return;
     }
     const form = { ...values, entries };
@@ -196,6 +202,7 @@ function PaymentReceiveForm({
     handleSubmit,
     isSubmitting,
     touched,
+    resetForm,
   } = useFormik({
     enableReinitialize: true,
     validationSchema,
@@ -205,14 +212,29 @@ function PaymentReceiveForm({
     onSubmit: handleSubmitForm,
   });
 
+  const transformDataTableToEntries = (dataTable) => {
+    return dataTable.map((data) => ({
+      ...pick(data, Object.keys(defaultPaymentReceiveEntry)),
+    }));
+  };
+
   // Handle update data.
   const handleUpdataData = useCallback(
     (entries) => {
-      setFieldValue('entries', entries);
+      setFieldValue('entries', transformDataTableToEntries(entries));
     },
     [setFieldValue],
   );
 
+  // Handle fetch success of customer invoices entries.
+  const handleFetchEntriesSuccess = useCallback(
+    (entries) => {
+      setFieldValue('entries', transformDataTableToEntries(entries));
+    },
+    [setFieldValue],
+  );
+
+  // Handles full amount change.
   const handleFullAmountChange = useCallback(
     (value) => {
       if (value !== fullAmount) {
@@ -241,22 +263,51 @@ function PaymentReceiveForm({
     setFullAmount(amountChangeAlert);
     setAmountChangeAlert(false);
   };
+
+  // Reset entries payment amount.
+  const resetEntriesPaymentAmount = (entries) => {
+    return entries.map((entry) => ({ ...entry, payment_amount: 0 }));
+  };
   // Handle confirm clear all lines.
   const handleConfirmClearLines = useCallback(() => {
-    setFieldValue(
-      'entries',
-      values.entries.map((entry) => ({
-        ...entry,
-        payment_amount: 0,
-      })),
-    );
+    setLocalPaymentEntries(resetEntriesPaymentAmount(localPaymentEntries));
+    setFieldValue('entries', resetEntriesPaymentAmount(values.entries));
     setClearLinesAlert(false);
-  }, [setFieldValue, setClearLinesAlert, values.entries]);
+  }, [setFieldValue, setClearLinesAlert, values.entries, localPaymentEntries]);
+
+  // Handle footer clear button click.
+  const handleClearBtnClick = () => {
+    setClearFormAlert(true);
+  };
+  // Handle cancel button click of clear form alert.
+  const handleCancelClearFormAlert = () => {
+    setClearFormAlert(false);
+  };
+  // Handle confirm button click of clear form alert.
+  const handleConfirmCancelClearFormAlert = () => {
+    resetForm();
+    setClearFormAlert(false);
+    setFullAmount(null);
+  };
+
+  // Calculates the total receivable amount from due amount.
+  const receivableFullAmount = useMemo(
+    () => sumBy(values.entries, 'due_amount'),
+    [values.entries],
+  );
+
+  const fullAmountReceived = useMemo(
+    () => sumBy(values.entries, 'payment_amount'),
+    [values.entries],
+  );
 
   return (
-    <div className={classNames(
-      CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_PAYMENT_RECEIVE
-    )}>
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_PAYMENT_RECEIVE,
+      )}
+    >
       <form onSubmit={handleSubmit}>
         <PaymentReceiveHeader
           errors={errors}
@@ -267,15 +318,18 @@ function PaymentReceiveForm({
           paymentReceiveId={paymentReceiveId}
           customerId={values.customer_id}
           onFullAmountChanged={handleFullAmountChange}
+          receivableFullAmount={receivableFullAmount}
+          amountReceived={fullAmountReceived}
         />
         <PaymentReceiveItemsTable
           paymentReceiveId={paymentReceiveId}
           customerId={values.customer_id}
           fullAmount={fullAmount}
           onUpdateData={handleUpdataData}
-          paymentEntries={values.entries}
+          paymentReceiveEntries={localPaymentEntries}
           errors={errors?.entries}
           onClickClearAllLines={handleClearAllLines}
+          onFetchEntriesSuccess={handleFetchEntriesSuccess}
         />
         <Alert
           cancelButtonText={<T id={'cancel'} />}
@@ -285,8 +339,12 @@ function PaymentReceiveForm({
           onCancel={handleCancelAmountChangeAlert}
           onConfirm={handleConfirmAmountChangeAlert}
         >
-          <p>Are you sure to discard full amount?</p>
+          <p>
+            Changing full amount will change all credits and payment were
+            applied, Is this okay?
+          </p>
         </Alert>
+
         <Alert
           cancelButtonText={<T id={'cancel'} />}
           confirmButtonText={<T id={'ok'} />}
@@ -295,12 +353,31 @@ function PaymentReceiveForm({
           onCancel={handleCancelClearLines}
           onConfirm={handleConfirmClearLines}
         >
-          <p>Are you sure to discard full amount?</p>
+          <p>
+            Clearing the table lines will delete all credits and payment were
+            applied, Is this okay?
+          </p>
         </Alert>
 
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'ok'} />}
+          intent={Intent.WARNING}
+          isOpen={clearFormAlert}
+          onCancel={handleCancelClearFormAlert}
+          onConfirm={handleConfirmCancelClearFormAlert}
+        >
+          <p>Are you sure you want to clear this transaction?</p>
+        </Alert>
+
+        <PaymentReceiveFormFooter
+          getFieldProps={getFieldProps}
+        />
+
         <PaymentReceiveFloatingActions
           isSubmitting={isSubmitting}
           paymentReceiveId={paymentReceiveId}
+          onClearClick={handleClearBtnClick}
         />
       </form>
     </div>
@@ -313,7 +390,8 @@ export default compose(
   // withPaymentReceives(({ paymentReceivesItems }) => ({
   //   paymentReceivesItems,
   // })),
-  withPaymentReceiveDetail(({ paymentReceive }) => ({
+  withPaymentReceiveDetail(({ paymentReceive, paymentReceiveEntries }) => ({
     paymentReceive,
+    paymentReceiveEntries,
   })),
 )(PaymentReceiveForm);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js
new file mode 100644
index 000000000..24cb88267
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, TextArea } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import { Row, Col } from 'components';
+import { CLASSES } from 'common/classes';
+
+/**
+ * Payment receive form footer.
+ */
+export default function PaymentReceiveFormFooter({
+  getFieldProps,
+}) {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <Row>
+        <Col md={8}>
+          {/* --------- Statement --------- */}
+          <FormGroup
+            label={<T id={'statement'} />}
+            className={'form-group--statement'}
+          >
+            <TextArea
+              growVertically={true}
+              {...getFieldProps('description')}
+            />
+          </FormGroup>
+        </Col>
+      </Row>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
index 0396e55da..1164aea1e 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
   FormGroup,
   InputGroup,
@@ -10,10 +10,9 @@ import {
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
 import moment from 'moment';
-import { sumBy } from 'lodash';
 import classNames from 'classnames';
 
-import { CLASSES } from 'common/classes'
+import { CLASSES } from 'common/classes';
 import { momentFormatter, compose, tansformDateValue } from 'utils';
 import {
   AccountsSelectList,
@@ -24,7 +23,6 @@ import {
   Money,
 } from 'components';
 
-import withInvoices from 'containers/Sales/Invoice/withInvoices';
 import withCustomers from 'containers/Customers/withCustomers';
 import withAccounts from 'containers/Accounts/withAccounts';
 
@@ -37,7 +35,8 @@ function PaymentReceiveFormHeader({
   values,
   onFullAmountChanged,
   paymentReceiveId,
-  customerId,
+  receivableFullAmount,
+  amountReceived,
 
   //#withCustomers
   customers,
@@ -48,11 +47,6 @@ function PaymentReceiveFormHeader({
   // #withInvoices
   receivableInvoices,
 }) {
-  // Compute the total receivable amount.
-  const receivableFullAmount = useMemo(
-    () => sumBy(receivableInvoices, 'due_amount'),
-    [receivableInvoices],
-  );
   const handleDateChange = useCallback(
     (date_filed) => (date) => {
       const formatted = moment(date).format('YYYY-MM-DD');
@@ -118,149 +112,174 @@ function PaymentReceiveFormHeader({
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-        {/* ------------- Customer name ------------- */}
-        <FormGroup
-          label={<T id={'customer_name'} />}
-          inline={true}
-          className={classNames('form-group--select-list', CLASSES.FILL)}
-          labelInfo={<FieldRequiredHint />}
-          intent={errors.customer_id && touched.customer_id && Intent.DANGER}
-          helperText={
-            <ErrorMessage name={'customer_id'} {...{ errors, touched }} />
-          }
-        >
-          <ListSelect
-            items={customers}
-            noResults={<MenuItem disabled={true} text="No results." />}
-            itemRenderer={handleCusomterRenderer}
-            itemPredicate={handleFilterCustomer}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onChangeSelect('customer_id')}
-            selectedItem={values.customer_id}
-            selectedItemProp={'id'}
-            defaultText={<T id={'select_customer_account'} />}
-            labelProp={'display_name'}
-          />
-        </FormGroup>
-
-        {/* ------------- Payment date ------------- */}
-        <FormGroup
-          label={<T id={'payment_date'} />}
-          inline={true}
-          labelInfo={<FieldRequiredHint />}
-          className={classNames('form-group--select-list', CLASSES.FILL)}
-          intent={errors.payment_date && touched.payment_date && Intent.DANGER}
-          helperText={
-            <ErrorMessage name="payment_date" {...{ errors, touched }} />
-          }
-        >
-          <DateInput
-            {...momentFormatter('YYYY/MM/DD')}
-            value={tansformDateValue(values.payment_date)}
-            onChange={handleDateChange('payment_date')}
-            popoverProps={{ position: Position.BOTTOM, minimal: true }}
-          />
-        </FormGroup>
-
-        {/* ------------ Full amount ------------ */}
-        <FormGroup
-          label={<T id={'full_amount'} />}
-          inline={true}
-          className={('form-group--full-amount', CLASSES.FILL)}
-          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
+        <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+          {/* ------------- Customer name ------------- */}
+          <FormGroup
+            label={<T id={'customer_name'} />}
+            inline={true}
+            className={classNames('form-group--select-list', CLASSES.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={errors.customer_id && touched.customer_id && Intent.DANGER}
+            helperText={
+              <ErrorMessage name={'customer_id'} {...{ errors, touched }} />
             }
-            minimal={true}
-            value={values.full_amount}
-            {...getFieldProps('full_amount')}
-            onBlur={handleFullAmountBlur}
-          />
+          >
+            <ListSelect
+              items={customers}
+              noResults={<MenuItem disabled={true} text="No results." />}
+              itemRenderer={handleCusomterRenderer}
+              itemPredicate={handleFilterCustomer}
+              popoverProps={{ minimal: true }}
+              onItemSelect={onChangeSelect('customer_id')}
+              selectedItem={values.customer_id}
+              selectedItemProp={'id'}
+              defaultText={<T id={'select_customer_account'} />}
+              labelProp={'display_name'}
+            />
+          </FormGroup>
 
-          <a onClick={handleReceiveFullAmountClick} href="#" className={'receive-full-amount'}>
-            Receive full amount (<Money amount={receivableFullAmount} currency={'USD'} />)
-          </a>
-        </FormGroup>
+          {/* ------------- Payment date ------------- */}
+          <FormGroup
+            label={<T id={'payment_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--select-list', CLASSES.FILL)}
+            intent={
+              errors.payment_date && touched.payment_date && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name="payment_date" {...{ errors, touched }} />
+            }
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(values.payment_date)}
+              onChange={handleDateChange('payment_date')}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+            />
+          </FormGroup>
 
-        {/* ------------ Payment receive no. ------------ */}
-        <FormGroup
-          label={<T id={'payment_receive_no'} />}
-          inline={true}
-          className={('form-group--payment_receive_no', CLASSES.FILL)}
-          labelInfo={<FieldRequiredHint />}
-          intent={
-            errors.payment_receive_no &&
-            touched.payment_receive_no &&
-            Intent.DANGER
-          }
-          helperText={
-            <ErrorMessage name="payment_receive_no" {...{ errors, touched }} />
-          }
-        >
-          <InputGroup
+          {/* ------------ Full amount ------------ */}
+          <FormGroup
+            label={<T id={'full_amount'} />}
+            inline={true}
+            className={('form-group--full-amount', CLASSES.FILL)}
+            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}
+            />
+
+            <a
+              onClick={handleReceiveFullAmountClick}
+              href="#"
+              className={'receive-full-amount'}
+            >
+              Receive full amount (
+              <Money amount={receivableFullAmount} currency={'USD'} />)
+            </a>
+          </FormGroup>
+
+          {/* ------------ Payment receive no. ------------ */}
+          <FormGroup
+            label={<T id={'payment_receive_no'} />}
+            inline={true}
+            className={('form-group--payment_receive_no', CLASSES.FILL)}
+            labelInfo={<FieldRequiredHint />}
             intent={
               errors.payment_receive_no &&
               touched.payment_receive_no &&
               Intent.DANGER
             }
-            minimal={true}
-            {...getFieldProps('payment_receive_no')}
-          />
-        </FormGroup>
-
-        {/* ------------ Deposit account ------------ */}
-        <FormGroup
-          label={<T id={'deposit_to'} />}
-          className={classNames(
-            'form-group--deposit_account_id',
-            'form-group--select-list',
-            CLASSES.FILL,
-          )}
-          inline={true}
-          labelInfo={<FieldRequiredHint />}
-          intent={
-            errors.deposit_account_id &&
-            touched.deposit_account_id &&
-            Intent.DANGER
-          }
-          helperText={
-            <ErrorMessage
-              name={'deposit_account_id'}
-              {...{ errors, touched }}
+            helperText={
+              <ErrorMessage
+                name="payment_receive_no"
+                {...{ errors, touched }}
+              />
+            }
+          >
+            <InputGroup
+              intent={
+                errors.payment_receive_no &&
+                touched.payment_receive_no &&
+                Intent.DANGER
+              }
+              minimal={true}
+              {...getFieldProps('payment_receive_no')}
             />
-          }
-        >
-          <AccountsSelectList
-            accounts={depositAccounts}
-            labelInfo={<FieldRequiredHint />}
-            onAccountSelected={onChangeSelect('deposit_account_id')}
-            defaultSelectText={<T id={'select_deposit_account'} />}
-            selectedAccountId={values.deposit_account_id}
-          />
-        </FormGroup>
+          </FormGroup>
 
-        {/* ------------ Reference No. ------------ */}
-        <FormGroup
-          label={<T id={'reference'} />}
-          inline={true}
-          className={classNames('form-group--reference', CLASSES.FILL)}
-          intent={errors.reference_no && touched.reference_no && Intent.DANGER}
-          helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
-        >
-          <InputGroup
-            intent={errors.reference_no && touched.reference_no && Intent.DANGER}
-            minimal={true}
-            {...getFieldProps('reference_no')}
-          />
-        </FormGroup>
+          {/* ------------ Deposit account ------------ */}
+          <FormGroup
+            label={<T id={'deposit_to'} />}
+            className={classNames(
+              'form-group--deposit_account_id',
+              'form-group--select-list',
+              CLASSES.FILL,
+            )}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            intent={
+              errors.deposit_account_id &&
+              touched.deposit_account_id &&
+              Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage
+                name={'deposit_account_id'}
+                {...{ errors, touched }}
+              />
+            }
+          >
+            <AccountsSelectList
+              accounts={depositAccounts}
+              labelInfo={<FieldRequiredHint />}
+              onAccountSelected={onChangeSelect('deposit_account_id')}
+              defaultSelectText={<T id={'select_deposit_account'} />}
+              selectedAccountId={values.deposit_account_id}
+            />
+          </FormGroup>
+
+          {/* ------------ Reference No. ------------ */}
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={
+              errors.reference_no && touched.reference_no && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name="reference" {...{ errors, touched }} />
+            }
+          >
+            <InputGroup
+              intent={
+                errors.reference_no && touched.reference_no && Intent.DANGER
+              }
+              minimal={true}
+              {...getFieldProps('reference_no')}
+            />
+          </FormGroup>
+        </div>
+
+        <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
+          <div class="big-amount">
+            <span class="big-amount__label">Amount Received</span>
+            <h1 class="big-amount__number">
+              <Money amount={amountReceived} currency={'USD'} />
+            </h1>
+          </div>
+        </div>
       </div>
     </div>
   );
@@ -273,7 +292,4 @@ export default compose(
   withAccounts(({ accountsList }) => ({
     accountsList,
   })),
-  withInvoices(({ paymentReceiveReceivableInvoices }) => ({
-    receivableInvoices: paymentReceiveReceivableInvoices,
-  })),
 )(PaymentReceiveFormHeader);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js
index f9e2166fd..830013ae3 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js
@@ -3,13 +3,14 @@ import { useParams } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
 
-import { DashboardInsider } from 'components'
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
-// import PaymentReceiveForm from './PaymentReceiveForm';
+import PaymentReceiveForm from './PaymentReceiveForm';
 import withDashboardActions from "containers/Dashboard/withDashboardActions";
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
+import withCustomersActions from 'containers/Customers/withCustomersActions';
 
 import { compose } from 'utils';
 
@@ -28,7 +29,7 @@ function PaymentReceiveFormPage({
   requestFetchOptions,
 
   // #withPaymentReceivesActions
-  requestFetchPaymentReceive
+  requestFetchPaymentReceive,
 
   // #withCustomersActions
   requestFetchCustomers
@@ -37,6 +38,8 @@ function PaymentReceiveFormPage({
   const { formatMessage } = useIntl();
 
   useEffect(() => {
+    console.log(paymentReceiveId, 'X');
+
     if (paymentReceiveId) {
       changePageTitle(formatMessage({ id: 'edit_payment_receive' }));
     } else {
@@ -72,9 +75,9 @@ function PaymentReceiveFormPage({
         fetchSettings.isFetching || 
         fetchCustomers.isFetching
       }>
-      {/* <PaymentReceiveForm
+      <PaymentReceiveForm
         paymentReceiveId={paymentReceiveId}
-      /> */}
+      />
     </DashboardInsider>
   )
 }
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
index a372ccd3d..25ff66360 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
@@ -1,11 +1,9 @@
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
-import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
-import { Icon, CloudLoadingIndicator } from 'components';
+import { CloudLoadingIndicator } from 'components';
 import { useQuery } from 'react-query';
 import { omit } from 'lodash';
 
-import { compose, formattedAmount } from 'utils';
+import { compose } from 'utils';
 
 import withInvoices from '../Invoice/withInvoices';
 import PaymentReceiveItemsTableEditor from './PaymentReceiveItemsTableEditor';
@@ -18,55 +16,45 @@ function PaymentReceiveItemsTable({
   customerId,
   fullAmount,
   onUpdateData, 
-  paymentEntries = [],// { invoice_id: number, payment_amount: number, id?: number }
+  paymentReceiveEntries = [],
   errors,
   onClickClearAllLines,
+  onFetchEntriesSuccess,
 
   // #withInvoices
-  paymentReceiveReceivableInvoices,
-
-  // #withPaymentReceive
-  receivableInvoices,
+  customerInvoiceEntries,
 
   // #withPaymentReceiveActions
   requestFetchDueInvoices
 }) {
   const isNewMode = !paymentReceiveId;
 
-  const [tableData, setTableData] = useState([]);
-  const [localAmount, setLocalAmount] = useState(fullAmount);
-
-  const computedTableData = useMemo(() => {
-    const entriesTable = new Map(
-      paymentEntries.map((e) => [e.invoice_id, e]),
-    );
-    return receivableInvoices.map((invoice) => {
-      const entry = entriesTable.get(invoice.id);
-
-      return {
-        invoice,
-        id: null,
-        payment_amount: 0,
-        ...(entry || {}),
-      };
-    });
-  }, [
-    receivableInvoices,
-    paymentEntries,
+  // Detarmines takes payment receive invoices entries from customer receivable
+  // invoices or associated payment receive invoices.
+  const computedTableData = useMemo(() => [
+    ...(!isNewMode ? (paymentReceiveEntries || []) : []),
+    ...(isNewMode ? (customerInvoiceEntries || []) : []), 
+  ], [
+    isNewMode,
+    paymentReceiveEntries,
+    customerInvoiceEntries,
   ]);
 
+  const [tableData, setTableData] = useState(computedTableData);
+  const [localEntries, setLocalEntries] = useState(computedTableData);
+
+  const [localAmount, setLocalAmount] = useState(fullAmount);
+
   useEffect(() => {
-    setTableData(computedTableData);
-  }, [computedTableData]);
+    if (computedTableData !== localEntries) {
+      setTableData(computedTableData);
+      setLocalEntries(computedTableData);
+    }
+  }, [computedTableData, localEntries]);
 
   // Triggers `onUpdateData` prop event.
   const triggerUpdateData = useCallback((entries) => {
-    const _data = entries.map((entry) => ({
-      invoice_id: entry?.invoice?.id,
-      ...omit(entry, ['invoice']),
-      due_amount: entry?.invoice?.due_amount,
-    }))
-    onUpdateData && onUpdateData(_data);
+    onUpdateData && onUpdateData(entries);
   }, [onUpdateData]);
 
   useEffect(() => {
@@ -74,7 +62,7 @@ function PaymentReceiveItemsTable({
       let _fullAmount = fullAmount;
       
       const newTableData = tableData.map((data) => {
-        const amount = Math.min(data?.invoice?.due_amount, _fullAmount);
+        const amount = Math.min(data?.due_amount, _fullAmount);
         _fullAmount -= Math.max(amount, 0);
 
         return {
@@ -93,6 +81,7 @@ function PaymentReceiveItemsTable({
     triggerUpdateData,
   ]);
   
+  // Fetches customer receivable invoices.
   const fetchCustomerDueInvoices = useQuery(
     ['customer-due-invoices', customerId],
     (key, _customerId) => requestFetchDueInvoices(_customerId),
@@ -103,14 +92,30 @@ function PaymentReceiveItemsTable({
     'There is no receivable invoices for this customer that can be applied for this payment' :
     'Please select a customer to display all open invoices for it.';
 
+  const triggerOnFetchInvoicesSuccess = useCallback((bills) => {
+    onFetchEntriesSuccess && onFetchEntriesSuccess(bills);
+  }, [onFetchEntriesSuccess])
+
   // Handle update data.
   const handleUpdateData = useCallback((rows) => {
     triggerUpdateData(rows);
-  }, []);
+    setTableData(rows);
+  }, [triggerUpdateData]);
 
+  useEffect(() => {
+    const enabled = isNewMode && customerId;
 
-  console.log(tableData, 'XX');
-
+    if (!fetchCustomerDueInvoices.isFetching && enabled) {
+      triggerOnFetchInvoicesSuccess(computedTableData);
+    }
+  }, [
+    isNewMode,
+    customerId,
+    fetchCustomerDueInvoices.isFetching,
+    computedTableData,
+    triggerOnFetchInvoicesSuccess,
+  ]);
+ 
   return (
     <CloudLoadingIndicator isLoading={fetchCustomerDueInvoices.isFetching}>
       <PaymentReceiveItemsTableEditor
@@ -125,8 +130,8 @@ function PaymentReceiveItemsTable({
 }
 
 export default compose(
-  withInvoices(({ paymentReceiveReceivableInvoices }) => ({
-    receivableInvoices: paymentReceiveReceivableInvoices,
+  withInvoices(({ customerInvoiceEntries }) => ({
+    customerInvoiceEntries,
   })),
   withInvoiceActions,
 )(PaymentReceiveItemsTable);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTableEditor.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTableEditor.js
index b67efd8c7..d2b3c10ba 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTableEditor.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTableEditor.js
@@ -69,7 +69,7 @@ export default function PaymentReceiveItemsTableEditor ({
       },
       {
         Header: formatMessage({ id: 'Date' }),
-        id: 'invoice.invoice_date',
+        id: 'invoice_date',
         accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
         Cell: CellRenderer(EmptyDiv, 'invoice_date'),
         disableSortBy: true,
@@ -79,14 +79,17 @@ export default function PaymentReceiveItemsTableEditor ({
 
       {
         Header: formatMessage({ id: 'invocie_number' }),
-        accessor: (row) => `#${row?.invoice?.invoice_no}`,
+        accessor: (row) => {
+          const invNumber = row?.invoice_no || row?.id;
+          return `#INV-${invNumber}`;
+        },
         Cell: CellRenderer(EmptyDiv, 'invoice_no'),
         disableSortBy: true,
         className: '',
       },
       {
         Header: formatMessage({ id: 'invoice_amount' }),
-        accessor: 'invoice.balance',
+        accessor: 'balance',
         Cell: CellRenderer(DivFieldCell, 'balance'),
         disableSortBy: true,
         width: 100,
@@ -94,7 +97,7 @@ export default function PaymentReceiveItemsTableEditor ({
       },
       {
         Header: formatMessage({ id: 'amount_due' }),
-        accessor: 'invoice.due_amount',
+        accessor: 'due_amount',
         Cell: TotalCellRederer(DivFieldCell, 'due_amount'),
         disableSortBy: true,
         width: 150,
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceives.js b/client/src/containers/Sales/PaymentReceive/PaymentReceives.js
deleted file mode 100644
index a52af7c76..000000000
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceives.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
-import { useParams, useHistory } from 'react-router-dom';
-import { useQuery } from 'react-query';
-
-import PaymentReceiveForm from './PaymentReceiveForm';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-
-import withCustomersActions from 'containers/Customers/withCustomersActions';
-import withAccountsActions from 'containers/Accounts/withAccountsActions';
-import withItemsActions from 'containers/Items/withItemsActions';
-import withPaymentReceivesActions from './withPaymentReceivesActions';
-import withInvoiceActions from '../Invoice/withInvoiceActions';
-import withInvoices from '../Invoice/withInvoices';
-
-import { compose } from 'utils';
-
-function PaymentReceives({
-  //#withwithAccountsActions
-  requestFetchAccounts,
-
-  //#withCustomersActions
-  requestFetchCustomers,
-
-  //#withItemsActions
-  requestFetchItems,
-
-  //#withPaymentReceivesActions
-  requestFetchPaymentReceive,
-
-  //#withInvoicesActions
-  requestFetchDueInvoices,
-}) {
-  const history = useHistory();
-  const { id } = useParams();
-  const [customerId, setCustomerId] = useState(null);
-  const [payload, setPayload] = useState(false);
-
-  // Handle fetch accounts data
-  const fetchAccounts = useQuery('accounts-list', (key) =>
-    requestFetchAccounts(),
-  );
-
-  // Handle fetch Items data table or list
-  const fetchItems = useQuery('items-list', () => requestFetchItems({}));
-
-  // Handle fetch customers data table or list
-  const fetchCustomers = useQuery('customers-list', () =>
-    requestFetchCustomers({}),
-  );
-
-  const fetchPaymentReceive = useQuery(
-    ['payment-receive', id],
-    (key, _id) => requestFetchPaymentReceive(_id),
-    { enabled: !!id },
-  );
-
-  const fetchDueInvoices = useQuery(
-    ['due-invoies', customerId],
-    (key, query) => requestFetchDueInvoices(query),
-    { enabled: !!customerId },
-  );
-
-  const handleFormSubmit = useCallback(
-    (payload) => {
-      payload.redirect && history.push('/payment-receives');
-    },
-    [history],
-  );
-  const handleCancel = useCallback(() => {
-    history.goBack();
-  }, [history]);
-
-  const handleCustomerChange = (customerId) => {
-    setCustomerId(customerId);
-  };
-
-  return (
-    <DashboardInsider
-      loading={
-        fetchCustomers.isFetching ||
-        fetchItems.isFetching ||
-        fetchAccounts.isFetching ||
-        fetchPaymentReceive.isFetching
-      }
-      name={'payment-receive'}
-    >
-      <PaymentReceiveForm
-        onFormSubmit={handleFormSubmit}
-        paymentReceiveId={id}
-        onCancelForm={handleCancel}
-        onCustomerChange={handleCustomerChange}
-      />
-    </DashboardInsider>
-  );
-}
-
-export default compose(
-  withCustomersActions,
-  withItemsActions,
-  withAccountsActions,
-  withPaymentReceivesActions,
-  withInvoiceActions,
-)(PaymentReceives);
diff --git a/client/src/containers/Sales/PaymentReceive/withPaymentReceiveDetail.js b/client/src/containers/Sales/PaymentReceive/withPaymentReceiveDetail.js
index 1e1a04611..7a602dada 100644
--- a/client/src/containers/Sales/PaymentReceive/withPaymentReceiveDetail.js
+++ b/client/src/containers/Sales/PaymentReceive/withPaymentReceiveDetail.js
@@ -1,15 +1,16 @@
 import { connect } from 'react-redux';
 import {
   getPaymentReceiveByIdFactory,
-  getPaymentReceiveInvoices,
+  getPaymentReceiveEntriesFactory,
 } from 'store/PaymentReceive/paymentReceive.selector';
 
 export default () => {
   const getPaymentReceiveById = getPaymentReceiveByIdFactory();
+  const getPaymentReceiveEntries = getPaymentReceiveEntriesFactory();
 
   const mapStateToProps = (state, props) => ({
     paymentReceive: getPaymentReceiveById(state, props),
-    paymentReceiveInvoices: getPaymentReceiveInvoices(state, props),
+    paymentReceiveEntries: getPaymentReceiveEntries(state, props),
   });
   return connect(mapStateToProps);
 };
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index 658678f20..2793350a2 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -787,5 +787,6 @@ export default {
   invoice_number_is_not_unqiue:  'Invoice number is not unqiue',
   sale_receipt_number_not_unique: 'Receipt number is not unique',
   sale_invoice_number_is_exists: 'Sale invoice number is exists',
-  bill_number_exists:'Bill number exists'
+  bill_number_exists:'Bill number exists',
+  ok: 'Ok!',
 };
diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js
index cf164f54a..9f0ee6c12 100644
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -280,14 +280,14 @@ export default [
   {
     path: `/payment-receive/:id/edit`,
     component: LazyLoader({
-      loader: () => import('containers/Sales/PaymentReceive/PaymentReceives'),
+      loader: () => import('containers/Sales/PaymentReceive/PaymentReceiveFormPage'),
     }),
     breadcrumb: 'Edit',
   },
   {
     path: `/payment-receive/new`,
     component: LazyLoader({
-      loader: () => import('containers/Sales/PaymentReceive/PaymentReceives'),
+      loader: () => import('containers/Sales/PaymentReceive/PaymentReceiveFormPage'),
     }),
     breadcrumb: 'New Payment Receive',
   },
diff --git a/client/src/store/Bills/bills.reducer.js b/client/src/store/Bills/bills.reducer.js
index cdcc8b5b5..f7c9642ff 100644
--- a/client/src/store/Bills/bills.reducer.js
+++ b/client/src/store/Bills/bills.reducer.js
@@ -17,6 +17,7 @@ const initialState = {
     byVendorId: [],
     byBillPayamentId: [],
   },
+  byBillPayamentId: {},
 };
 
 const defaultBill = {
@@ -133,6 +134,13 @@ const reducer = createReducer(initialState, {
       _data.push(bill.id);
     });
     state.payable.byBillPayamentId[billPaymentId] = _data;
+  },
+
+  [t.BILLS_BY_PAYMENT_ID]: (state, action) => {
+    const { bills, billPaymentId } = action.payload;
+    const billsIds = bills.map((bill) => bill.id);
+
+    state.byBillPayamentId[billPaymentId] = billsIds;
   }
 });
 
diff --git a/client/src/store/Bills/bills.selectors.js b/client/src/store/Bills/bills.selectors.js
index cd3fab932..600df6088 100644
--- a/client/src/store/Bills/bills.selectors.js
+++ b/client/src/store/Bills/bills.selectors.js
@@ -1,28 +1,21 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
 
+// Retreive bills table query.
 const billTableQuery = (state) => state.bills.tableQuery;
 
 const billPageSelector = (state, props, query) => {
   const viewId = state.bills.currentViewId;
   return state.bills.views?.[viewId]?.pages?.[query.page];
 };
+// Retreive bills items.
 const billItemsSelector = (state) => state.bills.items;
 
-/**
- * Retrieve bill details.
- * @return {IBill}
- */
+// Retrieve bill details.
 const billByIdSelector = (state, props) => state.bills.items[props.billId];
 
-/**
- * Retrieve vendor due bills ids.
- * @return {number[]}
- */
+// Retrieve vendor due bills ids.
 const billsPayableVendorSelector = (state, props) => state.bills.payable.byVendorId[props.vendorId];
-const billsPayableByPaymentMadeSelector = (state, props) => {
-  return state.bills.payable.byBillPayamentId[props.paymentMadeId];
-}
 
 const billPaginationSelector = (state, props) => {
   const viewId = state.bills.currentViewId;
@@ -60,12 +53,17 @@ export const getBillByIdFactory = () =>
     return bill;
   });
 
+/**
+ * Retrieve bills datatable pagination meta.
+ */
 export const getBillPaginationMetaFactory = () =>
   createSelector(billPaginationSelector, (billPage) => {
     return billPage?.paginationMeta || {};
   });
 
-
+/**
+ * Retrieve vendor payable bills.
+ */
 export const getVendorPayableBillsFactory = () => 
   createSelector(
     billItemsSelector,
@@ -77,28 +75,24 @@ export const getVendorPayableBillsFactory = () =>
     },
   );
 
-
-export const getPayableBillsByPaymentMadeFactory = () => 
-  createSelector(
-    billItemsSelector,
-    billsPayableByPaymentMadeSelector,
-    (billsItems, payableBillsIds) => {
-      return Array.isArray(payableBillsIds)
-      ? pickItemsFromIds(billsItems, payableBillsIds) || []
-      : [];
-    },
-  );
-
-export const getPaymentMadeFormPayableBillsFactory = () => 
+/**
+ * Retrieve vendor payable bills entries.
+ */
+export const getVendorPayableBillsEntriesFactory = () => 
   createSelector(
     billItemsSelector,
     billsPayableVendorSelector,
-    billsPayableByPaymentMadeSelector,
-    (billsItems, vendorBillsIds, paymentMadeBillsIds) => {
-      const billsIds = [
-        ...(vendorBillsIds || []),
-        ...(paymentMadeBillsIds || [])
-      ];
-      return pickItemsFromIds(billsItems, billsIds);
-    },
+    (billsItems, payableBillsIds) => {
+      const bills = Array.isArray(payableBillsIds)
+        ? pickItemsFromIds(billsItems, payableBillsIds) || []
+        : [];
+
+      return bills.map((bill) => ({
+        ...bill,
+        bill_id: bill.id,
+        total_payment_amount: bill.payment_amount,
+        id: null,
+        payment_amount: null,
+      }));
+    }
   );
\ No newline at end of file
diff --git a/client/src/store/Bills/bills.type.js b/client/src/store/Bills/bills.type.js
index 465935aee..8c93e8072 100644
--- a/client/src/store/Bills/bills.type.js
+++ b/client/src/store/Bills/bills.type.js
@@ -10,7 +10,7 @@ export default {
   BILLS_PAGE_SET: 'BILLS_PAGE_SET',
   BILLS_ITEMS_SET: 'BILLS_ITEMS_SET',
   BILL_NUMBER_CHANGED: 'BILL_NUMBER_CHANGED',
-
   BILLS_PAYABLE_BY_PAYMENT_ID: 'BILLS_PAYABLE_BY_PAYMENT_ID',
   BILLS_PAYABLE_BY_VENDOR_ID: 'BILLS_PAYABLE_BY_VENDOR_ID',
+  BILLS_BY_PAYMENT_ID: 'BILLS_BY_PAYMENT_ID',
 };
diff --git a/client/src/store/Invoice/invoices.actions.js b/client/src/store/Invoice/invoices.actions.js
index ba9ad0b03..daa509e08 100644
--- a/client/src/store/Invoice/invoices.actions.js
+++ b/client/src/store/Invoice/invoices.actions.js
@@ -72,7 +72,6 @@ export const fetchInvoicesTable = ({ query } = {}) => {
               customViewId: response.data.customViewId || -1,
             },
           });
-
           dispatch({
             type: t.INVOICES_ITEMS_SET,
             payload: {
diff --git a/client/src/store/Invoice/invoices.reducer.js b/client/src/store/Invoice/invoices.reducer.js
index 72d2b61c5..424697d91 100644
--- a/client/src/store/Invoice/invoices.reducer.js
+++ b/client/src/store/Invoice/invoices.reducer.js
@@ -16,7 +16,8 @@ const initialState = {
   receivable: {
     byCustomerId: [],
     byPaymentReceiveId: [],
-  }
+  },
+  byPaymentReceiveId: {},
 };
 
 const defaultInvoice = {
@@ -115,6 +116,13 @@ const reducer = createReducer(initialState, {
 
     state.receivable.byCustomerId[customerId] = saleInvoiceIds
   },
+
+  [t.INVOICES_BY_PAYMENT_ID]: (state, action) => {
+    const { paymentReceiveId, saleInvoices } = action.payload;
+    const saleInvoiceIds = saleInvoices.map((saleInvoice) => saleInvoice.id);
+
+    state.byPaymentReceiveId[paymentReceiveId] = saleInvoiceIds;
+  },
 });
 
 export default createTableQueryReducers('sales_invoices', reducer);
diff --git a/client/src/store/Invoice/invoices.selector.js b/client/src/store/Invoice/invoices.selector.js
index f8c7f5076..af41919b2 100644
--- a/client/src/store/Invoice/invoices.selector.js
+++ b/client/src/store/Invoice/invoices.selector.js
@@ -19,12 +19,8 @@ const invoicesPageSelector = (state, props, query) => {
   const viewId = state.salesInvoices.currentViewId;
   return state.salesInvoices.views?.[viewId]?.pages?.[query.page];
 };
-
 const invoicesItemsSelector = (state) => state.salesInvoices.items;
-
 const invoicesReceiableCustomerSelector = (state, props) => state.salesInvoices.receivable.byCustomerId[props.customerId];
-const paymentReceivableInvoicesSelector = (state, props) => state.salesInvoices.receivable.byPaymentReceiveId[props.paymentReceiveId];
-
 
 export const getInvoiceTableQueryFactory = () =>
   createSelector(
@@ -59,39 +55,22 @@ export const getInvoicePaginationMetaFactory = () =>
     return invoicePage?.paginationMeta || {};
   });
 
-// export const getCustomerReceivableInvoicesFactory = () => 
-//   createSelector(
-//     invoicesItemsSelector,
-//     invoicesReceiableCustomerSelector,
-//     (invoicesItems, invoicesIds) => {
-//       return Array.isArray(invoicesIds)
-//         ? (pickItemsFromIds(invoicesItems, invoicesIds) || [])
-//         : [];
-//     },
-//   );
-
-// export const getPaymentReceivableInvoicesFactory = () => 
-//     createSelector(
-//       invoicesItemsSelector,
-//       paymentReceivableInvoicesSelector,
-//       (invoicesItems, invoicesIds) => {
-//         return Array.isArray(invoicesIds)
-//           ? (pickItemsFromIds(invoicesItems, invoicesIds) || [])
-//           : [];
-//       },
-//     );
-
-
-export const getPaymentReceiveReceivableInvoicesFactory = () => 
+export const getCustomerReceivableInvoicesEntriesFactory = () => 
   createSelector(
     invoicesItemsSelector,
     invoicesReceiableCustomerSelector,
-    paymentReceivableInvoicesSelector,
-    (invoicesItems, customerInvoicesIds, paymentInvoicesIds) => {
+    (invoicesItems, customerInvoicesIds) => {
       const invoicesIds = [
         ...(customerInvoicesIds || []),
-        ...(paymentInvoicesIds || []),
       ];
-      return pickItemsFromIds(invoicesItems, invoicesIds);
+      const invoices = pickItemsFromIds(invoicesItems, invoicesIds);
+
+      return invoices.map((invoice) => ({
+        ...invoice,
+        invoice_id: invoice.id,
+        total_payment_amount: invoice.payment_amount,
+        id: null,
+        payment_amount: 0,
+      }));
     },
-  );
\ No newline at end of file
+  )
\ No newline at end of file
diff --git a/client/src/store/Invoice/invoices.types.js b/client/src/store/Invoice/invoices.types.js
index cb6b242c0..d2111a679 100644
--- a/client/src/store/Invoice/invoices.types.js
+++ b/client/src/store/Invoice/invoices.types.js
@@ -13,5 +13,6 @@ export default {
   RELOAD_INVOICES: 'RELOAD_INVOICES',
 
   INVOICES_RECEIVABLE_BY_PAYMENT_ID: 'INVOICES_RECEIVABLE_BY_PAYMENT_ID',
-  INVOICES_RECEIVABLE_BY_CUSTOMER_ID: 'INVOICES_RECEIVABLE_BY_CUSTOMER_ID'
+  INVOICES_RECEIVABLE_BY_CUSTOMER_ID: 'INVOICES_RECEIVABLE_BY_CUSTOMER_ID',
+  INVOICES_BY_PAYMENT_ID: 'INVOICES_BY_PAYMENT_ID'
 };
diff --git a/client/src/store/PaymentMades/paymentMade.actions.js b/client/src/store/PaymentMades/paymentMade.actions.js
index a4e0f8214..5d209cc7d 100644
--- a/client/src/store/PaymentMades/paymentMade.actions.js
+++ b/client/src/store/PaymentMades/paymentMade.actions.js
@@ -109,17 +109,30 @@ export const fetchPaymentMade = ({ id }) => {
               paymentMade: response.data.bill_payment,
             },
           });
+          dispatch({
+            type: t.BILLS_ITEMS_SET,
+            payload: {
+              bills: response.data.payable_bills,
+            },
+          });
           dispatch({
             type: t.BILLS_PAYABLE_BY_PAYMENT_ID,
             payload: {
-              billPaymentId: id,
-              bills: response.data.bill_payment.payable_bills,
+              billPaymentId: response.data.bill_payment.id,
+              bills: response.data.payable_bills,
             },
           });
           dispatch({
             type: t.BILLS_ITEMS_SET,
             payload: {
-              bills: response.data.bill_payment.payable_bills,
+              bills: response.data.payment_bills,
+            },
+          });
+          dispatch({
+            type: t.BILLS_BY_PAYMENT_ID,
+            payload: {
+              billPaymentId: response.data.bill_payment.id,
+              bills: response.data.payment_bills,
             },
           });
           resovle(response);
diff --git a/client/src/store/PaymentMades/paymentMade.selector.js b/client/src/store/PaymentMades/paymentMade.selector.js
index 08726aca7..fc249b2db 100644
--- a/client/src/store/PaymentMades/paymentMade.selector.js
+++ b/client/src/store/PaymentMades/paymentMade.selector.js
@@ -1,7 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
-
-
+import { transformToObject } from 'utils';
 
 const paymentMadeTableQuery = (state) => state.paymentMades.tableQuery;
 
@@ -10,21 +9,19 @@ const paymentMadesPageSelector = (state, props, query) => {
   return state.paymentMades.views?.[viewId]?.pages?.[query.page];
 };
 
-const paymentMadesItemsSelector = (state) => {
-  return state.paymentMades.items;
-};
+const paymentMadesItemsSelector = (state) => state.paymentMades.items;
 
 const PaymentMadePaginationSelector = (state, props) => {
   const viewId = state.paymentMades.currentViewId;
   return state.paymentMades.views?.[viewId];
 };
 
-const paymentMadesIds = (state, props) => {
-  return state.paymentMades.items[props.paymentMadeId];
-};
+const paymentMadeById = (state, props) => state.paymentMades.items[props.paymentMadeId];
 
 const paymentMadeEntries = (state, props) => props.paymentMadeEntries;
 const billsItemsSelector = (state, props) => state.bills.items;
+const billsPayableByPaymentMadeSelector = (state, props) => state.bills.payable.byBillPayamentId[props.paymentMadeId];
+const paymentMadeBillsSelector = (state, props) => state.bills.byBillPayamentId[props.paymentMadeId];
 
 export const getPaymentMadeCurrentPageFactory = () =>
   createSelector(
@@ -54,7 +51,7 @@ export const getPaymentMadePaginationMetaFactory = () =>
   });
 
 export const getPaymentMadeByIdFactory = () =>
-  createSelector(paymentMadesIds, (payment_Made) => {
+  createSelector(paymentMadeById, (payment_Made) => {
     return payment_Made;
   });
 
@@ -68,4 +65,37 @@ export const getPaymentMadeEntriesDataFactory = () =>
           ...entry, ...(billsItems[entry.bill_id] || {}),
         })) : [];
     }
-  ) 
\ No newline at end of file
+  );
+
+export const getPaymentMadeEntriesFactory = () => 
+  createSelector(
+    billsItemsSelector,
+    billsPayableByPaymentMadeSelector,
+    paymentMadeBillsSelector,
+    paymentMadeById,
+    (
+      billsItems,
+      paymentPayableBillsIds,
+      paymentMadeBillsIds,
+      paymentMade,
+    ) => {
+      const billsIds = [
+        ...(paymentPayableBillsIds || []),
+        ...(paymentMadeBillsIds || []),
+      ];
+      const bills = pickItemsFromIds(billsItems, billsIds);
+      const billEntries = transformToObject((paymentMade?.entries || []), 'bill_id');
+
+      return bills.map((bill) => {
+        const paymentMadeEntry = (billEntries?.[bill.id] || {});
+
+        return {
+          ...bill,
+          bill_id: bill.id,
+          total_payment_amount: bill.payment_amount,
+          id: paymentMadeEntry?.id,
+          payment_amount: paymentMadeEntry?.payment_amount,
+        };
+      });
+    },
+  );
\ No newline at end of file
diff --git a/client/src/store/PaymentReceive/paymentReceive.actions.js b/client/src/store/PaymentReceive/paymentReceive.actions.js
index 8ef6d11ee..a9078e110 100644
--- a/client/src/store/PaymentReceive/paymentReceive.actions.js
+++ b/client/src/store/PaymentReceive/paymentReceive.actions.js
@@ -56,20 +56,33 @@ export const fetchPaymentReceive = ({ id }) => {
             type: t.PAYMENT_RECEIVE_SET,
             payload: {
               id,
-              paymentReceive: response.data.paymentReceive,
+              paymentReceive: response.data.payment_receive,
             },
           });
           dispatch({
             type: t.INVOICES_ITEMS_SET,
             payload: {
-              sales_invoices: response.data.sale_invoice.receivable_invoices,
+              sales_invoices: response.data.receivable_invoices,
+            },
+          });
+          dispatch({
+            type: t.INVOICES_ITEMS_SET,
+            payload: {
+              sales_invoices: response.data.payment_invoices,
             },
           });
           dispatch({
             type: t.INVOICES_RECEIVABLE_BY_PAYMENT_ID,
             payload: {
-              paymentReceiveid: response.data.id,
-              saleInvoices: response.data.sale_invoice.receivable_invoices,
+              paymentReceiveId: response.data.payment_receive.id,
+              saleInvoices: response.data.receivable_invoices,
+            },
+          });
+          dispatch({
+            type: t.INVOICES_BY_PAYMENT_ID,
+            payload: {
+              paymentReceiveId: response.data.payment_receive.id,
+              saleInvoices: response.data.payment_invoices,
             },
           });
           resovle(response);
diff --git a/client/src/store/PaymentReceive/paymentReceive.selector.js b/client/src/store/PaymentReceive/paymentReceive.selector.js
index dcc38e32a..216c533f3 100644
--- a/client/src/store/PaymentReceive/paymentReceive.selector.js
+++ b/client/src/store/PaymentReceive/paymentReceive.selector.js
@@ -1,14 +1,32 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
+import { transformToObject } from 'utils';
 
 const paymentReceivesPageSelector = (state, props, query) => {
   const viewId = state.paymentReceives.currentViewId;
   return state.paymentReceives.views?.[viewId]?.pages?.[query.page];
 };
 
-const paymentReceivesItemsSelector = (state) => {
-  return state.paymentReceives.items;
+const paymentReceivesItemsSelector = (state) => state.paymentReceives.items;
+const paymentReceiveTableQuery = (state) => state.paymentReceives.tableQuery;
+
+const PaymentReceivePaginationSelector = (state, props) => {
+  const viewId = state.paymentReceives.currentViewId;
+  return state.paymentReceives.views?.[viewId];
 };
+const invoicesItemsSelector = (state) => state.salesInvoices.items;
+
+const payemntReceiveById = (state, props) =>
+  state.paymentReceives.items[props.paymentReceiveId];
+
+const invoicesReceivableByPaymentReceiveSelector = (state, props) =>
+  state.salesInvoices.receivable.byPaymentReceiveId[props.paymentReceiveId];
+
+const paymentReceiveInvoicesSelector = (state, props) =>
+  state.salesInvoices.byPaymentReceiveId[props.paymentReceiveId];
+
+const paymentReceiveByIdSelector = (state, props) =>
+  state.paymentReceives.items[props.paymentReceiveId];
 
 export const getPaymentReceiveCurrentPageFactory = () =>
   createSelector(
@@ -21,8 +39,6 @@ export const getPaymentReceiveCurrentPageFactory = () =>
     },
   );
 
-const paymentReceiveTableQuery = (state) => state.paymentReceives.tableQuery;
-
 export const getPaymentReceiveTableQuery = createSelector(
   paginationLocationQuery,
   paymentReceiveTableQuery,
@@ -34,48 +50,19 @@ export const getPaymentReceiveTableQuery = createSelector(
   },
 );
 
-const PaymentReceivePaginationSelector = (state, props) => {
-  const viewId = state.paymentReceives.currentViewId;
-  return state.paymentReceives.views?.[viewId];
-};
-
 export const getPaymentReceivePaginationMetaFactory = () =>
   createSelector(PaymentReceivePaginationSelector, (Page) => {
     return Page?.paginationMeta || {};
   });
 
-const invoicesItems = (state) => {
-  return state.salesInvoices.items;
-};
-
-
-const payemntReceiveById = (state, props) => {
-  return state.paymentReceives.items[props.paymentReceiveId];
-};
-
 export const getPaymentReceiveByIdFactory = () =>
   createSelector(payemntReceiveById, (payment_receive) => {
     return payment_receive;
   });
 
-
-const paymentReceiveInvoicesIdss = (state, props) => {
-  return state.paymentReceives.items[props.paymentReceiveInvoices]
-};
-
-// const invoicesItems = (state) => {
-//   return state.sales_invoices.items;
-// };
-
-// export const  = createSelector(
-//   paymentReceiveInvoicesIds,
-//   invoicesItems,
-//   (ids, items) => {},
-// );
-
 export const getPaymentReceiveInvoices = createSelector(
   payemntReceiveById,
-  invoicesItems,
+  invoicesItemsSelector,
   (paymentRecieve, items) => {
     return typeof paymentRecieve === 'object'
       ? pickItemsFromIds(
@@ -85,3 +72,42 @@ export const getPaymentReceiveInvoices = createSelector(
       : [];
   },
 );
+
+/**
+ * Retrieve payment receive invoices entries.
+ */
+export const getPaymentReceiveEntriesFactory = () =>
+  createSelector(
+    invoicesItemsSelector,
+    invoicesReceivableByPaymentReceiveSelector,
+    paymentReceiveInvoicesSelector,
+    paymentReceiveByIdSelector,
+    (
+      invoicesItems,
+      paymentReceivableInvoicesIds,
+      paymentReceiveInvoicesIds,
+      paymentReceive,
+    ) => {
+      const invoicesIds = [
+        ...(paymentReceivableInvoicesIds || []),
+        ...(paymentReceiveInvoicesIds || []),
+      ];
+      const invoices = pickItemsFromIds(invoicesItems, invoicesIds);
+      const invoicesEntries = transformToObject(
+        paymentReceive?.entries || [],
+        'invoice_id',
+      );
+
+      return invoices.map((invoice) => {
+        const paymentReceiveEntry = invoicesEntries?.[invoice.id] || {};
+
+        return {
+          ...invoice,
+          invoice_id: invoice.id,
+          total_payment_amount: invoice.payment_amount,
+          id: paymentReceiveEntry?.id,
+          payment_amount: paymentReceiveEntry?.payment_amount,
+        };
+      });
+    },
+  );
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index bd82d0458..c7b2e607e 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -217,6 +217,10 @@ body.authentication {
     margin: -20px;
     padding-bottom: 6px;
   }
+
+  &__header-fields{
+    width: 85%;
+  }
   &__footer{
     padding: 15px;
     margin: 15px 0 0 0;
@@ -429,4 +433,34 @@ body.authentication {
   &:not(.is-loading) .bp3-spinner{
     display: none;
   }
+}
+
+
+.big-amount{
+
+  &__label{
+    color: #5d6f90;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+  }
+  &__number{
+    margin: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 400;
+    margin-top: 6px;
+    color: #343463;
+    line-height: 1;
+    font-size: 34px;
+  }
+}
+
+
+.bp3-alert{
+  .bp3-alert-footer{
+    .bp3-button{
+      min-width: 70px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/client/src/style/pages/payment-made.scss b/client/src/style/pages/payment-made.scss
index 55d2f92f5..4f6a6816b 100644
--- a/client/src/style/pages/payment-made.scss
+++ b/client/src/style/pages/payment-made.scss
@@ -26,9 +26,15 @@
   }
 
   #{$self}__primary-section{
+    display: flex;
     padding-bottom: 2px;
   }
 
+  #{$self}__big-numbers{
+    margin-left: auto;
+    padding-right: 10px;
+  }
+
   .datatable-editor{
     
     .table .tbody{
@@ -56,6 +62,14 @@
   }
 
   #{$self}__footer{
+    .form-group--statement{
+      max-width: 500px;
+      width: 100%;
 
+      textarea{
+        width: 100%;
+        min-height: 70px;
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/client/src/style/pages/payment-receive.scss b/client/src/style/pages/payment-receive.scss
index 0d419d0cb..9fad22653 100644
--- a/client/src/style/pages/payment-receive.scss
+++ b/client/src/style/pages/payment-receive.scss
@@ -26,9 +26,15 @@
   }
 
   #{$self}__primary-section{
+    display: flex;
     padding-bottom: 2px;
   }
 
+  #{$self}__big-numbers{
+    margin-left: auto;
+    padding-right: 10px;
+  }
+
   .datatable-editor{
     
     .table .tbody{
@@ -56,6 +62,14 @@
   }
 
   #{$self}__footer{
+    .form-group--statement{
+      max-width: 500px;
+      width: 100%;
 
+      textarea{
+        width: 100%;
+        min-height: 70px;
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/client/src/utils.js b/client/src/utils.js
index dbc506aeb..14eee9418 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -262,3 +262,15 @@ export const flatToNestedArray = (
 export const orderingLinesIndexes = (lines, attribute = 'index') => {
   return lines.map((line, index) => ({ ...line, [attribute]: index + 1 }));
 };
+
+
+export const transformToObject = (arr, key) => {
+  return arr.reduce(function(acc, cur, i) {
+    acc[key ? cur[key] : i] = cur;
+    return acc;
+  }, {});
+}
+
+export const itemsStartWith = (items, char) => {
+  return items.filter((item) => item.indexOf(char) === 0);
+};
\ No newline at end of file
diff --git a/server/src/interfaces/SaleInvoice.ts b/server/src/interfaces/SaleInvoice.ts
index f0a9949ae..8fef7f84e 100644
--- a/server/src/interfaces/SaleInvoice.ts
+++ b/server/src/interfaces/SaleInvoice.ts
@@ -6,6 +6,7 @@ export interface ISaleInvoice {
   paymentAmount: number,
   invoiceDate: Date,
   dueDate: Date,
+  dueAmount: number,
   entries: IItemEntry[],
 }
 
diff --git a/server/src/services/Purchases/BillPayments.ts b/server/src/services/Purchases/BillPayments.ts
index 821de0115..94c3f61e6 100644
--- a/server/src/services/Purchases/BillPayments.ts
+++ b/server/src/services/Purchases/BillPayments.ts
@@ -172,13 +172,23 @@ export default class BillPaymentsService {
    * @param {NextFunction} next 
    * @return {void}
    */
-  private async validateBillsDueAmount(tenantId: number, billPaymentEntries: IBillPaymentEntryDTO[]) {
+  private async validateBillsDueAmount(
+    tenantId: number,
+    billPaymentEntries: IBillPaymentEntryDTO[],
+    oldPaymentEntries: IBillPaymentEntry[] = []
+  ) {
     const { Bill } = this.tenancy.models(tenantId);
     const billsIds = billPaymentEntries.map((entry: IBillPaymentEntryDTO) => entry.billId);
 
     const storedBills = await Bill.query().whereIn('id', billsIds);
     const storedBillsMap = new Map(
-      storedBills.map((bill: any) => [bill.id, bill]),
+      storedBills
+        .map((bill) => {
+          const oldEntries = oldPaymentEntries.filter(entry => entry.billId === bill.id);
+          const oldPaymentAmount = sumBy(oldEntries, 'paymentAmount') || 0;
+
+          return [bill.id, { ...bill, dueAmount: bill.dueAmount + oldPaymentAmount }];
+        }),
     );
     interface invalidPaymentAmountError{
       index: number,
@@ -328,7 +338,7 @@ export default class BillPaymentsService {
     await this.validateBillsExistance(tenantId, billPaymentObj.entries, billPaymentDTO.vendorId);
 
     // Validates the bills due payment amount.
-    await this.validateBillsDueAmount(tenantId, billPaymentObj.entries);
+    await this.validateBillsDueAmount(tenantId, billPaymentObj.entries, oldBillPayment.entries);
 
     // Validate the payment number uniquiness.
     if (billPaymentObj.paymentNumber) {
diff --git a/server/src/services/Sales/PaymentsReceives.ts b/server/src/services/Sales/PaymentsReceives.ts
index 06919570f..190909a41 100644
--- a/server/src/services/Sales/PaymentsReceives.ts
+++ b/server/src/services/Sales/PaymentsReceives.ts
@@ -12,6 +12,7 @@ import {
   IPaginationMeta,
   IPaymentReceive,
   IPaymentReceiveDTO,
+  IPaymentReceiveEntry,
   IPaymentReceiveEntryDTO,
   IPaymentReceivesFilter,
   ISaleInvoice
@@ -158,14 +159,24 @@ export default class PaymentReceiveService {
    * @param {Response} res -
    * @param {Function} next -
    */
-  async validateInvoicesPaymentsAmount(tenantId: number, paymentReceiveEntries: IPaymentReceiveEntryDTO[]) {
+  async validateInvoicesPaymentsAmount(
+    tenantId: number,
+    paymentReceiveEntries: IPaymentReceiveEntryDTO[],
+    oldPaymentEntries: IPaymentReceiveEntry[] = [],
+  ) {
     const { SaleInvoice } = this.tenancy.models(tenantId);
     const invoicesIds = paymentReceiveEntries.map((e: IPaymentReceiveEntryDTO) => e.invoiceId);
 
     const storedInvoices = await SaleInvoice.query().whereIn('id', invoicesIds);
 
     const storedInvoicesMap = new Map(
-      storedInvoices.map((invoice: ISaleInvoice) => [invoice.id, invoice])
+      storedInvoices
+        .map((invoice: ISaleInvoice) => {
+          const oldEntries = oldPaymentEntries.filter(entry => entry.invoiceId);
+          const oldPaymentAmount = sumBy(oldEntries, 'paymentAmount') || 0,
+
+          return [invoice.id, { ...invoice, dueAmount: invoice.dueAmount + oldPaymentAmount }];
+        })
     );
     const hasWrongPaymentAmount: any[] = [];
 
@@ -301,7 +312,7 @@ export default class PaymentReceiveService {
     await this.validateInvoicesIDsExistance(tenantId, paymentReceiveDTO.customerId, paymentReceiveDTO.entries);
 
     // Validate invoice payment amount.
-    await this.validateInvoicesPaymentsAmount(tenantId, paymentReceiveDTO.entries);
+    await this.validateInvoicesPaymentsAmount(tenantId, paymentReceiveDTO.entries, oldPaymentReceive.entries);
 
     // Update the payment receive transaction.
     const paymentReceive = await PaymentReceive.query()