@visns-studio/visns-components 5.10.11 → 5.11.2

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

@@ -0,0 +1,302 @@
+import React from 'react';
+import Swal from 'sweetalert2';
+import './styles/SweetAlert.module.css';
+import './styles/DatePickerDialog.css';
+import moment from 'moment';
+
+/**
+ * A utility function that shows a date picker confirmation dialog using SweetAlert2
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - The title of the dialog (default: 'Select Date')
+ * @param {string} options.message - The message to display in the dialog
+ * @param {string} options.confirmLabel - Label for the confirm button (default: 'Confirm')
+ * @param {string} options.cancelLabel - Label for the cancel button (default: 'Cancel')
+ * @param {Function} options.onConfirm - Function to call when confirmed with selected date
+ * @param {Function} options.onCancel - Function to call when cancelled
+ * @param {string} options.defaultDate - Default date value (ISO string or 'now')
+ * @param {string} options.dateFormat - Date format for display (default: 'YYYY-MM-DD')
+ * @param {Object} options.data - Optional data object to pass context
+ * @param {string} options.timezone - Timezone to use ('auto', 'Australia/Perth', or specific timezone)
+ * @param {boolean} options.forcePerth - Force Australia/Perth timezone (default: false)
+ * @param {boolean} options.dateOnly - Return date string only for DATE fields (default: auto-detect)
+ * @returns {Promise} - A promise that resolves when the dialog is closed
+ */
+export const showDatePickerDialog = ({
+    title = 'Select Date',
+    message = 'Please select a date:',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    onConfirm = () => {},
+    onCancel = () => {},
+    defaultDate = null,
+    dateFormat = 'YYYY-MM-DD',
+    data = null,
+    timezone = 'auto',
+    forcePerth = false,
+    dateOnly = 'auto',
+}) => {
+    // Timezone detection and handling
+    const getTargetTimezone = () => {
+        if (forcePerth) {
+            return 'Australia/Perth';
+        }
+        
+        if (timezone === 'auto') {
+            // Try to detect browser timezone
+            try {
+                return Intl.DateTimeFormat().resolvedOptions().timeZone;
+            } catch (e) {
+                console.warn('Could not detect timezone, falling back to Australia/Perth');
+                return 'Australia/Perth';
+            }
+        }
+        
+        return timezone;
+    };
+
+    const targetTimezone = getTargetTimezone();
+
+    // Auto-detect if this should be a date-only field based on field name or explicit config
+    const shouldUseDateOnly = () => {
+        if (dateOnly === true || dateOnly === false) {
+            return dateOnly; // Explicit configuration
+        }
+        
+        // Auto-detection based on field name patterns
+        const fieldName = data?.name || '';
+        const dateOnlyPatterns = [
+            /^date_/i,           // date_sent, date_delivered, etc.
+            /^quarter_/i,        // quarter_1, quarter_2, etc.
+            /_date$/i,           // send_date, delivery_date, etc.
+            /^(start|end)_/i,    // start_date, end_date, etc.
+            /^(birth|death)_/i,  // birth_date, death_date, etc.
+            /^due_/i,            // due_date, etc.
+            /^expiry/i,          // expiry_date, etc.
+        ];
+        
+        const isDateField = dateOnlyPatterns.some(pattern => pattern.test(fieldName));
+        
+        console.log(`Auto-detecting field type for "${fieldName}": ${isDateField ? 'DATE' : 'DATETIME'} field`);
+        
+        return isDateField;
+    };
+
+    const useDateOnly = shouldUseDateOnly();
+
+    // Get timezone offset in hours for a given timezone
+    const getTimezoneOffsetHours = (tz) => {
+        try {
+            // For Australia/Perth, it's UTC+8
+            if (tz === 'Australia/Perth') {
+                return 8; // +8 hours
+            }
+            
+            // For other timezones, calculate the offset
+            const now = new Date();
+            const utc = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));
+            const targetTime = new Date(utc.toLocaleString("en-US", {timeZone: tz}));
+            return (targetTime.getTime() - utc.getTime()) / (1000 * 60 * 60); // Convert to hours
+        } catch (e) {
+            console.warn('Could not calculate timezone offset, using +8 for Perth:', e);
+            return 8; // Default to Perth time
+        }
+    };
+
+    // Convert UTC date to target timezone for display
+    const convertToDisplayDate = (utcDate) => {
+        if (!utcDate) return moment().format(dateFormat);
+        
+        try {
+            // If it's a UTC ISO string, convert to target timezone
+            if (typeof utcDate === 'string' && (utcDate.includes('T') || utcDate.includes('Z'))) {
+                const offsetHours = getTimezoneOffsetHours(targetTimezone);
+                // Add the offset to convert FROM UTC TO local timezone
+                return moment.utc(utcDate).add(offsetHours, 'hours').format(dateFormat);
+            }
+            // If it's already a date string (YYYY-MM-DD), treat it as local date
+            return moment(utcDate).format(dateFormat);
+        } catch (e) {
+            console.warn('Error converting date, using current date:', e);
+            return moment().format(dateFormat);
+        }
+    };
+
+    // Convert selected date for API calls
+    const convertForAPI = (localDateString) => {
+        try {
+            // If useDateOnly is true, just return the date string as-is for DATE fields
+            if (useDateOnly) {
+                console.log(`Date-only field: returning ${localDateString} as-is for DATE field`);
+                return localDateString;
+            }
+            
+            // For DATETIME fields, convert to UTC
+            const offsetHours = getTimezoneOffsetHours(targetTimezone);
+            
+            // Create a UTC moment object from the date string, then treat it as if it were in the target timezone
+            // This means: "2025-06-18" becomes "2025-06-18T00:00:00 in target timezone"
+            const naiveMoment = moment.utc(localDateString, dateFormat);
+            
+            // Now subtract the offset to get the actual UTC time
+            // If it's Perth (+8), we subtract 8 hours to get UTC
+            const utcMoment = naiveMoment.clone().subtract(offsetHours, 'hours');
+            
+            console.log(`Converting: ${localDateString} midnight in ${targetTimezone}`);
+            console.log(`Naive UTC: ${naiveMoment.toISOString()}`);
+            console.log(`Offset: -${offsetHours} hours`);
+            console.log(`Final UTC: ${utcMoment.toISOString()}`);
+            
+            return utcMoment.toISOString();
+        } catch (e) {
+            console.warn('Error converting date, using as-is:', e);
+            // Fallback: return the date string as-is
+            return localDateString;
+        }
+    };
+
+    // Get default date value with timezone handling
+    let initialDate = '';
+    if (defaultDate === 'now') {
+        initialDate = convertToDisplayDate(moment().toISOString());
+    } else if (defaultDate) {
+        initialDate = convertToDisplayDate(defaultDate);
+    } else {
+        initialDate = convertToDisplayDate(moment().toISOString());
+    }
+
+    // Enhanced message with item details if available
+    let enhancedMessage = message;
+    if (data) {
+        const identifiers = ['name', 'label', 'title', 'id'];
+        for (const id of identifiers) {
+            if (data[id] && typeof data[id] === 'string' && data[id].trim() !== '') {
+                if (!message.includes(data[id])) {
+                    enhancedMessage = `${message} (${data[id]})`;
+                }
+                break;
+            }
+        }
+    }
+
+    // Create HTML content with compact date input
+    const htmlContent = `
+        <div style="text-align: left; margin: 8px 0; max-width: 100%; overflow: hidden;">
+            <p style="margin-bottom: 8px; color: #374151; word-wrap: break-word; font-size: 14px;">${enhancedMessage}</p>
+            <div style="margin: 8px 0; width: 100%;">
+                <label for="swal-date-input" style="display: block; margin-bottom: 4px; font-weight: 500; color: #374151; font-size: 13px;">
+                    Date <span style="font-size: 11px; color: #6b7280; font-weight: normal;">(${targetTimezone})</span>:
+                </label>
+                <input 
+                    id="swal-date-input" 
+                    type="date" 
+                    value="${initialDate}" 
+                    class="swal2-input" 
+                    style="
+                        width: 100% !important; 
+                        max-width: 100% !important;
+                        box-sizing: border-box !important;
+                        padding: 8px 10px !important; 
+                        border: 1px solid #d1d5db !important; 
+                        border-radius: 4px !important; 
+                        font-size: 13px !important;
+                        font-family: inherit !important;
+                        background-color: #ffffff !important;
+                        outline: none !important;
+                        transition: border-color 0.2s ease !important;
+                        margin: 0 !important;
+                        display: block !important;
+                        height: 34px !important;
+                    "
+                    onfocus="this.style.borderColor='#4f46e5'"
+                    onblur="this.style.borderColor='#d1d5db'">
+            </div>
+        </div>
+    `;
+
+    // Configure SweetAlert2 options
+    const swalOptions = {
+        title: title,
+        html: htmlContent,
+        icon: 'question',
+        showCancelButton: true,
+        confirmButtonText: confirmLabel,
+        cancelButtonText: cancelLabel,
+        confirmButtonColor: 'var(--primary-color, #4f46e5)',
+        cancelButtonColor: '#6b7280',
+        allowOutsideClick: true,
+        allowEscapeKey: true,
+        reverseButtons: true,
+        focusCancel: false,
+        buttonsStyling: true,
+        width: 'auto',
+        padding: '0.75rem',
+        customClass: {
+            popup: 'date-picker-dialog',
+            htmlContainer: 'date-picker-content'
+        },
+        preConfirm: () => {
+            const dateInput = document.getElementById('swal-date-input');
+            const selectedDate = dateInput.value;
+            
+            if (!selectedDate) {
+                Swal.showValidationMessage('Please select a date');
+                return false;
+            }
+            
+            // Validate the date
+            if (!moment(selectedDate).isValid()) {
+                Swal.showValidationMessage('Please enter a valid date');
+                return false;
+            }
+            
+            return selectedDate;
+        },
+        didOpen: () => {
+            // Focus on the date input when dialog opens
+            const dateInput = document.getElementById('swal-date-input');
+            if (dateInput) {
+                // Additional CSS to ensure the input stays within bounds
+                dateInput.style.setProperty('width', '100%', 'important');
+                dateInput.style.setProperty('max-width', '100%', 'important');
+                dateInput.style.setProperty('box-sizing', 'border-box', 'important');
+                dateInput.style.setProperty('overflow', 'hidden', 'important');
+                
+                // Focus the input
+                dateInput.focus();
+            }
+            
+            // Apply additional container styling
+            const popup = document.querySelector('.date-picker-dialog');
+            if (popup) {
+                popup.style.setProperty('max-width', '90vw', 'important');
+                popup.style.setProperty('width', 'auto', 'important');
+                popup.style.setProperty('min-width', '320px', 'important');
+            }
+            
+            const htmlContainer = document.querySelector('.date-picker-content');
+            if (htmlContainer) {
+                htmlContainer.style.setProperty('overflow', 'hidden', 'important');
+                htmlContainer.style.setProperty('word-wrap', 'break-word', 'important');
+            }
+        }
+    };
+
+    // Show SweetAlert2 dialog
+    return Swal.fire(swalOptions).then((result) => {
+        if (result.isConfirmed && result.value) {
+            // Convert the selected date for API calls (either date string or UTC datetime)
+            const selectedDateForAPI = convertForAPI(result.value);
+            const selectedDateLocal = result.value;
+            
+            // Log for debugging
+            console.log(`Date selected: ${selectedDateLocal} (${targetTimezone}) -> ${selectedDateForAPI} (${useDateOnly ? 'DATE' : 'UTC'})`);
+            
+            onConfirm(selectedDateForAPI, selectedDateLocal, targetTimezone);
+        } else if (result.dismiss === Swal.DismissReason.cancel) {
+            onCancel();
+        }
+    });
+};
+
+export default showDatePickerDialog;

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,14 +49,14 @@ 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';

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