@visns-studio/visns-components 5.12.8 → 5.12.9

package/package.json

@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.12.8",
+    "version": "5.12.9",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/CategorizedDropZone.jsx

@@ -222,10 +222,35 @@ const CategorizedDropZone = ({
     }
 
     if (finalCategories.length === 0) {
+        // No categories available - show a simple dropzone without categorization
+        console.log('CategorizedDropZone: No categories, showing all files', {
+            dataKey,
+            files: entityData[dataKey] || [],
+            entityData
+        });
+        
         return (
             <div className={styles.categorizedDropZone}>
-                <div className={styles.emptyState}>
-                    No categories available. Please configure site photo categories in settings.
+                <div className={styles.noCategoryContent}>
+                    <DropZone
+                        fetchData={fetchData || (() => {
+                            console.log('Files updated (no categories)');
+                        })}
+                        files={entityData[dataKey] || []}
+                        settings={{
+                            url: url,
+                            method: method,
+                            type: 'gallery',
+                            data: {
+                                file_relationship: file_relationship,
+                                file_description: '',
+                            },
+                            model: entityData?.constructor?.name || 'Design',
+                            folder: folder,
+                            filetype: filetype,
+                            deleteUrl: deleteUrl
+                        }}
+                    />
                 </div>
             </div>
         );

package/src/components/DropZone.jsx

@@ -7,7 +7,7 @@ import { arrayMoveImmutable } from 'array-move';
 import Popup from 'reactjs-popup';
 import imageCompression from 'browser-image-compression';
 
-import { confirmDialog } from '../utils/ConfirmDialog';
+import { confirmDialog } from './utils/ConfirmDialog';
 import CustomFetch from './Fetch';
 import Gallery from './Gallery';
 import styles from './styles/DropZone.module.css';
@@ -189,14 +189,18 @@ function VisnsDropZone({ fetchData, files, settings }) {
 
     useEffect(() => {
         if (data?.length > 0) {
+            // Only send the ID field for each file for sorting
+            const sortData = data.map(file => ({ id: file.id }));
+            
             CustomFetch(
                 '/ajax/files/sort_update',
                 'POST',
                 {
-                    list: data,
+                    list: sortData,
                 },
                 function (result) {
                     if (result.error === '') {
+                        console.log('Sort order updated successfully');
                     } else {
                         toast.error(String(result.error));
                     }

package/src/components/Form.jsx

@@ -11,7 +11,7 @@ import _ from 'lodash';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import { X } from 'lucide-react';
 import imageCompression from 'browser-image-compression';
-import { confirmDialog } from '../utils/ConfirmDialog';
+import { confirmDialog } from './utils/ConfirmDialog';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
 

package/src/components/generic/CmsSort.jsx

@@ -15,14 +15,18 @@ const ChildSort = ({ item, url }) => {
 
     useEffect(() => {
         if (data.length > 0) {
+            // Only send the ID field for each item for sorting
+            const sortData = data.map(item => ({ id: item.id }));
+            
             CustomFetch(
                 url + '/sort_update',
                 'POST',
                 {
-                    list: data,
+                    list: sortData,
                 },
                 function (result) {
                     if (result.error === '') {
+                        console.log('Sort order updated successfully');
                     } else {
                         toast.error(String(result.error));
                     }
@@ -60,14 +64,18 @@ const CmsSort = ({ setting, category = false }) => {
     useEffect(() => {
         if (category === false) {
             if (data.length > 0) {
+                // Only send the ID field for each item for sorting
+                const sortData = data.map(item => ({ id: item.id }));
+                
                 CustomFetch(
                     url + '/sort_update',
                     'POST',
                     {
-                        list: data,
+                        list: sortData,
                     },
                     function (result) {
                         if (result.error === '') {
+                            console.log('Sort order updated successfully');
                         } else {
                             toast.error(String(result.error));
                         }

package/src/components/generic/ConfirmationDialog.jsx

@@ -87,10 +87,23 @@ export const showConfirmDialog = ({
     // Show SweetAlert2 dialog
     return Swal.fire(swalOptions).then((result) => {
         if (result.isConfirmed) {
-            onConfirm();
-        } else if (result.dismiss === Swal.DismissReason.cancel) {
-            onCancel();
+            try {
+                onConfirm();
+            } catch (error) {
+                console.error('Error executing onConfirm callback:', error);
+            }
+        } else if (result.dismiss === Swal.DismissReason.cancel || result.isDenied) {
+            try {
+                onCancel();
+            } catch (error) {
+                console.error('Error executing onCancel callback:', error);
+            }
         }
+        
+        return result;
+    }).catch((error) => {
+        console.error('SweetAlert2 error:', error);
+        return error;
     });
 };
 

package/src/components/generic/GenericDashboard.jsx

@@ -9,7 +9,7 @@ import dayjs from 'dayjs';
 import parse from 'html-react-parser';
 import { createSwapy } from 'swapy';
 import { X, Minus, Plus, Star, Trash2 } from 'lucide-react';
-import { confirmDialog } from '../../utils/ConfirmDialog';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';

package/src/components/generic/GenericDynamic.jsx

@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
 import parse from 'html-react-parser';
 import { Delete, Download as DownloadIcon } from 'lucide-react';
-import { confirmDialog } from '../../utils/ConfirmDialog';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import Download from '../Download';

package/src/components/generic/GenericEditableTable.jsx

@@ -4,7 +4,7 @@ import debounce from 'lodash.debounce';
 import { toast } from 'react-toastify';
 import { Trash2, ArrowUp, ArrowDown, Copy, Droplets } from 'lucide-react';
 import { Compact } from '@uiw/react-color';
-import { confirmDialog } from '../../utils/ConfirmDialog';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';

package/src/components/generic/GenericFormBuilder.jsx

@@ -34,7 +34,7 @@ import {
     Edit as Pencil,
     GripVertical as ChevronVertical,
 } from 'lucide-react';
-import { confirmDialog } from '../../utils/ConfirmDialog';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';

package/src/components/generic/GenericSort.jsx

@@ -26,11 +26,14 @@ const ChildSort = ({ item, url }) => {
 
     useEffect(() => {
         if (data.length > 0) {
+            // Only send the ID field for each item for sorting
+            const sortData = data.map(item => ({ id: item.id }));
+            
             CustomFetch(
                 `${url}/sort_update`,
                 'POST',
                 {
-                    list: data,
+                    list: sortData,
                 },
                 function (result) {
                     if (result.error === '') {
@@ -108,6 +111,8 @@ const GenericSort = ({ category = false, layout = 'full' }) => {
                 payload.id = paramValue;
             } else {
                 fetchUrl = fetchUrl + '/sort_update';
+                // For the standard sort_update endpoint, only send IDs
+                payload.list = sortData.map(item => ({ id: item.id }));
             }
 
             if (category === false) {
@@ -116,6 +121,8 @@ const GenericSort = ({ category = false, layout = 'full' }) => {
 
                     if (res.data.error !== '') {
                         toast.error(String(res.data.error));
+                    } else {
+                        toast.success('Sort updated successfully');
                     }
                 }
             }

package/src/components/styles/CategorizedDropZone.module.scss

@@ -104,6 +104,11 @@
     font-size: 16px;
 }
 
+.noCategoryContent {
+    width: 100%;
+    padding: 0;
+}
+
 .loadingState {
     background-color: #f8f9fa;
     border-radius: 8px;

package/src/components/styles/GenericEditableTable.module.scss.backup

@@ -0,0 +1,488 @@
+.schedulingTable {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0.5em 0; // Reduced margin
+
+    th,
+    td {
+        padding: 0.2rem; // Reduced padding for cells
+        text-align: left;
+        border: 1px solid rgba(var(--primary-rgb), 0.1);
+    }
+
+    th {
+        padding: 0.25rem 0.5rem; // Less padding than before
+        font-size: 0.9rem; // Slightly smaller font size
+        font-weight: bold;
+        background-color: var(--primary-color);
+        color: white;
+        text-align: center;
+    }
+
+    td {
+        background-color: rgba(var(--primary-rgb), 0.05);
+    }
+
+    /* Compact styling for native input and select elements */
+    input,
+    select {
+        padding: 0.25rem 0.5rem;
+        margin: 0;
+        font-size: 0.85rem;
+        height: 28px;
+        line-height: 1;
+        border: 1px solid rgba(var(--primary-rgb), 0.1);
+        box-sizing: border-box;
+    }
+}
+
+.categoryRow {
+    background-color: rgba(var(--primary-rgb), 0.15);
+    font-size: 1rem; // Reduced font size
+    font-weight: bold;
+    text-align: left;
+    padding: 0.5rem 0.75rem; // Reduced padding
+    border-bottom: 2px solid var(--primary-color);
+    color: var(--primary-color);
+}
+
+.totalRow {
+    background-color: rgba(var(--primary-rgb), 0.05);
+    font-weight: bold;
+    text-align: right;
+}
+
+.noDataMessage {
+    text-align: center;
+    color: var(--secondary-color);
+    font-size: 1rem;
+    padding: 1em;
+    margin: 1em auto;
+    background: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    max-width: 600px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    font-style: italic;
+}
+
+.polActions {
+    position: fixed;
+    bottom: 15px;
+    right: 20px;
+    width: auto;
+
+    button {
+        display: block;
+        padding: 0.35em 1em;
+        margin: 0 0.15em;
+    }
+}
+
+.gridtxt {
+    &__header {
+        width: 100%;
+        display: block;
+        background: rgba(var(--primary-rgb), 0.05);
+        box-sizing: border-box;
+        padding: 10px 20px;
+        border-radius: var(--br);
+        margin-bottom: 0;
+        font-weight: 700;
+        text-align: center;
+        color: var(--paragraph-color);
+
+        span {
+            font-weight: 700;
+        }
+    }
+
+    > ul {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        list-style: none;
+        padding: 0.85rem;
+        margin: 0;
+
+        li {
+            flex: 0 0 calc(50% - 10px);
+            padding: 0.65rem;
+            border: 1px solid rgba(var(--primary-rgb), 0.095);
+            color: var(--paragraph-color);
+            background: rgba(var(--primary-rgb), 0.015);
+            margin: 3px;
+            border-radius: var(--br);
+            line-height: 1.45;
+            font-size: 0.85rem;
+
+            &.fw-grid-item {
+                flex: 0 0 calc(100% - 10px);
+            }
+
+            &.notecolor {
+                border: 1px solid var(--secondary-color);
+            }
+        }
+    }
+}
+
+.btn {
+    width: max-content;
+    display: inline-block;
+    position: relative;
+    padding: 0.65rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    color: var(--tertiary-color);
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+    border-radius: var(--br);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+    font-size: 1.25em;
+
+    &:hover {
+        color: var(--primary-color);
+        background: var(--highlight-color);
+        border: 1px solid rgba(var(--highlight-rgb), 1.05);
+    }
+}
+
+.btn_compact {
+    width: max-content;
+    display: inline-block;
+    position: relative;
+    padding: 0.4rem 0.75rem; /* Reduced padding for a compact look */
+    cursor: pointer;
+    font-size: 1rem; /* Slightly smaller font size */
+    color: var(--tertiary-color);
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+    border-radius: var(--br);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+
+    &:hover {
+        color: var(--primary-color);
+        background: var(--highlight-color);
+        border: 1px solid rgba(var(--highlight-rgb), 1.05);
+    }
+}
+
+.tdactions {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.1rem;
+
+    span {
+        display: flex;
+        align-items: center;
+        position: relative;
+        width: 16px;
+        height: 16px;
+
+        svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}
+
+.noDataMessage {
+    text-align: center;
+    color: var(--primary-color);
+    font-size: 1rem;
+    padding: 2rem;
+    margin: 2rem auto;
+    background-color: var(--secondary-bg-color, #f8f8f8);
+    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border-radius: 6px;
+    max-width: 80%;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    font-weight: 500;
+    font-family: var(--font-family, Arial, sans-serif);
+}
+
+.noDataMessage:hover {
+    background-color: rgba(var(--primary-rgb), 0.05);
+    border-color: rgba(var(--primary-rgb), 0.2);
+}
+
+.subtotalRow {
+    background-color: rgba(var(--secondary-rgb), 0.15);
+    font-weight: bold;
+    text-align: right;
+    padding: 0.5em; // Reduced padding
+    font-size: 0.8rem; // Reduced font size
+    color: var(--primary-color);
+    border-top: 2px solid var(--primary-color);
+}
+
+.colour {
+    &__cover {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    &__popover {
+        position: absolute;
+        z-index: 9999;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+/* Compact Inline Color Picker Styles */
+.cpicker-inline {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.cpicker-preview-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    min-height: 40px;
+}
+
+.cpicker__box {
+    width: 28px;
+    height: 28px;
+    border: 2px solid #dee2e6;
+    border-radius: 6px;
+    background-color: #ffffff;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    flex-shrink: 0;
+
+    /* Checkerboard pattern for transparency */
+    background-image: 
+        linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
+        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
+    background-size: 6px 6px;
+    background-position: 0 0, 0 3px, 3px -3px, -3px 0px;
+
+    /* When no color is selected */
+    &[style=""] {
+        background: 
+            linear-gradient(45deg, 
+                transparent 40%, 
+                #dc3545 42%, 
+                #dc3545 58%, 
+                transparent 60%
+            ),
+            linear-gradient(-45deg, 
+                transparent 40%, 
+                #dc3545 42%, 
+                #dc3545 58%, 
+                transparent 60%
+            ),
+            #ffffff;
+    }
+}
+
+.cpicker-value {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: #495057;
+    font-family: 'Courier New', monospace;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 3px 6px;
+    border-radius: 3px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    flex-grow: 1;
+}
+
+.cpicker-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 8px;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+
+    /* Ensure Sketch picker fits well and is more compact */
+    .w-color-sketch {
+        box-shadow: none !important;
+        border: none !important;
+        border-radius: 6px !important;
+        max-width: 100% !important;
+        transform: scale(0.85) !important;
+        transform-origin: center top !important;
+    }
+
+    /* Further responsive scaling */
+    @media (max-width: 768px) {
+        padding: 6px;
+        
+        .w-color-sketch {
+            transform: scale(0.75) !important;
+        }
+    }
+
+    @media (max-width: 480px) {
+        padding: 4px;
+        
+        .w-color-sketch {
+            transform: scale(0.65) !important;
+        }
+    }
+}
+
+
+.colour_popover {
+    position: absolute;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 10px;
+    min-width: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 1000;
+
+    .clearContainer {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-top: 8px;
+    }
+
+    .clearButton {
+        width: 100%; /* Make button span the entire width */
+        background: rgba(
+            var(--primary-rgb),
+            0.1
+        ); /* Soft transparent background */
+        color: var(--primary-color);
+        border: none;
+        border-top: 1px solid rgba(var(--primary-rgb), 0.2); /* Subtle separator */
+        border-radius: 0 0 8px 8px; /* Match colour picker's bottom corners */
+        font-size: 13px;
+        padding: 8px;
+        cursor: pointer;
+        transition: background 0.2s, border 0.2s, box-shadow 0.2s;
+        font-weight: 500;
+        text-align: center;
+        box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.05);
+
+        &:hover {
+            background: rgba(var(--primary-rgb), 0.15);
+        }
+
+        &:active {
+            background: rgba(var(--primary-rgb), 0.25);
+            box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+        }
+    }
+}
+
+/* Compact styling for react-select components */
+.react-select__control {
+    min-height: 28px;
+    padding: 0;
+    font-size: 0.85rem;
+    border: 1px solid rgba(var(--primary-rgb), 0.1);
+    box-sizing: border-box;
+}
+
+.react-select__value-container {
+    padding: 0 0.5rem;
+    margin: 0;
+}
+
+.react-select__input {
+    margin: 0;
+    padding: 0;
+}
+
+.react-select__indicator-separator {
+    display: none;
+}
+
+.react-select__indicators {
+    padding: 0 0.25rem;
+}
+
+.newRow {
+    background-color: rgba(
+        var(--primary-rgb),
+        0.15
+    ); /* Slightly lighter background */
+    border-top: 1px dashed rgba(var(--primary-rgb), 0.3);
+    border-bottom: 1px dashed rgba(var(--primary-rgb), 0.3);
+}
+
+.datasetSelector {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    padding: 0.5rem 1rem;
+    background: rgba(var(--primary-rgb), 0.05);
+    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border-radius: var(--br);
+
+    label {
+        font-size: 0.9rem;
+        font-weight: bold;
+        color: var(--paragraph-color);
+    }
+
+    select {
+        padding: 0.4rem 0.75rem;
+        font-size: 0.9rem;
+        border: 1px solid rgba(var(--primary-rgb), 0.1);
+        border-radius: var(--br);
+        background: #fff;
+        outline: none;
+        box-shadow: none;
+    }
+
+    /* New Dataset button styling to match .btn_compact */
+    button {
+        display: inline-block;
+        padding: 0.4rem 0.75rem;
+        font-size: 1rem;
+        color: var(--tertiary-color);
+        text-decoration: none;
+        background: var(--primary-color);
+        border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+        border-radius: var(--br);
+        outline: none;
+        cursor: pointer;
+        transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+
+        &:hover {
+            color: var(--primary-color);
+            background: var(--highlight-color);
+            border: 1px solid rgba(var(--highlight-rgb), 1.05);
+        }
+    }
+}

package/src/components/utils/ConfirmDialog.js

@@ -1,6 +1,8 @@
 import Swal from 'sweetalert2';
 import '../styles/SweetAlert.module.css';
 
+
+
 /**
  * A utility function that replaces react-confirm-alert with SweetAlert2
  * while maintaining a similar look and feel.
@@ -133,17 +135,9 @@ export const confirmDialog = (options) => {
 
     // Show SweetAlert2 dialog
     Swal.fire(swalOptions).then((result) => {
-        if (
-            result.isConfirmed &&
-            yesButton &&
-            typeof yesButton.onClick === 'function'
-        ) {
+        if (result.isConfirmed && yesButton && typeof yesButton.onClick === 'function') {
             yesButton.onClick();
-        } else if (
-            result.dismiss === Swal.DismissReason.cancel &&
-            noButton &&
-            typeof noButton.onClick === 'function'
-        ) {
+        } else if (result.dismiss === Swal.DismissReason.cancel && noButton && typeof noButton.onClick === 'function') {
             noButton.onClick();
         }
     });

package/src/index.js

@@ -4,6 +4,10 @@ import DropZone from './components/DropZone';
 import CategorizedDropZone from './components/CategorizedDropZone';
 import SortableList from './components/sorting/List';
 
+/** Utility Components */
+import { confirmDialog } from './components/utils/ConfirmDialog';
+import { showConfirmDialog } from './components/generic/ConfirmationDialog';
+
 /** CRM Components */
 import AsyncSelect from './components/AsyncSelect';
 import AssociationManager from './components/AssociationManager';
@@ -95,6 +99,7 @@ export {
     CmsDetail,
     CmsIndex,
     CmsSort,
+    confirmDialog,
     CustomFetch,
     DataGrid,
     DataGridSearch,
@@ -133,6 +138,7 @@ export {
     SectionTypeSelector,
     SelectList,
     Select,
+    showConfirmDialog,
     SortableList,
     StagePopupModal,
     Table,

package/src/utils/ConfirmDialog.jsx

@@ -1,67 +1,13 @@
-import { toast } from 'react-toastify';
-
 /**
- * A simple confirmation dialog using toast notifications
- * @param {Object} options - Configuration options
- * @param {string} options.title - Dialog title
- * @param {string} options.message - Dialog message
- * @param {string} options.confirmLabel - Label for the confirm button
- * @param {string} options.cancelLabel - Label for the cancel button
- * @param {Function} options.onConfirm - Function to call when confirmed
- * @param {Function} options.onCancel - Function to call when cancelled
+ * @deprecated This confirmDialog implementation using react-toastify is deprecated.
+ * Use the SweetAlert2 version from './components/utils/ConfirmDialog' instead.
+ * 
+ * Import path should be: import { confirmDialog } from './components/utils/ConfirmDialog';
+ * 
+ * This file exists only for backward compatibility and will be removed in a future version.
  */
-export const confirmDialog = ({
-    title = 'Confirm',
-    message = 'Are you sure?',
-    confirmLabel = 'Yes',
-    cancelLabel = 'No',
-    onConfirm = () => {},
-    onCancel = () => {}
-}) => {
-    // Create a custom toast with buttons
-    toast.info(
-        <div>
-            <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>{title}</div>
-            <div style={{ marginBottom: '16px' }}>{message}</div>
-            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
-                <button
-                    onClick={() => {
-                        toast.dismiss();
-                        onCancel();
-                    }}
-                    style={{
-                        padding: '6px 12px',
-                        background: '#f5f5f5',
-                        border: '1px solid #ddd',
-                        borderRadius: '4px',
-                        cursor: 'pointer'
-                    }}
-                >
-                    {cancelLabel}
-                </button>
-                <button
-                    onClick={() => {
-                        toast.dismiss();
-                        onConfirm();
-                    }}
-                    style={{
-                        padding: '6px 12px',
-                        background: '#2563eb',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: 'pointer'
-                    }}
-                >
-                    {confirmLabel}
-                </button>
-            </div>
-        </div>,
-        {
-            autoClose: false,
-            closeButton: false,
-            closeOnClick: false,
-            draggable: false
-        }
-    );
-};
+
+console.warn('DEPRECATED: You are importing confirmDialog from utils/ConfirmDialog.jsx (toastify version). Please update your import to use ./components/utils/ConfirmDialog (SweetAlert2 version) instead.');
+
+// Re-export the correct SweetAlert2 version
+export { confirmDialog } from '../components/utils/ConfirmDialog';