chrone: sperate client and server to different repos.

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js

@@ -0,0 +1,74 @@
+import React, { useCallback } from 'react';
+import { CloudLoadingIndicator } from 'components';
+import classNames from 'classnames';
+import { FormattedMessage as T } from 'components';
+
+import { CLASSES } from 'common/classes';
+import { DataTableEditable } from 'components';
+import { usePaymentMadeEntriesTableColumns } from './components';
+
+import { usePaymentMadeInnerContext } from './PaymentMadeInnerProvider';
+import { compose, updateTableCell } from 'utils';
+import { useFormikContext } from 'formik';
+
+/**
+ * Payment made items table.
+ */
+export default function PaymentMadeEntriesTable({
+  onUpdateData,
+  entries,
+  currencyCode,
+}) {
+  // Payment made inner context.
+  const { isNewEntriesFetching } = usePaymentMadeInnerContext();
+
+  // Payment entries table columns.
+  const columns = usePaymentMadeEntriesTableColumns();
+
+  // Formik context.
+  const {
+    values: { vendor_id },
+  } = useFormikContext();
+
+  // Handle update data.
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
+        entries,
+      );
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
+
+  // Detarmines the right no results message before selecting vendor and aftering
+  // selecting vendor id.
+  const noResultsMessage = vendor_id ? (
+    <T
+      id={
+        'there_is_no_payable_bills_for_this_vendor_that_can_be_applied_for_this_payment'
+      }
+    />
+  ) : (
+    <T id={'please_select_a_vendor_to_display_all_open_bills_for_it'} />
+  );
+
+  return (
+    <CloudLoadingIndicator isLoading={isNewEntriesFetching}>
+      <DataTableEditable
+        progressBarLoading={isNewEntriesFetching}
+        className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
+        columns={columns}
+        data={entries}
+        spinnerProps={false}
+        payload={{
+          errors: [],
+          updateData: handleUpdateData,
+          currencyCode,
+        }}
+        noResults={noResultsMessage}
+        footer={true}
+      />
+    </CloudLoadingIndicator>
+  );
+}

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useHistory } from 'react-router-dom';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+
+import { CLASSES } from 'common/classes';
+import { Icon } from 'components';
+
+/**
+ * Payment made floating actions bar.
+ */
+export default function PaymentMadeFloatingActions() {
+  // History context.
+  const history = useHistory();
+
+  // Formik context.
+  const { isSubmitting, resetForm } = useFormikContext();
+
+  // Payment made form context.
+  const { setSubmitPayload, paymentMadeId } = usePaymentMadeFormContext();
+
+  // Handle submit button click.
+  const handleSubmitBtnClick = (event) => {
+    setSubmitPayload({ redirect: true });
+  };
+
+  // Handle clear button click.
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
+
+  // Handle submit & new button click.
+  const handleSubmitAndNewClick = (event) => {
+    setSubmitPayload({ redirect: false, resetForm: true });
+  };
+
+  // handle submit & continue editing button click.
+  const handleSubmitContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, publish: true });
+  };
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      {/* ----------- Save and New ----------- */}
+      <ButtonGroup>
+        <Button
+          loading={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={handleSubmitBtnClick}
+          text={paymentMadeId ? <T id={'edit'} /> : <T id={'save'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+              <MenuItem
+                text={<T id={'save_continue_editing'} />}
+                onClick={handleSubmitContinueEditingBtnClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>
+      </ButtonGroup>
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={paymentMadeId ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel  ----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFooter.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, TextArea } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { FastField } from 'formik';
+import { Postbox, Row, Col } from 'components';
+import { CLASSES } from 'common/classes';
+
+/**
+ * Payment made form footer.
+ */
+export default function PaymentMadeFooter() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <Postbox title={<T id={'payment_made_details'} />} defaultOpen={false}>
+        <Row>
+          <Col md={8}>
+            {/* --------- Statement --------- */}
+            <FastField name={'statement'}>
+              {({ form, field, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'statement'} />}
+                  className={'form-group--statement'}
+                >
+                  <TextArea growVertically={true} {...field} />
+                </FormGroup>
+              )}
+            </FastField>
+          </Col>
+        </Row>
+      </Postbox>
+    </div>
+  );
+}

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

@@ -0,0 +1,169 @@
+import React, { useMemo } from 'react';
+import { Formik, Form } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { sumBy, pick, defaultTo } 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 PaymentMadeFloatingActions from './PaymentMadeFloatingActions';
+import PaymentMadeFooter from './PaymentMadeFooter';
+import PaymentMadeFormBody from './PaymentMadeFormBody';
+import { PaymentMadeInnerProvider } from './PaymentMadeInnerProvider';
+
+import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import {
+  EditPaymentMadeFormSchema,
+  CreatePaymentMadeFormSchema,
+} from './PaymentMadeForm.schema';
+import { compose, orderingLinesIndexes } from 'utils';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import { defaultPaymentMade, transformToEditForm, ERRORS } from './utils';
+
+/**
+ * Payment made form component.
+ */
+function PaymentMadeForm({
+  // #withSettings
+  preferredPaymentAccount,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const history = useHistory();
+
+  // Payment made form context.
+  const {
+    isNewMode,
+    paymentMadeId,
+    paymentMadeEditPage,
+    paymentEntriesEditPage,
+    submitPayload,
+    createPaymentMadeMutate,
+    editPaymentMadeMutate,
+  } = usePaymentMadeFormContext();
+
+  // Form initial values.
+  const initialValues = useMemo(
+    () => ({
+      ...(!isNewMode
+        ? {
+            ...transformToEditForm(paymentMadeEditPage, paymentEntriesEditPage),
+          }
+        : {
+            ...defaultPaymentMade,
+            payment_account_id: defaultTo(preferredPaymentAccount),
+            currency_code: base_currency,
+            entries: orderingLinesIndexes(defaultPaymentMade.entries),
+          }),
+    }),
+    [isNewMode, paymentMadeEditPage, paymentEntriesEditPage],
+  );
+
+  // Handle the form submit.
+  const handleSubmitForm = (
+    values,
+    { setSubmitting, resetForm, setFieldError },
+  ) => {
+    setSubmitting(true);
+
+    // Filters entries that have no `bill_id` or `payment_amount`.
+    const entries = values.entries
+      .filter((item) => item.bill_id && item.payment_amount)
+      .map((entry) => ({
+        ...pick(entry, ['payment_amount', 'bill_id']),
+      }));
+    // Total payment amount of entries.
+    const totalPaymentAmount = sumBy(entries, 'payment_amount');
+
+    if (totalPaymentAmount <= 0) {
+      AppToaster.show({
+        message: intl.get('you_cannot_make_payment_with_zero_total_amount'),
+        intent: Intent.DANGER,
+      });
+      return;
+    }
+    const form = { ...values, entries };
+
+    // Triggers once the save request success.
+    const onSaved = (response) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'the_payment_made_has_been_edited_successfully'
+            : 'the_payment_made_has_been_created_successfully',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+
+      submitPayload.redirect && history.push('/payment-mades');
+      submitPayload.resetForm && resetForm();
+    };
+
+    const onError = ({
+      response: {
+        error: {
+          data: { errors },
+        },
+      },
+    }) => {
+      const getError = (errorType) => errors.find((e) => e.type === errorType);
+
+      if (getError(ERRORS.PAYMENT_NUMBER_NOT_UNIQUE)) {
+        setFieldError(
+          'payment_number',
+          intl.get('payment_number_is_not_unique'),
+        );
+      }
+      setSubmitting(false);
+    };
+
+    if (!isNewMode) {
+      editPaymentMadeMutate([paymentMadeId, form]).then(onSaved).catch(onError);
+    } else {
+      createPaymentMadeMutate(form).then(onSaved).catch(onError);
+    }
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_PAYMENT_MADE,
+      )}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={
+          isNewMode ? CreatePaymentMadeFormSchema : EditPaymentMadeFormSchema
+        }
+        onSubmit={handleSubmitForm}
+      >
+        <Form>
+          <PaymentMadeInnerProvider>
+            <PaymentMadeHeader />
+            <PaymentMadeFormBody />
+            <PaymentMadeFooter />
+            <PaymentMadeFloatingActions />
+          </PaymentMadeInnerProvider>
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default compose(
+  withSettings(({ billPaymentSettings }) => ({
+    paymentNextNumber: billPaymentSettings?.next_number,
+    paymentNumberPrefix: billPaymentSettings?.number_prefix,
+    preferredPaymentAccount: parseInt(billPaymentSettings?.withdrawalAccount),
+  })),
+  withCurrentOrganization(),
+)(PaymentMadeForm);

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.schema.js

@@ -0,0 +1,38 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  vendor_id: Yup.string()
+    .label(intl.get('vendor_name_'))
+    .required(),
+  payment_date: Yup.date()
+    .required()
+    .label(intl.get('payment_date_')),
+  payment_account_id: Yup.number()
+    .required()
+    .label(intl.get('payment_account_')),
+  payment_number: Yup.string()
+    .nullable()
+    .max(DATATYPES_LENGTH.STRING)
+    .nullable()
+    .label(intl.get('payment_no_')),
+  reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
+  description: Yup.string().max(DATATYPES_LENGTH.TEXT),
+  entries: Yup.array().of(
+    Yup.object().shape({
+      id: Yup.number().nullable(),
+      due_amount: Yup.number().nullable(),
+      payment_amount: Yup.number().nullable().max(Yup.ref('due_amount')),
+      bill_id: Yup.number()
+        .nullable()
+        .when(['payment_amount'], {
+          is: (payment_amount) => payment_amount,
+          then: Yup.number().required(),
+        }),
+    }),
+  ),
+});
+
+export const CreatePaymentMadeFormSchema = Schema;
+export const EditPaymentMadeFormSchema = Schema;

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormBody.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { FastField } from 'formik';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import PaymentMadeEntriesTable from './PaymentMadeEntriesTable';
+
+export default function PaymentMadeFormBody() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField name={'entries'}>
+        {({
+          form: { setFieldValue, values },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <PaymentMadeEntriesTable
+            entries={value}
+            onUpdateData={(newEntries) => {
+              setFieldValue('entries', newEntries);
+            }}
+            currencyCode={values.currency_code}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useFormikContext } from 'formik';
+import { sumBy } from 'lodash';
+import { CLASSES } from 'common/classes';
+import { compose } from 'utils';
+import { Money } from 'components';
+import { FormattedMessage as T } from 'components';
+
+import PaymentMadeFormHeaderFields from './PaymentMadeFormHeaderFields';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+/**
+ * Payment made header form.
+ */
+function PaymentMadeFormHeader({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  // Formik form context.
+  const {
+    values: { entries },
+  } = useFormikContext();
+
+  // Calculate the payment amount of the entries.
+  const amountPaid = useMemo(() => sumBy(entries, 'payment_amount'), [entries]);
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+        <PaymentMadeFormHeaderFields />
+
+        <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
+          <div class="big-amount">
+            <span class="big-amount__label">
+              <T id={'amount_received'} />
+            </span>
+            <h1 class="big-amount__number">
+              <Money amount={amountPaid} currency={base_currency} />
+            </h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withCurrentOrganization())(PaymentMadeFormHeader);

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js

@@ -0,0 +1,247 @@
+import React, { useMemo } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  Classes,
+  ControlGroup,
+  Button,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+import { toSafeInteger } from 'lodash';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import {
+  AccountsSelectList,
+  ContactSelecetList,
+  FieldRequiredHint,
+  InputPrependText,
+  Money,
+  Hint,
+  Icon,
+  MoneyInputGroup,
+} from 'components';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
+import {
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+  inputIntent,
+  compose,
+  safeSumBy,
+  fullAmountPaymentEntries,
+  amountPaymentEntries,
+} from 'utils';
+import { accountsFieldShouldUpdate, vendorsFieldShouldUpdate } from './utils';
+
+/**
+ * Payment made form header fields.
+ */
+function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
+  // Formik form context.
+  const {
+    values: { entries },
+    setFieldValue,
+  } = useFormikContext();
+
+  // Payment made form context.
+  const { vendors, accounts, isNewMode, setPaymentVendorId } =
+    usePaymentMadeFormContext();
+
+  // Sumation of payable full-amount.
+  const payableFullAmount = useMemo(
+    () => safeSumBy(entries, 'due_amount'),
+    [entries],
+  );
+
+  // Handle receive full-amount click.
+  const handleReceiveFullAmountClick = () => {
+    const newEntries = fullAmountPaymentEntries(entries);
+    const fullAmount = safeSumBy(newEntries, 'payment_amount');
+
+    setFieldValue('entries', newEntries);
+    setFieldValue('full_amount', fullAmount);
+  };
+
+  // Handles the full-amount field blur.
+  const onFullAmountBlur = (value) => {
+    const newEntries = amountPaymentEntries(toSafeInteger(value), entries);
+    setFieldValue('entries', newEntries);
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ------------ Vendor name ------------ */}
+      <FastField
+        name={'vendor_id'}
+        vendors={vendors}
+        shouldUpdate={vendorsFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'vendor_name'} />}
+            inline={true}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'vendor_id'} />}
+          >
+            <ContactSelecetList
+              contactsList={vendors}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_vender_account'} />}
+              onContactSelected={(contact) => {
+                form.setFieldValue('vendor_id', contact.id);
+                setPaymentVendorId(contact.id);
+              }}
+              disabled={!isNewMode}
+              popoverFill={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------------ Payment date ------------ */}
+      <FastField name={'payment_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'payment_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="payment_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('payment_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------------ Full amount ------------ */}
+      <Field name={'full_amount'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'full_amount'} />}
+            inline={true}
+            className={('form-group--full-amount', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            labelInfo={<Hint />}
+            helperText={<ErrorMessage name="full_amount" />}
+          >
+            <ControlGroup>
+              <InputPrependText text={base_currency} />
+              <MoneyInputGroup
+                value={value}
+                onChange={(value) => {
+                  setFieldValue('full_amount', value);
+                }}
+                onBlurValue={onFullAmountBlur}
+              />
+            </ControlGroup>
+
+            <Button
+              onClick={handleReceiveFullAmountClick}
+              className={'receive-full-amount'}
+              small={true}
+              minimal={true}
+            >
+              <T id={'receive_full_amount'} /> (
+              <Money amount={payableFullAmount} currency={base_currency} />)
+            </Button>
+          </FormGroup>
+        )}
+      </Field>
+
+      {/* ------------ Payment number ------------ */}
+      <FastField name={'payment_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'payment_no'} />}
+            inline={true}
+            className={('form-group--payment_number', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="payment_number" />}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              minimal={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------------ Payment account ------------ */}
+      <FastField
+        name={'payment_account_id'}
+        accounts={accounts}
+        shouldUpdate={accountsFieldShouldUpdate}
+      >
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'payment_account'} />}
+            className={classNames(
+              'form-group--payment_account_id',
+              'form-group--select-list',
+              Classes.FILL,
+            )}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'payment_account_id'} />}
+          >
+            <AccountsSelectList
+              accounts={accounts}
+              labelInfo={<FieldRequiredHint />}
+              onAccountSelected={(account) => {
+                form.setFieldValue('payment_account_id', account.id);
+              }}
+              defaultSelectText={<T id={'select_payment_account'} />}
+              selectedAccountId={value}
+              filterByTypes={[
+                ACCOUNT_TYPE.CASH,
+                ACCOUNT_TYPE.BANK,
+                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+              ]}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ------------ Reference ------------ */}
+      <FastField name={'reference'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              minimal={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(withCurrentOrganization())(PaymentMadeFormHeaderFields);

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormPage.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import PaymentMadeForm from './PaymentMadeForm';
+import { PaymentMadeFormProvider } from './PaymentMadeFormProvider';
+
+import 'style/pages/PaymentMade/PageForm.scss'
+
+/**
+ * Payment made - Page form.
+ */
+export default function PaymentMadeFormPage() {
+  const { id: paymentMadeId } = useParams();
+ 
+  return (
+    <PaymentMadeFormProvider paymentMadeId={paymentMadeId}>
+      <PaymentMadeForm /> 
+    </PaymentMadeFormProvider>
+  );
+}

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.js

@@ -0,0 +1,100 @@
+import React, { createContext, useContext } from 'react';
+import {
+  useAccounts,
+  useVendors,
+  useItems,
+  usePaymentMadeEditPage,
+  useSettings,
+  useCreatePaymentMade,
+  useEditPaymentMade,
+} from 'hooks/query';
+import { DashboardInsider } from 'components';
+
+// Payment made form context.
+const PaymentMadeFormContext = createContext();
+
+/**
+ * Payment made form provider.
+ */
+function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
+  const [submitPayload, setSubmitPayload] = React.useState({});
+  const [paymentVendorId, setPaymentVendorId] = React.useState(null);
+
+  // Handle fetch accounts data.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Handle fetch Items data table or list.
+  const {
+    data: { items },
+    isFetching: isItemsFetching,
+    isLoading: isItemsLoading,
+  } = useItems({ page_size: 10000 });
+
+  // Handle fetch venders data table or list.
+  const {
+    data: { vendors },
+    isLoading: isVendorsLoading,
+  } = useVendors({ page_size: 10000 });
+
+  // Handle fetch specific payment made details.
+  const {
+    data: { paymentMade: paymentMadeEditPage, entries: paymentEntriesEditPage },
+    isFetching: isPaymentFetching,
+    isLoading: isPaymentLoading,
+  } = usePaymentMadeEditPage(paymentMadeId, {
+    enabled: !!paymentMadeId,
+  });
+
+  // Fetch payment made settings.
+  useSettings();
+
+  // Create and edit payment made mutations.
+  const { mutateAsync: createPaymentMadeMutate } = useCreatePaymentMade();
+  const { mutateAsync: editPaymentMadeMutate } = useEditPaymentMade();
+
+  const isNewMode = !paymentMadeId;
+
+  // Provider payload.
+  const provider = {
+    paymentMadeId,
+    accounts,
+    paymentEntriesEditPage,
+    paymentMadeEditPage,
+    vendors,
+    items,
+    submitPayload,
+    paymentVendorId,
+
+    isNewMode,
+    isAccountsLoading,
+    isItemsFetching,
+    isItemsLoading,
+    isVendorsLoading,
+    isPaymentFetching,
+    isPaymentLoading,
+
+    createPaymentMadeMutate,
+    editPaymentMadeMutate,
+
+    setSubmitPayload,
+    setPaymentVendorId,
+  };
+
+  return (
+    <DashboardInsider
+      loading={
+        isVendorsLoading ||
+        isItemsFetching ||
+        isAccountsLoading ||
+        isPaymentLoading
+      }
+      name={'payment-made'}
+    >
+      <PaymentMadeFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentMadeFormContext = () => useContext(PaymentMadeFormContext);
+
+export { PaymentMadeFormProvider, usePaymentMadeFormContext };

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeInnerProvider.js

@@ -0,0 +1,48 @@
+import { useFormikContext } from 'formik';
+import React, { createContext, useContext, useEffect } from 'react';
+import { usePaymentMadeNewPageEntries } from 'hooks/query';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import { transformToNewPageEntries } from './utils';
+
+const PaymentMadeInnerContext = createContext();
+
+/**
+ * Payment made inner form provider.
+ */
+function PaymentMadeInnerProvider({ ...props }) {
+  // Payment made form context.
+  const { isNewMode } = usePaymentMadeFormContext();
+
+  // Formik context.
+  const {
+    values: { vendor_id: vendorId },
+    setFieldValue,
+  } = useFormikContext();
+
+  const {
+    data: newPageEntries,
+    isLoading: isNewEntriesLoading,
+    isFetching: isNewEntriesFetching,
+  } = usePaymentMadeNewPageEntries(vendorId, {
+    enabled: !!vendorId && isNewMode,
+  });
+
+  useEffect(() => {
+    if (!isNewEntriesFetching && newPageEntries && isNewMode) {
+      setFieldValue('entries', transformToNewPageEntries(newPageEntries));
+    }
+  }, [isNewEntriesFetching, newPageEntries, isNewMode, setFieldValue]);
+
+  // Provider payload.
+  const provider = {
+    newPageEntries,
+    isNewEntriesLoading,
+    isNewEntriesFetching,
+  };
+
+  return <PaymentMadeInnerContext.Provider value={provider} {...props} />;
+}
+
+const usePaymentMadeInnerContext = () => useContext(PaymentMadeInnerContext);
+
+export { PaymentMadeInnerProvider, usePaymentMadeInnerContext };

src/containers/Purchases/PaymentMades/PaymentForm/components.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { Money } from 'components';
+import { safeSumBy, formattedAmount } from 'utils';
+import { MoneyFieldCell } from 'components/DataTableCells';
+
+function BillNumberAccessor(row) {
+  return row?.bill_no ? row?.bill_no : '-';
+}
+
+function IndexTableCell({ row: { index } }) {
+  return <span>{index + 1}</span>;
+}
+
+function BillDateCell({ value }) {
+  return moment(value).format('YYYY MMM DD');
+}
+/**
+ * Balance footer cell.
+ */
+function AmountFooterCell({ payload: { currencyCode }, rows }) {
+  const total = safeSumBy(rows, 'original.amount');
+  return <span>{formattedAmount(total, currencyCode)}</span>;
+}
+
+/**
+ * Due amount footer cell.
+ */
+function DueAmountFooterCell({ payload: { currencyCode }, rows }) {
+  const totalDueAmount = safeSumBy(rows, 'original.due_amount');
+  return <span>{formattedAmount(totalDueAmount, currencyCode)}</span>;
+}
+
+/**
+ * Payment amount footer cell.
+ */
+function PaymentAmountFooterCell({ payload: { currencyCode }, rows }) {
+  const totalPaymentAmount = safeSumBy(rows, 'original.payment_amount');
+  return <span>{formattedAmount(totalPaymentAmount, currencyCode)}</span>;
+}
+
+/**
+ * Mobey table cell.
+ */
+function MoneyTableCell({ row: { original }, value }) {
+  return <Money amount={value} currency={original.currency_code} />;
+}
+
+/**
+ * Payment made entries table columns
+ */
+export function usePaymentMadeEntriesTableColumns() {
+  
+
+  return React.useMemo(
+    () => [
+      {
+        Header: '#',
+        accessor: 'index',
+        Cell: IndexTableCell,
+        width: 40,
+        disableResizing: true,
+        disableSortBy: true,
+        className: 'index',
+      },
+      {
+        Header: intl.get('Date'),
+        id: 'bill_date',
+        accessor: 'bill_date',
+        Cell: BillDateCell,
+        disableSortBy: true,
+        width: 250,
+        className: 'bill_date',
+      },
+      {
+        Header: intl.get('bill_number'),
+        accessor: BillNumberAccessor,
+        disableSortBy: true,
+        className: 'bill_number',
+      },
+      {
+        Header: intl.get('bill_amount'),
+        accessor: 'amount',
+        Cell: MoneyTableCell,
+        Footer: AmountFooterCell,
+        disableSortBy: true,
+        className: 'amount',
+      },
+      {
+        Header: intl.get('amount_due'),
+        accessor: 'due_amount',
+        Cell: MoneyTableCell,
+        Footer: DueAmountFooterCell,
+        disableSortBy: true,
+        className: 'due_amount',
+      },
+      {
+        Header: intl.get('payment_amount'),
+        accessor: 'payment_amount',
+        Cell: MoneyFieldCell,
+        Footer: PaymentAmountFooterCell,
+        disableSortBy: true,
+        className: 'payment_amount',
+      },
+    ],
+    [],
+  );
+}

src/containers/Purchases/PaymentMades/PaymentForm/utils.js

@@ -0,0 +1,77 @@
+import moment from 'moment';
+import {
+  defaultFastFieldShouldUpdate,
+  safeSumBy,
+  transformToForm,
+} from 'utils';
+
+export const ERRORS = {
+  PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
+};
+
+// Default payment made entry values.
+export const defaultPaymentMadeEntry = {
+  bill_id: '',
+  payment_amount: '',
+  currency_code: '',
+  id: null,
+  due_amount: null,
+  amount: '',
+};
+
+// Default initial values of payment made.
+export const defaultPaymentMade = {
+  full_amount: '',
+  vendor_id: '',
+  payment_account_id: '',
+  payment_date: moment(new Date()).format('YYYY-MM-DD'),
+  reference: '',
+  payment_number: '',
+  // statement: '',
+  currency_code: '',
+  entries: [],
+};
+
+export const transformToEditForm = (paymentMade, paymentMadeEntries) => {
+  return {
+    ...transformToForm(paymentMade, defaultPaymentMade),
+    full_amount: safeSumBy(paymentMadeEntries, 'payment_amount'),
+    entries: [
+      ...paymentMadeEntries.map((paymentMadeEntry) => ({
+        ...transformToForm(paymentMadeEntry, defaultPaymentMadeEntry),
+        payment_amount: paymentMadeEntry.payment_amount || '',
+      })),
+    ],
+  };
+};
+
+/**
+ * Transform the new page entries.
+ */
+export const transformToNewPageEntries = (entries) => {
+  return entries.map((entry) => ({
+    ...transformToForm(entry, defaultPaymentMadeEntry),
+    payment_amount: '',
+    currency_code: entry.currency_code,
+  }));
+};
+
+/**
+ * Detarmines vendors fast field when update. 
+ */
+export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.vendors !== oldProps.vendors ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Detarmines accounts fast field when update.
+ */
+export const accountsFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.accounts !== oldProps.accounts ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};

src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { MenuItem } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { isEmpty } from 'lodash';
+
+import { Icon, If } from 'components';
+
+import { RESOURCES_TYPES } from 'common/resourcesTypes';
+import withDrawerActions from '../../Drawer/withDrawerActions';
+
+import { highlightText } from 'utils';
+
+/**
+ * Universal search bill item select action.
+ */
+function PaymentMadeUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.PAYMENT_MADE) {
+    openDrawer('payment-made-detail-drawer', { paymentMadeId: resourceId });
+  }
+  return null;
+}
+
+export const PaymentMadeUniversalSearchSelect = withDrawerActions(
+  PaymentMadeUniversalSearchSelectComponent,
+);
+
+/**
+ * Payment made universal search item.
+ */
+export function PaymentMadeUniversalSearchItem(
+  { text, label, reference },
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{highlightText(text, query)}</div>
+
+          <span class="bp3-text-muted">
+            {reference.payment_number && (
+              <>
+                {highlightText(reference.payment_number, query)}
+                <Icon icon={'caret-right-16'} iconSize={16} />
+              </>
+            )}
+            {highlightText(reference.formatted_payment_date, query)}
+          </span>
+        </div>
+      }
+      label={<div class="amount">{label}</div>}
+      onClick={handleClick}
+      className={'universal-search__item--payment-made'}
+    />
+  );
+}
+
+/**
+ * Payment made resource item to search item.
+ */
+const paymentMadeToSearch = (payment) => ({
+  id: payment.id,
+  text: payment.vendor.display_name,
+  label: payment.formatted_amount,
+  reference: payment,
+});
+
+/**
+ * Binds universal search payment made configure.
+ */
+export const universalSearchPaymentMadeBind = () => ({
+  resourceType: RESOURCES_TYPES.PAYMENT_MADE,
+  optionItemLabel: intl.get('payment_mades'),
+  selectItemAction: PaymentMadeUniversalSearchSelect,
+  itemRenderer: PaymentMadeUniversalSearchItem,
+  itemSelect: paymentMadeToSearch,
+});

src/containers/Purchases/PaymentMades/PaymentMadesAlerts.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import PaymentMadeDeleteAlert from 'containers/Alerts/PaymentMades/PaymentMadeDeleteAlert';
+
+export default function PaymentMadesAlerts() {
+  return (
+    <div>
+      <PaymentMadeDeleteAlert name={'payment-made-delete'} />
+    </div>
+  );
+}

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import Icon from 'components/Icon';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+
+import { useHistory } from 'react-router-dom';
+import { FormattedMessage as T } from 'components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import {
+  If,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+} from 'components';
+
+import withPaymentMade from './withPaymentMade';
+import withPaymentMadeActions from './withPaymentMadeActions';
+
+import { usePaymentMadesListContext } from './PaymentMadesListProvider';
+import { useRefreshPaymentMades } from 'hooks/query/paymentMades';
+
+import { compose } from 'utils';
+
+/**
+ * Payment made actions bar.
+ */
+function PaymentMadeActionsBar({
+  // #withPaymentMadesActions
+  setPaymentMadesTableState,
+
+  // #withPaymentMades
+  paymentMadesFilterConditions
+}) {
+  const history = useHistory();
+
+  // Payment receives list context.
+  const { paymentMadesViews, fields } = usePaymentMadesListContext();
+
+  // Payment receive refresh action.
+  const { refresh } = useRefreshPaymentMades();
+
+  // Handle new payment made button click.
+  const handleClickNewPaymentMade = () => {
+    history.push('/payment-mades/new');
+  };
+
+  // Handle tab changing.
+  const handleTabChange = (viewSlug) => {
+    setPaymentMadesTableState({ viewSlug });
+  };
+
+  // Handle click a refresh payment receives.
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'bill_payments'}
+          views={paymentMadesViews}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_payment_made'} />}
+          onClick={handleClickNewPaymentMade}
+        />
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: paymentMadesFilterConditions,
+            defaultFieldKey: 'payment_number',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setPaymentMadesTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={paymentMadesFilterConditions.length}
+          />
+        </AdvancedFilterPopover>
+
+        <If condition={false}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            // onClick={handleBulkDelete}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withPaymentMadeActions,
+  withPaymentMade(({ paymentMadesTableState }) => ({
+    paymentMadesFilterConditions: paymentMadesTableState.filterRoles,
+  })),
+)(PaymentMadeActionsBar);

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import 'style/pages/PaymentMade/List.scss';
+
+import { DashboardPageContent } from 'components';
+import PaymentMadeActionsBar from './PaymentMadeActionsBar';
+import PaymentMadesAlerts from '../PaymentMadesAlerts';
+import PaymentMadesTable from './PaymentMadesTable';
+import { PaymentMadesListProvider } from './PaymentMadesListProvider';
+import PaymentMadeViewTabs from './PaymentMadeViewTabs';
+
+import withPaymentMades from './withPaymentMade';
+import withPaymentMadeActions from './withPaymentMadeActions';
+
+import { compose, transformTableStateToQuery } from 'utils';
+
+/**
+ * Payment mades list.
+ */
+function PaymentMadeList({
+  // #withPaymentMades
+  paymentMadesTableState,
+  paymentsTableStateChanged,
+
+  // #withPaymentMadeActions
+  resetPaymentMadesTableState,
+}) {
+  // Resets the invoices table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetPaymentMadesTableState();
+    },
+    [resetPaymentMadesTableState],
+  );
+
+  return (
+    <PaymentMadesListProvider
+      query={transformTableStateToQuery(paymentMadesTableState)}
+      tableStateChanged={paymentsTableStateChanged}
+    >
+      <PaymentMadeActionsBar />
+
+      <DashboardPageContent>
+        <PaymentMadeViewTabs />
+        <PaymentMadesTable />
+      </DashboardPageContent>
+
+      <PaymentMadesAlerts />
+    </PaymentMadesListProvider>
+  );
+}
+
+export default compose(
+  withPaymentMades(({ paymentMadesTableState, paymentsTableStateChanged }) => ({
+    paymentMadesTableState,
+    paymentsTableStateChanged,
+  })),
+  withPaymentMadeActions,
+)(PaymentMadeList);

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeViewTabs.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useHistory } from 'react-router';
+import { FormattedMessage as T } from 'components';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { DashboardViewsTabs } from 'components';
+
+import { usePaymentMadesListContext } from './PaymentMadesListProvider';
+import withPaymentMadeActions from './withPaymentMadeActions';
+
+import { compose } from 'utils';
+import { transformPaymentViewsToTabs } from './utils';
+
+import withPaymentMade from './withPaymentMade';
+
+/**
+ * Payment made views tabs.
+ */
+function PaymentMadeViewTabs({
+  // #withPaymentMadesActions
+  setPaymentMadesTableState,
+
+  // #withPaymentMade
+  paymentMadesTableState,
+}) {
+  const history = useHistory();
+
+  // Payment receives list context.
+  const { paymentMadesViews } = usePaymentMadesListContext();
+
+  // Handle the active tab changning.
+  const handleTabsChange = (viewSlug) => {
+    setPaymentMadesTableState({ viewSlug });
+  };
+  // Transformes payment views to tabs.
+  const tabs = React.useMemo(
+    () => transformPaymentViewsToTabs(paymentMadesViews),
+    [paymentMadesViews],
+  );
+
+  const handleClickNewView = () => {
+    history.push('/custom_views/payment-mades/new');
+  };
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          customViewId={paymentMadesTableState.customViewId}
+          defaultTabText={<T id={'all_payments'} />}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withPaymentMadeActions,
+  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
+)(PaymentMadeViewTabs);

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesEmptyStatus.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'components';
+
+export default function PaymentMadesEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
+      description={
+        <p>
+          <T id="payment_made_empty_status_description" />
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/payment-mades/new');
+            }}
+          >
+            <T id={'new_bill_payment'} />
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </>
+      }
+    />
+  );
+}

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js

@@ -0,0 +1,71 @@
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useResourceViews,
+  usePaymentMades,
+  useResourceMeta,
+} from 'hooks/query';
+import { getFieldsFromResourceMeta } from 'utils';
+
+const PaymentMadesListContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function PaymentMadesListProvider({ query, tableStateChanged, ...props }) {
+  // Fetch accounts resource views and fields.
+  const { data: paymentMadesViews, isLoading: isViewsLoading } =
+    useResourceViews('bill_payments');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('bill_payments');
+
+  // Fetch accounts list according to the given custom view id.
+  const {
+    data: { paymentMades, pagination, filterMeta },
+    isLoading: isPaymentsLoading,
+    isFetching: isPaymentsFetching,
+  } = usePaymentMades(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(paymentMades) && !isPaymentsLoading && !tableStateChanged;
+
+  // Provider payload.
+  const provider = {
+    paymentMades,
+    pagination,
+    filterMeta,
+    paymentMadesViews,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceMetaLoading,
+    isResourceMetaFetching,
+
+    isPaymentsLoading,
+    isPaymentsFetching,
+    isViewsLoading,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceMetaLoading}
+      name={'payment-mades-list'}
+    >
+      <PaymentMadesListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentMadesListContext = () =>
+  React.useContext(PaymentMadesListContext);
+
+export { PaymentMadesListProvider, usePaymentMadesListContext };

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js

@@ -0,0 +1,133 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { compose } from 'utils';
+
+import { TABLES } from 'common/tables';
+import { DataTable, DashboardContentTable } from 'components';
+
+import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withPaymentMadeActions from './withPaymentMadeActions';
+import withPaymentMade from './withPaymentMade';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { usePaymentMadesTableColumns, ActionsMenu } from './components';
+import { usePaymentMadesListContext } from './PaymentMadesListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
+
+/**
+ * Payment made datatable transactions.
+ */
+function PaymentMadesTable({
+  // #withPaymentMadeActions
+  setPaymentMadesTableState,
+
+  // #withPaymentMade
+  paymentMadesTableState,
+
+  // #withAlerts
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Payment mades table columns.
+  const columns = usePaymentMadesTableColumns();
+
+  // Payment mades list context.
+  const {
+    paymentMades,
+    pagination,
+    isEmptyStatus,
+    isPaymentsLoading,
+    isPaymentsFetching,
+  } = usePaymentMadesListContext();
+
+  // History context.
+  const history = useHistory();
+
+  // Handles the edit payment made action.
+  const handleEditPaymentMade = (paymentMade) => {
+    history.push(`/payment-mades/${paymentMade.id}/edit`);
+  };
+
+  // Handles the delete payment made action.
+  const handleDeletePaymentMade = (paymentMade) => {
+    openAlert('payment-made-delete', { paymentMadeId: paymentMade.id });
+  };
+
+  // Handle view detail  payment made.
+  const handleViewDetailPaymentMade = ({ id }) => {
+    openDrawer('payment-made-detail-drawer', { paymentMadeId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('payment-made-detail-drawer', {
+      paymentMadeId: cell.row.original.id,
+    });
+  };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.PAYMENT_MADES);
+
+  // Handle datatable fetch data once the table state change.
+  const handleDataTableFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      setPaymentMadesTableState({ pageIndex, pageSize, sortBy });
+    },
+    [setPaymentMadesTableState],
+  );
+
+  // Display empty status instead of the table.
+  if (isEmptyStatus) {
+    return <PaymentMadesEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={paymentMades}
+        onFetchData={handleDataTableFetchData}
+        loading={isPaymentsLoading}
+        headerLoading={isPaymentsLoading}
+        progressBarLoading={isPaymentsFetching}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        payload={{
+          onEdit: handleEditPaymentMade,
+          onDelete: handleDeletePaymentMade,
+          onViewDetails: handleViewDetailPaymentMade,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withPaymentMadeActions,
+  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
+  withAlertsActions,
+  withDrawerActions,
+  withCurrentOrganization(),
+)(PaymentMadesTable);

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesView.js

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+import PaymentMadeViewTabs from './PaymentMadeViewTabs';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+/**
+ * Payment mades view page.
+ */
+function PaymentMadesViewPage({
+  // #withAlertActions
+  openAlert,
+}) {
+  return (
+    <Switch>
+      <Route
+        exact={true}
+        path={['/payment-mades/:custom_view_id/custom_view', '/payment-mades']}
+      >
+        
+        {/* <PaymentMadeDataTable
+              onDeletePaymentMade={handleDeletePaymentMade}
+              onEditPaymentMade={handleEditPaymentMade}
+              onSelectedRowsChange={handleSelectedRowsChange}
+            /> */}
+      </Route>
+    </Switch>
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDialogActions,
+)(PaymentMadesViewPage);

src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMdesListProvider.js

@@ -0,0 +1,52 @@
+import React, { createContext } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useResourceViews, useResourceFields, usePaymentMades } from 'hooks/query';
+
+const PaymentMadesContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function PaymentMadesProvider({ query, ...props }) {
+  // Fetch accounts resource views and fields.
+  const { data: paymentsViews, isLoading: isViewsLoading } = useResourceViews(
+    'bill_payments',
+  );
+
+  // Fetch the accounts resource fields.
+  const {
+    data: paymentsFields,
+    isLoading: isFieldsLoading,
+  } = useResourceFields('bill_payments');
+
+  // Fetch accounts list according to the given custom view id.
+  const {
+    data: { paymentMades, pagination },
+    isLoading: isPaymentsLoading,
+  } = usePaymentMades(query);
+
+  // Provider payload.
+  const provider = {
+    paymentMades,
+    pagination,
+    paymentsFields,
+    paymentsViews,
+
+    isPaymentsLoading,
+    isFieldsLoading,
+    isViewsLoading,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isFieldsLoading || isPaymentsLoading}
+      name={'payment_made'}
+    >
+      <PaymentMadesContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const usePaymentMadesContext = () => React.useContext(PaymentMadesContext);
+
+export { PaymentMadesProvider, usePaymentMadesContext };

src/containers/Purchases/PaymentMades/PaymentsLanding/components.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import {
+  Intent,
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+import { Icon, Money, FormatDateCell } from 'components';
+import { safeCallback } from 'utils';
+
+export function AmountAccessor(row) {
+  return <Money amount={row.amount} currency={row.currency_code} />;
+}
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete, onViewDetails },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_payment_made')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('delete_payment_made')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Payment mades table actions cell.
+ */
+export function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Retrieve payment mades table columns.
+ */
+export function usePaymentMadesTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'payment_date',
+        Header: intl.get('payment_date'),
+        Cell: FormatDateCell,
+        accessor: 'payment_date',
+        width: 140,
+        className: 'payment_date',
+        clickable: true,
+      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor_name'),
+        accessor: 'vendor.display_name',
+        width: 140,
+        className: 'vendor_id',
+        clickable: true,
+      },
+      {
+        id: 'payment_number',
+        Header: intl.get('payment_number'),
+        accessor: (row) =>
+          row.payment_number ? `${row.payment_number}` : null,
+        width: 140,
+        className: 'payment_number',
+        clickable: true,
+      },
+      {
+        id: 'payment_account',
+        Header: intl.get('payment_account'),
+        accessor: 'payment_account.name',
+        width: 140,
+        className: 'payment_account_id',
+        clickable: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: AmountAccessor,
+        width: 140,
+        className: 'amount',
+        align: 'right',
+        clickable: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference'),
+        accessor: 'reference',
+        width: 140,
+        className: 'reference',
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Purchases/PaymentMades/PaymentsLanding/utils.js

@@ -0,0 +1,7 @@
+import { pick } from 'lodash';
+
+export const transformPaymentViewsToTabs = (paymentMadeViews) => {
+    return paymentMadeViews.map((view) => ({
+      ...pick(view, ['name', 'id']),
+    }));
+  };

src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMade.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import {
+  getPaymentMadesTableStateFactory,
+  paymentsTableStateChangedFactory,
+} from 'store/PaymentMades/paymentMades.selector';
+
+export default (mapState) => {
+  const getPaymentMadesTableState = getPaymentMadesTableStateFactory();
+  const paymentsTableStateChanged = paymentsTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      paymentMadesTableState: getPaymentMadesTableState(state, props),
+      paymentsTableStateChanged: paymentsTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeActions.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import {
+  setPaymentMadesTableState,
+  resetPaymentMadesTableState,
+} from 'store/PaymentMades/paymentMades.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setPaymentMadesTableState: (state) =>
+    dispatch(setPaymentMadesTableState(state)),
+
+  resetPaymentMadesTableState: () => dispatch(resetPaymentMadesTableState()),
+});
+export default connect(null, mapDispatchToProps);

src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeDetail.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { getPaymentMadeByIdFactory } from 'store/PaymentMades/paymentMade.selector';
+
+export default () => {
+  const getPaymentMadeById = getPaymentMadeByIdFactory();
+
+  const mapStateToProps = (state, props) => ({
+    paymentMade: getPaymentMadeById(state, props),
+  });
+  return connect(mapStateToProps);
+};