wip

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,

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}

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

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

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} />}

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,

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

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

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

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'} />}

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,

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,

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

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

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

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

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>
-
+        <NavbarDivider />
-        <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>
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}

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

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,

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

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,

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

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

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

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(
+  createDeepEqualSelector(invoicesTableStateSelector, (tableState) => {
-    invoicesTableStateSelector,
-    (tableState) => {
     return !isEqual(tableState, defaultTableQuery);
-    },
+  });
+
+/**
+ * Retrieve invoices selected rows.
+ */
+export const getInvoicesSelectedRowsFactory = () =>
+  createSelector(
+    (state) => state.salesInvoices.selectedRows,
+    (selectedRows) => selectedRows,
   );

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

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

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

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