@visns-studio/visns-components 5.11.1 → 5.11.3

package/src/components/crm/controls/DataGridSearch.jsx

@@ -2,11 +2,11 @@ import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
 import {
-    LinkOut,
+    ExternalLink,
     Plus,
     Search,
-    Sort,
-} from 'akar-icons';
+    ArrowUpDown,
+} from 'lucide-react';
 import Download from '../Download';
 import styles from '../styles/DataGrid.module.scss';
 
@@ -100,7 +100,7 @@ const DataGridSearch = ({
             <div className={buttonClassName}>
                 {form.export && form.export.url && (
                     <button className={styles.btn} onClick={exportTrigger}>
-                        <LinkOut
+                        <ExternalLink
                             strokeWidth={2}
                             size={16}
                             style={{ marginRight: '10px' }}
@@ -110,7 +110,7 @@ const DataGridSearch = ({
                 )}
                 {form.sort && form.sort.title && (
                     <button className={styles.btn} onClick={sortTrigger}>
-                        <Sort
+                        <ArrowUpDown
                             strokeWidth={2}
                             size={16}
                             style={{ marginRight: '10px' }}

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

@@ -0,0 +1,100 @@
+import Swal from 'sweetalert2';
+import './styles/SweetAlert.module.css';
+import './styles/AlternativeActionModal.css';
+
+/**
+ * Show an alternative action modal for choosing between different workflows
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - Modal title
+ * @param {string} options.message - Modal message
+ * @param {Array} options.alternatives - Array of alternative actions
+ * @param {Object} options.data - Additional data to pass to callbacks
+ * @param {Function} options.onSelect - Callback when alternative is selected
+ * @param {Function} options.onCancel - Callback when cancelled
+ */
+export const showAlternativeActionModal = async ({
+    title = 'Choose Action',
+    message = 'Please select how you would like to proceed:',
+    alternatives = [],
+    data = {},
+    onSelect,
+    onCancel
+}) => {
+    console.log('Alternative Action Modal - Configuration:', {
+        title,
+        alternatives: alternatives.map(alt => ({ id: alt.id, label: alt.label, workflow: alt.workflow })),
+        data
+    });
+
+    // Generate HTML for alternatives
+    const alternativesHtml = alternatives.map(alternative => {
+        const icon = alternative.icon || '📋';
+        const description = alternative.description || '';
+        
+        return `
+            <div class="alternative-action-option" data-alternative-id="${alternative.id}">
+                <div class="alternative-icon">${icon}</div>
+                <div class="alternative-content">
+                    <div class="alternative-label">${alternative.label}</div>
+                    ${description ? `<div class="alternative-description">${description}</div>` : ''}
+                </div>
+            </div>
+        `;
+    }).join('');
+
+    const result = await Swal.fire({
+        title: title,
+        html: `
+            <div class="alternative-action-modal">
+                <p class="alternative-message">${message}</p>
+                <div class="alternative-options">
+                    ${alternativesHtml}
+                </div>
+            </div>
+        `,
+        showConfirmButton: false,
+        showCancelButton: true,
+        cancelButtonText: 'Cancel',
+        customClass: {
+            container: 'alternative-swal-container',
+            popup: 'alternative-swal-popup',
+            content: 'alternative-swal-content',
+            cancelButton: 'alternative-swal-cancel'
+        },
+        didOpen: () => {
+            // Add click handlers for each alternative
+            const options = document.querySelectorAll('.alternative-action-option');
+            options.forEach(option => {
+                option.addEventListener('click', () => {
+                    const alternativeId = option.getAttribute('data-alternative-id');
+                    const selectedAlternative = alternatives.find(alt => alt.id === alternativeId);
+                    
+                    if (selectedAlternative) {
+                        console.log('Alternative selected:', selectedAlternative);
+                        Swal.close();
+                        
+                        // Call the onSelect callback with the selected alternative
+                        if (onSelect) {
+                            onSelect(selectedAlternative);
+                        }
+                    }
+                });
+
+                // Add hover effects
+                option.addEventListener('mouseenter', () => {
+                    option.style.backgroundColor = '#f8f9fa';
+                    option.style.borderColor = '#007bff';
+                });
+
+                option.addEventListener('mouseleave', () => {
+                    option.style.backgroundColor = '';
+                    option.style.borderColor = '';
+                });
+            });
+        }
+    });
+
+    if (result.isDismissed && onCancel) {
+        onCancel();
+    }
+};

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

@@ -37,6 +37,9 @@ export const showContactSelectorModal = ({
         urlParams = {},
         allowManualEntry = true,
         fields = ['name', 'email'],
+        fieldTypes = {},
+        fieldLabels = {},
+        validation = {},
         multiple = true,
         maxContacts = 10
     } = contactConfig;
@@ -137,7 +140,8 @@ export const showContactSelectorModal = ({
             <div class="contact-item" data-index="${index}">
                 <div class="contact-info">
                     <strong>${contact.name || 'Unknown Contact'}</strong>
-                    ${contact.email ? `<br><small>${contact.email}</small>` : ''}
+                    ${contact.email ? `<br><small>📧 ${contact.email}</small>` : ''}
+                    ${contact.notes ? `<br><small>📝 ${contact.notes.length > 50 ? contact.notes.substring(0, 50) + '...' : contact.notes}</small>` : ''}
                     <span class="contact-type">${contact.type === 'contact' ? 'Existing Contact' : 'Manual Entry'}</span>
                 </div>
                 <button type="button" class="remove-contact-btn" data-index="${index}">×</button>
@@ -148,20 +152,48 @@ export const showContactSelectorModal = ({
             `<option value="${contact.value}">${contact.label}</option>`
         ).join('');
 
-        const manualFieldsHtml = fields.map(field => `
-            <div class="form-group">
-                <div class="form-field-row">
-                    <label for="manual-${field}">${field.charAt(0).toUpperCase() + field.slice(1)}:</label>
-                    <input 
-                        type="${field === 'email' ? 'email' : 'text'}" 
-                        id="manual-${field}" 
-                        class="swal2-input"
-                        placeholder="Enter ${field}"
-                        ${field === 'email' ? 'required' : ''}
-                    >
-                </div>
-            </div>
-        `).join('');
+        const manualFieldsHtml = fields.map(field => {
+            const fieldType = fieldTypes[field] || (field === 'email' ? 'email' : 'text');
+            const fieldLabel = fieldLabels[field] || field.charAt(0).toUpperCase() + field.slice(1);
+            const fieldValidation = validation[field] || {};
+            const isRequired = fieldValidation.required !== false && (field === 'name' || field === 'email');
+            const maxLength = fieldValidation.maxLength || (fieldType === 'textarea' ? 500 : 255);
+            
+            if (fieldType === 'textarea') {
+                return `
+                    <div class="form-group">
+                        <div class="form-field-row">
+                            <label for="manual-${field}">${fieldLabel}:</label>
+                            <textarea 
+                                id="manual-${field}" 
+                                class="swal2-textarea"
+                                placeholder="Enter ${fieldLabel.toLowerCase()}"
+                                rows="3"
+                                maxlength="${maxLength}"
+                                ${isRequired ? 'required' : ''}
+                            ></textarea>
+                            <small class="field-help">Max ${maxLength} characters</small>
+                        </div>
+                    </div>
+                `;
+            } else {
+                return `
+                    <div class="form-group">
+                        <div class="form-field-row">
+                            <label for="manual-${field}">${fieldLabel}:</label>
+                            <input 
+                                type="${fieldType}" 
+                                id="manual-${field}" 
+                                class="swal2-input"
+                                placeholder="Enter ${fieldLabel.toLowerCase()}"
+                                maxlength="${maxLength}"
+                                ${isRequired ? 'required' : ''}
+                            >
+                        </div>
+                    </div>
+                `;
+            }
+        }).join('');
 
         return `
             <div class="contact-selector-modal">
@@ -271,14 +303,25 @@ export const showContactSelectorModal = ({
                 fields.forEach(field => {
                     const input = document.getElementById(`manual-${field}`);
                     const value = input ? input.value.trim() : '';
+                    const fieldValidation = validation[field] || {};
+                    const isRequired = fieldValidation.required !== false && (field === 'name' || field === 'email');
                     
+                    // Validate email format
                     if (field === 'email' && value && !isValidEmail(value)) {
                         isValid = false;
                         input.style.borderColor = '#dc2626';
                         return;
                     }
                     
-                    if (field === 'name' && !value) {
+                    // Validate required fields
+                    if (isRequired && !value) {
+                        isValid = false;
+                        input.style.borderColor = '#dc2626';
+                        return;
+                    }
+                    
+                    // Validate max length
+                    if (fieldValidation.maxLength && value.length > fieldValidation.maxLength) {
                         isValid = false;
                         input.style.borderColor = '#dc2626';
                         return;

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

@@ -0,0 +1,181 @@
+import Swal from 'sweetalert2';
+import moment from 'moment';
+import './styles/SweetAlert.module.css';
+import './styles/DateRangeSelectorModal.css';
+
+/**
+ * Show a date range selector modal for selecting start and end dates
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - Modal title
+ * @param {string} options.message - Modal message
+ * @param {string} options.confirmLabel - Confirm button label
+ * @param {string} options.cancelLabel - Cancel button label
+ * @param {string|null} options.defaultStartDate - Default start date value
+ * @param {string|null} options.defaultEndDate - Default end date value
+ * @param {Object} options.data - Additional data to pass to callbacks
+ * @param {string} options.timezone - Timezone for date handling
+ * @param {boolean} options.forcePerth - Force Australia/Perth timezone
+ * @param {boolean} options.dateOnly - Return date only (no time conversion)
+ * @param {Function} options.onConfirm - Callback when confirmed
+ * @param {Function} options.onCancel - Callback when cancelled
+ */
+export const showDateRangeSelectorModal = async ({
+    title = 'Select Date Range',
+    message = 'Please select start and end dates:',
+    confirmLabel = 'Next: Select Contacts',
+    cancelLabel = 'Cancel',
+    defaultStartDate = null,
+    defaultEndDate = null,
+    data = {},
+    timezone = 'auto',
+    forcePerth = false,
+    dateOnly = false,
+    onConfirm,
+    onCancel
+}) => {
+    // Determine timezone
+    let userTimezone = 'UTC';
+    if (forcePerth) {
+        userTimezone = 'Australia/Perth';
+    } else if (timezone === 'auto') {
+        userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    } else if (timezone && timezone !== 'auto') {
+        userTimezone = timezone;
+    }
+
+    console.log('Date Range Selector - Timezone Configuration:', {
+        inputTimezone: timezone,
+        forcePerth,
+        resolvedTimezone: userTimezone,
+        dateOnly
+    });
+
+    // Convert UTC dates to local timezone for display
+    const convertUTCToLocal = (utcDateString) => {
+        if (!utcDateString || utcDateString === 'now') return '';
+        
+        try {
+            const utcMoment = moment.utc(utcDateString);
+            if (!utcMoment.isValid()) return '';
+            
+            if (dateOnly) {
+                // For DATE fields, just return the date part
+                return utcMoment.format('YYYY-MM-DD');
+            } else {
+                // For DATETIME fields, convert to local timezone
+                const localMoment = utcMoment.clone().tz(userTimezone);
+                return localMoment.format('YYYY-MM-DD');
+            }
+        } catch (error) {
+            console.error('Error converting UTC to local:', error);
+            return '';
+        }
+    };
+
+    // Convert local date to UTC for API
+    const convertLocalToUTC = (localDateString) => {
+        if (!localDateString) return null;
+        
+        try {
+            if (dateOnly) {
+                // For DATE fields, return just the date string
+                return localDateString;
+            } else {
+                // For DATETIME fields, convert to UTC
+                const localMoment = moment.tz(localDateString, userTimezone);
+                return localMoment.utc().toISOString();
+            }
+        } catch (error) {
+            console.error('Error converting local to UTC:', error);
+            return localDateString;
+        }
+    };
+
+    // Prepare default values
+    const displayStartDate = convertUTCToLocal(defaultStartDate);
+    const displayEndDate = convertUTCToLocal(defaultEndDate);
+
+    const timezoneLabel = userTimezone === 'Australia/Perth' ? ' (Perth Time)' : userTimezone !== 'UTC' ? ` (${userTimezone})` : '';
+
+    const result = await Swal.fire({
+        title: title,
+        html: `
+            <div class="date-range-selector-modal">
+                <p class="date-range-message">${message}</p>
+                <div class="date-range-inputs">
+                    <div class="date-input-group">
+                        <label for="start-date-input" class="date-input-label">
+                            Start Date${timezoneLabel}:
+                        </label>
+                        <input 
+                            type="date" 
+                            id="start-date-input" 
+                            class="date-range-input"
+                            value="${displayStartDate}"
+                        />
+                    </div>
+                    <div class="date-input-group">
+                        <label for="end-date-input" class="date-input-label">
+                            End Date${timezoneLabel}:
+                        </label>
+                        <input 
+                            type="date" 
+                            id="end-date-input" 
+                            class="date-range-input"
+                            value="${displayEndDate}"
+                        />
+                    </div>
+                </div>
+            </div>
+        `,
+        showCancelButton: true,
+        confirmButtonText: confirmLabel,
+        cancelButtonText: cancelLabel,
+        customClass: {
+            container: 'date-range-swal-container',
+            popup: 'date-range-swal-popup',
+            content: 'date-range-swal-content',
+            confirmButton: 'date-range-swal-confirm',
+            cancelButton: 'date-range-swal-cancel'
+        },
+        preConfirm: () => {
+            const startDateInput = document.getElementById('start-date-input');
+            const endDateInput = document.getElementById('end-date-input');
+            const startDate = startDateInput.value;
+            const endDate = endDateInput.value;
+
+            if (!startDate) {
+                Swal.showValidationMessage('Please select a start date');
+                return false;
+            }
+
+            if (!endDate) {
+                Swal.showValidationMessage('Please select an end date');
+                return false;
+            }
+
+            if (moment(startDate).isAfter(moment(endDate))) {
+                Swal.showValidationMessage('Start date must be before end date');
+                return false;
+            }
+
+            console.log('Date Range Selected:', {
+                startDate: startDate,
+                endDate: endDate,
+                timezone: userTimezone,
+                dateOnly: dateOnly
+            });
+
+            return {
+                startDate: convertLocalToUTC(startDate),
+                endDate: convertLocalToUTC(endDate)
+            };
+        }
+    });
+
+    if (result.isConfirmed && onConfirm) {
+        await onConfirm(result.value.startDate, result.value.endDate);
+    } else if (result.isDismissed && onCancel) {
+        onCancel();
+    }
+};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Routes, Route, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { SignOut } from 'akar-icons';
+import { LogOut as SignOut } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 

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

@@ -8,7 +8,7 @@ import Popup from 'reactjs-popup';
 import dayjs from 'dayjs';
 import parse from 'html-react-parser';
 import { createSwapy } from 'swapy';
-import { CircleX, Minus, Plus, Star, TrashCan } from 'akar-icons';
+import { X, Minus, Plus, Star, Trash2 } from 'lucide-react';
 import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import CustomFetch from '../../crm/Fetch';
@@ -1320,7 +1320,7 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                                 <button
                                     onClick={() => confirmDelete(widget.id)}
                                 >
-                                    <TrashCan strokeWidth={2} size={12} />
+                                    <Trash2 strokeWidth={2} size={12} />
                                 </button>
                             </div>
                         </div>
@@ -1370,7 +1370,7 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                                     className="modal__close"
                                     onClick={closeModal}
                                 >
-                                    <CircleX strokeWidth={1} size={24} />
+                                    <X strokeWidth={1} size={24} />
                                 </button>
                             </div>
                             <div className="modal__content">
@@ -1397,7 +1397,7 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                                     className="modal__close"
                                     onClick={() => setShowAddWidgetModal(false)}
                                 >
-                                    <CircleX strokeWidth={1} size={24} />
+                                    <X strokeWidth={1} size={24} />
                                 </button>
                             </div>
                             <div className="modal__content">

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

@@ -49,24 +49,26 @@ import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
 import fetchUtil from '../../../utils/fetchUtil';
 import {
-    CircleCheck,
+    CheckCircle as CircleCheck,
     Copy,
-    EyeOpen,
-    EyeSlashed,
+    Eye as EyeOpen,
+    EyeOff as EyeSlashed,
     File,
-    Pencil,
-    TrashCan,
-} from 'akar-icons';
+    Edit as Pencil,
+    Trash2 as TrashCan,
+} from 'lucide-react';
 import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
 
 import Breadcrumb from '../Breadcrumb';
+import AssociationManager from '../AssociationManager';
 import CustomFetch from '../Fetch';
 import Form from '../Form';
 import GenericDynamic from './GenericDynamic';
 import GenericEditableTable from './GenericEditableTable';
+import MergeEntity from '../MergeEntity';
 import MultiSelect from '../MultiSelect';
 import QrCode from '../QrCode';
 import Table from '../DataGrid';
@@ -2490,6 +2492,29 @@ function GenericDetail({
                                     setData={setData}
                                 />
                             );
+                        case 'custom':
+                            // Handle custom components
+                            if (activeTabConfig.component === 'AssociationManager' || activeTabConfig.component === 'ClientAssociationManager') {
+                                return (
+                                    <AssociationManager
+                                        endpoints={activeTabConfig.endpoints}
+                                        config={activeTabConfig.config}
+                                        dataId={routeParams[urlParam]}
+                                        onUpdate={handleReload}
+                                    />
+                                );
+                            }
+                            if (activeTabConfig.component === 'MergeEntity') {
+                                return (
+                                    <MergeEntity
+                                        endpoints={activeTabConfig.endpoints}
+                                        config={activeTabConfig.config}
+                                        dataId={routeParams[urlParam]}
+                                        onUpdate={handleReload}
+                                    />
+                                );
+                            }
+                            return null;
                         default:
                             return null;
                     }

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

@@ -3,7 +3,7 @@ import moment from 'moment';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
 import parse from 'html-react-parser';
-import { Backspace, CloudDownload } from 'akar-icons';
+import { Delete, Download as DownloadIcon } from 'lucide-react';
 import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
@@ -1056,7 +1056,7 @@ const GenericDynamic = ({
                                                                     )
                                                                 }
                                                             >
-                                                                <CloudDownload
+                                                                <DownloadIcon
                                                                     strokeWidth={
                                                                         2
                                                                     }
@@ -1077,7 +1077,7 @@ const GenericDynamic = ({
                                                                     )
                                                                 }
                                                             >
-                                                                <Backspace
+                                                                <Delete
                                                                     strokeWidth={
                                                                         2
                                                                     }

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

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import debounce from 'lodash.debounce';
 import { toast } from 'react-toastify';
-import { TrashCan, ArrowUp, ArrowDown, Copy, Water } from 'akar-icons';
+import { Trash2, ArrowUp, ArrowDown, Copy, Droplets } from 'lucide-react';
 import { CompactPicker } from 'react-color';
 import { confirmDialog } from '../../utils/ConfirmDialog';
 
@@ -65,7 +65,7 @@ const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
                         setColorPickerShow(!colorPickerShow);
                     }}
                 >
-                    <Water size={20} style={{ color: 'black' }} />
+                    <Droplets size={20} style={{ color: 'black' }} />
                 </button>
 
                 {colorPickerShow &&
@@ -1059,7 +1059,7 @@ const GenericEditableTable = ({
                                                             }}
                                                         />
                                                     )}
-                                                    <TrashCan
+                                                    <Trash2
                                                         size={16}
                                                         onClick={() =>
                                                             handleDeleteRow(
@@ -1199,7 +1199,7 @@ const GenericEditableTable = ({
                                                 style={{ cursor: 'pointer' }}
                                             />
                                         )}
-                                        <TrashCan
+                                        <Trash2
                                             size={16}
                                             onClick={() =>
                                                 handleDeleteRow(entry)

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

@@ -28,12 +28,12 @@ import { v4 as uuidv4 } from 'uuid';
 import { Editor } from '@tinymce/tinymce-react';
 import { Tooltip } from 'react-tooltip';
 import {
-    CirclePlus,
-    CircleX,
-    TrashCan,
-    Pencil,
-    ChevronVertical,
-} from 'akar-icons';
+    PlusCircle as CirclePlus,
+    X as CircleX,
+    Trash2 as TrashCan,
+    Edit as Pencil,
+    GripVertical as ChevronVertical,
+} from 'lucide-react';
 import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import 'react-toggle/style.css';