@visns-studio/visns-components 5.6.13 → 5.7.0

package/package.json

@@ -33,7 +33,6 @@
         "quill-image-uploader": "^1.3.0",
         "react-big-calendar": "^1.18.0",
         "react-color": "^2.19.3",
-        "react-confirm-alert": "^3.0.6",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^8.3.0",
         "react-dropzone": "^14.3.8",
@@ -84,7 +83,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.6.13",
+    "version": "5.7.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/cms/DataGrid.jsx

@@ -10,9 +10,9 @@ import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
 import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
 import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
-import { confirmAlert } from 'react-confirm-alert';
 import { toast } from 'react-toastify';
 import Toggle from 'react-toggle';
+import { confirmDialog } from '../utils/ConfirmDialog';
 import {
     Backspace,
     Check,
@@ -32,7 +32,6 @@ import {
 } from 'akar-icons';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
-import 'react-confirm-alert/src/react-confirm-alert.css';
 import 'react-toggle/style.css';
 
 import CustomFetch from '../crm/Fetch';
@@ -171,11 +170,12 @@ const DataGrid = ({
                 modalOpen('update', d.id);
                 break;
             case 'delete':
-                confirmAlert({
+                confirmDialog({
                     title: 'Delete Item',
                     message: `Are you sure you want to delete ${
                         d.name ? d.name : d.label ? d.label : 'this item'
                     }?`,
+                    data: d, // Pass the row data
                     buttons: [
                         {
                             label: 'Yes',
@@ -213,9 +213,10 @@ const DataGrid = ({
                 });
                 break;
             default:
-                confirmAlert({
+                confirmDialog({
                     title: s.title,
                     message: '',
+                    data: d, // Pass the row data
                     buttons: [
                         {
                             label: 'Yes',
@@ -1208,7 +1209,69 @@ const DataGrid = ({
                                     onClick={(e) => {
                                         e.preventDefault();
                                         e.stopPropagation();
-                                        handleSettingClick(setting, data);
+
+                                        // Actions that should have confirmation dialogs
+                                        const actionsRequiringConfirmation = [
+                                            'complete',
+                                            'primary',
+                                            'ssa',
+                                        ];
+
+                                        // If this action requires confirmation and is not delete (which has its own confirmation)
+                                        if (
+                                            actionsRequiringConfirmation.includes(
+                                                setting.id
+                                            ) &&
+                                            setting.id !== 'delete'
+                                        ) {
+                                            // Get tooltip content for the message
+                                            const tooltipContent =
+                                                setting.active &&
+                                                data.hasOwnProperty(
+                                                    setting.active.id
+                                                ) &&
+                                                data[setting.active.id] ===
+                                                    setting.active.value
+                                                    ? setting.active.title
+                                                    : setting.title;
+
+                                            // Create a message based on the tooltip
+                                            let message = `Are you sure you want to ${tooltipContent.toLowerCase()}?`;
+
+                                            // Add item identifier if available
+                                            const itemName =
+                                                data.name ||
+                                                data.label ||
+                                                data.title ||
+                                                data.id;
+                                            if (itemName) {
+                                                message += ` Item: "${itemName}"`;
+                                            }
+
+                                            // Show confirmation dialog
+                                            confirmDialog({
+                                                title: tooltipContent,
+                                                message: message,
+                                                data: data,
+                                                buttons: [
+                                                    {
+                                                        label: 'Yes',
+                                                        onClick: () =>
+                                                            handleSettingClick(
+                                                                setting,
+                                                                data
+                                                            ),
+                                                    },
+                                                    {
+                                                        label: 'No',
+                                                        onClick: () => {},
+                                                    },
+                                                ],
+                                            });
+                                        } else {
+                                            // For actions that don't need confirmation or already have it (delete)
+                                            handleSettingClick(setting, data);
+                                        }
                                     }}
                                 >
                                     {renderSetting(setting, data)}

package/src/components/cms/DropZone.jsx

@@ -1,15 +1,13 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { useDropzone } from 'react-dropzone';
-import { confirmAlert } from 'react-confirm-alert';
 import { CircleX, File, TrashCan } from 'akar-icons';
 import { toast } from 'react-toastify';
 import { arrayMoveImmutable } from 'array-move';
 import Popup from 'reactjs-popup';
 import imageCompression from 'browser-image-compression';
 
-import 'react-confirm-alert/src/react-confirm-alert.css';
-
+import { confirmDialog } from '../utils/ConfirmDialog';
 import CustomFetch from '../crm/Fetch';
 import SortableList from './sorting/List';
 
@@ -122,9 +120,10 @@ function VisnsDropZone({ fetchData, files, settings }) {
 
     const handleDelete = (id, name) => {
         if (id && id > 0) {
-            confirmAlert({
+            confirmDialog({
                 title: 'Confirm to Delete File',
                 message: 'Are you sure you want to delete ' + name,
+                data: { name: name }, // Pass the file name as data
                 buttons: [
                     {
                         label: 'Yes',

package/src/components/cms/Form.jsx

@@ -5,11 +5,9 @@ import slugify from 'react-slugify';
 import moment from 'moment';
 import Reveal from 'react-reveal/Reveal';
 import parse from 'html-react-parser';
-import { confirmAlert } from 'react-confirm-alert';
 import { toast } from 'react-toastify';
 import { Copy, TrashBin } from 'akar-icons';
-
-import 'react-confirm-alert/src/react-confirm-alert.css';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 function Form(props) {
     const { dataId, navigate, form } = props;
@@ -245,9 +243,10 @@ function Form(props) {
 
     const handleDelete = (e) => {
         if (e) {
-            confirmAlert({
+            confirmDialog({
                 title: 'Delete this entry',
                 message: 'Are you sure you want to delete it?',
+                data: data, // Pass the data object for context
                 buttons: [
                     {
                         label: 'Yes',

package/src/components/cms/generic/CmsDetail.jsx

@@ -4,8 +4,6 @@ import Reveal from 'react-reveal/Reveal';
 import { ToastContainer } from 'react-toastify';
 import CmsForm from '../Form';
 
-import 'react-confirm-alert/src/react-confirm-alert.css';
-
 function CmsDetail({ setting }) {
     const { dataId } = useParams();
     const navigate = useNavigate();

package/src/components/crm/DataGrid.jsx

@@ -22,11 +22,11 @@ import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
 import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
 import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
-import { confirmAlert } from 'react-confirm-alert';
 import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
 import Vapor from 'laravel-vapor';
 import Lightbox from 'yet-another-react-lightbox';
+import { confirmDialog } from '../utils/ConfirmDialog';
 import {
     Alarm,
     ArrowCounterClockwise,
@@ -59,7 +59,6 @@ import {
 import styles from './styles/DataGrid.module.scss';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
-import 'react-confirm-alert/src/react-confirm-alert.css';
 import 'yet-another-react-lightbox/styles.css';
 
 import CustomFetch from './Fetch';
@@ -491,7 +490,7 @@ const DataGrid = forwardRef(
             }
         };
 
-        const handleTimer = async (id, key) => {
+        const handleTimer = async (id, key, data) => {
             try {
                 const res = await CustomFetch(`${form.url}/${id}`, 'PUT', {
                     [key]: moment().toDate(),
@@ -499,7 +498,6 @@ const DataGrid = forwardRef(
 
                 if (res.data.error === '') {
                     toast.success('Timer has been updated.');
-
                     handleReload();
                 } else {
                     toast.error(res.data.error);
@@ -511,32 +509,74 @@ const DataGrid = forwardRef(
 
         const handleSelectionChange = useCallback(
             (param) => {
-                if (param.selected === true) {
-                    const s = {};
-
-                    param.data.forEach((obj) => {
-                        s[obj.id] = obj;
-                    });
+                // If this is a new selection (not a deselection)
+                if (
+                    param.selected === true ||
+                    (typeof param.selected === 'object' &&
+                        Object.keys(param.selected).length > 0)
+                ) {
+                    // Show confirmation dialog for selection
+                    const selectedCount =
+                        param.selected === true ? param.data.length : 1;
+                    const itemText = selectedCount === 1 ? 'item' : 'items';
+
+                    confirmDialog({
+                        title: 'Selection Confirmation',
+                        message: `You have selected ${selectedCount} ${itemText}. Do you want to proceed with this selection?`,
+                        data:
+                            param.selected === true
+                                ? param.data
+                                : param.selected, // Pass the selected data
+                        buttons: [
+                            {
+                                label: 'Yes',
+                                onClick: () => {
+                                    // Process the selection as before
+                                    if (param.selected === true) {
+                                        const s = {};
+                                        param.data.forEach((obj) => {
+                                            s[obj.id] = obj;
+                                        });
+                                        setSelected(s);
+                                    } else if (
+                                        typeof param.selected === 'object'
+                                    ) {
+                                        const selectedKey = Object.keys(
+                                            param.selected
+                                        )[0];
+                                        const isSelectedAlready =
+                                            selected.hasOwnProperty(
+                                                selectedKey
+                                            );
 
-                    setSelected(s);
-                } else if (typeof param.selected === 'object') {
-                    // Assuming param.selected is an object where keys are the ids of the selections
-                    const selectedKey = Object.keys(param.selected)[0]; // Get the key of the selected object
-                    const isSelectedAlready =
-                        selected.hasOwnProperty(selectedKey); // Check if this key is already in selected
+                                        if (isSelectedAlready) {
+                                            setSelected({});
+                                        } else {
+                                            setSelected((prevSelected) => ({
+                                                ...prevSelected,
+                                                [selectedKey]:
+                                                    param.selected[selectedKey],
+                                            }));
+                                        }
+                                    }
 
-                    if (isSelectedAlready) {
-                        // If the key already exists, reset selected
-                        setSelected({});
-                    } else {
-                        // If it does not exist, update selected with the new object
-                        setSelected((prevSelected) => ({
-                            ...prevSelected,
-                            [selectedKey]: param.selected[selectedKey],
-                        }));
-                    }
+                                    // Show a success message
+                                    toast.success(
+                                        `Selection of ${selectedCount} ${itemText} confirmed`
+                                    );
+                                },
+                            },
+                            {
+                                label: 'No',
+                                onClick: () => {
+                                    // Clear selection if user cancels
+                                    setSelected({});
+                                },
+                            },
+                        ],
+                    });
                 } else {
-                    // Handle other cases as needed
+                    // Handle deselection directly without confirmation
                     setSelected(param.selected);
                 }
             },
@@ -618,18 +658,86 @@ const DataGrid = forwardRef(
                 case 'file':
                 case 'image':
                 case 'undo':
-                    CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
-                        toast.success(result.message);
+                    // Create a user-friendly action name from the ID
+                    const actionName =
+                        s.title || s.id.charAt(0).toUpperCase() + s.id.slice(1);
+
+                    // Create a message based on the action type
+                    let message = `Are you sure you want to ${actionName.toLowerCase()}?`;
+
+                    // Add item identifier if available
+                    const itemName = d.name || d.label || d.title || d.id;
+                    if (itemName) {
+                        message += ` Item: "${itemName}"`;
+                    }
+
+                    // Show confirmation dialog
+                    confirmDialog({
+                        title: actionName,
+                        message: message,
+                        data: d, // Pass the row data for context
+                        buttons: [
+                            {
+                                label: 'Yes',
+                                onClick: () => {
+                                    CustomFetch(
+                                        s.url,
+                                        'POST',
+                                        { id: d[s.key] },
+                                        (result) => {
+                                            toast.success(result.message);
+                                        }
+                                    );
+                                },
+                            },
+                            {
+                                label: 'No',
+                                onClick: () => {},
+                            },
+                        ],
                     });
                     break;
                 case 'clone':
                     if (s.url && s.url !== '') {
-                        const cloneUrl = `${s.url}/${d[s.key]}/clone`;
-
-                        CustomFetch(cloneUrl, 'POST', {}, (result) => {
-                            toast.success(result.message);
+                        // Create a message for clone action
+                        let cloneMessage = `Are you sure you want to clone this item?`;
+
+                        // Add item identifier if available
+                        const cloneItemName =
+                            d.name || d.label || d.title || d.id;
+                        if (cloneItemName) {
+                            cloneMessage += ` Item: "${cloneItemName}"`;
+                        }
 
-                            handleReload();
+                        // Show confirmation dialog
+                        confirmDialog({
+                            title: 'Clone Item',
+                            message: cloneMessage,
+                            data: d, // Pass the row data for context
+                            buttons: [
+                                {
+                                    label: 'Yes',
+                                    onClick: () => {
+                                        const cloneUrl = `${s.url}/${
+                                            d[s.key]
+                                        }/clone`;
+
+                                        CustomFetch(
+                                            cloneUrl,
+                                            'POST',
+                                            {},
+                                            (result) => {
+                                                toast.success(result.message);
+                                                handleReload();
+                                            }
+                                        );
+                                    },
+                                },
+                                {
+                                    label: 'No',
+                                    onClick: () => {},
+                                },
+                            ],
                         });
                     }
                     break;
@@ -721,9 +829,10 @@ const DataGrid = forwardRef(
                                   }?`;
                     }
 
-                    confirmAlert({
+                    confirmDialog({
                         title: 'Delete Item',
                         message: confirmMessage,
+                        data: d, // Pass the row data
                         buttons: [
                             {
                                 label: 'Yes',
@@ -862,9 +971,10 @@ const DataGrid = forwardRef(
                     modalOpen('update', d.id);
                     break;
                 default:
-                    confirmAlert({
+                    confirmDialog({
                         title: s.title,
                         message: '',
+                        data: d, // Pass the row data
                         buttons: [
                             {
                                 label: 'Yes',
@@ -1482,11 +1592,71 @@ const DataGrid = forwardRef(
                 e.preventDefault();
                 e.stopPropagation();
 
-                // Ensure both s and d are defined before calling handleSettingClick
-                if (s && d) {
-                    handleSettingClick(s, d);
-                } else {
+                // Ensure both s and d are defined before proceeding
+                if (!s || !d) {
                     console.warn('Missing settings or data for icon click');
+                    return;
+                }
+
+                // Actions that should have confirmation dialogs
+                const actionsRequiringConfirmation = [
+                    'activate',
+                    'arrowCycle',
+                    'cloudUpload',
+                    'clone',
+                    'envelope',
+                    'file',
+                    'image',
+                    'undo',
+                    'restore',
+                ];
+
+                // If this action requires confirmation, show a dialog
+                if (actionsRequiringConfirmation.includes(s.id)) {
+                    // Get a user-friendly action name from the title or ID
+                    const actionName =
+                        s.title || s.id.charAt(0).toUpperCase() + s.id.slice(1);
+
+                    // Create a message based on the action type
+                    let message = '';
+                    if (s.id === 'delete') {
+                        // Delete already has its own confirmation message
+                        handleSettingClick(s, d);
+                        return;
+                    } else {
+                        // For other actions, create a message based on the tooltip content
+                        const tooltipContent =
+                            s.active && iconStyle.color
+                                ? s.active.title
+                                : s.title;
+                        message = `Are you sure you want to ${tooltipContent.toLowerCase()}?`;
+
+                        // Add item identifier if available
+                        const itemName = d.name || d.label || d.title || d.id;
+                        if (itemName) {
+                            message += ` Item: "${itemName}"`;
+                        }
+                    }
+
+                    // Show the confirmation dialog
+                    confirmDialog({
+                        title: actionName,
+                        message: message,
+                        data: d, // Pass the row data for context
+                        buttons: [
+                            {
+                                label: 'Yes',
+                                onClick: () => handleSettingClick(s, d),
+                            },
+                            {
+                                label: 'No',
+                                onClick: () => {},
+                            },
+                        ],
+                    });
+                } else {
+                    // For actions that don't need confirmation, proceed directly
+                    handleSettingClick(s, d);
                 }
             };
 
@@ -2807,7 +2977,8 @@ const DataGrid = forwardRef(
                                                                             form
                                                                                 .primaryKey
                                                                         ],
-                                                                        column.id
+                                                                        column.id,
+                                                                        data
                                                                     );
                                                                 } else {
                                                                     // Format field names to be more readable
@@ -2852,7 +3023,8 @@ const DataGrid = forwardRef(
                                                                         form
                                                                             .primaryKey
                                                                     ],
-                                                                    column.id
+                                                                    column.id,
+                                                                    data
                                                                 );
                                                             }
                                                         }}

package/src/components/crm/Field.jsx

@@ -1085,7 +1085,7 @@ function Field({
                                     ? settings.options
                                     : options
                             }
-                            isSearchable={settings.isSearchable || false}
+                            isSearchable={settings.isSearchable || true}
                             isCreatable={settings.isCreatable || false}
                             dataOptions={dataOptions}
                             style={style}

package/src/components/crm/Form.jsx

@@ -10,11 +10,10 @@ import parse from 'html-react-parser';
 import _ from 'lodash';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import { CircleX } from 'akar-icons';
-import { confirmAlert } from 'react-confirm-alert';
 import imageCompression from 'browser-image-compression';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
-import 'react-confirm-alert/src/react-confirm-alert.css';
 
 import CustomFetch from './Fetch';
 import Download from './Download';
@@ -598,11 +597,12 @@ function Form({
 
         try {
             if (s.customButton.confirmation) {
-                confirmAlert({
+                confirmDialog({
                     title: '',
                     message:
                         s.customButton.confirmation.message ||
                         'Are you sure you want to proceed?',
+                    data: formData, // Add context data
                     buttons: [
                         {
                             label: 'Yes',

package/src/components/crm/generic/GenericDashboard.jsx

@@ -9,8 +9,7 @@ import dayjs from 'dayjs';
 import parse from 'html-react-parser';
 import { createSwapy } from 'swapy';
 import { CircleX, Minus, Plus, Star, TrashCan } from 'akar-icons';
-import { confirmAlert } from 'react-confirm-alert';
-import 'react-confirm-alert/src/react-confirm-alert.css';
+import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import CustomFetch from '../../crm/Fetch';
 import MultiSelect from '../../crm/MultiSelect';
@@ -321,9 +320,10 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
     };
 
     const confirmDelete = (widgetId) => {
-        confirmAlert({
+        confirmDialog({
             title: 'Confirm to delete',
             message: 'Are you sure you want to delete this widget?',
+            data: { id: widgetId, name: 'this widget' }, // Add context data
             buttons: [
                 { label: 'Yes', onClick: () => handleDeleteWidget(widgetId) },
                 { label: 'No' },

package/src/components/crm/generic/GenericDetail.jsx

@@ -28,7 +28,6 @@ import parse from 'html-react-parser';
 import Popup from 'reactjs-popup';
 import { motion } from 'framer-motion';
 import Dropzone from 'react-dropzone';
-import { confirmAlert } from 'react-confirm-alert';
 import truncate from 'truncate';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { saveAs } from 'file-saver';
@@ -43,8 +42,8 @@ import {
     Pencil,
     TrashCan,
 } from 'akar-icons';
+import { confirmDialog } from '../../utils/ConfirmDialog';
 
-import 'react-confirm-alert/src/react-confirm-alert.css';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
 
@@ -1277,11 +1276,12 @@ function GenericDetail({
                                 if (e) {
                                     e.stopPropagation();
 
-                                    confirmAlert({
+                                    confirmDialog({
                                         title: 'Confirm to Delete File',
                                         message:
                                             'Are you sure you want to delete ' +
                                             name,
+                                        data: { name: name }, // Add context data
                                         buttons: [
                                             {
                                                 label: 'Yes',

package/src/components/crm/generic/GenericDynamic.jsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import moment from 'moment';
-import 'react-confirm-alert/src/react-confirm-alert.css';
 import { toast } from 'react-toastify';
-import { confirmAlert } from 'react-confirm-alert';
 import { saveAs } from 'file-saver';
 import parse from 'html-react-parser';
 import { Backspace, CloudDownload } from 'akar-icons';
+import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import Download from '../Download';
@@ -687,9 +686,10 @@ const GenericDynamic = ({
             }
         };
 
-        confirmAlert({
+        confirmDialog({
             title: 'Delete File',
             message: 'Are you sure?',
+            data: { name: 'this file' }, // Add some context
             buttons: [
                 {
                     label: 'Yes',

package/src/components/crm/generic/GenericEditableTable.jsx

@@ -2,14 +2,12 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import debounce from 'lodash.debounce';
 import { toast } from 'react-toastify';
-import { confirmAlert } from 'react-confirm-alert';
 import { TrashCan, ArrowUp, ArrowDown, Copy, Water } from 'akar-icons';
 import { CompactPicker } from 'react-color';
+import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';
-
-import 'react-confirm-alert/src/react-confirm-alert.css';
 import styles from './styles/GenericEditableTable.module.scss';
 
 // Updated ColourPicker with an expanded pastel palette
@@ -593,9 +591,10 @@ const GenericEditableTable = ({
 
     // 8) Deletion
     const handleDeleteRow = (entry) => {
-        confirmAlert({
+        confirmDialog({
             title: 'Confirm to Delete',
             message: 'Are you sure you want to delete this entry?',
+            data: entry, // Pass the row data
             buttons: [
                 {
                     label: 'Yes',

package/src/components/crm/generic/GenericFormBuilder.jsx

@@ -4,17 +4,16 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import Popup from 'reactjs-popup';
 import { arrayMoveImmutable } from 'array-move';
-import { confirmAlert } from 'react-confirm-alert';
 import parse from 'html-react-parser';
 import Toggle from 'react-toggle';
 import { toast } from 'react-toastify';
 import { v4 as uuidv4 } from 'uuid';
 import { Editor } from '@tinymce/tinymce-react';
 import { CirclePlus, CircleX, TrashCan } from 'akar-icons';
+import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
-import 'react-confirm-alert/src/react-confirm-alert.css';
 
 import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
@@ -278,9 +277,10 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     };
 
     const handleDeleteField = (id, label) => {
-        confirmAlert({
+        confirmDialog({
             title: `Delete "${label}" Field`,
             message: 'Are you sure you want to delete this field?',
+            data: { name: label, id: id }, // Add context data
             buttons: [
                 {
                     label: 'Yes',

package/src/components/crm/generic/styles/SweetAlertCustom.css

@@ -24,18 +24,42 @@
     line-height: 1.4 !important;
 }
 
-.swal2-confirm {
-    background-color: #2563eb !important;
+/* Button styles for symmetrical appearance */
+.swal2-actions {
+    display: flex !important;
+    justify-content: center !important;
+    gap: 10px !important;
+    width: 100% !important;
+}
+
+.swal2-confirm,
+.swal2-cancel {
+    flex: 1 !important;
+    max-width: 120px !important;
+    min-width: 100px !important;
     border-radius: 4px !important;
     font-weight: 500 !important;
-    padding: 6px 14px !important;
+    padding: 8px 16px !important;
     font-size: 13px !important;
+    margin: 0 !important;
+}
+
+.swal2-confirm {
+    background-color: #2563eb !important;
+}
+
+.swal2-cancel {
+    background-color: #6b7280 !important;
 }
 
 .swal2-confirm:focus {
     box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) !important;
 }
 
+.swal2-cancel:focus {
+    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.3) !important;
+}
+
 /* Make the modal more compact */
 .swal2-popup.swal2-modal {
     max-width: 90%;

package/src/components/utils/ConfirmDialog.js

@@ -0,0 +1,155 @@
+import Swal from 'sweetalert2';
+import '../crm/generic/styles/SweetAlertCustom.css';
+
+/**
+ * A utility function that replaces react-confirm-alert with SweetAlert2
+ * while maintaining a similar look and feel.
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - The title of the confirmation dialog
+ * @param {string} options.message - The message to display in the dialog
+ * @param {Array} options.buttons - Array of button objects with label and onClick properties
+ * @param {Object} options.customUI - Custom UI function (ignored, for compatibility only)
+ * @param {boolean} options.closeOnClickOutside - Whether to close on outside click (default: true)
+ * @param {boolean} options.closeOnEscape - Whether to close on escape key (default: true)
+ * @param {string} options.keyCodeForClose - Key code for closing (ignored, for compatibility only)
+ * @param {boolean} options.willUnmount - Unmount callback (ignored, for compatibility only)
+ * @param {boolean} options.afterClose - After close callback (ignored, for compatibility only)
+ * @param {boolean} options.onClickOutside - On click outside callback (ignored, for compatibility only)
+ * @param {boolean} options.onKeypressEscape - On keypress escape callback (ignored, for compatibility only)
+ * @param {Object} options.overlayClassName - Overlay class name (ignored, for compatibility only)
+ * @param {Object} options.overlayStyle - Overlay style (ignored, for compatibility only)
+ * @param {Object} options.contentClassName - Content class name (ignored, for compatibility only)
+ * @param {Object} options.contentStyle - Content style (ignored, for compatibility only)
+ * @param {Object} options.bodyClassName - Body class name (ignored, for compatibility only)
+ * @param {Object} options.titleClassName - Title class name (ignored, for compatibility only)
+ * @param {Object} options.titleStyle - Title style (ignored, for compatibility only)
+ * @param {Object} options.messageClassName - Message class name (ignored, for compatibility only)
+ * @param {Object} options.messageStyle - Message style (ignored, for compatibility only)
+ * @param {Object} options.buttonClassName - Button class name (ignored, for compatibility only)
+ * @param {Object} options.buttonStyle - Button style (ignored, for compatibility only)
+ * @param {Object} options.childrenClassName - Children class name (ignored, for compatibility only)
+ */
+export const confirmDialog = (options) => {
+    const {
+        title = '',
+        message = '',
+        buttons = [],
+        closeOnClickOutside = true,
+        closeOnEscape = true,
+        data = null, // Optional data object from the selected row
+    } = options;
+
+    // Find Yes and No buttons if they exist
+    const yesButton = buttons.find((btn) => btn.label === 'Yes');
+    const noButton = buttons.find((btn) => btn.label === 'No');
+
+    // Default button text
+    const confirmButtonText = yesButton ? yesButton.label : 'Yes';
+    const cancelButtonText = noButton ? noButton.label : 'No';
+
+    // Enhanced message with item details if available
+    let enhancedMessage = message;
+    let itemDetails = '';
+
+    // Extract meaningful information from the data object if available
+    if (data) {
+        // Common identifiers that might be present in data objects
+        const identifiers = [
+            'name',
+            'label',
+            'title',
+            'email',
+            'username',
+            'id',
+            'code',
+            'reference',
+        ];
+
+        // Find the first available identifier
+        for (const id of identifiers) {
+            if (
+                data[id] &&
+                typeof data[id] === 'string' &&
+                data[id].trim() !== ''
+            ) {
+                itemDetails = data[id];
+                break;
+            }
+        }
+
+        // If we found an identifier, enhance the message
+        if (itemDetails && !message.includes(itemDetails)) {
+            // If the message already contains a question mark, add the details before it
+            if (message.includes('?')) {
+                enhancedMessage = message.replace('?', `"${itemDetails}"?`);
+            } else {
+                // Otherwise, append the details
+                enhancedMessage = `${message} "${itemDetails}"`;
+            }
+        }
+    }
+
+    // Configure SweetAlert2 options
+    const swalOptions = {
+        title: title,
+        html: enhancedMessage,
+        icon: 'question',
+        showCancelButton: true,
+        confirmButtonText: confirmButtonText,
+        cancelButtonText: cancelButtonText,
+        confirmButtonColor: 'var(--primary-color, #4f46e5)',
+        cancelButtonColor: '#6b7280',
+        allowOutsideClick: closeOnClickOutside,
+        allowEscapeKey: closeOnEscape,
+        reverseButtons: true,
+        focusCancel: false,
+        buttonsStyling: true,
+        showClass: {
+            popup: 'swal2-show',
+            backdrop: 'swal2-backdrop-show',
+            icon: 'swal2-icon-show',
+        },
+        customClass: {
+            container: 'swal2-container',
+            popup: 'swal2-popup',
+            header: 'swal2-header',
+            title: 'swal2-title',
+            closeButton: 'swal2-close-button',
+            icon: 'swal2-icon',
+            image: 'swal2-image',
+            htmlContainer: 'swal2-html-container',
+            input: 'swal2-input',
+            inputLabel: 'swal2-input-label',
+            validationMessage: 'swal2-validation-message',
+            actions: 'swal2-actions',
+            confirmButton: 'swal2-confirm',
+            denyButton: 'swal2-deny',
+            cancelButton: 'swal2-cancel',
+            loader: 'swal2-loader',
+            footer: 'swal2-footer',
+        },
+    };
+
+    // Show SweetAlert2 dialog
+    Swal.fire(swalOptions).then((result) => {
+        if (
+            result.isConfirmed &&
+            yesButton &&
+            typeof yesButton.onClick === 'function'
+        ) {
+            yesButton.onClick();
+        } else if (
+            result.dismiss === Swal.DismissReason.cancel &&
+            noButton &&
+            typeof noButton.onClick === 'function'
+        ) {
+            noButton.onClick();
+        }
+    });
+};
+
+// Export as default for compatibility with react-confirm-alert
+export default {
+    confirmAlert: confirmDialog,
+};