WIP/ Feature : Estimate & Receipt & Bill & Invoice

2026-02-18 05:40:31 +00:00 · 2020-08-12 21:19:52 +02:00
parent 58c6b5466c
commit c86f0b29bf
66 changed files with 4288 additions and 535 deletions
--- a/client/src/containers/Sales/Estimate/EntriesItemsTable.js
+++ b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
@@ -4,7 +4,7 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';

-import { compose, formattedAmount, transformUpdatedRows } from 'utils';
+import { compose, formattedAmount } from 'utils';
 import {
  InputGroupCell,
  MoneyFieldCell,
@@ -176,7 +176,7 @@ function EstimateTable({
      setFieldValue(
        'entries',
        newRow.map((row) => ({
-          ...omit(row),
+          ...omit(row, ['total']),
        })),
      );
    },
--- a/client/src/containers/Sales/Estimate/EstimateActionsBar.js
+++ b/client/src/containers/Sales/Estimate/EstimateActionsBar.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useState } from 'react';
 import Icon from 'components/Icon';
 import {
  Button,
@@ -14,9 +14,9 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useRouteMatch, useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';

-import { If } from 'components';
+import { If, DashboardActionViewsList } from 'components';
 import FilterDropdown from 'components/FilterDropdown';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';

@@ -41,37 +41,60 @@ function EstimateActionsBar({

  // #own Porps
  onFilterChanged,
-  selectedRows,
+  selectedRows = [],
 }) {
  const { path } = useRouteMatch();
  const history = useHistory();
+  const [filterCount, setFilterCount] = useState(0);
+  const { formatMessage } = useIntl();

  const onClickNewEstimate = useCallback(() => {
-    // history.push('/estimates/new');
+    history.push('/estimates/new');
  }, [history]);

-  const filterDropdown = FilterDropdown({
-    initialCondition: {
-      fieldKey: '',
-      compatator: '',
-      value: '',
-    },
-    fields: resourceFields,
-    onFilterChange: (filterConditions) => {
-      addEstimatesTableQueries({
-        filter_roles: filterConditions || '',
-      });
-      onFilterChanged && onFilterChange(filterConditions);
-    },
-  });
+  // const filterDropdown = FilterDropdown({
+  //   fields: resourceFields,
+  //   initialCondition: {
+  //     fieldKey: 'estimate_number',
+  //     compatator: 'contains',
+  //     value: '',
+  //   },
+  //   onFilterChange: (filterConditions) => {
+  //     setFilterCount(filterConditions.length || 0);
+  //     addEstimatesTableQueries({
+  //       filter_roles: filterConditions || '',
+  //     });
+  //     onFilterChanged && onFilterChanged(filterConditions);
+  //   },
+  // });

  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
    selectedRows,
  ]);

+  const viewsMenuItems = estimateViews.map((view) => {
+    return (
+      <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
+    );
+  });
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
+        <Popover
+          content={<Menu>{viewsMenuItems}</Menu>}
+          minimal={true}
+          interactionKind={PopoverInteractionKind.HOVER}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--table-views')}
+            icon={<Icon icon="table-16" iconSize={16} />}
+            text={<T id={'table_views'} />}
+            rightIcon={'caret-down'}
+          />
+        </Popover>
+
        <NavbarDivider />
        <Button
          className={Classes.MINIMAL}
@@ -81,13 +104,19 @@ function EstimateActionsBar({
        />
        <Popover
          minimal={true}
-          content={filterDropdown}
+          // content={filterDropdown}
          interactionKind={PopoverInteractionKind.CLICK}
          position={Position.BOTTOM_LEFT}
        >
          <Button
            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={'Filter'}
+            text={
+              filterCount <= 0 ? (
+                <T id={'filter'} />
+              ) : (
+                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+              )
+            }
            icon={<Icon icon={'filter-16'} iconSize={16} />}
          />
        </Popover>
@@ -122,7 +151,7 @@ function EstimateActionsBar({
 }

 const mapStateToProps = (state, props) => ({
-  resourceName: 'estimates',
+  resourceName: 'sales_estimates',
 });

 const withEstimateActionsBar = connect(mapStateToProps);
@@ -130,11 +159,11 @@ const withEstimateActionsBar = connect(mapStateToProps);
 export default compose(
  withEstimateActionsBar,
  withDialogActions,
+  withEstimates(({ estimateViews }) => ({
+    estimateViews,
+  })),
  withResourceDetail(({ resourceFields }) => ({
    resourceFields,
  })),
-  // withEstimate(({ estimateViews }) => ({
-  //   estimateViews,
-  // })),
  withEstimateActions,
 )(EstimateActionsBar);
--- a/client/src/containers/Sales/Estimate/EstimateForm.js
+++ b/client/src/containers/Sales/Estimate/EstimateForm.js
@@ -11,20 +11,22 @@ import { useFormik } from 'formik';
 import moment from 'moment';
 import { Intent, FormGroup, TextArea, Button } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick, omitBy, omit } from 'lodash';
+import { pick, omit } from 'lodash';
+import { queryCache } from 'react-query';

 import EstimateFormHeader from './EstimateFormHeader';
 import EstimatesItemsTable from './EntriesItemsTable';
 import EstimateFormFooter from './EstimateFormFooter';

 import withEstimateActions from './withEstimateActions';
+import withEstimateDetail from './withEstimateDetail';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';

 import AppToaster from 'components/AppToaster';
 import Dragzone from 'components/Dragzone';
-
 import useMedia from 'hooks/useMedia';
+
 import { compose, repeatValue } from 'utils';

 const MIN_LINES_NUMBER = 4;
@@ -51,7 +53,7 @@ const EstimateForm = ({
  onCancelForm,
 }) => {
  const { formatMessage } = useIntl();
-  const [payload, setPaload] = useState({});
+  const [payload, setPayload] = useState({});

  const {
    setFiles,
@@ -93,6 +95,7 @@ const EstimateForm = ({
      .label(formatMessage({ id: 'expiration_date_' })),
    estimate_number: Yup.number()
      .required()
+      .nullable()
      .label(formatMessage({ id: 'estimate_number_' })),
    reference: Yup.string().min(1).max(255),
    note: Yup.string()
@@ -134,7 +137,7 @@ const EstimateForm = ({
    ),
  });

-  const saveInvokeSubmit = useCallback(
+  const saveEstimateSubmit = useCallback(
    (payload) => {
      onFormSubmit && onFormSubmit(payload);
    },
@@ -146,7 +149,7 @@ const EstimateForm = ({
      index: 0,
      item_id: null,
      rate: null,
-      discount: null,
+      discount: 0,
      quantity: null,
      description: '',
    }),
@@ -155,10 +158,10 @@ const EstimateForm = ({

  const defaultInitialValues = useMemo(
    () => ({
-      customer_id: null,
+      customer_id: '',
      estimate_date: moment(new Date()).format('YYYY-MM-DD'),
      expiration_date: moment(new Date()).format('YYYY-MM-DD'),
-      estimate_number: null,
+      estimate_number: '',
      reference: '',
      note: '',
      terms_conditions: '',
@@ -173,15 +176,38 @@ const EstimateForm = ({
      index: index + 1,
    }));
  };
-
+  // debugger;
  const initialValues = useMemo(
    () => ({
-      ...defaultInitialValues,
-      entries: orderingProductsIndex(defaultInitialValues.entries),
+      ...(estimate
+        ? {
+            ...pick(estimate, Object.keys(defaultInitialValues)),
+            entries: [
+              ...estimate.entries.map((estimate) => ({
+                ...pick(estimate, Object.keys(defaultEstimate)),
+              })),
+              ...repeatValue(
+                defaultEstimate,
+                Math.max(MIN_LINES_NUMBER - estimate.entries.length, 0),
+              ),
+            ],
+          }
+        : {
+            ...defaultInitialValues,
+            entries: orderingProductsIndex(defaultInitialValues.entries),
+          }),
    }),
-    [defaultEstimate, defaultInitialValues, estimate],
+    [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) => ({
@@ -199,56 +225,58 @@ const EstimateForm = ({
      ...initialValues,
    },
    onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
-      const entries = values.entries.map((item) => omit(item, ['total']));
-
+      const entries = values.entries.filter(
+        (item) => item.item_id && item.quantity,
+      );
      const form = {
        ...values,
        entries,
      };
-      const saveEstimate = (mediaIds) =>
-        new Promise((resolve, reject) => {
-          const requestForm = { ...form, media_ids: mediaIds };
+      const requestForm = { ...form };

-          requestSubmitEstimate(requestForm)
-            .then((response) => {
-              AppToaster.show({
-                message: formatMessage(
-                  {
-                    id: 'the_estimate_has_been_successfully_created',
-                  },
-                  {
-                    number: values.estimate_number,
-                  },
-                ),
-                intent: Intent.SUCCESS,
-              });
-              setSubmitting(false);
-              resetForm();
-              saveInvokeSubmit({ action: 'new', ...payload });
-              clearSavedMediaIds();
-            })
-            .catch((errors) => {
-              setSubmitting(false);
+      if (estimate && estimate.id) {
+        requestEditEstimate(estimate.id, requestForm).then((response) => {
+          AppToaster.show({
+            message: formatMessage({
+              id: 'the_estimate_has_been_successfully_edited',
+            }),
+            intent: Intent.SUCCESS,
+          });
+          setSubmitting(false);
+          saveEstimateSubmit({ action: 'update', ...payload });
+          resetForm();
+        });
+      } else {
+        requestSubmitEstimate(requestForm)
+          .then((response) => {
+            AppToaster.show({
+              message: formatMessage(
+                {
+                  id: 'the_estimate_has_been_successfully_created',
+                },
+                {
+                  number: values.estimate_number,
+                },
+              ),
+              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 saveEstimate(saveEstimate.current);
-        });
+            setSubmitting(false);
+            resetForm();
+            saveEstimateSubmit({ action: 'new', ...payload });
+          })
+          .catch((errors) => {
+            setSubmitting(false);
+          });
+      }
    },
  });

  const handleSubmitClick = useCallback(
    (payload) => {
-      setPaload(payload);
+      setPayload(payload);
      formik.submitForm();
    },
-    [setPaload, formik],
+    [setPayload, formik],
  );

  const handleCancelClick = useCallback(
@@ -285,6 +313,9 @@ const EstimateForm = ({
    );
  };

+
+
+
  return (
    <div>
      <form onSubmit={formik.handleSubmit}>
@@ -294,6 +325,7 @@ const EstimateForm = ({
          onClickAddNewRow={handleClickAddNewRow}
          onClickClearAllLines={handleClearAllLines}
          formik={formik}
+          // defaultRow={defaultEstimate}
        />
        <FormGroup
          label={<T id={'customer_note'} />}
@@ -316,13 +348,14 @@ const EstimateForm = ({
          onDeleteFile={handleDeleteFile}
          hint={'Attachments: Maxiumum size: 20MB'}
        />
-
-        <EstimateFormFooter
-          formik={formik}
-          onSubmitClick={handleSubmitClick}
-          onCancelClick={handleCancelClick}
-        />
      </form>
+      <EstimateFormFooter
+        formik={formik}
+        onSubmitClick={handleSubmitClick}
+        estimate={estimate}
+        onCancelClick={handleCancelClick}
+    
+      />
    </div>
  );
 };
@@ -331,4 +364,5 @@ export default compose(
  withEstimateActions,
  withDashboardActions,
  withMediaActions,
+  withEstimateDetail(),
 )(EstimateForm);
--- a/client/src/containers/Sales/Estimate/EstimateFormFooter.js
+++ b/client/src/containers/Sales/Estimate/EstimateFormFooter.js
@@ -1,16 +1,26 @@
 import React from 'react';
 import { Intent, Button } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
+import { queryCache } from 'react-query';

 export default function EstimateFormFooter({
-  formik: { isSubmitting },
+  formik: { isSubmitting, resetForm },
  onSubmitClick,
  onCancelClick,
+  onClearClick,
+  estimate,
 }) {
  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 });
+        }}
+      >
+        {estimate && estimate.id ? <T id={'edit'} /> : <T id={'save_send'} />}
      </Button>

      <Button
@@ -19,11 +29,20 @@ export default function EstimateFormFooter({
        className={'ml1'}
        name={'save'}
        type="submit"
+        onClick={() => {
+          onSubmitClick({ redirect: false });
+        }}
      >
        <T id={'save'} />
      </Button>

-      <Button className={'ml1'} disabled={isSubmitting}>
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        // onClick={() => {
+        //   onClearClick && onClearClick();
+        // }}
+      >
        <T id={'clear'} />
      </Button>

--- a/client/src/containers/Sales/Estimate/EstimateList.js
+++ b/client/src/containers/Sales/Estimate/EstimateList.js
@@ -1,6 +1,6 @@
-import React, { useEffect, useCallback, useMemo } from 'react';
+import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
-import { useQuery, queryCache } from 'react-query';
+import { useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';

 import AppToaster from 'components/AppToaster';
@@ -8,10 +8,15 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';

-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withEstimateActions from './withEstimateActions';
-
+import EstimatesDataTable from './EstimatesDataTable';
 import EstimateActionsBar from './EstimateActionsBar';
+import EstimateViewTabs from './EstimateViewTabs';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withResourceActions from 'containers/Resources/withResourcesActions';
+import withEstimates from './withEstimates';
+import withEstimateActions from './withEstimateActions';
+import withViewsActions from 'containers/Views/withViewsActions';

 import { compose } from 'utils';

@@ -20,8 +25,12 @@ function EstimateList({
  changePageTitle,

  // #withViewsActions
+  requestFetchResourceViews,
+  requestFetchResourceFields,

  // #withEstimate
+  estimateTableQuery,
+  estimateViews,

  //#withEistimateActions
  requestFetchEstimatesTable,
@@ -33,7 +42,17 @@ function EstimateList({
  const [deleteEstimate, setDeleteEstimate] = useState(false);
  const [selectedRows, setSelectedRows] = useState([]);

-  const fetchEstimate = useQuery(['estimate-table'], () =>
+  const fetchResourceViews = useQuery(
+    ['resource-views', 'sales_estimates'],
+    (key, resourceName) => requestFetchResourceViews(resourceName),
+  );
+
+  const fetchResourceFields = useQuery(
+    ['resource-fields', 'sales_estimates'],
+    (key, resourceName) => requestFetchResourceFields(resourceName),
+  );
+
+  const fetchEstimate = useQuery(['estimates-table', estimateTableQuery], () =>
    requestFetchEstimatesTable(),
  );

@@ -42,7 +61,6 @@ function EstimateList({
  }, [changePageTitle, formatMessage]);

  // handle delete estimate click
-
  const handleDeleteEstimate = useCallback(
    (estimate) => {
      setDeleteEstimate(estimate);
@@ -57,7 +75,7 @@ function EstimateList({

  // handle confirm delete estimate
  const handleConfirmEstimateDelete = useCallback(() => {
-    requestDeleteEstimate(deleteEstimate.id).then((response) => {
+    requestDeleteEstimate(deleteEstimate.id).then(() => {
      AppToaster.show({
        message: formatMessage({
          id: 'the_estimate_has_been_successfully_deleted',
@@ -68,12 +86,25 @@ function EstimateList({
    });
  }, [deleteEstimate, requestDeleteEstimate, formatMessage]);

+  // // Handle filter change to re-fetch data-table.
+  // const handleFilterChanged = useCallback(
+  //   (filterConditions) => {
+  //     addEstimatesTableQueries({
+  //       filter_roles: filterConditions || '',
+  //     });
+  //   },
+  //   [fetchEstimate],
+  // );
+
+  // Handle filter change to re-fetch data-table.
+  const handleFilterChanged = useCallback(() => {}, [fetchEstimate]);
+
  // Calculates the selected rows
  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
    selectedRows,
  ]);

-  const handleEidtEstimate = useCallback(
+  const handleEditEstimate = useCallback(
    (estimate) => {
      history.push(`/estimates/${estimate.id}/edit`);
    },
@@ -97,24 +128,63 @@ function EstimateList({
    [addEstimatesTableQueries],
  );

-  const handleSelectedRowsChange = useCallback((estimate) => {
-    selectedRows(estimate);
-  });
-
+  const handleSelectedRowsChange = useCallback(
+    (estimate) => {
+      setSelectedRows(estimate);
+    },
+    [setSelectedRows],
+  );
  return (
-    <DashboardInsider name={'estimates'}>
+    <DashboardInsider
+      loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
+      name={'sales_estimates'}
+    >
      <EstimateActionsBar
        // onBulkDelete={}
        selectedRows={selectedRows}
-        // onFilterChanged={}
+        onFilterChanged={handleFilterChanged}
      />
      <DashboardPageContent>
        <Switch>
-          <Route></Route>
+          <Route
+            exact={true}
+            path={['/estimates/:custom_view_id/custom_view', '/estimates']}
+          >
+            <EstimateViewTabs />
+            <EstimatesDataTable
+              loading={fetchEstimate.isFetching}
+              onDeleteEstimate={handleDeleteEstimate}
+              onFetchData={handleFetchData}
+              onEditEstimate={handleEditEstimate}
+              onSelectedRowsChange={handleSelectedRowsChange}
+            />
+          </Route>
        </Switch>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'delete'} />}
+          icon={'trash'}
+          intent={Intent.DANGER}
+          isOpen={deleteEstimate}
+          onCancel={handleCancelEstimateDelete}
+          onConfirm={handleConfirmEstimateDelete}
+        >
+          <p>
+            <T id={'once_delete_this_estimate_you_will_able_to_restore_it'} />
+          </p>
+        </Alert>
      </DashboardPageContent>
    </DashboardInsider>
  );
 }

-export default EstimateList;
+export default compose(
+  withResourceActions,
+  withEstimateActions,
+  withDashboardActions,
+  withViewsActions,
+  withEstimates(({ estimateTableQuery, estimateViews }) => ({
+    estimateTableQuery,
+    estimateViews,
+  })),
+)(EstimateList);
--- a/client/src/containers/Sales/Estimate/EstimateViewTabs.js
+++ b/client/src/containers/Sales/Estimate/EstimateViewTabs.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 withEstimates from './withEstimates';
+import withEstimateActions from './withEstimateActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withViewDetails from 'containers/Views/withViewDetails';
+
+import { compose } from 'utils';
+
+function EstimateViewTabs({
+  // #withExpenses
+  estimateViews,
+
+  // #withViewDetails
+  viewItem,
+
+  //#withEstimatesActions
+  addEstimatesTableQueries,
+  changeEstimateView,
+
+  // #withDashboardActions
+  setTopbarEditView,
+  changePageSubtitle,
+  // props
+  customViewChanged,
+  onViewChanged,
+}) {
+  const history = useHistory();
+  const { custom_view_id: customViewId = null } = useParams();
+
+  useEffect(() => {
+    changeEstimateView(customViewId || -1);
+    setTopbarEditView(customViewId);
+    changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
+
+    addEstimatesTableQueries({
+      custom_view_id: customViewId,
+    });
+    return () => {
+      setTopbarEditView(null);
+      changePageSubtitle('');
+      changeEstimateView(null);
+    };
+  }, [customViewId, addEstimatesTableQueries, changeEstimateView]);
+
+  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(`/estimates/${toPath}`);
+    setTopbarEditView(viewId);
+  };
+  const tabs = estimateViews.map((view) => ({
+    ...pick(view, ['name', 'id']),
+  }));
+
+  // Handle click a new view tab.
+  const handleClickNewView = () => {
+    setTopbarEditView(null);
+    history.push('/custom_views/estimates/new');
+  };
+
+  console.log(estimateViews, 'estimateViews');
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          initialViewId={customViewId}
+          baseUrl={'/estimates'}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  viewId: ownProps.match.params.custom_view_id,
+});
+
+const withEstimatesViewTabs = connect(mapStateToProps);
+
+export default compose(
+  withRouter,
+  withEstimatesViewTabs,
+  withEstimateActions,
+  withDashboardActions,
+  withViewDetails(),
+  withEstimates(({ estimateViews }) => ({
+    estimateViews,
+  })),
+)(EstimateViewTabs);
--- a/client/src/containers/Sales/Estimate/Estimates.js
+++ b/client/src/containers/Sales/Estimate/Estimates.js
@@ -11,31 +11,50 @@ import withEstimateActions from './withEstimateActions';

 import { compose } from 'utils';

-function Estimates({ requestFetchCustomers, requestFetchItems }) {
+function Estimates({
+  requestFetchCustomers,
+  requestFetchItems,
+  requsetFetchEstimate,
+}) {
  const history = useHistory();
  const { id } = useParams();

+  const fetchEstimate = useQuery(
+    ['estimate', id],
+    (key, _id) => requsetFetchEstimate(_id),
+    { enabled: !!id },
+  );
+
+  // Handle fetch Items data table or list
+  const fetchItems = useQuery('items-list', () => requestFetchItems({}));
+
  // Handle fetch customers data table or list
  const fetchCustomers = useQuery('customers-table', () =>
    requestFetchCustomers({}),
  );

-  // Handle fetch Items data table or list
-  const fetchItems = useQuery('items-table', () => requestFetchItems({}));
-
-  const handleFormSubmit = useCallback((payload) => {}, [history]);
-
+  const handleFormSubmit = useCallback(
+    (payload) => {
+      payload.redirect && history.push('/estimates');
+    },
+    [history],
+  );
  const handleCancel = useCallback(() => {
    history.goBack();
  }, [history]);

  return (
    <DashboardInsider
-      loading={fetchCustomers.isFetching || fetchItems.isFetching}
+      loading={
+        fetchCustomers.isFetching ||
+        fetchItems.isFetching ||
+        fetchEstimate.isFetching
+      }
+      name={'estimate-form'}
    >
      <EstimateForm
        onFormSubmit={handleFormSubmit}
-        // estimateId={id}
+        estimateId={id}
        onCancelForm={handleCancel}
      />
    </DashboardInsider>
--- a/client/src/containers/Sales/Estimate/EstimatesDataTable.js
+++ b/client/src/containers/Sales/Estimate/EstimatesDataTable.js
@@ -2,36 +2,37 @@ import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import {
  Intent,
  Button,
-  Classes,
  Popover,
-  Tooltip,
  Menu,
  MenuItem,
  MenuDivider,
  Position,
-  Tag,
 } 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 Icon from 'components/Icon';
 import { compose } from 'utils';
 import { useUpdateEffect } from 'hooks';

 import LoadingIndicator from 'components/LoadingIndicator';
-import { If } from 'components';
-import DataTable from 'components/DataTable';
+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 withEstimates from './withEstimates';
 import withEstimateActions from './withEstimateActions';
+import withCurrentView from 'containers/Views/withCurrentView';

 function EstimatesDataTable({
  //#withEitimates
+  estimatesCurrentPage,
+  estimatesLoading,
+  estimatesPageination,
+  estimateItems,

  // #withDashboardActions
  changeCurrentView,
@@ -56,11 +57,11 @@ function EstimatesDataTable({
    setInitialMount(false);
  }, []);

-  // useUpdateEffect(() => {
-  //   if (!estimateLoading) {
-  //     setInitialMount(true);
-  //   }
-  // }, []);
+  useUpdateEffect(() => {
+    if (!estimatesLoading) {
+      setInitialMount(true);
+    }
+  }, [estimatesLoading, setInitialMount]);

  useEffect(() => {
    if (customViewId) {
@@ -77,66 +78,90 @@ function EstimatesDataTable({
  ]);

  const handleEditEstimate = useCallback(
-    (estimate) => {
+    (estimate) => () => {
      onEditEstimate && onEditEstimate(estimate);
    },
    [onEditEstimate],
  );

-  const handleDeleteEstimate = useCallback(() => {
-    onDeleteEstimate && onDeleteEstimate();
-  }, [onDeleteEstimate]);
+  const handleDeleteEstimate = useCallback(
+    (estimate) => () => {
+      onDeleteEstimate && onDeleteEstimate(estimate);
+    },
+    [onDeleteEstimate],
+  );

  const actionMenuList = useCallback(
-    () => (
+    (estimate) => (
      <Menu>
        <MenuItem text={formatMessage({ id: 'view_details' })} />
        <MenuDivider />
        <MenuItem
          text={formatMessage({ id: 'edit_estimate' })}
-          // onClick={handleEditEstimate(estimate)}
+          onClick={handleEditEstimate(estimate)}
        />
        <MenuItem
          text={formatMessage({ id: 'delete_estimate' })}
          intent={Intent.DANGER}
-          // onClick={handleDeleteEstimate(estimate)}
+          onClick={handleDeleteEstimate(estimate)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
        />
      </Menu>
    ),
    [handleDeleteEstimate, handleEditEstimate, formatMessage],
  );

+  const onRowContextMenu = useCallback(
+    (cell) => {
+      return actionMenuList(cell.row.original);
+    },
+    [actionMenuList],
+  );
+
  const columns = useMemo(
    () => [
      {
-        id: '',
-        Header: formatMessage({ id: '' }),
-        accessor: '',
-        className: '',
+        id: 'estimate_date',
+        Header: formatMessage({ id: 'estimate_date' }),
+        accessor: (r) => moment(r.estimate_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'estimate_date',
      },
      {
-        id: '',
-        Header: formatMessage({ id: '' }),
-        accessor: '',
-        className: '',
+        id: 'customer_id',
+        Header: formatMessage({ id: 'customer_name' }),
+        accessor: (row) => row.customer_id,
+        width: 140,
+        className: 'customer_id',
      },
      {
-        id: '',
-        Header: formatMessage({ id: '' }),
-        accessor: '',
-        className: '',
+        id: 'expiration_date',
+        Header: formatMessage({ id: 'expiration_date' }),
+        accessor: (r) => moment(r.expiration_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'expiration_date',
      },
      {
-        id: '',
-        Header: formatMessage({ id: '' }),
-        accessor: '',
-        className: '',
+        id: 'estimate_number',
+        Header: formatMessage({ id: 'estimate_number' }),
+        accessor: (row) => `#${row.estimate_number}`,
+        width: 140,
+        className: 'estimate_number',
      },
      {
-        id: '',
-        Header: formatMessage({ id: '' }),
-        accessor: '',
-        className: '',
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: (r) => <Money amount={r.amount} currency={'USD'} />,
+
+        width: 140,
+        className: 'amount',
+      },
+      {
+        id: 'reference',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference',
+        width: 140,
+        className: 'reference',
      },
      {
        id: 'actions',
@@ -156,10 +181,18 @@ function EstimatesDataTable({
    ],
    [actionMenuList, formatMessage],
  );
+  const selectionColumn = useMemo(
+    () => ({
+      minWidth: 40,
+      width: 40,
+      maxWidth: 40,
+    }),
+    [],
+  );

  const handleDataTableFetchData = useCallback(
-    (...arguments) => {
-      onFetchData && onFetchData(...arguments);
+    (...args) => {
+      onFetchData && onFetchData(...args);
    },
    [onFetchData],
  );
@@ -171,15 +204,27 @@ function EstimatesDataTable({
    },
    [onSelectedRowsChange],
  );
+  console.log(estimatesCurrentPage, 'estimatesCurrentPage');
+  console.log(estimateItems, 'estimateItems');

  return (
    <div>
      <LoadingIndicator loading={loading} mount={false}>
        <DataTable
          columns={columns}
-          data={[]}
+          data={estimatesCurrentPage}
          onFetchData={handleDataTableFetchData}
          manualSortBy={true}
+          selectionColumn={true}
+          noInitialFetch={true}
+          sticky={true}
+          loading={estimatesLoading && !initialMount}
+          onSelectedRowsChange={handleSelectedRowsChange}
+          rowContextMenu={onRowContextMenu}
+          pagination={true}
+          pagesCount={estimatesPageination.pagesCount}
+          initialPageSize={estimatesPageination.pageSize}
+          initialPageIndex={estimatesPageination.page - 1}
        />
      </LoadingIndicator>
    </div>
@@ -188,9 +233,22 @@ function EstimatesDataTable({

 export default compose(
  withRouter,
+  withCurrentView,
  withDialogActions,
  withDashboardActions,
  withEstimateActions,
-  // withEstimates(({}) => ({})),
+  withEstimates(
+    ({
+      estimatesCurrentPage,
+      estimatesLoading,
+      estimatesPageination,
+      estimateItems,
+    }) => ({
+      estimatesCurrentPage,
+      estimatesLoading,
+      estimatesPageination,
+      estimateItems,
+    }),
+  ),
  withViewDetails(),
 )(EstimatesDataTable);
--- a/client/src/containers/Sales/Estimate/withEstimateActions.js
+++ b/client/src/containers/Sales/Estimate/withEstimateActions.js
@@ -11,7 +11,7 @@ import t from 'store/types';
 const mapDipatchToProps = (dispatch) => ({
  requestSubmitEstimate: (form) => dispatch(submitEstimate({ form })),
  requsetFetchEstimate: (id) => dispatch(fetchEstimate({ id })),
-  requestEditEstimate: (id, form) => dispatch(editEstimate({ id, form })),
+  requestEditEstimate: (id, form) => dispatch(editEstimate(id, form)),
  requestFetchEstimatesTable: (query = {}) =>
    dispatch(fetchEstimatesTable({ query: { ...query } })),
  requestDeleteEstimate: (id) => dispatch(deleteEstimate({ id })),
--- a/client/src/containers/Sales/Estimate/withEstimates.js
+++ b/client/src/containers/Sales/Estimate/withEstimates.js
@@ -1,24 +1,25 @@
 import { connect } from 'react-redux';
 import { getResourceViews } from 'store/customViews/customViews.selectors';
 import {
-  getEstimateCurrentPage,
+  getEstimateCurrentPageFactory,
  getEstimatesTableQuery,
  getEstimatesPaginationMetaFactory,
 } from 'store/Estimate/estimates.selectors';

-function withEstimates(mapSate) {
+export default (mapState) => {
+  const getEstimatesItems = getEstimateCurrentPageFactory();
+  const getEstimatesPaginationMeta = getEstimatesPaginationMetaFactory();
  const mapStateToProps = (state, props) => {
    const query = getEstimatesTableQuery(state, props);
    const mapped = {
-      estimateViews: getResourceViews(state, props, 'estimates'),
-      estimateItems: state.estiamte.items,
+      estimatesCurrentPage: getEstimatesItems(state, props, query),
+      estimateViews: getResourceViews(state, props, 'sales_estimates'),
+      estimateItems: state.sales_estimates.items,
      estimateTableQuery: query,
-      estimatesLoading: state.estiamte.loading,
+      estimatesPageination: getEstimatesPaginationMeta(state, props, query),
+      estimatesLoading: state.sales_estimates.loading,
    };
-    return mapSate ? mapSate(mapped, state, props) : mapped;
+    return mapState ? mapState(mapped, state, props) : mapped;
  };
-
  return connect(mapStateToProps);
-}
-
-export default withEstimates;
+};
--- a/client/src/containers/Sales/Invoice/InvoiceActionsBar.js
+++ b/client/src/containers/Sales/Invoice/InvoiceActionsBar.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
 import Icon from 'components/Icon';
 import {
  Button,
@@ -15,49 +15,59 @@ import {

 import classNames from 'classnames';
 import { useRouteMatch, useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';

-import { If } from 'components';
+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 withDialogActions from 'containers/Dialog/withDialogActions';
-import withInvoiceActions from './withInvoices';
+
+import withInvoiceActions from './withInvoiceActions';
+import withInvoices from './withInvoices';

 import { compose } from 'utils';
-import { connect } from 'react-redux';

 function InvoiceActionsBar({
  // #withResourceDetail
  resourceFields,

  //#withInvoice
-  InvoiceViews,
+  invoicesViews,

  // #withInvoiceActions
  addInvoiceTableQueries,

  // #own Porps
  onFilterChanged,
-  selectedRows,
+  selectedRows = [],
 }) {
  const history = useHistory();
+  const { path } = useRouteMatch();
+  const [filterCount, setFilterCount] = useState(0);
+  const { formatMessage } = useIntl();

-  const FilterDropdown = FilterDropdown({
-    initialCondition: {
-      fieldKey: '',
-      compatator: '',
-      value: '',
-    },
-    fields: resourceFields,
-    onFilterChange: (filterConditions) => {
-      addInvoiceTableQueries({
-        filter_roles: filterConditions || '',
-      });
-      onFilterChanged && onFilterChanged(filterConditions);
-    },
-  });
+  const handleClickNewInvoice = useCallback(() => {
+    history.push('/invoices/new');
+  }, [history]);
+
+  // const filterDropdown = FilterDropdown({
+  //   initialCondition: {
+  //     fieldKey: 'reference_no',
+  //     compatator: 'contains',
+  //     value: '',
+  //   },
+  //   fields: resourceFields,
+  //   onFilterChange: (filterConditions) => {
+  //     addInvoiceTableQueries({
+  //       filter_roles: filterConditions || '',
+  //     });
+  //     onFilterChanged && onFilterChanged(filterConditions);
+  //   },
+  // });

  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
    selectedRows,
@@ -66,22 +76,32 @@ function InvoiceActionsBar({
  return (
    <DashboardActionsBar>
      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'sales_invoices'}
+          views={invoicesViews}
+        />
        <NavbarDivider />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon={'plus'} />}
          text={<T id={'new_invoice'} />}
-          onClick={onClickNewInvoice}
+          onClick={handleClickNewInvoice}
        />
        <Popover
          minimal={true}
-          content={FilterDropdown}
+          // content={filterDropdown}
          interactionKind={PopoverInteractionKind.CLICK}
          position={Position.BOTTOM_LEFT}
        >
          <Button
            className={classNames(Classes.MINIMAL)}
-            text={'Filter'}
+            text={
+              filterCount <= 0 ? (
+                <T id={'filter'} />
+              ) : (
+                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+              )
+            }
            icon={<Icon icon={'filter-16'} iconSize={16} />}
          />
        </Popover>
@@ -115,19 +135,17 @@ function InvoiceActionsBar({
 }

 const mapStateToProps = (state, props) => ({
-  resourceName: 'invoice',
+  resourceName: 'sales_invoices',
 });
-
 const withInvoiceActionsBar = connect(mapStateToProps);

 export default compose(
  withInvoiceActionsBar,
-  withDialogActions,
  withResourceDetail(({ resourceFields }) => ({
    resourceFields,
  })),
-  // withInvoices(({ invoiceViews }) => ({
-  //   invoiceViews,
-  // })),
+  withInvoices(({ invoicesViews }) => ({
+    invoicesViews,
+  })),
  withInvoiceActions,
 )(InvoiceActionsBar);
--- a/client/src/containers/Sales/Invoice/InvoiceForm.js
+++ b/client/src/containers/Sales/Invoice/InvoiceForm.js
@@ -10,15 +10,16 @@ import { useFormik } from 'formik';
 import moment from 'moment';
 import { Intent, FormGroup, TextArea, Button } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick, omit } from 'lodash';
+import { pick } from 'lodash';

 import InvoiceFormHeader from './InvoiceFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
 import InvoiceFormFooter from './InvoiceFormFooter';

+import withInvoiceActions from './withInvoiceActions';
+import withInvoiceDetail from './withInvoiceDetail';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
-import withInvoiceActions from './withInvoiceActions';

 import { AppToaster } from 'components';
 import Dragzone from 'components/Dragzone';
@@ -35,7 +36,8 @@ function InvoiceForm({

  //#WithInvoiceActions
  requestSubmitInvoice,
-  
+  requestEditInvoice,
+
  //#withDashboard
  changePageTitle,
  changePageSubtitle,
@@ -44,12 +46,12 @@ function InvoiceForm({
  invoice,

  //#own Props
-  InvoiceId,
+  invoiceId,
  onFormSubmit,
  onCancelForm,
 }) {
  const { formatMessage } = useIntl();
-  const [payload, setPaload] = useState({});
+  const [payload, setPayload] = useState({});

  const {
    setFiles,
@@ -70,7 +72,6 @@ function InvoiceForm({
  const clearSavedMediaIds = () => {
    savedMediaIds.current = [];
  };
-
  useEffect(() => {
    if (invoice && invoice.id) {
      changePageTitle(formatMessage({ id: 'edit_invoice' }));
@@ -115,7 +116,6 @@ function InvoiceForm({
            is: (quantity, rate) => quantity || rate,
            then: Yup.number().required(),
          }),
-        total: Yup.number().nullable(),
        discount: Yup.number().nullable(),
        description: Yup.string().nullable(),
      }),
@@ -134,18 +134,19 @@ function InvoiceForm({
      index: 0,
      item_id: null,
      rate: null,
-      discount: null,
+      discount: 0,
      quantity: null,
      description: '',
    }),
    [],
  );
+
  const defaultInitialValues = useMemo(
    () => ({
      customer_id: '',
      invoice_date: moment(new Date()).format('YYYY-MM-DD'),
      due_date: moment(new Date()).format('YYYY-MM-DD'),
-      status: 'status',
+      status: 'SEND',
      invoice_no: '',
      reference_no: '',
      invoice_message: '',
@@ -161,15 +162,38 @@ function InvoiceForm({
      index: index + 1,
    }));
  };
-
+  // debugger;
  const initialValues = useMemo(
    () => ({
-      ...defaultInitialValues,
-      entries: orderingIndex(defaultInitialValues.entries),
+      ...(invoice
+        ? {
+            ...pick(invoice, Object.keys(defaultInitialValues)),
+            entries: [
+              ...invoice.entries.map((invoice) => ({
+                ...pick(invoice, Object.keys(defaultInvoice)),
+              })),
+              ...repeatValue(
+                defaultInvoice,
+                Math.max(MIN_LINES_NUMBER - invoice.entries.length, 0),
+              ),
+            ],
+          }
+        : {
+            ...defaultInitialValues,
+            entries: orderingIndex(defaultInitialValues.entries),
+          }),
    }),
-    [defaultInvoice, defaultInitialValues, invoice],
+    [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) => ({
@@ -188,52 +212,58 @@ function InvoiceForm({
    },
    onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
      setSubmitting(true);
-      const entries = values.entries.map((item) => omit(item, ['total']));

+      const entries = values.entries.filter(
+        (item) => item.item_id && item.quantity,
+      );
      const form = {
        ...values,
        entries,
      };
-      const saveInvoice = (mediaIds) =>
-        new Promise((resolve, reject) => {
-          const requestForm = { ...form, media_ids: mediaIds };

-          requestSubmitInvoice(requestForm)
-            .then((response) => {
-              AppToaster.show({
-                message: formatMessage(
-                  { id: 'the_invocie_has_been_successfully_created' },
-                  { number: values.invoice_no },
-                ),
-                intent: Intent.SUCCESS,
-              });
-              setSubmitting(false);
-              resetForm();
-              saveInvokeSubmit({ action: 'new', ...payload });
-              clearSavedMediaIds();
-            })
-            .catch((errors) => {
-              setSubmitting(false);
+      const requestForm = { ...form };
+      if (invoice && invoice.id) {
+        requestEditInvoice(invoice.id, requestForm)
+          .then((response) => {
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_invoice_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 saveInvoice(savedMediaIds.current);
-        });
+            setSubmitting(false);
+            saveInvokeSubmit({ action: 'update', ...payload });
+            resetForm();
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      } else {
+        requestSubmitInvoice(requestForm)
+          .then((response) => {
+            AppToaster.show({
+              message: formatMessage(
+                { id: 'the_invocie_has_been_successfully_created' },
+                { number: values.invoice_no },
+              ),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            saveInvokeSubmit({ action: 'new', ...payload });
+            resetForm();
+          })
+          .catch((errors) => {
+            setSubmitting(false);
+          });
+      }
    },
  });
  const handleSubmitClick = useCallback(
    (payload) => {
-      setPaload(payload);
+      setPayload(payload);
      formik.submitForm();
    },
-    [setPaload, formik],
+    [setPayload, formik],
  );

  const handleCancelClick = useCallback(
@@ -243,7 +273,6 @@ function InvoiceForm({
    [onCancelForm],
  );

-  console.log(formik.errors, 'Errors');
  const handleDeleteFile = useCallback(
    (_deletedFiles) => {
      _deletedFiles.forEach((deletedFile) => {
@@ -303,13 +332,13 @@ function InvoiceForm({
          onDeleteFile={handleDeleteFile}
          hint={'Attachments: Maxiumum size: 20MB'}
        />
-
-        <InvoiceFormFooter
-          formik={formik}
-          onSubmitClick={handleSubmitClick}
-          onCancelClick={handleCancelClick}
-        />
      </form>
+      <InvoiceFormFooter
+        formik={formik}
+        onSubmitClick={handleSubmitClick}
+        invoice={invoice}
+        onCancelClick={handleCancelClick}
+      />
    </div>
  );
 }
@@ -318,4 +347,5 @@ export default compose(
  withInvoiceActions,
  withDashboardActions,
  withMediaActions,
+  withInvoiceDetail(),
 )(InvoiceForm);
--- a/client/src/containers/Sales/Invoice/InvoiceFormFooter.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFormFooter.js
@@ -6,11 +6,19 @@ export default function EstimateFormFooter({
  formik: { isSubmitting },
  onSubmitClick,
  onCancelClick,
+  invoice,
 }) {
  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 });
+        }}
+      >
+        {invoice && invoice.id ? <T id={'edit'} /> : <T id={'save_send'} />}
      </Button>

      <Button
@@ -19,6 +27,9 @@ export default function EstimateFormFooter({
        className={'ml1'}
        name={'save'}
        type="submit"
+        onClick={() => {
+          onSubmitClick({ redirect: false });
+        }}
      >
        <T id={'save'} />
      </Button>
--- a/client/src/containers/Sales/Invoice/InvoiceList.js
+++ b/client/src/containers/Sales/Invoice/InvoiceList.js
@@ -8,23 +8,34 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';

-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-// import withInvoiceActions from './withInvoiceActions'
+import InvoicesDataTable from './InvoicesDataTable';
+import InvoiceActionsBar from './InvoiceActionsBar';
+import InvoiceViewTabs from './InvoiceViewTabs';

-// import InvoiceActionsBar from './InvoiceActionsBar';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withResourceActions from 'containers/Resources/withResourcesActions';
+import withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
+import withViewsActions from 'containers/Views/withViewsActions';

 import { compose } from 'utils';
-import InvoiceActionsBar from './InvoiceActionsBar';

 function InvoiceList({
  // #withDashboardActions
  changePageTitle,

  // #withViewsActions
+  requestFetchResourceViews,
+  requestFetchResourceFields,

  //#withInvoice
+  invoicesTableQuery,
+  invoicesViews,

  //#withInvoiceActions
+  requestFetchInvoiceTable,
+  requestDeleteInvoice,
+  addInvoiceTableQueries,
 }) {
  const history = useHistory();
  const { formatMessage } = useIntl();
@@ -35,6 +46,19 @@ function InvoiceList({
    changePageTitle(formatMessage({ id: 'invoice_list' }));
  }, [changePageTitle, formatMessage]);

+  const fetchResourceViews = useQuery(
+    ['resource-views', 'sales_invoices'],
+    (key, resourceName) => requestFetchResourceViews(resourceName),
+  );
+
+  const fetchResourceFields = useQuery(
+    ['resource-fields', 'sales_invoices'],
+    (key, resourceName) => requestFetchResourceFields(resourceName),
+  );
+
+  const fetchInvoices = useQuery(['invoices-table', invoicesTableQuery], () =>
+    requestFetchInvoiceTable(),
+  );
  //handle dalete Invoice
  const handleDeleteInvoice = useCallback(
    (invoice) => {
@@ -59,15 +83,16 @@ function InvoiceList({
      });
      setDeleteInvoice(false);
    });
-  }, [setDeleteInvoice, requestDeleteInvoice]);
+  }, [deleteInvoice, requestDeleteInvoice, formatMessage]);

  const handleEditInvoice = useCallback((invoice) => {
    history.push(`/invoices/${invoice.id}/edit`);
  });

-  const fetchInvoice = useQuery(['invoice-table'], () =>
-    requsetFetchInvoiceTable(),
-  );
+  // Calculates the selected rows count.
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
+    selectedRows,
+  ]);

  const handleFetchData = useCallback(
    ({ pageIndex, pageSize, sortBy }) => {
@@ -86,24 +111,67 @@ function InvoiceList({
    },
    [addInvoiceTableQueries],
  );
-  const handleSelectedRowsChange = useCallback((_invoice) => {
-    selectedRows(_invoice);
-  });

+  // Handle filter change to re-fetch data-table.
+  const handleFilterChanged = useCallback(() => {}, [fetchInvoices]);
+
+  // Handle selected rows change.
+  const handleSelectedRowsChange = useCallback(
+    (_invoices) => {
+      setSelectedRows(_invoices);
+    },
+    [setSelectedRows],
+  );
  return (
-    <DashboardInsider name={'invoices'}>
-      <InvoiceActionsBar 
-      // onBulkDelete={}
-      selectedRows={selectedRows}
-      // onFilterChanged={}
+    <DashboardInsider
+      loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
+      name={'sales_invoices'}
+    >
+      <InvoiceActionsBar
+        // onBulkDelete={}
+        selectedRows={selectedRows}
+        onFilterChanged={handleFilterChanged}
      />
      <DashboardPageContent>
        <Switch>
-          <Route></Route>
+          <Route
+            exact={true}
+            path={['/invoices/:custom_view_id/custom_view', '/invoices']}
+          >
+            <InvoiceViewTabs />
+            <InvoicesDataTable
+              loading={fetchInvoices.isFetching}
+              onDeleteInvoice={handleDeleteInvoice}
+              onFetchData={handleFetchData}
+              onEditInvoice={handleEditInvoice}
+              onSelectedRowsChange={handleSelectedRowsChange}
+            />
+          </Route>
        </Switch>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'delete'} />}
+          icon={'trash'}
+          intent={Intent.DANGER}
+          isOpen={deleteInvoice}
+          onCancel={handleCancelInvoiceDelete}
+          onConfirm={handleConfirmInvoiceDelete}
+        >
+          <p>
+            <T id={'once_delete_this_invoice_you_will_able_to_restore_it'} />
+          </p>
+        </Alert>
      </DashboardPageContent>
    </DashboardInsider>
  );
 }

-export default InvoiceList;
+export default compose(
+  withResourceActions,
+  withInvoiceActions,
+  withDashboardActions,
+  withViewsActions,
+  withInvoices(({ invoicesTableQuery }) => ({
+    invoicesTableQuery,
+  })),
+)(InvoiceList);
--- a/client/src/containers/Sales/Invoice/InvoiceViewTabs.js
+++ b/client/src/containers/Sales/Invoice/InvoiceViewTabs.js
@@ -0,0 +1,113 @@
+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 withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withViewDetails from 'containers/Views/withViewDetails';
+
+import { compose } from 'utils';
+
+function InvoiceViewTabs({
+  //#withInvoices
+  invoicesViews,
+
+  // #withViewDetails
+  viewItem,
+
+  //#withInvoiceActions
+  changeInvoiceView,
+  addInvoiceTableQueries,
+
+  // #withDashboardActions
+  setTopbarEditView,
+  changePageSubtitle,
+
+  // #ownProps
+  customViewChanged,
+  onViewChanged,
+}) {
+  const history = useHistory();
+  const { custom_view_id: customViewId = null } = useParams();
+
+  useEffect(() => {
+    changeInvoiceView(customViewId || -1);
+    setTopbarEditView(customViewId);
+    changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
+
+    addInvoiceTableQueries({
+      custom_view_id: customViewId,
+    });
+    return () => {
+      setTopbarEditView(null);
+      changePageSubtitle('');
+      changeInvoiceView(null);
+    };
+  }, [customViewId, addInvoiceTableQueries, changeInvoiceView]);
+
+  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(`/invoices/${toPath}`);
+    setTopbarEditView(viewId);
+  };
+  const tabs = invoicesViews.map((view) => ({
+    ...pick(view, ['name', 'id']),
+  }));
+
+  // Handle click a new view tab.
+  const handleClickNewView = () => {
+    setTopbarEditView(null);
+    history.push('/custom_views/invoices/new');
+  };
+  console.log(invoicesViews, 'invoicesViews');
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          initialViewId={customViewId}
+          baseUrl={'/invoices'}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  viewId: ownProps.match.params.custom_view_id,
+});
+
+const withInvoicesViewTabs = connect(mapStateToProps);
+
+export default compose(
+  withRouter,
+  withInvoicesViewTabs,
+  withInvoiceActions,
+  withDashboardActions,
+  withViewDetails(),
+  withInvoices(({ invoicesViews }) => ({
+    invoicesViews,
+  })),
+)(InvoiceViewTabs);
--- a/client/src/containers/Sales/Invoice/Invoices.js
+++ b/client/src/containers/Sales/Invoice/Invoices.js
@@ -11,31 +11,50 @@ import withInvoiceActions from './withInvoiceActions';

 import { compose } from 'utils';

-function Invoices({ requestFetchCustomers, requestFetchItems }) {
+function Invoices({
+  requestFetchCustomers,
+  requestFetchItems,
+  requsetFetchInvoice,
+}) {
  const history = useHistory();
  const { id } = useParams();

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

-  const handleFormSubmit = useCallback((payload) => {}, [history]);
-
+  const handleFormSubmit = useCallback(
+    (payload) => {
+      payload.redirect && history.push('/invoices');
+    },
+    [history],
+  );
  // Handle fetch customers data table or list
  const fetchCustomers = useQuery('customers-table', () =>
    requestFetchCustomers({}),
  );

+  const fetchInvoice = useQuery(
+    ['invoice', id],
+    (key, _id) => requsetFetchInvoice(_id),
+    { enabled: !!id },
+  );
+
  const handleCancel = useCallback(() => {
    history.goBack();
  }, [history]);

  return (
    <DashboardInsider
-      loading={fetchCustomers.isFetching || fetchItems.isFetching}
+      loading={
+        fetchCustomers.isFetching ||
+        fetchItems.isFetching ||
+        fetchInvoice.isFetching
+      }
+      name={'invoice-form'}
    >
      <InvoiceForm
        onFormSubmit={handleFormSubmit}
-        // InvoiceId={id}
+        invoiceId={id}
        onCancelForm={handleCancel}
      />
    </DashboardInsider>
--- a/client/src/containers/Sales/Invoice/InvoicesDataTable.js
+++ b/client/src/containers/Sales/Invoice/InvoicesDataTable.js
@@ -4,35 +4,36 @@ import {
  Button,
  Classes,
  Popover,
-  Tooltip,
  Menu,
  MenuItem,
  MenuDivider,
  Position,
-  Tag,
 } 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 Icon from 'components/Icon';
 import { compose } from 'utils';
 import { useUpdateEffect } from 'hooks';

 import LoadingIndicator from 'components/LoadingIndicator';
-import { If } from 'components';
-import DataTable from 'components/DataTable';
+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 witInvoice from './withInvoice';
+import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
+import withCurrentView from 'containers/Views/withCurrentView';

 function InvoicesDataTable({
  //#withInvoices
+  invoicesCurrentPage,
+  invoicesLoading,
+  invoicesPageination,
+  invoicesItems,

  // #withDashboardActions
  changeCurrentView,
@@ -45,8 +46,8 @@ function InvoicesDataTable({
  //#OwnProps
  loading,
  onFetchData,
-  onEditEstimate,
-  onDeleteEstimate,
+  onEditInvoice,
+  onDeleteInvoice,
  onSelectedRowsChange,
 }) {
  const [initialMount, setInitialMount] = useState(false);
@@ -55,79 +56,120 @@ function InvoicesDataTable({

  useEffect(() => {
    setInitialMount(false);
-  }, []);
+  }, [customViewId]);

-  useEffect(() => {
-    if (customViewId) {
-      changeCurrentView(customViewId);
-      setTopbarEditView(customViewId);
+  useUpdateEffect(() => {
+    if (!invoicesLoading) {
+      setInitialMount(true);
    }
-    changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
-  }, [
-    customViewId,
-    changeCurrentView,
-    changePageSubtitle,
-    setTopbarEditView,
-    viewMeta,
-  ]);
+  }, [invoicesLoading, setInitialMount]);
+
+  // useEffect(() => {
+  //   if (customViewId) {
+  //     changeCurrentView(customViewId);
+  //     setTopbarEditView(customViewId);
+  //   }
+  //   changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
+  // }, [
+  //   customViewId,
+  //   changeCurrentView,
+  //   changePageSubtitle,
+  //   setTopbarEditView,
+  //   viewMeta,
+  // ]);

  const handleEditInvoice = useCallback(
-    (_invoice) => {
+    (_invoice) => () => {
      onEditInvoice && onEditInvoice(_invoice);
    },
    [onEditInvoice],
  );

-  const handleDeleteInvoice = useCallback(() => {
-    onDeleteInvoice && onDeleteInvoice();
-  }, [onDeleteInvoice]);
+  const handleDeleteInvoice = useCallback(
+    (_invoice) => () => {
+      onDeleteInvoice && onDeleteInvoice(_invoice);
+    },
+    [onDeleteInvoice],
+  );

-  const actionsMenuList = useCallback(
-    (invoice) => {
+  const actionMenuList = useCallback(
+    (invoice) => (
      <Menu>
        <MenuItem text={formatMessage({ id: 'view_details' })} />
        <MenuDivider />
-
        <MenuItem
          text={formatMessage({ id: 'edit_invoice' })}
-          // onClick={handleEditInvoice(invoice)}
+          onClick={handleEditInvoice(invoice)}
        />
-      </Menu>;
-    },
+        <MenuItem
+          text={formatMessage({ id: 'delete_invoice' })}
+          intent={Intent.DANGER}
+          onClick={handleDeleteInvoice(invoice)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Menu>
+    ),
    [handleDeleteInvoice, handleEditInvoice, formatMessage],
  );

+  const onRowContextMenu = useCallback(
+    (cell) => {
+      return actionMenuList(cell.row.original);
+    },
+    [actionMenuList],
+  );
+
  const columns = useMemo(
    () => [
      {
-        id: '',
-        Header: formatMessage({ id: '' }),
-        accessor: '',
-        className: '',
+        id: 'invoice_date',
+        Header: formatMessage({ id: 'invoice_date' }),
+        accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'invoice_date',
      },
      {
-        id: '',
-        Header: formatMessage({ id: '' }),
-        accessor: '',
-        className: '',
+        id: 'customer_id',
+        Header: formatMessage({ id: 'customer_name' }),
+        accessor: (row) => row.customer_id,
+        width: 140,
+        className: 'customer_id',
      },
      {
-        id: '',
-        Header: formatMessage({ id: '' }),
-        accessor: '',
-        className: '',
+        id: 'invoice_no',
+        Header: formatMessage({ id: 'invoice_no__' }),
+        accessor: (row) => `#${row.invoice_no}`,
+        width: 140,
+        className: 'invoice_no',
+      },
+
+      {
+        id: 'due_date',
+        Header: formatMessage({ id: 'due_date' }),
+        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'due_date',
      },
      {
-        id: '',
-        Header: formatMessage({ id: '' }),
-        accessor: '',
-        className: '',
+        id: 'balance',
+        Header: formatMessage({ id: 'balance' }),
+        accessor: (r) => <Money amount={r.balance} currency={'USD'} />,
+        width: 140,
+        className: 'balance',
      },
      {
-        id: '',
-        Header: formatMessage({ id: '' }),
-        accessor: '',
-        className: '',
+        id: 'reference_no',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference_no',
+        width: 140,
+        className: 'reference_no',
+      },
+      {
+        id: 'status',
+        Header: formatMessage({ id: 'status' }),
+        accessor: 'status',
+        width: 140,
+        className: 'status',
      },
      {
        id: 'actions',
@@ -149,12 +191,11 @@ function InvoicesDataTable({
  );

  const handleDataTableFetchData = useCallback(
-    (...arguments) => {
-      onFetchData && onFetchData(...arguments);
+    (...args) => {
+      onFetchData && onFetchData(...args);
    },
    [onFetchData],
  );
-
  const handleSelectedRowsChange = useCallback(
    (selectedRows) => {
      onSelectedRowsChange &&
@@ -163,14 +204,33 @@ function InvoicesDataTable({
    [onSelectedRowsChange],
  );

+  const selectionColumn = useMemo(
+    () => ({
+      minWidth: 40,
+      width: 40,
+      maxWidth: 40,
+    }),
+    [],
+  );
+
  return (
    <div>
-      <LoadingIndicator>
+      <LoadingIndicator loading={loading} mount={false}>
        <DataTable
          columns={columns}
-          data={[]}
+          data={invoicesCurrentPage}
          onFetchData={handleDataTableFetchData}
          manualSortBy={true}
+          selectionColumn={true}
+          noInitialFetch={true}
+          sticky={true}
+          loading={invoicesLoading && !initialMount}
+          onSelectedRowsChange={handleSelectedRowsChange}
+          rowContextMenu={onRowContextMenu}
+          pagination={true}
+          pagesCount={invoicesPageination.pagesCount}
+          initialPageSize={invoicesPageination.pageSize}
+          initialPageIndex={invoicesPageination.page - 1}
        />
      </LoadingIndicator>
    </div>
@@ -179,11 +239,16 @@ function InvoicesDataTable({

 export default compose(
  withRouter,
+  withCurrentView,
  withDialogActions,
  withDashboardActions,
  withInvoiceActions,
-  // withInvoices(({})=>({
-
-  // }))
+  withInvoices(
+    ({ invoicesCurrentPage, invoicesLoading, invoicesPageination }) => ({
+      invoicesCurrentPage,
+      invoicesLoading,
+      invoicesPageination,
+    }),
+  ),
  withViewDetails(),
 )(InvoicesDataTable);
--- a/client/src/containers/Sales/Invoice/withInvoiceActions.js
+++ b/client/src/containers/Sales/Invoice/withInvoiceActions.js
@@ -11,14 +11,14 @@ 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 })),

  changeInvoiceView: (id) =>
    dispatch({
-      type: t.INVOICES_SET_CURREMT_VIEW,
+      type: t.INVOICES_SET_CURRENT_VIEW,
      currentViewId: parseInt(id, 10),
    }),
  addInvoiceTableQueries: (_queries) =>
--- a/client/src/containers/Sales/Invoice/withInvoiceDetail.js
+++ b/client/src/containers/Sales/Invoice/withInvoiceDetail.js
@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { getInvoiceById } from 'store/Invoice/invoices.selector';
+import { getInvoiecsByIdFactory } from 'store/Invoice/invoices.selector';

 export default () => {
-  const getInvoiceById = getInvoiceById();
-
+  const getInvoiceById = getInvoiecsByIdFactory();
+  
  const mapStateToProps = (state, props) => ({
    invoice: getInvoiceById(state, props),
  });
--- a/client/src/containers/Sales/Invoice/withInvoices.js
+++ b/client/src/containers/Sales/Invoice/withInvoices.js
@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+import {
+  getInvoiceCurrentPageFactory,
+  getInvoicePaginationMetaFactory,
+  getInvoiceTableQuery,
+} from 'store/Invoice/invoices.selector';
+
+export default (mapState) => {
+  const getInvoicesItems = getInvoiceCurrentPageFactory();
+  const getInvoicesPaginationMeta = getInvoicePaginationMetaFactory();
+  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,
+      invoicesTableQuery: query,
+      invoicesPageination: getInvoicesPaginationMeta(state, props, query),
+      invoicesLoading: state.sales_invoices.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
--- a/client/src/containers/Sales/Receipt/ReceiptActionsBar.js
+++ b/client/src/containers/Sales/Receipt/ReceiptActionsBar.js
@@ -0,0 +1,149 @@
+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 { If, DashboardActionViewsList } from 'components';
+import FilterDropdown from 'components/FilterDropdown';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import withResourceDetail from 'containers/Resources/withResourceDetails';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withReceiptActions from './withReceipActions';
+import withReceipts from './withReceipts';
+
+import { compose } from 'utils';
+
+function ReceiptActionsBar({
+  // #withResourceDetail
+  resourceFields,
+
+  //#withReceipts
+  receiptview,
+  //#withReceiptActions
+  addReceiptsTableQueries,
+
+  //#OWn Props
+  onFilterChanged,
+  selectedRows = [],
+}) {
+  const { path } = useRouteMatch();
+  const history = useHistory();
+  const [filterCount, setFilterCount] = useState(0);
+  const { formatMessage } = useIntl();
+
+  const onClickNewReceipt = useCallback(() => {
+    history.push('/receipts/new');
+  }, [history]);
+
+  // const filterDropdown = FilterDropdown({
+  //   initialCondition: {
+  //     fieldKey: '',
+  //     compatator: '',
+  //     value: '',
+  //   },
+  //   fields: resourceFields,
+  //   onFilterChange: (filterConditions) => {
+  //     addReceiptsTableQueries({
+  //       filter_roles: filterConditions || '',
+  //     });
+  //     onFilterChanged && onFilterChange(filterConditions);
+  //   },
+  // });
+
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'sales_receipts'}
+          views={receiptview}
+        />
+
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_receipt'} />}
+          onClick={onClickNewReceipt}
+        />
+        <Popover
+          minimal={true}
+          // content={filterDropdown}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            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}
+          />
+        </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: 'sales_receipts',
+});
+
+const withReceiptActionsBar = connect(mapStateToProps);
+
+export default compose(
+  withReceiptActionsBar,
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })),
+  withReceipts(({ receiptview }) => ({
+    receiptview,
+  })),
+  withReceiptActions,
+)(ReceiptActionsBar);
--- a/client/src/containers/Sales/Receipt/ReceiptForm.js
+++ b/client/src/containers/Sales/Receipt/ReceiptForm.js
@@ -5,11 +5,11 @@ import React, {
  useRef,
  useState,
 } from 'react';
+
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import moment from 'moment';
 import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
-
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';

@@ -17,9 +17,10 @@ import ReceiptFromHeader from './ReceiptFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
 import ReceiptFormFooter from './ReceiptFormFooter';

+import withReceipActions from './withReceipActions';
+import withReceiptDetail from './withReceiptDetail';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
-import withReceipActions from './withReceipActions';

 import { AppToaster } from 'components';
 import Dragzone from 'components/Dragzone';
@@ -36,21 +37,22 @@ function ReceiptForm({

  //#withReceiptActions
  requestSubmitReceipt,
+  requestEditReceipt,
+
+  //#withReceiptDetail
+  receipt,

  //#withDashboard
  changePageTitle,
  changePageSubtitle,

-  //#withReceiptDetail
-  receipt,
-
  //#own Props
  receiptId,
  onFormSubmit,
  onCancelForm,
 }) {
  const { formatMessage } = useIntl();
-  const [payload, setPaload] = useState({});
+  const [payload, setPayload] = useState({});

  const {
    setFiles,
@@ -87,9 +89,9 @@ function ReceiptForm({
    receipt_date: Yup.date()
      .required()
      .label(formatMessage({ id: 'receipt_date_' })),
-    receipt_no: Yup.number()
-      .required()
-      .label(formatMessage({ id: 'receipt_no_' })),
+    // receipt_no: Yup.number()
+    //   .required()
+    //   .label(formatMessage({ id: 'receipt_no_' })),
    deposit_account_id: Yup.number()
      .required()
      .label(formatMessage({ id: 'deposit_account_' })),
@@ -99,7 +101,7 @@ function ReceiptForm({
      .min(1)
      .max(1024)
      .label(formatMessage({ id: 'receipt_message_' })),
-    send_to_email: Yup.string().email(),
+    email_send_to: Yup.string().email().nullable(),
    statement: Yup.string()
      .trim()
      .min(1)
@@ -121,7 +123,7 @@ function ReceiptForm({
      }),
    ),
  });
-  const saveReceiptSubmit = useCallback(
+  const saveInvokeSubmit = useCallback(
    (payload) => {
      onFormSubmit && onFormSubmit(payload);
    },
@@ -133,7 +135,7 @@ function ReceiptForm({
      index: 0,
      item_id: null,
      rate: null,
-      discount: null,
+      discount: 0,
      quantity: null,
      description: '',
    }),
@@ -145,7 +147,7 @@ function ReceiptForm({
      customer_id: '',
      deposit_account_id: '',
      receipt_date: moment(new Date()).format('YYYY-MM-DD'),
-      send_to_email: '',
+      email_send_to: '',
      reference_no: '',
      receipt_message: '',
      statement: '',
@@ -163,10 +165,25 @@ function ReceiptForm({

  const initialValues = useMemo(
    () => ({
-      ...defaultInitialValues,
-      entries: orderingIndex(defaultInitialValues.entries),
+      ...(receipt
+        ? {
+            ...pick(receipt, Object.keys(defaultInitialValues)),
+            entries: [
+              ...receipt.entries.map((receipt) => ({
+                ...pick(receipt, Object.keys(defaultReceipt)),
+              })),
+              ...repeatValue(
+                defaultReceipt,
+                Math.max(MIN_LINES_NUMBER - receipt.entries.length, 0),
+              ),
+            ],
+          }
+        : {
+            ...defaultInitialValues,
+            entries: orderingIndex(defaultInitialValues.entries),
+          }),
    }),
-    [defaultReceipt, defaultInitialValues, receipt],
+    [receipt, defaultInitialValues, defaultReceipt],
  );

  const initialAttachmentFiles = useMemo(() => {
@@ -186,49 +203,45 @@ function ReceiptForm({
      ...initialValues,
    },
    onSubmit: async (values, { setErrors, setSubmitting, resetForm }) => {
-      const entries = values.entries.map(
-        ({ item_id, quantity, rate, description }) => ({
-          item_id,
-          quantity,
-          rate,
-          description,
-        }),
+      const entries = values.entries.filter(
+        (item) => item.item_id && item.quantity,
      );
      const form = {
        ...values,
        entries,
      };

-      const saveReceipt = (mediaIds) =>
-        new Promise((resolve, reject) => {
-          const requestForm = { ...form, media_ids: mediaIds };
+      const requestForm = { ...form };

-          requestSubmitReceipt(requestForm)
-            .then((resposne) => {
-              AppToaster.show({
-                message: formatMessage({
-                  id: 'the_receipt_has_been_successfully_created',
-                }),
-                intent: Intent.SUCCESS,
-              });
-              setSubmitting(false);
-              resetForm();
-              saveReceiptSubmit({ action: 'new', ...payload });
-              clearSavedMediaIds();
-            })
-            .catch((errors) => {
-              setSubmitting(false);
+      if (receipt && receipt.id) {
+        requestEditReceipt(receipt.id && requestForm).then(() => {
+          AppToaster.show({
+            message: formatMessage({
+              id: 'the_receipt_has_been_successfully_edited',
+            }),
+            intent: Intent.SUCCESS,
+          });
+          setSubmitting(false);
+          saveInvokeSubmit({ action: 'update', ...payload });
+          resetForm();
+        });
+      } else {
+        requestSubmitReceipt(requestForm)
+          .then((response) => {
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_receipt_has_been_successfully_created',
+              }),
+              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 saveReceipt(saveReceipt.current);
-        });
+            setSubmitting(false);
+            saveInvokeSubmit({ action: 'new', ...payload });
+            resetForm();
+          })
+          .catch((errors) => {
+            setSubmitting(false);
+          });
+      }
    },
  });

@@ -245,10 +258,10 @@ function ReceiptForm({

  const handleSubmitClick = useCallback(
    (payload) => {
-      setPaload(payload);
+      setPayload(payload);
      formik.submitForm();
    },
-    [setPaload, formik],
+    [setPayload, formik],
  );

  const handleCancelClick = useCallback(
@@ -308,12 +321,13 @@ function ReceiptForm({
          onDeleteFile={handleDeleteFile}
          hint={'Attachments: Maxiumum size: 20MB'}
        />
-        <ReceiptFormFooter
-          formik={formik}
-          onSubmit={handleSubmitClick}
-          onCancelForm={handleCancelClick}
-        />
      </form>
+      <ReceiptFormFooter
+        formik={formik}
+        onSubmitClick={handleSubmitClick}
+        receipt={receipt}
+        onCancelForm={handleCancelClick}
+      />
    </div>
  );
 }
@@ -322,4 +336,5 @@ export default compose(
  withReceipActions,
  withDashboardActions,
  withMediaActions,
+  withReceiptDetail(),
 )(ReceiptForm);
--- a/client/src/containers/Sales/Receipt/ReceiptFormFooter.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormFooter.js
@@ -6,11 +6,19 @@ export default function ReceiptFormFooter({
  formik: { isSubmitting },
  onSubmitClick,
  onCancelClick,
+  receipt,
 }) {
  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 });
+        }}
+      >
+        {receipt && receipt.id ? <T id={'edit'} /> : <T id={'save_send'} />}
      </Button>

      <Button
@@ -19,6 +27,9 @@ export default function ReceiptFormFooter({
        className={'ml1'}
        name={'save'}
        type="submit"
+        onClick={() => {
+          onSubmitClick({ redirect: false });
+        }}
      >
        <T id={'save'} />
      </Button>
--- a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
@@ -157,7 +157,7 @@ function ReceiptFormHeader({
        </FormGroup>
      </div>
      {/* receipt_no */}
-      <FormGroup
+      {/* <FormGroup
        label={<T id={'receipt'} />}
        inline={true}
        className={('form-group--receipt_no', Classes.FILL)}
@@ -170,7 +170,7 @@ function ReceiptFormHeader({
          minimal={true}
          {...getFieldProps('receipt_no')}
        />
-      </FormGroup>
+      </FormGroup> */}

      <FormGroup
        label={<T id={'reference'} />}
@@ -189,12 +189,12 @@ function ReceiptFormHeader({
        label={<T id={'send_to_email'} />}
        inline={true}
        className={classNames('form-group--send_to_email', Classes.FILL)}
-        intent={errors.send_to_email && touched.send_to_email && Intent.DANGER}
+        intent={errors.email_send_to && touched.email_send_to && Intent.DANGER}
        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
      >
        <InputGroup
          intent={
-            errors.send_to_email && touched.send_to_email && Intent.DANGER
+            errors.email_send_to && touched.email_send_to && Intent.DANGER
          }
          minimal={true}
          {...getFieldProps('send_to_email')}
--- a/client/src/containers/Sales/Receipt/ReceiptList.js
+++ b/client/src/containers/Sales/Receipt/ReceiptList.js
@@ -0,0 +1,191 @@
+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 ReceiptsDataTable from './ReceiptsDataTable';
+import ReceiptActionsBar from './ReceiptActionsBar';
+import ReceiptViewTabs from './ReceiptViewTabs';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withResourceActions from 'containers/Resources/withResourcesActions';
+import withReceipts from './withReceipts';
+import withReceipActions from './withReceipActions';
+import withViewsActions from 'containers/Views/withViewsActions';
+
+import { compose } from 'utils';
+
+function ReceiptList({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withViewsActions
+  requestFetchResourceViews,
+  requestFetchResourceFields,
+
+  //#withReceipts
+  receiptTableQuery,
+  receiptview,
+
+  //#withReceiptActions
+  requestFetchReceiptsTable,
+  requestDeleteReceipt,
+  addReceiptsTableQueries,
+}) {
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+  const [deleteReceipt, setDeleteReceipt] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  const fetchReceipts = useQuery(['receipts-table', receiptTableQuery], () =>
+    requestFetchReceiptsTable(),
+  );
+
+  const fetchResourceViews = useQuery(
+    ['resource-views', 'sales_receipts'],
+    (key, resourceName) => requestFetchResourceViews(resourceName),
+  );
+
+  const fetchResourceFields = useQuery(
+    ['resource-fields', 'sales_receipts'],
+    (key, resourceName) => requestFetchResourceFields(resourceName),
+  );
+
+  useEffect(() => {
+    changePageTitle(formatMessage({ id: 'receipt_list' }));
+  }, [changePageTitle, formatMessage]);
+
+  // handle delete receipt click
+  const handleDeleteReceipt = useCallback(
+    (_receipt) => {
+      setDeleteReceipt(_receipt);
+    },
+    [setDeleteReceipt],
+  );
+
+  // handle cancel receipt
+  const handleCancelReceiptDelete = useCallback(() => {
+    setDeleteReceipt(false);
+  }, [setDeleteReceipt]);
+
+  // handle confirm delete receipt
+  const handleConfirmReceiptDelete = useCallback(() => {
+    requestDeleteReceipt(deleteReceipt.id).then(() => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_receipt_has_been_successfully_deleted',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      setDeleteReceipt(false);
+    });
+  }, [deleteReceipt, requestDeleteReceipt, formatMessage]);
+
+  // Handle filter change to re-fetch data-table.
+  // const handleFilterChanged = useCallback(
+  //   (filterConditions) => {
+  //     addReceiptsTableQueries({
+  //       filter_roles: filterConditions || '',
+  //     });
+  //   },
+  //   [fetchReceipt],
+  // );
+
+    // Handle filter change to re-fetch data-table.
+    const handleFilterChanged = useCallback(() => {}, [fetchReceipts]);
+
+
+
+  // Calculates the selected rows
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
+    selectedRows,
+  ]);
+
+  const handleEditReceipt = useCallback(
+    (receipt) => {
+      history.push(`/receipts/${receipt.id}/edit`);
+    },
+    [history],
+  );
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      const page = pageIndex + 1;
+
+      addReceiptsTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page,
+      });
+    },
+    [addReceiptsTableQueries],
+  );
+
+  const handleSelectedRowsChange = useCallback(
+    (estimate) => {
+      setSelectedRows(estimate);
+    },
+    [setSelectedRows],
+  );
+
+  return (
+    <DashboardInsider
+      name={'sales_receipts'}
+      loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
+    >
+      <DashboardPageContent>
+        <ReceiptActionsBar
+          selectedRows={selectedRows}
+          onFilterChanged={handleFilterChanged}
+        />
+        <Switch>
+          <Route
+            exact={true}
+            path={['/receipts/:custom_view_id/custom_view', '/receipts']}
+          >
+            <ReceiptViewTabs />
+            <ReceiptsDataTable
+              loading={fetchReceipts.isLoading}
+              onDeleteReceipt={handleDeleteReceipt}
+              onFetchData={handleFetchData}
+              onEditReceipt={handleEditReceipt}
+              onSelectedRowsChange={handleSelectedRowsChange}
+            />
+          </Route>
+        </Switch>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'delete'} />}
+          icon={'trash'}
+          intent={Intent.DANGER}
+          isOpen={deleteReceipt}
+          onCancel={handleCancelReceiptDelete}
+          onConfirm={handleConfirmReceiptDelete}
+        >
+          <p>
+            <T id={'once_delete_this_receipt_you_will_able_to_restore_it'} />
+          </p>
+        </Alert>
+      </DashboardPageContent>
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withResourceActions,
+  withReceipActions,
+  withDashboardActions,
+  withViewsActions,
+  withReceipts(({ receiptTableQuery }) => ({
+    receiptTableQuery,
+  })),
+)(ReceiptList);
--- a/client/src/containers/Sales/Receipt/ReceiptViewTabs.js
+++ b/client/src/containers/Sales/Receipt/ReceiptViewTabs.js
@@ -0,0 +1,109 @@
+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 withReceipts from './withReceipts';
+import withReceiptActions from './withReceipActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withViewDetails from 'containers/Views/withViewDetails';
+
+import { compose } from 'utils';
+
+function ReceiptViewTabs({
+  //#withReceipts
+  receiptview,
+  // #withViewDetails
+  viewItem,
+
+  //#withReceiptActions
+  changeReceiptView,
+  addReceiptsTableQueries,
+
+  // #withDashboardActions
+  setTopbarEditView,
+  changePageSubtitle,
+
+  //# own Props
+  customViewChanged,
+  onViewChanged,
+}) {
+  const history = useHistory();
+  const { custom_view_id: customViewId = null } = useParams();
+
+  useEffect(() => {
+    changeReceiptView(customViewId || -1);
+    setTopbarEditView(customViewId);
+    changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
+
+    addReceiptsTableQueries({
+      custom_view_id: customViewId,
+    });
+    return () => {
+      setTopbarEditView(null);
+      changePageSubtitle('');
+      changeReceiptView(null);
+    };
+  }, [customViewId, addReceiptsTableQueries, changeReceiptView]);
+
+  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(`/receipts/${toPath}`);
+    setTopbarEditView(viewId);
+  };
+  const tabs = receiptview.map((view) => ({
+    ...pick(view, ['name', 'id']),
+  }));
+
+  // Handle click a new view tab.
+  const handleClickNewView = () => {
+    setTopbarEditView(null);
+    history.push('/custom_views/receipts/new');
+  };
+
+  console.log(receiptview, 'receiptview');
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          initialViewId={customViewId}
+          baseUrl={'/receipts'}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  viewId: ownProps.match.params.custom_view_id,
+});
+
+const withReceiptsViewTabs = connect(mapStateToProps);
+
+export default compose(
+  withRouter,
+  withReceiptsViewTabs,
+  withReceiptActions,
+  withDashboardActions,
+  withViewDetails(),
+  withReceipts(({ receiptview }) => ({ receiptview })),
+)(ReceiptViewTabs);
--- a/client/src/containers/Sales/Receipt/Receipts.js
+++ b/client/src/containers/Sales/Receipt/Receipts.js
@@ -8,6 +8,7 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withItemsActions from 'containers/Items/withItemsActions';
+import withReceipActions from './withReceipActions';

 import { compose } from 'utils';

@@ -20,10 +21,18 @@ function Receipts({

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

+  const fetchReceipt = useQuery(
+    ['receipt', id],
+    (key, _id) => requsetFetchInvoice(_id),
+    { enabled: !!id },
+  );
  const fetchAccounts = useQuery('accounts-list', (key) =>
    requestFetchAccounts(),
  );
@@ -35,7 +44,12 @@ function Receipts({
  // Handle fetch Items data table or list
  const fetchItems = useQuery('items-table', () => requestFetchItems({}));

-  const handleFormSubmit = useCallback((payload) => {}, [history]);
+  const handleFormSubmit = useCallback(
+    (payload) => {
+      payload.redirect && history.push('/receipts');
+    },
+    [history],
+  );

  const handleCancel = useCallback(() => {
    history.goBack();
@@ -46,12 +60,14 @@ function Receipts({
      loading={
        fetchCustomers.isFetching ||
        fetchItems.isFetching ||
-        fetchAccounts.isFetching
+        fetchAccounts.isFetching||
+        fetchReceipt.isFetching
      }
+      name={'receipt-form'}
    >
      <ReceiptFrom
        onFormSubmit={handleFormSubmit}
-        // ReceiptId={id}
+        receiptId={id}
        onCancelForm={handleCancel}
      />
    </DashboardInsider>
@@ -59,6 +75,7 @@ function Receipts({
 }

 export default compose(
+  withReceipActions,
  withCustomersActions,
  withItemsActions,
  withAccountsActions,
--- a/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
+++ b/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
@@ -0,0 +1,247 @@
+import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import {
+  Intent,
+  Button,
+  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 withReceipts from './withReceipts';
+import withReceipActions from './withReceipActions';
+import withCurrentView from 'containers/Views/withCurrentView';
+
+function ReceiptsDataTable({
+  //#withReceipts
+  receiptsCurrentPage,
+  receiptsLoading,
+  receiptsPagination,
+  receiptItems,
+  // #withDashboardActions
+  changeCurrentView,
+  changePageSubtitle,
+  setTopbarEditView,
+
+  // #withView
+  viewMeta,
+
+  // #Own Props
+
+  loading,
+  onFetchData,
+  onEditReceipt,
+  onDeleteReceipt,
+  onSelectedRowsChange,
+}) {
+  const [initialMount, setInitialMount] = useState(false);
+  const { custom_view_id: customViewId } = useParams();
+  const { formatMessage } = useIntl();
+
+  useUpdateEffect(() => {
+    if (!receiptsLoading) {
+      setInitialMount(true);
+    }
+  }, [receiptsLoading, setInitialMount]);
+
+  useEffect(() => {
+    setInitialMount(false);
+  }, []);
+
+  useEffect(() => {
+    if (customViewId) {
+      changeCurrentView(customViewId);
+      setTopbarEditView(customViewId);
+    }
+    changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
+  }, [
+    customViewId,
+    changeCurrentView,
+    changePageSubtitle,
+    setTopbarEditView,
+    viewMeta,
+  ]);
+
+  const handleEditReceipt = useCallback(
+    (receipt) => () => {
+      onEditReceipt && onEditReceipt(receipt);
+    },
+    [onEditReceipt],
+  );
+
+  const handleDeleteReceipt = useCallback(
+    (receipt) => () => {
+      onDeleteReceipt && onDeleteReceipt(receipt);
+    },
+    [onDeleteReceipt],
+  );
+
+  const actionMenuList = useCallback(
+    (estimate) => (
+      <Menu>
+        <MenuItem text={formatMessage({ id: 'view_details' })} />
+        <MenuDivider />
+        <MenuItem
+          text={formatMessage({ id: 'edit_receipt' })}
+          onClick={handleEditReceipt(estimate)}
+        />
+        <MenuItem
+          text={formatMessage({ id: 'delete_receipt' })}
+          intent={Intent.DANGER}
+          onClick={handleDeleteReceipt(estimate)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Menu>
+    ),
+    [handleDeleteReceipt, handleEditReceipt, formatMessage],
+  );
+
+  const onRowContextMenu = useCallback(
+    (cell) => {
+      return actionMenuList(cell.row.original);
+    },
+    [actionMenuList],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'receipt_date',
+        Header: formatMessage({ id: 'receipt_date' }),
+        accessor: (r) => moment(r.receipt_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'receipt_date',
+      },
+      {
+        id: 'customer_id',
+        Header: formatMessage({ id: 'customer_name' }),
+        accessor: (row) => row.customer_id,
+        width: 140,
+        className: 'customer_id',
+      },
+      {
+        id: 'deposit_account_id',
+        Header: formatMessage({ id: 'deposit_account' }),
+        accessor: 'deposit_account.name',
+        width: 140,
+        className: 'deposit_account',
+      },
+      {
+        id: 'email_send_to',
+        Header: formatMessage({ id: 'email' }),
+        accessor: 'email_send_to',
+        width: 140,
+        className: 'email_send_to',
+      },
+      {
+        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: '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],
+  );
+
+  console.log(receiptsCurrentPage, 'receiptCurrnetPage');
+  console.log(receiptItems, 'receiptItems');
+
+  return (
+    <div>
+      <LoadingIndicator loading={loading} mount={false}>
+        <DataTable
+          columns={columns}
+          data={receiptsCurrentPage}
+          loading={receiptsLoading && !initialMount}
+          onFetchData={handleDataTableFetchData}
+          manualSortBy={true}
+          selectionColumn={true}
+          noInitialFetch={true}
+          sticky={true}
+          onSelectedRowsChange={handleSelectedRowsChange}
+          rowContextMenu={onRowContextMenu}
+          pagination={true}
+          pagesCount={receiptsPagination.pagesCount}
+          initialPageSize={receiptsPagination.pageSize}
+          initialPageIndex={receiptsPagination.page - 1}
+        />
+      </LoadingIndicator>
+    </div>
+  );
+}
+
+export default compose(
+  withRouter,
+  withCurrentView,
+  withDialogActions,
+  withDashboardActions,
+  withReceipActions,
+  withReceipts(
+    ({
+      receiptsCurrentPage,
+      receiptsLoading,
+      receiptsPagination,
+      receiptItems,
+    }) => ({
+      receiptsCurrentPage,
+      receiptsLoading,
+      receiptsPagination,
+      receiptItems,
+    }),
+  ),
+  withViewDetails(),
+)(ReceiptsDataTable);
--- a/client/src/containers/Sales/Receipt/withReceipActions.js
+++ b/client/src/containers/Sales/Receipt/withReceipActions.js
@@ -11,7 +11,7 @@ import t from 'store/types';
 const mapDispatchToProps = (dispatch) => ({
  requestSubmitReceipt: (form) => dispatch(submitReceipt({ form })),
  requestFetchReceipt: (id) => dispatch(fetchReceipt({ id })),
-  requestEditTeceipt: (id, form) => dispatch(editReceipt({ id, form })),
+  requestEditReceipt: (id, form) => dispatch(editReceipt( id, form )),
  requestDeleteReceipt: (id) => dispatch(deleteReceipt({ id })),
  requestFetchReceiptsTable: (query = {}) =>
    dispatch(fetchReceiptsTable({ query: { ...query } })),
@@ -19,7 +19,7 @@ const mapDispatchToProps = (dispatch) => ({

  changeReceiptView: (id) =>
    dispatch({
-      type: t.RECEIPT_SET_CURRENT_VIEW,
+      type: t.RECEIPTS_SET_CURRENT_VIEW,
      currentViewId: parseInt(id, 10),
    }),

--- a/client/src/containers/Sales/Receipt/withReceiptDetail.js
+++ b/client/src/containers/Sales/Receipt/withReceiptDetail.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { getReceiptByIdFactory } from 'store/receipt/receipt.selector';
+
+export default () => {
+  const getReceiptById = getReceiptByIdFactory();
+
+  const mapStateToProps = (state, props) => ({
+    receipt: getReceiptById(state, props),
+  });
+  return connect(mapStateToProps);
+};
--- a/client/src/containers/Sales/Receipt/withReceipts.js
+++ b/client/src/containers/Sales/Receipt/withReceipts.js
@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+import {
+  getReceiptCurrentPageFactory,
+  getReceiptsTableQuery,
+  getReceiptsPaginationMetaFactory,
+} from 'store/receipt/receipt.selector';
+
+export default (mapState) => {
+  const getReceiptsItems = getReceiptCurrentPageFactory();
+  const getReceiptPaginationMeta = getReceiptsPaginationMetaFactory();
+
+  const mapStateToProps = (state, props) => {
+    const query = getReceiptsTableQuery(state, props);
+    const mapped = {
+      receiptsCurrentPage: getReceiptsItems(state, props, query),
+      receiptview:getResourceViews(state, props, 'sales_receipts'),
+      receiptItems: state.sales_receipts.items,
+      receiptTableQuery: query,
+      receiptsPagination: getReceiptPaginationMeta(state, props, query),
+      receiptsLoading: state.sales_receipts.loading,
+    };
+
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};