Merge branch 'master' of https://github.com/abouolia/Bigcapital

2026-02-17 13:20:31 +00:00 · 2020-11-02 10:23:19 +02:00
parent e36a1dcf50 6f44cef5fc
commit fdd5133b06
29 changed files with 974 additions and 573 deletions
--- a/client/src/common/classes.js
+++ b/client/src/common/classes.js
@@ -9,12 +9,16 @@ const CLASSES = {
  PAGE_FORM_HEADER: 'page-form__header',
  PAGE_FORM_HEADER_PRIMARY: 'page-form__primary-section',
  PAGE_FORM_FOOTER: 'page-form__footer',
-  PAGE_FORM_FLOATING_ACTIONS: 'page-form__floating-action',
+  PAGE_FORM_FLOATING_ACTIONS: 'page-form__floating-actions',

  PAGE_FORM_BILL: 'page-form--bill',
  PAGE_FORM_ESTIMATE: 'page-form--estimate',
  PAGE_FORM_INVOICE: 'page-form--invoice',
  PAGE_FORM_RECEIPT: 'page-form--receipt',
+  PAGE_FORM_PAYMENT_MADE: 'page-form--payment-made',
+
+  CLOUD_SPINNER: 'cloud-spinner',
+  IS_LOADING: 'is-loading',
  ...Classes,
 };

--- a/client/src/components/CloudLoadingIndicator.js
+++ b/client/src/components/CloudLoadingIndicator.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Spinner } from '@blueprintjs/core';
+import { CLASSES } from 'common/classes';
+import If from './Utils/If';
+
+export default function CloudLoadingIndicator({
+  isLoading,
+  children,
+}) {
+
+  return (
+    <div className={classNames(
+      CLASSES.CLOUD_SPINNER,
+      { [CLASSES.IS_LOADING]: isLoading },
+    )}>
+      <If condition={isLoading}>
+        <Spinner size={30} value={null} />
+      </If>
+      { children }
+    </div>
+  );
+}
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -28,6 +28,7 @@ import InputPrependButton from './Forms/InputPrependButton';
 import CategoriesSelectList from './CategoriesSelectList';
 import Row from './Grid/Row';
 import Col from './Grid/Col';
+import CloudLoadingIndicator from './CloudLoadingIndicator';

 const Hint = FieldHint;

@@ -63,4 +64,5 @@ export {
  CategoriesSelectList,
  Col,
  Row,
+  CloudLoadingIndicator,
 };
--- a/client/src/containers/Purchases/Bill/withBillActions.js
+++ b/client/src/containers/Purchases/Bill/withBillActions.js
@@ -5,6 +5,7 @@ import {
  editBill,
  fetchBillsTable,
  fetchBill,
+  fetchDueBills,
 } from 'store/Bills/bills.actions';
 import t from 'store/types';

@@ -15,6 +16,7 @@ const mapDispatchToProps = (dispatch) => ({
  requestDeleteBill: (id) => dispatch(deleteBill({ id })),
  requestFetchBillsTable: (query = {}) =>
    dispatch(fetchBillsTable({ query: { ...query } })),
+  requestFetchDueBills: (vendorId) => dispatch(fetchDueBills({ vendorId })),

  changeBillView: (id) =>
    dispatch({
--- a/client/src/containers/Purchases/Bill/withBills.js
+++ b/client/src/containers/Purchases/Bill/withBills.js
@@ -4,14 +4,16 @@ import {
  getBillCurrentPageFactory,
  getBillPaginationMetaFactory,
  getBillTableQueryFactory,
-  getVendorDueBillsFactory
+  getVendorPayableBillsFactory,
+  getPayableBillsByPaymentMadeFactory
 } from 'store/Bills/bills.selectors';

 export default (mapState) => {
  const getBillsItems = getBillCurrentPageFactory();
  const getBillsPaginationMeta = getBillPaginationMetaFactory();
  const getBillTableQuery = getBillTableQueryFactory();
-  const getVendorDueBills = getVendorDueBillsFactory();
+  const getVendorPayableBills = getVendorPayableBillsFactory();
+  const getPayableBillsByPaymentMade = getPayableBillsByPaymentMadeFactory();

  const mapStateToProps = (state, props) => {
    const tableQuery = getBillTableQuery(state, props);
@@ -26,7 +28,8 @@ export default (mapState) => {
      billsLoading: state.bills.loading,
      nextBillNumberChanged: state.bills.nextBillNumberChanged,

-      vendorDueBills: getVendorDueBills(state, props),
+      vendorPayableBills: getVendorPayableBills(state, props),
+      paymentMadePayableBills: getPayableBillsByPaymentMade(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/client/src/containers/Purchases/PaymentMades/PaymentMade.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMade.js
@@ -1,10 +1,12 @@
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
-import { useParams, useHistory } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
+import { useIntl } from 'react-intl';

 import PaymentMadeForm from './PaymentMadeForm';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';

+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withVenderActions from 'containers/Vendors/withVendorActions';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withItemsActions from 'containers/Items/withItemsActions';
@@ -15,7 +17,7 @@ import withSettingsActions from 'containers/Settings/withSettingsActions';
 import { compose } from 'utils';

 function PaymentMade({
-  //#withwithAccountsActions
+  //#withAccountsActions
  requestFetchAccounts,

  //#withVenderActions
@@ -27,65 +29,61 @@ function PaymentMade({
  //#withPaymentMadesActions
  requestFetchPaymentMade,

-  //#withBillActions
-
  // #withSettingsActions
  requestFetchOptions,
-}) {
-  const history = useHistory();
-  const { id } = useParams();
-  const [venderId, setVenderId] = useState(null);

-  // Handle fetch accounts data
+  // #withDashboardActions
+  changePageTitle,
+}) {
+  const { id: paymentMadeId } = useParams();
+  const { formatMessage } = useIntl();
+
+  // Handle page title change in new and edit mode.
+  useEffect(() => {
+    if (paymentMadeId) {
+      changePageTitle(formatMessage({ id: 'edit_payment_made' }));
+    } else {
+      changePageTitle(formatMessage({ id: 'payment_made' }));
+    }
+  }, [changePageTitle, paymentMadeId, formatMessage]);
+
+  // Handle fetch accounts data.
  const fetchAccounts = useQuery('accounts-list', (key) =>
    requestFetchAccounts(),
  );

-  // Handle fetch Items data table or list
+  // Handle fetch Items data table or list.
  const fetchItems = useQuery('items-list', () => requestFetchItems({}));

-  // Handle fetch venders data table or list
+  // Handle fetch venders data table or list.
  const fetchVenders = useQuery('venders-list', () =>
    requestFetchVendorsTable({}),
  );

+  // Handle fetch specific payment made details.
  const fetchPaymentMade = useQuery(
-    ['payment-made', id],
+    ['payment-made', paymentMadeId],
    (key, _id) => requestFetchPaymentMade(_id),
-    { enabled: !!id },
+    { enabled: !!paymentMadeId },
  );

+  // Fetch payment made settings.
  const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
-
-  const handleFormSubmit = useCallback(
-    (payload) => {
-      payload.redirect && history.push('/payment-mades');
-    },
-    [history],
-  );
-  const handleCancel = useCallback(() => {
-    history.goBack();
-  }, [history]);
-
-  const handleVenderChange = (venderId) => {
-    setVenderId(venderId);
-  };
+ 
  return (
    <DashboardInsider
      loading={
        fetchVenders.isFetching ||
        fetchItems.isFetching ||
        fetchAccounts.isFetching ||
-        fetchPaymentMade.isFetching
+        fetchPaymentMade.isFetching ||
+        fetchSettings.isFetching
      }
      name={'payment-made'}
    >
      <PaymentMadeForm
-        onFormSubmit={handleFormSubmit}
-        paymentMadeId={id}
-        onCancelForm={handleCancel}
-        onVenderChange={handleVenderChange}
-      />
+        paymentMadeId={paymentMadeId}
+      /> 
    </DashboardInsider>
  );
 }
@@ -96,5 +94,7 @@ export default compose(
  withAccountsActions,
  withBillActions,
  withPaymentMadeActions,
-  withSettingsActions
+  withSettingsActions,
+  withDashboardActions,
 )(PaymentMade);
+
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeFloatingActions.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeFloatingActions.js
@@ -1,22 +1,38 @@
 import React from 'react';
 import { Intent, Button } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';

-export default function PaymentMadeFormFooter({
-  formik: { isSubmitting, resetForm },
+import { CLASSES } from 'common/classes';
+
+/**
+ * Payment made floating actions bar.
+ */
+export default function PaymentMadeFloatingActions({
+  isSubmitting,
  onSubmitClick,
  onCancelClick,
-  paymentMade,
+  onClearBtnClick,
 }) {
+  const handleClearBtnClick = (event) => {
+    onClearBtnClick && onClearBtnClick(event);
+  };
+
+  const handleSubmitClick = (event) => {
+    onSubmitClick && onSubmitClick(event, { redirect: true });
+  };
+
+  const handleCancelClick = (event) => {
+    onCancelClick && onCancelClick(event);
+  };
+
  return (
-    <div className={'estimate-form__floating-footer'}>
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
      <Button
        disabled={isSubmitting}
        intent={Intent.PRIMARY}
        type="submit"
-        onClick={() => {
-          onSubmitClick({ redirect: true });
-        }}
+        onClick={handleSubmitClick}
      >
        <T id={'save_send'} />
      </Button>
@@ -27,23 +43,23 @@ export default function PaymentMadeFormFooter({
        className={'ml1'}
        name={'save'}
        type="submit"
-        onClick={() => {
-          onSubmitClick({ redirect: false });
-        }}
+        onClick={handleSubmitClick}
      >
        <T id={'save'} />
      </Button>

-      <Button className={'ml1'} disabled={isSubmitting} s>
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+      >
        <T id={'clear'} />
      </Button>

      <Button
        className={'ml1'}
        type="submit"
-        onClick={() => {
-          onCancelClick && onCancelClick();
-        }}
+        onClick={handleCancelClick}
      >
        <T id={'close'} />
      </Button>
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js
@@ -1,96 +1,56 @@
-import React, {
-  useMemo,
-  useCallback,
-  useEffect,
-  useState,
-  useRef,
-} from 'react';
-
+import React, { useMemo, useState, useCallback } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import moment from 'moment';
-import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
-import { useParams, useHistory } from 'react-router-dom';
+import { Intent, Alert } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick, values } from 'lodash';
+import { pick, sumBy } from 'lodash';
+import classNames from 'classnames';

+import { CLASSES } from 'common/classes';
 import PaymentMadeHeader from './PaymentMadeFormHeader';
 import PaymentMadeItemsTable from './PaymentMadeItemsTable';
 import PaymentMadeFloatingActions from './PaymentMadeFloatingActions';

-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withPaymentMadeActions from './withPaymentMadeActions';
 import withPaymentMadeDetail from './withPaymentMadeDetail';
 import withPaymentMade from './withPaymentMade';
 import { AppToaster } from 'components';
-import Dragzone from 'components/Dragzone';
-import useMedia from 'hooks/useMedia';

-import { compose, repeatValue } from 'utils';
+import { compose, orderingLinesIndexes } from 'utils';
 import withSettings from 'containers/Settings/withSettings';
+import { useHistory } from 'react-router-dom';

-const MIN_LINES_NUMBER = 5;
-
+const ERRORS = {
+  PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
+};
+/**
+ * Payment made form component.
+ */
 function PaymentMadeForm({
-  //#withMedia
+  // #withMedia
  requestSubmitMedia,
  requestDeleteMedia,

-  //#withPaymentMadesActions
+  // #withPaymentMadesActions
  requestSubmitPaymentMade,
  requestEditPaymentMade,
-  setPaymentNumberChange,

-  // #withPaymentMade
-  nextPaymentNumberChanged,
-
-  // #withSettings
-  paymentNextNumber,
-  paymentNumberPrefix,
-
-  //#withDashboard
-  changePageTitle,
-  changePageSubtitle,
-
-  //#withPaymentMadeDetail
+  // #withPaymentMadeDetail
  paymentMade,

-  onFormSubmit,
-  onCancelForm,
-  onVenderChange,
+  paymentMadeId,
 }) {
+  const history = useHistory();
  const { formatMessage } = useIntl();
-  const [payload, setPayload] = useState({});
-  const { id } = useParams();
-  const {
-    setFiles,
-    saveMedia,
-    deletedFiles,
-    setDeletedFiles,
-    deleteMedia,
-  } = useMedia({
-    saveCallback: requestSubmitMedia,
-    deleteCallback: requestDeleteMedia,
-  });

-  const savedMediaIds = useRef([]);
-  const clearSavedMediaIds = () => {
-    savedMediaIds.current = [];
-  };
-
-  useEffect(() => {
-    onVenderChange && onVenderChange(formik.values.vendor_id);
-  });
-
-  useEffect(() => {
-    if (paymentMade && paymentMade.id) {
-      changePageTitle(formatMessage({ id: 'edit_payment_made' }));
-    } else {
-      changePageTitle(formatMessage({ id: 'payment_made' }));
-    }
-  }, [changePageTitle, paymentMade, formatMessage]);
+  const [amountChangeAlert, setAmountChangeAlert] = useState(false);
+  const [clearLinesAlert, setClearLinesAlert] = useState(false);
+  const [clearFormAlert, setClearFormAlert] = useState(false);
+  const [fullAmount, setFullAmount] = useState(null);

+  // Yup validation schema.
  const validationSchema = Yup.object().shape({
    vendor_id: Yup.string()
      .label(formatMessage({ id: 'vendor_name_' }))
@@ -108,11 +68,9 @@ function PaymentMadeForm({
    description: Yup.string(),
    entries: Yup.array().of(
      Yup.object().shape({
-        payment_amount: Yup.number().nullable(),
-        bill_number: Yup.number().nullable(),
-        amount: Yup.number().nullable(),
+        id: Yup.number().nullable(),
        due_amount: Yup.number().nullable(),
-        bill_date: Yup.date(),
+        payment_amount: Yup.number().nullable().max(Yup.ref('due_amount')),
        bill_id: Yup.number()
          .nullable()
          .when(['payment_amount'], {
@@ -122,194 +80,260 @@ function PaymentMadeForm({
      }),
    ),
  });
-  const handleDropFiles = useCallback((_files) => {
-    setFiles(_files.filter((file) => file.uploaded === false));
-  }, []);

-  const savePaymentMadeSubmit = useCallback((payload) => {
-    onFormSubmit && onFormSubmit(payload);
-  });
-
-  const defaultPaymentMade = useMemo(
-    () => ({
-      bill_id: '',
-      bill_date: moment(new Date()).format('YYYY-MM-DD'),
-      bill_number: '',
-      amount: '',
-      due_amount: '',
-      payment_amount: '',
-    }),
+  // Default payment made entry values.
+  const defaultPaymentMadeEntry = useMemo(
+    () => ({ bill_id: '', payment_amount: '', id: null }),
    [],
  );

-  const paymentNumber = paymentNumberPrefix
-    ? `${paymentNumberPrefix}-${paymentNextNumber}`
-    : paymentNextNumber;
-
+  // 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: paymentNumber,
-      // receive_amount: '',
+      payment_number: '',
      description: '',
-      entries: [...repeatValue(defaultPaymentMade, MIN_LINES_NUMBER)],
+      entries: [],
    }),
-    [defaultPaymentMade],
+    [],
  );

-  const orderingIndex = (_entries) => {
-    return _entries.map((item, index) => ({
-      ...item,
-      index: index + 1,
-    }));
-  };
-
+  // Form initial values.
  const initialValues = useMemo(
    () => ({
      ...(paymentMade
        ? {
            ...pick(paymentMade, Object.keys(defaultInitialValues)),
+            full_amount: sumBy(paymentMade.entries, 'payment_amount'),
            entries: [
-              ...paymentMade.entries.map((paymentMade) => ({
-                ...pick(paymentMade, Object.keys(defaultPaymentMade)),
+              ...paymentMade.entries.map((paymentMadeEntry) => ({
+                ...pick(paymentMadeEntry, Object.keys(defaultPaymentMadeEntry)),
              })),
-              ...repeatValue(
-                defaultPaymentMade,
-                Math.max(MIN_LINES_NUMBER - paymentMade.entries.length, 0),
-              ),
            ],
          }
        : {
            ...defaultInitialValues,
-            entries: orderingIndex(defaultInitialValues.entries),
+            entries: orderingLinesIndexes(defaultInitialValues.entries),
          }),
    }),
-    [paymentMade, defaultInitialValues, defaultPaymentMade],
+    [paymentMade, defaultInitialValues, defaultPaymentMadeEntry],
  );

-  const initialAttachmentFiles = useMemo(() => {
-    return paymentMade && paymentMade.media
-      ? paymentMade.media.map((attach) => ({
-          preview: attach.attachment_file,
-          uploaded: true,
-          metadata: { ...attach },
-        }))
-      : [];
-  }, [paymentMade]);
+  const handleSubmitForm = (
+    values,
+    { setSubmitting, resetForm, setFieldError },
+  ) => {
+    setSubmitting(true);

-  const formik = useFormik({
-    validationSchema,
-    initialValues: {
-      ...initialValues,
-    },
-    onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
-      setSubmitting(true);
-      const entries = formik.values.entries.filter((item) => {
-        if (item.bill_id !== undefined) {
-          return { ...item };
-        }
+    // Filters entries that have no `bill_id` or `payment_amount`.
+    const entries = values.entries.filter((item) => {
+      return !item.bill_id || item.payment_amount;
+    });
+    // Total payment amount of entries.
+    const totalPaymentAmount = sumBy(entries, 'payment_amount');
+
+    if (totalPaymentAmount <= 0) {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'you_cannot_make_payment_with_zero_total_amount',
+          intent: Intent.WARNING,
+        }),
      });
-      const form = {
-        ...values,
-        entries,
-      };
+      return;
+    }
+    const form = { ...values, entries };

-      const requestForm = { ...form };
+    // Triggers once the save request success.
+    const onSaved = (response) => {
+      AppToaster.show({
+        message: formatMessage({
+          id: paymentMadeId
+            ? 'the_payment_made_has_been_successfully_edited'
+            : 'the_payment_made_has_been_successfully_created',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      resetForm();
+    };

-      if (paymentMade && paymentMade.id) {
-        requestEditPaymentMade(paymentMade.id, requestForm)
-          .then((response) => {
-            AppToaster.show({
-              message: formatMessage({
-                id: 'the_payment_made_has_been_successfully_edited',
-              }),
-              intent: Intent.SUCCESS,
-            });
-            setSubmitting(false);
-            savePaymentMadeSubmit({ action: 'update', ...payload });
-            resetForm();
-          })
-          .catch((error) => {
-            setSubmitting(false);
-          });
-      } else {
-        requestSubmitPaymentMade(requestForm)
-          .then((response) => {
-            AppToaster.show({
-              message: formatMessage({
-                id: 'the_payment_made_has_been_successfully_created',
-              }),
-              intent: Intent.SUCCESS,
-            });
-            setSubmitting(false);
-            resetForm();
-            savePaymentMadeSubmit({ action: 'new', ...payload });
-          })
-          .catch((errors) => {
-            setSubmitting(false);
-          });
+    const onError = (errors) => {
+      const getError = (errorType) => errors.find((e) => e.type === errorType);
+
+      if (getError(ERRORS.PAYMENT_NUMBER_NOT_UNIQUE)) {
+        setFieldError(
+          'payment_number',
+          formatMessage({ id: 'payment_number_is_not_unique' }),
+        );
      }
-    },
+      setSubmitting(false);
+    };
+
+    if (paymentMade && paymentMade.id) {
+      requestEditPaymentMade(paymentMade.id, form).then(onSaved).catch(onError);
+    } else {
+      requestSubmitPaymentMade(form).then(onSaved).catch(onError);
+    }
+  };
+
+  const {
+    errors,
+    touched,
+    setFieldValue,
+    getFieldProps,
+    setValues,
+    values,
+    handleSubmit,
+    isSubmitting,
+  } = useFormik({
+    validationSchema,
+    initialValues,
+    onSubmit: handleSubmitForm,
  });

-  const handleDeleteFile = useCallback(
-    (_deletedFiles) => {
-      _deletedFiles.forEach((deletedFile) => {
-        if (deletedFile.upload && deletedFile.metadata.id) {
-          setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
-        }
-      });
+  const handleFullAmountChange = useCallback(
+    (value) => {
+      if (value !== fullAmount) {
+        setAmountChangeAlert(value);
+      }
    },
-    [setDeletedFiles, deletedFiles],
+    [fullAmount, setAmountChangeAlert],
  );

-  const handleSubmitClick = useCallback(
-    (payload) => {
-      setPayload(payload);
-      formik.submitForm();
-    },
-    [setPayload, formik],
-  );
-
-  const handleCancelClick = useCallback(
-    (payload) => {
-      onCancelForm && onCancelForm(payload);
-    },
-    [onCancelForm],
-  );
-
-  const handleClickAddNewRow = () => {
-    formik.setFieldValue(
-      'entries',
-      orderingIndex([...formik.values.entries, defaultPaymentMade]),
-    );
+  // Handle cancel button of amount change alert.
+  const handleCancelAmountChangeAlert = () => {
+    setAmountChangeAlert(false);
  };

+  // Handle confirm button of amount change alert.
+  const handleConfirmAmountChangeAlert = () => {
+    setFullAmount(amountChangeAlert);
+    setAmountChangeAlert(false);
+  };
+
+  // Handle update data.
+  const handleUpdataData = useCallback(
+    (entries) => {
+      setFieldValue('entries', entries);
+    },
+    [setFieldValue],
+  );
+
+  // Handle cancel button click.
+  const handleCancelClick = useCallback(() => {
+    history.push('/payment-mades');
+  }, [history]);
+
+  // Handle clear all lines button click.
  const handleClearAllLines = () => {
-    formik.setFieldValue(
-      'entries',
-      orderingIndex([...repeatValue(defaultPaymentMade, MIN_LINES_NUMBER)]),
-    );
+    setClearLinesAlert(true);
  };

-  useEffect(() => {
-    formik.setFieldValue('payment_number', paymentNumber);
-    setPaymentNumberChange(false);
-  }, [nextPaymentNumberChanged, paymentNumber]);
+  const handleCancelClearLines = useCallback(() => {
+    setClearLinesAlert(false);
+  }, [setClearLinesAlert]);
+
+  const handleConfirmClearLines = useCallback(() => {
+    setFieldValue(
+      'entries',
+      values.entries.map((entry) => ({
+        ...entry,
+        payment_amount: 0,
+      })),
+    );
+    setClearLinesAlert(false);
+  }, [setFieldValue, setClearLinesAlert, values.entries]);
+
+  // Handle clear button click.
+  const handleClearBtnClick = useCallback(() => {
+    setClearFormAlert(true);
+  }, []);
+
+  //
+  const handleCancelClearFormAlert = () => {
+    setClearFormAlert(false);
+  };
+
+  const handleConfirmCancelClearFormAlert = () => {
+    setValues({
+      ...defaultInitialValues,
+      ...(paymentMadeId
+        ? {
+            vendor_id: values.vendor_id,
+            payment_number: values.payment_number,
+          }
+        : {}),
+    });
+    setClearFormAlert(false);
+  };

  return (
-    <div className={'payment_made_form'}>
-      <form onSubmit={formik.handleSubmit}>
-        <PaymentMadeHeader formik={formik} />
+    <div
+      className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_PAYMENT_MADE)}
+    >
+      <form onSubmit={handleSubmit}>
+        <PaymentMadeHeader
+          paymentMadeId={paymentMadeId}
+          vendorId={values.vendor_id}
+          errors={errors}
+          touched={touched}
+          setFieldValue={setFieldValue}
+          getFieldProps={getFieldProps}
+          values={values}
+          onFullAmountChanged={handleFullAmountChange}
+        />
+
        <PaymentMadeItemsTable
-          formik={formik}
-          entries={formik.values.entries}
-          vendor_id={formik.values.vendor_id}
-          onClickAddNewRow={handleClickAddNewRow}
+          fullAmount={fullAmount}
+          paymentEntries={values.entries}
+          vendorId={values.vendor_id}
+          paymentMadeId={paymentMadeId}
+          onUpdateData={handleUpdataData}
          onClickClearAllLines={handleClearAllLines}
+          errors={errors?.entries}
+        />
+
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'ok'} />}
+          intent={Intent.WARNING}
+          isOpen={amountChangeAlert}
+          onCancel={handleCancelAmountChangeAlert}
+          onConfirm={handleConfirmAmountChangeAlert}
+        >
+          <p>Are you sure to discard full amount?</p>
+        </Alert>
+
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'ok'} />}
+          intent={Intent.WARNING}
+          isOpen={clearLinesAlert}
+          onCancel={handleCancelClearLines}
+          onConfirm={handleConfirmClearLines}
+        >
+          <p>Are you sure to discard full amount?</p>
+        </Alert>
+
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'ok'} />}
+          intent={Intent.WARNING}
+          isOpen={clearFormAlert}
+          onCancel={handleCancelClearFormAlert}
+          onConfirm={handleConfirmCancelClearFormAlert}
+        >
+          <p>Are you sure to clear form data.</p>
+        </Alert>
+
+        <PaymentMadeFloatingActions
+          isSubmitting={isSubmitting}
+          onCancelClick={handleCancelClick}
+          onClearBtnClick={handleClearBtnClick}
        />

        {/* <Dragzone
@@ -319,18 +343,12 @@ function PaymentMadeForm({
          hint={'Attachments: Maxiumum size: 20MB'}
        /> */}
      </form>
-      <PaymentMadeFloatingActions
-        formik={formik}
-        onSubmitClick={handleSubmitClick}
-        onCancel={handleCancelClick}
-      />
    </div>
  );
 }

 export default compose(
  withPaymentMadeActions,
-  withDashboardActions,
  withMediaActions,
  withPaymentMadeDetail(),
  withPaymentMade(({ nextPaymentNumberChanged }) => ({
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
  FormGroup,
  InputGroup,
@@ -7,38 +7,59 @@ import {
  MenuItem,
  Classes,
 } from '@blueprintjs/core';
-
+import { sumBy } from 'lodash';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
-import { useParams, useHistory } from 'react-router-dom';
-
 import moment from 'moment';
-import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { momentFormatter, compose, tansformDateValue } from 'utils';
 import {
  AccountsSelectList,
  ListSelect,
  ErrorMessage,
  FieldRequiredHint,
-  Icon,
-  InputPrependButton,
+  Money,
+  Hint,
 } from 'components';

+import withBills from '../Bill/withBills';
 import withVender from 'containers/Vendors/withVendors';
 import withAccounts from 'containers/Accounts/withAccounts';
-import withDialogActions from 'containers/Dialog/withDialogActions';

+/**
+ * Payment made header form.
+ */
 function PaymentMadeFormHeader({
-  formik: { errors, touched, setFieldValue, getFieldProps, values },
+  paymentMadeId,
+  vendorId,
+
+  // #useFormik
+  errors,
+  touched,
+  setFieldValue,
+  getFieldProps,
+  values,
+
+  onFullAmountChanged,

  //#withVender
  vendorsCurrentPage,
  vendorItems,
+
  //#withAccouts
  accountsList,
-  // #withDialogActions
-  openDialog,
+
+  // #withBills
+  vendorPayableBills,
 }) {
+  const isNewMode = !paymentMadeId;
+
+  const payableFullAmount = useMemo(
+    () => sumBy(vendorPayableBills, 'due_amount'),
+    [vendorPayableBills],
+  );
+
  const handleDateChange = useCallback(
    (date_filed) => (date) => {
      const formatted = moment(date).format('YYYY-MM-DD');
@@ -58,6 +79,14 @@ function PaymentMadeFormHeader({
    [],
  );

+  const triggerFullAmountChanged = (value) => {
+    onFullAmountChanged && onFullAmountChanged(value);
+  }
+
+  const handleFullAmountBlur = (event) => {
+    triggerFullAmountChanged(event.currentTarget.value);
+  };
+
  const handleFilterVender = (query, vender, index, exactMatch) => {
    const normalizedTitle = vender.display_name.toLowerCase();
    const normalizedQuery = query.toLowerCase();
@@ -85,14 +114,15 @@ function PaymentMadeFormHeader({
    [accountsList],
  );

-  const handlePaymentNumberChange = useCallback(() => {
-    openDialog('payment-number-form', {});
-  }, [openDialog]);
+  const handleReceiveFullAmountClick = () => {
+    setFieldValue('full_amount', payableFullAmount);
+    triggerFullAmountChanged(payableFullAmount);
+  };

  return (
-    <div>
-      <div>
-        {/* Vendor name */}
+    <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}
@@ -114,10 +144,12 @@ function PaymentMadeFormHeader({
            selectedItemProp={'id'}
            defaultText={<T id={'select_vender_account'} />}
            labelProp={'display_name'}
+            buttonProps={{ disabled: !isNewMode }}
+            disabled={!isNewMode}
          />
        </FormGroup>

-        {/* Payment date */}
+        {/* ------------ Payment date ------------ */}
        <FormGroup
          label={<T id={'payment_date'} />}
          inline={true}
@@ -136,7 +168,35 @@ function PaymentMadeFormHeader({
          />
        </FormGroup>

-        {/* payment number */}
+        {/* ------------ 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={payableFullAmount} currency={'USD'} />)
+          </a>
+        </FormGroup>
+
+        {/* ------------ Payment number ------------ */}
        <FormGroup
          label={<T id={'payment_no'} />}
          inline={true}
@@ -154,25 +214,11 @@ function PaymentMadeFormHeader({
              errors.payment_number && touched.payment_number && Intent.DANGER
            }
            minimal={true}
-            rightElement={
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handlePaymentNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: 'Setting your auto-generated payment number',
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            }
-            minimal={true}
            {...getFieldProps('payment_number')}
          />
        </FormGroup>

-        {/* payment account */}
+        {/* ------------ Payment account ------------ */}
        <FormGroup
          label={<T id={'payment_account'} />}
          className={classNames(
@@ -192,7 +238,7 @@ function PaymentMadeFormHeader({
              name={'payment_account_id'}
              {...{ errors, touched }}
            />
-          }
+        }
        >
          <AccountsSelectList
            accounts={paymentAccounts}
@@ -202,22 +248,22 @@ function PaymentMadeFormHeader({
            selectedAccountId={values.payment_account_id}
          />
        </FormGroup>
-      </div>

-      {/* 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
+        {/* ------------ 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>
  );
 }
@@ -230,5 +276,7 @@ export default compose(
  withAccounts(({ accountsList }) => ({
    accountsList,
  })),
-  withDialogActions,
+  withBills(({ vendorPayableBills }) => ({
+    vendorPayableBills,
+  })),
 )(PaymentMadeFormHeader);
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js
@@ -1,234 +1,137 @@
-import React, { useState, useMemo, useEffect, useCallback } from 'react';
-import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import { Icon, DataTable } from 'components';
-import moment from 'moment';
-
-import { compose, formattedAmount, transformUpdatedRows } from 'utils';
-import {
-  MoneyFieldCell,
-  DivFieldCell,
-  EmptyDiv,
-} from 'components/DataTableCells';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { useQuery } from 'react-query';
+import { CloudLoadingIndicator } from 'components'
+import PaymentMadeItemsTableEditor from './PaymentMadeItemsTableEditor';

+import withPaymentMadeActions from './withPaymentMadeActions';
+import withBillActions from '../Bill/withBillActions';
 import withBills from '../Bill/withBills';
-import { omit, pick } from 'lodash';

-const ActionsCellRenderer = ({
-  row: { index },
-  column: { id },
-  cell: { value },
-  data,
-  payload,
-}) => {
-  if (data.length <= index + 1) {
-    return '';
-  }
-  const onRemoveRole = () => {
-    payload.removeRow(index);
-  };
-  return (
-    <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
-      <Button
-        icon={<Icon icon={'times-circle'} iconSize={14} />}
-        iconSize={14}
-        className="m12"
-        intent={Intent.DANGER}
-        onClick={onRemoveRole}
-      />
-    </Tooltip>
-  );
-};
-
-const CellRenderer = (content, type) => (props) => {
-  if (props.data.length === props.row.index + 1) {
-    return '';
-  }
-  return content(props);
-};
-
-const TotalCellRederer = (content, type) => (props) => {
-  if (props.data.length === props.row.index + 1) {
-    const total = props.data.reduce((total, entry) => {
-      const amount = parseInt(entry[type], 10);
-      const computed = amount ? total + amount : total;
-
-      return computed;
-    }, 0);
-    return <span>{formattedAmount(total, 'USD')}</span>;
-  }
-  return content(props);
-};
+import { compose } from 'utils';

+/**
+ * Payment made items table.
+ */
 function PaymentMadeItemsTable({
-  //#ownProps
-  onClickRemoveRow,
-  onClickAddNewRow,
+  // #ownProps
+  paymentMadeId,
+  vendorId,
+  fullAmount,
+  onUpdateData,
+  paymentEntries = [], // { bill_id: number, payment_amount: number, id?: number }
  onClickClearAllLines,
-  entries,
-  formik: { errors, setFieldValue, values },
+  errors,
+
+  // #withBillActions
+  requestFetchDueBills,
+
+  // #withBills
+  vendorPayableBills,
+  paymentMadePayableBills,
+
+  // #withPaymentMadeDetail
+  paymentMade,
 }) {
-  const [rows, setRows] = useState([]);
-  const [entrie, setEntrie] = useState([]);
-  const { formatMessage } = useIntl();
+  const [tableData, setTableData] = useState([]);
+  const [localAmount, setLocalAmount] = useState(fullAmount);
+
+  // Payable bills based on selected vendor or specific payment made.
+  const payableBills = useMemo(
+    () =>
+      paymentMadeId
+        ? paymentMadePayableBills
+        : vendorId
+        ? vendorPayableBills
+        : [],
+    [paymentMadeId, paymentMadePayableBills, vendorId, vendorPayableBills],
+  );
+  const isNewMode = !paymentMadeId;
+
+  const triggerUpdateData = useCallback((data) => {
+    onUpdateData && onUpdateData(data);
+  }, [onUpdateData]);
+
+  // Merges payment entries with payable bills.
+  const computedTableData = useMemo(() => {
+    const entriesTable = new Map(
+      paymentEntries.map((e) => [e.bill_id, e]),
+    );
+    return payableBills.map((bill) => {
+      const entry = entriesTable.get(bill.id);
+      return {
+        ...bill,
+        bill_id: bill.id,
+        bill_payment_amount: bill.payment_amount,
+        payment_amount: entry ? entry.payment_amount : 0,
+        id: entry ? entry.id : null,
+      }
+    });
+  }, [paymentEntries, payableBills]);

  useEffect(() => {
-    setRows([...entries.map((e) => ({ ...e }))]);
-  }, [entries]);
+    setTableData(computedTableData);
+  }, [computedTableData]);

-  const columns = useMemo(
-    () => [
-      {
-        Header: '#',
-        accessor: 'index',
-        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
-        width: 40,
-        disableResizing: true,
-        disableSortBy: true,
-      },
-      {
-        Header: formatMessage({ id: 'Date' }),
-        id: 'bill_date',
-        accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
-        Cell: CellRenderer(EmptyDiv, 'bill_date'),
-        disableSortBy: true,
-        disableResizing: true,
-        width: 250,
-      },
+  // Handle mapping `fullAmount` prop to `localAmount` state.
+  useEffect(() => {
+    if (localAmount !== fullAmount) {
+      let _fullAmount = fullAmount;
+      const newTableData = tableData.map((data) => {
+        const amount = Math.min(data.due_amount, _fullAmount);
+        _fullAmount -= Math.max(amount, 0);

-      {
-        Header: formatMessage({ id: 'bill_number' }),
-        accessor: (row) => `#${row.bill_number}`,
-        Cell: CellRenderer(EmptyDiv, 'bill_number'),
-        disableSortBy: true,
-        className: 'bill_number',
-      },
-      {
-        Header: formatMessage({ id: 'bill_amount' }),
-        accessor: 'amount',
-        Cell: CellRenderer(DivFieldCell, 'amount'),
-        disableSortBy: true,
-        width: 100,
-        className: '',
-      },
-      {
-        Header: formatMessage({ id: 'amount_due' }),
-        accessor: 'due_amount',
-        Cell: TotalCellRederer(DivFieldCell, 'due_amount'),
-        disableSortBy: true,
-        width: 150,
-        className: '',
-      },
-      {
-        Header: formatMessage({ id: 'payment_amount' }),
-        accessor: 'payment_amount',
-        Cell: TotalCellRederer(MoneyFieldCell, 'payment_amount'),
-
-        disableSortBy: true,
-        width: 150,
-        className: '',
-      },
-      {
-        Header: '',
-        accessor: 'action',
-        Cell: ActionsCellRenderer,
-        className: 'actions',
-        disableSortBy: true,
-        disableResizing: true,
-        width: 45,
-      },
-    ],
-    [formatMessage],
-  );
-
-  const handleRemoveRow = useCallback(
-    (rowIndex) => {
-      if (rows.length <= 1) {
-        return;
-      }
-      const removeIndex = parseInt(rowIndex, 10);
-      const newRows = rows.filter((row, index) => index !== removeIndex);
-
-      setFieldValue(
-        'entries',
-        newRows.map((row, index) => ({
-          ...omit(row),
-          index: index - 1,
-        })),
-      );
-      onClickRemoveRow && onClickRemoveRow(removeIndex);
-    },
-    [entrie, setFieldValue, onClickRemoveRow],
-  );
-
-  const onClickNewRow = () => {
-    onClickAddNewRow && onClickAddNewRow();
-  };
-
-  const handleClickClearAllLines = () => {
-    onClickClearAllLines && onClickClearAllLines();
-  };
-
-  const rowClassNames = useCallback((row) => {
-    return { 'row--total': rows.length === row.index + 1 };
-  });
-
-  const handleUpdateData = useCallback(
-    (rowIndex, columnId, value) => {
-      const newRows = rows.map((row, index) => {
-        if (index === rowIndex) {
-          return {
-            ...rows[rowIndex],
-            [columnId]: value,
-          };
-        }
-        return row;
+        return {
+          ...data,
+          payment_amount: amount,
+        };
      });
-      // setRows(newRows);
-      setFieldValue(
-        'entries',
-        newRows,
-        // .map((row) => ({
-        //   ...pick(row, ['payment_amount']),
-        //   invoice_id: row.id,
-        // })),
-      );
-    },
-    [rows, setFieldValue, setRows],
-  );
-  return (
-    <div className={'estimate-form__table'}>
-      <DataTable
-        columns={columns}
-        data={rows}
-        rowClassNames={rowClassNames}
-        spinnerProps={false}
-        payload={{
-          errors: errors.entries || [],
-          updateData: handleUpdateData,
-          removeRow: handleRemoveRow,
-        }}
-      />
-      <div className={'mt1'}>
-        <Button
-          small={true}
-          className={'button--secondary button--new-line'}
-          onClick={onClickNewRow}
-        >
-          <T id={'new_lines'} />
-        </Button>
+      setTableData(newTableData);
+      setLocalAmount(fullAmount);
+      triggerUpdateData(newTableData);
+    }
+  }, [
+    tableData,
+    setTableData,
+    setLocalAmount,
+    triggerUpdateData,
+    localAmount,
+    fullAmount,
+  ]);

-        <Button
-          small={true}
-          className={'button--secondary button--clear-lines ml1'}
-          onClick={handleClickClearAllLines}
-        >
-          <T id={'clear_all_lines'} />
-        </Button>
-      </div>
-    </div>
+  // Fetches vendor due bills.
+  const fetchVendorDueBills = useQuery(
+    ['vendor-due-bills', vendorId],
+    (key, _vendorId) => requestFetchDueBills(_vendorId),
+    { enabled: isNewMode && vendorId },
+  );
+
+  // Handle update data.
+  const handleUpdateData = (rows) => {
+    triggerUpdateData(rows);
+  };
+
+  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}>
+      <PaymentMadeItemsTableEditor
+        noResultsMessage={noResultsMessage}
+        data={tableData}
+        errors={errors}
+        onUpdateData={handleUpdateData}
+        onClickClearAllLines={onClickClearAllLines}
+      />
+    </CloudLoadingIndicator>
  );
 }

-export default compose()(PaymentMadeItemsTable);
-// withBills(({}) => ({}))
+export default compose( 
+  withPaymentMadeActions,
+  withBillActions,
+  withBills(({ vendorPayableBills, paymentMadePayableBills }) => ({
+    vendorPayableBills,
+    paymentMadePayableBills,
+  })),
+)(PaymentMadeItemsTable);
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js
@@ -0,0 +1,165 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { Button  } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import moment from 'moment';
+import { sumBy } from 'lodash';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import { DataTable, Money } from 'components';
+import { transformUpdatedRows } from 'utils';
+import {
+  MoneyFieldCell,
+  DivFieldCell,
+  EmptyDiv,
+} from 'components/DataTableCells';
+
+/**
+ * Cell renderer guard.
+ */
+const CellRenderer = (content, type) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    return '';
+  }
+  return content(props);
+};
+
+const TotalCellRederer = (content, type) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    return <Money amount={props.cell.row.original[type]} currency={'USD'} />
+  }
+  return content(props);
+};
+
+/**
+ * Payment made items editor table.
+ */
+export default function PaymentMadeItemsTableEditor({
+  //#ownProps
+  onClickClearAllLines,
+  onUpdateData,
+  data,
+  errors,
+  noResultsMessage
+}) {
+  const transformedData = useMemo(() => {
+    const rows = data;
+    const totalRow = {
+      due_amount: sumBy(data, 'due_amount'),
+      payment_amount: sumBy(data, 'payment_amount'),
+    };
+    if (rows.length > 0) { rows.push(totalRow) }
+    return rows;
+  }, [data]);
+
+  const [localData, setLocalData] = useState(transformedData);
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    if (localData !== transformedData) {
+      setLocalData(transformedData);
+    }
+  }, [setLocalData, localData, transformedData]);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: '#',
+        accessor: 'index',
+        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
+        width: 40,
+        disableResizing: true,
+        disableSortBy: true,
+      },
+      {
+        Header: formatMessage({ id: 'Date' }),
+        id: 'bill_date',
+        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_number}`,
+        Cell: CellRenderer(EmptyDiv, 'bill_number'),
+        disableSortBy: true,
+        className: 'bill_number',
+      },
+      {
+        Header: formatMessage({ id: 'bill_amount' }),
+        accessor: 'amount',
+        Cell: CellRenderer(DivFieldCell, 'amount'),
+        disableSortBy: true,
+        className: '',
+      },
+      {
+        Header: formatMessage({ id: 'amount_due' }),
+        accessor: 'due_amount',
+        Cell: TotalCellRederer(DivFieldCell, 'due_amount'),
+        disableSortBy: true,
+        className: '',
+      },
+      {
+        Header: formatMessage({ id: 'payment_amount' }),
+        accessor: 'payment_amount',
+        Cell: TotalCellRederer(MoneyFieldCell, 'payment_amount'),
+        disableSortBy: true,
+        className: '',
+      },
+    ],
+    [formatMessage],
+  );
+
+  // Handle click clear all lines button.
+  const handleClickClearAllLines = () => {
+    onClickClearAllLines && onClickClearAllLines();
+  };
+
+  const rowClassNames = useCallback(
+    (row) =>  ({ 'row--total': localData.length === row.index + 1 }),
+    [localData],
+  );
+
+  // Handle update data.
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = transformUpdatedRows(
+        localData,
+        rowIndex,
+        columnId,
+        value,
+      );
+      setLocalData(newRows);
+      onUpdateData && onUpdateData(newRows);
+    },
+    [localData, setLocalData, onUpdateData],
+  );
+
+  return (
+    <div className={classNames(
+      CLASSES.DATATABLE_EDITOR,
+      CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES,
+    )}>
+      <DataTable
+        columns={columns}
+        data={localData}
+        rowClassNames={rowClassNames}
+        spinnerProps={false}
+        payload={{
+          errors,
+          updateData: handleUpdateData,
+        }}
+        noResults={noResultsMessage}
+      />
+      <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS, 'mt1')}>
+        <Button
+          small={true}
+          className={'button--secondary button--clear-lines'}
+          onClick={handleClickClearAllLines}
+        >
+          <T id={'clear_all_lines'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
--- a/client/src/containers/Purchases/PaymentMades/withPaymentMadeActions.js
+++ b/client/src/containers/Purchases/PaymentMades/withPaymentMadeActions.js
@@ -6,6 +6,7 @@ import {
  deletePaymentMade,
  fetchPaymentMadesTable,
  fetchPaymentMade,
+  fetchPaymentMadeBills,
 } from 'store/PaymentMades/paymentMade.actions';

 const mapDispatchToProps = (dispatch) => ({
@@ -16,6 +17,8 @@ const mapDispatchToProps = (dispatch) => ({
  requestFetchPaymentMadesTable: (query = {}) =>
    dispatch(fetchPaymentMadesTable({ query: { ...query } })),

+  requestFetchPaymentMadeBills: (paymentMadeId) => dispatch(fetchPaymentMadeBills({ paymentMadeId })),
+
  changePaymentMadeView: (id) =>
    dispatch({
      type: t.PAYMENT_MADE_SET_CURRENT_VIEW,
--- a/client/src/store/Bills/bills.actions.js
+++ b/client/src/store/Bills/bills.actions.js
@@ -123,11 +123,19 @@ export const fetchDueBills = ({ vendorId }) => (dispatch) => new Promise((resolv

  ApiService.get(`purchases/bills/due`, { params }).then((response) => {
    dispatch({
-      type: t.DUE_BILLS_SET,
+      type: t.BILLS_ITEMS_SET,
      payload: {
        bills: response.data.bills,
-      }
+      },
    });
+    if ( vendorId ) {
+      dispatch({
+        type: t.BILLS_PAYABLE_BY_VENDOR_ID,
+        payload: {
+          bills: response.data.bills,
+        }
+      });
+    }
    resolve(response);
  }).catch(error => { reject(error) });
 });
--- a/client/src/store/Bills/bills.reducer.js
+++ b/client/src/store/Bills/bills.reducer.js
@@ -13,7 +13,10 @@ const initialState = {
    page: 1,
  },
  nextBillNumberChanged: false,
-  dueBills: {},
+  payable: {
+    byVendorId: [],
+    byBillPayamentId: [],
+  },
 };

 const defaultBill = {
@@ -105,23 +108,31 @@ const reducer = createReducer(initialState, {
    state.nextBillNumberChanged = isChanged;
  },

-  [t.DUE_BILLS_SET]: (state, action) => {
+  [t.BILLS_PAYABLE_BY_VENDOR_ID]: (state, action) => {
    const { bills } = action.payload;
-
-    const _dueBills = { ...state.dueBills };
-    const _bills = { ...state.items };
+    const _data = {};

    bills.forEach((bill) => {
-      _bills[bill.id] = { ...bill };
-      
-      if (!_dueBills[bill.vendor_id]) {
-        _dueBills[bill.vendor_id] = []
+      if (!_data[bill.vendor_id]) {
+        _data[bill.vendor_id] = [];
      }
-      _dueBills[bill.vendor_id].push(bill.id);
+      _data[bill.vendor_id].push(bill.id);
    });

-    state.items = { ..._bills };
-    state.dueBills = { ..._dueBills };
+    state.payable.byVendorId = {
+      ...state.payable.byVendorId,
+      ..._data,
+    };
+  },
+
+  [t.BILLS_PAYABLE_BY_PAYMENT_ID]: (state, action) => {
+    const { bills, billPaymentId } = action.payload;
+    const _data = [];
+
+    bills.forEach((bill) => {
+      _data.push(bill.id);
+    });
+    state.payable.byBillPayamentId[billPaymentId] = _data;
  }
 });

--- a/client/src/store/Bills/bills.selectors.js
+++ b/client/src/store/Bills/bills.selectors.js
@@ -19,7 +19,10 @@ const billByIdSelector = (state, props) => state.bills.items[props.billId];
 * Retrieve vendor due bills ids.
 * @return {number[]}
 */
-const billsDueVendorSelector = (state, props) => state.bills.dueBills[props.vendorId];
+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;
@@ -62,16 +65,26 @@ export const getBillPaginationMetaFactory = () =>
    return billPage?.paginationMeta || {};
  });

-/**
- * Retrieve due bills of specific vendor.
- */
-export const getVendorDueBillsFactory = () => 
+
+export const getVendorPayableBillsFactory = () => 
  createSelector(
    billItemsSelector,
-    billsDueVendorSelector,
-    (billsItems, dueBillsIds) => {
-      return Array.isArray(dueBillsIds)
-        ? pickItemsFromIds(billsItems, dueBillsIds) || []
+    billsPayableVendorSelector,
+    (billsItems, payableBillsIds) => {
+      return Array.isArray(payableBillsIds)
+        ? pickItemsFromIds(billsItems, payableBillsIds) || []
        : [];
    },
+  );
+
+
+export const getPayableBillsByPaymentMadeFactory = () => 
+  createSelector(
+    billItemsSelector,
+    billsPayableByPaymentMadeSelector,
+    (billsItems, payableBillsIds) => {
+      return Array.isArray(payableBillsIds)
+      ? pickItemsFromIds(billsItems, payableBillsIds) || []
+      : [];
+    },
  );
--- a/client/src/store/Bills/bills.type.js
+++ b/client/src/store/Bills/bills.type.js
@@ -10,5 +10,7 @@ export default {
  BILLS_PAGE_SET: 'BILLS_PAGE_SET',
  BILLS_ITEMS_SET: 'BILLS_ITEMS_SET',
  BILL_NUMBER_CHANGED: 'BILL_NUMBER_CHANGED',
-  DUE_BILLS_SET: 'DUE_BILLS_SET'
+
+  BILLS_PAYABLE_BY_PAYMENT_ID: 'BILLS_PAYABLE_BY_PAYMENT_ID',
+  BILLS_PAYABLE_BY_VENDOR_ID: 'BILLS_PAYABLE_BY_VENDOR_ID',
 };
--- a/client/src/store/PaymentMades/paymentMade.actions.js
+++ b/client/src/store/PaymentMades/paymentMade.actions.js
@@ -106,7 +106,20 @@ export const fetchPaymentMade = ({ id }) => {
            type: t.PAYMENT_MADE_SET,
            payload: {
              id,
-              bill_payment: response.data.bill_payment,
+              paymentMade: response.data.bill_payment,
+            },
+          });
+          dispatch({
+            type: t.BILLS_PAYABLE_BY_PAYMENT_ID,
+            payload: {
+              billPaymentId: id,
+              bills: response.data.bill_payment.payable_bills,
+            },
+          });
+          dispatch({
+            type: t.BILLS_ITEMS_SET,
+            payload: {
+              bills: response.data.bill_payment.payable_bills,
            },
          });
          resovle(response);
@@ -118,3 +131,17 @@ export const fetchPaymentMade = ({ id }) => {
        });
    });
 };
+
+export const fetchPaymentMadeBills = ({ paymentMadeId }) => (dispatch) => {
+  return new Promise((resolve, reject) => {
+    ApiService.get(`purchases/bill_payments/${paymentMadeId}/bills`).then((response) => {
+      dispatch({
+        type: t.BILLS_ITEMS_SET,
+        payload: {
+          bills: response.data.bills,
+        },
+      });
+      resolve(response);
+    }).catch((error) => { reject(error) });
+  });
+}
--- a/client/src/store/PaymentMades/paymentMade.reducer.js
+++ b/client/src/store/PaymentMades/paymentMade.reducer.js
@@ -39,6 +39,17 @@ const reducer = createReducer(initialState, {
    };
  },

+  [t.PAYMENT_MADE_SET]: (state, action) => {
+    const { id, paymentMade } = action.payload;
+    const _oldPaymentMade = (state.items[id] || {});
+
+    state.items[id] = {
+      ...defaultPaymentMade,
+      ..._oldPaymentMade,
+      ...paymentMade,
+    };
+  },
+
  [t.PAYMENT_MADE_DELETE]: (state, action) => {
    const { id } = action.payload;

--- a/client/src/store/PaymentMades/paymentMade.selector.js
+++ b/client/src/store/PaymentMades/paymentMade.selector.js
@@ -23,6 +23,9 @@ const paymentMadesIds = (state, props) => {
  return state.paymentMades.items[props.paymentMadeId];
 };

+const paymentMadeEntries = (state, props) => props.paymentMadeEntries;
+const billsItemsSelector = (state, props) => state.bills.items;
+
 export const getPaymentMadeCurrentPageFactory = () =>
  createSelector(
    paymentMadesPageSelector,
@@ -54,3 +57,15 @@ export const getPaymentMadeByIdFactory = () =>
  createSelector(paymentMadesIds, (payment_Made) => {
    return payment_Made;
  });
+
+export const getPaymentMadeEntriesDataFactory = () => 
+  createSelector(
+    billsItemsSelector,
+    paymentMadeEntries,
+    (billsItems, paymentEntries) => {
+      return Array.isArray(paymentEntries) ? 
+        paymentEntries.map((entry) => ({
+          ...entry, ...(billsItems[entry.bill_id] || {}),
+        })) : [];
+    }
+  ) 
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -70,6 +70,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
@import 'pages/estimates';
@import 'pages/invoice-form';
@import 'pages/receipt-form';
+@import 'pages/payment-made';

 // Views
@import 'views/filter-dropdown';
@@ -219,8 +220,16 @@ body.authentication {
    padding: 15px;
    margin: 15px 0 0 0;
  }
-}

+  &__floating-actions{
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    padding: 14px 18px;
+    border-top: 1px solid #ececec;
+  }
+}
 .datatable-editor{

  padding: 15px 15px 0;
@@ -390,4 +399,33 @@ body.authentication {
      }
    }
  }
+}
+
+
+.cloud-spinner{
+  position: relative;
+
+  &.is-loading:before{
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 999;
+  }
+
+  .bp3-spinner{
+    position: absolute;
+    z-index: 999999;
+    left: 50%;
+    top: 50%;
+    margin-top: -20px;
+    margin-left: -20px;
+  }
+
+  &:not(.is-loading) .bp3-spinner{
+    display: none;
+  }
 }
--- a/client/src/style/pages/payment-made.scss
+++ b/client/src/style/pages/payment-made.scss
@@ -0,0 +1,61 @@
+
+
+.page-form--payment-made {
+  $self: '.page-form';
+
+  #{$self}__header{
+    .bp3-label{
+      min-width: 160px;
+    }
+    .bp3-form-content{
+      width: 100%;
+    }
+
+    .bp3-form-group{
+      margin-bottom: 18px;
+
+      &.bp3-inline{
+        max-width: 470px; 
+      }
+      a.receive-full-amount{
+        font-size: 12px;
+        margin-top: 6px;
+        display: inline-block;
+      }
+    }
+  }
+
+  #{$self}__primary-section{
+    padding-bottom: 2px;
+  }
+
+  .datatable-editor{
+    
+    .table .tbody{
+      .tr.no-results{
+        .td{
+          border-bottom: 1px solid #e2e2e2;
+          font-size: 15px;
+          padding: 26px 0;
+          color: #5a5a77;
+        }
+      }
+    }
+
+    .table{
+      .tr{
+        .td:first-of-type,
+        .th:first-of-type{
+          span, div{
+            margin-left: auto;
+            margin-right: auto;
+          }
+        }
+      }
+    }
+  }
+
+  #{$self}__footer{
+
+  }
+}
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -243,3 +243,7 @@ export const flatToNestedArray = (
  });
  return nestedArray;
 };
+
+export const orderingLinesIndexes = (lines, attribute = 'index') => {
+  return lines.map((line, index) => ({ ...line, [attribute]: index + 1 }));
+};