@visns-studio/visns-components 5.11.1 → 5.11.3

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
-import { CloudDownload } from 'akar-icons';
+import { Download as CloudDownload } from 'lucide-react';
 
 import Download from '../Download';
 import Field from '../Field';

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

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Table from '../DataGrid';
-import { Bell, Check, ArrowLeft } from 'akar-icons';
+import { Bell, Check, ArrowLeft } from 'lucide-react';
 import { toast } from 'react-toastify';
 import CustomFetch from '../Fetch';
 import styles from './styles/NotificationList.module.scss';

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

@@ -0,0 +1,194 @@
+import Swal from 'sweetalert2';
+import './styles/SweetAlert.module.css';
+import './styles/ReasonCollectorModal.css';
+
+/**
+ * Show a reason collector modal for collecting "not sent" reasons
+ * @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 {Array} options.reasonOptions - Array of predefined reason options
+ * @param {boolean} options.allowCustomReason - Allow custom reason input
+ * @param {boolean} options.reasonRequired - Whether reason is required
+ * @param {string} options.placeholder - Placeholder for custom reason input
+ * @param {string} options.defaultReason - Default selected reason
+ * @param {Object} options.data - Additional data to pass to callbacks
+ * @param {Function} options.onConfirm - Callback when confirmed
+ * @param {Function} options.onCancel - Callback when cancelled
+ */
+export const showReasonCollectorModal = async ({
+    title = 'Provide Reason',
+    message = 'Please provide a reason:',
+    confirmLabel = 'Save',
+    cancelLabel = 'Cancel',
+    reasonOptions = [
+        'Survey not applicable',
+        'Client does not want survey',
+        'Other'
+    ],
+    allowCustomReason = true,
+    reasonRequired = true,
+    placeholder = 'Enter custom reason...',
+    defaultReason = '',
+    data = {},
+    onConfirm,
+    onCancel
+}) => {
+    console.log('Reason Collector Modal - Configuration:', {
+        title,
+        reasonOptions,
+        allowCustomReason,
+        reasonRequired,
+        defaultReason,
+        data
+    });
+
+    // Generate HTML for reason options (handle "Other" specially for custom input)
+    const reasonOptionsHtml = reasonOptions.map((option, index) => {
+        const isSelected = option === defaultReason;
+        const isOther = option.toLowerCase() === 'other';
+        
+        if (isOther && allowCustomReason) {
+            return `
+                <div class="reason-option reason-option-other">
+                    <div class="reason-radio-container">
+                        <input 
+                            type="radio" 
+                            id="reason-${index}" 
+                            name="reason" 
+                            value="custom"
+                            ${isSelected ? 'checked' : ''}
+                            class="reason-radio"
+                        />
+                        <label for="reason-${index}" class="reason-label">${option}</label>
+                    </div>
+                    <div class="custom-reason-input-container" style="display: none;">
+                        <input 
+                            type="text" 
+                            id="custom-reason-input" 
+                            class="custom-reason-input compact"
+                            placeholder="${placeholder}"
+                        />
+                    </div>
+                </div>
+            `;
+        } else {
+            return `
+                <div class="reason-option">
+                    <input 
+                        type="radio" 
+                        id="reason-${index}" 
+                        name="reason" 
+                        value="${option}"
+                        ${isSelected ? 'checked' : ''}
+                        class="reason-radio"
+                    />
+                    <label for="reason-${index}" class="reason-label">${option}</label>
+                </div>
+            `;
+        }
+    }).join('');
+
+    const result = await Swal.fire({
+        title: title,
+        html: `
+            <div class="reason-collector-modal compact">
+                <p class="reason-message">${message}</p>
+                <div class="reason-options-container compact">
+                    ${reasonOptionsHtml}
+                </div>
+            </div>
+        `,
+        showCancelButton: true,
+        confirmButtonText: confirmLabel,
+        cancelButtonText: cancelLabel,
+        customClass: {
+            container: 'reason-swal-container',
+            popup: 'reason-swal-popup',
+            content: 'reason-swal-content',
+            confirmButton: 'reason-swal-confirm',
+            cancelButton: 'reason-swal-cancel'
+        },
+        didOpen: () => {
+            // Handle custom reason toggle for "Other" option
+            if (allowCustomReason) {
+                const customInputContainer = document.querySelector('.custom-reason-input-container');
+                const customInput = document.getElementById('custom-reason-input');
+                const allRadios = document.querySelectorAll('input[name="reason"]');
+
+                // Find the "Other" radio button
+                let otherRadio = null;
+                allRadios.forEach(radio => {
+                    if (radio.value === 'custom') {
+                        otherRadio = radio;
+                    }
+                });
+
+                if (otherRadio && customInputContainer && customInput) {
+                    // Show/hide custom input based on selection
+                    allRadios.forEach(radio => {
+                        radio.addEventListener('change', () => {
+                            if (radio.value === 'custom') {
+                                customInputContainer.style.display = 'block';
+                                customInput.focus();
+                            } else {
+                                customInputContainer.style.display = 'none';
+                                customInput.value = ''; // Clear input when switching away
+                            }
+                        });
+                    });
+
+                    // Auto-select "Other" radio when typing in input
+                    customInput.addEventListener('input', () => {
+                        if (customInput.value.trim()) {
+                            otherRadio.checked = true;
+                            customInputContainer.style.display = 'block';
+                        }
+                    });
+                }
+            }
+        },
+        preConfirm: () => {
+            const selectedRadio = document.querySelector('input[name="reason"]:checked');
+            
+            if (reasonRequired && !selectedRadio) {
+                Swal.showValidationMessage('Please select a reason');
+                return false;
+            }
+
+            let reason = '';
+            
+            if (selectedRadio) {
+                if (selectedRadio.value === 'custom') {
+                    const customInput = document.getElementById('custom-reason-input');
+                    reason = customInput.value.trim();
+                    
+                    if (reasonRequired && !reason) {
+                        Swal.showValidationMessage('Please enter a custom reason');
+                        return false;
+                    }
+                } else {
+                    reason = selectedRadio.value;
+                }
+            }
+
+            console.log('Reason selected:', {
+                reason: reason,
+                isCustom: selectedRadio?.value === 'custom'
+            });
+
+            return {
+                reason: reason,
+                isCustom: selectedRadio?.value === 'custom'
+            };
+        }
+    });
+
+    if (result.isConfirmed && onConfirm) {
+        await onConfirm(result.value.reason, result.value.isCustom);
+    } else if (result.isDismissed && onCancel) {
+        onCancel();
+    }
+};

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

@@ -4,7 +4,7 @@ import {
     SortableElement,
     sortableHandle,
 } from 'react-sortable-hoc';
-import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
+import { GripVertical, Pencil, Trash2 } from 'lucide-react';
 import get from 'lodash/get';
 import { formatCurrency } from './utils/formatters';
 
@@ -12,7 +12,7 @@ import styles from './styles/SortableQuoteItems.module.scss';
 
 // Drag handle component
 const DragHandle = sortableHandle(() => (
-    <ChevronVertical className={styles.dragHandle} strokeWidth={1} size={22} />
+    <GripVertical className={styles.dragHandle} strokeWidth={1} size={22} />
 ));
 
 // Sortable table row component
@@ -61,7 +61,7 @@ const SortableRow = SortableElement(
                                 onEdit(row);
                             }}
                         />
-                        <TrashCan
+                        <Trash2
                             className={styles.deleteButton}
                             strokeWidth={2}
                             size={20}

package/src/components/crm/generic/shared/formatters.js

@@ -2,17 +2,123 @@ import parse from 'html-react-parser';
 import moment from 'moment';
 import numeral from 'numeral';
 
+/**
+ * Format quarter columns with status, contacts, and reasons in tooltips
+ * @param {*} value - The date value
+ * @param {Object} column - Column configuration
+ * @param {Object} row - Row data with status and contacts
+ * @returns {Object} Formatted quarter cell content with tooltip data
+ */
+const formatQuarterWithStatus = (value, column, row) => {
+    const statusField = column.key + '_status';
+    const contactsField = column.key + '_contacts';
+    const reasonField = column.key + '_reason';
+    
+    const status = row[statusField] || 'pending';
+    const contacts = row[contactsField] || [];
+    const reason = row[reasonField];
+    
+    console.log('Quarter formatting:', {
+        column: column.key,
+        status,
+        contacts,
+        reason,
+        value
+    });
+    
+    // If status is 'sent' and we have a date
+    if (status === 'sent' && value) {
+        const formattedDate = moment(value).isValid() 
+            ? moment(value).format('DD/MM/YYYY')
+            : value;
+        
+        const contactCount = Array.isArray(contacts) ? contacts.length : 0;
+        
+        // Build tooltip content
+        let tooltipText = `Status: Sent on ${formattedDate}`;
+        if (contactCount > 0) {
+            tooltipText += `\nContacts: ${contactCount} contact${contactCount !== 1 ? 's' : ''}`;
+            if (Array.isArray(contacts)) {
+                contacts.forEach((contact, index) => {
+                    if (index < 3) { // Show first 3 contacts
+                        tooltipText += `\n  • ${contact.name || 'Unknown'} ${contact.email ? `(${contact.email})` : ''}`;
+                    }
+                });
+                if (contacts.length > 3) {
+                    tooltipText += `\n  ... and ${contacts.length - 3} more`;
+                }
+            }
+        }
+        
+        return {
+            display: `📅 ${formattedDate}${contactCount > 0 ? ` (${contactCount})` : ''}`,
+            tooltip: tooltipText,
+            style: { color: '#059669', fontWeight: '500' }
+        };
+    }
+    
+    // If status is 'not_sent' with reason
+    if (status === 'not_sent' && reason) {
+        const tooltipText = `Status: Not Sent\nReason: ${reason}`;
+        
+        return {
+            display: `❌ Not Sent`,
+            tooltip: tooltipText,
+            style: { color: '#dc2626', fontWeight: '500' }
+        };
+    }
+    
+    // If we have a date but no clear status (legacy data)
+    if (value) {
+        const formattedDate = moment(value).isValid() 
+            ? moment(value).format('DD/MM/YYYY')
+            : value;
+        
+        const contactCount = Array.isArray(contacts) ? contacts.length : 0;
+        
+        let tooltipText = `Date: ${formattedDate}`;
+        if (contactCount > 0) {
+            tooltipText += `\nContacts: ${contactCount} contact${contactCount !== 1 ? 's' : ''}`;
+            if (Array.isArray(contacts)) {
+                contacts.forEach((contact, index) => {
+                    if (index < 3) {
+                        tooltipText += `\n  • ${contact.name || 'Unknown'} ${contact.email ? `(${contact.email})` : ''}`;
+                    }
+                });
+                if (contacts.length > 3) {
+                    tooltipText += `\n  ... and ${contacts.length - 3} more`;
+                }
+            }
+        }
+        
+        return {
+            display: `${formattedDate}${contactCount > 0 ? ` (${contactCount})` : ''}`,
+            tooltip: tooltipText,
+            style: { color: '#374151' }
+        };
+    }
+    
+    // Default case - return empty or pending
+    return null;
+};
+
 /**
  * Format cell content based on column type or value type
  * @param {*} value - The value to format
  * @param {Object} column - Column configuration object
+ * @param {Object} row - Row data (optional, for quarter status display)
  * @returns {*} Formatted value
  */
-export const formatCellContent = (value, column) => {
+export const formatCellContent = (value, column, row = null) => {
     if (value === null || value === undefined) return '';
     if (value === 0) return '0'; // Explicitly handle zero values
     if (value === '') return '';
 
+    // Special handling for quarter columns with status
+    if (column.key && (column.key.startsWith('quarter_') || column.key === 'anniversary') && row) {
+        return formatQuarterWithStatus(value, column, row);
+    }
+
     // Try to infer the type if not provided
     const valueType = column.type || typeof value;
 

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

@@ -0,0 +1,127 @@
+/* Alternative Action Modal Styles */
+.alternative-action-modal {
+    text-align: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
+.alternative-message {
+    margin-bottom: 24px;
+    color: #4a5568;
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+.alternative-options {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin: 20px 0;
+}
+
+.alternative-action-option {
+    display: flex;
+    align-items: center;
+    padding: 16px 20px;
+    border: 2px solid #e2e8f0;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    background-color: #ffffff;
+    text-align: left;
+}
+
+.alternative-action-option:hover {
+    border-color: #4299e1;
+    background-color: #f7fafc;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.alternative-action-option:active {
+    transform: translateY(0);
+}
+
+.alternative-icon {
+    font-size: 24px;
+    margin-right: 16px;
+    min-width: 32px;
+    text-align: center;
+}
+
+.alternative-content {
+    flex: 1;
+}
+
+.alternative-label {
+    font-weight: 600;
+    color: #2d3748;
+    font-size: 16px;
+    margin-bottom: 4px;
+}
+
+.alternative-description {
+    font-size: 14px;
+    color: #718096;
+    line-height: 1.4;
+}
+
+/* SweetAlert2 custom classes */
+.alternative-swal-container {
+    z-index: 10000;
+}
+
+.alternative-swal-popup {
+    border-radius: 16px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    max-width: 480px;
+}
+
+.alternative-swal-content {
+    padding: 24px;
+}
+
+.alternative-swal-cancel {
+    background-color: #e2e8f0 !important;
+    color: #4a5568 !important;
+    border: none !important;
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+    font-size: 14px !important;
+}
+
+.alternative-swal-cancel:hover {
+    background-color: #cbd5e0 !important;
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+    .alternative-action-option {
+        padding: 14px 16px;
+    }
+    
+    .alternative-icon {
+        font-size: 20px;
+        margin-right: 12px;
+        min-width: 28px;
+    }
+    
+    .alternative-label {
+        font-size: 15px;
+    }
+    
+    .alternative-description {
+        font-size: 13px;
+    }
+    
+    .alternative-options {
+        gap: 10px;
+    }
+}
+
+/* Focus styles for accessibility */
+.alternative-action-option:focus {
+    outline: none;
+    border-color: #4299e1;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
+}

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

@@ -0,0 +1,115 @@
+/* Date Range Selector Modal Styles */
+.date-range-selector-modal {
+    text-align: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
+.date-range-message {
+    margin-bottom: 20px;
+    color: #4a5568;
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+.date-range-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin: 20px 0;
+}
+
+.date-input-group {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.date-input-label {
+    font-weight: 600;
+    color: #2d3748;
+    margin-bottom: 5px;
+    font-size: 14px;
+}
+
+.date-range-input {
+    padding: 12px 16px;
+    border: 2px solid #e2e8f0;
+    border-radius: 8px;
+    font-size: 16px;
+    transition: all 0.2s ease;
+    background-color: #ffffff;
+    color: #2d3748;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.date-range-input:focus {
+    outline: none;
+    border-color: #4299e1;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
+}
+
+.date-range-input:hover {
+    border-color: #cbd5e0;
+}
+
+.date-range-input:invalid {
+    border-color: #e53e3e;
+}
+
+/* SweetAlert2 custom classes */
+.date-range-swal-container {
+    z-index: 10000;
+}
+
+.date-range-swal-popup {
+    border-radius: 12px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.date-range-swal-content {
+    padding: 20px;
+}
+
+.date-range-swal-confirm {
+    background-color: #4299e1 !important;
+    border: none !important;
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+    font-size: 14px !important;
+}
+
+.date-range-swal-confirm:hover {
+    background-color: #3182ce !important;
+}
+
+.date-range-swal-cancel {
+    background-color: #e2e8f0 !important;
+    color: #4a5568 !important;
+    border: none !important;
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+    font-size: 14px !important;
+}
+
+.date-range-swal-cancel:hover {
+    background-color: #cbd5e0 !important;
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+    .date-range-inputs {
+        gap: 12px;
+    }
+    
+    .date-range-input {
+        padding: 10px 12px;
+        font-size: 16px; /* Prevent zoom on iOS */
+    }
+    
+    .date-input-label {
+        font-size: 13px;
+    }
+}