From 4f2679592f7b132f420c83a9e860bcfe8aee3db1 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Mon, 27 Jul 2020 02:39:26 +0200
Subject: [PATCH 1/6] WIP / Features  / Sate

---
 .../components/DataTableCells/DivFieldCell.js |  11 +
 .../DataTableCells/EstimatesListFieldCell.js  |  38 ++
 .../DataTableCells/InputGroupCell.js          |  13 +-
 .../DataTableCells/PercentFieldCell.js        |  43 ++
 client/src/components/DataTableCells/index.js |   9 +-
 client/src/components/EstimateListField.js    |  41 ++
 client/src/config/sidebarMenu.js              |  25 +-
 .../Sales/Estimate/EntriesItemsTable.js       | 259 ++++++++++++
 .../Sales/Estimate/EstimateActionsBar.js      | 140 +++++++
 .../containers/Sales/Estimate/EstimateForm.js | 334 +++++++++++++++
 .../Sales/Estimate/EstimateFormFooter.js      |  41 ++
 .../Sales/Estimate/EstimateFormHeader.js      | 192 +++++++++
 .../containers/Sales/Estimate/EstimateList.js | 120 ++++++
 .../containers/Sales/Estimate/Estimates.js    |  49 +++
 .../Sales/Estimate/EstimatesDataTable.js      | 196 +++++++++
 .../Sales/Estimate/withEstimateActions.js     |  32 ++
 .../Sales/Estimate/withEstimateDetail.js      |  11 +
 .../Sales/Estimate/withEstimates.js           |  24 ++
 .../Sales/Invoice/InvoiceActionsBar.js        | 133 ++++++
 .../containers/Sales/Invoice/InvoiceForm.js   | 321 +++++++++++++++
 .../Sales/Invoice/InvoiceFormFooter.js        |  41 ++
 .../Sales/Invoice/InvoiceFormHeader.js        | 177 ++++++++
 .../containers/Sales/Invoice/InvoiceList.js   | 109 +++++
 .../src/containers/Sales/Invoice/Invoices.js  |  49 +++
 .../Sales/Invoice/InvoicesDataTable.js        | 189 +++++++++
 .../Sales/Invoice/withInvoiceActions.js       |  31 ++
 .../Sales/Invoice/withInvoiceDetail.js        |  11 +
 .../Sales/Receipt/ReceiptActionsBar.js        |   0
 .../containers/Sales/Receipt/ReceiptForm.js   | 325 +++++++++++++++
 .../Sales/Receipt/ReceiptFormFooter.js        |  41 ++
 .../Sales/Receipt/ReceiptFormHeader.js        | 214 ++++++++++
 .../src/containers/Sales/Receipt/Receipts.js  |  65 +++
 .../Sales/Receipt/withReceipActions.js        |  33 ++
 client/src/lang/en/index.js                   | 103 ++++-
 client/src/routes/dashboard.js                |  71 ++++
 .../src/store/Estimate/estimates.actions.js   | 138 +++++++
 .../src/store/Estimate/estimates.reducer.js   | 105 +++++
 .../src/store/Estimate/estimates.selectors.js |  44 ++
 client/src/store/Estimate/estimates.types.js  |  13 +
 client/src/store/Invoice/invoices.actions.js  | 137 +++++++
 client/src/store/Invoice/invoices.reducer.js  |  32 ++
 client/src/store/Invoice/invoices.selector.js |   9 +
 client/src/store/Invoice/invoices.types.js    |  12 +
 client/src/store/receipt/receipt.actions.js   | 136 +++++++
 client/src/store/receipt/receipt.reducer.js   |   0
 client/src/store/receipt/receipt.selector.js  |   0
 client/src/store/receipt/receipt.type.js      |  12 +
 client/src/store/reducers.js                  |   2 +
 client/src/store/types.js                     |   6 +
 client/src/style/App.scss                     |  43 +-
 client/src/style/pages/estimate.scss          | 379 ++++++++++++++++++
 51 files changed, 4515 insertions(+), 44 deletions(-)
 create mode 100644 client/src/components/DataTableCells/DivFieldCell.js
 create mode 100644 client/src/components/DataTableCells/EstimatesListFieldCell.js
 create mode 100644 client/src/components/DataTableCells/PercentFieldCell.js
 create mode 100644 client/src/components/EstimateListField.js
 create mode 100644 client/src/containers/Sales/Estimate/EntriesItemsTable.js
 create mode 100644 client/src/containers/Sales/Estimate/EstimateActionsBar.js
 create mode 100644 client/src/containers/Sales/Estimate/EstimateForm.js
 create mode 100644 client/src/containers/Sales/Estimate/EstimateFormFooter.js
 create mode 100644 client/src/containers/Sales/Estimate/EstimateFormHeader.js
 create mode 100644 client/src/containers/Sales/Estimate/EstimateList.js
 create mode 100644 client/src/containers/Sales/Estimate/Estimates.js
 create mode 100644 client/src/containers/Sales/Estimate/EstimatesDataTable.js
 create mode 100644 client/src/containers/Sales/Estimate/withEstimateActions.js
 create mode 100644 client/src/containers/Sales/Estimate/withEstimateDetail.js
 create mode 100644 client/src/containers/Sales/Estimate/withEstimates.js
 create mode 100644 client/src/containers/Sales/Invoice/InvoiceActionsBar.js
 create mode 100644 client/src/containers/Sales/Invoice/InvoiceForm.js
 create mode 100644 client/src/containers/Sales/Invoice/InvoiceFormFooter.js
 create mode 100644 client/src/containers/Sales/Invoice/InvoiceFormHeader.js
 create mode 100644 client/src/containers/Sales/Invoice/InvoiceList.js
 create mode 100644 client/src/containers/Sales/Invoice/Invoices.js
 create mode 100644 client/src/containers/Sales/Invoice/InvoicesDataTable.js
 create mode 100644 client/src/containers/Sales/Invoice/withInvoiceActions.js
 create mode 100644 client/src/containers/Sales/Invoice/withInvoiceDetail.js
 create mode 100644 client/src/containers/Sales/Receipt/ReceiptActionsBar.js
 create mode 100644 client/src/containers/Sales/Receipt/ReceiptForm.js
 create mode 100644 client/src/containers/Sales/Receipt/ReceiptFormFooter.js
 create mode 100644 client/src/containers/Sales/Receipt/ReceiptFormHeader.js
 create mode 100644 client/src/containers/Sales/Receipt/Receipts.js
 create mode 100644 client/src/containers/Sales/Receipt/withReceipActions.js
 create mode 100644 client/src/store/Estimate/estimates.actions.js
 create mode 100644 client/src/store/Estimate/estimates.reducer.js
 create mode 100644 client/src/store/Estimate/estimates.selectors.js
 create mode 100644 client/src/store/Estimate/estimates.types.js
 create mode 100644 client/src/store/Invoice/invoices.actions.js
 create mode 100644 client/src/store/Invoice/invoices.reducer.js
 create mode 100644 client/src/store/Invoice/invoices.selector.js
 create mode 100644 client/src/store/Invoice/invoices.types.js
 create mode 100644 client/src/store/receipt/receipt.actions.js
 create mode 100644 client/src/store/receipt/receipt.reducer.js
 create mode 100644 client/src/store/receipt/receipt.selector.js
 create mode 100644 client/src/store/receipt/receipt.type.js
 create mode 100644 client/src/style/pages/estimate.scss

diff --git a/client/src/components/DataTableCells/DivFieldCell.js b/client/src/components/DataTableCells/DivFieldCell.js
new file mode 100644
index 000000000..a9274ceae
--- /dev/null
+++ b/client/src/components/DataTableCells/DivFieldCell.js
@@ -0,0 +1,11 @@
+import React, { useState, useEffect } from 'react';
+
+export default function DivFieldCell({ cell: { value: initialValue } }) {
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  return <div>${value}</div>;
+}
diff --git a/client/src/components/DataTableCells/EstimatesListFieldCell.js b/client/src/components/DataTableCells/EstimatesListFieldCell.js
new file mode 100644
index 000000000..1923028c0
--- /dev/null
+++ b/client/src/components/DataTableCells/EstimatesListFieldCell.js
@@ -0,0 +1,38 @@
+import React, { useCallback, useMemo } from 'react';
+import EstimateListField from 'components/EstimateListField';
+import classNames from 'classnames';
+import { FormGroup, Classes, Intent } from '@blueprintjs/core';
+
+function EstimatesListFieldCell({
+  column: { id },
+  row: { index },
+  cell: { value: initialValue },
+  payload: { products, updateData, errors },
+}) {
+  const handleProductSelected = useCallback(
+    (item) => {
+      updateData(index, id, item.id);
+    },
+    [updateData, index, id],
+  );
+
+  const error = errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(
+        'form-group--select-list',
+        Classes.FILL,
+      )}
+    >
+      <EstimateListField
+        products={products}
+        onProductSelected={handleProductSelected}
+        selectedProductId={initialValue}
+      />
+    </FormGroup>
+  );
+}
+
+export default EstimatesListFieldCell;
diff --git a/client/src/components/DataTableCells/InputGroupCell.js b/client/src/components/DataTableCells/InputGroupCell.js
index 07872a00f..3521fcbba 100644
--- a/client/src/components/DataTableCells/InputGroupCell.js
+++ b/client/src/components/DataTableCells/InputGroupCell.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
-import { Classes, InputGroup, FormGroup } from '@blueprintjs/core';
+import { Classes, InputGroup, FormGroup, Intent } from '@blueprintjs/core';
 
 const InputEditableCell = ({
   row: { index },
@@ -20,8 +20,17 @@ const InputEditableCell = ({
     setValue(initialValue);
   }, [initialValue]);
 
+  const error = payload.errors?.[index]?.[id];
+
   return (
-    <FormGroup>
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(
+        'form-group--select-list',
+        'form-group--account',
+        Classes.FILL,
+      )}
+    >
       <InputGroup
         value={value}
         onChange={onChange}
diff --git a/client/src/components/DataTableCells/PercentFieldCell.js b/client/src/components/DataTableCells/PercentFieldCell.js
new file mode 100644
index 000000000..e6b2a0092
--- /dev/null
+++ b/client/src/components/DataTableCells/PercentFieldCell.js
@@ -0,0 +1,43 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { FormGroup, Intent } from '@blueprintjs/core';
+import MoneyInputGroup from 'components/MoneyInputGroup';
+
+const PercentFieldCell = ({
+  cell: { value: initialValue },
+  row: { index },
+  column: { id },
+  payload: { errors, updateData },
+}) => {
+  const [value, setValue] = useState(initialValue);
+
+  const onBlur = (e) => {
+    updateData(index, id, parseInt(e.target.value, 10));
+  };
+
+  const onChange = useCallback((e) => {
+    setValue(e.target.value);
+  }, []);
+
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = errors?.[index]?.[id];
+
+  return (
+    <FormGroup intent={error ? Intent.DANGER : null}>
+      <MoneyInputGroup
+        value={value}
+        suffix={'%'}
+        onChange={onChange}
+        inputGroupProps={{
+          fill: true,
+          onBlur,
+        }}
+      />
+    </FormGroup>
+  );
+};
+
+export default PercentFieldCell;
diff --git a/client/src/components/DataTableCells/index.js b/client/src/components/DataTableCells/index.js
index 60232831e..54be925fe 100644
--- a/client/src/components/DataTableCells/index.js
+++ b/client/src/components/DataTableCells/index.js
@@ -2,10 +2,15 @@ import AccountsListFieldCell from './AccountsListFieldCell';
 import MoneyFieldCell from './MoneyFieldCell';
 import InputGroupCell from './InputGroupCell';
 import ContactsListFieldCell from './ContactsListFieldCell';
-
+import EstimatesListFieldCell from './EstimatesListFieldCell';
+import PercentFieldCell from './PercentFieldCell';
+import DivFieldCell from './DivFieldCell';
 export {
   AccountsListFieldCell,
   MoneyFieldCell,
   InputGroupCell,
   ContactsListFieldCell,
-}
\ No newline at end of file
+  EstimatesListFieldCell,
+  PercentFieldCell,
+  DivFieldCell,
+};
diff --git a/client/src/components/EstimateListField.js b/client/src/components/EstimateListField.js
new file mode 100644
index 000000000..ea37b794f
--- /dev/null
+++ b/client/src/components/EstimateListField.js
@@ -0,0 +1,41 @@
+import React, { useCallback, useMemo, useEffect, useState } from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
+import ListSelect from 'components/ListSelect';
+import { FormattedMessage as T } from 'react-intl';
+
+function EstimateListField({
+  products,
+  selectedProductId,
+  onProductSelected,
+  defautlSelectText = <T id={'select_product'} />,
+}) {
+  const onProductSelect = useCallback(
+    (product) => {
+      onProductSelected && onProductSelected(product);
+    },
+    [onProductSelected],
+  );
+
+  const productRenderer = useCallback(
+    (item, { handleClick, modifiers, query }) => (
+      <MenuItem text={item.name} key={item.id} onClick={handleClick} />
+    ),
+    [],
+  );
+
+  return (
+    <ListSelect
+      items={products}
+      noResults={<MenuItem disabled={true} text="No results." />}
+      itemRenderer={productRenderer}
+      popoverProps={{ minimal: true }}
+      onItemSelect={onProductSelect}
+      selectedItem={`${selectedProductId}`}
+      selectedItemProp={'id'}
+      labelProp={'name'}
+      defaultText={defautlSelectText}
+    />
+  );
+}
+
+export default EstimateListField;
diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js
index 1f904e8cd..7f6e7bf23 100644
--- a/client/src/config/sidebarMenu.js
+++ b/client/src/config/sidebarMenu.js
@@ -37,7 +37,20 @@ export default [
   },
   {
     text: <T id={'sales'} />,
-    children: [],
+    children: [
+      {
+        text: <T id={'estimates'} />,
+        href: '/estimates/new',
+      },
+      {
+        text: <T id={'invocies'} />,
+        href: '/invoices/new',
+      },
+      {
+        text: <T id={'receipts'} />,
+        href: '/receipts/new',
+      },
+    ],
   },
   {
     text: <T id={'purchases'} />,
@@ -99,11 +112,11 @@ export default [
     text: <T id={'expenses'} />,
     children: [
       {
-        text: <T id={'expenses'}/>,
+        text: <T id={'expenses'} />,
         href: '/expenses-list',
       },
       {
-        text: <T id={'new_expense'}/>,
+        text: <T id={'new_expense'} />,
         href: '/expenses/new',
       },
     ],
@@ -140,12 +153,12 @@ export default [
       },
       {
         text: 'Receivable Aging Summary',
-        href: '/financial-reports/receivable-aging-summary'
+        href: '/financial-reports/receivable-aging-summary',
       },
       {
         text: 'Payable Aging Summary',
-        href: '/financial-reports/payable-aging-summary'
-      }
+        href: '/financial-reports/payable-aging-summary',
+      },
     ],
   },
   {
diff --git a/client/src/containers/Sales/Estimate/EntriesItemsTable.js b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
new file mode 100644
index 000000000..eaa0a370e
--- /dev/null
+++ b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
@@ -0,0 +1,259 @@
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import DataTable from 'components/DataTable';
+import Icon from 'components/Icon';
+
+import { compose, formattedAmount, transformUpdatedRows } from 'utils';
+import {
+  InputGroupCell,
+  MoneyFieldCell,
+  EstimatesListFieldCell,
+  PercentFieldCell,
+  DivFieldCell,
+} from 'components/DataTableCells';
+
+import withItems from 'containers/Items/withItems';
+import { omit } from 'lodash';
+
+const ActionsCellRenderer = ({
+  row: { index },
+  column: { id },
+  cell: { value },
+  data,
+  payload,
+}) => {
+  if (data.length <= index + 1) {
+    return '';
+  }
+  const onRemoveRole = () => {
+    payload.removeRow(index);
+  };
+  return (
+    <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
+      <Button
+        icon={<Icon icon={'times-circle'} iconSize={14} />}
+        iconSize={14}
+        className="m12"
+        intent={Intent.DANGER}
+        onClick={onRemoveRole}
+      />
+    </Tooltip>
+  );
+};
+
+const TotalEstimateCellRederer = (content, type) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    const total = props.data.reduce((total, entry) => {
+      const amount = parseInt(entry[type], 10);
+      const computed = amount ? total + amount : total;
+
+      return computed;
+    }, 0);
+    return <span>{formattedAmount(total, 'USD')}</span>;
+  }
+  return content(props);
+};
+
+const calculateDiscount = (discount, quantity, rate) =>
+  quantity * rate - (quantity * rate * discount) / 100;
+
+const CellRenderer = (content, type) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    return '';
+  }
+  return content(props);
+};
+
+function EstimateTable({
+  //#withitems
+  itemsCurrentPage,
+
+  //#ownProps
+  onClickRemoveRow,
+  onClickAddNewRow,
+  onClickClearAllLines,
+  entries,
+  formik: { errors, setFieldValue, values },
+}) {
+  const [rows, setRows] = useState([]);
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    setRows([...entries.map((e) => ({ ...e }))]);
+  }, [entries]);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: '#',
+        accessor: 'index',
+        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
+        width: 40,
+        disableResizing: true,
+        disableSortBy: true,
+      },
+      {
+        Header: formatMessage({ id: 'product_and_service' }),
+        id: 'item_id',
+        accessor: 'item_id',
+        Cell: EstimatesListFieldCell,
+        disableSortBy: true,
+        disableResizing: true,
+        width: 250,
+      },
+      {
+        Header: formatMessage({ id: 'description' }),
+        accessor: 'description',
+        Cell: InputGroupCell,
+        disableSortBy: true,
+        className: 'description',
+      },
+
+      {
+        Header: formatMessage({ id: 'quantity' }),
+        accessor: 'quantity',
+        Cell: CellRenderer(InputGroupCell, 'quantity'),
+        disableSortBy: true,
+        width: 100,
+        className: 'quantity',
+      },
+      {
+        Header: formatMessage({ id: 'rate' }),
+        accessor: 'rate',
+        Cell: TotalEstimateCellRederer(MoneyFieldCell, 'rate'),
+        disableSortBy: true,
+        width: 150,
+        className: 'rate',
+      },
+      {
+        Header: formatMessage({ id: 'discount' }),
+        accessor: 'discount',
+        Cell: CellRenderer(PercentFieldCell, InputGroupCell),
+        disableSortBy: true,
+        disableResizing: true,
+        width: 100,
+        className: 'discount',
+      },
+      {
+        Header: formatMessage({ id: 'total' }),
+        accessor: (row) =>
+          calculateDiscount(row.discount, row.quantity, row.rate),
+        Cell: TotalEstimateCellRederer(DivFieldCell, 'total'),
+        disableSortBy: true,
+        width: 150,
+        className: 'total',
+      },
+      {
+        Header: '',
+        accessor: 'action',
+        Cell: ActionsCellRenderer,
+        className: 'actions',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 45,
+      },
+    ],
+    [formatMessage],
+  );
+
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRow = rows.map((row, index) => {
+        if (index === rowIndex) {
+          const newRow = { ...rows[rowIndex], [columnId]: value };
+          return {
+            ...newRow,
+            total: calculateDiscount(
+              newRow.discount,
+              newRow.quantity,
+              newRow.rate,
+            ),
+          };
+        }
+        return row;
+      });
+      setFieldValue(
+        'entries',
+        newRow.map((row) => ({
+          ...omit(row),
+        })),
+      );
+    },
+    [rows, setFieldValue],
+  );
+
+  const handleRemoveRow = useCallback(
+    (rowIndex) => {
+      if (rows.length <= 1) {
+        return;
+      }
+
+      const removeIndex = parseInt(rowIndex, 10);
+      const newRows = rows.filter((row, index) => index !== removeIndex);
+      setFieldValue(
+        'entries',
+        newRows.map((row, index) => ({
+          ...omit(row),
+          index: index + 1,
+        })),
+      );
+      onClickRemoveRow && onClickRemoveRow(removeIndex);
+    },
+    [rows, setFieldValue, onClickRemoveRow],
+  );
+
+  const onClickNewRow = () => {
+    onClickAddNewRow && onClickAddNewRow();
+  };
+
+  const handleClickClearAllLines = () => {
+    onClickClearAllLines && onClickClearAllLines();
+  };
+
+  const rowClassNames = useCallback(
+    (row) => ({
+      'row--total': rows.length === row.index + 1,
+    }),
+    [rows],
+  );
+
+  return (
+    <div className={'estimate-form__table'}>
+      <DataTable
+        columns={columns}
+        data={rows}
+        rowClassNames={rowClassNames}
+        payload={{
+          products: itemsCurrentPage,
+          errors: errors.entries || [],
+          updateData: handleUpdateData,
+          removeRow: handleRemoveRow,
+        }}
+      />
+      <div className={'mt1'}>
+        <Button
+          small={true}
+          className={'button--secondary button--new-line'}
+          onClick={onClickNewRow}
+        >
+          <T id={'new_lines'} />
+        </Button>
+
+        <Button
+          small={true}
+          className={'button--secondary button--clear-lines ml1'}
+          onClick={handleClickClearAllLines}
+        >
+          <T id={'clear_all_lines'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  withItems(({ itemsCurrentPage }) => ({
+    itemsCurrentPage,
+  })),
+)(EstimateTable);
diff --git a/client/src/containers/Sales/Estimate/EstimateActionsBar.js b/client/src/containers/Sales/Estimate/EstimateActionsBar.js
new file mode 100644
index 000000000..dca9ab169
--- /dev/null
+++ b/client/src/containers/Sales/Estimate/EstimateActionsBar.js
@@ -0,0 +1,140 @@
+import React, { useMemo, useCallback } 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 } from 'react-intl';
+
+import { If } 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 withEstimateActions from './withEstimateActions';
+
+import withEstimates from './withEstimates';
+
+import { compose } from 'utils';
+import { connect } from 'react-redux';
+
+function EstimateActionsBar({
+  // #withResourceDetail
+  resourceFields,
+
+  //#withEstimates
+  estimateViews,
+
+  // #withEstimateActions
+  addEstimatesTableQueries,
+
+  // #own Porps
+  onFilterChanged,
+  selectedRows,
+}) {
+  const { path } = useRouteMatch();
+  const history = useHistory();
+
+  const onClickNewEstimate = useCallback(() => {
+    // history.push('/estimates/new');
+  }, [history]);
+
+  const filterDropdown = FilterDropdown({
+    initialCondition: {
+      fieldKey: '',
+      compatator: '',
+      value: '',
+    },
+    fields: resourceFields,
+    onFilterChange: (filterConditions) => {
+      addEstimatesTableQueries({
+        filter_roles: filterConditions || '',
+      });
+      onFilterChanged && onFilterChange(filterConditions);
+    },
+  });
+
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_estimate'} />}
+          onClick={onClickNewEstimate}
+        />
+        <Popover
+          minimal={true}
+          content={filterDropdown}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={'Filter'}
+            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          />
+        </Popover>
+        <If condition={hasSelectedRows}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            // onClick={handleBulkDelete}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+const mapStateToProps = (state, props) => ({
+  resourceName: 'estimates',
+});
+
+const withEstimateActionsBar = connect(mapStateToProps);
+
+export default compose(
+  withEstimateActionsBar,
+  withDialogActions,
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })),
+  // withEstimate(({ estimateViews }) => ({
+  //   estimateViews,
+  // })),
+  withEstimateActions,
+)(EstimateActionsBar);
diff --git a/client/src/containers/Sales/Estimate/EstimateForm.js b/client/src/containers/Sales/Estimate/EstimateForm.js
new file mode 100644
index 000000000..aceb930f0
--- /dev/null
+++ b/client/src/containers/Sales/Estimate/EstimateForm.js
@@ -0,0 +1,334 @@
+import React, {
+  useMemo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import moment from 'moment';
+import { Intent, FormGroup, TextArea, Button } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { pick, omitBy, omit } from 'lodash';
+
+import EstimateFormHeader from './EstimateFormHeader';
+import EstimatesItemsTable from './EntriesItemsTable';
+import EstimateFormFooter from './EstimateFormFooter';
+
+import withEstimateActions from './withEstimateActions';
+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;
+
+const EstimateForm = ({
+  //#WithMedia
+  requestSubmitMedia,
+  requestDeleteMedia,
+
+  //#WithEstimateActions
+  requestSubmitEstimate,
+  requestEditEstimate,
+
+  //#withDashboard
+  changePageTitle,
+  changePageSubtitle,
+
+  //#withEstimateDetail
+  estimate,
+
+  //#own Props
+  estimateId,
+  onFormSubmit,
+  onCancelForm,
+}) => {
+  const { formatMessage } = useIntl();
+  const [payload, setPaload] = useState({});
+
+  const {
+    setFiles,
+    saveMedia,
+    deletedFiles,
+    setDeletedFiles,
+    deleteMedia,
+  } = useMedia({
+    saveCallback: requestSubmitMedia,
+    deleteCallback: requestDeleteMedia,
+  });
+
+  const handleDropFiles = useCallback((_files) => {
+    setFiles(_files.filter((file) => file.uploaded === false));
+  }, []);
+
+  const savedMediaIds = useRef([]);
+  const clearSavedMediaIds = () => {
+    savedMediaIds.current = [];
+  };
+
+  useEffect(() => {
+    if (estimate && estimate.id) {
+      changePageTitle(formatMessage({ id: 'edit_estimate' }));
+    } else {
+      changePageTitle(formatMessage({ id: 'new_estimate' }));
+    }
+  }, [changePageTitle, estimate, formatMessage]);
+
+  const validationSchema = Yup.object().shape({
+    customer_id: Yup.number()
+      .label(formatMessage({ id: 'customer_name_' }))
+      .required(),
+    estimate_date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'estimate_date_' })),
+    expiration_date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'expiration_date_' })),
+    estimate_number: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'estimate_number_' })),
+    reference: Yup.string().min(1).max(255),
+    note: Yup.string()
+      .trim()
+      .min(1)
+      .max(1024)
+      .label(formatMessage({ id: 'note' })),
+
+    terms_conditions: Yup.string()
+      .trim()
+      .min(1)
+      .max(1024)
+      .label(formatMessage({ id: 'note' })),
+
+    entries: Yup.array().of(
+      Yup.object().shape({
+        quantity: Yup.number().nullable(),
+        //Cyclic dependency
+        rate: Yup.number().nullable(),
+        //   .when(['item_id'], {
+        //     is: (item_id) => item_id,
+        //     then: Yup.number().required(),
+        //   }),
+
+        // rate: Yup.number().test((value) => {
+        //   const { item_id } = this.parent;
+        //   if (!item_id) return value != null;
+        //   return false;
+        // }),
+        item_id: Yup.number()
+          .nullable()
+          .when(['quantity', 'rate'], {
+            is: (quantity, rate) => quantity || rate,
+            then: Yup.number().required(),
+          }),
+        discount: Yup.number().nullable(),
+        description: Yup.string().nullable(),
+      }),
+    ),
+  });
+
+  const saveInvokeSubmit = useCallback(
+    (payload) => {
+      onFormSubmit && onFormSubmit(payload);
+    },
+    [onFormSubmit],
+  );
+
+  const defaultEstimate = useMemo(
+    () => ({
+      index: 0,
+      item_id: null,
+      rate: null,
+      discount: null,
+      quantity: null,
+      description: '',
+    }),
+    [],
+  );
+
+  const defaultInitialValues = useMemo(
+    () => ({
+      customer_id: null,
+      estimate_date: moment(new Date()).format('YYYY-MM-DD'),
+      expiration_date: moment(new Date()).format('YYYY-MM-DD'),
+      estimate_number: null,
+      reference: '',
+      note: '',
+      terms_conditions: '',
+      entries: [...repeatValue(defaultEstimate, MIN_LINES_NUMBER)],
+    }),
+    [defaultEstimate],
+  );
+
+  const orderingProductsIndex = (_entries) => {
+    return _entries.map((item, index) => ({
+      ...item,
+      index: index + 1,
+    }));
+  };
+
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      entries: orderingProductsIndex(defaultInitialValues.entries),
+    }),
+    [defaultEstimate, defaultInitialValues, estimate],
+  );
+
+  const initialAttachmentFiles = useMemo(() => {
+    return estimate && estimate.media
+      ? estimate.media.map((attach) => ({
+          preview: attach.attachment_file,
+          uploaded: true,
+          metadata: { ...attach },
+        }))
+      : [];
+  }, [estimate]);
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema,
+    initialValues: {
+      ...initialValues,
+    },
+    onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
+      const entries = values.entries.map((item) => omit(item, ['total']));
+
+      const form = {
+        ...values,
+        entries,
+      };
+      const saveEstimate = (mediaIds) =>
+        new Promise((resolve, reject) => {
+          const requestForm = { ...form, media_ids: mediaIds };
+
+          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);
+            });
+        });
+      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);
+        });
+    },
+  });
+
+  const handleSubmitClick = useCallback(
+    (payload) => {
+      setPaload(payload);
+      formik.submitForm();
+    },
+    [setPaload, formik],
+  );
+
+  const handleCancelClick = useCallback(
+    (payload) => {
+      onCancelForm && onCancelForm(payload);
+    },
+    [onCancelForm],
+  );
+
+  const handleDeleteFile = useCallback(
+    (_deletedFiles) => {
+      _deletedFiles.forEach((deletedFile) => {
+        if (deletedFile.uploaded && deletedFile.metadata.id) {
+          setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
+        }
+      });
+    },
+    [setDeletedFiles, deletedFiles],
+  );
+
+  const handleClickAddNewRow = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingProductsIndex([...formik.values.entries, defaultEstimate]),
+    );
+  };
+
+  const handleClearAllLines = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingProductsIndex([
+        ...repeatValue(defaultEstimate, MIN_LINES_NUMBER),
+      ]),
+    );
+  };
+
+  return (
+    <div>
+      <form onSubmit={formik.handleSubmit}>
+        <EstimateFormHeader formik={formik} />
+        <EstimatesItemsTable
+          entries={formik.values.entries}
+          onClickAddNewRow={handleClickAddNewRow}
+          onClickClearAllLines={handleClearAllLines}
+          formik={formik}
+        />
+        <FormGroup
+          label={<T id={'customer_note'} />}
+          className={'form-group--customer_note'}
+        >
+          <TextArea growVertically={true} {...formik.getFieldProps('note')} />
+        </FormGroup>
+        <FormGroup
+          label={<T id={'terms_conditions'} />}
+          className={'form-group--terms_conditions'}
+        >
+          <TextArea
+            growVertically={true}
+            {...formik.getFieldProps('terms_conditions')}
+          />
+        </FormGroup>
+        <Dragzone
+          initialFiles={initialAttachmentFiles}
+          onDrop={handleDropFiles}
+          onDeleteFile={handleDeleteFile}
+          hint={'Attachments: Maxiumum size: 20MB'}
+        />
+
+        <EstimateFormFooter
+          formik={formik}
+          onSubmitClick={handleSubmitClick}
+          onCancelClick={handleCancelClick}
+        />
+      </form>
+    </div>
+  );
+};
+
+export default compose(
+  withEstimateActions,
+  withDashboardActions,
+  withMediaActions,
+)(EstimateForm);
diff --git a/client/src/containers/Sales/Estimate/EstimateFormFooter.js b/client/src/containers/Sales/Estimate/EstimateFormFooter.js
new file mode 100644
index 000000000..d1881d750
--- /dev/null
+++ b/client/src/containers/Sales/Estimate/EstimateFormFooter.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Intent, Button } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function EstimateFormFooter({
+  formik: { isSubmitting },
+  onSubmitClick,
+  onCancelClick,
+}) {
+  return (
+    <div className={'estimate-form__floating-footer'}>
+      <Button disabled={isSubmitting} intent={Intent.PRIMARY} type="submit">
+        <T id={'save_send'} />
+      </Button>
+
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        className={'ml1'}
+        name={'save'}
+        type="submit"
+      >
+        <T id={'save'} />
+      </Button>
+
+      <Button className={'ml1'} disabled={isSubmitting}>
+        <T id={'clear'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        type="submit"
+        onClick={() => {
+          onCancelClick && onCancelClick();
+        }}
+      >
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}
diff --git a/client/src/containers/Sales/Estimate/EstimateFormHeader.js b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
new file mode 100644
index 000000000..ad1212763
--- /dev/null
+++ b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
@@ -0,0 +1,192 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Intent,
+  Position,
+  MenuItem,
+  Classes,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import { Row, Col } from 'react-grid-system';
+import moment from 'moment';
+import { momentFormatter, compose, tansformDateValue } from 'utils';
+import classNames from 'classnames';
+import { ListSelect, ErrorMessage, FieldRequiredHint, Hint } from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+
+function EstimateFormHeader({
+  formik: { errors, touched, setFieldValue, getFieldProps, values },
+
+  //#withCustomers
+  customers,
+}) {
+  const handleDateChange = useCallback(
+    (date_filed) => (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      setFieldValue(date_filed, formatted);
+    },
+    [setFieldValue],
+  );
+
+  const CustomerRenderer = useCallback(
+    (cutomer, { handleClick }) => (
+      <MenuItem
+        key={cutomer.id}
+        text={cutomer.display_name}
+        onClick={handleClick}
+      />
+    ),
+    [],
+  );
+
+  // Filter Customer
+  const filterCustomer = (query, customer, _index, exactMatch) => {
+    const normalizedTitle = customer.display_name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${customer.display_name} ${normalizedTitle}`.indexOf(
+          normalizedQuery,
+        ) >= 0
+      );
+    }
+  };
+
+  // handle change customer
+  const onChangeCustomer = useCallback(
+    (filedName) => {
+      return (customer) => {
+        setFieldValue(filedName, customer.id);
+      };
+    },
+    [setFieldValue],
+  );
+
+  return (
+    <div className={'estimate-form'}>
+      <div className={'estimate-form__primary-section'}>
+        {/* customer name */}
+        <FormGroup
+          label={<T id={'customer_name'} />}
+          inline={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
+          labelInfo={<FieldRequiredHint />}
+          intent={errors.customer_id && touched.customer_id && Intent.DANGER}
+          helperText={
+            <ErrorMessage name={'customer_id'} {...{ errors, touched }} />
+          }
+        >
+          <ListSelect
+            items={customers}
+            noResults={<MenuItem disabled={true} text="No results." />}
+            itemRenderer={CustomerRenderer}
+            itemPredicate={filterCustomer}
+            popoverProps={{ minimal: true }}
+            onItemSelect={onChangeCustomer('customer_id')}
+            selectedItem={values.customer_id}
+            selectedItemProp={'id'}
+            defaultText={<T id={'select_customer_account'} />}
+            labelProp={'display_name'}
+          />
+        </FormGroup>
+        {/* estimate_date */}
+        <Row>
+          <Col
+
+          // md={9} push={{ md: 3 }}
+          >
+            <FormGroup
+              label={<T id={'estimate_date'} />}
+              inline={true}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames('form-group--select-list', Classes.FILL)}
+              intent={
+                errors.estimate_date && touched.estimate_date && Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage name="estimate_date" {...{ errors, touched }} />
+              }
+            >
+              <DateInput
+                {...momentFormatter('YYYY/MM/DD')}
+                value={tansformDateValue(values.estimate_date)}
+                onChange={handleDateChange('estimate_date')}
+                popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+          <Col
+
+          // md={3} pull={{ md: 9 }}
+          >
+            <FormGroup
+              label={<T id={'expiration_date'} />}
+              inline={true}
+              className={classNames('form-group--select-list', Classes.FILL)}
+              intent={
+                errors.expiration_date &&
+                touched.expiration_date &&
+                Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage name="expiration_date" {...{ errors, touched }} />
+              }
+            >
+              <DateInput
+                {...momentFormatter('YYYY/MM/DD')}
+                value={tansformDateValue(values.expiration_date)}
+                onChange={handleDateChange('expiration_date')}
+                popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+      </div>
+      {/* Estimate */}
+      <FormGroup
+        label={<T id={'estimate'} />}
+        inline={true}
+        className={('form-group--estimate', Classes.FILL)}
+        labelInfo={<FieldRequiredHint />}
+        intent={
+          errors.estimate_number && touched.estimate_number && Intent.DANGER
+        }
+        helperText={
+          <ErrorMessage name="estimate_number" {...{ errors, touched }} />
+        }
+      >
+        <InputGroup
+          intent={
+            errors.estimate_number && touched.estimate_number && Intent.DANGER
+          }
+          minimal={true}
+          {...getFieldProps('estimate_number')}
+        />
+      </FormGroup>
+      <FormGroup
+        label={<T id={'reference'} />}
+        inline={true}
+        className={classNames('form-group--reference', Classes.FILL)}
+        intent={errors.reference && touched.reference && Intent.DANGER}
+        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+      >
+        <InputGroup
+          intent={errors.reference && touched.reference && Intent.DANGER}
+          minimal={true}
+          {...getFieldProps('reference')}
+        />
+      </FormGroup>
+    </div>
+  );
+}
+
+export default compose(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+)(EstimateFormHeader);
diff --git a/client/src/containers/Sales/Estimate/EstimateList.js b/client/src/containers/Sales/Estimate/EstimateList.js
new file mode 100644
index 000000000..cc91019d9
--- /dev/null
+++ b/client/src/containers/Sales/Estimate/EstimateList.js
@@ -0,0 +1,120 @@
+import React, { useEffect, useCallback, useMemo } 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 withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withEstimateActions from './withEstimateActions';
+
+import EstimateActionsBar from './EstimateActionsBar';
+
+import { compose } from 'utils';
+
+function EstimateList({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withViewsActions
+
+  // #withEstimate
+
+  //#withEistimateActions
+  requestFetchEstimatesTable,
+  requestDeleteEstimate,
+  addEstimatesTableQueries,
+}) {
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+  const [deleteEstimate, setDeleteEstimate] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  const fetchEstimate = useQuery(['estimate-table'], () =>
+    requestFetchEstimatesTable(),
+  );
+
+  useEffect(() => {
+    changePageTitle(formatMessage({ id: 'estimate_list' }));
+  }, [changePageTitle, formatMessage]);
+
+  // handle delete estimate click
+
+  const handleDeleteEstimate = useCallback(
+    (estimate) => {
+      setDeleteEstimate(estimate);
+    },
+    [setDeleteEstimate],
+  );
+
+  // handle cancel estimate
+  const handleCancelEstimateDelete = useCallback(() => {
+    setDeleteEstimate(false);
+  }, [setDeleteEstimate]);
+
+  // handle confirm delete estimate
+  const handleConfirmEstimateDelete = useCallback(() => {
+    requestDeleteEstimate(deleteEstimate.id).then((response) => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_estimate_has_been_successfully_deleted',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      setDeleteEstimate(false);
+    });
+  }, [deleteEstimate, requestDeleteEstimate, formatMessage]);
+
+  // Calculates the selected rows
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
+    selectedRows,
+  ]);
+
+  const handleEidtEstimate = useCallback(
+    (estimate) => {
+      history.push(`/estimates/${estimate.id}/edit`);
+    },
+    [history],
+  );
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      const page = pageIndex + 1;
+
+      addEstimatesTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page,
+      });
+    },
+    [addEstimatesTableQueries],
+  );
+
+  const handleSelectedRowsChange = useCallback((estimate) => {
+    selectedRows(estimate);
+  });
+
+  return (
+    <DashboardInsider name={'estimates'}>
+      <EstimateActionsBar
+        // onBulkDelete={}
+        selectedRows={selectedRows}
+        // onFilterChanged={}
+      />
+      <DashboardPageContent>
+        <Switch>
+          <Route></Route>
+        </Switch>
+      </DashboardPageContent>
+    </DashboardInsider>
+  );
+}
+
+export default EstimateList;
diff --git a/client/src/containers/Sales/Estimate/Estimates.js b/client/src/containers/Sales/Estimate/Estimates.js
new file mode 100644
index 000000000..545527388
--- /dev/null
+++ b/client/src/containers/Sales/Estimate/Estimates.js
@@ -0,0 +1,49 @@
+import React, { useCallback } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { useQuery } from 'react-query';
+
+import EstimateForm from './EstimateForm';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+import withCustomersActions from 'containers/Customers/withCustomersActions';
+import withItemsActions from 'containers/Items/withItemsActions';
+import withEstimateActions from './withEstimateActions';
+
+import { compose } from 'utils';
+
+function Estimates({ requestFetchCustomers, requestFetchItems }) {
+  const history = useHistory();
+  const { id } = useParams();
+
+  // 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 handleCancel = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
+  return (
+    <DashboardInsider
+      loading={fetchCustomers.isFetching || fetchItems.isFetching}
+    >
+      <EstimateForm
+        onFormSubmit={handleFormSubmit}
+        // estimateId={id}
+        onCancelForm={handleCancel}
+      />
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withEstimateActions,
+  withCustomersActions,
+  withItemsActions,
+)(Estimates);
diff --git a/client/src/containers/Sales/Estimate/EstimatesDataTable.js b/client/src/containers/Sales/Estimate/EstimatesDataTable.js
new file mode 100644
index 000000000..d4445fdae
--- /dev/null
+++ b/client/src/containers/Sales/Estimate/EstimatesDataTable.js
@@ -0,0 +1,196 @@
+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 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';
+
+function EstimatesDataTable({
+  //#withEitimates
+
+  // #withDashboardActions
+  changeCurrentView,
+  changePageSubtitle,
+  setTopbarEditView,
+
+  // #withView
+  viewMeta,
+
+  //#OwnProps
+  loading,
+  onFetchData,
+  onEditEstimate,
+  onDeleteEstimate,
+  onSelectedRowsChange,
+}) {
+  const [initialMount, setInitialMount] = useState(false);
+  const { custom_view_id: customViewId } = useParams();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    setInitialMount(false);
+  }, []);
+
+  // useUpdateEffect(() => {
+  //   if (!estimateLoading) {
+  //     setInitialMount(true);
+  //   }
+  // }, []);
+
+  useEffect(() => {
+    if (customViewId) {
+      changeCurrentView(customViewId);
+      setTopbarEditView(customViewId);
+    }
+    changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
+  }, [
+    customViewId,
+    changeCurrentView,
+    changePageSubtitle,
+    setTopbarEditView,
+    viewMeta,
+  ]);
+
+  const handleEditEstimate = useCallback(
+    (estimate) => {
+      onEditEstimate && onEditEstimate(estimate);
+    },
+    [onEditEstimate],
+  );
+
+  const handleDeleteEstimate = useCallback(() => {
+    onDeleteEstimate && onDeleteEstimate();
+  }, [onDeleteEstimate]);
+
+  const actionMenuList = useCallback(
+    () => (
+      <Menu>
+        <MenuItem text={formatMessage({ id: 'view_details' })} />
+        <MenuDivider />
+        <MenuItem
+          text={formatMessage({ id: 'edit_estimate' })}
+          // onClick={handleEditEstimate(estimate)}
+        />
+        <MenuItem
+          text={formatMessage({ id: 'delete_estimate' })}
+          intent={Intent.DANGER}
+          // onClick={handleDeleteEstimate(estimate)}
+        />
+      </Menu>
+    ),
+    [handleDeleteEstimate, handleEditEstimate, formatMessage],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        id: '',
+        Header: formatMessage({ id: '' }),
+        accessor: '',
+        className: '',
+      },
+      {
+        id: '',
+        Header: formatMessage({ id: '' }),
+        accessor: '',
+        className: '',
+      },
+      {
+        id: '',
+        Header: formatMessage({ id: '' }),
+        accessor: '',
+        className: '',
+      },
+      {
+        id: '',
+        Header: formatMessage({ id: '' }),
+        accessor: '',
+        className: '',
+      },
+      {
+        id: '',
+        Header: formatMessage({ id: '' }),
+        accessor: '',
+        className: '',
+      },
+      {
+        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(
+    (...arguments) => {
+      onFetchData && onFetchData(...arguments);
+    },
+    [onFetchData],
+  );
+
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange],
+  );
+
+  return (
+    <div>
+      <LoadingIndicator loading={loading} mount={false}>
+        <DataTable
+          columns={columns}
+          data={[]}
+          onFetchData={handleDataTableFetchData}
+          manualSortBy={true}
+        />
+      </LoadingIndicator>
+    </div>
+  );
+}
+
+export default compose(
+  withRouter,
+  withDialogActions,
+  withDashboardActions,
+  withEstimateActions,
+  // withEstimates(({}) => ({})),
+  withViewDetails(),
+)(EstimatesDataTable);
diff --git a/client/src/containers/Sales/Estimate/withEstimateActions.js b/client/src/containers/Sales/Estimate/withEstimateActions.js
new file mode 100644
index 000000000..574bc401d
--- /dev/null
+++ b/client/src/containers/Sales/Estimate/withEstimateActions.js
@@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+import {
+  submitEstimate,
+  editEstimate,
+  deleteEstimate,
+  fetchEstimate,
+  fetchEstimatesTable,
+} from 'store/Estimate/estimates.actions';
+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 })),
+  requestFetchEstimatesTable: (query = {}) =>
+    dispatch(fetchEstimatesTable({ query: { ...query } })),
+  requestDeleteEstimate: (id) => dispatch(deleteEstimate({ id })),
+
+  changeEstimateView: (id) =>
+    dispatch({
+      type: t.ESTIMATES_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+
+  addEstimatesTableQueries: (queries) =>
+    dispatch({
+      type: t.ESTIMATES_TABLE_QUERIES_ADD,
+      queries,
+    }),
+});
+
+export default connect(null, mapDipatchToProps);
diff --git a/client/src/containers/Sales/Estimate/withEstimateDetail.js b/client/src/containers/Sales/Estimate/withEstimateDetail.js
new file mode 100644
index 000000000..3d5dfbdf7
--- /dev/null
+++ b/client/src/containers/Sales/Estimate/withEstimateDetail.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { getEstimateByIdFactory } from 'store/Estimate/estimates.selectors';
+
+export default () => {
+  const getEstimateById = getEstimateByIdFactory();
+
+  const mapStateToProps = (state, props) => ({
+    estimate: getEstimateById(state, props),
+  });
+  return connect(mapStateToProps);
+};
diff --git a/client/src/containers/Sales/Estimate/withEstimates.js b/client/src/containers/Sales/Estimate/withEstimates.js
new file mode 100644
index 000000000..b64faa14e
--- /dev/null
+++ b/client/src/containers/Sales/Estimate/withEstimates.js
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+import {
+  getEstimateCurrentPage,
+  getEstimatesTableQuery,
+  getEstimatesPaginationMetaFactory,
+} from 'store/Estimate/estimates.selectors';
+
+function withEstimates(mapSate) {
+  const mapStateToProps = (state, props) => {
+    const query = getEstimatesTableQuery(state, props);
+    const mapped = {
+      estimateViews: getResourceViews(state, props, 'estimates'),
+      estimateItems: state.estiamte.items,
+      estimateTableQuery: query,
+      estimatesLoading: state.estiamte.loading,
+    };
+    return mapSate ? mapSate(mapped, state, props) : mapped;
+  };
+
+  return connect(mapStateToProps);
+}
+
+export default withEstimates;
diff --git a/client/src/containers/Sales/Invoice/InvoiceActionsBar.js b/client/src/containers/Sales/Invoice/InvoiceActionsBar.js
new file mode 100644
index 000000000..b8d1e2ed9
--- /dev/null
+++ b/client/src/containers/Sales/Invoice/InvoiceActionsBar.js
@@ -0,0 +1,133 @@
+import React, { useMemo, useCallback } 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 } from 'react-intl';
+
+import { If } 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 withInvoiceActions from './withInvoices';
+
+import { compose } from 'utils';
+import { connect } from 'react-redux';
+
+function InvoiceActionsBar({
+  // #withResourceDetail
+  resourceFields,
+
+  //#withInvoice
+  InvoiceViews,
+
+  // #withInvoiceActions
+  addInvoiceTableQueries,
+
+  // #own Porps
+  onFilterChanged,
+  selectedRows,
+}) {
+  const history = useHistory();
+
+  const FilterDropdown = FilterDropdown({
+    initialCondition: {
+      fieldKey: '',
+      compatator: '',
+      value: '',
+    },
+    fields: resourceFields,
+    onFilterChange: (filterConditions) => {
+      addInvoiceTableQueries({
+        filter_roles: filterConditions || '',
+      });
+      onFilterChanged && onFilterChanged(filterConditions);
+    },
+  });
+
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_invoice'} />}
+          onClick={onClickNewInvoice}
+        />
+        <Popover
+          minimal={true}
+          content={FilterDropdown}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL)}
+            text={'Filter'}
+            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          />
+        </Popover>
+        <If condition={hasSelectedRows}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            // onClick={handleBulkDelete}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+const mapStateToProps = (state, props) => ({
+  resourceName: 'invoice',
+});
+
+const withInvoiceActionsBar = connect(mapStateToProps);
+
+export default compose(
+  withInvoiceActionsBar,
+  withDialogActions,
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })),
+  // withInvoices(({ invoiceViews }) => ({
+  //   invoiceViews,
+  // })),
+  withInvoiceActions,
+)(InvoiceActionsBar);
diff --git a/client/src/containers/Sales/Invoice/InvoiceForm.js b/client/src/containers/Sales/Invoice/InvoiceForm.js
new file mode 100644
index 000000000..64768d7c5
--- /dev/null
+++ b/client/src/containers/Sales/Invoice/InvoiceForm.js
@@ -0,0 +1,321 @@
+import React, {
+  useMemo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import moment from 'moment';
+import { Intent, FormGroup, TextArea, Button } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { pick, omit } from 'lodash';
+
+import InvoiceFormHeader from './InvoiceFormHeader';
+import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
+import InvoiceFormFooter from './InvoiceFormFooter';
+
+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';
+import useMedia from 'hooks/useMedia';
+
+import { compose, repeatValue } from 'utils';
+
+const MIN_LINES_NUMBER = 4;
+
+function InvoiceForm({
+  //#WithMedia
+  requestSubmitMedia,
+  requestDeleteMedia,
+
+  //#WithInvoiceActions
+  requestSubmitInvoice,
+  
+  //#withDashboard
+  changePageTitle,
+  changePageSubtitle,
+
+  //#withInvoiceDetail
+  invoice,
+
+  //#own Props
+  InvoiceId,
+  onFormSubmit,
+  onCancelForm,
+}) {
+  const { formatMessage } = useIntl();
+  const [payload, setPaload] = useState({});
+
+  const {
+    setFiles,
+    saveMedia,
+    deletedFiles,
+    setDeletedFiles,
+    deleteMedia,
+  } = useMedia({
+    saveCallback: requestSubmitMedia,
+    deleteCallback: requestDeleteMedia,
+  });
+
+  const handleDropFiles = useCallback((_files) => {
+    setFiles(_files.filter((file) => file.uploaded === false));
+  }, []);
+
+  const savedMediaIds = useRef([]);
+  const clearSavedMediaIds = () => {
+    savedMediaIds.current = [];
+  };
+
+  useEffect(() => {
+    if (invoice && invoice.id) {
+      changePageTitle(formatMessage({ id: 'edit_invoice' }));
+    } else {
+      changePageTitle(formatMessage({ id: 'new_invoice' }));
+    }
+  }, [changePageTitle, invoice, formatMessage]);
+
+  const validationSchema = Yup.object().shape({
+    customer_id: Yup.string()
+      .label(formatMessage({ id: 'customer_name_' }))
+      .required(),
+    invoice_date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'invoice_date_' })),
+    due_date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'due_date_' })),
+    invoice_no: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'invoice_no_' })),
+    reference_no: Yup.string().min(1).max(255),
+    status: Yup.string().required(),
+    invoice_message: Yup.string()
+      .trim()
+      .min(1)
+      .max(1024)
+      .label(formatMessage({ id: 'note' })),
+    terms_conditions: Yup.string()
+      .trim()
+      .min(1)
+      .max(1024)
+      .label(formatMessage({ id: 'note' })),
+
+    entries: Yup.array().of(
+      Yup.object().shape({
+        quantity: Yup.number().nullable(),
+        rate: Yup.number().nullable(),
+        item_id: Yup.number()
+          .nullable()
+          .when(['quantity', 'rate'], {
+            is: (quantity, rate) => quantity || rate,
+            then: Yup.number().required(),
+          }),
+        total: Yup.number().nullable(),
+        discount: Yup.number().nullable(),
+        description: Yup.string().nullable(),
+      }),
+    ),
+  });
+
+  const saveInvokeSubmit = useCallback(
+    (payload) => {
+      onFormSubmit && onFormSubmit(payload);
+    },
+    [onFormSubmit],
+  );
+
+  const defaultInvoice = useMemo(
+    () => ({
+      index: 0,
+      item_id: null,
+      rate: null,
+      discount: null,
+      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',
+      invoice_no: '',
+      reference_no: '',
+      invoice_message: '',
+      terms_conditions: '',
+      entries: [...repeatValue(defaultInvoice, MIN_LINES_NUMBER)],
+    }),
+    [defaultInvoice],
+  );
+
+  const orderingIndex = (_invoice) => {
+    return _invoice.map((item, index) => ({
+      ...item,
+      index: index + 1,
+    }));
+  };
+
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      entries: orderingIndex(defaultInitialValues.entries),
+    }),
+    [defaultInvoice, defaultInitialValues, invoice],
+  );
+
+  const initialAttachmentFiles = useMemo(() => {
+    return invoice && invoice.media
+      ? invoice.media.map((attach) => ({
+          preview: attach.attachment_file,
+          uploaded: true,
+          metadata: { ...attach },
+        }))
+      : [];
+  }, [invoice]);
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema,
+    initialValues: {
+      ...initialValues,
+    },
+    onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
+      setSubmitting(true);
+      const entries = values.entries.map((item) => omit(item, ['total']));
+
+      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);
+            });
+        });
+
+      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);
+        });
+    },
+  });
+  const handleSubmitClick = useCallback(
+    (payload) => {
+      setPaload(payload);
+      formik.submitForm();
+    },
+    [setPaload, formik],
+  );
+
+  const handleCancelClick = useCallback(
+    (payload) => {
+      onCancelForm && onCancelForm(payload);
+    },
+    [onCancelForm],
+  );
+
+  console.log(formik.errors, 'Errors');
+  const handleDeleteFile = useCallback(
+    (_deletedFiles) => {
+      _deletedFiles.forEach((deletedFile) => {
+        if (deletedFile.uploaded && deletedFile.metadata.id) {
+          setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
+        }
+      });
+    },
+    [setDeletedFiles, deletedFiles],
+  );
+
+  const handleClickAddNewRow = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingIndex([...formik.values.entries, defaultInvoice]),
+    );
+  };
+
+  const handleClearAllLines = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingIndex([...repeatValue(defaultInvoice, MIN_LINES_NUMBER)]),
+    );
+  };
+
+  return (
+    <div className={'invoice-form'}>
+      <form onSubmit={formik.handleSubmit}>
+        <InvoiceFormHeader formik={formik} />
+        <EstimatesItemsTable
+          entries={formik.values.entries}
+          onClickAddNewRow={handleClickAddNewRow}
+          onClickClearAllLines={handleClearAllLines}
+          formik={formik}
+        />
+        <FormGroup
+          label={<T id={'invoice_message'} />}
+          className={'form-group--customer_note'}
+        >
+          <TextArea
+            growVertically={true}
+            {...formik.getFieldProps('invoice_message')}
+          />
+        </FormGroup>
+        <FormGroup
+          label={<T id={'terms_conditions'} />}
+          className={'form-group--terms_conditions'}
+        >
+          <TextArea
+            growVertically={true}
+            {...formik.getFieldProps('terms_conditions')}
+          />
+        </FormGroup>
+        <Dragzone
+          initialFiles={initialAttachmentFiles}
+          onDrop={handleDropFiles}
+          onDeleteFile={handleDeleteFile}
+          hint={'Attachments: Maxiumum size: 20MB'}
+        />
+
+        <InvoiceFormFooter
+          formik={formik}
+          onSubmitClick={handleSubmitClick}
+          onCancelClick={handleCancelClick}
+        />
+      </form>
+    </div>
+  );
+}
+
+export default compose(
+  withInvoiceActions,
+  withDashboardActions,
+  withMediaActions,
+)(InvoiceForm);
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormFooter.js b/client/src/containers/Sales/Invoice/InvoiceFormFooter.js
new file mode 100644
index 000000000..d1881d750
--- /dev/null
+++ b/client/src/containers/Sales/Invoice/InvoiceFormFooter.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Intent, Button } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function EstimateFormFooter({
+  formik: { isSubmitting },
+  onSubmitClick,
+  onCancelClick,
+}) {
+  return (
+    <div className={'estimate-form__floating-footer'}>
+      <Button disabled={isSubmitting} intent={Intent.PRIMARY} type="submit">
+        <T id={'save_send'} />
+      </Button>
+
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        className={'ml1'}
+        name={'save'}
+        type="submit"
+      >
+        <T id={'save'} />
+      </Button>
+
+      <Button className={'ml1'} disabled={isSubmitting}>
+        <T id={'clear'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        type="submit"
+        onClick={() => {
+          onCancelClick && onCancelClick();
+        }}
+      >
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
new file mode 100644
index 000000000..e9c95b768
--- /dev/null
+++ b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
@@ -0,0 +1,177 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Intent,
+  Position,
+  MenuItem,
+  Classes,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import { Row, Col } from 'react-grid-system';
+import moment from 'moment';
+import { momentFormatter, compose, tansformDateValue } from 'utils';
+import classNames from 'classnames';
+import { ListSelect, ErrorMessage, FieldRequiredHint, Hint } from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+
+function InvoiceFormHeader({
+  formik: { errors, touched, setFieldValue, getFieldProps, values },
+
+  //#withCustomers
+  customers,
+}) {
+  const handleDateChange = useCallback(
+    (date_filed) => (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      setFieldValue(date_filed, formatted);
+    },
+    [setFieldValue],
+  );
+
+  const CustomerRenderer = useCallback(
+    (cutomer, { handleClick }) => (
+      <MenuItem
+        key={cutomer.id}
+        text={cutomer.display_name}
+        onClick={handleClick}
+      />
+    ),
+    [],
+  );
+
+  // Filter Customer
+  const filterCustomer = (query, customer, _index, exactMatch) => {
+    const normalizedTitle = customer.display_name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${customer.display_name} ${normalizedTitle}`.indexOf(
+          normalizedQuery,
+        ) >= 0
+      );
+    }
+  };
+
+  // handle change customer
+  const onChangeCustomer = useCallback(
+    (filedName) => {
+      return (customer) => {
+        setFieldValue(filedName, customer.id);
+      };
+    },
+    [setFieldValue],
+  );
+
+  return (
+    <div className={'invoice-form'}>
+      <div className={'invoice__primary-section'}>
+        {/* customer name */}
+        <FormGroup
+          label={<T id={'customer_name'} />}
+          inline={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
+          labelInfo={<FieldRequiredHint />}
+          intent={errors.customer_id && touched.customer_id && Intent.DANGER}
+          helperText={
+            <ErrorMessage name={'customer_id'} {...{ errors, touched }} />
+          }
+        >
+          <ListSelect
+            items={customers}
+            noResults={<MenuItem disabled={true} text="No results." />}
+            itemRenderer={CustomerRenderer}
+            itemPredicate={filterCustomer}
+            popoverProps={{ minimal: true }}
+            onItemSelect={onChangeCustomer('customer_id')}
+            selectedItem={values.customer_id}
+            selectedItemProp={'id'}
+            defaultText={<T id={'select_customer_account'} />}
+            labelProp={'display_name'}
+          />
+        </FormGroup>
+        <Row>
+          <Col>
+            <FormGroup
+              label={<T id={'invoice_date'} />}
+              inline={true}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames('form-group--select-list', Classes.FILL)}
+              intent={
+                errors.invoice_date && touched.invoice_date && Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage name="invoice_date" {...{ errors, touched }} />
+              }
+            >
+              <DateInput
+                {...momentFormatter('YYYY/MM/DD')}
+                value={tansformDateValue(values.invoice_date)}
+                onChange={handleDateChange('invoice_date')}
+                popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup
+              label={<T id={'due_date'} />}
+              inline={true}
+              className={classNames('form-group--select-list', Classes.FILL)}
+              intent={errors.due_date && touched.due_date && Intent.DANGER}
+              helperText={
+                <ErrorMessage name="due_date" {...{ errors, touched }} />
+              }
+            >
+              <DateInput
+                {...momentFormatter('YYYY/MM/DD')}
+                value={tansformDateValue(values.due_date)}
+                onChange={handleDateChange('due_date')}
+                popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        {/* invoice */}
+        <FormGroup
+          label={<T id={'invoice_no'} />}
+          inline={true}
+          className={('form-group--estimate', Classes.FILL)}
+          labelInfo={<FieldRequiredHint />}
+          intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
+          helperText={
+            <ErrorMessage name="invoice_no" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
+            minimal={true}
+            {...getFieldProps('invoice_no')}
+          />
+        </FormGroup>
+      </div>
+      <FormGroup
+        label={<T id={'reference'} />}
+        inline={true}
+        className={classNames('form-group--reference', Classes.FILL)}
+        intent={errors.reference_no && touched.reference_no && Intent.DANGER}
+        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+      >
+        <InputGroup
+          intent={errors.reference_no && touched.reference_no && Intent.DANGER}
+          minimal={true}
+          {...getFieldProps('reference_no')}
+        />
+      </FormGroup>
+    </div>
+  );
+}
+
+export default compose(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+)(InvoiceFormHeader);
diff --git a/client/src/containers/Sales/Invoice/InvoiceList.js b/client/src/containers/Sales/Invoice/InvoiceList.js
new file mode 100644
index 000000000..f80af54b2
--- /dev/null
+++ b/client/src/containers/Sales/Invoice/InvoiceList.js
@@ -0,0 +1,109 @@
+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 withDashboardActions from 'containers/Dashboard/withDashboardActions';
+// import withInvoiceActions from './withInvoiceActions'
+
+// import InvoiceActionsBar from './InvoiceActionsBar';
+
+import { compose } from 'utils';
+import InvoiceActionsBar from './InvoiceActionsBar';
+
+function InvoiceList({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withViewsActions
+
+  //#withInvoice
+
+  //#withInvoiceActions
+}) {
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+  const [deleteInvoice, setDeleteInvoice] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  useEffect(() => {
+    changePageTitle(formatMessage({ id: 'invoice_list' }));
+  }, [changePageTitle, formatMessage]);
+
+  //handle dalete Invoice
+  const handleDeleteInvoice = useCallback(
+    (invoice) => {
+      setDeleteInvoice(invoice);
+    },
+    [setDeleteInvoice],
+  );
+
+  // handle cancel Invoice
+  const handleCancelInvoiceDelete = useCallback(() => {
+    setDeleteInvoice(false);
+  }, [setDeleteInvoice]);
+
+  // handleConfirm delete invoice
+  const handleConfirmInvoiceDelete = useCallback(() => {
+    requestDeleteInvoice(deleteInvoice.id).then(() => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_invocie_has_been_successfully_deleted',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      setDeleteInvoice(false);
+    });
+  }, [setDeleteInvoice, requestDeleteInvoice]);
+
+  const handleEditInvoice = useCallback((invoice) => {
+    history.push(`/invoices/${invoice.id}/edit`);
+  });
+
+  const fetchInvoice = useQuery(['invoice-table'], () =>
+    requsetFetchInvoiceTable(),
+  );
+
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      const page = pageIndex + 1;
+
+      addInvoiceTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page,
+      });
+    },
+    [addInvoiceTableQueries],
+  );
+  const handleSelectedRowsChange = useCallback((_invoice) => {
+    selectedRows(_invoice);
+  });
+
+  return (
+    <DashboardInsider name={'invoices'}>
+      <InvoiceActionsBar 
+      // onBulkDelete={}
+      selectedRows={selectedRows}
+      // onFilterChanged={}
+      />
+      <DashboardPageContent>
+        <Switch>
+          <Route></Route>
+        </Switch>
+      </DashboardPageContent>
+    </DashboardInsider>
+  );
+}
+
+export default InvoiceList;
diff --git a/client/src/containers/Sales/Invoice/Invoices.js b/client/src/containers/Sales/Invoice/Invoices.js
new file mode 100644
index 000000000..e5804c8f4
--- /dev/null
+++ b/client/src/containers/Sales/Invoice/Invoices.js
@@ -0,0 +1,49 @@
+import React, { useCallback } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { useQuery } from 'react-query';
+
+import InvoiceForm from './InvoiceForm';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+import withCustomersActions from 'containers/Customers/withCustomersActions';
+import withItemsActions from 'containers/Items/withItemsActions';
+import withInvoiceActions from './withInvoiceActions';
+
+import { compose } from 'utils';
+
+function Invoices({ requestFetchCustomers, requestFetchItems }) {
+  const history = useHistory();
+  const { id } = useParams();
+
+  // Handle fetch Items data table or list
+  const fetchItems = useQuery('items-table', () => requestFetchItems({}));
+
+  const handleFormSubmit = useCallback((payload) => {}, [history]);
+
+  // Handle fetch customers data table or list
+  const fetchCustomers = useQuery('customers-table', () =>
+    requestFetchCustomers({}),
+  );
+
+  const handleCancel = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
+  return (
+    <DashboardInsider
+      loading={fetchCustomers.isFetching || fetchItems.isFetching}
+    >
+      <InvoiceForm
+        onFormSubmit={handleFormSubmit}
+        // InvoiceId={id}
+        onCancelForm={handleCancel}
+      />
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withInvoiceActions,
+  withCustomersActions,
+  withItemsActions,
+)(Invoices);
diff --git a/client/src/containers/Sales/Invoice/InvoicesDataTable.js b/client/src/containers/Sales/Invoice/InvoicesDataTable.js
new file mode 100644
index 000000000..6a937410d
--- /dev/null
+++ b/client/src/containers/Sales/Invoice/InvoicesDataTable.js
@@ -0,0 +1,189 @@
+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 withDialogActions from 'containers/Dialog/withDialogActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withViewDetails from 'containers/Views/withViewDetails';
+
+import witInvoice from './withInvoice';
+import withInvoiceActions from './withInvoiceActions';
+
+function InvoicesDataTable({
+  //#withInvoices
+
+  // #withDashboardActions
+  changeCurrentView,
+  changePageSubtitle,
+  setTopbarEditView,
+
+  // #withView
+  viewMeta,
+
+  //#OwnProps
+  loading,
+  onFetchData,
+  onEditEstimate,
+  onDeleteEstimate,
+  onSelectedRowsChange,
+}) {
+  const [initialMount, setInitialMount] = useState(false);
+  const { custom_view_id: customViewId } = useParams();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    setInitialMount(false);
+  }, []);
+
+  useEffect(() => {
+    if (customViewId) {
+      changeCurrentView(customViewId);
+      setTopbarEditView(customViewId);
+    }
+    changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
+  }, [
+    customViewId,
+    changeCurrentView,
+    changePageSubtitle,
+    setTopbarEditView,
+    viewMeta,
+  ]);
+
+  const handleEditInvoice = useCallback(
+    (_invoice) => {
+      onEditInvoice && onEditInvoice(_invoice);
+    },
+    [onEditInvoice],
+  );
+
+  const handleDeleteInvoice = useCallback(() => {
+    onDeleteInvoice && onDeleteInvoice();
+  }, [onDeleteInvoice]);
+
+  const actionsMenuList = useCallback(
+    (invoice) => {
+      <Menu>
+        <MenuItem text={formatMessage({ id: 'view_details' })} />
+        <MenuDivider />
+
+        <MenuItem
+          text={formatMessage({ id: 'edit_invoice' })}
+          // onClick={handleEditInvoice(invoice)}
+        />
+      </Menu>;
+    },
+    [handleDeleteInvoice, handleEditInvoice, formatMessage],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        id: '',
+        Header: formatMessage({ id: '' }),
+        accessor: '',
+        className: '',
+      },
+      {
+        id: '',
+        Header: formatMessage({ id: '' }),
+        accessor: '',
+        className: '',
+      },
+      {
+        id: '',
+        Header: formatMessage({ id: '' }),
+        accessor: '',
+        className: '',
+      },
+      {
+        id: '',
+        Header: formatMessage({ id: '' }),
+        accessor: '',
+        className: '',
+      },
+      {
+        id: '',
+        Header: formatMessage({ id: '' }),
+        accessor: '',
+        className: '',
+      },
+      {
+        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(
+    (...arguments) => {
+      onFetchData && onFetchData(...arguments);
+    },
+    [onFetchData],
+  );
+
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange],
+  );
+
+  return (
+    <div>
+      <LoadingIndicator>
+        <DataTable
+          columns={columns}
+          data={[]}
+          onFetchData={handleDataTableFetchData}
+          manualSortBy={true}
+        />
+      </LoadingIndicator>
+    </div>
+  );
+}
+
+export default compose(
+  withRouter,
+  withDialogActions,
+  withDashboardActions,
+  withInvoiceActions,
+  // withInvoices(({})=>({
+
+  // }))
+  withViewDetails(),
+)(InvoicesDataTable);
diff --git a/client/src/containers/Sales/Invoice/withInvoiceActions.js b/client/src/containers/Sales/Invoice/withInvoiceActions.js
new file mode 100644
index 000000000..f00d5cf8f
--- /dev/null
+++ b/client/src/containers/Sales/Invoice/withInvoiceActions.js
@@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+import {
+  submitInvoice,
+  editInvoice,
+  deleteInvoice,
+  fetchInvoice,
+  fetchInvoicesTable,
+} from 'store/Invoice/invoices.actions';
+import t from 'store/types';
+
+const mapDipatchToProps = (dispatch) => ({
+  requestSubmitInvoice: (form) => dispatch(submitInvoice({ form })),
+  requsetFetchInvoice: (id) => dispatch(fetchInvoice({ id })),
+  requestEditInvoice: (id, form) => dispatch(editInvoice({ id, form })),
+  requestFetchInvoiceTable: (query = {}) =>
+    dispatch(fetchInvoicesTable({ query: { ...query } })),
+  requestDeleteInvoice: (id) => dispatch(deleteInvoice({ id })),
+
+  changeInvoiceView: (id) =>
+    dispatch({
+      type: t.INVOICES_SET_CURREMT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+  addInvoiceTableQueries: (_queries) =>
+    dispatch({
+      type: t.INVOICES_TABLE_QUERIES_ADD,
+      _queries,
+    }),
+});
+
+export default connect(null, mapDipatchToProps);
diff --git a/client/src/containers/Sales/Invoice/withInvoiceDetail.js b/client/src/containers/Sales/Invoice/withInvoiceDetail.js
new file mode 100644
index 000000000..c7f8623e9
--- /dev/null
+++ b/client/src/containers/Sales/Invoice/withInvoiceDetail.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { getInvoiceById } from 'store/Invoice/invoices.selector';
+
+export default () => {
+  const getInvoiceById = getInvoiceById();
+
+  const mapStateToProps = (state, props) => ({
+    invoice: getInvoiceById(state, props),
+  });
+  return connect(mapStateToProps);
+};
diff --git a/client/src/containers/Sales/Receipt/ReceiptActionsBar.js b/client/src/containers/Sales/Receipt/ReceiptActionsBar.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/containers/Sales/Receipt/ReceiptForm.js b/client/src/containers/Sales/Receipt/ReceiptForm.js
new file mode 100644
index 000000000..57c3ee7ac
--- /dev/null
+++ b/client/src/containers/Sales/Receipt/ReceiptForm.js
@@ -0,0 +1,325 @@
+import React, {
+  useMemo,
+  useCallback,
+  useEffect,
+  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';
+
+import ReceiptFromHeader from './ReceiptFormHeader';
+import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
+import ReceiptFormFooter from './ReceiptFormFooter';
+
+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';
+import useMedia from 'hooks/useMedia';
+
+import { compose, repeatValue } from 'utils';
+
+const MIN_LINES_NUMBER = 4;
+
+function ReceiptForm({
+  //#withMedia
+  requestSubmitMedia,
+  requestDeleteMedia,
+
+  //#withReceiptActions
+  requestSubmitReceipt,
+
+  //#withDashboard
+  changePageTitle,
+  changePageSubtitle,
+
+  //#withReceiptDetail
+  receipt,
+
+  //#own Props
+  receiptId,
+  onFormSubmit,
+  onCancelForm,
+}) {
+  const { formatMessage } = useIntl();
+  const [payload, setPaload] = useState({});
+
+  const {
+    setFiles,
+    saveMedia,
+    deletedFiles,
+    setDeletedFiles,
+    deleteMedia,
+  } = useMedia({
+    saveCallback: requestSubmitMedia,
+    deleteCallback: requestDeleteMedia,
+  });
+
+  const handleDropFiles = useCallback((_files) => {
+    setFiles(_files.filter((file) => file.uploaded === false));
+  }, []);
+
+  const savedMediaIds = useRef([]);
+  const clearSavedMediaIds = () => {
+    savedMediaIds.current = [];
+  };
+
+  useEffect(() => {
+    if (receipt && receipt.id) {
+      changePageTitle(formatMessage({ id: 'edit_receipt' }));
+    } else {
+      changePageTitle(formatMessage({ id: 'new_receipt' }));
+    }
+  }, [changePageTitle, receipt, formatMessage]);
+
+  const validationSchema = Yup.object().shape({
+    customer_id: Yup.string()
+      .label(formatMessage({ id: 'customer_name_' }))
+      .required(),
+    receipt_date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'receipt_date_' })),
+    receipt_no: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'receipt_no_' })),
+    deposit_account_id: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'deposit_account_' })),
+    reference_no: Yup.string().min(1).max(255),
+    receipt_message: Yup.string()
+      .trim()
+      .min(1)
+      .max(1024)
+      .label(formatMessage({ id: 'receipt_message_' })),
+    send_to_email: Yup.string().email(),
+    statement: Yup.string()
+      .trim()
+      .min(1)
+      .max(1024)
+      .label(formatMessage({ id: 'note' })),
+
+    entries: Yup.array().of(
+      Yup.object().shape({
+        quantity: Yup.number().nullable(),
+        rate: Yup.number().nullable(),
+        item_id: Yup.number()
+          .nullable()
+          .when(['quantity', 'rate'], {
+            is: (quantity, rate) => quantity || rate,
+            then: Yup.number().required(),
+          }),
+        discount: Yup.number().nullable(),
+        description: Yup.string().nullable(),
+      }),
+    ),
+  });
+  const saveReceiptSubmit = useCallback(
+    (payload) => {
+      onFormSubmit && onFormSubmit(payload);
+    },
+    [onFormSubmit],
+  );
+
+  const defaultReceipt = useMemo(
+    () => ({
+      index: 0,
+      item_id: null,
+      rate: null,
+      discount: null,
+      quantity: null,
+      description: '',
+    }),
+    [],
+  );
+
+  const defaultInitialValues = useMemo(
+    () => ({
+      customer_id: '',
+      deposit_account_id: '',
+      receipt_date: moment(new Date()).format('YYYY-MM-DD'),
+      send_to_email: '',
+      reference_no: '',
+      receipt_message: '',
+      statement: '',
+      entries: [...repeatValue(defaultReceipt, MIN_LINES_NUMBER)],
+    }),
+    [defaultReceipt],
+  );
+
+  const orderingIndex = (_receipt) => {
+    return _receipt.map((item, index) => ({
+      ...item,
+      index: index + 1,
+    }));
+  };
+
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      entries: orderingIndex(defaultInitialValues.entries),
+    }),
+    [defaultReceipt, defaultInitialValues, receipt],
+  );
+
+  const initialAttachmentFiles = useMemo(() => {
+    return receipt && receipt.media
+      ? receipt.media.map((attach) => ({
+          preview: attach.attachment_file,
+          uploaded: true,
+          metadata: { ...attach },
+        }))
+      : [];
+  }, [receipt]);
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema,
+    initialValues: {
+      ...initialValues,
+    },
+    onSubmit: async (values, { setErrors, setSubmitting, resetForm }) => {
+      const entries = values.entries.map(
+        ({ item_id, quantity, rate, description }) => ({
+          item_id,
+          quantity,
+          rate,
+          description,
+        }),
+      );
+      const form = {
+        ...values,
+        entries,
+      };
+
+      const saveReceipt = (mediaIds) =>
+        new Promise((resolve, reject) => {
+          const requestForm = { ...form, media_ids: mediaIds };
+
+          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);
+            });
+        });
+      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);
+        });
+    },
+  });
+
+  const handleDeleteFile = useCallback(
+    (_deletedFiles) => {
+      _deletedFiles.forEach((deletedFile) => {
+        if (deletedFile.uploaded && deletedFile.metadata.id) {
+          setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
+        }
+      });
+    },
+    [setDeletedFiles, deletedFiles],
+  );
+
+  const handleSubmitClick = useCallback(
+    (payload) => {
+      setPaload(payload);
+      formik.submitForm();
+    },
+    [setPaload, formik],
+  );
+
+  const handleCancelClick = useCallback(
+    (payload) => {
+      onCancelForm && onCancelForm(payload);
+    },
+    [onCancelForm],
+  );
+
+  const handleClickAddNewRow = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingIndex([...formik.values.entries, defaultReceipt]),
+    );
+  };
+
+  const handleClearAllLines = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingIndex([...repeatValue(defaultReceipt, MIN_LINES_NUMBER)]),
+    );
+  };
+
+  return (
+    <div className={'receipt-form'}>
+      <form onSubmit={formik.handleSubmit}>
+        <ReceiptFromHeader formik={formik} />
+
+        <EstimatesItemsTable
+          entries={formik.values.entries}
+          onClickAddNewRow={handleClickAddNewRow}
+          onClickClearAllLines={handleClearAllLines}
+          formik={formik}
+        />
+        <FormGroup
+          label={<T id={'receipt_message'} />}
+          className={'form-group--'}
+        >
+          <TextArea
+            growVertically={true}
+            {...formik.getFieldProps('receipt_message')}
+          />
+        </FormGroup>
+        <FormGroup
+          label={<T id={'statement'} />}
+          className={'form-group--statement'}
+        >
+          <TextArea
+            growVertically={true}
+            {...formik.getFieldProps('statement')}
+          />
+        </FormGroup>
+
+        <Dragzone
+          initialFiles={initialAttachmentFiles}
+          onDrop={handleDropFiles}
+          onDeleteFile={handleDeleteFile}
+          hint={'Attachments: Maxiumum size: 20MB'}
+        />
+        <ReceiptFormFooter
+          formik={formik}
+          onSubmit={handleSubmitClick}
+          onCancelForm={handleCancelClick}
+        />
+      </form>
+    </div>
+  );
+}
+
+export default compose(
+  withReceipActions,
+  withDashboardActions,
+  withMediaActions,
+)(ReceiptForm);
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormFooter.js b/client/src/containers/Sales/Receipt/ReceiptFormFooter.js
new file mode 100644
index 000000000..e25ec3228
--- /dev/null
+++ b/client/src/containers/Sales/Receipt/ReceiptFormFooter.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Intent, Button } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function ReceiptFormFooter({
+  formik: { isSubmitting },
+  onSubmitClick,
+  onCancelClick,
+}) {
+  return (
+    <div className={'estimate-form__floating-footer'}>
+      <Button disabled={isSubmitting} intent={Intent.PRIMARY} type="submit">
+        <T id={'save_send'} />
+      </Button>
+
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        className={'ml1'}
+        name={'save'}
+        type="submit"
+      >
+        <T id={'save'} />
+      </Button>
+
+      <Button className={'ml1'} disabled={isSubmitting}>
+        <T id={'clear'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        type="submit"
+        onClick={() => {
+          onCancelClick && onCancelClick();
+        }}
+      >
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
new file mode 100644
index 000000000..443d6f8f5
--- /dev/null
+++ b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
@@ -0,0 +1,214 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Intent,
+  Position,
+  MenuItem,
+  Classes,
+} from '@blueprintjs/core';
+
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import moment from 'moment';
+import { momentFormatter, compose, tansformDateValue } from 'utils';
+import classNames from 'classnames';
+import {
+  AccountsSelectList,
+  ListSelect,
+  ErrorMessage,
+  FieldRequiredHint,
+  Hint,
+} from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+import withAccounts from 'containers/Accounts/withAccounts';
+
+function ReceiptFormHeader({
+  formik: { errors, touched, setFieldValue, getFieldProps, values },
+
+  //#withCustomers
+  customers,
+  //#withAccouts
+  accountsList,
+}) {
+  const handleDateChange = useCallback(
+    (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      setFieldValue('receipt_date', formatted);
+    },
+    [setFieldValue],
+  );
+
+  const CustomerRenderer = useCallback(
+    (cutomer, { handleClick }) => (
+      <MenuItem
+        key={cutomer.id}
+        text={cutomer.display_name}
+        onClick={handleClick}
+      />
+    ),
+    [],
+  );
+
+  // Filter Customer
+  const filterCustomer = (query, customer, _index, exactMatch) => {
+    const normalizedTitle = customer.display_name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${customer.display_name} ${normalizedTitle}`.indexOf(
+          normalizedQuery,
+        ) >= 0
+      );
+    }
+  };
+
+  // handle change
+  const onChangeSelect = useCallback(
+    (filedName) => {
+      return (item) => {
+        setFieldValue(filedName, item.id);
+      };
+    },
+    [setFieldValue],
+  );
+
+  // Filter deposit accounts.
+  const depositAccounts = useMemo(
+    () => accountsList.filter((a) => a?.type?.key === 'current_asset'),
+    [accountsList],
+  );
+
+  return (
+    <div>
+      <div>
+        {/* customer name */}
+        <FormGroup
+          label={<T id={'customer_name'} />}
+          inline={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
+          labelInfo={<FieldRequiredHint />}
+          intent={errors.customer_id && touched.customer_id && Intent.DANGER}
+          helperText={
+            <ErrorMessage name={'customer_id'} {...{ errors, touched }} />
+          }
+        >
+          <ListSelect
+            items={customers}
+            noResults={<MenuItem disabled={true} text="No results." />}
+            itemRenderer={CustomerRenderer}
+            itemPredicate={filterCustomer}
+            popoverProps={{ minimal: true }}
+            onItemSelect={onChangeSelect('customer_id')}
+            selectedItem={values.customer_id}
+            selectedItemProp={'id'}
+            defaultText={<T id={'select_customer_account'} />}
+            labelProp={'display_name'}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={<T id={'deposit_account'} />}
+          className={classNames(
+            'form-group--deposit_account_id',
+            'form-group--select-list',
+            Classes.FILL,
+          )}
+          inline={true}
+          labelInfo={<FieldRequiredHint />}
+          intent={
+            errors.deposit_account_id &&
+            touched.deposit_account_id &&
+            Intent.DANGER
+          }
+          helperText={
+            <ErrorMessage
+              name={'deposit_account_id'}
+              {...{ errors, touched }}
+            />
+          }
+        >
+          <AccountsSelectList
+            accounts={depositAccounts}
+            onAccountSelected={onChangeSelect('deposit_account_id')}
+            defaultSelectText={<T id={'select_deposit_account'} />}
+            selectedAccountId={values.deposit_account_id}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={<T id={'receipt_date'} />}
+          inline={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
+          intent={errors.receipt_date && touched.receipt_date && Intent.DANGER}
+          helperText={
+            <ErrorMessage name="receipt_date" {...{ errors, touched }} />
+          }
+        >
+          <DateInput
+            {...momentFormatter('YYYY/MM/DD')}
+            value={tansformDateValue(values.receipt_date)}
+            onChange={handleDateChange}
+            popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          />
+        </FormGroup>
+      </div>
+      {/* receipt_no */}
+      <FormGroup
+        label={<T id={'receipt'} />}
+        inline={true}
+        className={('form-group--receipt_no', Classes.FILL)}
+        labelInfo={<FieldRequiredHint />}
+        intent={errors.receipt_no && touched.receipt_no && Intent.DANGER}
+        helperText={<ErrorMessage name="receipt_no" {...{ errors, touched }} />}
+      >
+        <InputGroup
+          intent={errors.receipt_no && touched.receipt_no && Intent.DANGER}
+          minimal={true}
+          {...getFieldProps('receipt_no')}
+        />
+      </FormGroup>
+
+      <FormGroup
+        label={<T id={'reference'} />}
+        inline={true}
+        className={classNames('form-group--reference', Classes.FILL)}
+        intent={errors.reference_no && touched.reference_no && Intent.DANGER}
+        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+      >
+        <InputGroup
+          intent={errors.reference_no && touched.reference_no && Intent.DANGER}
+          minimal={true}
+          {...getFieldProps('reference_no')}
+        />
+      </FormGroup>
+      <FormGroup
+        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}
+        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+      >
+        <InputGroup
+          intent={
+            errors.send_to_email && touched.send_to_email && Intent.DANGER
+          }
+          minimal={true}
+          {...getFieldProps('send_to_email')}
+        />
+      </FormGroup>
+    </div>
+  );
+}
+
+export default compose(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+  withAccounts(({ accountsList }) => ({
+    accountsList,
+  })),
+)(ReceiptFormHeader);
diff --git a/client/src/containers/Sales/Receipt/Receipts.js b/client/src/containers/Sales/Receipt/Receipts.js
new file mode 100644
index 000000000..473d3cb8a
--- /dev/null
+++ b/client/src/containers/Sales/Receipt/Receipts.js
@@ -0,0 +1,65 @@
+import React, { useCallback } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { useQuery } from 'react-query';
+
+import ReceiptFrom from './ReceiptForm';
+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 { compose } from 'utils';
+
+function Receipts({
+  //#withwithAccountsActions
+  requestFetchAccounts,
+
+  //#withCustomersActions
+  requestFetchCustomers,
+
+  //#withItemsActions
+  requestFetchItems,
+}) {
+  const history = useHistory();
+  const { id } = useParams();
+
+  const fetchAccounts = useQuery('accounts-list', (key) =>
+    requestFetchAccounts(),
+  );
+
+  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 handleCancel = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
+  return (
+    <DashboardInsider
+      loading={
+        fetchCustomers.isFetching ||
+        fetchItems.isFetching ||
+        fetchAccounts.isFetching
+      }
+    >
+      <ReceiptFrom
+        onFormSubmit={handleFormSubmit}
+        // ReceiptId={id}
+        onCancelForm={handleCancel}
+      />
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withCustomersActions,
+  withItemsActions,
+  withAccountsActions,
+)(Receipts);
diff --git a/client/src/containers/Sales/Receipt/withReceipActions.js b/client/src/containers/Sales/Receipt/withReceipActions.js
new file mode 100644
index 000000000..1aebb3884
--- /dev/null
+++ b/client/src/containers/Sales/Receipt/withReceipActions.js
@@ -0,0 +1,33 @@
+import { connect } from 'react-redux';
+import {
+  submitReceipt,
+  deleteReceipt,
+  fetchReceipt,
+  fetchReceiptsTable,
+  editReceipt,
+} from 'store/receipt/receipt.actions';
+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 })),
+  requestDeleteReceipt: (id) => dispatch(deleteReceipt({ id })),
+  requestFetchReceiptsTable: (query = {}) =>
+    dispatch(fetchReceiptsTable({ query: { ...query } })),
+  // requestDeleteBulkReceipt: (ids) => dispatch(deleteBulkReceipt({ ids })),
+
+  changeReceiptView: (id) =>
+    dispatch({
+      type: t.RECEIPT_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+
+  addReceiptsTableQueries: (queries) =>
+    dispatch({
+      type: t.RECEIPTS_TABLE_QUERIES_ADD,
+      queries,
+    }),
+});
+
+export default connect(null, mapDispatchToProps);
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index b501e64b7..57590e1ee 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -528,14 +528,20 @@ export default {
   logic_expression: 'logic expression',
   assign_to_customer: 'Assign to Customer',
   inactive: 'Inactive',
-  should_select_customers_with_entries_have_receivable_account: 'Should select customers with entries that have receivable account.',
-  should_select_vendors_with_entries_have_payable_account: 'Should select vendors with entries that have payable account.',
-  vendors_should_selected_with_payable_account_only: 'Vendors contacts should selected with payable account only.',
-  customers_should_selected_with_receivable_account_only: 'Customers contacts should selected with receivable account only.',
+  should_select_customers_with_entries_have_receivable_account:
+    'Should select customers with entries that have receivable account.',
+  should_select_vendors_with_entries_have_payable_account:
+    'Should select vendors with entries that have payable account.',
+  vendors_should_selected_with_payable_account_only:
+    'Vendors contacts should selected with payable account only.',
+  customers_should_selected_with_receivable_account_only:
+    'Customers contacts should selected with receivable account only.',
   amount_cannot_be_zero_or_empty: 'Amount cannot be zero or empty.',
-  should_total_of_credit_and_debit_be_equal: 'Should total of credit and debit be equal.',
+  should_total_of_credit_and_debit_be_equal:
+    'Should total of credit and debit be equal.',
   no_accounts: 'No Accounts',
-  the_accounts_have_been_successfully_inactivated: 'The accounts have been successfully inactivated.',
+  the_accounts_have_been_successfully_inactivated:
+    'The accounts have been successfully inactivated.',
   account_code_is_not_unique: 'Account code is not unqiue.',
   are_sure_to_publish_this_expense:
     'Are you sure you want to publish this expense?',
@@ -546,10 +552,85 @@ export default {
 
   accounts_without_zero_balance: 'Accounts without zero-balance',
   accounts_with_transactions: 'Accounts with transactions',
-  include_accounts_once_has_transactions_on_given_date_period: 'Include accounts that onces have transactions on the given date period only.',
-  include_accounts_and_exclude_zero_balance: 'Include accounts and exclude that ones have zero-balance.',
-  all_accounts_including_with_zero_balance: 'All accounts, including that ones have zero-balance.',
+  include_accounts_once_has_transactions_on_given_date_period:
+    'Include accounts that onces have transactions on the given date period only.',
+  include_accounts_and_exclude_zero_balance:
+    'Include accounts and exclude that ones have zero-balance.',
+  all_accounts_including_with_zero_balance:
+    'All accounts, including that ones have zero-balance.',
   notifications: 'Notifications',
-  you_could_not_delete_account_has_child_accounts: 'You could not delete account has child accounts.',
-  journal_entry: 'Journal Entry'
+  you_could_not_delete_account_has_child_accounts:
+    'You could not delete account has child accounts.',
+  journal_entry: 'Journal Entry',
+
+  estimate: 'Estimate #',
+  estimate_date: 'Estimate Date',
+  expiration_date: 'Expiration Date',
+  customer_note: 'Customer Note',
+  select_customer_account: 'Select Customer Account',
+  select_product: 'Select Product',
+  reference: 'Reference #',
+  clear: 'Clear',
+  save_send: 'Save & Send',
+  estimates: 'Estimates',
+  edit_estimate: 'Edit Estimate',
+  delete_estimate: 'Delete Estimate',
+  new_estimate: 'New Estimate',
+  customer_name_: 'Customer name',
+  estimate_date_: 'Estismate date',
+  expiration_date_: 'Expiration date',
+  estimate_number_: 'Estimate number',
+  discount: 'Discount %',
+  quantity: 'Quantity',
+  rate: 'Rate',
+  estimate_list: 'Estimate List',
+
+  product_and_service: 'Product/Service',
+  the_estimate_has_been_successfully_edited:
+    'The estimate #{number} has been successfully edited.',
+  the_estimate_has_been_successfully_created:
+    'The estimate #{number} has been successfully created.',
+  the_estimate_has_been_successfully_deleted:
+    'The estimate has been successfully deleted.',
+  cannot_be_zero_or_empty: 'cannot be zero or empty.',
+  invocies: 'Invoices',
+  invoice_date: 'Invoice Date',
+  due_date: 'Due Date',
+  invoice_date_: 'Invoice date',
+  invoice_no: 'Invoice #',
+  invoice_no_: 'Invoice number',
+  due_date_: 'Due date',
+  invoice_message: 'Invoice Message',
+
+  edit_invoice: 'Edit Invoice',
+  delete_invoice: 'Delete Invoice',
+  new_invoice: 'New Invoice',
+  invoice_list: 'Invoice List',
+
+  the_invoice_has_been_successfully_edited:
+    'The invoice #{number} has been successfully edited.',
+  the_invocie_has_been_successfully_created:
+    'The invoice #{number} has been successfully created.',
+  the_invocie_has_been_successfully_deleted:
+    'The invoice has been successfully deleted.',
+  receipts: 'Receipts',
+  receipt: 'Receipt #',
+  receipt_date_: 'Receipt date',
+  receipt_date: 'Receipt Date',
+  deposit_account_: 'Deposit account',
+  receipt_message_: 'Receipt message',
+  receipt_no_: 'receipt number',
+  edit_receipt: 'Edit Receipt',
+  new_receipt: 'New Receipt',
+  receipt_message: 'Receipt Message',
+  statement: 'Statement',
+  deposit_account: 'Deposit Account',
+  send_to_email: 'Send to email',
+  select_deposit_account: 'Select Deposit Account',
+  the_receipt_has_been_successfully_created:
+    'The recepit has been successfully created.',
+  the_receipt_has_been_successfully_edited:
+    'The receipt  has been successfully edited.',
+  the_receipt_has_been_successfully_deleted:
+    'The receipt has been successfully deleted.',
 };
diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js
index dc4ec2e2b..d5b73c84a 100644
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -204,4 +204,75 @@ export default [
     }),
     breadcrumb: 'Customers',
   },
+
+  //Estimates
+  {
+    path: `/estimates/:id/edit`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/Estimate/Estimates'),
+    }),
+    breadcrumb: 'Edit',
+  },
+  {
+    path: `/estimates/new`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/Estimate/Estimates'),
+    }),
+    breadcrumb: 'New Estimates',
+  },
+  // {
+  //   path: `/estimates`,
+  //   component: LazyLoader({
+  //     loader: () => import('containers/Sales/EstimatesList'),
+  //   }),
+  //   breadcrumb: 'Estimates',
+  // },
+
+  //Invoices
+
+  {
+    path: `/invoices/:id/edit`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/Invoice/Invoices'),
+    }),
+    breadcrumb: 'Edit',
+  },
+
+  {
+    path: `/invoices/new`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/Invoice/Invoices'),
+    }),
+    breadcrumb: 'New Invoice',
+  },
+  // {
+  //   path:`/invoices`,
+  //   component:LazyLoader({
+  //     loader:()=>import('containers/Sales/Invoice/Invoices')
+  //   }),
+  //   breadcrumb: 'New Invoice',
+  // },
+
+  //Receipts
+  {
+    path: `/receipts/:id/edit`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/Receipt/Receipts'),
+    }),
+    breadcrumb: 'Edit',
+  },
+  {
+    path: `/receipts/new`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/Receipt/Receipts'),
+    }),
+    breadcrumb: 'New Receipt',
+  },
+  // {
+  //   path: `/receipts`,
+  //   component: LazyLoader({
+  //     loader: () => import('containers/Sales/Receipt/Receipts'),
+  //   }),
+  //   breadcrumb: 'New Receipt',
+  // }
 ];
diff --git a/client/src/store/Estimate/estimates.actions.js b/client/src/store/Estimate/estimates.actions.js
new file mode 100644
index 000000000..c67d8ab80
--- /dev/null
+++ b/client/src/store/Estimate/estimates.actions.js
@@ -0,0 +1,138 @@
+import ApiService from 'services/ApiService';
+import t from 'store/types';
+
+export const submitEstimate = ({ form }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.post('sales/estimates', form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+
+          reject(data?.errors);
+        });
+    });
+};
+
+export const editEstimate = (id, form) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.post(`estimates/${id}`, form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          reject(data?.errors);
+        });
+    });
+};
+
+export const deleteEstimate = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resovle, reject) => {
+      ApiService.delete(`estimates/${id}`)
+        .then((response) => {
+          dispatch({ type: t.ESTIMATE_DELETE });
+          resovle(response);
+        })
+        .catch((error) => {
+          reject(error.response.data.errors || []);
+        });
+    });
+};
+
+export const fetchEstimate = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resovle, reject) => {
+      ApiService.get(`estimate/${id}`)
+        .then((response) => {
+          dispatch({
+            type: t.ESTIMATE_SET,
+            payload: {
+              id,
+              estimate: response.data.estimate,
+            },
+          });
+          resovle(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          reject(data?.errors);
+        });
+    });
+};
+
+export const fetchEstimatesTable = ({ query = {} }) => {
+  return (dispatch, getState) =>
+    new Promise((resolve, rejcet) => {
+      const pageQuery = getState().estimates.tableQuery;
+
+      dispatch({
+        type: t.ESTIMATES_TABLE_LOADING,
+        payload: {
+          loading: true,
+        },
+      });
+      ApiService.get('estimates', {
+        params: { ...pageQuery, ...query },
+      })
+        .then((response) => {
+          dispatch({
+            type: t.ESTIMATES_PAGE_SET,
+            payload: {
+              estimates: response.data.estimates.results,
+              pagination: response.data.estimates.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
+          });
+          dispatch({
+            type: t.ESTIMATES_ITEMS_SET,
+            payload: {
+              estimates: response.data.estimates.results,
+            },
+          });
+          dispatch({
+            type: t.ESTIMATES_PAGINATION_SET,
+            payload: {
+              pagination: response.data.estimates.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
+          });
+          dispatch({
+            type: t.ESTIMATES_TABLE_LOADING,
+            payload: {
+              loading: false,
+            },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          rejcet(error);
+        });
+    });
+};
diff --git a/client/src/store/Estimate/estimates.reducer.js b/client/src/store/Estimate/estimates.reducer.js
new file mode 100644
index 000000000..e52a9ce3b
--- /dev/null
+++ b/client/src/store/Estimate/estimates.reducer.js
@@ -0,0 +1,105 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { createTableQueryReducers } from 'store/queryReducers';
+
+import t from 'store/types';
+
+const initialState = {
+  items: {},
+  views: {},
+  loading: false,
+  tableQuery: {
+    page_size: 12,
+    page: 1,
+  },
+  currentViewId: -1,
+};
+
+const defaultEstimate = {
+  products: [],
+};
+
+const reducer = createReducer(initialState, {
+  [t.ESTIMATE_SET]: (state, action) => {
+    const { id, estiamate } = action.payload;
+    const _estimate = state.items[id] || {};
+
+    state.items[id] = { ...defaultEstimate, ..._estimate, ...estiamate };
+  },
+  [t.ESTIMATES_ITEMS_SET]: (state, action) => {
+    const { estiamates } = action.payload;
+    const _estimates = {};
+    estiamates.forEach((estimate) => {
+      _estimates[estimate.id] = {
+        ...defaultEstimate,
+        ...estimate,
+      };
+    });
+    state.items = {
+      ...state.items,
+      ..._estimates,
+    };
+  },
+
+  [t.ESTIMATES_TABLE_LOADING]: (state, action) => {
+    const { loading } = action.payload;
+    state.loading = loading;
+  },
+
+  [t.ESTIMATES_SET_CURRENT_VIEW]: (state, action) => {
+    state.currentViewId = action.currentViewId;
+  },
+
+  [t.ESTIMATE_DELETE]: (state, action) => {
+    const { id } = action.payload;
+
+    if (typeof state.items[id] !== 'undefined') {
+      delete state.items[id];
+    }
+  },
+
+  [t.ESTIMATES_PAGE_SET]: (state, action) => {
+    const { customViewId, estimates, pagination } = action.payload;
+
+    const viewId = customViewId || -1;
+    const view = state.views[viewId] || {};
+
+    state.views[viewId] = {
+      ...view,
+      pages: {
+        ...(state.views?.[viewId]?.pages || {}),
+        [pagination.page]: {
+          ids: estimates.map((i) => i.id),
+        },
+      },
+    };
+  },
+
+  [t.ESTIMATES_PAGINATION_SET]: (state, action) => {
+    const { pagination, customViewId } = action.payload;
+
+    const mapped = {
+      pageSize: parseInt(pagination.pageSize, 10),
+      page: parseInt(pagination.page, 10),
+      total: parseInt(pagination.total, 10),
+    };
+    const paginationMeta = {
+      ...mapped,
+      pagesCount: Math.ceil(mapped.total / mapped.pageSize),
+      pageIndex: Math.max(mapped.page - 1, 0),
+    };
+
+    state.views = {
+      ...state.views,
+      [customViewId]: {
+        ...(state.views?.[customViewId] || {}),
+        paginationMeta,
+      },
+    };
+  },
+});
+
+export default createTableQueryReducers('estimates', reducer);
+
+export const getEstimateById = (state, id) => {
+  return state.estiamates.items[id];
+};
diff --git a/client/src/store/Estimate/estimates.selectors.js b/client/src/store/Estimate/estimates.selectors.js
new file mode 100644
index 000000000..d75d0e0fb
--- /dev/null
+++ b/client/src/store/Estimate/estimates.selectors.js
@@ -0,0 +1,44 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
+
+const estimateTableQuery = (state) => state.estimates.tableQuery;
+
+export const getEstimatesTableQuery = createSelector(
+  paginationLocationQuery,
+  estimateTableQuery,
+  (location, query) => ({
+    ...location,
+    ...query,
+  }),
+);
+
+const estimatesSelector = (state, props, query) => {
+  const viewId = state.estimates.currentViewId;
+  return state.estimates.views?.[viewId]?.pages?.[query.page];
+};
+
+const EstimateItemsSelector = (state) => state.estimates.items;
+
+export const getEstimateCurrentPage = () =>
+  createSelector(estimatesSelector, EstimateItemsSelector, (page, items) => {
+    return typeof page === 'object'
+      ? pickItemsFromIds(items, page.ids) || []
+      : [];
+  });
+
+const estimateByIdSelector = (state, props) => state.estimates.items;
+
+export const getEstimateByIdFactory = () =>
+  createSelector(estimateByIdSelector, (estimate) => {
+    return estimate;
+  });
+
+const paginationSelector = (state, props) => {
+  const viewId = state.estimates.currentViewId;
+  return state.estimates.views?.[viewId];
+};
+
+export const getEstimatesPaginationMetaFactory = () =>
+  createSelector(paginationSelector, (estimatePage) => {
+    return estimatePage?.paginationMeta || {};
+  });
diff --git a/client/src/store/Estimate/estimates.types.js b/client/src/store/Estimate/estimates.types.js
new file mode 100644
index 000000000..5eb1bb7a1
--- /dev/null
+++ b/client/src/store/Estimate/estimates.types.js
@@ -0,0 +1,13 @@
+export default {
+  ESTIMATES_LIST_SET: 'ESTIMATES_LIST_SET',
+  ESTIMATE_SET: 'ESTIMATE_SET',
+  ESTIMATE_DELETE: 'ESTIMATE_DELETE',
+  ESTIMATES_BULK_DELETE: 'ESTIMATES_BULK_DELETE',
+  ESTIMATES_SET_CURRENT_VIEW: 'ESTIMATES_SET_CURRENT_VIEW',
+  ESTIMATES_TABLE_QUERIES_ADD: 'ESTIMATES_TABLE_QUERIES_ADD',
+  ESTIMATES_TABLE_LOADING: 'ESTIMATES_TABLE_LOADING',
+  ESTIMATES_PAGINATION_SET: 'ESTIMATES_PAGINATION_SET',
+  ESTIMATES_PAGE_SET: 'ESTIMATES_PAGE_SET',
+  ESTIMATES_ITEMS_SET:'ESTIMATES_ITEMS_SET',
+
+};
diff --git a/client/src/store/Invoice/invoices.actions.js b/client/src/store/Invoice/invoices.actions.js
new file mode 100644
index 000000000..d6673925d
--- /dev/null
+++ b/client/src/store/Invoice/invoices.actions.js
@@ -0,0 +1,137 @@
+import ApiService from 'services/ApiService';
+import t from 'store/types';
+
+export const submitInvoice = ({ form }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.post('sales/invoices', form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+
+          reject(data?.errors);
+        });
+    });
+};
+
+export const deleteInvoice = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resovle, reject) => {
+      ApiService.delete(`invoice/${id}`)
+        .then((response) => {
+          dispatch({ type: t.INVOICE_DELETE });
+          resovle(response);
+        })
+        .catch((error) => {
+          reject(error.response.data.errors || []);
+        });
+    });
+};
+
+export const editInvoice = (id, form) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.post(`invoice/${id}`, form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          reject(data?.errors);
+        });
+    });
+};
+export const fetchInvoicesTable = ({ query = {} }) => {
+  return (dispatch, getState) =>
+    new Promise((resolve, rejcet) => {
+      const pageQuery = getState().invoices.tableQuery;
+
+      dispatch({
+        type: t.INVOICES_TABLE_LOADING,
+        payload: {
+          loading: true,
+        },
+      });
+      ApiService.get('invoices', {
+        params: { ...pageQuery, ...query },
+      })
+        .then((response) => {
+          dispatch({
+            type: t.INVOICES_PAGE_SET,
+            payload: {
+              invoices: response.data.invoices.results,
+              pagination: response.data.invoices.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
+          });
+          dispatch({
+            type: t.INVOICES_ITEMS_SET,
+            payload: {
+              invoices: response.data.invoices.results,
+            },
+          });
+          dispatch({
+            type: t.INVOICES_PAGINATION_SET,
+            payload: {
+              pagination: response.data.invoices.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
+          });
+          dispatch({
+            type: t.INVOICES_TABLE_LOADING,
+            payload: {
+              loading: false,
+            },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          rejcet(error);
+        });
+    });
+};
+
+export const fetchInvoice = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resovle, reject) => {
+      ApiService.get(`invoices/${id}`)
+        .then((response) => {
+          dispatch({
+            type: t.INVOICE_SET,
+            payload: {
+              id,
+              invoice: response.data.invoice,
+            },
+          });
+          resovle(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          reject(data?.errors);
+        });
+    });
+};
diff --git a/client/src/store/Invoice/invoices.reducer.js b/client/src/store/Invoice/invoices.reducer.js
new file mode 100644
index 000000000..d73488705
--- /dev/null
+++ b/client/src/store/Invoice/invoices.reducer.js
@@ -0,0 +1,32 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { createTableQueryReducers } from 'store/queryReducers';
+
+import t from 'store/types';
+
+const initialState = {
+  items: {},
+  views: {},
+  loading: false,
+  tableQuery: {
+    page_size: 12,
+    page: 1,
+  },
+  currentViewId: -1,
+};
+
+const defaultInvoice = {
+  entires: [],
+};
+
+
+
+
+const reducer = createReducer(initialState, {
+[t.INVOICE_SET]:(state,actio)=>{
+
+  const {id,INVOICE_SET} = action.payload;
+
+}
+
+
+});
diff --git a/client/src/store/Invoice/invoices.selector.js b/client/src/store/Invoice/invoices.selector.js
new file mode 100644
index 000000000..9422f83b5
--- /dev/null
+++ b/client/src/store/Invoice/invoices.selector.js
@@ -0,0 +1,9 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+const invoiceByIdSelector = (state, props) =>
+  state.invoices.items[props.invoiceId];
+
+export const getInvoiceById = () =>
+  createSelector(invoiceByIdSelector, (_invoice) => {
+    return _invoice;
+  });
diff --git a/client/src/store/Invoice/invoices.types.js b/client/src/store/Invoice/invoices.types.js
new file mode 100644
index 000000000..99d888867
--- /dev/null
+++ b/client/src/store/Invoice/invoices.types.js
@@ -0,0 +1,12 @@
+export default {
+  INVOICE_DELETE: 'INVOICE_DELETE',
+  INVOICES_BULK_DELETE: 'INVOICES_BULK_DELETE',
+  INVOICES_LIST_SET: 'INVOICES_LIST_SET',
+  INVOICE_SET: 'INVOICE_SET',
+  INVOICES_SET_CURRENT_VIEW: 'INVOICES_SET_CURRENT_VIEW',
+  INVOICES_TABLE_QUERIES_ADD: 'INVOICES_TABLE_QUERIES_ADD',
+  INVOICES_TABLE_LOADING: 'INVOICES_TABLE_LOADING',
+  INVOICES_PAGINATION_SET: 'INVOICES_PAGINATION_SET',
+  INVOICES_PAGE_SET: 'INVOICES_PAGE_SET',
+  INVOICES_ITEMS_SET: 'INVOICES_ITEMS_SET',
+};
diff --git a/client/src/store/receipt/receipt.actions.js b/client/src/store/receipt/receipt.actions.js
new file mode 100644
index 000000000..e6425c442
--- /dev/null
+++ b/client/src/store/receipt/receipt.actions.js
@@ -0,0 +1,136 @@
+import ApiService from 'services/ApiService';
+import t from 'store/types';
+
+export const submitReceipt = ({ form }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.post('sales/receipts', form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          reject(data?.errors);
+        });
+    });
+};
+
+export const deleteReceipt = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resovle, reject) => {
+      ApiService.delete(`receipts/${id}`)
+        .then((response) => {
+          dispatch({ type: t.RECEIPT_DELETE });
+          resovle(response);
+        })
+        .catch((error) => {
+          reject(error.response.data.errors || []);
+        });
+    });
+};
+
+export const editReceipt = (id, form) => {
+  return (dispatch) =>
+    new Promise((resolve, rejcet) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.delete(`receipt/${id}`, form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          rejcet(data?.errors);
+        });
+    });
+};
+
+export const fetchReceipt = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resovle, reject) => {
+      ApiService.get(`receipt/${id}`)
+        .then((response) => {
+          dispatch({
+            type: t.RECEIPT_SET,
+            payload: {
+              id,
+              receipt: response.data.receipt,
+            },
+          });
+          resovle(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          reject(data?.errors);
+        });
+    });
+};
+
+export const fetchReceiptsTable = ({ query = {} }) => {
+  return (dispatch, getState) =>
+    new Promise((resolve, rejcet) => {
+      const pageQuery = getState().receipt.tableQuery;
+
+      dispatch({
+        type: t.RECEIPTS_TABLE_LOADING,
+        payload: {
+          loading: true,
+        },
+      });
+      ApiService.get('receipts', {
+        params: { ...pageQuery, ...query },
+      })
+        .then((response) => {
+          dispatch({
+            type: t.RECEIPTS_PAGE_SET,
+            payload: {
+              receipts: response.data.receipts.results,
+              pagination: response.data.receipts.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
+          });
+          dispatch({
+            type: t.RECEIPTS_ITEMS_SET,
+            payload: {
+              receipts: response.data.receipts.results,
+            },
+          });
+          dispatch({
+            type: t.RECEIPTS_PAGINATION_SET,
+            payload: {
+              pagination: response.data.receipts.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
+          });
+          dispatch({
+            type: t.RECEIPTS_TABLE_LOADING,
+            payload: {
+              loading: false,
+            },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          rejcet(error);
+        });
+    });
+};
diff --git a/client/src/store/receipt/receipt.reducer.js b/client/src/store/receipt/receipt.reducer.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/store/receipt/receipt.selector.js b/client/src/store/receipt/receipt.selector.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/store/receipt/receipt.type.js b/client/src/store/receipt/receipt.type.js
new file mode 100644
index 000000000..c50dc5a0d
--- /dev/null
+++ b/client/src/store/receipt/receipt.type.js
@@ -0,0 +1,12 @@
+export default {
+  RECEIPT_DELETE: 'RECEIPT_DELETE',
+  RECEIPTS_BULK_DELETE: 'RECEIPTS_BULK_DELETE',
+  RECEIPTS_LIST_SET: 'RECEIPTS_LIST_SET',
+  RECEIPT_SET: 'RECEIPT_SET',
+  RECEIPTS_SET_CURRENT_VIEW: 'RECEIPTS_SET_CURRENT_VIEW',
+  RECEIPTS_TABLE_QUERIES_ADD: 'RECEIPTS_TABLE_QUERIES_ADD',
+  RECEIPTS_TABLE_LOADING: 'RECEIPTS_TABLE_LOADING',
+  RECEIPTS_PAGINATION_SET: 'RECEIPTS_PAGINATION_SET',
+  RECEIPTS_PAGE_SET: 'RECEIPTS_PAGE_SET',
+  RECEIPTS_ITEMS_SET: 'RECEIPTS_ITEMS_SET',
+};
diff --git a/client/src/store/reducers.js b/client/src/store/reducers.js
index cd401f3db..6a2fde88c 100644
--- a/client/src/store/reducers.js
+++ b/client/src/store/reducers.js
@@ -18,6 +18,7 @@ import globalSearch from './search/search.reducer';
 import exchangeRates from './ExchangeRate/exchange.reducer';
 import globalErrors from './globalErrors/globalErrors.reducer';
 import customers from './customers/customers.reducer';
+import estimates from './Estimate/estimates.reducer';
 
 export default combineReducers({
   authentication,
@@ -38,4 +39,5 @@ export default combineReducers({
   exchangeRates,
   globalErrors,
   customers,
+  estimates
 });
diff --git a/client/src/store/types.js b/client/src/store/types.js
index 25af78fbb..6a089d1d0 100644
--- a/client/src/store/types.js
+++ b/client/src/store/types.js
@@ -17,6 +17,9 @@ import search from './search/search.type';
 import register from './registers/register.type';
 import exchangeRate from './ExchangeRate/exchange.type';
 import customer from './customers/customers.type';
+import estimates from './Estimate/estimates.types';
+import invoices from './Invoice/invoices.types';
+import receipts from './receipt/receipt.type';
 
 export default {
   ...authentication,
@@ -38,4 +41,7 @@ export default {
   ...register,
   ...exchangeRate,
   ...customer,
+  ...estimates,
+  ...invoices,
+  ...receipts
 };
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index d6a8e44a7..ba6f77aaf 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -59,9 +59,10 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import 'pages/invite-user.scss';
 @import 'pages/exchange-rate.scss';
 @import 'pages/customer.scss';
+@import 'pages/estimate.scss';
 
-// Views
-@import 'views/filter-dropdown';
+ // Views
+  @import 'views/filter-dropdown';
 @import 'views/sidebar';
 
 .App {
@@ -100,45 +101,42 @@ body.authentication {
   box-shadow: none;
 }
 
-.select-list--fill-popover{
-
+.select-list--fill-popover {
   .bp3-transition-container,
-  .bp3-popover{
+  .bp3-popover {
     min-width: 100%;
   }
 }
 
-.select-list--fill-button{
-
+.select-list--fill-button {
   .bp3-popover-wrapper,
-  .bp3-popover-target{
+  .bp3-popover-target {
     display: block;
     width: 100%;
   }
-  .bp3-button{
+  .bp3-button {
     width: 100%;
     justify-content: start;
   }
 }
 
-
-.bp3-datepicker-caption .bp3-html-select::after{
+.bp3-datepicker-caption .bp3-html-select::after {
   margin-right: 6px;
 }
 
-.hint{
+.hint {
   margin-left: 6px;
   position: relative;
   top: -1px;
-  
-  .bp3-icon{
-    color: #A1B2C5;
+
+  .bp3-icon {
+    color: #a1b2c5;
   }
 
-  .bp3-popover-target:hover .bp3-icon{
+  .bp3-popover-target:hover .bp3-icon {
     color: #90a1b5;
   }
-  .bp3-icon{
+  .bp3-icon {
     vertical-align: middle;
   }
 }
@@ -155,20 +153,19 @@ body.authentication {
   }
 }
 
-.bp3-form-group .bp3-label{
-
-  .hint{
-    .bp3-popover-wrapper{
+.bp3-form-group .bp3-label {
+  .hint {
+    .bp3-popover-wrapper {
       display: inline;
     }
   }
 
-  &:not(.bp3-inline) .hint .bp3-popover-target{
+  &:not(.bp3-inline) .hint .bp3-popover-target {
     display: inline;
     margin-left: 0;
   }
 }
 
-.bp3-popover.bp3-tooltip{
+.bp3-popover.bp3-tooltip {
   max-width: 300px;
 }
diff --git a/client/src/style/pages/estimate.scss b/client/src/style/pages/estimate.scss
new file mode 100644
index 000000000..fe0f1867b
--- /dev/null
+++ b/client/src/style/pages/estimate.scss
@@ -0,0 +1,379 @@
+.estimate-form {
+  padding-bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  .bp3-form-group {
+    width: 100%;
+    margin: 25px 20px 15px;
+  }
+  .bp3-label {
+    margin: 0 20px 0;
+    font-weight: 500;
+    font-size: 13px;
+    color: #444;
+    width: 130px;
+  }
+  .bp3-form-content {
+    width: 35%;
+    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+      width: 120%;
+    }
+  }
+
+  &__table {
+    padding: 15px 15px 0;
+
+    .bp3-form-group {
+      margin-bottom: 0;
+    }
+    .table {
+      border: 1px dotted rgb(195, 195, 195);
+      border-bottom: transparent;
+      border-left: transparent;
+
+      .th,
+      .td {
+        border-left: 1px dotted rgb(195, 195, 195);
+
+        &.index {
+          > span,
+          > div {
+            text-align: center;
+            width: 100%;
+            font-weight: 500;
+          }
+        }
+      }
+
+      .thead {
+        .tr .th {
+          padding: 10px 10px;
+          background-color: #f2f5fa;
+          font-size: 14px;
+          font-weight: 500;
+          color: #333;
+        }
+      }
+
+      .tbody {
+        .tr .td {
+          padding: 7px;
+          border-bottom: 1px dotted rgb(195, 195, 195);
+          min-height: 46px;
+
+          &.index {
+            background-color: #f2f5fa;
+            text-align: center;
+
+            > span {
+              margin-top: auto;
+              margin-bottom: auto;
+            }
+          }
+        }
+        .tr {
+          .bp3-form-group .bp3-input,
+          .form-group--select-list .bp3-button {
+            border-radius: 3px;
+            padding-left: 8px;
+            padding-right: 8px;
+          }
+
+          .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
+          .form-group--select-list:not(.bp3-intent-danger) .bp3-button {
+            border-color: #e5e5e5;
+          }
+
+          &:last-of-type {
+            .td {
+              border-bottom: transparent;
+
+              .bp3-button,
+              .bp3-input-group {
+                display: none;
+              }
+            }
+          }
+
+          .td.actions {
+            .bp3-button {
+              background-color: transparent;
+              color: #e68f8e;
+
+              &:hover {
+                color: #c23030;
+              }
+            }
+          }
+
+          &.row--total {
+            .td.amount {
+              font-weight: bold;
+            }
+          }
+        }
+      }
+      .th {
+        color: #444;
+        font-weight: 600;
+        border-bottom: 1px dotted #666;
+      }
+
+      .td {
+        border-bottom: 1px dotted #999;
+
+        &.description {
+          .bp3-form-group {
+            width: 100%;
+          }
+        }
+      }
+
+      .actions.td {
+        .bp3-button {
+          background: transparent;
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  &__floating-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    padding: 18px 18px;
+    border-top: 1px solid #ececec;
+
+    .has-mini-sidebar & {
+      left: 50px;
+    }
+  }
+  .bp3-button {
+    &.button--clear-lines {
+      background-color: #fcefef;
+    }
+  }
+  .button--clear-lines,
+  .button--new-line {
+    padding-left: 14px;
+    padding-right: 14px;
+  }
+  .dropzone-container {
+    margin-top: 0;
+    align-self: flex-end;
+  }
+  .dropzone {
+    width: 300px;
+    height: 75px;
+  }
+
+  .form-group--description {
+    .bp3-label {
+      font-weight: 500;
+      font-size: 13px;
+      color: #444;
+    }
+    .bp3-form-content {
+      // width: 280px;
+      textarea {
+        width: 450px;
+        min-height: 75px;
+      }
+    }
+  }
+}
+
+
+// .estimate-form {
+//   padding-bottom: 30px;
+//   display: flex;
+//   flex-direction: column;
+
+//   .bp3-form-group {
+//     margin: 25px 20px 15px;
+//     width: 100%;
+//     .bp3-label {
+//       font-weight: 500;
+//       font-size: 13px;
+//       color: #444;
+//       width: 130px;
+//     }
+//     .bp3-form-content {
+//       // width: 400px;
+//       width: 45%;
+//     }
+//   }
+//   // .expense-form-footer {
+//   //   display: flex;
+//   //   padding: 30px 25px 0;
+//   //   justify-content: space-between;
+//   // }
+
+//   &__primary-section {
+//     background: #fbfbfb;
+//   }
+//   &__table {
+//     padding: 15px 15px 0;
+
+//     .bp3-form-group {
+//       margin-bottom: 0;
+//     }
+//     .table {
+//       border: 1px dotted rgb(195, 195, 195);
+//       border-bottom: transparent;
+//       border-left: transparent;
+
+//       .th,
+//       .td {
+//         border-left: 1px dotted rgb(195, 195, 195);
+
+//         &.index {
+//           > span,
+//           > div {
+//             text-align: center;
+//             width: 100%;
+//             font-weight: 500;
+//           }
+//         }
+//       }
+
+//       .thead {
+//         .tr .th {
+//           padding: 10px 10px;
+//           background-color: #f2f5fa;
+//           font-size: 14px;
+//           font-weight: 500;
+//           color: #333;
+//         }
+//       }
+
+//       .tbody {
+//         .tr .td {
+//           padding: 7px;
+//           border-bottom: 1px dotted rgb(195, 195, 195);
+//           min-height: 46px;
+
+//           &.index {
+//             background-color: #f2f5fa;
+//             text-align: center;
+
+//             > span {
+//               margin-top: auto;
+//               margin-bottom: auto;
+//             }
+//           }
+//         }
+//         .tr {
+//           .bp3-form-group .bp3-input,
+//           .form-group--select-list .bp3-button {
+//             border-radius: 3px;
+//             padding-left: 8px;
+//             padding-right: 8px;
+//           }
+
+//           .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
+//           .form-group--select-list:not(.bp3-intent-danger) .bp3-button {
+//             border-color: #e5e5e5;
+//           }
+
+//           &:last-of-type {
+//             .td {
+//               border-bottom: transparent;
+
+//               .bp3-button,
+//               .bp3-input-group {
+//                 display: none;
+//               }
+//             }
+//           }
+
+//           .td.actions {
+//             .bp3-button {
+//               background-color: transparent;
+//               color: #e68f8e;
+
+//               &:hover {
+//                 color: #c23030;
+//               }
+//             }
+//           }
+
+//           &.row--total {
+//             .td.amount {
+//               font-weight: bold;
+//             }
+//           }
+//         }
+//       }
+//       .th {
+//         color: #444;
+//         font-weight: 600;
+//         border-bottom: 1px dotted #666;
+//       }
+
+//       .td {
+//         border-bottom: 1px dotted #999;
+
+//         &.description {
+//           .bp3-form-group {
+//             width: 100%;
+//           }
+//         }
+//       }
+
+//       .actions.td {
+//         .bp3-button {
+//           background: transparent;
+//           margin: 0;
+//         }
+//       }
+//     }
+//   }
+//   &__floating-footer {
+//     position: fixed;
+//     bottom: 0;
+//     width: 100%;
+//     background: #fff;
+//     padding: 18px 18px;
+//     border-top: 1px solid #ececec;
+
+//     .has-mini-sidebar & {
+//       left: 50px;
+//     }
+//   }
+//   .bp3-button {
+//     &.button--clear-lines {
+//       background-color: #fcefef;
+//     }
+//   }
+//   .button--clear-lines,
+//   .button--new-line {
+//     padding-left: 14px;
+//     padding-right: 14px;
+//   }
+//   .dropzone-container {
+//     margin-top: 0;
+//     align-self: flex-end;
+//   }
+//   .dropzone {
+//     width: 300px;
+//     height: 75px;
+//   }
+
+//   .form-group--description {
+//     .bp3-label {
+//       font-weight: 500;
+//       font-size: 13px;
+//       color: #444;
+//     }
+//     .bp3-form-content {
+//       // width: 280px;
+//       textarea {
+//         width: 450px;
+//         min-height: 75px;
+//       }
+//     }
+//   }
+// }

From 1cb826163b03ab5fe7bad5cee1fa830495a73465 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Tue, 4 Aug 2020 17:51:17 +0200
Subject: [PATCH 2/6] WIP / Feature Fix _bills

---
 .../PaymentReceiveListFieldCell.js            |  35 ++
 .../src/components/PaymentReceiveListField.js |  38 +++
 client/src/config/sidebarMenu.js              |  16 +-
 client/src/containers/Purchases/BillForm.js   | 299 ++++++++++++++++++
 .../containers/Purchases/BillFormFooter.js    |  41 +++
 .../containers/Purchases/BillFormHeader.js    | 185 +++++++++++
 client/src/containers/Purchases/Bills.js      |  62 ++++
 .../containers/Purchases/withBillActions.js   |  32 ++
 .../PaymentReceive/PaymentReceiveForm.js      | 260 +++++++++++++++
 .../PaymentReceiveFormFooter.js               |  46 +++
 .../PaymentReceiveFormHeader.js               | 204 ++++++++++++
 .../PaymentReceiveItemsTable.js               |  13 +
 .../Sales/PaymentReceive/PaymentReceives.js   |  69 ++++
 .../withPaymentReceivesActions.js             |  34 ++
 client/src/lang/en/index.js                   |  29 ++
 client/src/routes/dashboard.js                |  38 +++
 client/src/store/Bills/bills.actions.js       | 136 ++++++++
 client/src/store/Bills/bills.reducer.js       |   0
 client/src/store/Bills/bills.selectors.js     |   6 +
 client/src/store/Bills/bills.type.js          |  12 +
 .../PaymentReceive/paymentReceive.actions.js  | 136 ++++++++
 .../PaymentReceive/paymentReceive.reducer.js  |   0
 .../PaymentReceive/paymentReceive.selector.js |   0
 .../PaymentReceive/paymentReceive.type.js     |  11 +
 client/src/store/types.js                     |   6 +-
 25 files changed, 1703 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/DataTableCells/PaymentReceiveListFieldCell.js
 create mode 100644 client/src/components/PaymentReceiveListField.js
 create mode 100644 client/src/containers/Purchases/BillForm.js
 create mode 100644 client/src/containers/Purchases/BillFormFooter.js
 create mode 100644 client/src/containers/Purchases/BillFormHeader.js
 create mode 100644 client/src/containers/Purchases/Bills.js
 create mode 100644 client/src/containers/Purchases/withBillActions.js
 create mode 100644 client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
 create mode 100644 client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js
 create mode 100644 client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
 create mode 100644 client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
 create mode 100644 client/src/containers/Sales/PaymentReceive/PaymentReceives.js
 create mode 100644 client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js
 create mode 100644 client/src/store/Bills/bills.actions.js
 create mode 100644 client/src/store/Bills/bills.reducer.js
 create mode 100644 client/src/store/Bills/bills.selectors.js
 create mode 100644 client/src/store/Bills/bills.type.js
 create mode 100644 client/src/store/PaymentReceive/paymentReceive.actions.js
 create mode 100644 client/src/store/PaymentReceive/paymentReceive.reducer.js
 create mode 100644 client/src/store/PaymentReceive/paymentReceive.selector.js
 create mode 100644 client/src/store/PaymentReceive/paymentReceive.type.js

diff --git a/client/src/components/DataTableCells/PaymentReceiveListFieldCell.js b/client/src/components/DataTableCells/PaymentReceiveListFieldCell.js
new file mode 100644
index 000000000..0b37e05f7
--- /dev/null
+++ b/client/src/components/DataTableCells/PaymentReceiveListFieldCell.js
@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import PaymentReceiveListField from 'components/PaymentReceiveListField';
+import classNames from 'classnames';
+import { FormGroup, Classes, Intent } from '@blueprintjs/core';
+
+function PaymentReceiveListFieldCell({
+  column: { id },
+  row: { index },
+  cell: { value: initialValue },
+  payload: { invoices, updateData, errors },
+}) {
+  const handleInvoicesSelected = useCallback(
+    (_item) => {
+      updateData(index, id, _item.id);
+    },
+    [updateData, index, id],
+  );
+
+  const error = errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames('form-group--selcet-list', Classes.FILL)}
+    >
+      <PaymentReceiveListField
+        invoices={invoices}
+        onInvoiceSelected={handleInvoicesSelected}
+        selectedInvoiceId={initialValue}
+      />
+    </FormGroup>
+  );
+}
+
+export default PaymentReceiveListFieldCell;
diff --git a/client/src/components/PaymentReceiveListField.js b/client/src/components/PaymentReceiveListField.js
new file mode 100644
index 000000000..4c9f828ba
--- /dev/null
+++ b/client/src/components/PaymentReceiveListField.js
@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { MenuItem } from '@blueprintjs/core';
+import ListSelect from 'components/ListSelect';
+import { FormattedMessage as T } from 'react-intl';
+
+function PaymentReceiveListField({
+  invoices,
+  selectedInvoiceId,
+  onInvoiceSelected,
+  defaultSelectText = <T id={'select_invoice'} />,
+}) {
+  const onInvoiceSelect = useCallback((_invoice) => {
+    onInvoiceSelected && onInvoiceSelected(_invoice);
+  });
+
+  const handleInvoiceRenderer = useCallback(
+    (item, { handleClick }) => (
+      <MenuItem id={item.id} name={item.name} onClick={handleClick} />
+    ),
+    [],
+  );
+
+  return (
+    <ListSelect
+      item={invoices}
+      noResults={<MenuItem disabled={true} text="No results." />}
+      itemRenderer={handleInvoiceRenderer}
+      popoverProps={{ minimal: true }}
+      onItemSelect={onInvoiceSelect}
+      selectedItem={`${selectedInvoiceId}`}
+      selectedItemProp={'id'}
+      labelProp={'name'}
+      defaultText={defaultSelectText}
+    />
+  );
+}
+
+export default PaymentReceiveListField;
diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js
index 7f6e7bf23..9e72634cf 100644
--- a/client/src/config/sidebarMenu.js
+++ b/client/src/config/sidebarMenu.js
@@ -46,6 +46,13 @@ export default [
         text: <T id={'invocies'} />,
         href: '/invoices/new',
       },
+      {
+        text: <T id={'payment_receives'} />,
+        href: '/payment-receive/new',
+      },
+      {
+        divider: true,
+      },
       {
         text: <T id={'receipts'} />,
         href: '/receipts/new',
@@ -56,10 +63,11 @@ export default [
     text: <T id={'purchases'} />,
     children: [
       {
-        icon: 'cut',
-        text: 'cut',
-        label: '⌘C',
-        disabled: false,
+        text: <T id={'bills'} />,
+        href: '/bill/new',
+      },
+      {
+        text: <T id={'payment_mades'} />,
       },
     ],
   },
diff --git a/client/src/containers/Purchases/BillForm.js b/client/src/containers/Purchases/BillForm.js
new file mode 100644
index 000000000..fce4b0ae4
--- /dev/null
+++ b/client/src/containers/Purchases/BillForm.js
@@ -0,0 +1,299 @@
+import React, {
+  useMemo,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+} 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, omit } from 'lodash';
+
+import BillFormHeader from './BillFormHeader';
+import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
+import BillFormFooter from './BillFormFooter';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withMediaActions from 'containers/Media/withMediaActions';
+import withBillActions from './withBillActions';
+
+import { AppToaster } from 'components';
+import Dragzone from 'components/Dragzone';
+import useMedia from 'hooks/useMedia';
+
+import { compose, repeatValue } from 'utils';
+
+const MIN_LINES_NUMBER = 4;
+
+function BillForm({
+  //#WithMedia
+  requestSubmitMedia,
+  requestDeleteMedia,
+
+  //#withBillActions
+  requestSubmitBill,
+
+  //#withDashboard
+  changePageTitle,
+  changePageSubtitle,
+
+  //#withBillDetail
+  bill,
+
+  //#Own Props
+  onFormSubmit,
+  onCancelForm,
+}) {
+  const { formatMessage } = useIntl();
+  const [payload, setPayload] = useState({});
+
+  const {
+    setFiles,
+    saveMedia,
+    deletedFiles,
+    setDeletedFiles,
+    deleteMedia,
+  } = useMedia({
+    saveCallback: requestSubmitMedia,
+    deleteCallback: requestDeleteMedia,
+  });
+
+  const handleDropFiles = useCallback((_files) => {
+    setFiles(_files.filter((file) => file.uploaded === false));
+  }, []);
+
+  const savedMediaIds = useRef([]);
+  const clearSavedMediaIds = () => {
+    savedMediaIds.current = [];
+  };
+
+  useEffect(() => {
+    if (bill && bill.id) {
+      changePageTitle(formatMessage({ id: 'edit_bill' }));
+    } else {
+      changePageTitle(formatMessage({ id: 'new_bill' }));
+    }
+  });
+
+  const validationSchema = Yup.object().shape({
+    vendor_id: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'vendor_name_' })),
+    bill_date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'bill_date_' })),
+    due_date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'due_date_' })),
+    bill_number: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'bill_number_' })),
+    reference_no: Yup.string().min(1).max(255),
+    status: Yup.string().required(),
+    note: Yup.string()
+      .trim()
+      .min(1)
+      .max(1024)
+      .label(formatMessage({ id: 'note' })),
+
+    entries: Yup.array().of(
+      Yup.object().shape({
+        quantity: Yup.number().nullable(),
+        rate: Yup.number().nullable(),
+        item_id: Yup.number()
+          .nullable()
+          .when(['quantity', 'rate'], {
+            is: (quantity, rate) => quantity || rate,
+            then: Yup.number().required(),
+          }),
+        total: Yup.number().nullable(),
+        discount: Yup.number().nullable(),
+        description: Yup.string().nullable(),
+      }),
+    ),
+  });
+
+  const saveBillSubmit = useCallback(
+    (payload) => {
+      onFormSubmit && onFormSubmit(payload);
+    },
+    [onFormSubmit],
+  );
+
+  const defaultBill = useMemo(() => ({
+    index: 0,
+    item_id: null,
+    rate: null,
+    discount: null,
+    quantity: null,
+    description: '',
+    status: '',
+  }));
+
+  const defaultInitialValues = useMemo(
+    () => ({
+      accept: '',
+      vendor_name: '',
+      bill_number: '',
+      bill_date: moment(new Date()).format('YYYY-MM-DD'),
+      due_date: moment(new Date()).format('YYYY-MM-DD'),
+      reference_no: '',
+      note: '',
+      entries: [...repeatValue(defaultBill, MIN_LINES_NUMBER)],
+    }),
+    [defaultBill],
+  );
+
+  const orderingIndex = (_invoice) => {
+    return _invoice.map((item, index) => ({
+      ...item,
+      index: index + 1,
+    }));
+  };
+
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      entries: orderingIndex(defaultInitialValues.entries),
+    }),
+    [defaultInitialValues],
+  );
+
+  const initialAttachmentFiles = useMemo(() => {
+    return bill && bill.media
+      ? bill.media.map((attach) => ({
+          preview: attach.attachment_file,
+          uploaded: true,
+          metadata: { ...attach },
+        }))
+      : [];
+  }, [bill]);
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema,
+    initialValues: {
+      ...initialValues,
+    },
+    onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
+      setSubmitting(true);
+      const entries = values.entries.map((item) => omit(item, ['total']));
+
+      const form = {
+        ...values,
+        entries,
+      };
+      const saveBill = (mediaIds) =>
+        new Promise((resolve, reject) => {
+          const requestForm = { ...form, media_ids: mediaIds };
+
+          requestSubmitBill(requestForm)
+            .then((response) => {
+              AppToaster.show({
+                message: formatMessage(
+                  { id: 'the_bill_has_been_successfully_created' },
+                  { number: values.bill_number },
+                ),
+                intent: Intent.SUCCESS,
+              });
+              setSubmitting(false);
+              resetForm();
+              saveBillSubmit({ action: 'new', ...payload });
+              clearSavedMediaIds();
+            })
+            .catch((errors) => {
+              setSubmitting(false);
+            });
+        });
+
+      Promise.all([saveMedia(), deleteMedia()])
+        .then(([savedMediaResponses]) => {
+          const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
+          savedMediaIds.current = mediaIds;
+          return savedMediaResponses;
+        })
+        .then(() => {
+          return saveBill(savedMediaIds.current);
+        });
+    },
+  });
+
+  const handleSubmitClick = useCallback(
+    (payload) => {
+      setPayload(payload);
+      formik.submitForm();
+    },
+    [setPayload, formik],
+  );
+
+  const handleCancelClick = useCallback(
+    (payload) => {
+      onCancelForm && onCancelForm(payload);
+    },
+    [onCancelForm],
+  );
+
+  console.log(formik.errors, 'Bill');
+  const handleDeleteFile = useCallback(
+    (_deletedFiles) => {
+      _deletedFiles.forEach((deletedFile) => {
+        if (deletedFile.uploaded && deletedFile.metadata.id) {
+          setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
+        }
+      });
+    },
+    [setDeletedFiles, deletedFiles],
+  );
+
+  const onClickCleanAllLines = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingIndex([...repeatValue(defaultBill, MIN_LINES_NUMBER)]),
+    );
+  };
+
+  const onClickAddNewRow = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingIndex([...formik.values.entries, defaultBill]),
+    );
+  };
+
+  return (
+    <div className={'bill-form'}>
+      <form onSubmit={formik.handleSubmit}>
+        <BillFormHeader formik={formik} />
+        <EstimatesItemsTable
+          formik={formik}
+          entries={formik.values.entries}
+          onClickAddNewRow={onClickAddNewRow}
+          onClickClearAllLines={onClickCleanAllLines}
+        />
+        <FormGroup label={<T id={'note'} />} className={'form-group--'}>
+          <TextArea growVertically={true} {...formik.getFieldProps('note')} />
+        </FormGroup>
+        <Dragzone
+          initialFiles={initialAttachmentFiles}
+          onDrop={handleDropFiles}
+          onDeleteFile={handleDeleteFile}
+          hint={'Attachments: Maxiumum size: 20MB'}
+        />
+        <BillFormFooter
+          formik={formik}
+          onSubmit={handleSubmitClick}
+          onCancelClick={handleCancelClick}
+        />
+      </form>
+    </div>
+  );
+}
+
+export default compose(
+  withBillActions,
+  withDashboardActions,
+  withMediaActions,
+)(BillForm);
diff --git a/client/src/containers/Purchases/BillFormFooter.js b/client/src/containers/Purchases/BillFormFooter.js
new file mode 100644
index 000000000..badfa25d3
--- /dev/null
+++ b/client/src/containers/Purchases/BillFormFooter.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Intent, Button } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function BillFormFooter({
+  formik: { isSubmitting },
+  onSubmitClick,
+  onCancelClick,
+}) {
+  return (
+    <div>
+      <Button disabled={isSubmitting} intent={Intent.PRIMARY} type="submit">
+        <T id={'save_send'} />
+      </Button>
+
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        className={'ml1'}
+        name={'save'}
+        type="submit"
+      >
+        <T id={'save'} />
+      </Button>
+
+      <Button className={'ml1'} disabled={isSubmitting}>
+        <T id={'clear'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        type="submit"
+        onClick={() => {
+          onCancelClick && onCancelClick();
+        }}
+      >
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}
diff --git a/client/src/containers/Purchases/BillFormHeader.js b/client/src/containers/Purchases/BillFormHeader.js
new file mode 100644
index 000000000..27b356217
--- /dev/null
+++ b/client/src/containers/Purchases/BillFormHeader.js
@@ -0,0 +1,185 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Intent,
+  Position,
+  MenuItem,
+  Classes,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import { Row, Col } from 'react-grid-system';
+import moment from 'moment';
+import { momentFormatter, compose, tansformDateValue } from 'utils';
+import classNames from 'classnames';
+import {
+  AccountsSelectList,
+  ListSelect,
+  ErrorMessage,
+  FieldRequiredHint,
+  Hint,
+} from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+import withAccounts from 'containers/Accounts/withAccounts';
+
+function BillFormHeader({
+  formik: { errors, touched, setFieldValue, getFieldProps, values },
+
+  //#withCustomers
+  customers,
+  //#withAccouts
+  accountsList,
+}) {
+  const handleDateChange = useCallback(
+    (date_filed) => (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      setFieldValue(date_filed, formatted);
+    },
+    [setFieldValue],
+  );
+
+  const onChangeSelected = useCallback(
+    (filedName) => {
+      return (item) => {
+        setFieldValue(filedName, item.id);
+      };
+    },
+    [setFieldValue],
+  );
+
+  const vendorNameRenderer = useCallback(
+    (accept, { handleClick }) => (
+      <MenuItem
+        key={accept.id}
+        text={accept.display_name}
+        onClick={handleClick}
+      />
+    ),
+    [],
+  );
+
+  // Filter vendor name
+  const filterVendorAccount = (query, vendor, _index, exactMatch) => {
+    const normalizedTitle = vendor.display_name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${vendor.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >=
+        0
+      );
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        {/* vendor  account name */}
+        <FormGroup
+          label={<T id={'vendor_name'} />}
+          inline={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
+          labelInfo={<FieldRequiredHint />}
+          intent={errors.vendor_id && touched.vendor_id && Intent.DANGER}
+          helperText={
+            <ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
+          }
+        >
+          <ListSelect
+            items={customers}
+            noResults={<MenuItem disabled={true} text="No results." />}
+            itemRenderer={vendorNameRenderer}
+            itemPredicate={filterVendorAccount}
+            popoverProps={{ minimal: true }}
+            onItemSelect={onChangeSelected('vendor_id')}
+            selectedItem={values.vendor_id}
+            selectedItemProp={'id'}
+            defaultText={<T id={'select_vendor_account'} />}
+            labelProp={'display_name'}
+          />
+        </FormGroup>
+        <Row>
+          <Col>
+            <FormGroup
+              label={<T id={'bill_date'} />}
+              inline={true}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames('form-group--select-list', Classes.FILL)}
+              intent={errors.bill_date && touched.bill_date && Intent.DANGER}
+              helperText={
+                <ErrorMessage name="bill_date" {...{ errors, touched }} />
+              }
+            >
+              <DateInput
+                {...momentFormatter('YYYY/MM/DD')}
+                value={tansformDateValue(values.bill_date)}
+                onChange={handleDateChange('bill_date')}
+                popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup
+              label={<T id={'due_date'} />}
+              inline={true}
+              className={classNames('form-group--select-list', Classes.FILL)}
+              intent={errors.due_date && touched.due_date && Intent.DANGER}
+              helperText={
+                <ErrorMessage name="due_date" {...{ errors, touched }} />
+              }
+            >
+              <DateInput
+                {...momentFormatter('YYYY/MM/DD')}
+                value={tansformDateValue(values.due_date)}
+                onChange={handleDateChange('due_date')}
+                popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        {/* bill number */}
+        <FormGroup
+          label={<T id={'bill_number'} />}
+          inline={true}
+          className={('form-group--estimate', Classes.FILL)}
+          labelInfo={<FieldRequiredHint />}
+          intent={errors.bill_number && touched.bill_number && Intent.DANGER}
+          helperText={
+            <ErrorMessage name="bill_number" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={errors.bill_number && touched.bill_number && Intent.DANGER}
+            minimal={true}
+            {...getFieldProps('bill_number')}
+          />
+        </FormGroup>
+      </div>
+      <FormGroup
+        label={<T id={'reference'} />}
+        inline={true}
+        className={classNames('form-group--reference', Classes.FILL)}
+        intent={errors.reference_no && touched.reference_no && Intent.DANGER}
+        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+      >
+        <InputGroup
+          intent={errors.reference_no && touched.reference_no && Intent.DANGER}
+          minimal={true}
+          {...getFieldProps('reference_no')}
+        />
+      </FormGroup>
+    </div>
+  );
+}
+
+export default compose(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+  withAccounts(({ accountsList }) => ({
+    accountsList,
+  })),
+)(BillFormHeader);
diff --git a/client/src/containers/Purchases/Bills.js b/client/src/containers/Purchases/Bills.js
new file mode 100644
index 000000000..24555328c
--- /dev/null
+++ b/client/src/containers/Purchases/Bills.js
@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { useQuery } from 'react-query';
+
+import BillForm from './BillForm';
+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 { compose } from 'utils';
+
+function Bills({
+  //#withwithAccountsActions
+  requestFetchAccounts,
+
+  //#withCustomersActions
+  requestFetchCustomers,
+
+  //#withItemsActions
+  requestFetchItems,
+}) {
+  const history = useHistory();
+
+  // Handle fetch accounts
+  const fetchAccounts = useQuery('accounts-list', (key) =>
+    requestFetchAccounts(),
+  );
+
+  // Handle fetch customers data table
+  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 handleCancel = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
+  return (
+    <DashboardInsider
+      loading={
+        fetchCustomers.isFetching ||
+        fetchItems.isFetching ||
+        fetchAccounts.isFetching
+      }
+    >
+      <BillForm onSubmit={handleFormSubmit} onCancel={handleCancel} />
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withCustomersActions,
+  withItemsActions,
+  withAccountsActions,
+)(Bills);
diff --git a/client/src/containers/Purchases/withBillActions.js b/client/src/containers/Purchases/withBillActions.js
new file mode 100644
index 000000000..65d982e7b
--- /dev/null
+++ b/client/src/containers/Purchases/withBillActions.js
@@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+import {
+  submitBill,
+  deleteBill,
+  editBill,
+  fetchBillsTable,
+  fetchBill,
+} from 'store/Bills/bills.actions';
+import t from 'store/types';
+
+const mapDispatchToProps = (dispatch) => ({
+  requestSubmitBill: (form) => dispatch(submitBill({ form })),
+  requestFetchBill: (id) => dispatch(fetchBill({ id })),
+  requestEditBill: (id, form) => dispatch(editBill({ id, form })),
+  requestDeleteBill: (id) => dispatch(deleteBill({ id })),
+  requestFetchBillsTable: (query = {}) =>
+    dispatch(fetchBillsTable({ query: { ...query } })),
+
+  changeBillView: (id) =>
+    dispatch({
+      type: t.BILL_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+
+  addBillsTableQueries: (queries) =>
+    dispatch({
+      type: t.BILLS_TABLE_QUERIES_ADD,
+      queries,
+    }),
+});
+
+export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
new file mode 100644
index 000000000..c96998400
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
@@ -0,0 +1,260 @@
+import React, { useMemo, useCallback, useEffect, useState,useRef } from 'react';
+
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import moment from 'moment';
+import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
+
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+import PaymentReceiveHeader from './PaymentReceiveFormHeader';
+// PaymentReceiptItemsTable
+import PaymentReceiveFooter from './PaymentReceiveFormFooter';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withMediaActions from 'containers/Media/withMediaActions';
+import withPaymentReceivesActions from './withPaymentReceivesActions'
+
+import { AppToaster } from 'components';
+import Dragzone from 'components/Dragzone';
+import useMedia from 'hooks/useMedia';
+
+import { compose, repeatValue } from 'utils';
+
+const MIN_LINES_NUMBER = 4;
+
+function PaymentReceiveForm({
+  //#withMedia
+  requestSubmitMedia,
+  requestDeleteMedia,
+  
+  //#WithPaymentReceiveActions
+  requestSubmitPaymentReceive,
+
+
+  //#withDashboard
+  changePageTitle,
+  changePageSubtitle,
+
+  //#withPaymentReceiveDetail
+
+  //#OWn Props
+  payment_receive,
+  onFormSubmit,
+  onCancelForm,
+}) {
+  const { formatMessage } = useIntl();
+  const [payload, setPayload] = useState({});
+
+  const {
+    setFiles,
+    saveMedia,
+    deletedFiles,
+    setDeletedFiles,
+    deleteMedia,
+  } = useMedia({
+    saveCallback: requestSubmitMedia,
+    deleteCallback: requestDeleteMedia,
+  });
+
+  const savedMediaIds = useRef([]);
+  const clearSavedMediaIds = () => {
+    savedMediaIds.current = [];
+  };
+
+  useEffect(() => {
+    if (payment_receive && payment_receive.id) {
+      changePageTitle(formatMessage({ id: 'edit_payment_receive' }));
+    } else {
+      changePageTitle(formatMessage({ id: 'new_payment_receive' }));
+    }
+  }, [changePageTitle, payment_receive, formatMessage]);
+
+  const validationSchema = Yup.object().shape({
+    customer_id: Yup.string()
+      .label(formatMessage({ id: 'customer_name_' }))
+      .required(),
+    deposit_account_id: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'deposit_account_' })),
+    payment_date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'payment_date_' })),
+    payment_receive_no: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'payment_receive_no_' })),
+    reference_no: Yup.string().min(1).max(255),
+    statement: Yup.string()
+      .trim()
+      .min(1)
+      .max(1024)
+      .label(formatMessage({ id: 'statement' })),
+
+    entries: Yup.array().of(
+      Yup.object().shape({
+        payment_amount: Yup.number().nullable(),
+        item_id: Yup.number()
+          .nullable()
+          .when(['payment_amount'], {
+            is: (payment_amount) => payment_amount,
+            then: Yup.number().required(),
+          }),
+        description: Yup.string().nullable(),
+      }),
+    ),
+  });
+
+  const handleDropFiles = useCallback((_files) => {
+    setFiles(_files.filter((file) => file.uploaded === false));
+  }, []);
+
+  const savePaymentReceiveSubmit = useCallback((payload) => {
+    onFormSubmit && onFormSubmit(payload);
+  });
+
+  const defaultPaymentReceive = useMemo(
+    () => ({
+      item_id: null,
+      payment_amount: null,
+      description: null,
+    }),
+    [],
+  );
+  const defaultInitialValues = useMemo(
+    () => ({
+      customer_id: '',
+      deposit_account_id: '',
+      payment_date: moment(new Date()).format('YYYY-MM-DD'),
+      reference_no: '',
+      statement: '',
+      entries: [...repeatValue(defaultPaymentReceive, MIN_LINES_NUMBER)],
+    }),
+    [defaultPaymentReceive],
+  );
+
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      entries: defaultInitialValues.entries,
+    }),
+    [defaultPaymentReceive, defaultInitialValues, payment_receive],
+  );
+
+  const initialAttachmentFiles = useMemo(() => {
+    return payment_receive && payment_receive.media
+      ? payment_receive.media.map((attach) => ({
+          preview: attach.attachment_file,
+          uploaded: true,
+          metadata: { ...attach },
+        }))
+      : [];
+  }, [payment_receive]);
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema,
+    initialValues: {
+      ...initialValues,
+    },
+    onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
+      const form = {
+        ...values,
+      };
+      const savePaymentReceive = (mediaIds) =>
+        new Promise((resolve, reject) => {
+          const requestForm = { ...form, media_ids: mediaIds };
+
+          requestSubmitPaymentReceive(requestForm)
+            .the((response) => {
+              AppToaster.show({
+                message: formatMessage({
+                  id: 'the_payment_receive_has_been_successfully_created',
+                }),
+                intent: Intent.SUCCESS,
+              });
+              setSubmitting(false);
+              clearSavedMediaIds();
+              savePaymentReceiveSubmit({ action: 'new', ...payload });
+            })
+            .catch((errors) => {
+              setSubmitting(false);
+            });
+        });
+      Promise.all([saveMedia(), deleteMedia()])
+        .then(([savedMediaResponses]) => {
+          const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
+          savedMediaIds.current = mediaIds;
+          return savedMediaResponses;
+        })
+        .then(() => {
+          return savePaymentReceive(savedMediaIds.current);
+        });
+    },
+  });
+
+  const handleDeleteFile = useCallback(
+    (_deletedFiles) => {
+      _deletedFiles.forEach((deletedFile) => {
+        if (deletedFile.upload && deletedFile.metadata.id) {
+          setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
+        }
+      });
+    },
+    [setDeletedFiles, deletedFiles],
+  );
+
+  const handleSubmitClick = useCallback(
+    (payload) => {
+      setPayload(payload);
+      formik.submitForm();
+    },
+    [setPayload, formik],
+  );
+
+  const handleCancelClick = useCallback(
+    (payload) => {
+      onCancelForm && onCancelForm(payload);
+    },
+    [onCancelForm],
+  );
+
+  const handleClearClick = () => {
+    formik.resetForm();
+  };
+
+  return (
+    <div className={'payment_receive_form'}>
+      <form onSubmit={formik.handleSubmit}>
+        <PaymentReceiveHeader formik={formik} />
+        <FormGroup
+          label={<T id={'statement'} />}
+          className={'form-group--statement'}
+        >
+          <TextArea
+            growVertically={true}
+            {...formik.getFieldProps('statement')}
+          />
+        </FormGroup>
+
+        <Dragzone
+          initialFiles={initialAttachmentFiles}
+          onDrop={handleDropFiles}
+          onDeleteFile={handleDeleteFile}
+          hint={'Attachments: Maxiumum size: 20MB'}
+        />
+        <PaymentReceiveFooter
+          formik={formik}
+          onSubmit={handleSubmitClick}
+          onCancel={handleCancelClick}
+          onClearClick={handleClearClick}
+        />
+      </form>
+    </div>
+  );
+}
+
+export default compose(
+  withPaymentReceivesActions,
+  withDashboardActions,
+  withMediaActions,
+)(PaymentReceiveForm);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js
new file mode 100644
index 000000000..793b43068
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Intent, Button } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function PaymentReceiveFormFooter({
+  formik: { isSubmitting, resetForm },
+  onSubmitClick,
+  onCancelClick,
+  onClearClick,
+}) {
+  return (
+    <div className={'estimate-form__floating-footer'}>
+      <Button disabled={isSubmitting} intent={Intent.PRIMARY} type="submit">
+        <T id={'save_send'} />
+      </Button>
+
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        className={'ml1'}
+        name={'save'}
+        type="submit"
+      >
+        <T id={'save'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={() => onClearClick && onClearClick()}
+      >
+        <T id={'clear'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        type="submit"
+        onClick={() => {
+          onCancelClick && onCancelClick();
+        }}
+      >
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
new file mode 100644
index 000000000..fdda71e9a
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
@@ -0,0 +1,204 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Intent,
+  Position,
+  MenuItem,
+  Classes,
+} from '@blueprintjs/core';
+
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import moment from 'moment';
+import { momentFormatter, compose, tansformDateValue } from 'utils';
+import classNames from 'classnames';
+import {
+  AccountsSelectList,
+  ListSelect,
+  ErrorMessage,
+  FieldRequiredHint,
+} from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+import withAccounts from 'containers/Accounts/withAccounts';
+
+function PaymentReceiveFormHeader({
+  formik: { errors, touched, setFieldValue, getFieldProps, values },
+
+  //#withCustomers
+  customers,
+  //#withAccouts
+  accountsList,
+}) {
+  const handleDateChange = useCallback(
+    (date_filed) => (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      setFieldValue(date_filed, formatted);
+    },
+    [setFieldValue],
+  );
+
+  const handleCusomterRenderer = useCallback(
+    (custom, { handleClick }) => (
+      <MenuItem
+        key={custom.id}
+        text={custom.display_name}
+        onClick={handleClick}
+      />
+    ),
+    [],
+  );
+
+  const handleFilterCustomer = (query, customer, index, exactMatch) => {
+    const normalizedTitle = customer.display_name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${customer.display_name} ${normalizedTitle}`.indexOf(
+          normalizedQuery,
+        ) >= 0
+      );
+    }
+  };
+
+  const onChangeSelect = useCallback(
+    (filedName) => {
+      return (item) => {
+        setFieldValue(filedName, item.id);
+      };
+    },
+    [setFieldValue],
+  );
+
+  // Filter deposit accounts.
+  const depositAccounts = useMemo(
+    () => accountsList.filter((a) => a?.type?.key === 'current_asset'),
+    [accountsList],
+  );
+
+  return (
+    <div>
+      <div>
+        {/* Customer name */}
+        <FormGroup
+          label={<T id={'customer_name'} />}
+          inline={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
+          labelInfo={<FieldRequiredHint />}
+          intent={errors.customer_id && touched.customer_id && Intent.DANGER}
+          helperText={
+            <ErrorMessage name={'customer_id'} {...{ errors, touched }} />
+          }
+        >
+          <ListSelect
+            items={customers}
+            noResults={<MenuItem disabled={true} text="No results." />}
+            itemRenderer={handleCusomterRenderer}
+            itemPredicate={handleFilterCustomer}
+            popoverProps={{ minimal: true }}
+            onItemSelect={onChangeSelect('customer_id')}
+            selectedItem={values.customer_id}
+            selectedItemProp={'id'}
+            defaultText={<T id={'select_customer_account'} />}
+            labelProp={'display_name'}
+          />
+        </FormGroup>
+        <FormGroup
+          label={<T id={'deposit_account'} />}
+          className={classNames(
+            'form-group--deposit_account_id',
+            'form-group--select-list',
+            Classes.FILL,
+          )}
+          inline={true}
+          labelInfo={<FieldRequiredHint />}
+          intent={
+            errors.deposit_account_id &&
+            touched.deposit_account_id &&
+            Intent.DANGER
+          }
+          helperText={
+            <ErrorMessage
+              name={'deposit_account_id'}
+              {...{ errors, touched }}
+            />
+          }
+        >
+          <AccountsSelectList
+            accounts={depositAccounts}
+            onAccountSelected={onChangeSelect('deposit_account_id')}
+            defaultSelectText={<T id={'select_deposit_account'} />}
+            selectedAccountId={values.deposit_account_id}
+          />
+        </FormGroup>
+        <FormGroup
+          label={<T id={'payment_date'} />}
+          inline={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
+          intent={errors.payment_date && touched.payment_date && Intent.DANGER}
+          helperText={
+            <ErrorMessage name="payment_date" {...{ errors, touched }} />
+          }
+        >
+          <DateInput
+            {...momentFormatter('YYYY/MM/DD')}
+            value={tansformDateValue(values.payment_date)}
+            onChange={handleDateChange}
+            popoverProps={{ position: Position.BOTTOM, minimal: true }}
+          />
+        </FormGroup>
+      </div>
+      {/* payment receive no */}
+      <FormGroup
+        label={<T id={'payment_receive_no'} />}
+        inline={true}
+        className={('form-group--payment_receive_no', Classes.FILL)}
+        labelInfo={<FieldRequiredHint />}
+        intent={
+          errors.payment_receive_no &&
+          touched.payment_receive_no &&
+          Intent.DANGER
+        }
+        helperText={
+          <ErrorMessage name="payment_receive_no" {...{ errors, touched }} />
+        }
+      >
+        <InputGroup
+          intent={
+            errors.payment_receive_no &&
+            touched.payment_receive_no &&
+            Intent.DANGER
+          }
+          minimal={true}
+          {...getFieldProps('payment_receive_no')}
+        />
+      </FormGroup>
+      {/* reference_no */}
+      <FormGroup
+        label={<T id={'reference'} />}
+        inline={true}
+        className={classNames('form-group--reference', Classes.FILL)}
+        intent={errors.reference_no && touched.reference_no && Intent.DANGER}
+        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+      >
+        <InputGroup
+          intent={errors.reference_no && touched.reference_no && Intent.DANGER}
+          minimal={true}
+          {...getFieldProps('reference_no')}
+        />
+      </FormGroup>
+    </div>
+  );
+}
+
+export default compose(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+  withAccounts(({ accountsList }) => ({
+    accountsList,
+  })),
+)(PaymentReceiveFormHeader);
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
new file mode 100644
index 000000000..777cecb48
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
@@ -0,0 +1,13 @@
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import DataTable from 'components/DataTable';
+import Icon from 'components/Icon';
+
+import { compose, formattedAmount, transformUpdatedRows } from 'utils';
+import {
+  InputGroupCell,
+  MoneyFieldCell,
+  EstimatesListFieldCell,
+  DivFieldCell,
+} from 'components/DataTableCells';
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceives.js b/client/src/containers/Sales/PaymentReceive/PaymentReceives.js
new file mode 100644
index 000000000..48779ea57
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceives.js
@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { useQuery } from 'react-query';
+
+import PaymentReceiveForm from './PaymentReceiveForm';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+import withCustomersActions from 'containers/Customers/withCustomersActions';
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
+import withItemsActions from 'containers/Items/withItemsActions';
+//#withInvoiceActions
+
+import { compose } from 'utils';
+
+function PaymentReceives({
+  //#withwithAccountsActions
+  requestFetchAccounts,
+
+  //#withCustomersActions
+  requestFetchCustomers,
+
+  //#withItemsActions
+  requestFetchItems,
+
+  //#withInvoiceActions
+}) {
+  const history = useHistory();
+
+  // Handle fetch accounts data
+  const fetchAccounts = useQuery('accounts-list', (key) =>
+    requestFetchAccounts(),
+  );
+
+  // Handle fetch Items data table or list
+  const fetchItems = useQuery('items-table', () => requestFetchItems({}));
+
+  // Handle fetch customers data table or list
+  const fetchCustomers = useQuery('customers-table', () =>
+    requestFetchCustomers({}),
+  );
+
+  const handleFormSubmit = useCallback((payload) => {}, [history]);
+
+  const handleCancel = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
+  return (
+    <DashboardInsider
+      loading={
+        fetchCustomers.isFetching ||
+        fetchItems.isFetching ||
+        fetchAccounts.isFetching
+      }
+    >
+      <PaymentReceiveForm
+        onFormSubmit={handleFormSubmit}
+        onCancelForm={handleCancel}
+      />
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withCustomersActions,
+  withItemsActions,
+  withAccountsActions,
+  // withInvoiceActions
+)(PaymentReceives);
diff --git a/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js b/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js
new file mode 100644
index 000000000..393fdfc86
--- /dev/null
+++ b/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js
@@ -0,0 +1,34 @@
+import { connect } from 'react-redux';
+import {
+  submitPaymentReceive,
+  editPaymentReceive,
+  deletePaymentReceive,
+  fetchPaymentReceive,
+  fetchPaymentReceivesTable,
+} from 'store/PaymentReceive/paymentReceive.actions';
+import t from 'store/types';
+
+const mapDispatchToProps = (dispatch) => ({
+  requestSubmitPaymentReceive: (form) =>
+    dispatch(submitPaymentReceive({ form })),
+  requestFetchPaymentReceive: (id) => dispatch(fetchPaymentReceive({ id })),
+  requestEditPaymentReceive: (id, form) =>
+    dispatch(editPaymentReceive({ id, form })),
+  requestDeletePaymentReceive: (id) => dispatch(deletePaymentReceive({ id })),
+  requestFetchPaymentReceiveTable: (query = {}) =>
+    dispatch(fetchPaymentReceivesTable({ query: { ...query } })),
+
+  changePaymentReceiveView: (id) =>
+    dispatch({
+      type: t.PAYMENT_RECEIVE_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+
+  addPaymentReceivesTableQueries: (queries) =>
+    dispatch({
+      type: t.PAYMENT_RECEIVE_TABLE_QUERIES_ADD,
+      queries,
+    }),
+});
+
+export default connect(null, mapDispatchToProps);
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index 57590e1ee..a6d645bd6 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -633,4 +633,33 @@ export default {
     'The receipt  has been successfully edited.',
   the_receipt_has_been_successfully_deleted:
     'The receipt has been successfully deleted.',
+
+  bills: 'Bills',
+  accept: 'Accept',
+  vendor_name: 'Vendor Name',
+  select_vendor_account: 'Select Vendor Account',
+  select_accept_account: 'Select Accept Account',
+  bill_date: 'Bill Date',
+  due_date: 'Due Date',
+  bill_number: 'Bill Number',
+  edit_bill: 'Edit Bill',
+  new_bill: 'New Bill',
+  bill_date_: 'Bill date',
+  bill_number_: 'Bill number',
+  vendor_name_: 'Vendor name',
+
+  the_bill_has_been_successfully_created:
+    'The bill has been successfully created.',
+
+  edit_payment_receive: 'Edit Payment Receive',
+  new_payment_receive: 'New Payment Receive',
+  payment_receives: 'Payment Receives',
+  payment_receive_no: 'Payment Receive #',
+  payment_receive_no_: 'Payment receive no',
+  the_payment_receive_has_been_successfully_created:
+    'The payment receive has been successfully created.',
+
+  select_invoice:'Select Invoice',
+
+  payment_mades: 'Payment Mades',
 };
diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js
index d5b73c84a..c1f10a9bd 100644
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -275,4 +275,42 @@ export default [
   //   }),
   //   breadcrumb: 'New Receipt',
   // }
+
+
+  // Payment Receives 
+
+  {
+    path: `/payment-receive/:id/edit`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/PaymentReceive/PaymentReceives'),
+    }),
+    breadcrumb: 'Edit',
+
+  },
+  {
+    path: `/payment-receive/new`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/PaymentReceive/PaymentReceives'),
+    }),
+    breadcrumb: 'New Payment Receive',
+
+  },
+
+
+
+  //Bills
+  {
+    path: `/bill/:id/edit`,
+    component: LazyLoader({
+      loader: () => import('containers/Purchases/Bills'),
+    }),
+    breadcrumb: 'Edit',
+  },
+  {
+    path: `/bill/new`,
+    component: LazyLoader({
+      loader: () => import('containers/Purchases/Bills'),
+    }),
+    breadcrumb: 'New Bill',
+  },
 ];
diff --git a/client/src/store/Bills/bills.actions.js b/client/src/store/Bills/bills.actions.js
new file mode 100644
index 000000000..970bca31c
--- /dev/null
+++ b/client/src/store/Bills/bills.actions.js
@@ -0,0 +1,136 @@
+import ApiService from 'services/ApiService';
+import t from 'store/types';
+
+export const fetchBillsTable = ({ query = {} }) => {
+  return (dispatch, getState) =>
+    new Promise((resolve, rejcet) => {
+      const pageQuery = getState().bill.tableQuery;
+
+      dispatch({
+        type: t.BILLS_TABLE_LOADING,
+        payload: {
+          loading: true,
+        },
+      });
+      ApiService.get('bills', {
+        params: { ...pageQuery, ...query },
+      })
+        .then((response) => {
+          dispatch({
+            type: t.BILLS_PAGE_SET,
+            payload: {
+              bills: response.data.bills.results,
+              pagination: response.data.bills.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
+          });
+          dispatch({
+            type: t.BILLS_ITEMS_SET,
+            payload: {
+              bills: response.data.bills.results,
+            },
+          });
+          dispatch({
+            type: t.BILLS_PAGINATION_SET,
+            payload: {
+              pagination: response.data.bills.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
+          });
+          dispatch({
+            type: t.BILLS_TABLE_LOADING,
+            payload: {
+              loading: false,
+            },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          rejcet(error);
+        });
+    });
+};
+
+export const deleteBill = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resovle, reject) => {
+      ApiService.delete(`bills/${id}`)
+        .then((response) => {
+          dispatch({ type: t.BILL_DELETE });
+          resovle(response);
+        })
+        .catch((error) => {
+          reject(error.response.data.errors || []);
+        });
+    });
+};
+
+export const submitBill = ({ form }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.post('bills', form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          reject(data?.errors);
+        });
+    });
+};
+
+export const fetchBill = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resovle, reject) => {
+      ApiService.get(`bills/${id}`)
+        .then((response) => {
+          dispatch({
+            type: t.BILL_SET,
+            payload: {
+              id,
+              bill: response.data.bill,
+            },
+          });
+          resovle(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          reject(data?.errors);
+        });
+    });
+};
+
+export const editBill = (id, form) => {
+  return (dispatch) =>
+    new Promise((resolve, rejcet) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.post(`bills/${id}`, form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          rejcet(data?.errors);
+        });
+    });
+};
diff --git a/client/src/store/Bills/bills.reducer.js b/client/src/store/Bills/bills.reducer.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/store/Bills/bills.selectors.js b/client/src/store/Bills/bills.selectors.js
new file mode 100644
index 000000000..4b6b8f1d2
--- /dev/null
+++ b/client/src/store/Bills/bills.selectors.js
@@ -0,0 +1,6 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+const billByIdSelector = (state, props) => state.bills.items[props.billId];
+
+export const getBillById = () =>
+  createSelector(billByIdSelector, (_bill) => _bill);
diff --git a/client/src/store/Bills/bills.type.js b/client/src/store/Bills/bills.type.js
new file mode 100644
index 000000000..3ce6797d2
--- /dev/null
+++ b/client/src/store/Bills/bills.type.js
@@ -0,0 +1,12 @@
+export default {
+  BILL_DELETE: 'BILL_DELETE',
+  BILLS_BULK_DELETE: 'BILLS_BULK_DELETE',
+  BILLS_LIST_SET: 'BILLS_LIST_SET',
+  BILL_SET: 'BILL_SET',
+  BILLS_SET_CURRENT_VIEW: 'BILLS_SET_CURRENT_VIEW',
+  BILLS_TABLE_QUERIES_ADD: 'BILLS_TABLE_QUERIES_ADD',
+  BILLS_TABLE_LOADING: 'BILLS_TABLE_LOADING',
+  BILLS_PAGINATION_SET: 'BILLS_PAGINATION_SET',
+  BILLS_PAGE_SET: 'BILLS_PAGE_SET',
+  BILLS_ITEMS_SET: 'BILLS_ITEMS_SET',
+};
diff --git a/client/src/store/PaymentReceive/paymentReceive.actions.js b/client/src/store/PaymentReceive/paymentReceive.actions.js
new file mode 100644
index 000000000..43d00f9cb
--- /dev/null
+++ b/client/src/store/PaymentReceive/paymentReceive.actions.js
@@ -0,0 +1,136 @@
+import ApiService from 'services/ApiService';
+import t from 'store/types';
+
+export const submitPaymentReceive = ({ form }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.post('sales/payment_receives', form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          reject(data?.errors);
+        });
+    });
+};
+
+export const editPaymentReceive = (id, form) => {
+  return (dispatch) =>
+    new Promise((resolve, rejcet) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.post(`sales/payment_receives/${id}`, form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          rejcet(data?.errors);
+        });
+    });
+};
+
+export const deletePaymentReceive = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resovle, reject) => {
+      ApiService.delete(`payment_receives/${id}`)
+        .then((response) => {
+          dispatch({ type: t.PAYMENT_RECEIVE_DELETE });
+          resovle(response);
+        })
+        .catch((error) => {
+          reject(error.response.data.errors || []);
+        });
+    });
+};
+
+export const fetchPaymentReceive = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resovle, reject) => {
+      ApiService.get(`payment_receives/${id}`)
+        .then((response) => {
+          dispatch({
+            type: t.PAYMENT_RECEIVE_SET,
+            payload: {
+              id,
+              payment_receive: response.data.payment_receive,
+            },
+          });
+          resovle(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          reject(data?.errors);
+        });
+    });
+};
+
+export const fetchPaymentReceivesTable = ({ query = {} }) => {
+  return (dispatch, getState) =>
+    new Promise((resolve, rejcet) => {
+      const pageQuery = getState().payment_receive.tableQuery;
+
+      dispatch({
+        type: t.PAYMENT_RECEIVES_TABLE_LOADING,
+        payload: {
+          loading: true,
+        },
+      });
+      ApiService.get('payment_receives', {
+        params: { ...pageQuery, ...query },
+      })
+        .then((response) => {
+          dispatch({
+            type: t.RECEIPTS_PAGE_SET,
+            payload: {
+              payment_receives: response.data.payment_receives.results,
+              pagination: response.data.payment_receives.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
+          });
+          dispatch({
+            type: t.PAYMENT_RECEIVES_ITEMS_SET,
+            payload: {
+              payment_receives: response.data.payment_receives.results,
+            },
+          });
+          dispatch({
+            type: t.PAYMENT_RECEIVES_PAGINATION_SET,
+            payload: {
+              pagination: response.data.payment_receives.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
+          });
+          dispatch({
+            type: t.PAYMENT_RECEIVES_TABLE_LOADING,
+            payload: {
+              loading: false,
+            },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          rejcet(error);
+        });
+    });
+};
diff --git a/client/src/store/PaymentReceive/paymentReceive.reducer.js b/client/src/store/PaymentReceive/paymentReceive.reducer.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/store/PaymentReceive/paymentReceive.selector.js b/client/src/store/PaymentReceive/paymentReceive.selector.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/store/PaymentReceive/paymentReceive.type.js b/client/src/store/PaymentReceive/paymentReceive.type.js
new file mode 100644
index 000000000..3c08a544c
--- /dev/null
+++ b/client/src/store/PaymentReceive/paymentReceive.type.js
@@ -0,0 +1,11 @@
+export default {
+  PAYMENT_RECEIVE_LIST_SET: 'PAYMENT_RECEIVE_LIST_SET',
+  PAYMENT_RECEIVE_SET: 'PAYMENT_RECEIVE_SET',
+  PAYMENT_RECEIVE_DELETE: 'PAYMENT_RECEIVE_DELETE',
+  PAYMENT_RECEIVE_SET_CURRENT_VIEW: 'PAYMENT_RECEIVE_SET_CURRENT_VIEW',
+  PAYMENT_RECEIVE_TABLE_QUERIES_ADD: 'PAYMENT_RECEIVE_TABLE_QUERIES_ADD',
+  PAYMENT_RECEIVES_TABLE_LOADING: 'PAYMENT_RECEIVES_TABLE_LOADING',
+  PAYMENT_RECEIVES_PAGE_SET: 'PAYMENT_RECEIVES_PAGE_SET',
+  PAYMENT_RECEIVES_ITEMS_SET: 'PAYMENT_RECEIVES_ITEMS_SET',
+  PAYMENT_RECEIVES_PAGINATION_SET: 'PAYMENT_RECEIVES_PAGINATION_SET',
+};
diff --git a/client/src/store/types.js b/client/src/store/types.js
index 6a089d1d0..da7e60037 100644
--- a/client/src/store/types.js
+++ b/client/src/store/types.js
@@ -20,6 +20,8 @@ import customer from './customers/customers.type';
 import estimates from './Estimate/estimates.types';
 import invoices from './Invoice/invoices.types';
 import receipts from './receipt/receipt.type';
+import bills from './Bills/bills.type';
+import paymentReceives from './PaymentReceive/paymentReceive.type';
 
 export default {
   ...authentication,
@@ -43,5 +45,7 @@ export default {
   ...customer,
   ...estimates,
   ...invoices,
-  ...receipts
+  ...receipts,
+  ...bills,
+  ...paymentReceives,
 };

From c86f0b29bf6d9a9d18a422331eb6ed51db6e1e70 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Wed, 12 Aug 2020 21:19:52 +0200
Subject: [PATCH 3/6] WIP/ Feature : Estimate & Receipt & Bill & Invoice

---
 client/src/components/EstimateListField.js    |  42 ++-
 client/src/config/sidebarMenu.js              |  20 +-
 .../Purchases/Bill/BillActionsBar.js          | 148 ++++++++
 .../src/containers/Purchases/Bill/BillForm.js | 334 ++++++++++++++++++
 .../Purchases/Bill/BillFormFooter.js          |  52 +++
 .../Purchases/Bill/BillFormHeader.js          | 190 ++++++++++
 .../src/containers/Purchases/Bill/BillList.js | 178 ++++++++++
 .../containers/Purchases/Bill/BillViewTabs.js | 110 ++++++
 client/src/containers/Purchases/Bill/Bills.js |  85 +++++
 .../Purchases/Bill/BillsDataTable.js          | 243 +++++++++++++
 .../Purchases/Bill/withBillActions.js         |  32 ++
 .../Purchases/Bill/withBillDetail.js          |  11 +
 .../containers/Purchases/Bill/withBills.js    |  25 ++
 .../Sales/Estimate/EntriesItemsTable.js       |   4 +-
 .../Sales/Estimate/EstimateActionsBar.js      |  79 +++--
 .../containers/Sales/Estimate/EstimateForm.js | 142 +++++---
 .../Sales/Estimate/EstimateFormFooter.js      |  27 +-
 .../containers/Sales/Estimate/EstimateList.js | 104 +++++-
 .../Sales/Estimate/EstimateViewTabs.js        | 110 ++++++
 .../containers/Sales/Estimate/Estimates.js    |  35 +-
 .../Sales/Estimate/EstimatesDataTable.js      | 142 +++++---
 .../Sales/Estimate/withEstimateActions.js     |   2 +-
 .../Sales/Estimate/withEstimates.js           |  21 +-
 .../Sales/Invoice/InvoiceActionsBar.js        |  78 ++--
 .../containers/Sales/Invoice/InvoiceForm.js   | 136 ++++---
 .../Sales/Invoice/InvoiceFormFooter.js        |  15 +-
 .../containers/Sales/Invoice/InvoiceList.js   | 104 +++++-
 .../Sales/Invoice/InvoiceViewTabs.js          | 113 ++++++
 .../src/containers/Sales/Invoice/Invoices.js  |  29 +-
 .../Sales/Invoice/InvoicesDataTable.js        | 183 ++++++----
 .../Sales/Invoice/withInvoiceActions.js       |   4 +-
 .../Sales/Invoice/withInvoiceDetail.js        |   6 +-
 .../containers/Sales/Invoice/withInvoices.js  |  25 ++
 .../Sales/Receipt/ReceiptActionsBar.js        | 149 ++++++++
 .../containers/Sales/Receipt/ReceiptForm.js   | 131 ++++---
 .../Sales/Receipt/ReceiptFormFooter.js        |  15 +-
 .../Sales/Receipt/ReceiptFormHeader.js        |   8 +-
 .../containers/Sales/Receipt/ReceiptList.js   | 191 ++++++++++
 .../Sales/Receipt/ReceiptViewTabs.js          | 109 ++++++
 .../src/containers/Sales/Receipt/Receipts.js  |  23 +-
 .../Sales/Receipt/ReceiptsDataTable.js        | 247 +++++++++++++
 .../Sales/Receipt/withReceipActions.js        |   4 +-
 .../Sales/Receipt/withReceiptDetail.js        |  11 +
 .../containers/Sales/Receipt/withReceipts.js  |  27 ++
 .../containers/Vendors/withVendorActions.js   |  32 ++
 client/src/containers/Vendors/withVendors.js  |  27 ++
 client/src/lang/en/index.js                   |  28 +-
 client/src/routes/dashboard.js                |  71 ++--
 client/src/store/Bills/bills.actions.js       |  14 +-
 client/src/store/Bills/bills.reducer.js       | 102 ++++++
 client/src/store/Bills/bills.selectors.js     |  52 ++-
 .../src/store/Estimate/estimates.actions.js   |  27 +-
 .../src/store/Estimate/estimates.reducer.js   |  21 +-
 .../src/store/Estimate/estimates.selectors.js |  50 +--
 client/src/store/Invoice/invoices.actions.js  |  33 +-
 client/src/store/Invoice/invoices.reducer.js  |  91 ++++-
 client/src/store/Invoice/invoices.selector.js |  55 ++-
 client/src/store/receipt/receipt.actions.js   |  24 +-
 client/src/store/receipt/receipt.reducer.js   | 103 ++++++
 client/src/store/receipt/receipt.selector.js  |  56 +++
 client/src/store/reducers.js                  |  12 +-
 client/src/store/types.js                     |   2 +
 client/src/store/vendors/vendors.actions.js   | 118 +++++++
 client/src/store/vendors/vendors.reducer.js   |  96 +++++
 client/src/store/vendors/vendors.selectors.js |  54 +++
 client/src/store/vendors/vendors.types.js     |  11 +
 66 files changed, 4288 insertions(+), 535 deletions(-)
 create mode 100644 client/src/containers/Purchases/Bill/BillActionsBar.js
 create mode 100644 client/src/containers/Purchases/Bill/BillForm.js
 create mode 100644 client/src/containers/Purchases/Bill/BillFormFooter.js
 create mode 100644 client/src/containers/Purchases/Bill/BillFormHeader.js
 create mode 100644 client/src/containers/Purchases/Bill/BillList.js
 create mode 100644 client/src/containers/Purchases/Bill/BillViewTabs.js
 create mode 100644 client/src/containers/Purchases/Bill/Bills.js
 create mode 100644 client/src/containers/Purchases/Bill/BillsDataTable.js
 create mode 100644 client/src/containers/Purchases/Bill/withBillActions.js
 create mode 100644 client/src/containers/Purchases/Bill/withBillDetail.js
 create mode 100644 client/src/containers/Purchases/Bill/withBills.js
 create mode 100644 client/src/containers/Sales/Estimate/EstimateViewTabs.js
 create mode 100644 client/src/containers/Sales/Invoice/InvoiceViewTabs.js
 create mode 100644 client/src/containers/Sales/Invoice/withInvoices.js
 create mode 100644 client/src/containers/Sales/Receipt/ReceiptList.js
 create mode 100644 client/src/containers/Sales/Receipt/ReceiptViewTabs.js
 create mode 100644 client/src/containers/Sales/Receipt/ReceiptsDataTable.js
 create mode 100644 client/src/containers/Sales/Receipt/withReceiptDetail.js
 create mode 100644 client/src/containers/Sales/Receipt/withReceipts.js
 create mode 100644 client/src/containers/Vendors/withVendorActions.js
 create mode 100644 client/src/containers/Vendors/withVendors.js
 create mode 100644 client/src/store/vendors/vendors.actions.js
 create mode 100644 client/src/store/vendors/vendors.reducer.js
 create mode 100644 client/src/store/vendors/vendors.selectors.js
 create mode 100644 client/src/store/vendors/vendors.types.js

diff --git a/client/src/components/EstimateListField.js b/client/src/components/EstimateListField.js
index ea37b794f..a7b94a662 100644
--- a/client/src/components/EstimateListField.js
+++ b/client/src/components/EstimateListField.js
@@ -1,39 +1,71 @@
 import React, { useCallback, useMemo, useEffect, useState } from 'react';
-import { MenuItem, Button } from '@blueprintjs/core';
+import { MenuItem } from '@blueprintjs/core';
 import ListSelect from 'components/ListSelect';
 import { FormattedMessage as T } from 'react-intl';
 
 function EstimateListField({
   products,
+  initialProductId,
   selectedProductId,
-  onProductSelected,
   defautlSelectText = <T id={'select_product'} />,
+  onProductSelected,
 }) {
+  const initialProduct = useMemo(
+    () => products.find((a) => a.id === initialProductId),
+    [initialProductId],
+  );
+
+  const [selectedProduct, setSelectedProduct] = useState(
+    initialProduct || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedProductId !== 'undefined') {
+      const product = selectedProductId
+        ? products.find((a) => a.id === selectedProductId)
+        : null;
+      setSelectedProduct(product);
+    }
+  }, [selectedProductId, products, setSelectedProduct]);
+
   const onProductSelect = useCallback(
     (product) => {
+      setSelectedProduct({ ...product });
       onProductSelected && onProductSelected(product);
     },
     [onProductSelected],
   );
 
   const productRenderer = useCallback(
-    (item, { handleClick, modifiers, query }) => (
-      <MenuItem text={item.name} key={item.id} onClick={handleClick} />
+    (item, { handleClick }) => (
+      <MenuItem key={item.id} text={item.name} onClick={handleClick} />
     ),
     [],
   );
 
+  const filterProduct = useCallback((query, product, _index, exactMatch) => {
+    const normalizedTitle = product.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  }, []);
+
   return (
     <ListSelect
       items={products}
       noResults={<MenuItem disabled={true} text="No results." />}
       itemRenderer={productRenderer}
+      itemPredicate={filterProduct}
       popoverProps={{ minimal: true }}
       onItemSelect={onProductSelect}
       selectedItem={`${selectedProductId}`}
       selectedItemProp={'id'}
       labelProp={'name'}
-      defaultText={defautlSelectText}
+      defaultText={selectedProduct ? selectedProduct.name : defautlSelectText}
     />
   );
 }
diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js
index 9e72634cf..8945fa9dd 100644
--- a/client/src/config/sidebarMenu.js
+++ b/client/src/config/sidebarMenu.js
@@ -42,21 +42,35 @@ export default [
         text: <T id={'estimates'} />,
         href: '/estimates/new',
       },
+      // {
+      //   text: <T id={'estimate_list'} />,
+      //   href: '/estimates',
+      // },
       {
         text: <T id={'invocies'} />,
         href: '/invoices/new',
       },
+      // {
+      //   text: <T id={'invoices_list'} />,
+      //   href: '/invoices',
+      // },
       {
         text: <T id={'payment_receives'} />,
         href: '/payment-receive/new',
       },
       {
         divider: true,
+        text: <T id={'invoices_list'} />,
+        href: '/invoices',
       },
       {
         text: <T id={'receipts'} />,
         href: '/receipts/new',
       },
+      // {
+      //   text: <T id={'receipt_list'} />,
+      //   href: '/receipts',
+      // },
     ],
   },
   {
@@ -64,8 +78,12 @@ export default [
     children: [
       {
         text: <T id={'bills'} />,
-        href: '/bill/new',
+        href: '/bills/new',
       },
+      // {
+      //   text: <T id={'bill_list'} />,
+      //   href: '/bills',
+      // },
       {
         text: <T id={'payment_mades'} />,
       },
diff --git a/client/src/containers/Purchases/Bill/BillActionsBar.js b/client/src/containers/Purchases/Bill/BillActionsBar.js
new file mode 100644
index 000000000..dad1c4f2b
--- /dev/null
+++ b/client/src/containers/Purchases/Bill/BillActionsBar.js
@@ -0,0 +1,148 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import Icon from 'components/Icon';
+import {
+  Button,
+  Classes,
+  Menu,
+  MenuItem,
+  Popover,
+  NavbarDivider,
+  NavbarGroup,
+  PopoverInteractionKind,
+  Position,
+  Intent,
+} from '@blueprintjs/core';
+
+import classNames from 'classnames';
+import { useRouteMatch, useHistory } from 'react-router-dom';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+import { connect } from 'react-redux';
+import FilterDropdown from 'components/FilterDropdown';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import { If, DashboardActionViewsList } from 'components';
+
+import withResourceDetail from 'containers/Resources/withResourceDetails';
+import withBillActions from './withBillActions';
+import withBills from './withBills';
+
+import { compose } from 'utils';
+
+function BillActionsBar({
+  // #withResourceDetail
+  resourceFields,
+
+  //#withBills
+  billsViews,
+
+  //#withBillActions
+  addBillsTableQueries,
+
+  // #own Porps
+  onFilterChanged,
+  selectedRows = [],
+}) {
+  const history = useHistory();
+  const { path } = useRouteMatch();
+  const [filterCount, setFilterCount] = useState(0);
+  const { formatMessage } = useIntl();
+
+  const handleClickNewBill = useCallback(() => {
+    history.push('/bills/new');
+  }, [history]);
+
+  //   const FilterDropdown = FilterDropdown({
+  //   initialCondition: {
+  //     fieldKey: '',
+  //     compatator: '',
+  //     value: '',
+  //   },
+  //   fields: resourceFields,
+  //   onFilterChange: (filterConditions) => {
+  //     addBillsTableQueries({
+  //       filter_roles: filterConditions || '',
+  //     });
+  //     onFilterChanged && onFilterChanged(filterConditions);
+  //   },
+  // });
+
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList resourceName={'bills'} views={[]} />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_bill'} />}
+          onClick={handleClickNewBill}
+        />
+        <Popover
+          minimal={true}
+          content={[]}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL)}
+            text={
+              filterCount <= 0 ? (
+                <T id={'filter'} />
+              ) : (
+                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+              )
+            }
+            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          />
+        </Popover>
+        <If condition={hasSelectedRows}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            // onClick={handleBulkDelete}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+const mapStateToProps = (state, props) => ({
+  resourceName: 'bills',
+});
+const withBillActionsBar = connect(mapStateToProps);
+
+export default compose(
+  withBillActionsBar,
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })),
+
+  // withBills(({billsViews})=>({
+  //   billsViews
+  // })),
+
+  withBillActions,
+)(BillActionsBar);
diff --git a/client/src/containers/Purchases/Bill/BillForm.js b/client/src/containers/Purchases/Bill/BillForm.js
new file mode 100644
index 000000000..f958d5d32
--- /dev/null
+++ b/client/src/containers/Purchases/Bill/BillForm.js
@@ -0,0 +1,334 @@
+import React, {
+  useMemo,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+} 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, omit } from 'lodash';
+
+import BillFormHeader from './BillFormHeader';
+import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
+import BillFormFooter from './BillFormFooter';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withMediaActions from 'containers/Media/withMediaActions';
+import withBillActions from './withBillActions';
+import withBillDetail from './withBillDetail';
+
+import { AppToaster } from 'components';
+import Dragzone from 'components/Dragzone';
+import useMedia from 'hooks/useMedia';
+
+import { compose, repeatValue } from 'utils';
+
+const MIN_LINES_NUMBER = 4;
+
+function BillForm({
+  //#WithMedia
+  requestSubmitMedia,
+  requestDeleteMedia,
+
+  //#withBillActions
+  requestSubmitBill,
+  requestEditBill,
+
+  //#withDashboard
+  changePageTitle,
+  changePageSubtitle,
+
+  //#withBillDetail
+  bill,
+
+  //#Own Props
+  billId,
+  onFormSubmit,
+  onCancelForm,
+}) {
+  const { formatMessage } = useIntl();
+  const [payload, setPayload] = useState({});
+
+  const {
+    setFiles,
+    saveMedia,
+    deletedFiles,
+    setDeletedFiles,
+    deleteMedia,
+  } = useMedia({
+    saveCallback: requestSubmitMedia,
+    deleteCallback: requestDeleteMedia,
+  });
+
+  const handleDropFiles = useCallback((_files) => {
+    setFiles(_files.filter((file) => file.uploaded === false));
+  }, []);
+
+  const savedMediaIds = useRef([]);
+  const clearSavedMediaIds = () => {
+    savedMediaIds.current = [];
+  };
+
+  useEffect(() => {
+    if (bill && bill.id) {
+      changePageTitle(formatMessage({ id: 'edit_bill' }));
+    } else {
+      changePageTitle(formatMessage({ id: 'new_bill' }));
+    }
+  }, [changePageTitle, bill, formatMessage]);
+
+  const validationSchema = Yup.object().shape({
+    vendor_id: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'vendor_name_' })),
+    bill_date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'bill_date_' })),
+    due_date: Yup.date()
+      .required()
+      .label(formatMessage({ id: 'due_date_' })),
+    bill_number: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'bill_number_' })),
+    reference_no: Yup.string().min(1).max(255),
+    status: Yup.string().required().nullable(),
+    note: Yup.string()
+      .trim()
+      .min(1)
+      .max(1024)
+      .label(formatMessage({ id: 'note' })),
+
+    entries: Yup.array().of(
+      Yup.object().shape({
+        quantity: Yup.number().nullable(),
+        rate: Yup.number().nullable(),
+        item_id: Yup.number()
+          .nullable()
+          .when(['quantity', 'rate'], {
+            is: (quantity, rate) => quantity || rate,
+            then: Yup.number().required(),
+          }),
+        total: Yup.number().nullable(),
+        discount: Yup.number().nullable(),
+        description: Yup.string().nullable(),
+      }),
+    ),
+  });
+
+  const saveBillSubmit = useCallback(
+    (payload) => {
+      onFormSubmit && onFormSubmit(payload);
+    },
+    [onFormSubmit],
+  );
+
+  const defaultBill = useMemo(() => ({
+    index: 0,
+    item_id: null,
+    rate: null,
+    discount: 0,
+    quantity: null,
+    description: '',
+  }));
+
+  const defaultInitialValues = useMemo(
+    () => ({
+      vendor_id: '',
+      bill_number: '',
+      bill_date: moment(new Date()).format('YYYY-MM-DD'),
+      due_date: moment(new Date()).format('YYYY-MM-DD'),
+      status: 'Bill',
+      reference_no: '',
+      note: '',
+      entries: [...repeatValue(defaultBill, MIN_LINES_NUMBER)],
+    }),
+    [defaultBill],
+  );
+
+  const orderingIndex = (_bill) => {
+    return _bill.map((item, index) => ({
+      ...item,
+      index: index + 1,
+    }));
+  };
+
+  const initialValues = useMemo(
+    () => ({
+      ...(bill
+        ? {
+            ...pick(bill, Object.keys(defaultInitialValues)),
+            entries: [
+              ...bill.entries.map((bill) => ({
+                ...pick(bill, Object.keys(defaultBill)),
+              })),
+              ...repeatValue(
+                defaultBill,
+                Math.max(MIN_LINES_NUMBER - bill.entries.length, 0),
+              ),
+            ],
+          }
+        : {
+            ...defaultInitialValues,
+            entries: orderingIndex(defaultInitialValues.entries),
+          }),
+    }),
+    [bill, defaultInitialValues, defaultBill],
+  );
+
+  // const initialValues = useMemo(
+  //   () => ({
+  //     ...defaultInitialValues,
+  //     entries: orderingIndex(defaultInitialValues.entries),
+  //   }),
+  //   [defaultInitialValues],
+  // );
+
+  const initialAttachmentFiles = useMemo(() => {
+    return bill && bill.media
+      ? bill.media.map((attach) => ({
+          preview: attach.attachment_file,
+          uploaded: true,
+          metadata: { ...attach },
+        }))
+      : [];
+  }, [bill]);
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema,
+    initialValues: {
+      ...initialValues,
+    },
+    onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
+      setSubmitting(true);
+
+      const entries = values.entries.filter(
+        (item) => item.item_id && item.quantity,
+      );
+      const form = {
+        ...values,
+        entries,
+      };
+
+      const requestForm = { ...form };
+      if (bill && bill.id) {
+        requestEditBill(bill.id, requestForm)
+          .then((response) => {
+            AppToaster.show({
+              message: formatMessage({
+                id: 'the_bill_has_been_successfully_edited',
+              }),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            saveBillSubmit({ action: 'update', ...payload });
+            resetForm();
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      } else {
+        requestSubmitBill(requestForm)
+          .then((response) => {
+            AppToaster.show({
+              message: formatMessage(
+                { id: 'the_bill_has_been_successfully_created' },
+                { number: values.bill_number },
+              ),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            resetForm();
+            saveBillSubmit({ action: 'new', ...payload });
+          })
+          .catch((errors) => {
+            setSubmitting(false);
+          });
+      }
+    },
+  });
+
+  const handleSubmitClick = useCallback(
+    (payload) => {
+      setPayload(payload);
+      formik.submitForm();
+    },
+    [setPayload, formik],
+  );
+
+  const handleCancelClick = useCallback(
+    (payload) => {
+      onCancelForm && onCancelForm(payload);
+    },
+    [onCancelForm],
+  );
+
+  const handleDeleteFile = useCallback(
+    (_deletedFiles) => {
+      _deletedFiles.forEach((deletedFile) => {
+        if (deletedFile.uploaded && deletedFile.metadata.id) {
+          setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
+        }
+      });
+    },
+    [setDeletedFiles, deletedFiles],
+  );
+
+  const onClickCleanAllLines = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingIndex([...repeatValue(defaultBill, MIN_LINES_NUMBER)]),
+    );
+  };
+
+  const onClickAddNewRow = () => {
+    formik.setFieldValue(
+      'entries',
+      orderingIndex([...formik.values.entries, defaultBill]),
+    );
+  };
+
+  console.log(formik.errors, 'Errors');
+  console.log(formik.values, 'values');
+
+  return (
+    <div className={'bill-form'}>
+      <form onSubmit={formik.handleSubmit}>
+        <BillFormHeader formik={formik} />
+        <EstimatesItemsTable
+          formik={formik}
+          entries={formik.values.entries}
+          onClickAddNewRow={onClickAddNewRow}
+          onClickClearAllLines={onClickCleanAllLines}
+        />
+        <FormGroup label={<T id={'note'} />} className={'form-group--'}>
+          <TextArea growVertically={true} {...formik.getFieldProps('note')} />
+        </FormGroup>
+        <Dragzone
+          initialFiles={initialAttachmentFiles}
+          onDrop={handleDropFiles}
+          onDeleteFile={handleDeleteFile}
+          hint={'Attachments: Maxiumum size: 20MB'}
+        />
+      </form>
+      <BillFormFooter
+        formik={formik}
+        onSubmitClick={handleSubmitClick}
+        bill={bill}
+        onCancelClick={handleCancelClick}
+      />
+    </div>
+  );
+}
+
+export default compose(
+  withBillActions,
+  withDashboardActions,
+  withMediaActions,
+  withBillDetail(),
+)(BillForm);
diff --git a/client/src/containers/Purchases/Bill/BillFormFooter.js b/client/src/containers/Purchases/Bill/BillFormFooter.js
new file mode 100644
index 000000000..e08a5eaec
--- /dev/null
+++ b/client/src/containers/Purchases/Bill/BillFormFooter.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Intent, Button } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function BillFormFooter({
+  formik: { isSubmitting },
+  onSubmitClick,
+  onCancelClick,
+  bill,
+}) {
+  return (
+    <div>
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        type="submit"
+        onClick={() => {
+          onSubmitClick({ redirect: true });
+        }}
+      >
+        {bill && bill.id ? <T id={'edit'} /> : <T id={'save_send'} />}
+      </Button>
+
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        className={'ml1'}
+        name={'save'}
+        type="submit"
+        onClick={() => {
+          onSubmitClick({ redirect: false });
+        }}
+      >
+        <T id={'save'} />
+      </Button>
+
+      <Button className={'ml1'} disabled={isSubmitting}>
+        <T id={'clear'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        type="submit"
+        onClick={() => {
+          onCancelClick && onCancelClick();
+        }}
+      >
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}
diff --git a/client/src/containers/Purchases/Bill/BillFormHeader.js b/client/src/containers/Purchases/Bill/BillFormHeader.js
new file mode 100644
index 000000000..ec609ddf2
--- /dev/null
+++ b/client/src/containers/Purchases/Bill/BillFormHeader.js
@@ -0,0 +1,190 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Intent,
+  Position,
+  MenuItem,
+  Classes,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import { Row, Col } from 'react-grid-system';
+import moment from 'moment';
+import { momentFormatter, compose, tansformDateValue } from 'utils';
+import classNames from 'classnames';
+import {
+  AccountsSelectList,
+  ListSelect,
+  ErrorMessage,
+  FieldRequiredHint,
+  Hint,
+} from 'components';
+
+// import withCustomers from 'containers/Customers/withCustomers';
+import withVendors from 'containers/Vendors/withVendors';
+import withAccounts from 'containers/Accounts/withAccounts';
+
+function BillFormHeader({
+  formik: { errors, touched, setFieldValue, getFieldProps, values },
+
+  //#withVendors
+  vendorsCurrentPage,
+  vendorItems,
+  //#withAccouts
+  accountsList,
+}) {
+  const handleDateChange = useCallback(
+    (date_filed) => (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      setFieldValue(date_filed, formatted);
+    },
+    [setFieldValue],
+  );
+
+  const onChangeSelected = useCallback(
+    (filedName) => {
+      return (item) => {
+        setFieldValue(filedName, item.id);
+      };
+    },
+    [setFieldValue],
+  );
+
+  const vendorNameRenderer = useCallback(
+    (accept, { handleClick }) => (
+      <MenuItem
+        key={accept.id}
+        text={accept.display_name}
+        onClick={handleClick}
+      />
+    ),
+    [],
+  );
+
+  // Filter vendor name
+  const filterVendorAccount = (query, vendor, _index, exactMatch) => {
+    const normalizedTitle = vendor.display_name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${vendor.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >=
+        0
+      );
+    }
+  };
+
+  console.log(vendorsCurrentPage, 'vendorsCurrentPage');
+  console.log(vendorItems, 'vendorItems');
+  return (
+    <div>
+      <div>
+        {/* vendor  account name */}
+        <FormGroup
+          label={<T id={'vendor_name'} />}
+          inline={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
+          labelInfo={<FieldRequiredHint />}
+          intent={errors.vendor_id && touched.vendor_id && Intent.DANGER}
+          helperText={
+            <ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
+          }
+        >
+          <ListSelect
+            items={vendorsCurrentPage}
+            noResults={<MenuItem disabled={true} text="No results." />}
+            itemRenderer={vendorNameRenderer}
+            itemPredicate={filterVendorAccount}
+            popoverProps={{ minimal: true }}
+            onItemSelect={onChangeSelected('vendor_id')}
+            selectedItem={values.vendor_id}
+            selectedItemProp={'id'}
+            defaultText={<T id={'select_vendor_account'} />}
+            labelProp={'display_name'}
+          />
+        </FormGroup>
+        <Row>
+          <Col>
+            <FormGroup
+              label={<T id={'bill_date'} />}
+              inline={true}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames('form-group--select-list', Classes.FILL)}
+              intent={errors.bill_date && touched.bill_date && Intent.DANGER}
+              helperText={
+                <ErrorMessage name="bill_date" {...{ errors, touched }} />
+              }
+            >
+              <DateInput
+                {...momentFormatter('YYYY/MM/DD')}
+                value={tansformDateValue(values.bill_date)}
+                onChange={handleDateChange('bill_date')}
+                popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup
+              label={<T id={'due_date'} />}
+              inline={true}
+              className={classNames('form-group--select-list', Classes.FILL)}
+              intent={errors.due_date && touched.due_date && Intent.DANGER}
+              helperText={
+                <ErrorMessage name="due_date" {...{ errors, touched }} />
+              }
+            >
+              <DateInput
+                {...momentFormatter('YYYY/MM/DD')}
+                value={tansformDateValue(values.due_date)}
+                onChange={handleDateChange('due_date')}
+                popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        {/* bill number */}
+        <FormGroup
+          label={<T id={'bill_number'} />}
+          inline={true}
+          className={('form-group--estimate', Classes.FILL)}
+          labelInfo={<FieldRequiredHint />}
+          intent={errors.bill_number && touched.bill_number && Intent.DANGER}
+          helperText={
+            <ErrorMessage name="bill_number" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={errors.bill_number && touched.bill_number && Intent.DANGER}
+            minimal={true}
+            {...getFieldProps('bill_number')}
+          />
+        </FormGroup>
+      </div>
+      <FormGroup
+        label={<T id={'reference'} />}
+        inline={true}
+        className={classNames('form-group--reference', Classes.FILL)}
+        intent={errors.reference_no && touched.reference_no && Intent.DANGER}
+        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+      >
+        <InputGroup
+          intent={errors.reference_no && touched.reference_no && Intent.DANGER}
+          minimal={true}
+          {...getFieldProps('reference_no')}
+        />
+      </FormGroup>
+    </div>
+  );
+}
+
+export default compose(
+  withVendors(({ vendorsCurrentPage, vendorItems }) => ({
+    vendorsCurrentPage,
+    vendorItems,
+  })),
+  withAccounts(({ accountsList }) => ({
+    accountsList,
+  })),
+)(BillFormHeader);
diff --git a/client/src/containers/Purchases/Bill/BillList.js b/client/src/containers/Purchases/Bill/BillList.js
new file mode 100644
index 000000000..158c9a61b
--- /dev/null
+++ b/client/src/containers/Purchases/Bill/BillList.js
@@ -0,0 +1,178 @@
+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 BillsDataTable from './BillsDataTable';
+import BillActionsBar from './BillActionsBar';
+import BillViewTabs from './BillViewTabs';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withResourceActions from 'containers/Resources/withResourcesActions';
+
+import withBills from './withBills';
+import withBillActions from './withBillActions';
+import withViewsActions from 'containers/Views/withViewsActions';
+
+import { compose } from 'utils';
+
+function BillList({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withViewsActions
+  requestFetchResourceViews,
+  requestFetchResourceFields,
+
+  //#withBills
+  billsTableQuery,
+
+  //#withBillActions
+  requestFetchBillsTable,
+  requestDeleteBill,
+  addBillsTableQueries,
+}) {
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+  const [deleteBill, setDeleteBill] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  useEffect(() => {
+    changePageTitle(formatMessage({ id: 'bill_list' }));
+  }, [changePageTitle, formatMessage]);
+
+  const fetchResourceViews = useQuery(
+    ['resource-views', 'bills'],
+    (key, resourceName) => requestFetchResourceViews(resourceName),
+  );
+
+  const fetchResourceFields = useQuery(
+    ['resource-fields', 'bills'],
+    (key, resourceName) => requestFetchResourceFields(resourceName),
+  );
+
+  const fetchBills = useQuery(['bills-table', billsTableQuery], () =>
+    requestFetchBillsTable(),
+  );
+
+  //handle dalete Bill
+  const handleDeleteBill = useCallback(
+    (bill) => {
+      setDeleteBill(bill);
+    },
+    [setDeleteBill],
+  );
+
+  // handle cancel Bill
+  const handleCancelBillDelete = useCallback(() => {
+    setDeleteBill(false);
+  }, [setDeleteBill]);
+
+  // handleConfirm delete invoice
+  const handleConfirmBillDelete = useCallback(() => {
+    requestDeleteBill(deleteBill.id).then(() => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_bill_has_been_successfully_deleted',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      setDeleteBill(false);
+    });
+  }, [deleteBill, requestDeleteBill, formatMessage]);
+
+  const handleEditBill = useCallback((bill) => {
+    history.push(`/bills/${bill.id}/edit`);
+  });
+
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      const page = pageIndex + 1;
+
+      addBillsTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page,
+      });
+    },
+    [addBillsTableQueries],
+  );
+
+  // Handle selected rows change.
+  const handleSelectedRowsChange = useCallback(
+    (_invoices) => {
+      setSelectedRows(_invoices);
+    },
+    [setSelectedRows],
+  );
+
+  // Handle filter change to re-fetch data-table.
+  const handleFilterChanged = useCallback(
+    (filterConditions) => {
+      addBillsTableQueries({
+        filter_roles: filterConditions || '',
+      });
+    },
+    [fetchBills],
+  );
+
+  return (
+    <DashboardInsider
+      loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
+      name={'bills'}
+    >
+      <BillActionsBar
+        // onBulkDelete={}
+        selectedRows={selectedRows}
+        onFilterChanged={handleFilterChanged}
+      />
+      <DashboardPageContent>
+        <Switch>
+          <Route exact={true}>
+            <BillViewTabs />
+            <BillsDataTable
+              loading={fetchBills.isFetching}
+              onDeleteBill={handleDeleteBill}
+              onFetchData={handleFetchData}
+              onEditBill={handleEditBill}
+              onSelectedRowsChange={handleSelectedRowsChange}
+            />
+          </Route>
+        </Switch>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'delete'} />}
+          icon={'trash'}
+          intent={Intent.DANGER}
+          isOpen={deleteBill}
+          onCancel={handleCancelBillDelete}
+          onConfirm={handleConfirmBillDelete}
+        >
+          <p>
+            <T id={'once_delete_this_bill_you_will_able_to_restore_it'} />
+          </p>
+        </Alert>
+      </DashboardPageContent>
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withResourceActions,
+  withBillActions,
+  withDashboardActions,
+  withViewsActions,
+  withBills(({ billsTableQuery }) => ({
+    billsTableQuery,
+  })),
+)(BillList);
diff --git a/client/src/containers/Purchases/Bill/BillViewTabs.js b/client/src/containers/Purchases/Bill/BillViewTabs.js
new file mode 100644
index 000000000..aae359dbc
--- /dev/null
+++ b/client/src/containers/Purchases/Bill/BillViewTabs.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 withBills from './withBills';
+import withBillActions from './withBillActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withViewDetails from 'containers/Views/withViewDetails';
+
+import { compose } from 'utils';
+
+function BillViewTabs({
+  //#withBills
+  billsViews,
+
+  // #withViewDetails
+  viewItem,
+
+  //#withBillActions
+  changeBillView,
+  addBillsTableQueries,
+
+  // #withDashboardActions
+  setTopbarEditView,
+  changePageSubtitle,
+
+  // #ownProps
+  customViewChanged,
+  onViewChanged,
+}) {
+  const history = useHistory();
+  const { custom_view_id: customViewId = null } = useParams();
+
+  useEffect(() => {
+    changeBillView(customViewId || -1);
+    setTopbarEditView(customViewId);
+    changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
+
+    addBillsTableQueries({
+      custom_view_id: customViewId,
+    });
+    return () => {
+      setTopbarEditView(null);
+      changePageSubtitle('');
+      changeBillView(null);
+    };
+  }, [customViewId, addBillsTableQueries, changeBillView]);
+
+  useUpdateEffect(() => {
+    onViewChanged && onViewChanged(customViewId);
+  }, [customViewId]);
+
+  const debounceChangeHistory = useRef(
+    debounce((toUrl) => {
+      history.push(toUrl);
+    }, 250),
+  );
+  // Handle click a new view tab.
+  const handleClickNewView = () => {
+    setTopbarEditView(null);
+    history.push('/custom_views/invoices/new');
+  };
+  const handleTabsChange = (viewId) => {
+    const toPath = viewId ? `${viewId}/custom_view` : '';
+    debounceChangeHistory.current(`/bills/${toPath}`);
+    setTopbarEditView(viewId);
+  };
+  const tabs = billsViews.map((view) => ({
+    ...pick(view, ['name', 'id']),
+  }));
+
+  console.log(billsViews, 'billsViews');
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          initialViewId={customViewId}
+          baseUrl={'/bills'}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  viewId: ownProps.match.params.custom_view_id,
+});
+
+const withBillsViewTabs = connect(mapStateToProps);
+
+export default compose(
+  withRouter,
+  withBillsViewTabs,
+  withBillActions,
+  withDashboardActions,
+  withViewDetails(),
+  withBills(({ billsViews }) => ({
+    billsViews,
+  })),
+)(BillViewTabs);
diff --git a/client/src/containers/Purchases/Bill/Bills.js b/client/src/containers/Purchases/Bill/Bills.js
new file mode 100644
index 000000000..c336a3e74
--- /dev/null
+++ b/client/src/containers/Purchases/Bill/Bills.js
@@ -0,0 +1,85 @@
+import React, { useCallback } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { useQuery } from 'react-query';
+
+import BillForm from './BillForm';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+import withVendorActions from 'containers/Vendors/withVendorActions';
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
+import withItemsActions from 'containers/Items/withItemsActions';
+import withBillActions from './withBillActions';
+
+import { compose } from 'utils';
+
+function Bills({
+  //#withwithAccountsActions
+  requestFetchAccounts,
+
+  //#withVendorActions
+  requestFetchVendorsTable,
+
+  //#withItemsActions
+  requestFetchItems,
+
+  //# withBilleActions
+  requestFetchBill,
+}) {
+  const history = useHistory();
+  const { id } = useParams();
+
+  // Handle fetch accounts
+  const fetchAccounts = useQuery('accounts-list', (key) =>
+    requestFetchAccounts(),
+  );
+
+  // Handle fetch customers data table
+  const fetchVendors = useQuery('vendors-list', () =>
+    requestFetchVendorsTable({}),
+  );
+
+  // Handle fetch Items data table or list
+  const fetchItems = useQuery('items-list', () => requestFetchItems({}));
+
+  const handleFormSubmit = useCallback(
+    (payload) => {
+      payload.redirect && history.push('/bills');
+    },
+    [history],
+  );
+
+  const handleCancel = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
+  const fetchBill = useQuery(
+    ['bill', id],
+    (key, _id) => requestFetchBill(_id),
+    { enabled: !!id },
+  );
+
+  return (
+    <DashboardInsider
+      loading={
+        fetchVendors.isFetching ||
+        fetchItems.isFetching ||
+        fetchAccounts.isFetching ||
+        fetchBill.isFetching
+      }
+      name={'bill-form'}
+    >
+      <BillForm
+        onFormSubmit={handleFormSubmit}
+        billId={id}
+        onCancelForm={handleCancel}
+      />
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withBillActions,
+  withVendorActions,
+  withItemsActions,
+  withAccountsActions,
+)(Bills);
diff --git a/client/src/containers/Purchases/Bill/BillsDataTable.js b/client/src/containers/Purchases/Bill/BillsDataTable.js
new file mode 100644
index 000000000..0f7c351a1
--- /dev/null
+++ b/client/src/containers/Purchases/Bill/BillsDataTable.js
@@ -0,0 +1,243 @@
+import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import {
+  Intent,
+  Button,
+  Classes,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core';
+
+import { useParams } from 'react-router-dom';
+import { withRouter } from 'react-router';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import moment from 'moment';
+
+import Icon from 'components/Icon';
+import { compose } from 'utils';
+import { useUpdateEffect } from 'hooks';
+
+import LoadingIndicator from 'components/LoadingIndicator';
+import DataTable from 'components/DataTable';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withViewDetails from 'containers/Views/withViewDetails';
+
+import withBills from './withBills';
+import withBillActions from './withBillActions';
+import withCurrentView from 'containers/Views/withCurrentView';
+
+function BillsDataTable({
+  //#withBills
+  billsCurrentPage,
+  billsLoading,
+  billsPageination,
+
+  // #withDashboardActions
+  changeCurrentView,
+  changePageSubtitle,
+  setTopbarEditView,
+
+  // #withView
+  viewMeta,
+
+  //#OwnProps
+  loading,
+  onFetchData,
+  onEditBill,
+  onDeleteBill,
+  onSelectedRowsChange,
+}) {
+  const [initialMount, setInitialMount] = useState(false);
+  const { custom_view_id: customViewId } = useParams();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    setInitialMount(false);
+  }, [customViewId]);
+
+  useUpdateEffect(() => {
+    if (!billsLoading) {
+      setInitialMount(true);
+    }
+  }, [billsLoading, setInitialMount]);
+
+  useEffect(() => {
+    if (customViewId) {
+      changeCurrentView(customViewId);
+      setTopbarEditView(customViewId);
+    }
+    changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
+  }, [
+    customViewId,
+    changeCurrentView,
+    changePageSubtitle,
+    setTopbarEditView,
+    viewMeta,
+  ]);
+
+  const handleEditBill = useCallback(
+    (_bill) => () => {
+      onEditBill && onEditBill(_bill);
+    },
+    [onEditBill],
+  );
+
+  const handleDeleteBill = useCallback(
+    (_bill) => () => {
+      onDeleteBill && onDeleteBill(_bill);
+    },
+    [onDeleteBill],
+  );
+
+  const actionMenuList = useCallback(
+    (bill) => (
+      <Menu>
+        <MenuItem text={formatMessage({ id: 'view_details' })} />
+        <MenuDivider />
+        <MenuItem
+          text={formatMessage({ id: 'edit_bill' })}
+          onClick={handleEditBill(bill)}
+        />
+        <MenuItem
+          text={formatMessage({ id: 'delete_bill' })}
+          intent={Intent.DANGER}
+          onClick={handleDeleteBill(bill)}
+        />
+      </Menu>
+    ),
+    [handleDeleteBill, handleEditBill, formatMessage],
+  );
+
+  const onRowContextMenu = useCallback(
+    (cell) => {
+      return actionMenuList(cell.row.original);
+    },
+    [actionMenuList],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'bill_date',
+        Header: formatMessage({ id: 'bill_date' }),
+        accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'bill_date',
+      },
+      {
+        id: 'vendor_id',
+        Header: formatMessage({ id: 'vendor_name' }),
+        accessor: (row) => row.vendor_id,
+        width: 140,
+        className: 'vendor_id',
+      },
+      {
+        id: 'bill_number',
+        Header: formatMessage({ id: 'bill_number' }),
+        accessor: (row) => `#${row.bill_number}`,
+        width: 140,
+        className: 'bill_number',
+      },
+
+      {
+        id: 'due_date',
+        Header: formatMessage({ id: 'due_date' }),
+        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'due_date',
+      },
+      {
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: 'amount',
+        width: 140,
+        className: 'amount',
+      },
+      {
+        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',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_BOTTOM}
+          >
+            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
+
+  const handleDataTableFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData],
+  );
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange],
+  );
+
+  return (
+    <div>
+      <LoadingIndicator loading={loading} mount={false}>
+        <DataTable
+          columns={columns}
+          data={billsCurrentPage}
+          onFetchData={handleDataTableFetchData}
+          manualSortBy={true}
+          selectionColumn={true}
+          noInitialFetch={true}
+          sticky={true}
+          loading={billsLoading && !initialMount}
+          onSelectedRowsChange={handleSelectedRowsChange}
+          rowContextMenu={onRowContextMenu}
+          pagination={true}
+          pagesCount={billsPageination.pagesCount}
+          initialPageSize={billsPageination.pageSize}
+          initialPageIndex={billsPageination.page - 1}
+        />
+      </LoadingIndicator>
+    </div>
+  );
+}
+
+export default compose(
+  withRouter,
+  withCurrentView,
+  withDialogActions,
+  withDashboardActions,
+  withBillActions,
+  withBills(({ billsCurrentPage, billsLoading, billsPageination }) => ({
+    billsCurrentPage,
+    billsLoading,
+    billsPageination,
+  })),
+  withViewDetails(),
+)(BillsDataTable);
diff --git a/client/src/containers/Purchases/Bill/withBillActions.js b/client/src/containers/Purchases/Bill/withBillActions.js
new file mode 100644
index 000000000..83bd057d7
--- /dev/null
+++ b/client/src/containers/Purchases/Bill/withBillActions.js
@@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+import {
+  submitBill,
+  deleteBill,
+  editBill,
+  fetchBillsTable,
+  fetchBill,
+} from 'store/Bills/bills.actions';
+import t from 'store/types';
+
+const mapDispatchToProps = (dispatch) => ({
+  requestSubmitBill: (form) => dispatch(submitBill({ form })),
+  requestFetchBill: (id) => dispatch(fetchBill({ id })),
+  requestEditBill: (id, form) => dispatch(editBill( id, form )),
+  requestDeleteBill: (id) => dispatch(deleteBill({ id })),
+  requestFetchBillsTable: (query = {}) =>
+    dispatch(fetchBillsTable({ query: { ...query } })),
+
+  changeBillView: (id) =>
+    dispatch({
+      type: t.BILLS_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+
+  addBillsTableQueries: (queries) =>
+    dispatch({
+      type: t.BILLS_TABLE_QUERIES_ADD,
+      queries,
+    }),
+});
+
+export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Purchases/Bill/withBillDetail.js b/client/src/containers/Purchases/Bill/withBillDetail.js
new file mode 100644
index 000000000..3170ee5d5
--- /dev/null
+++ b/client/src/containers/Purchases/Bill/withBillDetail.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { getBillByIdFactory } from 'store/Bills/bills.selectors';
+
+export default () => {
+  const getBillById = getBillByIdFactory();
+
+  const mapStateToProps = (state, props) => ({
+    bill: getBillById(state, props),
+  });
+  return connect(mapStateToProps);
+};
diff --git a/client/src/containers/Purchases/Bill/withBills.js b/client/src/containers/Purchases/Bill/withBills.js
new file mode 100644
index 000000000..3cd292828
--- /dev/null
+++ b/client/src/containers/Purchases/Bill/withBills.js
@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+import {
+  getBillCurrentPageFactory,
+  getBillPaginationMetaFactory,
+  getBillTableQuery,
+} from 'store/Bills/bills.selectors';
+
+export default (mapState) => {
+  const getBillsItems = getBillCurrentPageFactory();
+  const getBillsPaginationMeta = getBillPaginationMetaFactory();
+  const mapStateToProps = (state, props) => {
+    const query = getBillTableQuery(state, props);
+    const mapped = {
+      billsCurrentPage: getBillsItems(state, props, query),
+      billsViews: getResourceViews(state, props, 'bills'),
+      billsItems: state.bills.items,
+      billsTableQuery: query,
+      billsPageination: getBillsPaginationMeta(state, props, query),
+      billsLoading: state.bills.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/client/src/containers/Sales/Estimate/EntriesItemsTable.js b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
index eaa0a370e..ab7e2f266 100644
--- 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']),
         })),
       );
     },
diff --git a/client/src/containers/Sales/Estimate/EstimateActionsBar.js b/client/src/containers/Sales/Estimate/EstimateActionsBar.js
index dca9ab169..0a8d42d43 100644
--- 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);
diff --git a/client/src/containers/Sales/Estimate/EstimateForm.js b/client/src/containers/Sales/Estimate/EstimateForm.js
index aceb930f0..c62fb864b 100644
--- 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);
diff --git a/client/src/containers/Sales/Estimate/EstimateFormFooter.js b/client/src/containers/Sales/Estimate/EstimateFormFooter.js
index d1881d750..cd93c0dd6 100644
--- 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>
 
diff --git a/client/src/containers/Sales/Estimate/EstimateList.js b/client/src/containers/Sales/Estimate/EstimateList.js
index cc91019d9..56de0e5ca 100644
--- 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);
diff --git a/client/src/containers/Sales/Estimate/EstimateViewTabs.js b/client/src/containers/Sales/Estimate/EstimateViewTabs.js
new file mode 100644
index 000000000..1583aebd7
--- /dev/null
+++ 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);
diff --git a/client/src/containers/Sales/Estimate/Estimates.js b/client/src/containers/Sales/Estimate/Estimates.js
index 545527388..a8f505806 100644
--- 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>
diff --git a/client/src/containers/Sales/Estimate/EstimatesDataTable.js b/client/src/containers/Sales/Estimate/EstimatesDataTable.js
index d4445fdae..3cc850eb3 100644
--- 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);
diff --git a/client/src/containers/Sales/Estimate/withEstimateActions.js b/client/src/containers/Sales/Estimate/withEstimateActions.js
index 574bc401d..4f9e43ce5 100644
--- 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 })),
diff --git a/client/src/containers/Sales/Estimate/withEstimates.js b/client/src/containers/Sales/Estimate/withEstimates.js
index b64faa14e..fd7e34248 100644
--- 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;
+};
diff --git a/client/src/containers/Sales/Invoice/InvoiceActionsBar.js b/client/src/containers/Sales/Invoice/InvoiceActionsBar.js
index b8d1e2ed9..a3d6dde72 100644
--- 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);
diff --git a/client/src/containers/Sales/Invoice/InvoiceForm.js b/client/src/containers/Sales/Invoice/InvoiceForm.js
index 64768d7c5..8b6c44e07 100644
--- 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);
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormFooter.js b/client/src/containers/Sales/Invoice/InvoiceFormFooter.js
index d1881d750..466dcc665 100644
--- 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>
diff --git a/client/src/containers/Sales/Invoice/InvoiceList.js b/client/src/containers/Sales/Invoice/InvoiceList.js
index f80af54b2..12ba1b74d 100644
--- 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);
diff --git a/client/src/containers/Sales/Invoice/InvoiceViewTabs.js b/client/src/containers/Sales/Invoice/InvoiceViewTabs.js
new file mode 100644
index 000000000..fcb9ace55
--- /dev/null
+++ 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);
diff --git a/client/src/containers/Sales/Invoice/Invoices.js b/client/src/containers/Sales/Invoice/Invoices.js
index e5804c8f4..d41a83fe5 100644
--- 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>
diff --git a/client/src/containers/Sales/Invoice/InvoicesDataTable.js b/client/src/containers/Sales/Invoice/InvoicesDataTable.js
index 6a937410d..83cc6625d 100644
--- 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);
diff --git a/client/src/containers/Sales/Invoice/withInvoiceActions.js b/client/src/containers/Sales/Invoice/withInvoiceActions.js
index f00d5cf8f..0efec2c14 100644
--- 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) =>
diff --git a/client/src/containers/Sales/Invoice/withInvoiceDetail.js b/client/src/containers/Sales/Invoice/withInvoiceDetail.js
index c7f8623e9..421cfd9ce 100644
--- 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),
   });
diff --git a/client/src/containers/Sales/Invoice/withInvoices.js b/client/src/containers/Sales/Invoice/withInvoices.js
new file mode 100644
index 000000000..e9b399d70
--- /dev/null
+++ 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);
+};
diff --git a/client/src/containers/Sales/Receipt/ReceiptActionsBar.js b/client/src/containers/Sales/Receipt/ReceiptActionsBar.js
index e69de29bb..107ae0988 100644
--- 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);
diff --git a/client/src/containers/Sales/Receipt/ReceiptForm.js b/client/src/containers/Sales/Receipt/ReceiptForm.js
index 57c3ee7ac..8ac82ab52 100644
--- 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);
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormFooter.js b/client/src/containers/Sales/Receipt/ReceiptFormFooter.js
index e25ec3228..26c09555e 100644
--- 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>
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
index 443d6f8f5..871ef41a6 100644
--- 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')}
diff --git a/client/src/containers/Sales/Receipt/ReceiptList.js b/client/src/containers/Sales/Receipt/ReceiptList.js
new file mode 100644
index 000000000..6df1324aa
--- /dev/null
+++ 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);
diff --git a/client/src/containers/Sales/Receipt/ReceiptViewTabs.js b/client/src/containers/Sales/Receipt/ReceiptViewTabs.js
new file mode 100644
index 000000000..40b8ab424
--- /dev/null
+++ 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);
diff --git a/client/src/containers/Sales/Receipt/Receipts.js b/client/src/containers/Sales/Receipt/Receipts.js
index 473d3cb8a..65dc6f1fc 100644
--- 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,
diff --git a/client/src/containers/Sales/Receipt/ReceiptsDataTable.js b/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
new file mode 100644
index 000000000..4c64e8c88
--- /dev/null
+++ 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);
diff --git a/client/src/containers/Sales/Receipt/withReceipActions.js b/client/src/containers/Sales/Receipt/withReceipActions.js
index 1aebb3884..3d20263fd 100644
--- 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),
     }),
 
diff --git a/client/src/containers/Sales/Receipt/withReceiptDetail.js b/client/src/containers/Sales/Receipt/withReceiptDetail.js
new file mode 100644
index 000000000..a2f19dca9
--- /dev/null
+++ 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);
+};
diff --git a/client/src/containers/Sales/Receipt/withReceipts.js b/client/src/containers/Sales/Receipt/withReceipts.js
new file mode 100644
index 000000000..190defb40
--- /dev/null
+++ 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);
+};
diff --git a/client/src/containers/Vendors/withVendorActions.js b/client/src/containers/Vendors/withVendorActions.js
new file mode 100644
index 000000000..c387cd400
--- /dev/null
+++ b/client/src/containers/Vendors/withVendorActions.js
@@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+import {
+  submitVendor,
+  editVendor,
+  deleteVendor,
+  fetchVendorsTable,
+} from 'store/vendors/vendors.actions';
+import t from 'store/types';
+
+
+const mapDipatchToProps = (dispatch) => ({
+  requestSubmitVendor: (form) => dispatch(submitVendor({ form })),
+  requestEditVendor: (id, form) => dispatch(editVendor(id, form)),
+  requestFetchVendorsTable: (query = {}) =>
+    dispatch(fetchVendorsTable({ query: { ...query } })),
+  requestDeleteEstimate: (id) => dispatch(deleteVendor({ id })),
+
+  changeVendorView: (id) =>
+    dispatch({
+      type: t.VENDORS_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+
+  addVendorsTableQueries: (queries) =>
+    dispatch({
+      type: t.VENDORS_TABLE_QUERIES_ADD,
+      queries,
+    }),
+});
+
+export default connect(null, mapDipatchToProps);
+
diff --git a/client/src/containers/Vendors/withVendors.js b/client/src/containers/Vendors/withVendors.js
new file mode 100644
index 000000000..88e483be0
--- /dev/null
+++ b/client/src/containers/Vendors/withVendors.js
@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+
+import {
+  getVendorCurrentPageFactory,
+  getVendorsTableQuery,
+  getVendorsPaginationMetaFactory,
+} from 'store/vendors/vendors.selectors';
+
+export default (mapState) => {
+  const getVendorsItems = getVendorCurrentPageFactory();
+  const getVendorsPaginationMeta = getVendorsPaginationMetaFactory();
+  const mapStateToProps = (state, props) => {
+    const query = getVendorsTableQuery(state, props);
+
+    const mapped = {
+      vendorsCurrentPage: getVendorsItems(state, props, query),
+      vendorViews: getResourceViews(state, props, 'vendors'),
+      vendorItems: state.vendors.items,
+      vendorTableQuery: query,
+      vendorsPageination: getVendorsPaginationMeta(state, props, query),
+      vendorsLoading: state.vendors.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index a6d645bd6..ebe426542 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -458,6 +458,7 @@ export default {
   display_name_: 'Display name',
   new_customer: 'New Customer',
   customer_type: 'Customer Type',
+  customer_account: 'Customer Account',
   business: 'Business',
   individual: 'Individual',
   display_name: 'Display Name',
@@ -584,6 +585,7 @@ export default {
   quantity: 'Quantity',
   rate: 'Rate',
   estimate_list: 'Estimate List',
+  estimate_number: 'Estimate Number',
 
   product_and_service: 'Product/Service',
   the_estimate_has_been_successfully_edited:
@@ -592,15 +594,21 @@ export default {
     'The estimate #{number} has been successfully created.',
   the_estimate_has_been_successfully_deleted:
     'The estimate has been successfully deleted.',
+
+  once_delete_this_estimate_you_will_able_to_restore_it: `Once you delete this estimate, you won\'t be able to restore it later. Are you sure you want to delete this estimate?`,
+
   cannot_be_zero_or_empty: 'cannot be zero or empty.',
   invocies: 'Invoices',
+  invoices_list: 'Invoices List',
   invoice_date: 'Invoice Date',
   due_date: 'Due Date',
   invoice_date_: 'Invoice date',
   invoice_no: 'Invoice #',
+  invoice_no__: 'Invoice No',
   invoice_no_: 'Invoice number',
   due_date_: 'Due date',
   invoice_message: 'Invoice Message',
+  reference_no: 'Reference No',
 
   edit_invoice: 'Edit Invoice',
   delete_invoice: 'Delete Invoice',
@@ -613,6 +621,10 @@ export default {
     'The invoice #{number} has been successfully created.',
   the_invocie_has_been_successfully_deleted:
     'The invoice has been successfully deleted.',
+
+  once_delete_this_invoice_you_will_able_to_restore_it: `Once you delete this invoice, you won\'t be able to restore it later. Are you sure you want to delete this invoice?`,
+
+  receipt_list: 'Receipt List',
   receipts: 'Receipts',
   receipt: 'Receipt #',
   receipt_date_: 'Receipt date',
@@ -621,12 +633,16 @@ export default {
   receipt_message_: 'Receipt message',
   receipt_no_: 'receipt number',
   edit_receipt: 'Edit Receipt',
+  delete_receipt: 'Delete Receipt',
   new_receipt: 'New Receipt',
   receipt_message: 'Receipt Message',
   statement: 'Statement',
   deposit_account: 'Deposit Account',
   send_to_email: 'Send to email',
   select_deposit_account: 'Select Deposit Account',
+
+  once_delete_this_receipt_you_will_able_to_restore_it: `Once you delete this receipt, you won\'t be able to restore it later. Are you sure you want to delete this receipt?`,
+
   the_receipt_has_been_successfully_created:
     'The recepit has been successfully created.',
   the_receipt_has_been_successfully_edited:
@@ -634,6 +650,7 @@ export default {
   the_receipt_has_been_successfully_deleted:
     'The receipt has been successfully deleted.',
 
+  bill_list: 'Bill List',
   bills: 'Bills',
   accept: 'Accept',
   vendor_name: 'Vendor Name',
@@ -647,10 +664,19 @@ export default {
   bill_date_: 'Bill date',
   bill_number_: 'Bill number',
   vendor_name_: 'Vendor name',
+  delete_bill: 'Delete Bill',
+
+  the_bill_has_been_successfully_edited:
+    'The bill #{number} has been successfully edited.',
 
   the_bill_has_been_successfully_created:
     'The bill has been successfully created.',
 
+  the_bill_has_been_successfully_deleted:
+    'The bill has been successfully deleted.',
+
+  once_delete_this_bill_you_will_able_to_restore_it: `Once you delete this bill, you won\'t be able to restore it later. Are you sure you want to delete this bill?`,
+
   edit_payment_receive: 'Edit Payment Receive',
   new_payment_receive: 'New Payment Receive',
   payment_receives: 'Payment Receives',
@@ -659,7 +685,7 @@ export default {
   the_payment_receive_has_been_successfully_created:
     'The payment receive has been successfully created.',
 
-  select_invoice:'Select Invoice',
+  select_invoice: 'Select Invoice',
 
   payment_mades: 'Payment Mades',
 };
diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js
index c1f10a9bd..90eacfa50 100644
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -220,13 +220,13 @@ export default [
     }),
     breadcrumb: 'New Estimates',
   },
-  // {
-  //   path: `/estimates`,
-  //   component: LazyLoader({
-  //     loader: () => import('containers/Sales/EstimatesList'),
-  //   }),
-  //   breadcrumb: 'Estimates',
-  // },
+  {
+    path: `/estimates`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/Estimate/EstimateList'),
+    }),
+    breadcrumb: 'Estimates List',
+  },
 
   //Invoices
 
@@ -245,13 +245,13 @@ export default [
     }),
     breadcrumb: 'New Invoice',
   },
-  // {
-  //   path:`/invoices`,
-  //   component:LazyLoader({
-  //     loader:()=>import('containers/Sales/Invoice/Invoices')
-  //   }),
-  //   breadcrumb: 'New Invoice',
-  // },
+  {
+    path: `/invoices`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/Invoice/InvoiceList'),
+    }),
+    breadcrumb: 'Invoices List',
+  },
 
   //Receipts
   {
@@ -268,16 +268,15 @@ export default [
     }),
     breadcrumb: 'New Receipt',
   },
-  // {
-  //   path: `/receipts`,
-  //   component: LazyLoader({
-  //     loader: () => import('containers/Sales/Receipt/Receipts'),
-  //   }),
-  //   breadcrumb: 'New Receipt',
-  // }
+  {
+    path: `/receipts`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/Receipt/ReceiptList'),
+    }),
+    breadcrumb: 'Receipt List',
+  },
 
-
-  // Payment Receives 
+  // Payment Receives
 
   {
     path: `/payment-receive/:id/edit`,
@@ -285,7 +284,6 @@ export default [
       loader: () => import('containers/Sales/PaymentReceive/PaymentReceives'),
     }),
     breadcrumb: 'Edit',
-
   },
   {
     path: `/payment-receive/new`,
@@ -293,24 +291,35 @@ export default [
       loader: () => import('containers/Sales/PaymentReceive/PaymentReceives'),
     }),
     breadcrumb: 'New Payment Receive',
-
   },
 
-
-
   //Bills
   {
-    path: `/bill/:id/edit`,
+    path: `/bills/:id/edit`,
     component: LazyLoader({
-      loader: () => import('containers/Purchases/Bills'),
+      loader: () => import('containers/Purchases/Bill/Bills'),
     }),
     breadcrumb: 'Edit',
   },
   {
-    path: `/bill/new`,
+    path: `/bills/new`,
     component: LazyLoader({
-      loader: () => import('containers/Purchases/Bills'),
+      loader: () => import('containers/Purchases/Bill/Bills'),
     }),
     breadcrumb: 'New Bill',
   },
+  {
+    path: `/bills`,
+    component: LazyLoader({
+      loader: () => import('containers/Purchases/Bill/BillList'),
+    }),
+    breadcrumb: 'Bill List',
+  },
+  {
+    path: `/receipts`,
+    component: LazyLoader({
+      loader: () => import('containers/Sales/Receipt/ReceiptList'),
+    }),
+    breadcrumb: 'Receipt List',
+  },
 ];
diff --git a/client/src/store/Bills/bills.actions.js b/client/src/store/Bills/bills.actions.js
index 970bca31c..59a4be00e 100644
--- a/client/src/store/Bills/bills.actions.js
+++ b/client/src/store/Bills/bills.actions.js
@@ -4,7 +4,7 @@ import t from 'store/types';
 export const fetchBillsTable = ({ query = {} }) => {
   return (dispatch, getState) =>
     new Promise((resolve, rejcet) => {
-      const pageQuery = getState().bill.tableQuery;
+      const pageQuery = getState().bills.tableQuery;
 
       dispatch({
         type: t.BILLS_TABLE_LOADING,
@@ -12,7 +12,7 @@ export const fetchBillsTable = ({ query = {} }) => {
           loading: true,
         },
       });
-      ApiService.get('bills', {
+      ApiService.get('purchases/bills', {
         params: { ...pageQuery, ...query },
       })
         .then((response) => {
@@ -54,9 +54,9 @@ export const fetchBillsTable = ({ query = {} }) => {
 export const deleteBill = ({ id }) => {
   return (dispatch) =>
     new Promise((resovle, reject) => {
-      ApiService.delete(`bills/${id}`)
+      ApiService.delete(`purchases/bills/${id}`)
         .then((response) => {
-          dispatch({ type: t.BILL_DELETE });
+          dispatch({ type: t.BILL_DELETE, payload: { id } });
           resovle(response);
         })
         .catch((error) => {
@@ -71,7 +71,7 @@ export const submitBill = ({ form }) => {
       dispatch({
         type: t.SET_DASHBOARD_REQUEST_LOADING,
       });
-      ApiService.post('bills', form)
+      ApiService.post('purchases/bills', form)
         .then((response) => {
           dispatch({
             type: t.SET_DASHBOARD_REQUEST_COMPLETED,
@@ -92,7 +92,7 @@ export const submitBill = ({ form }) => {
 export const fetchBill = ({ id }) => {
   return (dispatch) =>
     new Promise((resovle, reject) => {
-      ApiService.get(`bills/${id}`)
+      ApiService.get(`purchases/bills/${id}`)
         .then((response) => {
           dispatch({
             type: t.BILL_SET,
@@ -117,7 +117,7 @@ export const editBill = (id, form) => {
       dispatch({
         type: t.SET_DASHBOARD_REQUEST_LOADING,
       });
-      ApiService.post(`bills/${id}`, form)
+      ApiService.post(`purchases/bills/${id}`, form)
         .then((response) => {
           dispatch({
             type: t.SET_DASHBOARD_REQUEST_COMPLETED,
diff --git a/client/src/store/Bills/bills.reducer.js b/client/src/store/Bills/bills.reducer.js
index e69de29bb..cb99f1ff3 100644
--- a/client/src/store/Bills/bills.reducer.js
+++ b/client/src/store/Bills/bills.reducer.js
@@ -0,0 +1,102 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { createTableQueryReducers } from 'store/queryReducers';
+
+import t from 'store/types';
+
+const initialState = {
+  items: {},
+  views: {},
+  loading: false,
+  currentViewId: -1,
+  tableQuery: {
+    page_size: 5,
+    page: 1,
+  },
+};
+
+const defaultBill = {
+  entries: [],
+};
+
+const reducer = createReducer(initialState, {
+  [t.BILL_SET]: (state, action) => {
+    const { id, bill } = action.payload;
+    const _bill = state.items[id] || {};
+
+    state.items[id] = { ...defaultBill, ..._bill, ...bill };
+  },
+  [t.BILLS_TABLE_LOADING]: (state, action) => {
+    const { loading } = action.payload;
+    state.loading = loading;
+  },
+
+  [t.BILLS_SET_CURRENT_VIEW]: (state, action) => {
+    state.currentViewId = action.currentViewId;
+  },
+
+  [t.BILLS_ITEMS_SET]: (state, action) => {
+    const { bills } = action.payload;
+    const _bills = {};
+    bills.forEach((bill) => {
+      _bills[bill.id] = {
+        ...defaultBill,
+        ...bill,
+      };
+    });
+    state.items = {
+      ...state.items,
+      ..._bills,
+    };
+  },
+
+  [t.BILL_DELETE]: (state, action) => {
+    const { id } = action.payload;
+
+    if (typeof state.items[id] !== 'undefined') {
+      delete state.items[id];
+    }
+  },
+
+  [t.BILLS_PAGE_SET]: (state, action) => {
+    const { customViewId, bills, pagination } = action.payload;
+
+    const viewId = customViewId || -1;
+    const view = state.views[viewId] || {};
+
+    state.views[viewId] = {
+      ...view,
+      pages: {
+        ...(state.views?.[viewId]?.pages || {}),
+        [pagination.page]: {
+          ids: bills.map((i) => i.id),
+        },
+      },
+    };
+  },
+
+  [t.BILLS_PAGINATION_SET]: (state, action) => {
+    const { pagination, customViewId } = action.payload;
+
+    const mapped = {
+      pageSize: parseInt(pagination.pageSize, 10),
+      page: parseInt(pagination.page, 10),
+      total: parseInt(pagination.total, 10),
+    };
+    const paginationMeta = {
+      ...mapped,
+      pagesCount: Math.ceil(mapped.total / mapped.pageSize),
+      pageIndex: Math.max(mapped.page - 1, 0),
+    };
+    state.views = {
+      ...state.views,
+      [customViewId]: {
+        ...(state.views?.[customViewId] || {}),
+        paginationMeta,
+      },
+    };
+  },
+
+});
+
+export default createTableQueryReducers('bills', reducer);
+
diff --git a/client/src/store/Bills/bills.selectors.js b/client/src/store/Bills/bills.selectors.js
index 4b6b8f1d2..95a851235 100644
--- a/client/src/store/Bills/bills.selectors.js
+++ b/client/src/store/Bills/bills.selectors.js
@@ -1,6 +1,52 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
 
-const billByIdSelector = (state, props) => state.bills.items[props.billId];
+const billTableQuery = (state) => {
+  return state.bills.tableQuery;
+};
 
-export const getBillById = () =>
-  createSelector(billByIdSelector, (_bill) => _bill);
+export const getBillTableQuery = createSelector(
+  paginationLocationQuery,
+  billTableQuery,
+  (locationQuery, tableQuery) => {
+    return {
+      ...locationQuery,
+      ...tableQuery,
+    };
+  },
+);
+
+const billPageSelector = (state, props, query) => {
+  const viewId = state.bills.currentViewId;
+  return state.bills.views?.[viewId]?.pages?.[query.page];
+};
+
+const billItemsSelector = (state) => {
+  return state.bills.items;
+};
+
+export const getBillCurrentPageFactory = () =>
+  createSelector(billPageSelector, billItemsSelector, (billPage, billItems) => {
+    return typeof billPage === 'object'
+      ? pickItemsFromIds(billItems, billPage.ids) || []
+      : [];
+  });
+
+const billByIdSelector = (state, props) => {
+  return state.bills.items[props.billId];
+};
+
+export const getBillByIdFactory = () =>
+  createSelector(billByIdSelector, (bill) => {
+    return bill;
+  });
+
+const billPaginationSelector = (state, props) => {
+  const viewId = state.bills.currentViewId;
+  return state.bills.views?.[viewId];
+};
+
+export const getBillPaginationMetaFactory = () =>
+  createSelector(billPaginationSelector, (billPage) => {
+    return billPage?.paginationMeta || {};
+  });
diff --git a/client/src/store/Estimate/estimates.actions.js b/client/src/store/Estimate/estimates.actions.js
index c67d8ab80..526121679 100644
--- a/client/src/store/Estimate/estimates.actions.js
+++ b/client/src/store/Estimate/estimates.actions.js
@@ -8,6 +8,7 @@ export const submitEstimate = ({ form }) => {
         type: t.SET_DASHBOARD_REQUEST_LOADING,
       });
       ApiService.post('sales/estimates', form)
+
         .then((response) => {
           dispatch({
             type: t.SET_DASHBOARD_REQUEST_COMPLETED,
@@ -32,7 +33,7 @@ export const editEstimate = (id, form) => {
       dispatch({
         type: t.SET_DASHBOARD_REQUEST_LOADING,
       });
-      ApiService.post(`estimates/${id}`, form)
+      ApiService.post(`sales/estimates/${id}`, form)
         .then((response) => {
           dispatch({
             type: t.SET_DASHBOARD_REQUEST_COMPLETED,
@@ -54,9 +55,12 @@ export const editEstimate = (id, form) => {
 export const deleteEstimate = ({ id }) => {
   return (dispatch) =>
     new Promise((resovle, reject) => {
-      ApiService.delete(`estimates/${id}`)
+      ApiService.delete(`sales/estimates/${id}`)
         .then((response) => {
-          dispatch({ type: t.ESTIMATE_DELETE });
+          dispatch({
+            type: t.ESTIMATE_DELETE,
+            payload: { id },
+          });
           resovle(response);
         })
         .catch((error) => {
@@ -68,8 +72,9 @@ export const deleteEstimate = ({ id }) => {
 export const fetchEstimate = ({ id }) => {
   return (dispatch) =>
     new Promise((resovle, reject) => {
-      ApiService.get(`estimate/${id}`)
+      ApiService.get(`sales/estimates/${id}`)
         .then((response) => {
+
           dispatch({
             type: t.ESTIMATE_SET,
             payload: {
@@ -90,36 +95,36 @@ export const fetchEstimate = ({ id }) => {
 export const fetchEstimatesTable = ({ query = {} }) => {
   return (dispatch, getState) =>
     new Promise((resolve, rejcet) => {
-      const pageQuery = getState().estimates.tableQuery;
-
+      const pageQuery = getState().sales_estimates.tableQuery;
       dispatch({
         type: t.ESTIMATES_TABLE_LOADING,
         payload: {
           loading: true,
         },
       });
-      ApiService.get('estimates', {
+      ApiService.get('sales/estimates', {
         params: { ...pageQuery, ...query },
       })
         .then((response) => {
+          // debugger;
           dispatch({
             type: t.ESTIMATES_PAGE_SET,
             payload: {
-              estimates: response.data.estimates.results,
-              pagination: response.data.estimates.pagination,
+              sales_estimates: response.data.sales_estimates.results,
+              pagination: response.data.sales_estimates.pagination,
               customViewId: response.data.customViewId || -1,
             },
           });
           dispatch({
             type: t.ESTIMATES_ITEMS_SET,
             payload: {
-              estimates: response.data.estimates.results,
+              sales_estimates: response.data.sales_estimates.results,
             },
           });
           dispatch({
             type: t.ESTIMATES_PAGINATION_SET,
             payload: {
-              pagination: response.data.estimates.pagination,
+              pagination: response.data.sales_estimates.pagination,
               customViewId: response.data.customViewId || -1,
             },
           });
diff --git a/client/src/store/Estimate/estimates.reducer.js b/client/src/store/Estimate/estimates.reducer.js
index e52a9ce3b..d21c4461a 100644
--- a/client/src/store/Estimate/estimates.reducer.js
+++ b/client/src/store/Estimate/estimates.reducer.js
@@ -8,27 +8,28 @@ const initialState = {
   views: {},
   loading: false,
   tableQuery: {
-    page_size: 12,
+    page_size: 5,
     page: 1,
   },
   currentViewId: -1,
 };
 
 const defaultEstimate = {
-  products: [],
+  entries: [],
 };
 
 const reducer = createReducer(initialState, {
   [t.ESTIMATE_SET]: (state, action) => {
-    const { id, estiamate } = action.payload;
+    const { id, estimate } = action.payload;
     const _estimate = state.items[id] || {};
 
-    state.items[id] = { ...defaultEstimate, ..._estimate, ...estiamate };
+    state.items[id] = { ...defaultEstimate, ..._estimate, ...estimate };
   },
+
   [t.ESTIMATES_ITEMS_SET]: (state, action) => {
-    const { estiamates } = action.payload;
+    const { sales_estimates } = action.payload;
     const _estimates = {};
-    estiamates.forEach((estimate) => {
+    sales_estimates.forEach((estimate) => {
       _estimates[estimate.id] = {
         ...defaultEstimate,
         ...estimate,
@@ -58,7 +59,7 @@ const reducer = createReducer(initialState, {
   },
 
   [t.ESTIMATES_PAGE_SET]: (state, action) => {
-    const { customViewId, estimates, pagination } = action.payload;
+    const { customViewId, sales_estimates, pagination } = action.payload;
 
     const viewId = customViewId || -1;
     const view = state.views[viewId] || {};
@@ -68,7 +69,7 @@ const reducer = createReducer(initialState, {
       pages: {
         ...(state.views?.[viewId]?.pages || {}),
         [pagination.page]: {
-          ids: estimates.map((i) => i.id),
+          ids: sales_estimates.map((i) => i.id),
         },
       },
     };
@@ -98,8 +99,8 @@ const reducer = createReducer(initialState, {
   },
 });
 
-export default createTableQueryReducers('estimates', reducer);
+export default createTableQueryReducers('sales_estimates', reducer);
 
 export const getEstimateById = (state, id) => {
-  return state.estiamates.items[id];
+  return state.sales_estimates.items[id];
 };
diff --git a/client/src/store/Estimate/estimates.selectors.js b/client/src/store/Estimate/estimates.selectors.js
index d75d0e0fb..a565b7801 100644
--- a/client/src/store/Estimate/estimates.selectors.js
+++ b/client/src/store/Estimate/estimates.selectors.js
@@ -1,44 +1,54 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
 
-const estimateTableQuery = (state) => state.estimates.tableQuery;
+const estimateTableQuery = (state) => {
+  return state.sales_estimates.tableQuery;
+};
 
 export const getEstimatesTableQuery = createSelector(
   paginationLocationQuery,
   estimateTableQuery,
-  (location, query) => ({
-    ...location,
-    ...query,
-  }),
+  (locationQuery, tableQuery) => {
+    return {
+      ...locationQuery,
+      ...tableQuery,
+    };
+  },
 );
 
-const estimatesSelector = (state, props, query) => {
-  const viewId = state.estimates.currentViewId;
-  return state.estimates.views?.[viewId]?.pages?.[query.page];
+const estimatesPageSelector = (state, props, query) => {
+  const viewId = state.sales_estimates.currentViewId;
+  return state.sales_estimates.views?.[viewId]?.pages?.[query.page];
 };
 
-const EstimateItemsSelector = (state) => state.estimates.items;
+const estimateItemsSelector = (state) => state.sales_estimates.items;
 
-export const getEstimateCurrentPage = () =>
-  createSelector(estimatesSelector, EstimateItemsSelector, (page, items) => {
-    return typeof page === 'object'
-      ? pickItemsFromIds(items, page.ids) || []
-      : [];
-  });
+export const getEstimateCurrentPageFactory = () =>
+  createSelector(
+    estimatesPageSelector,
+    estimateItemsSelector,
+    (estimatePage, estimateItems) => {
+      return typeof estimatePage === 'object'
+        ? pickItemsFromIds(estimateItems, estimatePage.ids) || []
+        : [];
+    },
+  );
 
-const estimateByIdSelector = (state, props) => state.estimates.items;
+const estimateByIdSelector = (state, props) => {
+  return state.sales_estimates.items[props.estimateId];
+};
 
 export const getEstimateByIdFactory = () =>
   createSelector(estimateByIdSelector, (estimate) => {
     return estimate;
   });
 
-const paginationSelector = (state, props) => {
-  const viewId = state.estimates.currentViewId;
-  return state.estimates.views?.[viewId];
+const estimatesPaginationSelector = (state, props) => {
+  const viewId = state.sales_estimates.currentViewId;
+  return state.sales_estimates.views?.[viewId];
 };
 
 export const getEstimatesPaginationMetaFactory = () =>
-  createSelector(paginationSelector, (estimatePage) => {
+  createSelector(estimatesPaginationSelector, (estimatePage) => {
     return estimatePage?.paginationMeta || {};
   });
diff --git a/client/src/store/Invoice/invoices.actions.js b/client/src/store/Invoice/invoices.actions.js
index d6673925d..ba1899b45 100644
--- a/client/src/store/Invoice/invoices.actions.js
+++ b/client/src/store/Invoice/invoices.actions.js
@@ -29,9 +29,12 @@ export const submitInvoice = ({ form }) => {
 export const deleteInvoice = ({ id }) => {
   return (dispatch) =>
     new Promise((resovle, reject) => {
-      ApiService.delete(`invoice/${id}`)
+      ApiService.delete(`sales/invoices/${id}`)
         .then((response) => {
-          dispatch({ type: t.INVOICE_DELETE });
+          dispatch({
+            type: t.INVOICE_DELETE,
+            payload: { id },
+          });
           resovle(response);
         })
         .catch((error) => {
@@ -46,7 +49,7 @@ export const editInvoice = (id, form) => {
       dispatch({
         type: t.SET_DASHBOARD_REQUEST_LOADING,
       });
-      ApiService.post(`invoice/${id}`, form)
+      ApiService.post(`sales/invoices/${id}`, form)
         .then((response) => {
           dispatch({
             type: t.SET_DASHBOARD_REQUEST_COMPLETED,
@@ -64,39 +67,39 @@ export const editInvoice = (id, form) => {
         });
     });
 };
-export const fetchInvoicesTable = ({ query = {} }) => {
-  return (dispatch, getState) =>
-    new Promise((resolve, rejcet) => {
-      const pageQuery = getState().invoices.tableQuery;
 
+export const fetchInvoicesTable = ({ query } = {}) => {
+  return (dispatch, getState) =>
+    new Promise((resolve, reject) => {
+      const pageQuery = getState().sales_invoices.tableQuery;
       dispatch({
         type: t.INVOICES_TABLE_LOADING,
         payload: {
           loading: true,
         },
       });
-      ApiService.get('invoices', {
+      ApiService.get('sales/invoices', {
         params: { ...pageQuery, ...query },
       })
         .then((response) => {
           dispatch({
             type: t.INVOICES_PAGE_SET,
             payload: {
-              invoices: response.data.invoices.results,
-              pagination: response.data.invoices.pagination,
+              sales_invoices: response.data.sales_invoices.results,
+              pagination: response.data.sales_invoices.pagination,
               customViewId: response.data.customViewId || -1,
             },
           });
           dispatch({
             type: t.INVOICES_ITEMS_SET,
             payload: {
-              invoices: response.data.invoices.results,
+              sales_invoices: response.data.sales_invoices.results,
             },
           });
           dispatch({
             type: t.INVOICES_PAGINATION_SET,
             payload: {
-              pagination: response.data.invoices.pagination,
+              pagination: response.data.sales_invoices.pagination,
               customViewId: response.data.customViewId || -1,
             },
           });
@@ -109,7 +112,7 @@ export const fetchInvoicesTable = ({ query = {} }) => {
           resolve(response);
         })
         .catch((error) => {
-          rejcet(error);
+          reject(error);
         });
     });
 };
@@ -117,13 +120,13 @@ export const fetchInvoicesTable = ({ query = {} }) => {
 export const fetchInvoice = ({ id }) => {
   return (dispatch) =>
     new Promise((resovle, reject) => {
-      ApiService.get(`invoices/${id}`)
+      ApiService.get(`sales/invoices/${id}`)
         .then((response) => {
           dispatch({
             type: t.INVOICE_SET,
             payload: {
               id,
-              invoice: response.data.invoice,
+              sale_invoice: response.data.sale_invoice,
             },
           });
           resovle(response);
diff --git a/client/src/store/Invoice/invoices.reducer.js b/client/src/store/Invoice/invoices.reducer.js
index d73488705..e9bbeff35 100644
--- a/client/src/store/Invoice/invoices.reducer.js
+++ b/client/src/store/Invoice/invoices.reducer.js
@@ -7,26 +7,99 @@ const initialState = {
   items: {},
   views: {},
   loading: false,
+  currentViewId: -1,
   tableQuery: {
-    page_size: 12,
+    page_size: 5,
     page: 1,
   },
-  currentViewId: -1,
 };
 
 const defaultInvoice = {
-  entires: [],
+  entries: [],
 };
 
-
-
-
 const reducer = createReducer(initialState, {
-[t.INVOICE_SET]:(state,actio)=>{
+  [t.INVOICE_SET]: (state, action) => {
+    const { id, sale_invoice } = action.payload;
+    const _invoice = state.items[id] || {};
 
-  const {id,INVOICE_SET} = action.payload;
+    state.items[id] = { ...defaultInvoice, ..._invoice, ...sale_invoice };
+  },
 
-}
+  [t.INVOICES_ITEMS_SET]: (state, action) => {
+    const { sales_invoices } = action.payload;
+    const _invoices = {};
+    sales_invoices.forEach((invoice) => {
+      _invoices[invoice.id] = {
+        ...defaultInvoice,
+        ...invoice,
+      };
+    });
+    state.items = {
+      ...state.items,
+      ..._invoices,
+    };
+  },
 
+  [t.INVOICES_TABLE_LOADING]: (state, action) => {
+    const { loading } = action.payload;
+    state.loading = loading;
+  },
 
+  [t.INVOICES_SET_CURRENT_VIEW]: (state, action) => {
+    state.currentViewId = action.currentViewId;
+  },
+
+  [t.INVOICE_DELETE]: (state, action) => {
+    const { id } = action.payload;
+
+    if (typeof state.items[id] !== 'undefined') {
+      delete state.items[id];
+    }
+  },
+
+  [t.INVOICES_PAGE_SET]: (state, action) => {
+    const { customViewId, sales_invoices, pagination } = action.payload;
+
+    const viewId = customViewId || -1;
+    const view = state.views[viewId] || {};
+
+    state.views[viewId] = {
+      ...view,
+      pages: {
+        ...(state.views?.[viewId]?.pages || {}),
+        [pagination.page]: {
+          ids: sales_invoices.map((i) => i.id),
+        },
+      },
+    };
+  },
+
+  [t.INVOICES_PAGINATION_SET]: (state, action) => {
+    const { pagination, customViewId } = action.payload;
+
+    const mapped = {
+      pageSize: parseInt(pagination.pageSize, 10),
+      page: parseInt(pagination.page, 10),
+      total: parseInt(pagination.total, 10),
+    };
+    const paginationMeta = {
+      ...mapped,
+      pagesCount: Math.ceil(mapped.total / mapped.pageSize),
+      pageIndex: Math.max(mapped.page - 1, 0),
+    };
+    state.views = {
+      ...state.views,
+      [customViewId]: {
+        ...(state.views?.[customViewId] || {}),
+        paginationMeta,
+      },
+    };
+  },
 });
+
+export default createTableQueryReducers('sales_invoices', reducer);
+
+export const getInvoiceById = (state, id) => {
+  return state.sales_invoices.items[id];
+};
diff --git a/client/src/store/Invoice/invoices.selector.js b/client/src/store/Invoice/invoices.selector.js
index 9422f83b5..9f488b05d 100644
--- a/client/src/store/Invoice/invoices.selector.js
+++ b/client/src/store/Invoice/invoices.selector.js
@@ -1,9 +1,54 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
 
-const invoiceByIdSelector = (state, props) =>
-  state.invoices.items[props.invoiceId];
+const invoiceTableQuery = (state) => state.sales_invoices.tableQuery;
 
-export const getInvoiceById = () =>
-  createSelector(invoiceByIdSelector, (_invoice) => {
-    return _invoice;
+export const getInvoiceTableQuery = createSelector(
+  paginationLocationQuery,
+  invoiceTableQuery,
+  (locationQuery, tableQuery) => {
+    return {
+      ...locationQuery,
+      ...tableQuery,
+    };
+  },
+);
+
+const invoicesPageSelector = (state, props, query) => {
+  const viewId = state.sales_invoices.currentViewId;
+  return state.sales_invoices.views?.[viewId]?.pages?.[query.page];
+};
+
+const invoicesItemsSelector = (state) => {
+  return state.sales_invoices.items;
+};
+
+export const getInvoiceCurrentPageFactory = () =>
+  createSelector(
+    invoicesPageSelector,
+    invoicesItemsSelector,
+    (invoicePage, invoicesItems) => {
+      return typeof invoicePage === 'object'
+        ? pickItemsFromIds(invoicesItems, invoicePage.ids) || []
+        : [];
+    },
+  );
+
+const invoicesByIdSelector = (state, props) => {
+  return state.sales_invoices.items[props.invoiceId];
+};
+
+export const getInvoiecsByIdFactory = () =>
+  createSelector(invoicesByIdSelector, (invoice) => {
+    return invoice;
+  });
+
+const invoicesPaginationSelector = (state, props) => {
+  const viewId = state.sales_invoices.currentViewId;
+  return state.sales_invoices.views?.[viewId];
+};
+
+export const getInvoicePaginationMetaFactory = () =>
+  createSelector(invoicesPaginationSelector, (invoicePage) => {
+    return invoicePage?.paginationMeta || {};
   });
diff --git a/client/src/store/receipt/receipt.actions.js b/client/src/store/receipt/receipt.actions.js
index e6425c442..2865446ac 100644
--- a/client/src/store/receipt/receipt.actions.js
+++ b/client/src/store/receipt/receipt.actions.js
@@ -28,9 +28,12 @@ export const submitReceipt = ({ form }) => {
 export const deleteReceipt = ({ id }) => {
   return (dispatch) =>
     new Promise((resovle, reject) => {
-      ApiService.delete(`receipts/${id}`)
+      ApiService.delete(`sales/receipts/${id}`)
         .then((response) => {
-          dispatch({ type: t.RECEIPT_DELETE });
+          dispatch({
+            type: t.RECEIPT_DELETE,
+            payload: { id },
+          });
           resovle(response);
         })
         .catch((error) => {
@@ -45,7 +48,7 @@ export const editReceipt = (id, form) => {
       dispatch({
         type: t.SET_DASHBOARD_REQUEST_LOADING,
       });
-      ApiService.delete(`receipt/${id}`, form)
+      ApiService.post(`sales/receipts/${id}`, form)
         .then((response) => {
           dispatch({
             type: t.SET_DASHBOARD_REQUEST_COMPLETED,
@@ -66,7 +69,7 @@ export const editReceipt = (id, form) => {
 export const fetchReceipt = ({ id }) => {
   return (dispatch) =>
     new Promise((resovle, reject) => {
-      ApiService.get(`receipt/${id}`)
+      ApiService.get(`sales/receipts/${id}`)
         .then((response) => {
           dispatch({
             type: t.RECEIPT_SET,
@@ -88,36 +91,35 @@ export const fetchReceipt = ({ id }) => {
 export const fetchReceiptsTable = ({ query = {} }) => {
   return (dispatch, getState) =>
     new Promise((resolve, rejcet) => {
-      const pageQuery = getState().receipt.tableQuery;
-
+      const pageQuery = getState().sales_receipts.tableQuery;
       dispatch({
         type: t.RECEIPTS_TABLE_LOADING,
         payload: {
           loading: true,
         },
       });
-      ApiService.get('receipts', {
+      ApiService.get('sales/receipts', {
         params: { ...pageQuery, ...query },
       })
         .then((response) => {
           dispatch({
             type: t.RECEIPTS_PAGE_SET,
             payload: {
-              receipts: response.data.receipts.results,
-              pagination: response.data.receipts.pagination,
+              sales_receipts: response.data.sales_receipts.results,
+              pagination: response.data.sales_receipts.pagination,
               customViewId: response.data.customViewId || -1,
             },
           });
           dispatch({
             type: t.RECEIPTS_ITEMS_SET,
             payload: {
-              receipts: response.data.receipts.results,
+              sales_receipts: response.data.sales_receipts.results,
             },
           });
           dispatch({
             type: t.RECEIPTS_PAGINATION_SET,
             payload: {
-              pagination: response.data.receipts.pagination,
+              pagination: response.data.sales_receipts.pagination,
               customViewId: response.data.customViewId || -1,
             },
           });
diff --git a/client/src/store/receipt/receipt.reducer.js b/client/src/store/receipt/receipt.reducer.js
index e69de29bb..346859bdc 100644
--- a/client/src/store/receipt/receipt.reducer.js
+++ b/client/src/store/receipt/receipt.reducer.js
@@ -0,0 +1,103 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { createTableQueryReducers } from 'store/queryReducers';
+import t from 'store/types';
+
+const initialState = {
+  items: {},
+  views: {},
+  loading: false,
+  tableQuery: {
+    page_size: 5,
+    page: 1,
+  },
+  currentViewId: -1,
+};
+
+const defaultReceipt = {
+  entries: [],
+};
+
+const reducer = createReducer(initialState, {
+  [t.RECEIPT_SET]: (state, action) => {
+    const { id, receipt } = action.payload;
+    const _receipt = state.items[id] || {};
+    state.items[id] = { ...defaultReceipt, ..._receipt, ...receipt };
+  },
+
+  [t.RECEIPTS_ITEMS_SET]: (state, action) => {
+    const { sales_receipts } = action.payload;
+    const _receipts = {};
+    sales_receipts.forEach((receipt) => {
+      _receipts[receipt.id] = {
+        ...defaultReceipt,
+        ...receipt,
+      };
+    });
+    state.items = {
+      ...state.items,
+      ..._receipts,
+    };
+  },
+
+  [t.RECEIPTS_TABLE_LOADING]: (state, action) => {
+    const { loading } = action.payload;
+    state.loading = loading;
+  },
+
+  [t.RECEIPT_DELETE]: (state, action) => {
+    const { id } = action.payload;
+    if (typeof state.items[id] !== 'undefined') {
+      delete state.items[id];
+    }
+  },
+
+  [t.RECEIPTS_SET_CURRENT_VIEW]: (state, action) => {
+    state.currentViewId = action.currentViewId;
+  },
+
+  [t.RECEIPTS_PAGE_SET]: (state, action) => {
+    const { customViewId, sales_receipts, pagination } = action.payload;
+
+    const viewId = customViewId || -1;
+    const view = state.views[viewId] || {};
+
+    state.views[viewId] = {
+      ...view,
+      pages: {
+        ...(state.views?.[viewId]?.pages || {}),
+        [pagination.page]: {
+          ids: sales_receipts.map((i) => i.id),
+        },
+      },
+    };
+  },
+
+  [t.RECEIPTS_PAGINATION_SET]: (state, action) => {
+    const { pagination, customViewId } = action.payload;
+
+    const mapped = {
+      pageSize: parseInt(pagination.pageSize, 10),
+      page: parseInt(pagination.page, 10),
+      total: parseInt(pagination.total, 10),
+    };
+    const paginationMeta = {
+      ...mapped,
+      pagesCount: Math.ceil(mapped.total / mapped.pageSize),
+      pageIndex: Math.max(mapped.page - 1, 0),
+    };
+
+    state.views = {
+      ...state.views,
+      [customViewId]: {
+        ...(state.views?.[customViewId] || {}),
+        paginationMeta,
+      },
+    };
+  },
+});
+
+export default createTableQueryReducers('sales_receipts', reducer);
+
+export const getReceiptById = (state, id) => {
+  return state.receipts.items[id];
+};
diff --git a/client/src/store/receipt/receipt.selector.js b/client/src/store/receipt/receipt.selector.js
index e69de29bb..884647508 100644
--- a/client/src/store/receipt/receipt.selector.js
+++ b/client/src/store/receipt/receipt.selector.js
@@ -0,0 +1,56 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
+
+const receiptsPageSelector = (state, props, query) => {
+  const viewId = state.sales_receipts.currentViewId;
+  return state.sales_receipts.views?.[viewId]?.pages?.[query.page];
+};
+
+const receiptItemsSelector = (state) => {
+  return state.sales_receipts.items;
+};
+
+export const getReceiptCurrentPageFactory = () =>
+  createSelector(
+    receiptsPageSelector,
+    receiptItemsSelector,
+    (receiptPage, receiptItems) => {
+      return typeof receiptPage === 'object'
+        ? pickItemsFromIds(receiptItems, receiptPage.ids) || []
+        : [];
+    },
+  );
+
+const receiptTableQuery = (state) => {
+  return state.sales_receipts.tableQuery;
+};
+
+export const getReceiptsTableQuery = createSelector(
+  paginationLocationQuery,
+  receiptTableQuery,
+  (locationQuery, tableQuery) => {
+    return {
+      ...locationQuery,
+      ...tableQuery,
+    };
+  },
+);
+
+const receiptByIdSelector = (state, props) => {
+  return state.sales_receipts.items[props.receiptId];
+};
+
+export const getReceiptByIdFactory = () =>
+  createSelector(receiptByIdSelector, (receipt) => {
+    return receipt;
+  });
+
+const receiptsPaginationSelector = (state, props) => {
+  const viewId = state.sales_receipts.currentViewId;
+  return state.sales_receipts.views?.[viewId];
+};
+
+export const getReceiptsPaginationMetaFactory = () =>
+  createSelector(receiptsPaginationSelector, (receiptPage) => {
+    return receiptPage?.paginationMeta || {};
+  });
diff --git a/client/src/store/reducers.js b/client/src/store/reducers.js
index 6a2fde88c..7e9508af9 100644
--- a/client/src/store/reducers.js
+++ b/client/src/store/reducers.js
@@ -18,7 +18,11 @@ import globalSearch from './search/search.reducer';
 import exchangeRates from './ExchangeRate/exchange.reducer';
 import globalErrors from './globalErrors/globalErrors.reducer';
 import customers from './customers/customers.reducer';
-import estimates from './Estimate/estimates.reducer';
+import sales_estimates from './Estimate/estimates.reducer';
+import sales_invoices from './Invoice/invoices.reducer';
+import sales_receipts from './receipt/receipt.reducer';
+import bills from './Bills/bills.reducer';
+import vendors from './vendors/vendors.reducer';
 
 export default combineReducers({
   authentication,
@@ -39,5 +43,9 @@ export default combineReducers({
   exchangeRates,
   globalErrors,
   customers,
-  estimates
+  sales_estimates,
+  sales_invoices,
+  sales_receipts,
+  bills,
+  vendors,
 });
diff --git a/client/src/store/types.js b/client/src/store/types.js
index da7e60037..182dd8562 100644
--- a/client/src/store/types.js
+++ b/client/src/store/types.js
@@ -22,6 +22,7 @@ import invoices from './Invoice/invoices.types';
 import receipts from './receipt/receipt.type';
 import bills from './Bills/bills.type';
 import paymentReceives from './PaymentReceive/paymentReceive.type';
+import vendors from './vendors/vendors.types';
 
 export default {
   ...authentication,
@@ -48,4 +49,5 @@ export default {
   ...receipts,
   ...bills,
   ...paymentReceives,
+  ...vendors,
 };
diff --git a/client/src/store/vendors/vendors.actions.js b/client/src/store/vendors/vendors.actions.js
new file mode 100644
index 000000000..7b091e573
--- /dev/null
+++ b/client/src/store/vendors/vendors.actions.js
@@ -0,0 +1,118 @@
+import ApiService from 'services/ApiService';
+import t from 'store/types';
+
+export const fetchVendorsTable = ({ query }) => {
+  return (dispatch, getState) =>
+    new Promise((resolve, reject) => {
+      const pageQuery = getState().vendors.tableQuery;
+      dispatch({
+        type: t.VENDORS_TABLE_LOADING,
+        payload: { loading: true },
+      });
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+      ApiService.get(`vendors`, { params: { ...pageQuery, ...query } })
+        .then((response) => {
+          dispatch({
+            type: t.VENDORS_PAGE_SET,
+            payload: {
+              vendors: response.data.vendors.results,
+              pagination: response.data.vendors.pagination,
+              customViewId: response.data.customViewId,
+            },
+          });
+
+          dispatch({
+            type: t.VENDORS_ITEMS_SET,
+            payload: {
+              vendors: response.data.vendors.results,
+            },
+          });
+
+          dispatch({
+            type: t.VENDORS_PAGINATION_SET,
+            payload: {
+              pagination: response.data.vendors.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
+          });
+
+          dispatch({
+            type: t.VENDORS_TABLE_LOADING,
+            payload: { loading: false },
+          });
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+};
+
+export const editVendor = ({ form, id }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+
+      ApiService.post(`vendors/${id}`, form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          reject(data?.errors);
+        });
+    });
+};
+
+export const deleteVendor = ({ id }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.delete(`vendors/${id}`)
+        .then((response) => {
+          dispatch({ type: t.VENDOR_DELETE, payload: { id } });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error.response.data.errors || []);
+        });
+    });
+};
+
+export const submitVendor = ({ form }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
+      });
+
+      ApiService.post('vendors', form)
+        .then((response) => {
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          reject(data?.errors);
+        });
+    });
+};
diff --git a/client/src/store/vendors/vendors.reducer.js b/client/src/store/vendors/vendors.reducer.js
new file mode 100644
index 000000000..8a3737910
--- /dev/null
+++ b/client/src/store/vendors/vendors.reducer.js
@@ -0,0 +1,96 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { createTableQueryReducers } from 'store/queryReducers';
+
+import t from 'store/types';
+
+const initialState = {
+  items: {},
+  views: {},
+  loading: false,
+  tableQuery: {
+    page_size: 5,
+    page: 1,
+  },
+  currentViewId: -1,
+};
+
+const reducer = createReducer(initialState, {
+  [t.VENDORS_TABLE_LOADING]: (state, action) => {
+    const { loading } = action.payload;
+    state.loading = loading;
+  },
+
+  [t.VENDORS_ITEMS_SET]: (state, action) => {
+    const { vendors } = action.payload;
+    const _vendors = {};
+    vendors.forEach((vendor) => {
+      _vendors[vendor.id] = {
+        ...vendor,
+      };
+    });
+    state.items = {
+      ...state.items,
+      ..._vendors,
+    };
+  },
+
+  [t.VENDORS_PAGE_SET]: (state, action) => {
+    const { customViewId, vendors, pagination } = action.payload;
+
+    const viewId = customViewId || -1;
+    const view = state.views[viewId] || {};
+
+    state.views[viewId] = {
+      ...view,
+      pages: {
+        ...(state.views?.[viewId]?.pages || {}),
+        [pagination.page]: {
+          ids: vendors.map((i) => i.id),
+        },
+      },
+    };
+  },
+
+  [t.VENDOR_DELETE]: (state, action) => {
+    const { id } = action.payload;
+
+    if (typeof state.items[id] !== 'undefined') {
+      delete state.items[id];
+    }
+  },
+
+  [t.VENDORS_SET_CURRENT_VIEW]: (state, action) => {
+    state.currentViewId = action.currentViewId;
+  },
+
+  [t.VENDORS_PAGINATION_SET]: (state, action) => {
+    const { pagination, customViewId } = action.payload;
+
+    const mapped = {
+      pageSize: parseInt(pagination.pageSize, 10),
+      page: parseInt(pagination.page, 10),
+      total: parseInt(pagination.total, 10),
+    };
+    const paginationMeta = {
+      ...mapped,
+      pagesCount: Math.ceil(mapped.total / mapped.pageSize),
+      pageIndex: Math.max(mapped.page - 1, 0),
+    };
+
+    state.views = {
+      ...state.views,
+      [customViewId]: {
+        ...(state.views?.[customViewId] || {}),
+        paginationMeta,
+      },
+    };
+  },
+
+  // [t.VENDOR_SET]: (state, action) => {
+  //   const { id, vendor } = action.payload;
+  //   const _venders = state.items[id] || {};
+  //   state.items[id] = { ..._venders, ...vendor };
+  // },
+});
+
+export default createTableQueryReducers('vendors', reducer);
diff --git a/client/src/store/vendors/vendors.selectors.js b/client/src/store/vendors/vendors.selectors.js
new file mode 100644
index 000000000..708338074
--- /dev/null
+++ b/client/src/store/vendors/vendors.selectors.js
@@ -0,0 +1,54 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
+
+const vendorsTableQuery = (state) => {
+  return state.vendors.tableQuery;
+};
+
+export const getVendorsTableQuery = createSelector(
+  paginationLocationQuery,
+  vendorsTableQuery,
+  (locationQuery, tableQuery) => {
+    return {
+      ...locationQuery,
+      ...tableQuery,
+    };
+  },
+);
+
+const vendorsPageSelector = (state, props, query) => {
+  const viewId = state.vendors.currentViewId;
+  return state.vendors.views?.[viewId]?.pages?.[query.page];
+};
+
+const vendorsItemsSelector = (state) => state.vendors.items;
+
+export const getVendorCurrentPageFactory = () =>
+  createSelector(
+    vendorsPageSelector,
+    vendorsItemsSelector,
+    (vendorPage, vendorItems) => {
+      return typeof vendorPage === 'object'
+        ? pickItemsFromIds(vendorItems, vendorPage.ids) || []
+        : [];
+    },
+  );
+
+const vendorsPaginationSelector = (state, props) => {
+  const viewId = state.vendors.currentViewId;
+  return state.vendors.views?.[viewId];
+};
+
+export const getVendorsPaginationMetaFactory = () =>
+  createSelector(vendorsPaginationSelector, (vendorPage) => {
+    return vendorPage?.paginationMeta || {};
+  });
+
+const vendorByIdSelector = (state, props) => {
+  return state.vendors.items[props.vendorId];
+};
+
+export const getEstimateByIdFactory = () =>
+  createSelector(vendorByIdSelector, (vendor) => {
+    return vendor;
+  });
diff --git a/client/src/store/vendors/vendors.types.js b/client/src/store/vendors/vendors.types.js
new file mode 100644
index 000000000..0ddced9ba
--- /dev/null
+++ b/client/src/store/vendors/vendors.types.js
@@ -0,0 +1,11 @@
+export default {
+  VENDORS_ITEMS_SET: 'VENDORS_ITEMS_SET',
+  VENDOR_SET: 'VENDOR_SET',
+  VENDORS_PAGE_SET: 'VENDORS_PAGE_SET',
+  VENDORS_TABLE_LOADING: 'VENDORS_TABLE_LOADING',
+  VENDORS_TABLE_QUERIES_ADD: 'VENDORS_TABLE_QUERIES_ADD',
+  VENDOR_DELETE: 'VENDOR_DELETE',
+  VENDORS_BULK_DELETE: 'VENDORS_BULK_DELETE',
+  VENDORS_PAGINATION_SET: 'VENDORS_PAGINATION_SET',
+  VENDORS_SET_CURRENT_VIEW: 'VENDORS_SET_CURRENT_VIEW',
+};

From 6a18888599d52ad5e87ccea258a5f6a6f521919c Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Wed, 12 Aug 2020 21:25:50 +0200
Subject: [PATCH 4/6] WIP / Fix Vendors

---
 client/src/containers/Purchases/Bill/BillsDataTable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/containers/Purchases/Bill/BillsDataTable.js b/client/src/containers/Purchases/Bill/BillsDataTable.js
index 0f7c351a1..c6df6b92a 100644
--- a/client/src/containers/Purchases/Bill/BillsDataTable.js
+++ b/client/src/containers/Purchases/Bill/BillsDataTable.js
@@ -131,7 +131,7 @@ function BillsDataTable({
       {
         id: 'vendor_id',
         Header: formatMessage({ id: 'vendor_name' }),
-        accessor: (row) => row.vendor_id,
+        accessor: 'vendor.display_name',
         width: 140,
         className: 'vendor_id',
       },

From 5384fa2fb5b23f281e58c2b69b330fe806f3a6f0 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Thu, 13 Aug 2020 14:50:45 +0200
Subject: [PATCH 5/6] Fix :Estimate & Invoices & Receipt DataTable

---
 client/src/containers/Sales/Estimate/EstimatesDataTable.js | 2 +-
 client/src/containers/Sales/Invoice/InvoicesDataTable.js   | 2 +-
 client/src/containers/Sales/Receipt/ReceiptsDataTable.js   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/containers/Sales/Estimate/EstimatesDataTable.js b/client/src/containers/Sales/Estimate/EstimatesDataTable.js
index 3cc850eb3..75e5d7253 100644
--- a/client/src/containers/Sales/Estimate/EstimatesDataTable.js
+++ b/client/src/containers/Sales/Estimate/EstimatesDataTable.js
@@ -130,7 +130,7 @@ function EstimatesDataTable({
       {
         id: 'customer_id',
         Header: formatMessage({ id: 'customer_name' }),
-        accessor: (row) => row.customer_id,
+        accessor: 'customer.display_name',
         width: 140,
         className: 'customer_id',
       },
diff --git a/client/src/containers/Sales/Invoice/InvoicesDataTable.js b/client/src/containers/Sales/Invoice/InvoicesDataTable.js
index 83cc6625d..b4ab50cae 100644
--- a/client/src/containers/Sales/Invoice/InvoicesDataTable.js
+++ b/client/src/containers/Sales/Invoice/InvoicesDataTable.js
@@ -131,7 +131,7 @@ function InvoicesDataTable({
       {
         id: 'customer_id',
         Header: formatMessage({ id: 'customer_name' }),
-        accessor: (row) => row.customer_id,
+        accessor: 'customer.display_name',
         width: 140,
         className: 'customer_id',
       },
diff --git a/client/src/containers/Sales/Receipt/ReceiptsDataTable.js b/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
index 4c64e8c88..d1ec2939b 100644
--- a/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
+++ b/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
@@ -130,7 +130,7 @@ function ReceiptsDataTable({
       {
         id: 'customer_id',
         Header: formatMessage({ id: 'customer_name' }),
-        accessor: (row) => row.customer_id,
+        accessor: 'customer.display_name',
         width: 140,
         className: 'customer_id',
       },

From 7dafd67022707776047e4fa0a0061a5349e962c6 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Mon, 7 Sep 2020 07:29:33 +0200
Subject: [PATCH 6/6] Fix: PaymentReceive & ExchangeRate & itemCategories

---
 .../src/containers/Dialogs/CurrencyDialog.js  |  20 +--
 .../Dialogs/ExchangeRateDialog.container.js   |  16 ++-
 .../containers/Dialogs/ExchangeRateDialog.js  |  28 ++--
 .../containers/Dialogs/ItemCategoryDialog.js  |  31 +++--
 .../ExchangeRates/ExchangeRateActionsBar.js   |  40 ++++--
 .../ExchangeRates/ExchangeRateTable.js        | 125 ++++++++++--------
 .../ExchangeRates/withExchangeRateDetail.js   |   8 ++
 .../containers/Items/ItemCategoriesTable.js   |  17 ++-
 .../Preferences/Currencies/CurrenciesList.js  |   6 +-
 .../PaymentReceive/PaymentReceiveForm.js      |   8 +-
 .../PaymentReceiveItemsTable.js               |  16 +--
 .../Sales/PaymentReceive/PaymentReceives.js   |   7 +-
 client/src/lang/en/index.js                   |   2 +
 .../store/ExchangeRate/exchange.actions.js    |  21 ++-
 .../store/ExchangeRate/exchange.selector.js   |  14 +-
 .../itemCategories/itemsCategory.actions.js   |  94 +++++++------
 16 files changed, 250 insertions(+), 203 deletions(-)
 create mode 100644 client/src/containers/ExchangeRates/withExchangeRateDetail.js

diff --git a/client/src/containers/Dialogs/CurrencyDialog.js b/client/src/containers/Dialogs/CurrencyDialog.js
index f7959b22b..4aac6789c 100644
--- a/client/src/containers/Dialogs/CurrencyDialog.js
+++ b/client/src/containers/Dialogs/CurrencyDialog.js
@@ -19,7 +19,6 @@ import withDialogRedux from 'components/DialogReduxConnect';
 import ErrorMessage from 'components/ErrorMessage';
 import classNames from 'classnames';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import { getDialogPayload } from 'store/dashboard/dashboard.reducer';
 
 import withCurrency from 'containers/Currencies/withCurrency';
 import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
@@ -27,7 +26,7 @@ import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
 import { compose } from 'utils';
 
 function CurrencyDialog({
-  name,
+  dialogName,
   payload,
   isOpen,
 
@@ -66,6 +65,7 @@ function CurrencyDialog({
   );
 
   const {
+    values,
     errors,
     touched,
     isSubmitting,
@@ -83,7 +83,7 @@ function CurrencyDialog({
       if (payload.action === 'edit') {
         requestEditCurrency(currency.id, values)
           .then((response) => {
-            closeDialog(name);
+            closeDialog(dialogName);
             AppToaster.show({
               message: formatMessage({
                 id: 'the_currency_has_been_successfully_edited',
@@ -99,7 +99,7 @@ function CurrencyDialog({
       } else {
         requestSubmitCurrencies(values)
           .then((response) => {
-            closeDialog(name);
+            closeDialog(dialogName);
             AppToaster.show({
               message: formatMessage({
                 id: 'the_currency_has_been_successfully_created',
@@ -117,8 +117,8 @@ function CurrencyDialog({
   });
 
   const handleClose = useCallback(() => {
-    closeDialog(name);
-  }, [name, closeDialog]);
+    closeDialog(dialogName);
+  }, [dialogName, closeDialog]);
 
   const onDialogOpening = useCallback(() => {
     fetchCurrencies.refetch();
@@ -126,14 +126,14 @@ function CurrencyDialog({
 
   const onDialogClosed = useCallback(() => {
     resetForm();
-    closeDialog(name);
-  }, [closeDialog, name, resetForm]);
+    closeDialog(dialogName);
+  }, [closeDialog, dialogName, resetForm]);
 
   const requiredSpan = useMemo(() => <span className={'required'}>*</span>, []);
 
   return (
     <Dialog
-      name={name}
+      name={dialogName}
       title={
         payload.action === 'edit' ? (
           <T id={'edit_currency'} />
@@ -222,7 +222,7 @@ function CurrencyDialog({
 }
 
 const mapStateToProps = (state, props) => ({
-  dialogName: 'currency-form',
+  currency: 'currency-form',
 });
 
 const withCurrencyFormDialog = connect(mapStateToProps);
diff --git a/client/src/containers/Dialogs/ExchangeRateDialog.container.js b/client/src/containers/Dialogs/ExchangeRateDialog.container.js
index 854f80937..8c9373994 100644
--- a/client/src/containers/Dialogs/ExchangeRateDialog.container.js
+++ b/client/src/containers/Dialogs/ExchangeRateDialog.container.js
@@ -3,27 +3,31 @@ import { compose } from 'utils';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDialogRedux from 'components/DialogReduxConnect';
-
+import withExchangeRateDetail from 'containers/ExchangeRates/withExchangeRateDetail';
 import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
-import withExchangeRates from 'containers/ExchangeRates/withExchangeRates';  
+import withExchangeRates from 'containers/ExchangeRates/withExchangeRates';
 import withCurrencies from 'containers/Currencies/withCurrencies';
 
-
 const mapStateToProps = (state, props) => ({
   dialogName: 'exchangeRate-form',
+  exchangeRateId:
+    props.payload.action === 'edit' && props.payload.id
+      ? props.payload.id
+      : null,
 });
 
 const withExchangeRateDialog = connect(mapStateToProps);
 
 export default compose(
-  withExchangeRateDialog,
   withDialogRedux(null, 'exchangeRate-form'),
+  withExchangeRateDialog,
   withCurrencies(({ currenciesList }) => ({
     currenciesList,
   })),
+  withExchangeRatesActions,
+  withExchangeRateDetail,
   withExchangeRates(({ exchangeRatesList }) => ({
     exchangeRatesList,
   })),
-  withExchangeRatesActions,
   withDialogActions,
-);
\ No newline at end of file
+);
diff --git a/client/src/containers/Dialogs/ExchangeRateDialog.js b/client/src/containers/Dialogs/ExchangeRateDialog.js
index af97adbc7..1f1e77f9c 100644
--- a/client/src/containers/Dialogs/ExchangeRateDialog.js
+++ b/client/src/containers/Dialogs/ExchangeRateDialog.js
@@ -15,13 +15,8 @@ import { useFormik } from 'formik';
 import { useQuery, queryCache } from 'react-query';
 import moment from 'moment';
 import { DateInput } from '@blueprintjs/datetime';
-import { momentFormatter } from 'utils';
-import { 
-  AppToaster,
-  Dialog,
-  ErrorMessage,
-  ListSelect,
-} from 'components';
+import { momentFormatter, tansformDateValue } from 'utils';
+import { AppToaster, Dialog, ErrorMessage, ListSelect } from 'components';
 import classNames from 'classnames';
 import withExchangeRatesDialog from './ExchangeRateDialog.container';
 
@@ -39,12 +34,13 @@ function ExchangeRateDialog({
   // #withCurrencies
   currenciesList,
 
+  //#WithExchangeRateDetail
+  exchangeRate,
+
   // #withExchangeRatesActions
   requestSubmitExchangeRate,
   requestFetchExchangeRates,
   requestEditExchangeRate,
-  requestFetchCurrencies,
-  editExchangeRate,
 }) {
   const { formatMessage } = useIntl();
   const [selectedItems, setSelectedItems] = useState({});
@@ -90,7 +86,7 @@ function ExchangeRateDialog({
     validationSchema,
     initialValues: {
       ...(payload.action === 'edit' &&
-        pick(editExchangeRate, Object.keys(initialValues))),
+        pick(exchangeRate, Object.keys(initialValues))),
     },
     onSubmit: (values, { setSubmitting, setErrors }) => {
       if (payload.action === 'edit') {
@@ -154,9 +150,9 @@ function ExchangeRateDialog({
   }, [fetchExchangeRatesDialog]);
 
   const handleDateChange = useCallback(
-    (date) => {
+    (date_filed) => (date) => {
       const formatted = moment(date).format('YYYY-MM-DD');
-      setFieldValue('date', formatted);
+      setFieldValue(date_filed, formatted);
     },
     [setFieldValue],
   );
@@ -231,10 +227,10 @@ function ExchangeRateDialog({
           >
             <DateInput
               fill={true}
-              {...momentFormatter('YYYY-MM-DD')}
-              defaultValue={new Date()}
-              onChange={handleDateChange}
-              popoverProps={{ position: Position.BOTTOM }}
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(values.date)}
+              onChange={handleDateChange('date')}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
               disabled={payload.action === 'edit'}
             />
           </FormGroup>
diff --git a/client/src/containers/Dialogs/ItemCategoryDialog.js b/client/src/containers/Dialogs/ItemCategoryDialog.js
index dc5831ee7..24f95e412 100644
--- a/client/src/containers/Dialogs/ItemCategoryDialog.js
+++ b/client/src/containers/Dialogs/ItemCategoryDialog.js
@@ -36,7 +36,7 @@ import Icon from 'components/Icon';
 
 function ItemCategoryDialog({
   dialogName,
-  payload,
+  payload = {},
   isOpen,
 
   // #withDialog
@@ -67,9 +67,12 @@ function ItemCategoryDialog({
   const fetchList = useQuery(['items-categories-list'], () =>
     requestFetchItemCategories(),
   );
-  const fetchAccounts = useQuery('accounts-list', (key) =>
-    requestFetchAccounts(),
+  const fetchAccounts = useQuery(
+    'accounts-list',
+    () => requestFetchAccounts(),
+    { enabled: false },
   );
+
   const validationSchema = Yup.object().shape({
     name: Yup.string()
       .required()
@@ -84,7 +87,7 @@ function ItemCategoryDialog({
     inventory_account_id: Yup.number()
       .required()
       .label(formatMessage({ id: 'inventory_account_' })),
-    description: Yup.string().trim(),
+    description: Yup.string().trim().nullable(),
   });
 
   const initialValues = useMemo(
@@ -228,14 +231,14 @@ function ItemCategoryDialog({
       }
       className={classNames(
         {
-          'dialog--loading': fetchList.isFetching,
+          'dialog--loading': fetchList.isFetching || fetchAccounts.isFetching,
         },
         'dialog--category-form',
       )}
       isOpen={isOpen}
       onClosed={onDialogClosed}
       onOpening={onDialogOpening}
-      isLoading={fetchList.isFetching}
+      isLoading={fetchList.isFetching || fetchAccounts.isFetching}
       onClose={handleClose}
     >
       <form onSubmit={handleSubmit}>
@@ -358,12 +361,15 @@ function ItemCategoryDialog({
             label={<T id={'inventory_account'} />}
             inline={true}
             intent={
-              errors.inventory_account &&
-              touched.inventory_account &&
+              errors.inventory_account_id &&
+              touched.inventory_account_id &&
               Intent.DANGER
             }
             helperText={
-              <ErrorMessage {...{ errors, touched }} name="inventory_account" />
+              <ErrorMessage
+                {...{ errors, touched }}
+                name="inventory_account_id"
+              />
             }
             className={classNames(
               'form-group--sell-account',
@@ -373,9 +379,9 @@ function ItemCategoryDialog({
           >
             <AccountsSelectList
               accounts={accountsList}
-              onAccountSelected={onItemAccountSelect('inventory_account')}
+              onAccountSelected={onItemAccountSelect('inventory_account_id')}
               defaultSelectText={<T id={'select_account'} />}
-              selectedAccountId={values.inventory_account}
+              selectedAccountId={values.inventory_account_id}
             />
           </FormGroup>
         </div>
@@ -404,7 +410,8 @@ function ItemCategoryDialog({
 }
 
 const mapStateToProps = (state, props) => ({
-  itemCategoryId: props?.dialogPayload?.id || null,
+  dialogName: 'item-category-form',
+  itemCategoryId: props?.payload?.id || null,
 });
 
 const withItemCategoryDialog = connect(mapStateToProps);
diff --git a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
index 2f5436f44..49e20c7d4 100644
--- a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
+++ b/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
@@ -20,7 +20,7 @@ import FilterDropdown from 'components/FilterDropdown';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
-
+import withExchangeRatesActions from './withExchangeRatesActions';
 import { compose } from 'utils';
 
 /**
@@ -33,6 +33,9 @@ function ExchangeRateActionsBar({
   // #withResourceDetail
   resourceFields,
 
+  //#withExchangeRatesActions
+  addExchangeRatesTableQueries,
+
   // #ownProps
   selectedRows = [],
   onDeleteExchangeRate,
@@ -46,14 +49,20 @@ function ExchangeRateActionsBar({
     openDialog('exchangeRate-form', {});
   };
 
-  const filterDropdown = FilterDropdown({
-    fields: resourceFields,
-    onFilterChange: (filterConditions) => {
-      setFilterCount(filterConditions.length || 0);
-
-      onFilterChanged && onFilterChanged(filterConditions);
-    },
-  });
+  // const filterDropdown = FilterDropdown({
+  //   initialCondition: {
+  //   fieldKey: '',
+  //     compatator: 'contains',
+  //     value: '',
+  //   },
+  //   fields: resourceFields,
+  //   onFilterChange: (filterConditions) => {
+  //     addExchangeRatesTableQueries({
+  //       filter_roles: filterConditions || '',
+  //     });
+  //     onFilterChanged && onFilterChanged(filterConditions);
+  //   },
+  // });
 
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
     selectedRows,
@@ -76,16 +85,18 @@ function ExchangeRateActionsBar({
 
         <Popover
           minimal={true}
-          content={filterDropdown}
+          // 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' })}`)
+              filterCount <= 0 ? (
+                <T id={'filter'} />
+              ) : (
+                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+              )
             }
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
@@ -117,7 +128,7 @@ function ExchangeRateActionsBar({
 }
 
 const mapStateToProps = (state, props) => ({
-  resourceName: 'exchange_rates',
+  resourceName: '',
 });
 
 const withExchangeRateActionBar = connect(mapStateToProps);
@@ -128,4 +139,5 @@ export default compose(
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
   })),
+  withExchangeRatesActions,
 )(ExchangeRateActionsBar);
diff --git a/client/src/containers/ExchangeRates/ExchangeRateTable.js b/client/src/containers/ExchangeRates/ExchangeRateTable.js
index d52af7356..5badc2075 100644
--- a/client/src/containers/ExchangeRates/ExchangeRateTable.js
+++ b/client/src/containers/ExchangeRates/ExchangeRateTable.js
@@ -1,9 +1,16 @@
 import React, { useCallback, useMemo, useState, useEffect } from 'react';
-import { Button, Popover, Menu, MenuItem, Position,Intent } from '@blueprintjs/core';
+import {
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  Position,
+  Intent,
+} from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import moment from 'moment';
 
-import Icon from 'components/Icon';
-import DataTable from 'components/DataTable';
+import { DataTable, Money, Icon } from 'components';
 import LoadingIndicator from 'components/LoadingIndicator';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -30,10 +37,12 @@ function ExchangeRateTable({
   const [initialMount, setInitialMount] = useState(false);
   const { formatMessage } = useIntl();
 
-  const handelEditExchangeRate = (exchange_rate) => () => {
-    openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
-    onEditExchangeRate(exchange_rate.id);
-  };
+  const handelEditExchangeRate = useCallback(
+    (exchange_rate) => () => {
+      openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
+    },
+    [openDialog],
+  );
 
   const handleDeleteExchangeRate = (exchange_rate) => () => {
     onDeleteExchangeRate(exchange_rate);
@@ -50,49 +59,53 @@ function ExchangeRateTable({
           text={<T id={'delete_exchange_rate'} />}
           intent={Intent.DANGER}
           onClick={handleDeleteExchangeRate(ExchangeRate)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
         />
       </Menu>
     ),
     [handelEditExchangeRate, handleDeleteExchangeRate],
   );
 
-  const columns = useMemo(() => [
-    {
-      id: 'date',
-      Header: formatMessage({ id: 'date' }),
-      // accessor: 'date',
-      width: 150,
-    },
-    {
-      id: 'currency_code',
-      Header: formatMessage({ id: 'currency_code' }),
-      accessor: 'currency_code',
-      className: 'currency_code',
-      width: 150,
-    },
-    {
-      id: 'exchange_rate',
-      Header: formatMessage({ id: 'exchange_rate' }),
-      accessor: 'exchange_rate',
-      className: 'exchange_rate',
-      width: 150,
-    },
-    {
-      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: false,
-    },
-  ], [actionMenuList,formatMessage]);
+  const columns = useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: formatMessage({ id: 'date' }),
+        accessor: (r) => moment(r.date).format('YYYY MMM DD'),
+        width: 150,
+      },
+      {
+        id: 'currency_code',
+        Header: formatMessage({ id: 'currency_code' }),
+        accessor: 'currency_code',
+        className: 'currency_code',
+        width: 150,
+      },
+      {
+        id: 'exchange_rate',
+        Header: formatMessage({ id: 'exchange_rate' }),
+        accessor: (r) => <Money amount={r.exchange_rate} currency={'USD'} />,
+        className: 'exchange_rate',
+        width: 150,
+      },
+      {
+        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: false,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
 
   const selectionColumn = useMemo(
     () => ({
@@ -120,18 +133,18 @@ function ExchangeRateTable({
 
   return (
     <LoadingIndicator loading={loading} mount={false}>
-    <DataTable
-      columns={columns}
-      data={exchangeRatesList}
-      onFetchData={handelFetchData}
-      loading={exchangeRatesLoading && !initialMount}
-      manualSortBy={true}
-      selectionColumn={selectionColumn}
-      expandable={true}
-      treeGraph={true}
-      onSelectedRowsChange={handelSelectedRowsChange}
-      spinnerProps={{ size: 30 }}
-    />
+      <DataTable
+        columns={columns}
+        data={exchangeRatesList}
+        onFetchData={handelFetchData}
+        loading={exchangeRatesLoading && !initialMount}
+        manualSortBy={true}
+        selectionColumn={selectionColumn}
+        expandable={true}
+        treeGraph={true}
+        onSelectedRowsChange={handelSelectedRowsChange}
+        spinnerProps={{ size: 30 }}
+      />
     </LoadingIndicator>
   );
 }
diff --git a/client/src/containers/ExchangeRates/withExchangeRateDetail.js b/client/src/containers/ExchangeRates/withExchangeRateDetail.js
new file mode 100644
index 000000000..ee914514a
--- /dev/null
+++ b/client/src/containers/ExchangeRates/withExchangeRateDetail.js
@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import { getExchangeRateById } from 'store/ExchangeRate/exchange.selector';
+
+const mapStateToProps = (state, props) => ({
+  exchangeRate: getExchangeRateById(state, props),
+});
+
+export default connect(mapStateToProps);
diff --git a/client/src/containers/Items/ItemCategoriesTable.js b/client/src/containers/Items/ItemCategoriesTable.js
index d8e13d23b..518400615 100644
--- a/client/src/containers/Items/ItemCategoriesTable.js
+++ b/client/src/containers/Items/ItemCategoriesTable.js
@@ -16,11 +16,15 @@ import { compose } from 'utils';
 import DataTable from 'components/DataTable';
 
 import withItemCategories from './withItemCategories';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 const ItemsCategoryList = ({
   // #withItemCategories
   categoriesList,
 
+  // #withDialogActions.
+  openDialog,
+
   // #ownProps
   onFetchData,
   onDeleteCategory,
@@ -30,11 +34,12 @@ const ItemsCategoryList = ({
   const { formatMessage } = useIntl();
 
   const handelEditCategory = useCallback(
-    (category) => {
-      onEditCategory(category);
+    (category) => () => {
+      openDialog('item-category-form', { action: 'edit', id: category.id });
     },
-    [onEditCategory],
+    [],
   );
+
   const handleDeleteCategory = useCallback(
     (category) => {
       onDeleteCategory(category);
@@ -46,13 +51,14 @@ const ItemsCategoryList = ({
       <Menu>
         <MenuItem
           text={formatMessage({ id: 'edit_category' })}
-          onClick={() => handelEditCategory(category)}
+          onClick={handelEditCategory(category)}
         />
         <MenuDivider />
         <MenuItem
           text={formatMessage({ id: 'delete_category' })}
           intent={Intent.DANGER}
           onClick={() => handleDeleteCategory(category)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
         />
       </Menu>
     ),
@@ -77,7 +83,7 @@ const ItemsCategoryList = ({
       {
         id: 'count',
         Header: formatMessage({ id: 'count' }),
-        accessor: (r) => r.count || '',
+        accessor: 'count',
         className: 'count',
         width: 50,
       },
@@ -154,4 +160,5 @@ export default compose(
   withItemCategories(({ categoriesList }) => ({
     categoriesList,
   })),
+  withDialogActions,
 )(ItemsCategoryList);
diff --git a/client/src/containers/Preferences/Currencies/CurrenciesList.js b/client/src/containers/Preferences/Currencies/CurrenciesList.js
index 3bb4a4750..0c8fb7eb1 100644
--- a/client/src/containers/Preferences/Currencies/CurrenciesList.js
+++ b/client/src/containers/Preferences/Currencies/CurrenciesList.js
@@ -50,9 +50,11 @@ function CurrenciesList({
 
   const fetchCurrencies = useQuery('currencies-table',
     () => requestFetchCurrencies(),
-    { manual: true },
+    { enabled: true },
   );
 
+
+
   useEffect(() => {
     changePreferencesPageTitle(formatMessage({ id: 'currencies' }));
   }, [changePreferencesPageTitle, formatMessage]);
@@ -147,7 +149,7 @@ function CurrenciesList({
   );
 
   const handleDataTableFetchData = useCallback(() => {
-    fetchCurrencies.refetch();
+    // fetchCurrencies.refetch();
   }, [fetchCurrencies]);
 
   return (
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
index 7e13b178e..9d2cbeac7 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
@@ -77,7 +77,11 @@ function PaymentReceiveForm({
   };
 
   useEffect(() => {
-    onCustomerChange && onCustomerChange(formik.values.customer_id);
+    if (paymentReceive && paymentReceive.id) {
+      return;
+    } else {
+      onCustomerChange && onCustomerChange(formik.values.customer_id);
+    }
   });
 
   useEffect(() => {
@@ -295,7 +299,7 @@ function PaymentReceiveForm({
       orderingIndex([...repeatValue(defaultPaymentReceive, MIN_LINES_NUMBER)]),
     );
   };
-  console.log(formik.errors, 'ERROR');
+ 
   return (
     <div className={'payment_receive_form'}>
       <form onSubmit={formik.handleSubmit}>
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
index dd9c015ba..7790331cd 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
@@ -81,21 +81,12 @@ function PaymentReceiveItemsTable({
   invoices,
 }) {
   const [rows, setRows] = useState([]);
-  const [entrie, setEntrie] = useState([]);
   const { formatMessage } = useIntl();
 
   useEffect(() => {
     setRows([...dueInvoices.map((e) => ({ ...e })), ...invoices, {}]);
-    setEntrie([
-      ...dueInvoices.map((e) => {
-        return { id: e.id, payment_amount: e.payment_amount };
-      }),
-    ]);
-  }, [dueInvoices]);
+  }, [invoices]);
 
-  console.log(rows, 'rows');
-  console.log(entrie, 'entrie');
-  console.log(values, 'values');
   // useEffect(() => {
   //   setRows([...dueInvoices.map((e) => ({ ...e })), {}]);
 
@@ -188,7 +179,7 @@ function PaymentReceiveItemsTable({
       );
       onClickRemoveRow && onClickRemoveRow(removeIndex);
     },
-    [entrie, setFieldValue, onClickRemoveRow],
+    [rows, setFieldValue, onClickRemoveRow],
   );
 
   const onClickNewRow = () => {
@@ -215,7 +206,6 @@ function PaymentReceiveItemsTable({
         return row;
       });
       setRows(newRows);
-      // setEntrie(newRows);
       setFieldValue(
         'entries',
         newRows.map((row) => ({
@@ -224,7 +214,7 @@ function PaymentReceiveItemsTable({
         })),
       );
     },
-    [rows, setFieldValue, setEntrie,setRows],
+    [rows, setFieldValue, setRows],
   );
 
   return (
diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceives.js b/client/src/containers/Sales/PaymentReceive/PaymentReceives.js
index 49094c601..a52af7c76 100644
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceives.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceives.js
@@ -71,11 +71,7 @@ function PaymentReceives({
   }, [history]);
 
   const handleCustomerChange = (customerId) => {
-    if (id) {
-      setCustomerId(!customerId);
-    } else {
-      setCustomerId(customerId);
-    }
+    setCustomerId(customerId);
   };
 
   return (
@@ -91,7 +87,6 @@ function PaymentReceives({
       <PaymentReceiveForm
         onFormSubmit={handleFormSubmit}
         paymentReceiveId={id}
-        paymentReceiveInvoices={id}
         onCancelForm={handleCancel}
         onCustomerChange={handleCustomerChange}
       />
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index 6186ce10d..d91b727d7 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -73,6 +73,7 @@ export default {
   new_currency: 'New Currency',
   currency_name: 'Currency Name',
   currency_code: 'Currency Code',
+  select_currency_code: 'select Currency Code',
   edit_exchange_rate: 'Edit Exchange Rate',
   new_exchange_rate: 'New Exchange Rate',
   delete_exchange_rate: 'Delete Exchange Rate',
@@ -714,4 +715,5 @@ export default {
   sell_account: 'Sell Account',
   cost_account: 'Cost Account',
   inventory_account: 'Inventory Account',
+  
 };
diff --git a/client/src/store/ExchangeRate/exchange.actions.js b/client/src/store/ExchangeRate/exchange.actions.js
index d8dad485b..33a1cbf1d 100644
--- a/client/src/store/ExchangeRate/exchange.actions.js
+++ b/client/src/store/ExchangeRate/exchange.actions.js
@@ -13,6 +13,7 @@ export const fetchExchangeRates = () => {
       });
       ApiService.get('exchange_rates')
         .then((response) => {
+         
           dispatch({
             type: t.EXCHANGE_RATE_LIST_SET,
             exchange_rates: response.data.exchange_rates.results,
@@ -35,20 +36,18 @@ export const fetchExchangeRates = () => {
 export const submitExchangeRate = ({ form }) => {
   return (dispatch) =>
     new Promise((resolve, reject) => {
-      ApiService.post('exchange_rates', form).then((response) => {
-        resolve(response);
-      }).catch((error)=>{
-        const {response} = error
-        const {data} = response;
-        reject(data?.errors)
-      })
+      ApiService.post('exchange_rates', form)
+        .then((response) => {
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          reject(data?.errors);
+        });
     });
 };
 
-// export const deleteExchangeRate = (id) => {
-//   return (dispatch) => ApiService.delete(`exchange_rates/${id}`);
-// }
-
 export const deleteExchangeRate = (id) => {
   return (dispatch) =>
     new Promise((resolve, reject) => {
diff --git a/client/src/store/ExchangeRate/exchange.selector.js b/client/src/store/ExchangeRate/exchange.selector.js
index c8c6a586d..dd676674e 100644
--- a/client/src/store/ExchangeRate/exchange.selector.js
+++ b/client/src/store/ExchangeRate/exchange.selector.js
@@ -1,10 +1,20 @@
 import { createSelector } from 'reselect';
+import { pickItemsFromIds, getItemById } from 'store/selectors';
 
-const exchangeRateItemsSelector = state => state.exchangeRates.exchangeRates;
+const exchangeRateItemsSelector = (state) => state.exchangeRates.exchangeRates;
+const exchangeRateIdPropSelector = (state, props) => props.exchangeRateId;
 
 export const getExchangeRatesList = createSelector(
   exchangeRateItemsSelector,
   (exchangeRateItems) => {
     return Object.values(exchangeRateItems);
   },
-)
\ No newline at end of file
+);
+
+export const getExchangeRateById = createSelector(
+  exchangeRateItemsSelector,
+  exchangeRateIdPropSelector,
+  (exchangeRates, exchangeRateId) => {
+    return getItemById(exchangeRates, exchangeRateId);
+  },
+);
diff --git a/client/src/store/itemCategories/itemsCategory.actions.js b/client/src/store/itemCategories/itemsCategory.actions.js
index 9a296f8ef..352f2b237 100644
--- a/client/src/store/itemCategories/itemsCategory.actions.js
+++ b/client/src/store/itemCategories/itemsCategory.actions.js
@@ -8,37 +8,38 @@ export const submitItemCategory = ({ form }) => {
 };
 
 export const fetchItemCategories = ({ query }) => {
-  return (dispatch, getState) => new Promise((resolve, reject) => {
-    dispatch({
-      type: t.SET_DASHBOARD_REQUEST_LOADING,
-    });
-    dispatch({
-      type: t.ITEM_CATEGORIES_TABLE_LOADING,
-      payload: {
-        loading: true,
-      }
-    });
-    ApiService.get('item_categories', { params: { ...query } })
-      .then((response) => {
-        dispatch({
-          type: t.ITEMS_CATEGORY_LIST_SET,
-          categories: response.data.categories,
-        });
-        dispatch({
-          type: t.SET_DASHBOARD_REQUEST_COMPLETED,
-        });
-        dispatch({
-          type: t.ITEM_CATEGORIES_TABLE_LOADING,
-          payload: {
-            loading: false,
-          }
-        });
-        resolve(response);
-      })
-      .catch((error) => {
-        reject(error);
+  return (dispatch, getState) =>
+    new Promise((resolve, reject) => {
+      dispatch({
+        type: t.SET_DASHBOARD_REQUEST_LOADING,
       });
-  });
+      dispatch({
+        type: t.ITEM_CATEGORIES_TABLE_LOADING,
+        payload: {
+          loading: true,
+        },
+      });
+      ApiService.get('item_categories', { params: { ...query } })
+        .then((response) => {
+          dispatch({
+            type: t.ITEMS_CATEGORY_LIST_SET,
+            categories: response.data.categories,
+          });
+          dispatch({
+            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+          });
+          dispatch({
+            type: t.ITEM_CATEGORIES_TABLE_LOADING,
+            payload: {
+              loading: false,
+            },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
 };
 
 export const editItemCategory = (id, form) => {
@@ -46,19 +47,13 @@ export const editItemCategory = (id, form) => {
     new Promise((resolve, reject) => {
       ApiService.post(`item_categories/${id}`, form)
         .then((response) => {
-          dispatch({ type: t.CLEAR_CATEGORY_FORM_ERRORS });
           resolve(response);
         })
         .catch((error) => {
           const { response } = error;
           const { data } = response;
-          const { errors } = data;
 
-          dispatch({ type: t.CLEAR_CATEGORY_FORM_ERRORS });
-          if (errors) {
-            dispatch({ type: t.CLEAR_CATEGORY_FORM_ERRORS, errors });
-          }
-          reject(error);
+          reject(data?.errors);
         });
     });
 };
@@ -81,15 +76,18 @@ export const deleteItemCategory = (id) => {
 };
 
 export const deleteBulkItemCategories = ({ ids }) => {
-  return dispatch => new Promise((resolve, reject) => {
-    ApiService.delete(`item_categories/bulk`, { params: { ids }}).then((response) => {
-      dispatch({
-        type: t.ITEM_CATEGORIES_BULK_DELETE,
-        payload: { ids }
-      });
-      resolve(response);
-    }).catch((error) => {
-      reject(error);
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.delete(`item_categories/bulk`, { params: { ids } })
+        .then((response) => {
+          dispatch({
+            type: t.ITEM_CATEGORIES_BULK_DELETE,
+            payload: { ids },
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
     });
-  });
-};
\ No newline at end of file
+};