feature : Puschases & Sales / fix : tasks

2026-02-17 21:30:31 +00:00 · 2020-09-04 00:41:22 +02:00
parent 73de0b934b e23b8d9947
commit 9c21e233ea
92 changed files with 4642 additions and 1610 deletions
--- a/client/src/containers/Sales/Estimate/EntriesItemsTable.js
+++ b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
@@ -1,10 +1,11 @@
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { omit } from 'lodash';
 import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+
+import CLASSES from 'components/classes';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
-
-import { compose, formattedAmount } from 'utils';
 import {
  InputGroupCell,
  MoneyFieldCell,
@@ -14,7 +15,7 @@ import {
 } from 'components/DataTableCells';

 import withItems from 'containers/Items/withItems';
-import { omit } from 'lodash';
+import { compose, formattedAmount } from 'utils';

 const ActionsCellRenderer = ({
  row: { index },
@@ -92,6 +93,7 @@ function EstimateTable({
        width: 40,
        disableResizing: true,
        disableSortBy: true,
+        className: 'index',
      },
      {
        Header: formatMessage({ id: 'product_and_service' }),
@@ -108,6 +110,7 @@ function EstimateTable({
        Cell: InputGroupCell,
        disableSortBy: true,
        className: 'description',
+        width: 120,
      },

      {
@@ -123,7 +126,7 @@ function EstimateTable({
        accessor: 'rate',
        Cell: TotalEstimateCellRederer(MoneyFieldCell, 'rate'),
        disableSortBy: true,
-        width: 150,
+        width: 100,
        className: 'rate',
      },
      {
@@ -230,8 +233,9 @@ function EstimateTable({
          updateData: handleUpdateData,
          removeRow: handleRemoveRow,
        }}
+        className={CLASSES.DATATABLE_EDITOR}
      />
-      <div className={'mt1'}>
+      <div className={'datatable-editor-actions mt1'}>
        <Button
          small={true}
          className={'button--secondary button--new-line'}
--- a/client/src/containers/Sales/Estimate/EstimateActionsBar.js
+++ b/client/src/containers/Sales/Estimate/EstimateActionsBar.js
@@ -153,7 +153,6 @@ function EstimateActionsBar({
 const mapStateToProps = (state, props) => ({
  resourceName: 'sales_estimates',
 });
-
 const withEstimateActionsBar = connect(mapStateToProps);

 export default compose(
--- a/client/src/containers/Sales/Estimate/EstimateForm.js
+++ b/client/src/containers/Sales/Estimate/EstimateForm.js
@@ -5,14 +5,13 @@ import React, {
  useRef,
  useState,
 } from 'react';
-
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import moment from 'moment';
-import { Intent, FormGroup, TextArea, Button } from '@blueprintjs/core';
+import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick, omit } from 'lodash';
-import { queryCache } from 'react-query';
+import { pick } from 'lodash';
+import { Row, Col } from 'react-grid-system';

 import EstimateFormHeader from './EstimateFormHeader';
 import EstimatesItemsTable from './EntriesItemsTable';
@@ -103,13 +102,11 @@ const EstimateForm = ({
      .min(1)
      .max(1024)
      .label(formatMessage({ id: 'note' })),
-
    terms_conditions: Yup.string()
      .trim()
      .min(1)
      .max(1024)
      .label(formatMessage({ id: 'note' })),
-
    entries: Yup.array().of(
      Yup.object().shape({
        quantity: Yup.number().nullable(),
@@ -176,7 +173,7 @@ const EstimateForm = ({
      index: index + 1,
    }));
  };
-  // debugger;
+
  const initialValues = useMemo(
    () => ({
      ...(estimate
@@ -200,14 +197,6 @@ const EstimateForm = ({
    [estimate, defaultInitialValues, defaultEstimate],
  );

-  // const initialValues = useMemo(
-  //   () => ({
-  //     ...defaultInitialValues,
-  //     entries: orderingProductsIndex(defaultInitialValues.entries),
-  //   }),
-  //   [defaultEstimate, defaultInitialValues, estimate],
-  // );
-
  const initialAttachmentFiles = useMemo(() => {
    return estimate && estimate.media
      ? estimate.media.map((attach) => ({
@@ -251,12 +240,8 @@ const EstimateForm = ({
          .then((response) => {
            AppToaster.show({
              message: formatMessage(
-                {
-                  id: 'the_estimate_has_been_successfully_created',
-                },
-                {
-                  number: values.estimate_number,
-                },
+                { id: 'the_estimate_has_been_successfully_created' },
+                { number: values.estimate_number },
              ),
              intent: Intent.SUCCESS,
            });
@@ -270,7 +255,7 @@ const EstimateForm = ({
      }
    },
  });
-
+  console.log(formik.errors ,'ERROR');
  const handleSubmitClick = useCallback(
    (payload) => {
      setPayload(payload);
@@ -313,9 +298,6 @@ const EstimateForm = ({
    );
  };

-
-
-
  return (
    <div>
      <form onSubmit={formik.handleSubmit}>
@@ -325,36 +307,45 @@ const EstimateForm = ({
          onClickAddNewRow={handleClickAddNewRow}
          onClickClearAllLines={handleClearAllLines}
          formik={formik}
-          // defaultRow={defaultEstimate}
-        />
-        <FormGroup
-          label={<T id={'customer_note'} />}
-          className={'form-group--customer_note'}
-        >
-          <TextArea growVertically={true} {...formik.getFieldProps('note')} />
-        </FormGroup>
-        <FormGroup
-          label={<T id={'terms_conditions'} />}
-          className={'form-group--terms_conditions'}
-        >
-          <TextArea
-            growVertically={true}
-            {...formik.getFieldProps('terms_conditions')}
-          />
-        </FormGroup>
-        <Dragzone
-          initialFiles={initialAttachmentFiles}
-          onDrop={handleDropFiles}
-          onDeleteFile={handleDeleteFile}
-          hint={'Attachments: Maxiumum size: 20MB'}
        />
+
+        <Row>
+          <Col>
+            <FormGroup
+              label={<T id={'customer_note'} />}
+              className={'form-group--customer_note'}
+            >
+              <TextArea
+                growVertically={true}
+                {...formik.getFieldProps('note')}
+              />
+            </FormGroup>
+            <FormGroup
+              label={<T id={'terms_conditions'} />}
+              className={'form-group--terms_conditions'}
+            >
+              <TextArea
+                growVertically={true}
+                {...formik.getFieldProps('terms_conditions')}
+              />
+            </FormGroup>
+          </Col>
+
+          <Col>
+            <Dragzone
+              initialFiles={initialAttachmentFiles}
+              onDrop={handleDropFiles}
+              onDeleteFile={handleDeleteFile}
+              hint={'Attachments: Maxiumum size: 20MB'}
+            />
+          </Col>
+        </Row>
      </form>
      <EstimateFormFooter
        formik={formik}
        onSubmitClick={handleSubmitClick}
        estimate={estimate}
        onCancelClick={handleCancelClick}
-    
      />
    </div>
  );
--- a/client/src/containers/Sales/Estimate/EstimateFormFooter.js
+++ b/client/src/containers/Sales/Estimate/EstimateFormFooter.js
@@ -11,7 +11,7 @@ export default function EstimateFormFooter({
  estimate,
 }) {
  return (
-    <div className={'estimate-form__floating-footer'}>
+    <div className={'form__floating-footer'}>
      <Button
        disabled={isSubmitting}
        intent={Intent.PRIMARY}
--- a/client/src/containers/Sales/Estimate/EstimateFormHeader.js
+++ b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
@@ -68,13 +68,16 @@ function EstimateFormHeader({
  );

  return (
-    <div className={'estimate-form'}>
-      <div className={'estimate-form__primary-section'}>
-        {/* customer name */}
+    <div className={'page-form page-form--estimate'}>
+      <div className={'page-form__primary-section'}>
        <FormGroup
          label={<T id={'customer_name'} />}
          inline={true}
-          className={classNames('form-group--select-list', Classes.FILL)}
+          className={classNames(
+            'form-group--select-list',
+            'form-group--customer',
+            Classes.FILL,
+          )}
          labelInfo={<FieldRequiredHint />}
          intent={errors.customer_id && touched.customer_id && Intent.DANGER}
          helperText={
@@ -94,17 +97,18 @@ function EstimateFormHeader({
            labelProp={'display_name'}
          />
        </FormGroup>
-        {/* estimate_date */}
-        <Row>
-          <Col

-          // md={9} push={{ md: 3 }}
-          >
+        <Row>
+          <Col>
            <FormGroup
              label={<T id={'estimate_date'} />}
              inline={true}
              labelInfo={<FieldRequiredHint />}
-              className={classNames('form-group--select-list', Classes.FILL)}
+              className={classNames(
+                'form-group--select-list',
+                Classes.FILL,
+                'form-group--estimate-date',
+              )}
              intent={
                errors.estimate_date && touched.estimate_date && Intent.DANGER
              }
@@ -120,14 +124,15 @@ function EstimateFormHeader({
              />
            </FormGroup>
          </Col>
-          <Col
-
-          // md={3} pull={{ md: 9 }}
-          >
+          <Col>
            <FormGroup
              label={<T id={'expiration_date'} />}
              inline={true}
-              className={classNames('form-group--select-list', Classes.FILL)}
+              className={classNames(
+                'form-group--select-list',
+                'form-group--expiration-date',
+                Classes.FILL,
+              )}
              intent={
                errors.expiration_date &&
                touched.expiration_date &&
@@ -147,11 +152,12 @@ function EstimateFormHeader({
          </Col>
        </Row>
      </div>
-      {/* Estimate */}
+
+      {/*- Estimate -*/}
      <FormGroup
        label={<T id={'estimate'} />}
        inline={true}
-        className={('form-group--estimate', Classes.FILL)}
+        className={('form-group--estimate-number', Classes.FILL)}
        labelInfo={<FieldRequiredHint />}
        intent={
          errors.estimate_number && touched.estimate_number && Intent.DANGER
@@ -168,6 +174,7 @@ function EstimateFormHeader({
          {...getFieldProps('estimate_number')}
        />
      </FormGroup>
+
      <FormGroup
        label={<T id={'reference'} />}
        inline={true}
--- a/client/src/containers/Sales/Estimate/Estimates.js
+++ b/client/src/containers/Sales/Estimate/Estimates.js
@@ -33,6 +33,7 @@ function Estimates({
    requestFetchCustomers({}),
  );

+  // 
  const handleFormSubmit = useCallback(
    (payload) => {
      payload.redirect && history.push('/estimates');
--- a/client/src/containers/Sales/Estimate/withEstimates.js
+++ b/client/src/containers/Sales/Estimate/withEstimates.js
@@ -2,22 +2,25 @@ import { connect } from 'react-redux';
 import { getResourceViews } from 'store/customViews/customViews.selectors';
 import {
  getEstimateCurrentPageFactory,
-  getEstimatesTableQuery,
+  getEstimatesTableQueryFactory,
  getEstimatesPaginationMetaFactory,
 } from 'store/Estimate/estimates.selectors';

 export default (mapState) => {
  const getEstimatesItems = getEstimateCurrentPageFactory();
  const getEstimatesPaginationMeta = getEstimatesPaginationMetaFactory();
+  const getEstimatesTableQuery = getEstimatesTableQueryFactory();
+
  const mapStateToProps = (state, props) => {
    const query = getEstimatesTableQuery(state, props);
+  
    const mapped = {
      estimatesCurrentPage: getEstimatesItems(state, props, query),
      estimateViews: getResourceViews(state, props, 'sales_estimates'),
-      estimateItems: state.sales_estimates.items,
+      estimateItems: state.salesEstimates.items,
      estimateTableQuery: query,
      estimatesPageination: getEstimatesPaginationMeta(state, props, query),
-      estimatesLoading: state.sales_estimates.loading,
+      estimatesLoading: state.salesEstimates.loading,
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/client/src/containers/Sales/Invoice/InvoiceForm.js
+++ b/client/src/containers/Sales/Invoice/InvoiceForm.js
@@ -11,6 +11,7 @@ import moment from 'moment';
 import { Intent, FormGroup, TextArea, Button } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
+import { Row, Col } from 'react-grid-system';

 import InvoiceFormHeader from './InvoiceFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
@@ -162,7 +163,7 @@ function InvoiceForm({
      index: index + 1,
    }));
  };
-  // debugger;
+
  const initialValues = useMemo(
    () => ({
      ...(invoice
@@ -186,14 +187,6 @@ function InvoiceForm({
    [invoice, defaultInitialValues, defaultInvoice],
  );

-  // const initialValues = useMemo(
-  //   () => ({
-  //     ...defaultInitialValues,
-  //     entries: orderingIndex(defaultInitialValues.entries),
-  //   }),
-  //   [defaultInvoice, defaultInitialValues, invoice],
-  // );
-
  const initialAttachmentFiles = useMemo(() => {
    return invoice && invoice.media
      ? invoice.media.map((attach) => ({
@@ -308,31 +301,39 @@ function InvoiceForm({
          onClickClearAllLines={handleClearAllLines}
          formik={formik}
        />
-        <FormGroup
-          label={<T id={'invoice_message'} />}
-          className={'form-group--customer_note'}
-        >
-          <TextArea
-            growVertically={true}
-            {...formik.getFieldProps('invoice_message')}
-          />
-        </FormGroup>
-        <FormGroup
-          label={<T id={'terms_conditions'} />}
-          className={'form-group--terms_conditions'}
-        >
-          <TextArea
-            growVertically={true}
-            {...formik.getFieldProps('terms_conditions')}
-          />
-        </FormGroup>
-        <Dragzone
-          initialFiles={initialAttachmentFiles}
-          onDrop={handleDropFiles}
-          onDeleteFile={handleDeleteFile}
-          hint={'Attachments: Maxiumum size: 20MB'}
-        />
+        <Row>
+          <Col>
+            <FormGroup
+              label={<T id={'invoice_message'} />}
+              className={'form-group--customer_note'}
+            >
+              <TextArea
+                growVertically={true}
+                {...formik.getFieldProps('invoice_message')}
+              />
+            </FormGroup>
+            <FormGroup
+              label={<T id={'terms_conditions'} />}
+              className={'form-group--terms_conditions'}
+            >
+              <TextArea
+                growVertically={true}
+                {...formik.getFieldProps('terms_conditions')}
+              />
+            </FormGroup>
+          </Col>
+
+          <Col>
+            <Dragzone
+              initialFiles={initialAttachmentFiles}
+              onDrop={handleDropFiles}
+              onDeleteFile={handleDeleteFile}
+              hint={'Attachments: Maxiumum size: 20MB'}
+            />
+          </Col>
+        </Row>
      </form>
+
      <InvoiceFormFooter
        formik={formik}
        onSubmitClick={handleSubmitClick}
--- a/client/src/containers/Sales/Invoice/InvoiceFormFooter.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFormFooter.js
@@ -9,7 +9,7 @@ export default function EstimateFormFooter({
  invoice,
 }) {
  return (
-    <div className={'estimate-form__floating-footer'}>
+    <div className={'form__floating-footer'}>
      <Button
        disabled={isSubmitting}
        intent={Intent.PRIMARY}
--- a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
@@ -68,8 +68,8 @@ function InvoiceFormHeader({
  );

  return (
-    <div className={'invoice-form'}>
-      <div className={'invoice__primary-section'}>
+    <div class="page-form page-form--invoice">
+      <div className={'page-form__primary-section'}>
        {/* customer name */}
        <FormGroup
          label={<T id={'customer_name'} />}
--- a/client/src/containers/Sales/Invoice/Invoices.js
+++ b/client/src/containers/Sales/Invoice/Invoices.js
@@ -19,6 +19,12 @@ function Invoices({
  const history = useHistory();
  const { id } = useParams();

+  const fetchInvoice = useQuery(
+    ['invoice', id],
+    (key, _id) => requsetFetchInvoice(_id),
+    { enabled: !!id },
+  );
+
  // Handle fetch Items data table or list
  const fetchItems = useQuery('items-table', () => requestFetchItems({}));

@@ -33,12 +39,6 @@ function Invoices({
    requestFetchCustomers({}),
  );

-  const fetchInvoice = useQuery(
-    ['invoice', id],
-    (key, _id) => requsetFetchInvoice(_id),
-    { enabled: !!id },
-  );
-
  const handleCancel = useCallback(() => {
    history.goBack();
  }, [history]);
--- a/client/src/containers/Sales/Invoice/withInvoiceActions.js
+++ b/client/src/containers/Sales/Invoice/withInvoiceActions.js
@@ -5,17 +5,18 @@ import {
  deleteInvoice,
  fetchInvoice,
  fetchInvoicesTable,
+  dueInvoices,
 } from 'store/Invoice/invoices.actions';
 import t from 'store/types';

 const mapDipatchToProps = (dispatch) => ({
  requestSubmitInvoice: (form) => dispatch(submitInvoice({ form })),
  requsetFetchInvoice: (id) => dispatch(fetchInvoice({ id })),
-  requestEditInvoice: (id, form) => dispatch(editInvoice( id, form )),
+  requestEditInvoice: (id, form) => dispatch(editInvoice(id, form)),
  requestFetchInvoiceTable: (query = {}) =>
    dispatch(fetchInvoicesTable({ query: { ...query } })),
  requestDeleteInvoice: (id) => dispatch(deleteInvoice({ id })),
-
+  requestFetchDueInvoices: (id) => dispatch(dueInvoices({ id })),
  changeInvoiceView: (id) =>
    dispatch({
      type: t.INVOICES_SET_CURRENT_VIEW,
--- a/client/src/containers/Sales/Invoice/withInvoices.js
+++ b/client/src/containers/Sales/Invoice/withInvoices.js
@@ -3,21 +3,28 @@ import { getResourceViews } from 'store/customViews/customViews.selectors';
 import {
  getInvoiceCurrentPageFactory,
  getInvoicePaginationMetaFactory,
+  getInvoiceTableQueryFactory,
  getInvoiceTableQuery,
+  getdueInvoices,
 } from 'store/Invoice/invoices.selector';

 export default (mapState) => {
  const getInvoicesItems = getInvoiceCurrentPageFactory();
+
  const getInvoicesPaginationMeta = getInvoicePaginationMetaFactory();
+  const getInvoiceTableQuery = getInvoiceTableQueryFactory();
+
  const mapStateToProps = (state, props) => {
    const query = getInvoiceTableQuery(state, props);
+
    const mapped = {
      invoicesCurrentPage: getInvoicesItems(state, props, query),
      invoicesViews: getResourceViews(state, props, 'sales_invoices'),
-      invoicesItems: state.sales_invoices.items,
+      invoicesItems: state.salesInvoices.items,
      invoicesTableQuery: query,
      invoicesPageination: getInvoicesPaginationMeta(state, props, query),
-      invoicesLoading: state.sales_invoices.loading,
+      invoicesLoading: state.salesInvoices.loading,
+      dueInvoices: getdueInvoices(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveActionsBar.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveActionsBar.js
@@ -0,0 +1,146 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import Icon from 'components/Icon';
+import {
+  Button,
+  Classes,
+  Menu,
+  MenuItem,
+  Popover,
+  NavbarDivider,
+  NavbarGroup,
+  PopoverInteractionKind,
+  Position,
+  Intent,
+} from '@blueprintjs/core';
+
+import classNames from 'classnames';
+import { useRouteMatch, useHistory } from 'react-router-dom';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+import { connect } from 'react-redux';
+import FilterDropdown from 'components/FilterDropdown';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import { If, DashboardActionViewsList } from 'components';
+import withResourceDetail from 'containers/Resources/withResourceDetails';
+
+import withPaymentReceivesActions from './withPaymentReceivesActions';
+import withPaymentReceives from './withPaymentReceives';
+
+import { compose } from 'utils';
+
+function PaymentReceiveActionsBar({
+  // #withResourceDetail
+  resourceFields,
+
+  //#withPaymentReceives
+  paymentReceivesViews,
+
+  //#withPaymentReceivesActions
+  addPaymentReceivesTableQueries,
+
+  // #own Porps
+  onFilterChanged,
+  selectedRows = [],
+}) {
+  const history = useHistory();
+  const { path } = useRouteMatch();
+  const [filterCount, setFilterCount] = useState(0);
+  const { formatMessage } = useIntl();
+
+  const handleClickNewPaymentReceive = useCallback(() => {
+    history.push('/payment-receive/new');
+  }, [history]);
+
+  // const filterDropdown = FilterDropdown({
+  //   initialCondition: {
+  //     fieldKey: '',
+  //     compatator: 'contains',
+  //     value: '',
+  //   },
+  //   fields: resourceFields,
+  //   onFilterChange: (filterConditions) => {
+  //     addPaymentReceivesTableQueries({
+  //       filter_roles: filterConditions || '',
+  //     });
+  //     onFilterChanged && onFilterChanged(filterConditions);
+  //   },
+  // });
+
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'payment_receives'}
+          views={paymentReceivesViews}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_payment_receive'} />}
+          onClick={handleClickNewPaymentReceive}
+        />
+        <Popover
+          minimal={true}
+          // content={filterDropdown}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL)}
+            text={
+              filterCount <= 0 ? (
+                <T id={'filter'} />
+              ) : (
+                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+              )
+            }
+            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          />
+        </Popover>
+        <If condition={hasSelectedRows}>
+          <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>
+    </DashboardActionsBar>
+  );
+}
+
+const mapStateToProps = (state, props) => ({
+  resourceName: 'payment_receives',
+});
+const withPaymentReceiveActionsBar = connect(mapStateToProps);
+
+export default compose(
+  withPaymentReceiveActionsBar,
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })),
+  withPaymentReceives(({ paymentReceivesViews }) => ({ paymentReceivesViews })),
+)(PaymentReceiveActionsBar);
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
@@ -1,51 +1,65 @@
-import React, { useMemo, useCallback, useEffect, useState,useRef } from 'react';
+import React, {
+  useMemo,
+  useCallback,
+  useEffect,
+  useState,
+  useRef,
+} 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 { FormattedMessage as T, useIntl } from 'react-intl';
+import { pick, values } from 'lodash';

 import PaymentReceiveHeader from './PaymentReceiveFormHeader';
-// PaymentReceiptItemsTable
+import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
 import PaymentReceiveFooter from './PaymentReceiveFormFooter';

 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
-import withPaymentReceivesActions from './withPaymentReceivesActions'
-
+import withPaymentReceivesActions from './withPaymentReceivesActions';
+import withInvoices from '../Invoice/withInvoices';
+import withPaymentReceiveDetail from './withPaymentReceiveDetail';
+import withPaymentReceives from './withPaymentReceives';
 import { AppToaster } from 'components';
 import Dragzone from 'components/Dragzone';
 import useMedia from 'hooks/useMedia';

 import { compose, repeatValue } from 'utils';

-const MIN_LINES_NUMBER = 4;
+const MIN_LINES_NUMBER = 5;

 function PaymentReceiveForm({
  //#withMedia
  requestSubmitMedia,
  requestDeleteMedia,
-  
+
  //#WithPaymentReceiveActions
  requestSubmitPaymentReceive,
-
+  requestEditPaymentReceive,

  //#withDashboard
  changePageTitle,
  changePageSubtitle,

  //#withPaymentReceiveDetail
+  paymentReceive,
+  paymentReceiveInvoices,
+  paymentReceivesItems,

  //#OWn Props
-  payment_receive,
+  // payment_receive,
  onFormSubmit,
  onCancelForm,
+  dueInvoiceLength,
+  onCustomerChange,
 }) {
  const { formatMessage } = useIntl();
  const [payload, setPayload] = useState({});
-
+  const { id } = useParams();
  const {
    setFiles,
    saveMedia,
@@ -63,43 +77,48 @@ function PaymentReceiveForm({
  };

  useEffect(() => {
-    if (payment_receive && payment_receive.id) {
+    onCustomerChange && onCustomerChange(formik.values.customer_id);
+  });
+
+  useEffect(() => {
+    if (paymentReceive && paymentReceive.id) {
      changePageTitle(formatMessage({ id: 'edit_payment_receive' }));
    } else {
-      changePageTitle(formatMessage({ id: 'new_payment_receive' }));
+      changePageTitle(formatMessage({ id: 'payment_receive' }));
    }
-  }, [changePageTitle, payment_receive, formatMessage]);
+  }, [changePageTitle, paymentReceive, formatMessage]);

  const validationSchema = Yup.object().shape({
    customer_id: Yup.string()
      .label(formatMessage({ id: 'customer_name_' }))
      .required(),
-    deposit_account_id: Yup.number()
-      .required()
-      .label(formatMessage({ id: 'deposit_account_' })),
    payment_date: Yup.date()
      .required()
      .label(formatMessage({ id: 'payment_date_' })),
+    deposit_account_id: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'deposit_account_' })),
+    // receive_amount: Yup.number()
+    //   .required()
+    //   .label(formatMessage({ id: 'receive_amount_' })),
    payment_receive_no: Yup.number()
      .required()
      .label(formatMessage({ id: 'payment_receive_no_' })),
-    reference_no: Yup.string().min(1).max(255),
-    statement: Yup.string()
-      .trim()
-      .min(1)
-      .max(1024)
-      .label(formatMessage({ id: 'statement' })),
-
+    reference_no: Yup.string().min(1).max(255).nullable(),
+    description: Yup.string().nullable(),
    entries: Yup.array().of(
      Yup.object().shape({
        payment_amount: Yup.number().nullable(),
-        item_id: Yup.number()
+        invoice_no: Yup.number().nullable(),
+        balance: Yup.number().nullable(),
+        due_amount: Yup.number().nullable(),
+        invoice_date: Yup.date(),
+        invoice_id: Yup.number()
          .nullable()
          .when(['payment_amount'], {
            is: (payment_amount) => payment_amount,
            then: Yup.number().required(),
          }),
-        description: Yup.string().nullable(),
      }),
    ),
  });
@@ -114,9 +133,12 @@ function PaymentReceiveForm({

  const defaultPaymentReceive = useMemo(
    () => ({
-      item_id: null,
-      payment_amount: null,
-      description: null,
+      invoice_id: '',
+      invoice_date: moment(new Date()).format('YYYY-MM-DD'),
+      invoice_no: '',
+      balance: '',
+      due_amount: '',
+      payment_amount: '',
    }),
    [],
  );
@@ -126,29 +148,53 @@ function PaymentReceiveForm({
      deposit_account_id: '',
      payment_date: moment(new Date()).format('YYYY-MM-DD'),
      reference_no: '',
-      statement: '',
+      payment_receive_no: '',
+      // receive_amount: '',
+      description: '',
      entries: [...repeatValue(defaultPaymentReceive, MIN_LINES_NUMBER)],
    }),
    [defaultPaymentReceive],
  );

+  const orderingIndex = (_entries) => {
+    return _entries.map((item, index) => ({
+      ...item,
+      index: index + 1,
+    }));
+  };
+
  const initialValues = useMemo(
    () => ({
-      ...defaultInitialValues,
-      entries: defaultInitialValues.entries,
+      ...(paymentReceive
+        ? {
+            ...pick(paymentReceive, Object.keys(defaultInitialValues)),
+            entries: [
+              ...paymentReceive.entries.map((paymentReceive) => ({
+                ...pick(paymentReceive, Object.keys(defaultPaymentReceive)),
+              })),
+              ...repeatValue(
+                defaultPaymentReceive,
+                Math.max(MIN_LINES_NUMBER - paymentReceive.entries.length, 0),
+              ),
+            ],
+          }
+        : {
+            ...defaultInitialValues,
+            entries: orderingIndex(defaultInitialValues.entries),
+          }),
    }),
-    [defaultPaymentReceive, defaultInitialValues, payment_receive],
+    [paymentReceive, defaultInitialValues, defaultPaymentReceive],
  );

  const initialAttachmentFiles = useMemo(() => {
-    return payment_receive && payment_receive.media
-      ? payment_receive.media.map((attach) => ({
+    return paymentReceive && paymentReceive.media
+      ? paymentReceive.media.map((attach) => ({
          preview: attach.attachment_file,
          uploaded: true,
          metadata: { ...attach },
        }))
      : [];
-  }, [payment_receive]);
+  }, [paymentReceive]);

  const formik = useFormik({
    enableReinitialize: true,
@@ -157,38 +203,52 @@ function PaymentReceiveForm({
      ...initialValues,
    },
    onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
+      setSubmitting(true);
+      const entries = formik.values.entries.filter((item) => {
+        if (item.invoice_id !== undefined) {
+          return { ...item };
+        }
+      });
      const form = {
        ...values,
+        entries,
      };
-      const savePaymentReceive = (mediaIds) =>
-        new Promise((resolve, reject) => {
-          const requestForm = { ...form, media_ids: mediaIds };

-          requestSubmitPaymentReceive(requestForm)
-            .the((response) => {
-              AppToaster.show({
-                message: formatMessage({
-                  id: 'the_payment_receive_has_been_successfully_created',
-                }),
-                intent: Intent.SUCCESS,
-              });
-              setSubmitting(false);
-              clearSavedMediaIds();
-              savePaymentReceiveSubmit({ action: 'new', ...payload });
-            })
-            .catch((errors) => {
-              setSubmitting(false);
+      const requestForm = { ...form };
+
+      if (paymentReceive && paymentReceive.id) {
+        requestEditPaymentReceive(paymentReceive.id, requestForm)
+          .then((response) => {
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_payment_receive_has_been_successfully_edited',
+              }),
+              intent: Intent.SUCCESS,
            });
-        });
-      Promise.all([saveMedia(), deleteMedia()])
-        .then(([savedMediaResponses]) => {
-          const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
-          savedMediaIds.current = mediaIds;
-          return savedMediaResponses;
-        })
-        .then(() => {
-          return savePaymentReceive(savedMediaIds.current);
-        });
+            setSubmitting(false);
+            savePaymentReceiveSubmit({ action: 'update', ...payload });
+            resetForm();
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      } else {
+        requestSubmitPaymentReceive(requestForm)
+          .then((response) => {
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_payment_receive_has_been_successfully_created',
+              }),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            resetForm();
+            savePaymentReceiveSubmit({ action: 'new', ...payload });
+          })
+          .catch((errors) => {
+            setSubmitting(false);
+          });
+      }
    },
  });

@@ -222,33 +282,47 @@ function PaymentReceiveForm({
    formik.resetForm();
  };

+  const handleClickAddNewRow = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingIndex([...formik.values.entries, defaultPaymentReceive]),
+    );
+  };
+
+  const handleClearAllLines = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingIndex([...repeatValue(defaultPaymentReceive, MIN_LINES_NUMBER)]),
+    );
+  };
+  console.log(formik.errors, 'ERROR');
  return (
    <div className={'payment_receive_form'}>
      <form onSubmit={formik.handleSubmit}>
        <PaymentReceiveHeader formik={formik} />
-        <FormGroup
-          label={<T id={'statement'} />}
-          className={'form-group--statement'}
-        >
-          <TextArea
-            growVertically={true}
-            {...formik.getFieldProps('statement')}
-          />
-        </FormGroup>
-
-        <Dragzone
+        <PaymentReceiveItemsTable
+          entries={formik.values.entries}
+          customer_id={formik.values.customer_id}
+          onClickAddNewRow={handleClickAddNewRow}
+          onClickClearAllLines={handleClearAllLines}
+          formik={formik}
+          invoices={paymentReceiveInvoices}
+        />
+        {/* <Dragzone
          initialFiles={initialAttachmentFiles}
          onDrop={handleDropFiles}
          onDeleteFile={handleDeleteFile}
          hint={'Attachments: Maxiumum size: 20MB'}
-        />
-        <PaymentReceiveFooter
-          formik={formik}
-          onSubmit={handleSubmitClick}
-          onCancel={handleCancelClick}
-          onClearClick={handleClearClick}
-        />
+        /> */}
      </form>
+
+      <PaymentReceiveFooter
+        formik={formik}
+        onSubmitClick={handleSubmitClick}
+        paymentReceive={paymentReceive}
+        onCancel={handleCancelClick}
+        onClearClick={handleClearClick}
+      />
    </div>
  );
 }
@@ -257,4 +331,8 @@ export default compose(
  withPaymentReceivesActions,
  withDashboardActions,
  withMediaActions,
+  withPaymentReceives(({ paymentReceivesItems }) => ({
+    paymentReceivesItems,
+  })),
+  withPaymentReceiveDetail(),
 )(PaymentReceiveForm);
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js
@@ -7,11 +7,23 @@ export default function PaymentReceiveFormFooter({
  onSubmitClick,
  onCancelClick,
  onClearClick,
+  paymentReceive,
 }) {
  return (
    <div className={'estimate-form__floating-footer'}>
-      <Button disabled={isSubmitting} intent={Intent.PRIMARY} type="submit">
-        <T id={'save_send'} />
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        type="submit"
+        onClick={() => {
+          onSubmitClick({ redirect: true });
+        }}
+    >
+        {paymentReceive && paymentReceive.id ? (
+          <T id={'edit'} />
+        ) : (
+          <T id={'save_send'} />
+        )}
      </Button>

      <Button
@@ -20,6 +32,9 @@ export default function PaymentReceiveFormFooter({
        className={'ml1'}
        name={'save'}
        type="submit"
+        onClick={() => {
+          onSubmitClick({ redirect: false });
+        }}
      >
        <T id={'save'} />
      </Button>
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
@@ -10,6 +10,9 @@ import {

 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
+import { useParams, useHistory } from 'react-router-dom';
+import { useQuery } from 'react-query';
+
 import moment from 'moment';
 import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
@@ -106,8 +109,55 @@ function PaymentReceiveFormHeader({
            labelProp={'display_name'}
          />
        </FormGroup>
+
+        {/* Payment date */}
        <FormGroup
-          label={<T id={'deposit_account'} />}
+          label={<T id={'payment_date'} />}
+          inline={true}
+          labelInfo={<FieldRequiredHint />}
+          className={classNames('form-group--select-list', Classes.FILL)}
+          intent={errors.payment_date && touched.payment_date && Intent.DANGER}
+          helperText={
+            <ErrorMessage name="payment_date" {...{ errors, touched }} />
+          }
+        >
+          <DateInput
+            {...momentFormatter('YYYY/MM/DD')}
+            value={tansformDateValue(values.payment_date)}
+            onChange={handleDateChange('payment_date')}
+            popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          />
+        </FormGroup>
+
+        {/* payment receive no */}
+        <FormGroup
+          label={<T id={'payment_receive_no'} />}
+          inline={true}
+          className={('form-group--payment_receive_no', Classes.FILL)}
+          labelInfo={<FieldRequiredHint />}
+          intent={
+            errors.payment_receive_no &&
+            touched.payment_receive_no &&
+            Intent.DANGER
+          }
+          helperText={
+            <ErrorMessage name="payment_receive_no" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.payment_receive_no &&
+              touched.payment_receive_no &&
+              Intent.DANGER
+            }
+            minimal={true}
+            {...getFieldProps('payment_receive_no')}
+          />
+        </FormGroup>
+
+        {/* deposit account */}
+        <FormGroup
+          label={<T id={'deposit_to'} />}
          className={classNames(
            'form-group--deposit_account_id',
            'form-group--select-list',
@@ -129,53 +179,37 @@ function PaymentReceiveFormHeader({
        >
          <AccountsSelectList
            accounts={depositAccounts}
+            labelInfo={<FieldRequiredHint />}
            onAccountSelected={onChangeSelect('deposit_account_id')}
            defaultSelectText={<T id={'select_deposit_account'} />}
            selectedAccountId={values.deposit_account_id}
          />
        </FormGroup>
-        <FormGroup
-          label={<T id={'payment_date'} />}
-          inline={true}
-          className={classNames('form-group--select-list', Classes.FILL)}
-          intent={errors.payment_date && touched.payment_date && Intent.DANGER}
-          helperText={
-            <ErrorMessage name="payment_date" {...{ errors, touched }} />
-          }
-        >
-          <DateInput
-            {...momentFormatter('YYYY/MM/DD')}
-            value={tansformDateValue(values.payment_date)}
-            onChange={handleDateChange}
-            popoverProps={{ position: Position.BOTTOM, minimal: true }}
-          />
-        </FormGroup>
      </div>
-      {/* payment receive no */}
-      <FormGroup
-        label={<T id={'payment_receive_no'} />}
+
+      {/* Receive amount */}
+
+      {/* <FormGroup
+        label={<T id={'receive_amount'} />}
        inline={true}
-        className={('form-group--payment_receive_no', Classes.FILL)}
        labelInfo={<FieldRequiredHint />}
+        className={classNames('form-group--', Classes.FILL)}
        intent={
-          errors.payment_receive_no &&
-          touched.payment_receive_no &&
-          Intent.DANGER
+          errors.receive_amount && touched.receive_amount && Intent.DANGER
        }
        helperText={
-          <ErrorMessage name="payment_receive_no" {...{ errors, touched }} />
+          <ErrorMessage name="receive_amount" {...{ errors, touched }} />
        }
      >
        <InputGroup
          intent={
-            errors.payment_receive_no &&
-            touched.payment_receive_no &&
-            Intent.DANGER
+            errors.receive_amount && touched.receive_amount && Intent.DANGER
          }
          minimal={true}
-          {...getFieldProps('payment_receive_no')}
+          {...getFieldProps('receive_amount')}
        />
-      </FormGroup>
+      </FormGroup> */}
+
      {/* reference_no */}
      <FormGroup
        label={<T id={'reference'} />}
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
@@ -1,8 +1,10 @@
 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 DataTable from 'components/DataTable';
-import Icon from 'components/Icon';
+import { Icon, DataTable } from 'components';
+import moment from 'moment';
+import { useQuery } from 'react-query';
+import { useParams, useHistory } from 'react-router-dom';

 import { compose, formattedAmount, transformUpdatedRows } from 'utils';
 import {
@@ -10,4 +12,257 @@ import {
  MoneyFieldCell,
  EstimatesListFieldCell,
  DivFieldCell,
+  EmptyDiv,
 } from 'components/DataTableCells';
+import withInvoices from '../Invoice/withInvoices';
+import withInvoiceActions from '../Invoice/withInvoiceActions';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useUpdateEffect } from 'hooks';
+
+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);
+};
+
+function PaymentReceiveItemsTable({
+  //#ownProps
+  onClickRemoveRow,
+  onClickAddNewRow,
+  onClickClearAllLines,
+  entries,
+  formik: { errors, setFieldValue, values },
+
+  dueInvoices,
+  customer_id,
+  invoices,
+}) {
+  const [rows, setRows] = useState([]);
+  const [entrie, setEntrie] = useState([]);
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    setRows([...dueInvoices.map((e) => ({ ...e })), ...invoices, {}]);
+    setEntrie([
+      ...dueInvoices.map((e) => {
+        return { id: e.id, payment_amount: e.payment_amount };
+      }),
+    ]);
+  }, [dueInvoices]);
+
+  console.log(rows, 'rows');
+  console.log(entrie, 'entrie');
+  console.log(values, 'values');
+  // useEffect(() => {
+  //   setRows([...dueInvoices.map((e) => ({ ...e })), {}]);
+
+  //   setEntrie([
+  //     ...dueInvoices.map((e) => {
+  //       return { id: e.id, payment_amount: e.payment_amount };
+  //     }),
+  //   ]);
+  // }, [dueInvoices]);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: '#',
+        accessor: 'index',
+        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
+        width: 40,
+        disableResizing: true,
+        disableSortBy: true,
+      },
+      {
+        Header: formatMessage({ id: 'Date' }),
+        id: 'invoice_date',
+        accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
+        Cell: CellRenderer(EmptyDiv, 'invoice_date'),
+        disableSortBy: true,
+        disableResizing: true,
+        width: 250,
+      },
+
+      {
+        Header: formatMessage({ id: 'invocie_number' }),
+        accessor: (row) => `#${row.invoice_no}`,
+        Cell: CellRenderer(EmptyDiv, 'invoice_no'),
+        disableSortBy: true,
+        className: '',
+      },
+      {
+        Header: formatMessage({ id: 'invoice_amount' }),
+        accessor: 'balance',
+        Cell: CellRenderer(DivFieldCell, 'balance'),
+        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;
+      });
+      setRows(newRows);
+      // setEntrie(newRows);
+      setFieldValue(
+        'entries',
+        newRows.map((row) => ({
+          ...pick(row, ['payment_amount']),
+          invoice_id: row.id,
+        })),
+      );
+    },
+    [rows, setFieldValue, setEntrie,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>
+
+        <Button
+          small={true}
+          className={'button--secondary button--clear-lines ml1'}
+          onClick={handleClickClearAllLines}
+        >
+          <T id={'clear_all_lines'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  withInvoices(({ dueInvoices }) => ({
+    dueInvoices,
+  })),
+)(PaymentReceiveItemsTable);
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveList.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveList.js
@@ -0,0 +1,182 @@
+import React, { useEffect, useCallback, useMemo, useState } from 'react';
+import { Route, Switch, useHistory } from 'react-router-dom';
+import { useQuery, queryCache } from 'react-query';
+import { Alert, Intent } from '@blueprintjs/core';
+
+import AppToaster from 'components/AppToaster';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+import PaymentReceivesDataTable from './PaymentReceivesDataTable';
+import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
+import PaymentReceiveViewTabs from './PaymentReceiveViewTabs';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withResourceActions from 'containers/Resources/withResourcesActions';
+import withPaymentReceives from './withPaymentReceives';
+import withPaymentReceivesActions from './withPaymentReceivesActions';
+import withViewsActions from 'containers/Views/withViewsActions';
+
+import { compose } from 'utils';
+
+function PaymentReceiveList({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withViewsActions
+  requestFetchResourceViews,
+  requestFetchResourceFields,
+
+  //#withPaymentReceives
+  paymentReceivesTableQuery,
+
+  //#withPaymentReceivesActions
+  requestFetchPaymentReceiveTable,
+  requestDeletePaymentReceive,
+  addPaymentReceivesTableQueries,
+}) {
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+  const [deletePaymentReceive, setDeletePaymentReceive] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  useEffect(() => {
+    changePageTitle(formatMessage({ id: 'payment_Receive_list' }));
+  }, [changePageTitle, formatMessage]);
+
+  const fetchResourceViews = useQuery(
+    ['resource-views', 'payment_receives'],
+    (key, resourceName) => requestFetchResourceViews(resourceName),
+  );
+
+  const fetchResourceFields = useQuery(
+    ['resource-fields', 'payment_receives'],
+    (key, resourceName) => requestFetchResourceFields(resourceName),
+  );
+
+  const fetchPaymentReceives = useQuery(
+    ['paymantReceives-table', paymentReceivesTableQuery],
+    () => requestFetchPaymentReceiveTable(),
+  );
+
+  //handle dalete Payment Receive
+  const handleDeletePaymentReceive = useCallback(
+    (paymentReceive) => {
+      setDeletePaymentReceive(paymentReceive);
+    },
+    [setDeletePaymentReceive],
+  );
+
+  // handle cancel Payment Receive
+  const handleCancelPaymentReceiveDelete = useCallback(() => {
+    setDeletePaymentReceive(false);
+  }, [setDeletePaymentReceive]);
+
+  // handleConfirm delete payment receive
+  const handleConfirmPaymentReceiveDelete = useCallback(() => {
+    requestDeletePaymentReceive(deletePaymentReceive.id).then(() => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_payment_receive_has_been_successfully_deleted',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      setDeletePaymentReceive(false);
+    });
+  }, [deletePaymentReceive, requestDeletePaymentReceive, formatMessage]);
+
+  const handleEditPaymentReceive = useCallback((payment) => {
+    history.push(`/payment-receive/${payment.id}/edit`);
+  });
+
+  // Calculates the selected rows count.
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
+    selectedRows,
+  ]);
+
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      const page = pageIndex + 1;
+
+      addPaymentReceivesTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page,
+      });
+    },
+    [addPaymentReceivesTableQueries],
+  );
+
+  // Handle filter change to re-fetch data-table.
+  const handleFilterChanged = useCallback(() => {}, [fetchPaymentReceives]);
+
+  // Handle selected rows change.
+  const handleSelectedRowsChange = useCallback(
+    (_payment) => {
+      setSelectedRows(_payment);
+    },
+    [setSelectedRows],
+  );
+
+  return (
+    <DashboardInsider
+      // loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
+      name={'payment_receives'}
+    >
+      <PaymentReceiveActionsBar
+        // onBulkDelete={}
+        selectedRows={selectedRows}
+        onFilterChanged={handleFilterChanged}
+      />
+      <DashboardPageContent>
+        <Switch>
+          <Route
+            exact={true}
+            path={[
+              '/payment-receives/:custom_view_id/custom_view',
+              '/payment-receives',
+            ]}
+          >
+            <PaymentReceiveViewTabs />
+            <PaymentReceivesDataTable
+              loading={fetchPaymentReceives.isFetching}
+              onDeletePaymentReceive={handleDeletePaymentReceive}
+              onFetchData={handleFetchData}
+              onEditPaymentReceive={handleEditPaymentReceive}
+              onSelectedRowsChange={handleSelectedRowsChange}
+            />
+          </Route>
+        </Switch>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'delete'} />}
+          icon={'trash'}
+          intent={Intent.DANGER}
+          isOpen={deletePaymentReceive}
+          onCancel={handleCancelPaymentReceiveDelete}
+          onConfirm={handleConfirmPaymentReceiveDelete}
+        >
+          <p>
+            <T id={'once_delete_this_payment_receive_you_will_able_to_restore_it'} />
+          </p>
+        </Alert>
+      </DashboardPageContent>
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withResourceActions,
+  withPaymentReceivesActions,
+  withDashboardActions,
+  withViewsActions,
+  withPaymentReceives(({ paymentReceivesTableQuery }) => ({
+    paymentReceivesTableQuery,
+  })),
+)(PaymentReceiveList);
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveViewTabs.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveViewTabs.js
@@ -0,0 +1,110 @@
+import React, { useEffect, useRef } from 'react';
+import { useHistory } from 'react-router';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+import { useParams, withRouter } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { pick, debounce } from 'lodash';
+
+import { DashboardViewsTabs } from 'components';
+import { useUpdateEffect } from 'hooks';
+
+import withPaymentReceives from './withPaymentReceives';
+import withPaymentReceivesActions from './withPaymentReceivesActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withViewDetails from 'containers/Views/withViewDetails';
+
+import { compose } from 'utils';
+
+function PaymentReceiveViewTabs({
+  //#withPaymentReceives
+  paymentReceivesViews,
+
+  //#withPaymentReceivesActions
+  changePaymentReceiveView,
+  addPaymentReceivesTableQueries,
+
+  // #withViewDetails
+  viewItem,
+
+  // #withDashboardActions
+  setTopbarEditView,
+  changePageSubtitle,
+
+  //#Own Props
+  customViewChanged,
+  onViewChanged,
+}) {
+  const history = useHistory();
+  const { custom_view_id: customViewId = null } = useParams();
+
+  useEffect(() => {
+    changePaymentReceiveView(customViewId || -1);
+    setTopbarEditView(customViewId);
+    changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
+
+    addPaymentReceivesTableQueries({
+      custom_view_id: customViewId,
+    });
+    return () => {
+      setTopbarEditView(null);
+      changePageSubtitle('');
+      changePaymentReceiveView(null);
+    };
+  }, [customViewId, addPaymentReceivesTableQueries, changePaymentReceiveView]);
+
+  useUpdateEffect(() => {
+    onViewChanged && onViewChanged(customViewId);
+  }, [customViewId]);
+
+  const debounceChangeHistory = useRef(
+    debounce((toUrl) => {
+      history.push(toUrl);
+    }, 250),
+  );
+
+  const handleTabsChange = (viewId) => {
+    const toPath = viewId ? `${viewId}/custom_view` : '';
+    debounceChangeHistory.current(`/payment-receives/${toPath}`);
+    setTopbarEditView(viewId);
+  };
+  const tabs = paymentReceivesViews.map((view) => ({
+    ...pick(view, ['name', 'id']),
+  }));
+
+  // Handle click a new view tab.
+  const handleClickNewView = () => {
+    setTopbarEditView(null);
+    history.push('/custom_views/payment-receives/new');
+  };
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          initialViewId={customViewId}
+          baseUrl={'/payment-receives'}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  viewId: ownProps.match.params.custom_view_id,
+});
+
+const withPaymentReceivesViewTabs = connect(mapStateToProps);
+
+export default compose(
+  withRouter,
+  withPaymentReceivesViewTabs,
+  withPaymentReceivesActions,
+  withDashboardActions,
+  withViewDetails(),
+  withPaymentReceives(({ paymentReceivesViews }) => ({
+    paymentReceivesViews,
+  })),
+)(PaymentReceiveViewTabs);
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceives.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceives.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';

@@ -8,7 +8,9 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withItemsActions from 'containers/Items/withItemsActions';
-//#withInvoiceActions
+import withPaymentReceivesActions from './withPaymentReceivesActions';
+import withInvoiceActions from '../Invoice/withInvoiceActions';
+import withInvoices from '../Invoice/withInvoices';

 import { compose } from 'utils';

@@ -22,9 +24,16 @@ function PaymentReceives({
  //#withItemsActions
  requestFetchItems,

-  //#withInvoiceActions
+  //#withPaymentReceivesActions
+  requestFetchPaymentReceive,
+
+  //#withInvoicesActions
+  requestFetchDueInvoices,
 }) {
  const history = useHistory();
+  const { id } = useParams();
+  const [customerId, setCustomerId] = useState(null);
+  const [payload, setPayload] = useState(false);

  // Handle fetch accounts data
  const fetchAccounts = useQuery('accounts-list', (key) =>
@@ -32,30 +41,59 @@ function PaymentReceives({
  );

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

  // Handle fetch customers data table or list
-  const fetchCustomers = useQuery('customers-table', () =>
+  const fetchCustomers = useQuery('customers-list', () =>
    requestFetchCustomers({}),
  );

-  const handleFormSubmit = useCallback((payload) => {}, [history]);
+  const fetchPaymentReceive = useQuery(
+    ['payment-receive', id],
+    (key, _id) => requestFetchPaymentReceive(_id),
+    { enabled: !!id },
+  );

+  const fetchDueInvoices = useQuery(
+    ['due-invoies', customerId],
+    (key, query) => requestFetchDueInvoices(query),
+    { enabled: !!customerId },
+  );
+
+  const handleFormSubmit = useCallback(
+    (payload) => {
+      payload.redirect && history.push('/payment-receives');
+    },
+    [history],
+  );
  const handleCancel = useCallback(() => {
    history.goBack();
  }, [history]);

+  const handleCustomerChange = (customerId) => {
+    if (id) {
+      setCustomerId(!customerId);
+    } else {
+      setCustomerId(customerId);
+    }
+  };
+
  return (
    <DashboardInsider
      loading={
        fetchCustomers.isFetching ||
        fetchItems.isFetching ||
-        fetchAccounts.isFetching
+        fetchAccounts.isFetching ||
+        fetchPaymentReceive.isFetching
      }
+      name={'payment-receive'}
    >
      <PaymentReceiveForm
        onFormSubmit={handleFormSubmit}
+        paymentReceiveId={id}
+        paymentReceiveInvoices={id}
        onCancelForm={handleCancel}
+        onCustomerChange={handleCustomerChange}
      />
    </DashboardInsider>
  );
@@ -65,5 +103,6 @@ export default compose(
  withCustomersActions,
  withItemsActions,
  withAccountsActions,
-  // withInvoiceActions
+  withPaymentReceivesActions,
+  withInvoiceActions,
 )(PaymentReceives);
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js
@@ -0,0 +1,241 @@
+import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import {
+  Intent,
+  Button,
+  Classes,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core';
+import { useParams } from 'react-router-dom';
+import { withRouter } from 'react-router';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import moment from 'moment';
+
+import { compose } from 'utils';
+import { useUpdateEffect } from 'hooks';
+
+import LoadingIndicator from 'components/LoadingIndicator';
+import { DataTable, Money, Icon } from 'components';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withViewDetails from 'containers/Views/withViewDetails';
+
+import withPaymentReceives from './withPaymentReceives';
+import withPaymentReceivesActions from './withPaymentReceivesActions';
+import withCurrentView from 'containers/Views/withCurrentView';
+
+function PaymentReceivesDataTable({
+  //#withPaymentReceives
+  PaymentReceivesCurrentPage,
+  paymentReceivesPageination,
+  paymentReceivesLoading,
+  paymentReceivesItems,
+
+  // #withDashboardActions
+  changeCurrentView,
+  changePageSubtitle,
+  setTopbarEditView,
+
+  // #withView
+  viewMeta,
+
+  //#OwnProps
+  loading,
+  onFetchData,
+  onEditPaymentReceive,
+  onDeletePaymentReceive,
+  onSelectedRowsChange,
+}) {
+  const [initialMount, setInitialMount] = useState(false);
+  const { custom_view_id: customViewId } = useParams();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    setInitialMount(false);
+  }, [customViewId]);
+
+  useUpdateEffect(() => {
+    if (!paymentReceivesLoading) {
+      setInitialMount(true);
+    }
+  }, [paymentReceivesLoading, setInitialMount]);
+
+  // useEffect(() => {
+  //   if (customViewId) {
+  //     changeCurrentView(customViewId);
+  //     setTopbarEditView(customViewId);
+  //   }
+  //   changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
+  // }, [
+  //   customViewId,
+  //   changeCurrentView,
+  //   changePageSubtitle,
+  //   setTopbarEditView,
+  //   viewMeta,
+  // ]);
+
+  const handleEditPaymentReceive = useCallback(
+    (paymentReceive) => () => {
+      onEditPaymentReceive && onEditPaymentReceive(paymentReceive);
+    },
+    [onEditPaymentReceive],
+  );
+
+  const handleDeletePaymentReceive = useCallback(
+    (paymentReceive) => () => {
+      onDeletePaymentReceive && onDeletePaymentReceive(paymentReceive);
+    },
+    [onDeletePaymentReceive],
+  );
+
+  const actionMenuList = useCallback(
+    (paymentReceive) => (
+      <Menu>
+        <MenuItem text={formatMessage({ id: 'view_details' })} />
+        <MenuDivider />
+        <MenuItem
+          text={formatMessage({ id: 'edit_payment_receive' })}
+          onClick={handleEditPaymentReceive(paymentReceive)}
+        />
+        <MenuItem
+          text={formatMessage({ id: 'delete_payment_receive' })}
+          intent={Intent.DANGER}
+          onClick={handleDeletePaymentReceive(paymentReceive)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Menu>
+    ),
+    [handleDeletePaymentReceive, handleEditPaymentReceive, formatMessage],
+  );
+
+  const onRowContextMenu = useCallback(
+    (cell) => {
+      return actionMenuList(cell.row.original);
+    },
+    [actionMenuList],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'payment_date',
+        Header: formatMessage({ id: 'payment_date' }),
+        accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'payment_date',
+      },
+      {
+        id: 'customer_id',
+        Header: formatMessage({ id: 'customer_name' }),
+        accessor: 'customer.display_name',
+        width: 140,
+        className: 'customer_id',
+      },
+      {
+        id: 'payment_receive_no',
+        Header: formatMessage({ id: 'payment_receive_no' }),
+        accessor: (row) => `#${row.payment_receive_no}`,
+        width: 140,
+        className: 'payment_receive_no',
+      },
+      {
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: (r) => <Money amount={r.amount} currency={'USD'} />,
+        width: 140,
+        className: 'amount',
+      },
+      {
+        id: 'reference_no',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference_no',
+        width: 140,
+        className: 'reference_no',
+      },
+      {
+        id: 'deposit_account_id',
+        Header: formatMessage({ id: 'deposit_account' }),
+        accessor: 'deposit_account.name',
+        width: 140,
+        className: 'deposit_account_id',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_BOTTOM}
+          >
+            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
+
+  const handleDataTableFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData],
+  );
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange],
+  );
+
+  return (
+    <div>
+      <LoadingIndicator loading={loading} mount={false}>
+        <DataTable
+          columns={columns}
+          data={PaymentReceivesCurrentPage}
+          onFetchData={handleDataTableFetchData}
+          manualSortBy={true}
+          selectionColumn={true}
+          noInitialFetch={true}
+          sticky={true}
+          loading={paymentReceivesLoading && !initialMount}
+          onSelectedRowsChange={handleSelectedRowsChange}
+          rowContextMenu={onRowContextMenu}
+          pagination={true}
+          pagesCount={paymentReceivesPageination.pagesCount}
+          initialPageSize={paymentReceivesPageination.pageSize}
+          initialPageIndex={paymentReceivesPageination.page - 1}
+        />
+      </LoadingIndicator>
+    </div>
+  );
+}
+
+export default compose(
+  withRouter,
+  withCurrentView,
+  withDialogActions,
+  withDashboardActions,
+  withPaymentReceivesActions,
+  withPaymentReceives(
+    ({
+      PaymentReceivesCurrentPage,
+      paymentReceivesLoading,
+      paymentReceivesPageination,
+    }) => ({
+      PaymentReceivesCurrentPage,
+      paymentReceivesLoading,
+      paymentReceivesPageination,
+    }),
+  ),
+  withViewDetails(),
+)(PaymentReceivesDataTable);
--- a/client/src/containers/Sales/PaymentReceive/withPaymentReceiveDetail.js
+++ b/client/src/containers/Sales/PaymentReceive/withPaymentReceiveDetail.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import {
+  getPaymentReceiveByIdFactory,
+  getPaymentReceiveInvoices,
+} from 'store/PaymentReceive/paymentReceive.selector';
+
+export default () => {
+  const getPaymentReceiveById = getPaymentReceiveByIdFactory();
+
+  const mapStateToProps = (state, props) => ({
+    paymentReceive: getPaymentReceiveById(state, props),
+    paymentReceiveInvoices: getPaymentReceiveInvoices(state, props),
+  });
+  return connect(mapStateToProps);
+};
--- a/client/src/containers/Sales/PaymentReceive/withPaymentReceives.js
+++ b/client/src/containers/Sales/PaymentReceive/withPaymentReceives.js
@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+import {
+  getPaymentReceiveCurrentPageFactory,
+  getPaymentReceivePaginationMetaFactory,
+  getPaymentReceiveTableQuery,
+} from 'store/PaymentReceive/paymentReceive.selector';
+
+
+export default (mapState) => {
+  const getPyamentReceivesItems = getPaymentReceiveCurrentPageFactory();
+  const getPyamentReceivesPaginationMeta = getPaymentReceivePaginationMetaFactory();
+  const mapStateToProps = (state, props) => {
+    const query = getPaymentReceiveTableQuery(state, props);
+    const mapped = {
+      PaymentReceivesCurrentPage: getPyamentReceivesItems(state, props, query),
+      paymentReceivesViews: getResourceViews(state, props, 'payment_receives'),
+      paymentReceivesItems: state.paymentReceives.items,
+      paymentReceivesTableQuery: query,
+      paymentReceivesPageination: getPyamentReceivesPaginationMeta(state, props, query),
+      paymentReceivesLoading: state.paymentReceives.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
--- a/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js
+++ b/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js
@@ -13,7 +13,7 @@ const mapDispatchToProps = (dispatch) => ({
    dispatch(submitPaymentReceive({ form })),
  requestFetchPaymentReceive: (id) => dispatch(fetchPaymentReceive({ id })),
  requestEditPaymentReceive: (id, form) =>
-    dispatch(editPaymentReceive({ id, form })),
+    dispatch(editPaymentReceive( id, form )),
  requestDeletePaymentReceive: (id) => dispatch(deletePaymentReceive({ id })),
  requestFetchPaymentReceiveTable: (query = {}) =>
    dispatch(fetchPaymentReceivesTable({ query: { ...query } })),
--- a/client/src/containers/Sales/Receipt/ReceiptForm.js
+++ b/client/src/containers/Sales/Receipt/ReceiptForm.js
@@ -12,6 +12,7 @@ import moment from 'moment';
 import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
+import { Row, Col } from 'react-grid-system';

 import ReceiptFromHeader from './ReceiptFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
@@ -214,7 +215,7 @@ function ReceiptForm({
      const requestForm = { ...form };

      if (receipt && receipt.id) {
-        requestEditReceipt(receipt.id && requestForm).then(() => {
+        requestEditReceipt(receipt.id, requestForm).then(() => {
          AppToaster.show({
            message: formatMessage({
              id: 'the_receipt_has_been_successfully_edited',
@@ -244,6 +245,7 @@ function ReceiptForm({
      }
    },
  });
+  console.log(formik.errors, 'ERROR');

  const handleDeleteFile = useCallback(
    (_deletedFiles) => {
@@ -296,31 +298,38 @@ function ReceiptForm({
          onClickClearAllLines={handleClearAllLines}
          formik={formik}
        />
-        <FormGroup
-          label={<T id={'receipt_message'} />}
-          className={'form-group--'}
-        >
-          <TextArea
-            growVertically={true}
-            {...formik.getFieldProps('receipt_message')}
-          />
-        </FormGroup>
-        <FormGroup
-          label={<T id={'statement'} />}
-          className={'form-group--statement'}
-        >
-          <TextArea
-            growVertically={true}
-            {...formik.getFieldProps('statement')}
-          />
-        </FormGroup>

-        <Dragzone
-          initialFiles={initialAttachmentFiles}
-          onDrop={handleDropFiles}
-          onDeleteFile={handleDeleteFile}
-          hint={'Attachments: Maxiumum size: 20MB'}
-        />
+        <Row>
+          <Col>
+            <FormGroup
+              label={<T id={'receipt_message'} />}
+              className={'form-group--'}
+            >
+              <TextArea
+                growVertically={true}
+                {...formik.getFieldProps('receipt_message')}
+              />
+            </FormGroup>
+            <FormGroup
+              label={<T id={'statement'} />}
+              className={'form-group--statement'}
+            >
+              <TextArea
+                growVertically={true}
+                {...formik.getFieldProps('statement')}
+              />
+            </FormGroup>
+          </Col>
+
+          <Col>
+            <Dragzone
+              initialFiles={initialAttachmentFiles}
+              onDrop={handleDropFiles}
+              onDeleteFile={handleDeleteFile}
+              hint={'Attachments: Maxiumum size: 20MB'}
+            />
+          </Col>
+        </Row>
      </form>
      <ReceiptFormFooter
        formik={formik}
--- a/client/src/containers/Sales/Receipt/ReceiptFormFooter.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormFooter.js
@@ -9,7 +9,7 @@ export default function ReceiptFormFooter({
  receipt,
 }) {
  return (
-    <div className={'estimate-form__floating-footer'}>
+    <div className={'form__floating-footer'}>
      <Button
        disabled={isSubmitting}
        intent={Intent.PRIMARY}
--- a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
@@ -83,13 +83,17 @@ function ReceiptFormHeader({
  );

  return (
-    <div>
-      <div>
-        {/* customer name */}
+    <div class="page-form receipt-form">
+      <div class="page-form__primary-section">
+        {/*- Customer name -*/}
        <FormGroup
          label={<T id={'customer_name'} />}
          inline={true}
-          className={classNames('form-group--select-list', Classes.FILL)}
+          className={classNames(
+            'form-group--select-list',
+            Classes.FILL,
+            'form-group--customer',
+          )}
          labelInfo={<FieldRequiredHint />}
          intent={errors.customer_id && touched.customer_id && Intent.DANGER}
          helperText={
@@ -110,10 +114,11 @@ function ReceiptFormHeader({
          />
        </FormGroup>

+        {/*- Deposit account -*/}
        <FormGroup
          label={<T id={'deposit_account'} />}
          className={classNames(
-            'form-group--deposit_account_id',
+            'form-group--deposit-account',
            'form-group--select-list',
            Classes.FILL,
          )}
@@ -172,6 +177,7 @@ function ReceiptFormHeader({
        />
      </FormGroup> */}

+      {/*- Reference -*/}
      <FormGroup
        label={<T id={'reference'} />}
        inline={true}
@@ -185,6 +191,8 @@ function ReceiptFormHeader({
          {...getFieldProps('reference_no')}
        />
      </FormGroup>
+
+      {/*- Send to email -*/}
      <FormGroup
        label={<T id={'send_to_email'} />}
        inline={true}
--- a/client/src/containers/Sales/Receipt/Receipts.js
+++ b/client/src/containers/Sales/Receipt/Receipts.js
@@ -23,14 +23,14 @@ function Receipts({
  requestFetchItems,

  //#withReceiptsActions
-  requsetFetchInvoice,
+  requestFetchReceipt,
 }) {
  const history = useHistory();
  const { id } = useParams();

  const fetchReceipt = useQuery(
    ['receipt', id],
-    (key, _id) => requsetFetchInvoice(_id),
+    (key, _id) => requestFetchReceipt(_id),
    { enabled: !!id },
  );
  const fetchAccounts = useQuery('accounts-list', (key) =>
@@ -60,7 +60,7 @@ function Receipts({
      loading={
        fetchCustomers.isFetching ||
        fetchItems.isFetching ||
-        fetchAccounts.isFetching||
+        fetchAccounts.isFetching ||
        fetchReceipt.isFetching
      }
      name={'receipt-form'}
--- a/client/src/containers/Sales/Receipt/withReceipts.js
+++ b/client/src/containers/Sales/Receipt/withReceipts.js
@@ -2,23 +2,25 @@ import { connect } from 'react-redux';
 import { getResourceViews } from 'store/customViews/customViews.selectors';
 import {
  getReceiptCurrentPageFactory,
-  getReceiptsTableQuery,
+  getReceiptsTableQueryFactory,
  getReceiptsPaginationMetaFactory,
 } from 'store/receipt/receipt.selector';

 export default (mapState) => {
  const getReceiptsItems = getReceiptCurrentPageFactory();
  const getReceiptPaginationMeta = getReceiptsPaginationMetaFactory();
+  const getReceiptsTableQuery = getReceiptsTableQueryFactory();

  const mapStateToProps = (state, props) => {
-    const query = getReceiptsTableQuery(state, props);
+    const tableQuery = getReceiptsTableQuery(state, props);
+
    const mapped = {
-      receiptsCurrentPage: getReceiptsItems(state, props, query),
+      receiptsCurrentPage: getReceiptsItems(state, props, tableQuery),
      receiptview:getResourceViews(state, props, 'sales_receipts'),
-      receiptItems: state.sales_receipts.items,
-      receiptTableQuery: query,
-      receiptsPagination: getReceiptPaginationMeta(state, props, query),
-      receiptsLoading: state.sales_receipts.loading,
+      receiptItems: state.salesReceipts.items,
+      receiptTableQuery: tableQuery,
+      receiptsPagination: getReceiptPaginationMeta(state, props, tableQuery),
+      receiptsLoading: state.salesReceipts.loading,
    };

    return mapState ? mapState(mapped, state, props) : mapped;