re-structure to monorepo.

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimateUniversalSearch.tsx

@@ -0,0 +1,120 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem } from '@blueprintjs/core';
+
+import { Choose, T, Icon } from '@/components';
+import { RESOURCES_TYPES } from '@/constants/resourcesTypes';
+import { AbilitySubject, SaleEstimateAction } from '@/constants/abilityOption';
+
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+/**
+ * Estimate universal search item select action.
+ */
+function EstimateUniversalSearchSelectComponent({
+  // #ownProps
+  resourceType,
+  resourceId,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.ESTIMATE) {
+    openDrawer('estimate-detail-drawer', { estimateId: resourceId });
+  }
+  return null;
+}
+
+export const EstimateUniversalSearchSelect = withDrawerActions(
+  EstimateUniversalSearchSelectComponent,
+);
+
+/**
+ * Status accessor.
+ */
+export const EstimateStatus = ({ estimate }) => (
+  <Choose>
+    <Choose.When condition={estimate.is_delivered && estimate.is_approved}>
+      <span class="approved">
+        <T id={'approved'} />
+      </span>
+    </Choose.When>
+    <Choose.When condition={estimate.is_delivered && estimate.is_rejected}>
+      <span class="reject">
+        <T id={'rejected'} />
+      </span>
+    </Choose.When>
+    <Choose.When
+      condition={
+        estimate.is_delivered && !estimate.is_rejected && !estimate.is_approved
+      }
+    >
+      <span class="delivered">
+        <T id={'delivered'} />
+      </span>
+    </Choose.When>
+    <Choose.Otherwise>
+      <span class="draft">
+        <T id={'draft'} />
+      </span>
+    </Choose.Otherwise>
+  </Choose>
+);
+
+/**
+ * Estimate universal search item.
+ */
+export function EstimateUniversalSearchItem(
+  item,
+  { handleClick, modifiers, query },
+) {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      text={
+        <div>
+          <div>{item.text}</div>
+          <span class="bp3-text-muted">
+            {item.reference.estimate_number}{' '}
+            <Icon icon={'caret-right-16'} iconSize={16} />
+            {item.reference.formatted_estimate_date}
+          </span>
+        </div>
+      }
+      label={
+        <>
+          <div class="amount">{item.reference.formatted_amount}</div>
+          <EstimateStatus estimate={item.reference} />
+        </>
+      }
+      onClick={handleClick}
+      className={'universal-search__item--estimate'}
+    />
+  );
+}
+
+/**
+ * Transformes the estimates to search items.
+ */
+const transformEstimatesToSearch = (estimate) => ({
+  id: estimate.id,
+  text: estimate.customer.display_name,
+  label: estimate.formatted_balance,
+  reference: estimate,
+});
+
+/**
+ * Estimate resource universal search bind configure.
+ */
+export const universalSearchEstimateBind = () => ({
+  resourceType: RESOURCES_TYPES.ESTIMATE,
+  optionItemLabel: intl.get('estimates'),
+  selectItemAction: EstimateUniversalSearchSelect,
+  itemRenderer: EstimateUniversalSearchItem,
+  itemSelect: transformEstimatesToSearch,
+  permission: {
+    ability: SaleEstimateAction.View,
+    subject: AbilitySubject.Estimate,
+  },
+});

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx

@@ -0,0 +1,167 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+
+import {
+  FormattedMessage as T,
+  AdvancedFilterPopover,
+  If,
+  Icon,
+  Can,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+  DashboardRowsHeightButton,
+  DashboardActionsBar,
+} from '@/components';
+
+import withEstimates from './withEstimates';
+import withEstimatesActions from './withEstimatesActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+
+import { useEstimatesListContext } from './EstimatesListProvider';
+import { useRefreshEstimates } from '@/hooks/query/estimates';
+import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
+import { compose } from '@/utils';
+
+/**
+ * Estimates list actions bar.
+ */
+function EstimateActionsBar({
+  // #withEstimateActions
+  setEstimatesTableState,
+
+  // #withEstimates
+  estimatesFilterRoles,
+
+  // #withSettings
+  estimatesTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  const history = useHistory();
+
+  // Estimates list context.
+  const { estimatesViews, fields } = useEstimatesListContext();
+
+  // Handle click a new sale estimate.
+  const onClickNewEstimate = () => {
+    history.push('/estimates/new');
+  };
+  // Estimates refresh action.
+  const { refresh } = useRefreshEstimates();
+
+  // Handle tab change.
+  const handleTabChange = (view) => {
+    setEstimatesTableState({
+      viewSlug: view ? view.slug : null,
+    });
+  };
+
+  // Handle click a refresh sale estimates
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('salesEstimates', 'tableSize', size);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'estimates'}
+          allMenuItem={true}
+          allMenuItemText={<T id={'all'} />}
+          views={estimatesViews}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Can I={SaleEstimateAction.Create} a={AbilitySubject.Estimate}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_estimate'} />}
+            onClick={onClickNewEstimate}
+          />
+        </Can>
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: estimatesFilterRoles,
+            defaultFieldKey: 'estimate_number',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setEstimatesTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={estimatesFilterRoles.length}
+          />
+        </AdvancedFilterPopover>
+
+        <If condition={false}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            // onClick={handleBulkDelete}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'print-16'} iconSize={'16'} />}
+          text={<T id={'print'} />}
+        />
+
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-import-16'} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
+          text={<T id={'export'} />}
+        />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={estimatesTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
+      </NavbarGroup>
+
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withEstimatesActions,
+  withSettingsActions,
+  withEstimates(({ estimatesTableState }) => ({
+    estimatesFilterRoles: estimatesTableState.filterRoles,
+  })),
+  withSettings(({ estimatesSettings }) => ({
+    estimatesTableSize: estimatesSettings?.tableSize,
+  })),
+)(EstimateActionsBar);

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.tsx

@@ -0,0 +1,169 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import EstimatesEmptyStatus from './EstimatesEmptyStatus';
+
+import withEstimatesActions from './withEstimatesActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+import { TABLES } from '@/constants/tables';
+import {
+  DataTable,
+  DashboardContentTable,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+} from '@/components';
+import { ActionsMenu, useEstiamtesTableColumns } from './components';
+import { useEstimatesListContext } from './EstimatesListProvider';
+import { useMemorizedColumnsWidths } from '@/hooks';
+import { compose } from '@/utils';
+
+/**
+ * Estimates datatable.
+ */
+function EstimatesDataTable({
+  // #withEstimatesActions
+  setEstimatesTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogAction
+  openDialog,
+
+  // #withSettings
+  estimatesTableSize,
+}) {
+  const history = useHistory();
+
+  // Estimates list context.
+  const {
+    estimates,
+    pagination,
+    isEmptyStatus,
+    isEstimatesLoading,
+    isEstimatesFetching,
+  } = useEstimatesListContext();
+
+  // Estimates table columns.
+  const columns = useEstiamtesTableColumns();
+
+  // Handle estimate edit action.
+  const handleEditEstimate = (estimate) => {
+    history.push(`/estimates/${estimate.id}/edit`);
+  };
+  // Handle estimate delete action.
+  const handleDeleteEstimate = ({ id }) => {
+    openAlert('estimate-delete', { estimateId: id });
+  };
+
+  // Handle cancel/confirm estimate deliver.
+  const handleDeliverEstimate = ({ id }) => {
+    openAlert('estimate-deliver', { estimateId: id });
+  };
+
+  // Handle cancel/confirm estimate approve.
+  const handleApproveEstimate = ({ id }) => {
+    openAlert('estimate-Approve', { estimateId: id });
+  };
+
+  // Handle cancel/confirm estimate reject.
+  const handleRejectEstimate = ({ id }) => {
+    openAlert('estimate-reject', { estimateId: id });
+  };
+
+  // Handle convent to invoice.
+  const handleConvertToInvoice = ({ id }) => {
+    history.push(`/invoices/new?from_estimate_id=${id}`, { action: id });
+  };
+
+  // Handle view detail estimate.
+  const handleViewDetailEstimate = ({ id }) => {
+    openDrawer('estimate-detail-drawer', { estimateId: id });
+  };
+
+  // Handle print estimate.
+  const handlePrintEstimate = ({ id }) => {
+    openDialog('estimate-pdf-preview', { estimateId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('estimate-detail-drawer', { estimateId: cell.row.original.id });
+  };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.ESTIMATES);
+
+  // Handles fetch data.
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      setEstimatesTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setEstimatesTableState],
+  );
+
+  // Display empty status instead of the table.
+  if (isEmptyStatus) {
+    return <EstimatesEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={estimates}
+        loading={isEstimatesLoading}
+        headerLoading={isEstimatesLoading}
+        progressBarLoading={isEstimatesFetching}
+        onFetchData={handleFetchData}
+        noInitialFetch={true}
+        manualSortBy={true}
+        selectionColumn={true}
+        sticky={true}
+        pagination={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        size={estimatesTableSize}
+        payload={{
+          onApprove: handleApproveEstimate,
+          onEdit: handleEditEstimate,
+          onReject: handleRejectEstimate,
+          onDeliver: handleDeliverEstimate,
+          onDelete: handleDeleteEstimate,
+          onConvert: handleConvertToInvoice,
+          onViewDetails: handleViewDetailEstimate,
+          onPrint: handlePrintEstimate,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withEstimatesActions,
+  withAlertsActions,
+  withDrawerActions,
+  withDialogActions,
+  withSettings(({ estimatesSettings }) => ({
+    estimatesTableSize: estimatesSettings?.tableSize,
+  })),
+)(EstimatesDataTable);

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesEmptyStatus.tsx

@@ -0,0 +1,39 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from '@/components';
+import { Can, FormattedMessage as T } from '@/components';
+import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
+
+export default function EstimatesEmptyStatus() {
+  const history = useHistory();
+  return (
+    <EmptyStatus
+      title={<T id={'it_s_time_to_send_estimates_to_your_customers'} />}
+      description={
+        <p>
+          <T id={'estimate_is_used_to_create_bid_proposal_or_quote'} />
+        </p>
+      }
+      action={
+        <>
+          <Can I={SaleEstimateAction.Create} a={AbilitySubject.Estimate}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/estimates/new');
+              }}
+            >
+              <T id={'new_sale_estimate'} />
+            </Button>
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
+        </>
+      }
+    />
+  );
+}

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.tsx

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import React from 'react';
+import { DashboardContentTable, DashboardPageContent } from '@/components';
+
+import '@/style/pages/SaleEstimate/List.scss';
+
+import EstimatesActionsBar from './EstimatesActionsBar';
+import EstimatesViewTabs from './EstimatesViewTabs';
+import EstimatesDataTable from './EstimatesDataTable';
+
+import withEstimates from './withEstimates';
+import withEstimatesActions from './withEstimatesActions';
+
+import { EstimatesListProvider } from './EstimatesListProvider';
+import { compose, transformTableStateToQuery } from '@/utils';
+
+/**
+ * Sale estimates list page.
+ */
+function EstimatesList({
+  // #withEstimate
+  estimatesTableState,
+  estimatesTableStateChanged,
+
+  // #withEstimatesActions
+  resetEstimatesTableState,
+}) {
+  // Resets the estimates table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetEstimatesTableState();
+    },
+    [resetEstimatesTableState],
+  );
+
+  return (
+    <EstimatesListProvider
+      query={transformTableStateToQuery(estimatesTableState)}
+      tableStateChanged={estimatesTableStateChanged}
+    >
+      <EstimatesActionsBar />
+
+      <DashboardPageContent>
+        <EstimatesViewTabs />
+        <EstimatesDataTable />
+      </DashboardPageContent>
+    </EstimatesListProvider>
+  );
+}
+
+export default compose(
+  withEstimates(({ estimatesTableState, estimatesTableStateChanged }) => ({
+    estimatesTableState,
+    estimatesTableStateChanged,
+  })),
+  withEstimatesActions,
+)(EstimatesList);

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import { DashboardInsider } from '@/components/Dashboard';
+
+import { useResourceViews, useResourceMeta, useEstimates } from '@/hooks/query';
+import { getFieldsFromResourceMeta } from '@/utils';
+
+// Estimates list context.
+const EstimatesListContext = createContext();
+
+/**
+ * Sale estimates data provider.
+ */
+function EstimatesListProvider({ query, tableStateChanged, ...props }) {
+  // Fetches estimates resource views and fields.
+  const { data: estimatesViews, isLoading: isViewsLoading } =
+    useResourceViews('sale_estimates');
+
+  // Fetches the estimates resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('sale_estimates');
+
+  // Fetches estimates list according to the given custom view id.
+  const {
+    data: { estimates, pagination, filterMeta },
+    isLoading: isEstimatesLoading,
+    isFetching: isEstimatesFetching,
+  } = useEstimates(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    !isEstimatesLoading && !tableStateChanged && isEmpty(estimates);
+
+  // Provider payload.
+  const provider = {
+    estimates,
+    pagination,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    estimatesViews,
+
+    isResourceLoading,
+    isResourceFetching,
+
+    isEstimatesLoading,
+    isEstimatesFetching,
+    isViewsLoading,
+
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'sale_estimate'}
+    >
+      <EstimatesListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useEstimatesListContext = () => React.useContext(EstimatesListContext);
+
+export { EstimatesListProvider, useEstimatesListContext };

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.tsx

@@ -0,0 +1,53 @@
+// @ts-nocheck
+import React from 'react';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { DashboardViewsTabs } from '@/components';
+
+import withEstimatesActions from './withEstimatesActions';
+import withEstimates from './withEstimates';
+
+import { useEstimatesListContext } from './EstimatesListProvider';
+import { compose, transfromViewsToTabs } from '@/utils';
+
+/**
+ * Estimates views tabs.
+ */
+function EstimateViewTabs({
+  // #withEstimatesActions
+  setEstimatesTableState,
+
+  // #withEstimates
+  estimatesCurrentView,
+}) {
+  // Estimates list context.
+  const { estimatesViews } = useEstimatesListContext();
+ 
+  // Estimates views.
+  const tabs = transfromViewsToTabs(estimatesViews);
+
+  // Handle tab change.
+  const handleTabsChange = (viewSlug) => {
+    setEstimatesTableState({ viewSlug: viewSlug || null });
+  };
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={estimatesCurrentView}
+          resourceName={'estimates'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withEstimatesActions,
+  withEstimates(({ estimatesTableState }) => ({
+    estimatesCurrentView: estimatesTableState.viewSlug
+  })),
+)(EstimateViewTabs);

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx

@@ -0,0 +1,226 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
+import { CLASSES } from '@/constants/classes';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Money,
+  Choose,
+  Icon,
+  If,
+  Can,
+} from '@/components';
+import { safeCallback } from '@/utils';
+
+/**
+ * Status accessor.
+ */
+export const statusAccessor = (row) => (
+  <Choose>
+    <Choose.When condition={row.is_approved}>
+      <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
+        <T id={'approved'} />
+      </Tag>
+    </Choose.When>
+    <Choose.When condition={row.is_rejected}>
+      <Tag minimal={true} intent={Intent.DANGER} round={true}>
+        <T id={'rejected'} />
+      </Tag>
+    </Choose.When>
+    <Choose.When condition={row.is_expired}>
+      <Tag minimal={true} intent={Intent.WARNING} round={true}>
+        <T id={'estimate.status.expired'} />
+      </Tag>
+    </Choose.When>
+    <Choose.When condition={row.is_delivered}>
+      <Tag minimal={true} intent={Intent.SUCCESS} round={true}>
+        <T id={'delivered'} />
+      </Tag>
+    </Choose.When>
+    <Choose.Otherwise>
+      <Tag minimal={true} round={true}>
+        <T id={'draft'} />
+      </Tag>
+    </Choose.Otherwise>
+  </Choose>
+);
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: {
+    onEdit,
+    onDeliver,
+    onReject,
+    onApprove,
+    onDelete,
+    onDrawer,
+    onConvert,
+    onViewDetails,
+    onPrint,
+  },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_estimate')}
+          onClick={safeCallback(onEdit, original)}
+        />
+        <If condition={!original.is_converted_to_invoice}>
+          <MenuItem
+            icon={<Icon icon="convert_to" />}
+            text={intl.get('convert_to_invoice')}
+            onClick={safeCallback(onConvert, original)}
+          />
+        </If>
+
+        <If condition={!original.is_delivered}>
+          <MenuItem
+            icon={<Icon icon={'check'} iconSize={18} />}
+            text={intl.get('mark_as_delivered')}
+            onClick={safeCallback(onDeliver, original)}
+          />
+        </If>
+        <Choose>
+          <Choose.When
+            condition={original.is_delivered && original.is_approved}
+          >
+            <MenuItem
+              icon={<Icon icon={'close-black'} />}
+              text={intl.get('mark_as_rejected')}
+              onClick={safeCallback(onReject, original)}
+            />
+          </Choose.When>
+          <Choose.When
+            condition={original.is_delivered && original.is_rejected}
+          >
+            <MenuItem
+              icon={<Icon icon={'check'} iconSize={18} />}
+              text={intl.get('mark_as_approved')}
+              onClick={safeCallback(onApprove, original)}
+            />
+          </Choose.When>
+          <Choose.When condition={original.is_delivered}>
+            <MenuItem
+              icon={<Icon icon={'check'} iconSize={18} />}
+              text={intl.get('mark_as_approved')}
+              onClick={safeCallback(onApprove, original)}
+            />
+            <MenuItem
+              icon={<Icon icon={'close-black'} />}
+              text={intl.get('mark_as_rejected')}
+              onClick={safeCallback(onReject, original)}
+            />
+          </Choose.When>
+        </Choose>
+      </Can>
+      <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
+        <MenuItem
+          icon={<Icon icon={'print-16'} iconSize={16} />}
+          text={intl.get('print')}
+          onClick={safeCallback(onPrint, original)}
+        />
+      </Can>
+      <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('delete_estimate')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+function AmountAccessor({ amount, currency_code }) {
+  return <Money amount={amount} currency={currency_code} />;
+}
+
+export function useEstiamtesTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'estimate_date',
+        Header: intl.get('estimate_date'),
+        accessor: 'estimate_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'estimate_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer_name'),
+        accessor: 'customer.display_name',
+        width: 140,
+        className: 'customer_id',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'expiration_date',
+        Header: intl.get('expiration_date'),
+        accessor: 'expiration_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'expiration_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'estimate_number',
+        Header: intl.get('estimate_number'),
+        accessor: (row) =>
+          row.estimate_number ? `${row.estimate_number}` : null,
+        width: 140,
+        className: 'estimate_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: AmountAccessor,
+        width: 140,
+        align: 'right',
+        clickable: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        accessor: (row) => statusAccessor(row),
+        width: 140,
+        className: 'status',
+        clickable: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference',
+        width: 90,
+        className: 'reference',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  getEstimatesTableStateFactory,
+  isEstimatesTableStateChangedFactory,
+} from '@/store/Estimate/estimates.selectors';
+
+export default (mapState) => {
+  const getEstimatesTableState = getEstimatesTableStateFactory();
+  const isEstimatesTableStateChanged = isEstimatesTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      estimatesTableState: getEstimatesTableState(state, props),
+      estimatesTableStateChanged: isEstimatesTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.tsx

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  setEstimatesTableState,
+  resetEstimatesTableState,
+} from '@/store/Estimate/estimates.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setEstimatesTableState: (state) => dispatch(setEstimatesTableState(state)),
+  resetEstimatesTableState: () => dispatch(resetEstimatesTableState()),
+});
+
+export default connect(null, mapDispatchToProps);