feat: bulk transcations delete

2026-02-18 13:50:31 +00:00 · 2025-11-03 21:40:24 +02:00
parent 8161439365
commit a0bc9db9a6
107 changed files with 2213 additions and 156 deletions
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesAlerts.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesAlerts.tsx
@@ -18,6 +18,10 @@ const ReconcileCreditDeleteAlert = React.lazy(
    import('@/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert'),
 );

+const CreditNoteBulkDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/CreditNotes/CreditNoteBulkDeleteAlert'),
+);
+
 /**
 * Credit notes alerts.
 */
@@ -38,4 +42,8 @@ export default [
    name: 'reconcile-credit-delete',
    component: ReconcileCreditDeleteAlert,
  },
+  {
+    name: 'credit-notes-bulk-delete',
+    component: CreditNoteBulkDeleteAlert,
+  },
 ];
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.tsx
@@ -33,6 +33,7 @@ import { DRAWERS } from '@/constants/drawers';
 function CreditNotesDataTable({
  // #withCreditNotesActions
  setCreditNotesTableState,
+  setCreditNotesSelectedRows,

  // #withAlertsActions
  openAlert,
@@ -79,6 +80,15 @@ function CreditNotesDataTable({
    [setCreditNotesTableState],
  );

+  // Handle selected rows change.
+  const handleSelectedRowsChange = React.useCallback(
+    (selectedFlatRows) => {
+      const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+      setCreditNotesSelectedRows(selectedIds);
+    },
+    [setCreditNotesSelectedRows],
+  );
+
  // Display create note empty status instead of the table.
  if (isEmptyStatus) {
    return <CreditNoteEmptyStatus />;
@@ -128,6 +138,8 @@ function CreditNotesDataTable({
        headerLoading={isCreditNotesLoading}
        progressBarLoading={isCreditNotesFetching}
        onFetchData={handleDataTableFetchData}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        autoResetSelectedRows={false}
        manualSortBy={true}
        selectionColumn={true}
        noInitialFetch={true}
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/components.tsx
@@ -80,19 +80,19 @@ export function StatusAccessor(creditNote) {
    <div>
      <Choose>
        <Choose.When condition={creditNote.is_open}>
-          <Tag intent={Intent.WARNING} round>
+          <Tag intent={Intent.WARNING} round minimal>
            <T id={'open'} />
          </Tag>
        </Choose.When>

        <Choose.When condition={creditNote.is_closed}>
-          <Tag intent={Intent.SUCCESS} round>
+          <Tag intent={Intent.SUCCESS} round minimal>
            <T id={'closed'} />
          </Tag>
        </Choose.When>

        <Choose.When condition={creditNote.is_draft}>
-          <Tag intent={Intent.NONE} round>
+          <Tag intent={Intent.NONE} round minimal>
            <T id={'draft'} />
          </Tag>
        </Choose.When>
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotes.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotes.tsx
@@ -13,6 +13,7 @@ export default (mapState) => {
    const mapped = {
      creditNoteTableState: getCreditNoteTableState(state, props),
      creditNoteTableStateChanged: isCreditNoteTableChanged(state, props),
+      creditNotesSelectedRows: state.creditNotes?.selectedRows || [],
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.tsx
@@ -3,12 +3,14 @@ import { connect } from 'react-redux';
 import {
  setCreditNoteTableState,
  resetCreditNoteTableState,
+  setCreditNotesSelectedRows,
 } from '@/store/CreditNote/creditNote.actions';

 const mapDipatchToProps = (dispatch) => ({
  setCreditNotesTableState: (queries) =>
    dispatch(setCreditNoteTableState(queries)),
  resetCreditNotesTableState: () => dispatch(resetCreditNoteTableState()),
+  setCreditNotesSelectedRows: (selectedRows) => dispatch(setCreditNotesSelectedRows(selectedRows)),
 });

 export default connect(null, mapDipatchToProps);
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesAlerts.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesAlerts.tsx
@@ -14,6 +14,10 @@ const EstimateRejectAlert = React.lazy(
  () => import('@/containers/Alerts/Estimates/EstimateRejectAlert'),
 );

+const EstimateBulkDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Estimates/EstimateBulkDeleteAlert'),
+);
+
 /**
 * Estimates alert.
 */
@@ -22,4 +26,5 @@ export default [
  { name: 'estimate-deliver', component: EstimateDeliveredAlert },
  { name: 'estimate-Approve', component: EstimateApproveAlert },
  { name: 'estimate-reject', component: EstimateRejectAlert },
+  { name: 'estimates-bulk-delete', component: EstimateBulkDeleteAlert },
 ];
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx
@@ -33,6 +33,7 @@ import withEstimatesActions from './withEstimatesActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertActions from '@/containers/Alert/withAlertActions';

 import { useEstimatesListContext } from './EstimatesListProvider';
 import { useRefreshEstimates } from '@/hooks/query/estimates';
@@ -43,6 +44,7 @@ import { compose } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { DRAWERS } from '@/constants/drawers';
+import { isEmpty } from 'lodash';
 import {
  BrandingThemeFormGroup,
  BrandingThemeSelectButton,
@@ -57,6 +59,7 @@ function EstimateActionsBar({

  // #withEstimates
  estimatesFilterRoles,
+  estimatesSelectedRows = [],

  // #withSettings
  estimatesTableSize,
@@ -69,6 +72,9 @@ function EstimateActionsBar({

  // #withSettingsActions
  addSetting,
+
+  // #withAlertActions
+  openAlert,
 }) {
  const history = useHistory();

@@ -116,6 +122,11 @@ function EstimateActionsBar({
    openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleEstimate' });
  };

+  // Handle bulk estimates delete.
+  const handleBulkDelete = () => {
+    openAlert('estimates-bulk-delete', { estimatesIds: estimatesSelectedRows });
+  };
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -150,13 +161,13 @@ function EstimateActionsBar({
          />
        </AdvancedFilterPopover>

-        <If condition={false}>
+        <If condition={!isEmpty(estimatesSelectedRows)}>
          <Button
            className={Classes.MINIMAL}
            icon={<Icon icon={'trash-16'} iconSize={16} />}
            text={<T id={'delete'} />}
            intent={Intent.DANGER}
-            // onClick={handleBulkDelete}
+            onClick={handleBulkDelete}
          />
        </If>
        <Button
@@ -218,8 +229,10 @@ function EstimateActionsBar({
 export default compose(
  withEstimatesActions,
  withSettingsActions,
-  withEstimates(({ estimatesTableState }) => ({
+  withAlertActions,
+  withEstimates(({ estimatesTableState, estimatesSelectedRows }) => ({
    estimatesFilterRoles: estimatesTableState.filterRoles,
+    estimatesSelectedRows: estimatesSelectedRows || [],
  })),
  withSettings(({ estimatesSettings }) => ({
    estimatesTableSize: estimatesSettings?.tableSize,
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.tsx
@@ -31,6 +31,7 @@ import { DialogsName } from '@/constants/dialogs';
 function EstimatesDataTable({
  // #withEstimatesActions
  setEstimatesTableState,
+  setEstimatesSelectedRows,

  // #withAlertsActions
  openAlert,
@@ -126,6 +127,15 @@ function EstimatesDataTable({
    [setEstimatesTableState],
  );

+  // Handle selected rows change.
+  const handleSelectedRowsChange = useCallback(
+    (selectedFlatRows) => {
+      const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+      setEstimatesSelectedRows(selectedIds);
+    },
+    [setEstimatesSelectedRows],
+  );
+
  // Display empty status instead of the table.
  if (isEmptyStatus) {
    return <EstimatesEmptyStatus />;
@@ -140,6 +150,8 @@ function EstimatesDataTable({
        headerLoading={isEstimatesLoading}
        progressBarLoading={isEstimatesFetching}
        onFetchData={handleFetchData}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        autoResetSelectedRows={false}
        noInitialFetch={true}
        manualSortBy={true}
        selectionColumn={true}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx
@@ -22,27 +22,31 @@ import { safeCallback } from '@/utils';
 export const statusAccessor = (row) => (
  <Choose>
    <Choose.When condition={row.is_approved}>
-      <Tag intent={Intent.SUCCESS} round>
+      <Tag intent={Intent.SUCCESS} round minimal>
        <T id={'approved'} />
      </Tag>
    </Choose.When>
+
    <Choose.When condition={row.is_rejected}>
-      <Tag intent={Intent.DANGER} round>
+      <Tag intent={Intent.DANGER} round minimal>
        <T id={'rejected'} />
      </Tag>
    </Choose.When>
+
    <Choose.When condition={row.is_expired}>
-      <Tag intent={Intent.WARNING} round>
+      <Tag intent={Intent.WARNING} round minimal>
        <T id={'estimate.status.expired'} />
      </Tag>
    </Choose.When>
+
    <Choose.When condition={row.is_delivered}>
-      <Tag intent={Intent.SUCCESS} round>
+      <Tag intent={Intent.SUCCESS} round minimal>
        <T id={'delivered'} />
      </Tag>
    </Choose.When>
+
    <Choose.Otherwise>
-      <Tag round>
+      <Tag round minimal>
        <T id={'draft'} />
      </Tag>
    </Choose.Otherwise>
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.tsx
@@ -13,6 +13,7 @@ export default (mapState) => {
    const mapped = {
      estimatesTableState: getEstimatesTableState(state, props),
      estimatesTableStateChanged: isEstimatesTableStateChanged(state, props),
+      estimatesSelectedRows: state.estimates?.selectedRows || [],
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.tsx
@@ -3,11 +3,13 @@ import { connect } from 'react-redux';
 import {
  setEstimatesTableState,
  resetEstimatesTableState,
+  setEstimatesSelectedRows,
 } from '@/store/Estimate/estimates.actions';

 const mapDispatchToProps = (dispatch) => ({
  setEstimatesTableState: (state) => dispatch(setEstimatesTableState(state)),
  resetEstimatesTableState: () => dispatch(resetEstimatesTableState()),
+  setEstimatesSelectedRows: (selectedRows) => dispatch(setEstimatesSelectedRows(selectedRows)),
 });

 export default connect(null, mapDispatchToProps);
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesAlerts.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesAlerts.tsx
@@ -12,6 +12,10 @@ const CancelBadDebtAlert = React.lazy(
  () => import('@/containers/Alerts/Invoices/CancelBadDebtAlert'),
 );

+const InvoiceBulkDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/Invoices/InvoiceBulkDeleteAlert'),
+);
+
 /**
 * Invoices alert.
 */
@@ -19,4 +23,5 @@ export default [
  { name: 'invoice-delete', component: InvoiceDeleteAlert },
  { name: 'invoice-deliver', component: InvoiceDeliverAlert },
  { name: 'cancel-bad-debt', component: CancelBadDebtAlert },
+  { name: 'invoices-bulk-delete', component: InvoiceBulkDeleteAlert },
 ];
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx
@@ -34,11 +34,13 @@ import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
+import withAlertActions from '@/containers/Alert/withAlertActions';
 import { compose } from '@/utils';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { DRAWERS } from '@/constants/drawers';
+import { isEmpty } from 'lodash';

 /**
 * Invoices table actions bar.
@@ -49,6 +51,7 @@ function InvoiceActionsBar({

  // #withInvoices
  invoicesFilterRoles,
+  invoicesSelectedRows = [],

  // #withSettings
  invoicesTableSize,
@@ -61,6 +64,9 @@ function InvoiceActionsBar({

  // #withDrawerActions
  openDrawer,
+
+  // #withAlertActions
+  openAlert,
 }) {
  const history = useHistory();

@@ -112,6 +118,11 @@ function InvoiceActionsBar({
    openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleInvoice' });
  };

+  // Handle bulk invoices delete.
+  const handleBulkDelete = () => {
+    openAlert('invoices-bulk-delete', { invoicesIds: invoicesSelectedRows });
+  };
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -145,12 +156,13 @@ function InvoiceActionsBar({

        <NavbarDivider />

-        <If condition={false}>
+        <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
@@ -211,8 +223,10 @@ function InvoiceActionsBar({
 export default compose(
  withInvoiceActions,
  withSettingsActions,
+  withAlertActions,
  withInvoices(({ invoicesTableState }) => ({
    invoicesFilterRoles: invoicesTableState.filterRoles,
+    invoicesSelectedRows: invoicesTableState?.selectedRows || [],
  })),
  withSettings(({ invoiceSettings }) => ({
    invoicesTableSize: invoiceSettings?.tableSize,
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx
@@ -34,6 +34,7 @@ import { DialogsName } from '@/constants/dialogs';
 function InvoicesDataTable({
  // #withInvoicesActions
  setInvoicesTableState,
+  setInvoicesSelectedRows,

  // #withInvoices
  invoicesTableState,
@@ -125,6 +126,15 @@ function InvoicesDataTable({
    [setInvoicesTableState],
  );

+  // Handle selected rows change.
+  const handleSelectedRowsChange = useCallback(
+    (selectedFlatRows) => {
+      const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+      setInvoicesSelectedRows(selectedIds);
+    },
+    [setInvoicesSelectedRows],
+  );
+
  // Display invoice empty status instead of the table.
  if (isEmptyStatus) {
    return <InvoicesEmptyStatus />;
@@ -141,6 +151,7 @@ function InvoicesDataTable({
        onFetchData={handleDataTableFetchData}
        manualSortBy={true}
        selectionColumn={true}
+        onSelectedRowsChange={handleSelectedRowsChange}
        noInitialFetch={true}
        sticky={true}
        pagination={true}
@@ -149,6 +160,7 @@ function InvoicesDataTable({
        pagesCount={pagination.pagesCount}
        autoResetSortBy={false}
        autoResetPage={false}
+        autoResetSelectedRows={false}
        TableLoadingRenderer={TableSkeletonRows}
        TableHeaderSkeletonRenderer={TableSkeletonHeader}
        ContextMenu={ActionsMenu}
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
@@ -1,12 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import {
-  Intent,
-  Tag,
-  Menu,
-  MenuItem,
-  MenuDivider,
-} from '@blueprintjs/core';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
 import { CLASSES } from '@/constants/classes';
@@ -30,36 +24,33 @@ export function InvoiceStatus({ invoice }) {
  return (
    <Choose>
      <Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
-        <Tag intent={Intent.SUCCESS} round>
+        <Tag intent={Intent.SUCCESS} round minimal>
          <T id={'paid'} />
        </Tag>
      </Choose.When>

-      <Choose.When condition={invoice.is_delivered}>
-        <Choose>
-          <Choose.When condition={invoice.is_overdue}>
-            <Tag intent={Intent.DANGER} round>
-              {intl.get('overdue_by', { overdue: invoice.overdue_days })}
-            </Tag>
-          </Choose.When>
-          <Choose.Otherwise>
-            <Tag intent={Intent.WARNING} round>
-              {intl.get('due_in', { due: invoice.remaining_days })}
-            </Tag>
-          </Choose.Otherwise>
-        </Choose>
+      <Choose.When condition={invoice.is_delivered && invoice.is_overdue}>
+        <Tag intent={Intent.DANGER} round minimal>
+          {intl.get('overdue_by', { overdue: invoice.overdue_days })}
+        </Tag>
+      </Choose.When>

-        <If condition={invoice.is_partially_paid}>
-          <Tag intent={Intent.PRIMARY} round>
-            {intl.get('day_partially_paid', {
-              due: formattedAmount(invoice.due_amount, invoice.currency_code),
-            })}
-          </Tag>
-        </If>
+      <Choose.When condition={invoice.is_delivered && !invoice.is_overdue}>
+        <Tag intent={Intent.WARNING} round minimal>
+          {intl.get('due_in', { due: invoice.remaining_days })}
+        </Tag>
+      </Choose.When>
+
+      <Choose.When condition={invoice.is_partially_paid}>
+        <Tag intent={Intent.PRIMARY} round minimal>
+          {intl.get('day_partially_paid', {
+            due: formattedAmount(invoice.due_amount, invoice.currency_code),
+          })}
+        </Tag>
      </Choose.When>

      <Choose.Otherwise>
-        <Tag round>
+        <Tag round minimal>
          <T id={'draft'} />
        </Tag>
      </Choose.Otherwise>
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.tsx
@@ -2,12 +2,14 @@
 import { connect } from 'react-redux';
 import {
  setInvoicesTableState,
-  resetInvoicesTableState
+  resetInvoicesTableState,
+  setInvoicesSelectedRows,
 } from '@/store/Invoice/invoices.actions';

 const mapDipatchToProps = (dispatch) => ({
  setInvoicesTableState: (queries) => dispatch(setInvoicesTableState(queries)),
  resetInvoicesTableState: () => dispatch(resetInvoicesTableState()),
+  setInvoicesSelectedRows: (selectedRows) => dispatch(setInvoicesSelectedRows(selectedRows)),
 });

 export default connect(null, mapDipatchToProps);
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.tsx
@@ -13,6 +13,7 @@ export default (mapState) => {
    const mapped = {
      invoicesTableState: getInvoicesTableState(state, props),
      invoicesTableStateChanged: isInvoicesTableStateChanged(state, props),
+      invoicesSelectedRows: state.invoices?.selectedRows || [],
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsReceivedAlerts.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsReceivedAlerts.tsx
@@ -5,9 +5,18 @@ const PaymentReceivedDeleteAlert = React.lazy(
  () => import('@/containers/Alerts/PaymentReceived/PaymentReceivedDeleteAlert'),
 );

+const PaymentReceivedBulkDeleteAlert = React.lazy(
+  () =>
+    import('@/containers/Alerts/PaymentReceived/PaymentReceivedBulkDeleteAlert'),
+);
+
 /**
 * PaymentReceives alert.
 */
 export default [
  { name: 'payment-received-delete', component: PaymentReceivedDeleteAlert },
+  {
+    name: 'payments-received-bulk-delete',
+    component: PaymentReceivedBulkDeleteAlert,
+  },
 ];
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
@@ -96,13 +96,13 @@ export function StatusAccessor(receipt) {
  return (
    <Choose>
      <Choose.When condition={receipt.is_closed}>
-        <Tag intent={Intent.SUCCESS} round>
+        <Tag intent={Intent.SUCCESS} round minimal>
          <T id={'closed'} />
        </Tag>
      </Choose.When>

      <Choose.Otherwise>
-        <Tag intent={Intent.WARNING} round>
+        <Tag intent={Intent.WARNING} round minimal>
          <T id={'draft'} />
        </Tag>
      </Choose.Otherwise>