feat: Merge sales branch

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);

client/src/containers/Purchases/Bill/BillForm.js

@@ -0,0 +1,319 @@
+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 } 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]);
+
+  // @todo abstruct validation schema to sperated file.
+  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 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 form = {
+        ...values,
+        entries: values.entries.filter(
+          (item) => item.item_id && item.quantity,
+        ),
+      };
+      if (bill && bill.id) {
+        requestEditBill(bill.id, form)
+          .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(form)
+          .then((response) => {
+            AppToaster.show({
+              message: formatMessage(
+                { id: 'the_bill_has_been_successfully_created' },
+                { number: values.bill_number },
+              ),
+              intent: Intent.SUCCESS,
+            });
+            setSubmitting(false);
+            saveBillSubmit({ action: 'new', ...payload });
+            resetForm();
+          })
+          .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]),
+    );
+  };
+  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);

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>
+  );
+}

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);

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);

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);

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);

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: 'vendor.display_name',
+        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);

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);

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);
+};

client/src/containers/Purchases/Bill/withBills.js

@@ -0,0 +1,30 @@
+import { connect } from 'react-redux';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+import {
+  getBillCurrentPageFactory,
+  getBillPaginationMetaFactory,
+  getBillTableQueryFactory,
+} from 'store/Bills/bills.selectors';
+
+export default (mapState) => {
+  const getBillsItems = getBillCurrentPageFactory();
+  const getBillsPaginationMeta = getBillPaginationMetaFactory();
+  const getBillTableQuery = getBillTableQueryFactory();
+
+  const mapStateToProps = (state, props) => {
+    const tableQuery = getBillTableQuery(state, props);
+
+    const mapped = {
+      billsCurrentPage: getBillsItems(state, props, tableQuery),
+      billsViews: getResourceViews(state, props, 'bills'),
+      billsItems: state.bills.items,
+      billsTableQuery: tableQuery,
+
+      // @todo un-unncessery shit.
+      billsPageination: getBillsPaginationMeta(state, props, tableQuery),
+      billsLoading: state.bills.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

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);

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>
+  );
+}

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);

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);

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);

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 } 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, ['total']),
+        })),
+      );
+    },
+    [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);

client/src/containers/Sales/Estimate/EstimateActionsBar.js

@@ -0,0 +1,168 @@
+import React, { useMemo, useCallback, useState } 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 { 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 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 [filterCount, setFilterCount] = useState(0);
+  const { formatMessage } = useIntl();
+
+  const onClickNewEstimate = useCallback(() => {
+    history.push('/estimates/new');
+  }, [history]);
+
+  // 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}
+          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={
+              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: 'sales_estimates',
+});
+const withEstimateActionsBar = connect(mapStateToProps);
+
+export default compose(
+  withEstimateActionsBar,
+  withDialogActions,
+  withEstimates(({ estimateViews }) => ({
+    estimateViews,
+  })),
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })),
+  withEstimateActions,
+)(EstimateActionsBar);

client/src/containers/Sales/Estimate/EstimateForm.js

@@ -0,0 +1,360 @@
+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 { 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;
+
+const EstimateForm = ({
+  //#WithMedia
+  requestSubmitMedia,
+  requestDeleteMedia,
+
+  //#WithEstimateActions
+  requestSubmitEstimate,
+  requestEditEstimate,
+
+  //#withDashboard
+  changePageTitle,
+  changePageSubtitle,
+
+  //#withEstimateDetail
+  estimate,
+
+  //#own Props
+  estimateId,
+  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 (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()
+      .nullable()
+      .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 saveEstimateSubmit = useCallback(
+    (payload) => {
+      onFormSubmit && onFormSubmit(payload);
+    },
+    [onFormSubmit],
+  );
+
+  const defaultEstimate = useMemo(
+    () => ({
+      index: 0,
+      item_id: null,
+      rate: null,
+      discount: 0,
+      quantity: null,
+      description: '',
+    }),
+    [],
+  );
+
+  const defaultInitialValues = useMemo(
+    () => ({
+      customer_id: '',
+      estimate_date: moment(new Date()).format('YYYY-MM-DD'),
+      expiration_date: moment(new Date()).format('YYYY-MM-DD'),
+      estimate_number: '',
+      reference: '',
+      note: '',
+      terms_conditions: '',
+      entries: [...repeatValue(defaultEstimate, MIN_LINES_NUMBER)],
+    }),
+    [defaultEstimate],
+  );
+
+  const orderingProductsIndex = (_entries) => {
+    return _entries.map((item, index) => ({
+      ...item,
+      index: index + 1,
+    }));
+  };
+  // debugger;
+  const initialValues = useMemo(
+    () => ({
+      ...(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),
+          }),
+    }),
+    [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) => ({
+          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.filter(
+        (item) => item.item_id && item.quantity,
+      );
+      const form = {
+        ...values,
+        entries,
+      };
+      const requestForm = { ...form };
+
+      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,
+            });
+            setSubmitting(false);
+            resetForm();
+            saveEstimateSubmit({ 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 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}
+          // defaultRow={defaultEstimate}
+        />
+        <FormGroup
+          label={<T id={'customer_note'} />}
+          className={'form-group--customer_note'}
+        >
+          <TextArea growVertically={true} {...formik.getFieldProps('note')} />
+        </FormGroup>
+        <FormGroup
+          label={<T id={'terms_conditions'} />}
+          className={'form-group--terms_conditions'}
+        >
+          <TextArea
+            growVertically={true}
+            {...formik.getFieldProps('terms_conditions')}
+          />
+        </FormGroup>
+        <Dragzone
+          initialFiles={initialAttachmentFiles}
+          onDrop={handleDropFiles}
+          onDeleteFile={handleDeleteFile}
+          hint={'Attachments: Maxiumum size: 20MB'}
+        />
+      </form>
+      <EstimateFormFooter
+        formik={formik}
+        onSubmitClick={handleSubmitClick}
+        estimate={estimate}
+        onCancelClick={handleCancelClick}
+      />
+    </div>
+  );
+};
+
+export default compose(
+  withEstimateActions,
+  withDashboardActions,
+  withMediaActions,
+  withEstimateDetail(),
+)(EstimateForm);

client/src/containers/Sales/Estimate/EstimateFormFooter.js

@@ -0,0 +1,60 @@
+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, resetForm },
+  onSubmitClick,
+  onCancelClick,
+  onClearClick,
+  estimate,
+}) {
+  return (
+    <div className={'estimate-form__floating-footer'}>
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        type="submit"
+        onClick={() => {
+          onSubmitClick({ redirect: true });
+        }}
+      >
+        {estimate && estimate.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}
+        // onClick={() => {
+        //   onClearClick && onClearClick();
+        // }}
+      >
+        <T id={'clear'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        type="submit"
+        onClick={() => {
+          onCancelClick && onCancelClick();
+        }}
+      >
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}

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);

client/src/containers/Sales/Estimate/EstimateList.js

@@ -0,0 +1,190 @@
+import React, { useEffect, useCallback, useMemo, useState } from 'react';
+import { Route, Switch, useHistory } from 'react-router-dom';
+import { useQuery } 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 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';
+
+function EstimateList({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withViewsActions
+  requestFetchResourceViews,
+  requestFetchResourceFields,
+
+  // #withEstimate
+  estimateTableQuery,
+  estimateViews,
+
+  //#withEistimateActions
+  requestFetchEstimatesTable,
+  requestDeleteEstimate,
+  addEstimatesTableQueries,
+}) {
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+  const [deleteEstimate, setDeleteEstimate] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  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(),
+  );
+
+  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(() => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_estimate_has_been_successfully_deleted',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      setDeleteEstimate(false);
+    });
+  }, [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 handleEditEstimate = 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) => {
+      setSelectedRows(estimate);
+    },
+    [setSelectedRows],
+  );
+  return (
+    <DashboardInsider
+      loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
+      name={'sales_estimates'}
+    >
+      <EstimateActionsBar
+        // onBulkDelete={}
+        selectedRows={selectedRows}
+        onFilterChanged={handleFilterChanged}
+      />
+      <DashboardPageContent>
+        <Switch>
+          <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 compose(
+  withResourceActions,
+  withEstimateActions,
+  withDashboardActions,
+  withViewsActions,
+  withEstimates(({ estimateTableQuery, estimateViews }) => ({
+    estimateTableQuery,
+    estimateViews,
+  })),
+)(EstimateList);

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);

client/src/containers/Sales/Estimate/Estimates.js

@@ -0,0 +1,68 @@
+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,
+  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({}),
+  );
+
+  const handleFormSubmit = useCallback(
+    (payload) => {
+      payload.redirect && history.push('/estimates');
+    },
+    [history],
+  );
+  const handleCancel = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
+  return (
+    <DashboardInsider
+      loading={
+        fetchCustomers.isFetching ||
+        fetchItems.isFetching ||
+        fetchEstimate.isFetching
+      }
+      name={'estimate-form'}
+    >
+      <EstimateForm
+        onFormSubmit={handleFormSubmit}
+        estimateId={id}
+        onCancelForm={handleCancel}
+      />
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withEstimateActions,
+  withCustomersActions,
+  withItemsActions,
+)(Estimates);

client/src/containers/Sales/Estimate/EstimatesDataTable.js

@@ -0,0 +1,254 @@
+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 withEstimates from './withEstimates';
+import withEstimateActions from './withEstimateActions';
+import withCurrentView from 'containers/Views/withCurrentView';
+
+function EstimatesDataTable({
+  //#withEitimates
+  estimatesCurrentPage,
+  estimatesLoading,
+  estimatesPageination,
+  estimateItems,
+
+  // #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 (!estimatesLoading) {
+      setInitialMount(true);
+    }
+  }, [estimatesLoading, setInitialMount]);
+
+  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(
+    (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)}
+        />
+        <MenuItem
+          text={formatMessage({ id: 'delete_estimate' })}
+          intent={Intent.DANGER}
+          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: 'estimate_date',
+        Header: formatMessage({ id: 'estimate_date' }),
+        accessor: (r) => moment(r.estimate_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'estimate_date',
+      },
+      {
+        id: 'customer_id',
+        Header: formatMessage({ id: 'customer_name' }),
+        accessor: 'customer.display_name',
+        width: 140,
+        className: 'customer_id',
+      },
+      {
+        id: 'expiration_date',
+        Header: formatMessage({ id: 'expiration_date' }),
+        accessor: (r) => moment(r.expiration_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'expiration_date',
+      },
+      {
+        id: 'estimate_number',
+        Header: formatMessage({ id: 'estimate_number' }),
+        accessor: (row) => `#${row.estimate_number}`,
+        width: 140,
+        className: 'estimate_number',
+      },
+      {
+        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',
+        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 selectionColumn = useMemo(
+    () => ({
+      minWidth: 40,
+      width: 40,
+      maxWidth: 40,
+    }),
+    [],
+  );
+
+  const handleDataTableFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData],
+  );
+
+  const handleSelectedRowsChange = useCallback(
+    (selectedRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
+    },
+    [onSelectedRowsChange],
+  );
+  console.log(estimatesCurrentPage, 'estimatesCurrentPage');
+  console.log(estimateItems, 'estimateItems');
+
+  return (
+    <div>
+      <LoadingIndicator loading={loading} mount={false}>
+        <DataTable
+          columns={columns}
+          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>
+  );
+}
+
+export default compose(
+  withRouter,
+  withCurrentView,
+  withDialogActions,
+  withDashboardActions,
+  withEstimateActions,
+  withEstimates(
+    ({
+      estimatesCurrentPage,
+      estimatesLoading,
+      estimatesPageination,
+      estimateItems,
+    }) => ({
+      estimatesCurrentPage,
+      estimatesLoading,
+      estimatesPageination,
+      estimateItems,
+    }),
+  ),
+  withViewDetails(),
+)(EstimatesDataTable);

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);

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);
+};

client/src/containers/Sales/Estimate/withEstimates.js

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+import {
+  getEstimateCurrentPageFactory,
+  getEstimatesTableQueryFactory,
+  getEstimatesPaginationMetaFactory,
+} from 'store/Estimate/estimates.selectors';
+
+export default (mapState) => {
+  const getEstimatesItems = getEstimateCurrentPageFactory();
+  const getEstimatesPaginationMeta = getEstimatesPaginationMetaFactory();
+  const getEstimatesTableQuery = getEstimatesTableQueryFactory();
+
+  const mapStateToProps = (state, props) => {
+    const query = getEstimatesTableQuery(state, props);
+    const mapped = {
+      estimatesCurrentPage: getEstimatesItems(state, props, query),
+      estimateViews: getResourceViews(state, props, 'sales_estimates'),
+      estimateItems: state.sales_estimates.items,
+      estimateTableQuery: query,
+      estimatesPageination: getEstimatesPaginationMeta(state, props, query),
+      estimatesLoading: state.sales_estimates.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

client/src/containers/Sales/Invoice/InvoiceActionsBar.js

@@ -0,0 +1,151 @@
+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 withDialogActions from 'containers/Dialog/withDialogActions';
+
+import withInvoiceActions from './withInvoiceActions';
+import withInvoices from './withInvoices';
+
+import { compose } from 'utils';
+
+function InvoiceActionsBar({
+  // #withResourceDetail
+  resourceFields,
+
+  //#withInvoice
+  invoicesViews,
+
+  // #withInvoiceActions
+  addInvoiceTableQueries,
+
+  // #own Porps
+  onFilterChanged,
+  selectedRows = [],
+}) {
+  const history = useHistory();
+  const { path } = useRouteMatch();
+  const [filterCount, setFilterCount] = useState(0);
+  const { formatMessage } = useIntl();
+
+  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,
+  ]);
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'sales_invoices'}
+          views={invoicesViews}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_invoice'} />}
+          onClick={handleClickNewInvoice}
+        />
+        <Popover
+          minimal={true}
+          // content={filterDropdown}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL)}
+            text={
+              filterCount <= 0 ? (
+                <T id={'filter'} />
+              ) : (
+                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+              )
+            }
+            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          />
+        </Popover>
+        <If condition={hasSelectedRows}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            // onClick={handleBulkDelete}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+const mapStateToProps = (state, props) => ({
+  resourceName: 'sales_invoices',
+});
+const withInvoiceActionsBar = connect(mapStateToProps);
+
+export default compose(
+  withInvoiceActionsBar,
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })),
+  withInvoices(({ invoicesViews }) => ({
+    invoicesViews,
+  })),
+  withInvoiceActions,
+)(InvoiceActionsBar);

client/src/containers/Sales/Invoice/InvoiceForm.js

@@ -0,0 +1,351 @@
+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 } 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 { 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,
+  requestEditInvoice,
+
+  //#withDashboard
+  changePageTitle,
+  changePageSubtitle,
+
+  //#withInvoiceDetail
+  invoice,
+
+  //#own Props
+  invoiceId,
+  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 (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(),
+          }),
+        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: 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: 'SEND',
+      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,
+    }));
+  };
+  // debugger;
+  const initialValues = useMemo(
+    () => ({
+      ...(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),
+          }),
+    }),
+    [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) => ({
+          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.filter(
+        (item) => item.item_id && item.quantity,
+      );
+      const form = {
+        ...values,
+        entries,
+      };
+
+      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,
+            });
+            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) => {
+      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 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'}
+        />
+      </form>
+      <InvoiceFormFooter
+        formik={formik}
+        onSubmitClick={handleSubmitClick}
+        invoice={invoice}
+        onCancelClick={handleCancelClick}
+      />
+    </div>
+  );
+}
+
+export default compose(
+  withInvoiceActions,
+  withDashboardActions,
+  withMediaActions,
+  withInvoiceDetail(),
+)(InvoiceForm);

client/src/containers/Sales/Invoice/InvoiceFormFooter.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 EstimateFormFooter({
+  formik: { isSubmitting },
+  onSubmitClick,
+  onCancelClick,
+  invoice,
+}) {
+  return (
+    <div className={'estimate-form__floating-footer'}>
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        type="submit"
+        onClick={() => {
+          onSubmitClick({ redirect: true });
+        }}
+      >
+        {invoice && invoice.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>
+  );
+}

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);

client/src/containers/Sales/Invoice/InvoiceList.js

@@ -0,0 +1,177 @@
+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 InvoicesDataTable from './InvoicesDataTable';
+import InvoiceActionsBar from './InvoiceActionsBar';
+import InvoiceViewTabs from './InvoiceViewTabs';
+
+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';
+
+function InvoiceList({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withViewsActions
+  requestFetchResourceViews,
+  requestFetchResourceFields,
+
+  //#withInvoice
+  invoicesTableQuery,
+  invoicesViews,
+
+  //#withInvoiceActions
+  requestFetchInvoiceTable,
+  requestDeleteInvoice,
+  addInvoiceTableQueries,
+}) {
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+  const [deleteInvoice, setDeleteInvoice] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  useEffect(() => {
+    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) => {
+      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);
+    });
+  }, [deleteInvoice, requestDeleteInvoice, formatMessage]);
+
+  const handleEditInvoice = useCallback((invoice) => {
+    history.push(`/invoices/${invoice.id}/edit`);
+  });
+
+  // Calculates the selected rows count.
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
+    selectedRows,
+  ]);
+
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      const page = pageIndex + 1;
+
+      addInvoiceTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+        page_size: pageSize,
+        page,
+      });
+    },
+    [addInvoiceTableQueries],
+  );
+
+  // 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
+      loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
+      name={'sales_invoices'}
+    >
+      <InvoiceActionsBar
+        // onBulkDelete={}
+        selectedRows={selectedRows}
+        onFilterChanged={handleFilterChanged}
+      />
+      <DashboardPageContent>
+        <Switch>
+          <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 compose(
+  withResourceActions,
+  withInvoiceActions,
+  withDashboardActions,
+  withViewsActions,
+  withInvoices(({ invoicesTableQuery }) => ({
+    invoicesTableQuery,
+  })),
+)(InvoiceList);

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);

client/src/containers/Sales/Invoice/Invoices.js

@@ -0,0 +1,68 @@
+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,
+  requsetFetchInvoice,
+}) {
+  const history = useHistory();
+  const { id } = useParams();
+
+  // Handle fetch Items data table or list
+  const fetchItems = useQuery('items-table', () => requestFetchItems({}));
+
+  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 ||
+        fetchInvoice.isFetching
+      }
+      name={'invoice-form'}
+    >
+      <InvoiceForm
+        onFormSubmit={handleFormSubmit}
+        invoiceId={id}
+        onCancelForm={handleCancel}
+      />
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withInvoiceActions,
+  withCustomersActions,
+  withItemsActions,
+)(Invoices);

client/src/containers/Sales/Invoice/InvoicesDataTable.js

@@ -0,0 +1,254 @@
+import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import {
+  Intent,
+  Button,
+  Classes,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+} from '@blueprintjs/core';
+import { useParams } from 'react-router-dom';
+import { withRouter } from 'react-router';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import moment from 'moment';
+
+import { compose } from 'utils';
+import { useUpdateEffect } from 'hooks';
+
+import LoadingIndicator from 'components/LoadingIndicator';
+import { DataTable, Money, Icon } from 'components';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withViewDetails from 'containers/Views/withViewDetails';
+
+import withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
+import withCurrentView from 'containers/Views/withCurrentView';
+
+function InvoicesDataTable({
+  //#withInvoices
+  invoicesCurrentPage,
+  invoicesLoading,
+  invoicesPageination,
+  invoicesItems,
+
+  // #withDashboardActions
+  changeCurrentView,
+  changePageSubtitle,
+  setTopbarEditView,
+
+  // #withView
+  viewMeta,
+
+  //#OwnProps
+  loading,
+  onFetchData,
+  onEditInvoice,
+  onDeleteInvoice,
+  onSelectedRowsChange,
+}) {
+  const [initialMount, setInitialMount] = useState(false);
+  const { custom_view_id: customViewId } = useParams();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    setInitialMount(false);
+  }, [customViewId]);
+
+  useUpdateEffect(() => {
+    if (!invoicesLoading) {
+      setInitialMount(true);
+    }
+  }, [invoicesLoading, setInitialMount]);
+
+  // 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(
+    (_invoice) => () => {
+      onDeleteInvoice && onDeleteInvoice(_invoice);
+    },
+    [onDeleteInvoice],
+  );
+
+  const actionMenuList = useCallback(
+    (invoice) => (
+      <Menu>
+        <MenuItem text={formatMessage({ id: 'view_details' })} />
+        <MenuDivider />
+        <MenuItem
+          text={formatMessage({ id: 'edit_invoice' })}
+          onClick={handleEditInvoice(invoice)}
+        />
+        <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: 'invoice_date',
+        Header: formatMessage({ id: 'invoice_date' }),
+        accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'invoice_date',
+      },
+      {
+        id: 'customer_id',
+        Header: formatMessage({ id: 'customer_name' }),
+        accessor: 'customer.display_name',
+        width: 140,
+        className: 'customer_id',
+      },
+      {
+        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: 'balance',
+        Header: formatMessage({ id: 'balance' }),
+        accessor: (r) => <Money amount={r.balance} currency={'USD'} />,
+        width: 140,
+        className: 'balance',
+      },
+      {
+        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],
+  );
+
+  const selectionColumn = useMemo(
+    () => ({
+      minWidth: 40,
+      width: 40,
+      maxWidth: 40,
+    }),
+    [],
+  );
+
+  return (
+    <div>
+      <LoadingIndicator loading={loading} mount={false}>
+        <DataTable
+          columns={columns}
+          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>
+  );
+}
+
+export default compose(
+  withRouter,
+  withCurrentView,
+  withDialogActions,
+  withDashboardActions,
+  withInvoiceActions,
+  withInvoices(
+    ({ invoicesCurrentPage, invoicesLoading, invoicesPageination }) => ({
+      invoicesCurrentPage,
+      invoicesLoading,
+      invoicesPageination,
+    }),
+  ),
+  withViewDetails(),
+)(InvoicesDataTable);

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_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+  addInvoiceTableQueries: (_queries) =>
+    dispatch({
+      type: t.INVOICES_TABLE_QUERIES_ADD,
+      _queries,
+    }),
+});
+
+export default connect(null, mapDipatchToProps);

client/src/containers/Sales/Invoice/withInvoiceDetail.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { getInvoiecsByIdFactory } from 'store/Invoice/invoices.selector';
+
+export default () => {
+  const getInvoiceById = getInvoiecsByIdFactory();
+  
+  const mapStateToProps = (state, props) => ({
+    invoice: getInvoiceById(state, props),
+  });
+  return connect(mapStateToProps);
+};

client/src/containers/Sales/Invoice/withInvoices.js

@@ -0,0 +1,28 @@
+import { connect } from 'react-redux';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+import {
+  getInvoiceCurrentPageFactory,
+  getInvoicePaginationMetaFactory,
+  getInvoiceTableQueryFactory,
+} from 'store/Invoice/invoices.selector';
+
+export default (mapState) => {
+  const getInvoicesItems = getInvoiceCurrentPageFactory();
+  const getInvoicesPaginationMeta = getInvoicePaginationMetaFactory();
+  const getInvoiceTableQuery = getInvoiceTableQueryFactory();
+
+  const mapStateToProps = (state, props) => {
+    const query = getInvoiceTableQuery(state, props);
+
+    const mapped = {
+      invoicesCurrentPage: getInvoicesItems(state, props, query),
+      invoicesViews: getResourceViews(state, props, 'sales_invoices'),
+      invoicesItems: state.sales_invoices.items,
+      invoicesTableQuery: query,
+      invoicesPageination: getInvoicesPaginationMeta(state, props, query),
+      invoicesLoading: state.sales_invoices.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

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);

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>
+  );
+}

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);

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';

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);

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);

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);

client/src/containers/Sales/Receipt/ReceiptForm.js

@@ -0,0 +1,340 @@
+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 withReceipActions from './withReceipActions';
+import withReceiptDetail from './withReceiptDetail';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withMediaActions from 'containers/Media/withMediaActions';
+
+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,
+  requestEditReceipt,
+
+  //#withReceiptDetail
+  receipt,
+
+  //#withDashboard
+  changePageTitle,
+  changePageSubtitle,
+
+  //#own Props
+  receiptId,
+  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 (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_' })),
+    email_send_to: Yup.string().email().nullable(),
+    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 saveInvokeSubmit = useCallback(
+    (payload) => {
+      onFormSubmit && onFormSubmit(payload);
+    },
+    [onFormSubmit],
+  );
+
+  const defaultReceipt = useMemo(
+    () => ({
+      index: 0,
+      item_id: null,
+      rate: null,
+      discount: 0,
+      quantity: null,
+      description: '',
+    }),
+    [],
+  );
+
+  const defaultInitialValues = useMemo(
+    () => ({
+      customer_id: '',
+      deposit_account_id: '',
+      receipt_date: moment(new Date()).format('YYYY-MM-DD'),
+      email_send_to: '',
+      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(
+    () => ({
+      ...(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),
+          }),
+    }),
+    [receipt, defaultInitialValues, defaultReceipt],
+  );
+
+  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.filter(
+        (item) => item.item_id && item.quantity,
+      );
+      const form = {
+        ...values,
+        entries,
+      };
+
+      const requestForm = { ...form };
+
+      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,
+            });
+            setSubmitting(false);
+            saveInvokeSubmit({ action: 'new', ...payload });
+            resetForm();
+          })
+          .catch((errors) => {
+            setSubmitting(false);
+          });
+      }
+    },
+  });
+
+  const handleDeleteFile = useCallback(
+    (_deletedFiles) => {
+      _deletedFiles.forEach((deletedFile) => {
+        if (deletedFile.uploaded && 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 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'}
+        />
+      </form>
+      <ReceiptFormFooter
+        formik={formik}
+        onSubmitClick={handleSubmitClick}
+        receipt={receipt}
+        onCancelForm={handleCancelClick}
+      />
+    </div>
+  );
+}
+
+export default compose(
+  withReceipActions,
+  withDashboardActions,
+  withMediaActions,
+  withReceiptDetail(),
+)(ReceiptForm);

client/src/containers/Sales/Receipt/ReceiptFormFooter.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 ReceiptFormFooter({
+  formik: { isSubmitting },
+  onSubmitClick,
+  onCancelClick,
+  receipt,
+}) {
+  return (
+    <div className={'estimate-form__floating-footer'}>
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        type="submit"
+        onClick={() => {
+          onSubmitClick({ redirect: true });
+        }}
+      >
+        {receipt && receipt.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>
+  );
+}

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.email_send_to && touched.email_send_to && Intent.DANGER}
+        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+      >
+        <InputGroup
+          intent={
+            errors.email_send_to && touched.email_send_to && Intent.DANGER
+          }
+          minimal={true}
+          {...getFieldProps('send_to_email')}
+        />
+      </FormGroup>
+    </div>
+  );
+}
+
+export default compose(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+  withAccounts(({ accountsList }) => ({
+    accountsList,
+  })),
+)(ReceiptFormHeader);

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);

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);

client/src/containers/Sales/Receipt/Receipts.js

@@ -0,0 +1,82 @@
+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 withReceipActions from './withReceipActions';
+
+import { compose } from 'utils';
+
+function Receipts({
+  //#withwithAccountsActions
+  requestFetchAccounts,
+
+  //#withCustomersActions
+  requestFetchCustomers,
+
+  //#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(),
+  );
+
+  const fetchCustomers = useQuery('customers-table', () =>
+    requestFetchCustomers({}),
+  );
+
+  // Handle fetch Items data table or list
+  const fetchItems = useQuery('items-table', () => requestFetchItems({}));
+
+  const handleFormSubmit = useCallback(
+    (payload) => {
+      payload.redirect && history.push('/receipts');
+    },
+    [history],
+  );
+
+  const handleCancel = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
+  return (
+    <DashboardInsider
+      loading={
+        fetchCustomers.isFetching ||
+        fetchItems.isFetching ||
+        fetchAccounts.isFetching||
+        fetchReceipt.isFetching
+      }
+      name={'receipt-form'}
+    >
+      <ReceiptFrom
+        onFormSubmit={handleFormSubmit}
+        receiptId={id}
+        onCancelForm={handleCancel}
+      />
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withReceipActions,
+  withCustomersActions,
+  withItemsActions,
+  withAccountsActions,
+)(Receipts);

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: 'customer.display_name',
+        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);

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 })),
+  requestEditReceipt: (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.RECEIPTS_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+
+  addReceiptsTableQueries: (queries) =>
+    dispatch({
+      type: t.RECEIPTS_TABLE_QUERIES_ADD,
+      queries,
+    }),
+});
+
+export default connect(null, mapDispatchToProps);

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);
+};

client/src/containers/Sales/Receipt/withReceipts.js

@@ -0,0 +1,29 @@
+import { connect } from 'react-redux';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+import {
+  getReceiptCurrentPageFactory,
+  getReceiptsTableQueryFactory,
+  getReceiptsPaginationMetaFactory,
+} from 'store/receipt/receipt.selector';
+
+export default (mapState) => {
+  const getReceiptsItems = getReceiptCurrentPageFactory();
+  const getReceiptPaginationMeta = getReceiptsPaginationMetaFactory();
+  const getReceiptsTableQuery = getReceiptsTableQueryFactory();
+
+  const mapStateToProps = (state, props) => {
+    const tableQuery = getReceiptsTableQuery(state, props);
+
+    const mapped = {
+      receiptsCurrentPage: getReceiptsItems(state, props, tableQuery),
+      receiptview:getResourceViews(state, props, 'sales_receipts'),
+      receiptItems: state.sales_receipts.items,
+      receiptTableQuery: tableQuery,
+      receiptsPagination: getReceiptPaginationMeta(state, props, tableQuery),
+      receiptsLoading: state.sales_receipts.loading,
+    };
+
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

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);
+

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);
+};