re-structure to monorepo.

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.tsx

@@ -0,0 +1,59 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+
+import { DashboardViewsTabs } from '@/components';
+import { compose, transfromViewsToTabs } from '@/utils';
+import { useInvoicesListContext } from './InvoicesListProvider';
+
+import withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
+
+/**
+ * Invoices views tabs.
+ */
+function InvoiceViewTabs({
+  // #withInvoiceActions
+  setInvoicesTableState,
+
+  // #withInvoices
+  invoicesCurrentView,
+}) {
+  const history = useHistory();
+
+  // Invoices list context.
+  const { invoicesViews } = useInvoicesListContext();
+
+  const tabs = transfromViewsToTabs(invoicesViews);
+
+  // Handle tab change.
+  const handleTabsChange = (viewSlug) => {
+    setInvoicesTableState({ viewSlug });
+  };
+  // Handle click a new view tab.
+  const handleClickNewView = () => {
+    history.push('/custom_views/invoices/new');
+  };
+
+  return (
+    <Navbar className={'navbar--dashboard-views'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={invoicesCurrentView}
+          resourceName={'invoices'}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withInvoiceActions,
+  withInvoices(({ invoicesTableState }) => ({
+    invoicesCurrentView: invoicesTableState.viewSlug,
+  })),
+)(InvoiceViewTabs);

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx

@@ -0,0 +1,160 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Button,
+  Classes,
+  NavbarDivider,
+  NavbarGroup,
+  Intent,
+  Alignment,
+} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import {
+  Icon,
+  FormattedMessage as T,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+  DashboardRowsHeightButton,
+  DashboardActionsBar,
+} from '@/components';
+
+import { Can, If, DashboardActionViewsList } from '@/components';
+import { SaleInvoiceAction, AbilitySubject } from '@/constants/abilityOption';
+
+import { useRefreshInvoices } from '@/hooks/query/invoices';
+import { useInvoicesListContext } from './InvoicesListProvider';
+
+import withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import { compose } from '@/utils';
+
+/**
+ * Invoices table actions bar.
+ */
+function InvoiceActionsBar({
+  // #withInvoiceActions
+  setInvoicesTableState,
+
+  // #withInvoices
+  invoicesFilterRoles,
+
+  // #withSettings
+  invoicesTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  const history = useHistory();
+
+  // Sale invoices list context.
+  const { invoicesViews, invoicesFields } = useInvoicesListContext();
+
+  // Handle new invoice button click.
+  const handleClickNewInvoice = () => {
+    history.push('/invoices/new');
+  };
+
+  // Invoices refresh action.
+  const { refresh } = useRefreshInvoices();
+
+  // Handle views tab change.
+  const handleTabChange = (view) => {
+    setInvoicesTableState({ viewSlug: view ? view.slug : null });
+  };
+
+  // Handle click a refresh sale invoices
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('salesInvoices', 'tableSize', size);
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          allMenuItem={true}
+          resourceName={'invoices'}
+          views={invoicesViews}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'plus'} />}
+            text={<T id={'new_invoice'} />}
+            onClick={handleClickNewInvoice}
+          />
+        </Can>
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: invoicesFilterRoles,
+            defaultFieldKey: 'invoice_no',
+            fields: invoicesFields,
+            onFilterChange: (filterConditions) => {
+              setInvoicesTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton conditionsCount={invoicesFilterRoles.length} />
+        </AdvancedFilterPopover>
+
+        <NavbarDivider />
+
+        <If condition={false}>
+          <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'} />}
+        />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={invoicesTableSize}
+          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(
+  withInvoiceActions,
+  withSettingsActions,
+  withInvoices(({ invoicesTableState }) => ({
+    invoicesFilterRoles: invoicesTableState.filterRoles,
+  })),
+  withSettings(({ invoiceSettings }) => ({
+    invoicesTableSize: invoiceSettings?.tableSize,
+  })),
+)(InvoiceActionsBar);

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx

@@ -0,0 +1,175 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import InvoicesEmptyStatus from './InvoicesEmptyStatus';
+
+import { TABLES } from '@/constants/tables';
+import {
+  DataTable,
+  DashboardContentTable,
+  TableSkeletonHeader,
+  TableSkeletonRows,
+} from '@/components';
+
+import withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+import { useMemorizedColumnsWidths } from '@/hooks';
+import { useInvoicesTableColumns, ActionsMenu } from './components';
+import { useInvoicesListContext } from './InvoicesListProvider';
+
+import { compose } from '@/utils';
+
+/**
+ * Invoices datatable.
+ */
+function InvoicesDataTable({
+  // #withInvoicesActions
+  setInvoicesTableState,
+
+  // #withInvoices
+  invoicesTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogAction
+  openDialog,
+
+  // #withSettings
+  invoicesTableSize,
+}) {
+  const history = useHistory();
+
+  // Invoices list context.
+  const {
+    invoices,
+    pagination,
+    isEmptyStatus,
+    isInvoicesLoading,
+    isInvoicesFetching,
+  } = useInvoicesListContext();
+
+  // Invoices table columns.
+  const columns = useInvoicesTableColumns();
+
+  // Handle delete sale invoice.
+  const handleDeleteInvoice = ({ id }) => {
+    openAlert('invoice-delete', { invoiceId: id });
+  };
+
+  // Handle cancel/confirm invoice deliver.
+  const handleDeliverInvoice = ({ id }) => {
+    openAlert('invoice-deliver', { invoiceId: id });
+  };
+
+  // Handle edit sale invoice.
+  const handleEditInvoice = (invoice) => {
+    history.push(`/invoices/${invoice.id}/edit`);
+  };
+
+  // Handle convert to credit note.
+  const handleConvertToCreitNote = ({ id }) => {
+    history.push(`/credit-notes/new?from_invoice_id=${id}`, { invoiceId: id });
+  };
+
+  // handle quick payment receive.
+  const handleQuickPaymentReceive = ({ id }) => {
+    openDialog('quick-payment-receive', { invoiceId: id });
+  };
+
+  // Handle view detail invoice.
+  const handleViewDetailInvoice = ({ id }) => {
+    openDrawer('invoice-detail-drawer', { invoiceId: id });
+  };
+
+  // Handle print invoices.
+  const handlePrintInvoice = ({ id }) => {
+    openDialog('invoice-pdf-preview', { invoiceId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('invoice-detail-drawer', { invoiceId: cell.row.original.id });
+  };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.INVOICES);
+
+  // Handles fetch data once the table state change.
+  const handleDataTableFetchData = useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setInvoicesTableState({
+        pageSize,
+        pageIndex,
+        sortBy,
+      });
+    },
+    [setInvoicesTableState],
+  );
+
+  // Display invoice empty status instead of the table.
+  if (isEmptyStatus) {
+    return <InvoicesEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={invoices}
+        loading={isInvoicesLoading}
+        headerLoading={isInvoicesLoading}
+        progressBarLoading={isInvoicesFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        size={invoicesTableSize}
+        payload={{
+          onDelete: handleDeleteInvoice,
+          onDeliver: handleDeliverInvoice,
+          onEdit: handleEditInvoice,
+          onQuick: handleQuickPaymentReceive,
+          onViewDetails: handleViewDetailInvoice,
+          onPrint: handlePrintInvoice,
+          onConvert: handleConvertToCreitNote,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withInvoiceActions,
+  withAlertsActions,
+  withDrawerActions,
+  withDialogActions,
+  withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
+  withSettings(({ invoiceSettings }) => ({
+    invoicesTableSize: invoiceSettings?.tableSize,
+  })),
+)(InvoicesDataTable);

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.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, Can, FormattedMessage as T } from '@/components';
+import { SaleInvoiceAction, AbilitySubject } from '@/constants/abilityOption';
+
+export default function EstimatesEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'the_organization_doesn_t_receive_money_yet'} />}
+      description={
+        <p>
+          <T id={'invoices_empty_status_description'} />
+        </p>
+      }
+      action={
+        <>
+          <Can I={SaleInvoiceAction.Create} a={AbilitySubject.Invoice}>
+            <Button
+              intent={Intent.PRIMARY}
+              large={true}
+              onClick={() => {
+                history.push('/invoices/new');
+              }}
+            >
+              <T id={'new_sale_invoice'} />
+            </Button>
+            <Button intent={Intent.NONE} large={true}>
+              <T id={'learn_more'} />
+            </Button>
+          </Can>
+        </>
+      }
+    />
+  );
+}

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.tsx

@@ -0,0 +1,60 @@
+// @ts-nocheck
+import React from 'react';
+
+import '@/style/pages/SaleInvoice/List.scss';
+
+import { DashboardPageContent } from '@/components';
+import { InvoicesListProvider } from './InvoicesListProvider';
+
+import InvoiceViewTabs from './InvoiceViewTabs';
+import InvoicesDataTable from './InvoicesDataTable';
+import InvoicesActionsBar from './InvoicesActionsBar';
+
+import withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+
+import { transformTableStateToQuery, compose } from '@/utils';
+
+/**
+ * Sale invoices list.
+ */
+function InvoicesList({
+  // #withInvoice
+  invoicesTableState,
+  invoicesTableStateChanged,
+
+  // #withInvoicesActions
+  resetInvoicesTableState,
+}) {
+  // Resets the invoices table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      resetInvoicesTableState();
+    },
+    [resetInvoicesTableState],
+  );
+
+  return (
+    <InvoicesListProvider
+      query={transformTableStateToQuery(invoicesTableState)}
+      tableStateChanged={invoicesTableStateChanged}
+    >
+      <InvoicesActionsBar />
+
+      <DashboardPageContent>
+        <InvoiceViewTabs />
+        <InvoicesDataTable />
+      </DashboardPageContent>
+    </InvoicesListProvider>
+  );
+}
+
+export default compose(
+  withInvoices(({ invoicesTableState, invoicesTableStateChanged }) => ({
+    invoicesTableState,
+    invoicesTableStateChanged,
+  })),
+  withInvoiceActions,
+  withAlertsActions,
+)(InvoicesList);

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import { DashboardInsider } from '@/components/Dashboard';
+import { useResourceViews, useResourceMeta, useInvoices } from '@/hooks/query';
+import { getFieldsFromResourceMeta } from '@/utils';
+
+const InvoicesListContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function InvoicesListProvider({ query, tableStateChanged, ...props }) {
+  // Fetch accounts resource views and fields.
+  const { data: invoicesViews, isLoading: isViewsLoading } =
+    useResourceViews('sale_invoices');
+
+  // Fetch the accounts resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('sale_invoices');
+
+  // Fetch accounts list according to the given custom view id.
+  const {
+    data: { invoices, pagination, filterMeta },
+    isFetching: isInvoicesFetching,
+    isLoading: isInvoicesLoading,
+  } = useInvoices(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(invoices) && !tableStateChanged && !isInvoicesLoading;
+
+  // Provider payload.
+  const provider = {
+    invoices,
+    pagination,
+
+    invoicesFields: getFieldsFromResourceMeta(resourceMeta.fields),
+    invoicesViews,
+
+    isInvoicesLoading,
+    isInvoicesFetching,
+    isResourceFetching,
+    isResourceLoading,
+    isViewsLoading,
+
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isViewsLoading || isResourceLoading}
+      name={'sales-invoices-list'}
+    >
+      <InvoicesListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useInvoicesListContext = () => React.useContext(InvoicesListContext);
+
+export { InvoicesListProvider, useInvoicesListContext };

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx

@@ -0,0 +1,266 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Intent,
+  Tag,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  ProgressBar,
+} from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { CLASSES } from '@/constants/classes';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  AppToaster,
+  Choose,
+  If,
+  Icon,
+  Can,
+} from '@/components';
+import { formattedAmount, safeCallback, calculateStatus } from '@/utils';
+import {
+  SaleInvoiceAction,
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '@/constants/abilityOption';
+
+export function InvoiceStatus({ invoice }) {
+  return (
+    <Choose>
+      <Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
+        <span className={'fully-paid-icon'}>
+          <Icon icon="small-tick" iconSize={18} />
+        </span>
+        <span class="fully-paid-text">
+          <T id={'paid'} />
+        </span>
+      </Choose.When>
+
+      <Choose.When condition={invoice.is_delivered}>
+        <Choose>
+          <Choose.When condition={invoice.is_overdue}>
+            <span className={'overdue-status'}>
+              {intl.get('overdue_by', { overdue: invoice.overdue_days })}
+            </span>
+          </Choose.When>
+          <Choose.Otherwise>
+            <span className={'due-status'}>
+              {intl.get('due_in', { due: invoice.remaining_days })}
+            </span>
+          </Choose.Otherwise>
+        </Choose>
+
+        <If condition={invoice.is_partially_paid}>
+          <span class="partial-paid">
+            {intl.get('day_partially_paid', {
+              due: formattedAmount(invoice.due_amount, invoice.currency_code),
+            })}
+          </span>
+          <ProgressBar
+            animate={false}
+            stripes={false}
+            intent={Intent.PRIMARY}
+            value={calculateStatus(invoice.balance_amount, invoice.balance)}
+          />
+        </If>
+      </Choose.When>
+      <Choose.Otherwise>
+        <Tag minimal={true} round={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+export const statusAccessor = (row) => {
+  return (
+    <div className={'status-accessor'}>
+      <InvoiceStatus invoice={row} />
+    </div>
+  );
+};
+
+export const handleDeleteErrors = (errors) => {
+  if (
+    errors.find(
+      (error) => error.type === 'INVOICE_HAS_ASSOCIATED_PAYMENT_ENTRIES',
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get('the_invoice_cannot_be_deleted'),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find(
+      (error) => error.type === 'INVOICE_AMOUNT_SMALLER_THAN_PAYMENT_AMOUNT',
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get('the_payment_amount_that_received'),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find(
+      (error) => error.type === 'SALE_INVOICE_HAS_APPLIED_TO_CREDIT_NOTES',
+    )
+  ) {
+    AppToaster.show({
+      message: intl.get(
+        'invoices.error.you_couldn_t_delete_sale_invoice_that_has_reconciled',
+      ),
+      intent: Intent.DANGER,
+    });
+  }
+};
+
+export function ActionsMenu({
+  payload: {
+    onEdit,
+    onDeliver,
+    onDelete,
+    onConvert,
+    onQuick,
+    onViewDetails,
+    onPrint,
+  },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
+        <MenuDivider />
+        <MenuItem
+          icon={<Icon icon="pen-18" />}
+          text={intl.get('edit_invoice')}
+          onClick={safeCallback(onEdit, original)}
+        />
+        <MenuItem
+          icon={<Icon icon="convert_to" />}
+          text={intl.get('invoice.convert_to_credit_note')}
+          onClick={safeCallback(onConvert, original)}
+        />
+
+        <If condition={!original.is_delivered}>
+          <MenuItem
+            icon={<Icon icon="send" iconSize={16} />}
+            text={intl.get('mark_as_delivered')}
+            onClick={safeCallback(onDeliver, original)}
+          />
+        </If>
+      </Can>
+      <Can I={PaymentReceiveAction.Create} a={AbilitySubject.PaymentReceive}>
+        <If condition={original.is_delivered && !original.is_fully_paid}>
+          <MenuItem
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            text={intl.get('add_payment')}
+            onClick={safeCallback(onQuick, original)}
+          />
+        </If>
+      </Can>
+      <Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
+        <MenuItem
+          icon={<Icon icon={'print-16'} iconSize={16} />}
+          text={intl.get('print')}
+          onClick={safeCallback(onPrint, original)}
+        />
+      </Can>
+      <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
+        <MenuDivider />
+        <MenuItem
+          text={intl.get('delete_invoice')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Can>
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve invoices table columns.
+ */
+export function useInvoicesTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'invoice_date',
+        Header: intl.get('invoice_date'),
+        accessor: 'invoice_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'invoice_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer_name'),
+        accessor: 'customer.display_name',
+        width: 180,
+        className: 'customer_id',
+        clickable: true,
+        textOverview: true,
+      },
+
+      {
+        id: 'invoice_no',
+        Header: intl.get('invoice_no__'),
+        accessor: 'invoice_no',
+        width: 100,
+        className: 'invoice_no',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('balance'),
+        accessor: 'formatted_amount',
+        width: 120,
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        accessor: (row) => statusAccessor(row),
+        width: 160,
+        className: 'status',
+        clickable: true,
+      },
+      {
+        id: 'due_date',
+        Header: intl.get('due_date'),
+        accessor: 'due_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'due_date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.tsx

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  setInvoicesTableState,
+  resetInvoicesTableState
+} from '@/store/Invoice/invoices.actions';
+
+const mapDipatchToProps = (dispatch) => ({
+  setInvoicesTableState: (queries) => dispatch(setInvoicesTableState(queries)),
+  resetInvoicesTableState: () => dispatch(resetInvoicesTableState()),
+});
+
+export default connect(null, mapDipatchToProps);

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { connect } from 'react-redux';
+import {
+  getInvoicesTableStateFactory,
+  isInvoicesTableStateChangedFactory,
+} from '@/store/Invoice/invoices.selector';
+
+export default (mapState) => {
+  const getInvoicesTableState = getInvoicesTableStateFactory();
+  const isInvoicesTableStateChanged = isInvoicesTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      invoicesTableState: getInvoicesTableState(state, props),
+      invoicesTableStateChanged: isInvoicesTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};