wip

2026-02-17 13:20:31 +00:00 · 2025-11-12 21:34:30 +02:00
parent a0bc9db9a6
commit 2383091b6e
29 changed files with 279 additions and 78 deletions
--- a/packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.tsx
+++ b/packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.tsx
@@ -8,6 +8,7 @@ import {
  Intent,
  Alignment,
 } from '@blueprintjs/core';
+import { isEmpty } from 'lodash';
 import { useHistory } from 'react-router-dom';
 import {
  Icon,
@@ -43,6 +44,7 @@ function ManualJournalActionsBar({

  // #withManualJournals
  manualJournalsFilterConditions,
+  manualJournalsSelectedRows,

  // #withSettings
  manualJournalsTableSize,
@@ -70,7 +72,7 @@ function ManualJournalActionsBar({
    history.push('/make-journal-entry');
  };
  // Handle delete button click.
-  const handleBulkDelete = () => {};
+  const handleBulkDelete = () => { };

  // Handle tab change.
  const handleTabChange = (view) => {
@@ -100,6 +102,22 @@ function ManualJournalActionsBar({
    downloadExportPdf({ resource: 'ManualJournal' });
  };

+  if (!isEmpty(manualJournalsSelectedRows)) {
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -184,8 +202,9 @@ export default compose(
  withDialogActions,
  withManualJournalsActions,
  withSettingsActions,
-  withManualJournals(({ manualJournalsTableState }) => ({
+  withManualJournals(({ manualJournalsTableState, manualJournalsSelectedRows }) => ({
    manualJournalsFilterConditions: manualJournalsTableState.filterRoles,
+    manualJournalsSelectedRows,
  })),
  withSettings(({ manualJournalsSettings }) => ({
    manualJournalsTableSize: manualJournalsSettings?.tableSize,
--- a/packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.tsx
+++ b/packages/webapp/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.tsx
@@ -33,6 +33,7 @@ import { DRAWERS } from '@/constants/drawers';
 function ManualJournalsDataTable({
  // #withManualJournalsActions
  setManualJournalsTableState,
+  setManualJournalsSelectedRows,

  // #withAlertsActions
  openAlert,
@@ -67,31 +68,26 @@ function ManualJournalsDataTable({
  const handlePublishJournal = ({ id }) => {
    openAlert('journal-publish', { manualJournalId: id });
  };
-
  // Handle the journal edit action.
  const handleEditJournal = ({ id }) => {
    history.push(`/manual-journals/${id}/edit`);
  };
-
  // Handle the journal delete action.
  const handleDeleteJournal = ({ id }) => {
    openAlert('journal-delete', { manualJournalId: id });
  };
-
  // Handle view detail journal.
  const handleViewDetailJournal = ({ id }) => {
    openDrawer(DRAWERS.JOURNAL_DETAILS, {
      manualJournalId: id,
    });
  };
-
  // Handle cell click.
  const handleCellClick = (cell, event) => {
    openDrawer(DRAWERS.JOURNAL_DETAILS, {
      manualJournalId: cell.row.original.id,
    });
  };
-
  // Local storage memorizing columns widths.
  const [initialColumnsWidths, , handleColumnResizing] =
    useMemorizedColumnsWidths(TABLES.MANUAL_JOURNALS);
@@ -107,6 +103,12 @@ function ManualJournalsDataTable({
    },
    [setManualJournalsTableState],
  );
+  // Handle selected rows change.
+  const handleSelectedRowsChange = (selectedFlatRows) => {
+    const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+    setManualJournalsSelectedRows(selectedIds);
+  };
+

  // Display manual journal empty status instead of the table.
  if (isEmptyStatus) {
@@ -130,6 +132,7 @@ function ManualJournalsDataTable({
        pagesCount={pagination.pagesCount}
        autoResetSortBy={false}
        autoResetPage={false}
+        onSelectedRowsChange={handleSelectedRowsChange}
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
        ContextMenu={ActionsMenu}
--- a/packages/webapp/src/containers/Accounting/JournalsLanding/withManualJournals.tsx
+++ b/packages/webapp/src/containers/Accounting/JournalsLanding/withManualJournals.tsx
@@ -1,6 +1,7 @@
 // @ts-nocheck
 import { connect } from 'react-redux';
 import {
+  getManualJournalsSelectedRowsFactory,
  getManualJournalsTableStateFactory,
  manualJournalTableStateChangedFactory,
 } from '@/store/manualJournals/manualJournals.selectors';
@@ -9,6 +10,7 @@ export default (mapState) => {
  const getJournalsTableQuery = getManualJournalsTableStateFactory();
  const manualJournalTableStateChanged =
    manualJournalTableStateChangedFactory();
+  const getSelectedRows = getManualJournalsSelectedRowsFactory();

  const mapStateToProps = (state, props) => {
    const mapped = {
@@ -17,6 +19,7 @@ export default (mapState) => {
        state,
        props,
      ),
+      manualJournalsSelectedRows: getSelectedRows(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/packages/webapp/src/containers/Accounting/JournalsLanding/withManualJournalsActions.tsx
+++ b/packages/webapp/src/containers/Accounting/JournalsLanding/withManualJournalsActions.tsx
@@ -2,11 +2,14 @@
 import { connect } from 'react-redux';
 import {
  setManualJournalsTableState,
+  setManualJournalsSelectedRows,
 } from '@/store/manualJournals/manualJournals.actions';

 const mapActionsToProps = (dispatch) => ({
  setManualJournalsTableState: (queries) =>
    dispatch(setManualJournalsTableState(queries)),
+  setManualJournalsSelectedRows: (selectedRows) =>
+    dispatch(setManualJournalsSelectedRows(selectedRows)),
 });

 export default connect(null, mapActionsToProps);
--- a/packages/webapp/src/containers/Accounts/AccountsActionsBar.tsx
+++ b/packages/webapp/src/containers/Accounts/AccountsActionsBar.tsx
@@ -126,6 +126,34 @@ function AccountsActionsBar({
    openDialog(DialogsName.AccountForm, {});
  };

+  if (!isEmpty(accountsSelectedRows)) {
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            text={<T id={'activate'} />}
+            onClick={handelBulkActivate}
+          />
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            text={<T id={'inactivate'} />}
+            onClick={handelBulkInactive}
+          />
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -162,29 +190,6 @@ function AccountsActionsBar({

        <NavbarDivider />

-        <If condition={!isEmpty(accountsSelectedRows)}>
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon="play-16" iconSize={16} />}
-            text={<T id={'activate'} />}
-            onClick={handelBulkActivate}
-          />
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon="pause-16" iconSize={16} />}
-            text={<T id={'inactivate'} />}
-            onClick={handelBulkInactive}
-          />
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon="trash-16" iconSize={16} />}
-            text={<T id={'delete'} />}
-            intent={Intent.DANGER}
-            onClick={handleBulkDelete}
-          />
-          <NavbarDivider />
-        </If>
-
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon="print-16" iconSize={16} />}
--- a/packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.tsx
@@ -36,6 +36,7 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';

 import { compose } from '@/utils';
+import { isEmpty } from 'lodash';

 /**
 * Expenses actions bar.
@@ -46,6 +47,7 @@ function ExpensesActionsBar({

  // #withExpenses
  expensesFilterConditions,
+  expensesSelectedRows,

  // #withSettings
  expensesTableSize,
@@ -73,7 +75,7 @@ function ExpensesActionsBar({
    history.push('/expenses/new');
  };
  // Handle delete button click.
-  const handleBulkDelete = () => {};
+  const handleBulkDelete = () => { };

  // Handles the tab chaning.
  const handleTabChange = (view) => {
@@ -102,6 +104,21 @@ function ExpensesActionsBar({
    downloadExportPdf({ resource: 'Expense' });
  };

+  if (!isEmpty(expensesSelectedRows)) {
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -185,8 +202,9 @@ export default compose(
  withDialogActions,
  withExpensesActions,
  withSettingsActions,
-  withExpenses(({ expensesTableState }) => ({
+  withExpenses(({ expensesTableState, expensesSelectedRows }) => ({
    expensesFilterConditions: expensesTableState.filterRoles,
+    expensesSelectedRows,
  })),
  withSettings(({ expenseSettings }) => ({
    expensesTableSize: expenseSettings?.tableSize,
--- a/packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.tsx
@@ -31,6 +31,7 @@ import { DRAWERS } from '@/constants/drawers';
 function ExpensesDataTable({
  // #withExpensesActions
  setExpensesTableState,
+  setExpensesSelectedRows,

  // #withDrawerActions
  openDrawer,
@@ -42,7 +43,7 @@ function ExpensesDataTable({
  expensesTableSize,

  // #withExpenses
-  expensesTableState
+  expensesTableState,
 }) {
  // Expenses list context.
  const {
@@ -102,6 +103,12 @@ function ExpensesDataTable({
    openDrawer(DRAWERS.EXPENSE_DETAILS, { expenseId: cell.row.original.id });
  };

+  // Handle selected rows change.
+  const handleSelectedRowsChange = (selectedFlatRows) => {
+    const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+    setExpensesSelectedRows(selectedIds);
+  };
+
  // Display empty status instead of the table.
  if (isEmptyStatus) {
    return <ExpensesEmptyStatus />;
@@ -132,6 +139,7 @@ function ExpensesDataTable({
        onCellClick={handleCellClick}
        initialColumnsWidths={initialColumnsWidths}
        onColumnResizing={handleColumnResizing}
+        onSelectedRowsChange={handleSelectedRowsChange}
        size={expensesTableSize}
        payload={{
          onPublish: handlePublishExpense,
@@ -152,5 +160,5 @@ export default compose(
  withSettings(({ expenseSettings }) => ({
    expensesTableSize: expenseSettings?.tableSize,
  })),
-  withExpenses(({ expensesTableState }) => ({ expensesTableState }))
+  withExpenses(({ expensesTableState }) => ({ expensesTableState })),
 )(ExpensesDataTable);
--- a/packages/webapp/src/containers/Expenses/ExpensesLanding/withExpenses.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpensesLanding/withExpenses.tsx
@@ -2,17 +2,20 @@
 import { connect } from 'react-redux';
 import {
  expensesTableStateChangedFactory,
+  getExpensesSelectedRowsFactory,
  getExpensesTableStateFactory,
 } from '@/store/expenses/expenses.selectors';

 export default (mapState) => {
  const getExpensesTableState = getExpensesTableStateFactory();
  const expensesTableStateChanged = expensesTableStateChangedFactory();
+  const getSelectedRows = getExpensesSelectedRowsFactory();

  const mapStateToProps = (state, props) => {
    const mapped = {
      expensesTableState: getExpensesTableState(state, props),
      expensesTableStateChanged: expensesTableStateChanged(state, props),
+      expensesSelectedRows: getSelectedRows(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/packages/webapp/src/containers/Expenses/ExpensesLanding/withExpensesActions.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpensesLanding/withExpensesActions.tsx
@@ -3,11 +3,14 @@ import { connect } from 'react-redux';
 import {
  setExpensesTableState,
  resetExpensesTableState,
+  setExpensesSelectedRows,
 } from '@/store/expenses/expenses.actions';

 const mapDispatchToProps = (dispatch) => ({
  setExpensesTableState: (state) => dispatch(setExpensesTableState(state)),
  resetExpensesTableState: (state) => dispatch(resetExpensesTableState(state)),
+  setExpensesSelectedRows: (selectedRows) =>
+    dispatch(setExpensesSelectedRows(selectedRows)),
 });

 export default connect(null, mapDispatchToProps);
--- a/packages/webapp/src/containers/Items/ItemsActionsBar.tsx
+++ b/packages/webapp/src/containers/Items/ItemsActionsBar.tsx
@@ -38,6 +38,7 @@ import withDialogActions from '../Dialog/withDialogActions';

 import { DialogsName } from '@/constants/dialogs';
 import { compose } from '@/utils';
+import { isEmpty } from 'lodash';

 /**
 * Items actions bar.
@@ -118,6 +119,22 @@ function ItemsActionsBar({
    downloadExportPdf({ resource: 'Item' });
  };

+  if (!isEmpty(itemsSelectedRows)) {
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -150,18 +167,8 @@ function ItemsActionsBar({
        >
          <DashboardFilterButton conditionsCount={itemsFilterRoles.length} />
        </AdvancedFilterPopover>
-
        <NavbarDivider />

-        <If condition={itemsSelectedRows.length}>
-          <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'} />}
--- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx
@@ -36,6 +36,7 @@ import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-

 import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
+import { isEmpty } from 'lodash';

 /**
 * Bills actions bar.
@@ -46,6 +47,7 @@ function BillActionsBar({

  // #withBills
  billsConditionsRoles,
+  billsSelectedRows,

  // #withSettings
  billsTableSize,
@@ -97,6 +99,26 @@ function BillActionsBar({
  const handlePrintBtnClick = () => {
    downloadExportPdf({ resource: 'Bill' });
  };
+  // Handle bulk delete.
+  const handleBulkDelete = () => {
+    openAlert('bills-bulk-delete', { billsIds: billsSelectedRows });
+  };
+
+  if (!isEmpty(billsSelectedRows)) {
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }

  return (
    <DashboardActionsBar>
@@ -180,8 +202,9 @@ function BillActionsBar({
 export default compose(
  withBillsActions,
  withSettingsActions,
-  withBills(({ billsTableState }) => ({
+  withBills(({ billsTableState, billsSelectedRows }) => ({
    billsConditionsRoles: billsTableState.filterRoles,
+    billsSelectedRows,
  })),
  withSettings(({ billsettings }) => ({
    billsTableSize: billsettings?.tableSize,
--- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx
@@ -32,6 +32,7 @@ import { DRAWERS } from '@/constants/drawers';
 function BillsDataTable({
  // #withBillsActions
  setBillsTableState,
+  setBillsSelectedRows,

  // #withBills
  billsTableState,
@@ -108,6 +109,12 @@ function BillsDataTable({
    openDrawer(DRAWERS.BILL_DETAILS, { billId: cell.row.original.id });
  };

+  // Handle selected rows change.
+  const handleSelectedRowsChange = (selectedFlatRows) => {
+    const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+    setBillsSelectedRows(selectedIds);
+  };
+
  // Local storage memorizing columns widths.
  const [initialColumnsWidths, , handleColumnResizing] =
    useMemorizedColumnsWidths(TABLES.BILLS);
@@ -138,6 +145,7 @@ function BillsDataTable({
        onCellClick={handleCellClick}
        initialColumnsWidths={initialColumnsWidths}
        onColumnResizing={handleColumnResizing}
+        onSelectedRowsChange={handleSelectedRowsChange}
        size={billsTableSize}
        payload={{
          onDelete: handleDeleteBill,
--- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/withBills.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/withBills.tsx
@@ -3,16 +3,19 @@ import { connect } from 'react-redux';
 import {
  getBillsTableStateFactory,
  billsTableStateChangedFactory,
+  getBillsSelectedRowsFactory,
 } from '@/store/Bills/bills.selectors';

 export default (mapState) => {
  const getBillsTableState = getBillsTableStateFactory();
  const billsTableStateChanged = billsTableStateChangedFactory();
+  const getBillsSelectedRows = getBillsSelectedRowsFactory();

  const mapStateToProps = (state, props) => {
    const mapped = {
      billsTableState: getBillsTableState(state, props),
      billsTableStateChanged: billsTableStateChanged(state, props),
+      billsSelectedRows: getBillsSelectedRows(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/withBillsActions.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/withBillsActions.tsx
@@ -3,11 +3,14 @@ import { connect } from 'react-redux';
 import {
  setBillsTableState,
  resetBillsTableState,
+  setBillsSelectedRows,
 } from '@/store/Bills/bills.actions';

 const mapDispatchToProps = (dispatch) => ({
  setBillsTableState: (queries) => dispatch(setBillsTableState(queries)),
  resetBillsTableState: () => dispatch(resetBillsTableState()),
+  setBillsSelectedRows: (selectedRows) =>
+    dispatch(setBillsSelectedRows(selectedRows)),
 });

 export default connect(null, mapDispatchToProps);
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotes.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotes.tsx
@@ -6,7 +6,7 @@ import {
 } from '@/store/VendorCredit/vendorCredit.selector';

 export default (mapState) => {
-  const getVendorsCreditNoteTableState = getVendorCreditTableStateFactory();
+  const getVendorsCreditNoteTableState = getVendorCreditTableStateFactoryth();
  const isVendorsCreditNoteTableChanged =
    isVendorCreditTableStateChangedFactory();

@@ -17,6 +17,7 @@ export default (mapState) => {
        state,
        props,
      ),
+      vendorsCreditNoteSelectedRows: getVendorsCreditNoteSelectedRows(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotesActions.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotesActions.tsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import {
  setVendorCreditTableState,
  resetVendorCreditTableState,
+  setVendorCreditsSelectedRows,
 } from '@/store/VendorCredit/vendorCredit.actions';

 const mapDispatchToProps = (dispatch) => ({
@@ -10,6 +11,8 @@ const mapDispatchToProps = (dispatch) => ({
    dispatch(setVendorCreditTableState(queries)),
  resetVendorsCreditNoteTableState: () =>
    dispatch(resetVendorCreditTableState()),
+  setVendorsCreditNoteSelectedRows: (selectedRows) =>
+    dispatch(setVendorCreditsSelectedRows(selectedRows)),
 });

 export default connect(null, mapDispatchToProps);
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx
@@ -127,6 +127,24 @@ function EstimateActionsBar({
    openAlert('estimates-bulk-delete', { estimatesIds: estimatesSelectedRows });
  };

+  console.log(estimatesSelectedRows, 'estimatesSelectedRows');
+
+  if (!isEmpty(estimatesSelectedRows)) {
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -160,16 +178,7 @@ function EstimateActionsBar({
            conditionsCount={estimatesFilterRoles.length}
          />
        </AdvancedFilterPopover>
-
-        <If condition={!isEmpty(estimatesSelectedRows)}>
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
-            text={<T id={'delete'} />}
-            intent={Intent.DANGER}
-            onClick={handleBulkDelete}
-          />
-        </If>
+        <NavbarDivider />
        <Button
          className={Classes.MINIMAL}
          icon={<Icon icon={'print-16'} iconSize={'16'} />}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.tsx
@@ -3,17 +3,19 @@ import { connect } from 'react-redux';
 import {
  getEstimatesTableStateFactory,
  isEstimatesTableStateChangedFactory,
+  getEstimatesSelectedRowsFactory,
 } from '@/store/Estimate/estimates.selectors';

 export default (mapState) => {
  const getEstimatesTableState = getEstimatesTableStateFactory();
+  const getSelectedRows = getEstimatesSelectedRowsFactory();
  const isEstimatesTableStateChanged = isEstimatesTableStateChangedFactory();

  const mapStateToProps = (state, props) => {
    const mapped = {
      estimatesTableState: getEstimatesTableState(state, props),
      estimatesTableStateChanged: isEstimatesTableStateChanged(state, props),
-      estimatesSelectedRows: state.estimates?.selectedRows || [],
+      estimatesSelectedRows: getSelectedRows(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx
@@ -123,6 +123,22 @@ function InvoiceActionsBar({
    openAlert('invoices-bulk-delete', { invoicesIds: invoicesSelectedRows });
  };

+  if (!isEmpty(invoicesSelectedRows)) {
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -155,16 +171,6 @@ function InvoiceActionsBar({
        </AdvancedFilterPopover>

        <NavbarDivider />
-
-        <If condition={!isEmpty(invoicesSelectedRows)}>
-          <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'} />}
@@ -224,9 +230,9 @@ export default compose(
  withInvoiceActions,
  withSettingsActions,
  withAlertActions,
-  withInvoices(({ invoicesTableState }) => ({
+  withInvoices(({ invoicesTableState, invoicesSelectedRows }) => ({
    invoicesFilterRoles: invoicesTableState.filterRoles,
-    invoicesSelectedRows: invoicesTableState?.selectedRows || [],
+    invoicesSelectedRows,
  })),
  withSettings(({ invoiceSettings }) => ({
    invoicesTableSize: invoiceSettings?.tableSize,
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.tsx
@@ -3,17 +3,19 @@ import { connect } from 'react-redux';
 import {
  getInvoicesTableStateFactory,
  isInvoicesTableStateChangedFactory,
+  getInvoicesSelectedRowsFactory,
 } from '@/store/Invoice/invoices.selector';

 export default (mapState) => {
  const getInvoicesTableState = getInvoicesTableStateFactory();
  const isInvoicesTableStateChanged = isInvoicesTableStateChangedFactory();
+  const getSelectedRows = getInvoicesSelectedRowsFactory();

  const mapStateToProps = (state, props) => {
    const mapped = {
      invoicesTableState: getInvoicesTableState(state, props),
      invoicesTableStateChanged: isInvoicesTableStateChanged(state, props),
-      invoicesSelectedRows: state.invoices?.selectedRows || [],
+      invoicesSelectedRows: getSelectedRows(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx
@@ -45,6 +45,7 @@ import { DialogsName } from '@/constants/dialogs';
 import { compose } from '@/utils';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { DRAWERS } from '@/constants/drawers';
+import { isEmpty } from 'lodash';

 /**
 * Receipts actions bar.
@@ -55,6 +56,7 @@ function ReceiptActionsBar({

  // #withReceipts
  receiptsFilterConditions,
+  receiptSelectedRows,

  // #withSettings
  receiptsTableSize,
@@ -118,6 +120,24 @@ function ReceiptActionsBar({
    openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleReceipt' });
  };

+  if (!isEmpty(receiptSelectedRows)) {
+    const handleBulkDelete = () => {
+      openAlert('receipts-bulk-delete', { receiptsIds: receiptSelectedRows });
+    };
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -219,8 +239,9 @@ function ReceiptActionsBar({
 export default compose(
  withReceiptsActions,
  withSettingsActions,
-  withReceipts(({ receiptTableState }) => ({
+  withReceipts(({ receiptTableState, receiptSelectedRows }) => ({
    receiptsFilterConditions: receiptTableState.filterRoles,
+    receiptSelectedRows,
  })),
  withSettings(({ receiptSettings }) => ({
    receiptsTableSize: receiptSettings?.tableSize,
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.tsx
@@ -1,6 +1,7 @@
 // @ts-nocheck
 import { connect } from 'react-redux';
 import {
+  getReceiptsSelectedRowsFactory,
  getReceiptsTableStateFactory,
  receiptsTableStateChangedFactory,
 } from '@/store/receipts/receipts.selector';
@@ -8,11 +9,13 @@ import {
 export default (mapState) => {
  const getReceiptsTableState = getReceiptsTableStateFactory();
  const receiptsTableStateChanged = receiptsTableStateChangedFactory();
+  const getSelectedRows = getReceiptsSelectedRowsFactory();

  const mapStateToProps = (state, props) => {
    const mapped = {
      receiptTableState: getReceiptsTableState(state, props),
      receiptsTableStateChanged: receiptsTableStateChanged(state, props),
+      receiptSelectedRows: getSelectedRows(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/packages/webapp/src/store/Bills/bills.selectors.tsx
+++ b/packages/webapp/src/store/Bills/bills.selectors.tsx
@@ -4,6 +4,7 @@ import { isEqual } from 'lodash';
 import { paginationLocationQuery } from '@/store/selectors';
 import { createDeepEqualSelector } from '@/utils';
 import { defaultTableQuery } from './bills.reducer';
+import { createSelector } from 'reselect';

 const billsTableStateSelector = (state) => state.bills.tableState;

@@ -24,3 +25,9 @@ export const billsTableStateChangedFactory = () =>
  createDeepEqualSelector(billsTableStateSelector, (tableState) => {
    return !isEqual(tableState, defaultTableQuery);
  });
+
+export const getBillsSelectedRowsFactory = () =>
+  createSelector(
+    (state) => state.bills.selectedRows,
+    (selectedRows) => selectedRows,
+  );
--- a/packages/webapp/src/store/Estimate/estimates.selectors.tsx
+++ b/packages/webapp/src/store/Estimate/estimates.selectors.tsx
@@ -3,6 +3,7 @@ import { isEqual } from 'lodash';
 import { createDeepEqualSelector } from '@/utils';
 import { paginationLocationQuery } from '@/store/selectors';
 import { defaultTableQuery } from './estimates.reducer';
+import { createSelector } from 'reselect';

 const estimatesTableState = (state) => state.salesEstimates.tableState;

@@ -23,3 +24,8 @@ export const isEstimatesTableStateChangedFactory = () =>
  createDeepEqualSelector(estimatesTableState, (tableState) => {
    return !isEqual(tableState, defaultTableQuery);
  });
+
+export const getEstimatesSelectedRowsFactory = () => createSelector(
+  (state) => state.salesEstimates.selectedRows,
+  (selectedRows) => selectedRows,
+);
--- a/packages/webapp/src/store/Invoice/invoices.selector.tsx
+++ b/packages/webapp/src/store/Invoice/invoices.selector.tsx
@@ -3,6 +3,7 @@ import { isEqual } from 'lodash';
 import { paginationLocationQuery } from '@/store/selectors';
 import { createDeepEqualSelector } from '@/utils';
 import { defaultTableQuery } from './invoices.reducer';
+import { createSelector } from 'reselect';

 const invoicesTableStateSelector = (state) => state.salesInvoices.tableState;

@@ -25,9 +26,15 @@ export const getInvoicesTableStateFactory = () =>
 * Retrieve invoices table state.
 */
 export const isInvoicesTableStateChangedFactory = () =>
-  createDeepEqualSelector(
-    invoicesTableStateSelector,
-    (tableState) => {
-      return !isEqual(tableState, defaultTableQuery);
-    },
+  createDeepEqualSelector(invoicesTableStateSelector, (tableState) => {
+    return !isEqual(tableState, defaultTableQuery);
+  });
+
+/**
+ * Retrieve invoices selected rows.
+ */
+export const getInvoicesSelectedRowsFactory = () =>
+  createSelector(
+    (state) => state.salesInvoices.selectedRows,
+    (selectedRows) => selectedRows,
  );
--- a/packages/webapp/src/store/VendorCredit/vendorCredit.selector.tsx
+++ b/packages/webapp/src/store/VendorCredit/vendorCredit.selector.tsx
@@ -30,3 +30,9 @@ export const isVendorCreditTableStateChangedFactory = () =>
  createDeepEqualSelector(vendorCreditsTableStateSelector, (tableState) => {
    return !isEqual(tableState, defaultTableQuery);
  });
+
+export const getVendorsCreditNoteSelectedRowsFactory = () =>
+  createSelector(
+    (state) => state.vendorCredit.selectedRows,
+    (selectedRows) => selectedRows,
+  );
--- a/packages/webapp/src/store/expenses/expenses.selectors.tsx
+++ b/packages/webapp/src/store/expenses/expenses.selectors.tsx
@@ -1,9 +1,9 @@
 // @ts-nocheck
 import { isEqual } from 'lodash';
-
 import { createDeepEqualSelector } from '@/utils';
 import { paginationLocationQuery } from '@/store/selectors';
 import { defaultTableQuery } from './expenses.reducer';
+import { createSelector } from 'reselect';

 // Items table state selectors.
 const expensesTableStateSelector = (state) => state.expenses.tableState;
@@ -25,3 +25,9 @@ export const expensesTableStateChangedFactory = () =>
  createDeepEqualSelector(expensesTableStateSelector, (tableState) => {
    return !isEqual(tableState, defaultTableQuery);
  });
+
+export const getExpensesSelectedRowsFactory = () =>
+  createSelector(
+    (state) => state.expenses.selectedRows,
+    (selectedRows) => selectedRows,
+  );
--- a/packages/webapp/src/store/manualJournals/manualJournals.selectors.tsx
+++ b/packages/webapp/src/store/manualJournals/manualJournals.selectors.tsx
@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { isEqual } from 'lodash';
-
+import { createSelector } from 'reselect';
 import { paginationLocationQuery } from '@/store/selectors';
 import { createDeepEqualSelector } from '@/utils';
 import { defaultTableQuery } from './manualJournals.reducers';
@@ -24,3 +24,9 @@ export const manualJournalTableStateChangedFactory = () =>
  createDeepEqualSelector(manualJournalsTableState, (tableState) => {
    return !isEqual(tableState, defaultTableQuery);
  });
+
+export const getManualJournalsSelectedRowsFactory = () =>
+  createSelector(
+    (state) => state.manualJournals.selectedRows,
+    (selectedRows) => selectedRows,
+  );
--- a/packages/webapp/src/store/receipts/receipts.selector.tsx
+++ b/packages/webapp/src/store/receipts/receipts.selector.tsx
@@ -4,6 +4,7 @@ import { isEqual } from 'lodash';
 import { paginationLocationQuery } from '@/store/selectors';
 import { createDeepEqualSelector } from '@/utils';
 import { defaultTableQuery } from './receipts.reducer';
+import { createSelector } from 'reselect';

 const receiptTableStateSelector = (state) => state.salesReceipts.tableState;

@@ -24,3 +25,9 @@ export const receiptsTableStateChangedFactory = () =>
  createDeepEqualSelector(receiptTableStateSelector, (tableState) => {
    return !isEqual(tableState, defaultTableQuery);
  });
+
+export const getReceiptsSelectedRowsFactory = () =>
+  createSelector(
+    (state) => state.salesReceipts.selectedRows,
+    (selectedRows) => selectedRows,
+  );