@visns-studio/visns-components 5.10.11 → 5.11.2

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

@@ -0,0 +1,194 @@
+import React, { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { saveAs } from 'file-saver';
+import { Download as CloudDownload } from 'lucide-react';
+
+import Download from '../Download';
+import Field from '../Field';
+
+import reportStyles from './styles/ReportForm.module.scss';
+
+const GenericReportForm = ({ config, userProfile, onExport, onFormChange }) => {
+    const [formData, setFormData] = useState({});
+
+    const handleChange = (e) => {
+        const {
+            value,
+            dataset: { name },
+        } = e.target;
+
+        const newFormData = { ...formData, [name]: value };
+        setFormData(newFormData);
+        
+        // Notify parent component of form change
+        if (onFormChange) {
+            onFormChange(newFormData);
+        }
+    };
+
+    const handleChangeDate = (date, id) => {
+        const newFormData = { ...formData, [id]: date };
+        setFormData(newFormData);
+        
+        // Notify parent component of form change
+        if (onFormChange) {
+            onFormChange(newFormData);
+        }
+    };
+
+    const handleChangeSelect = (inputValue, _, id) => {
+        const newFormData = { ...formData, [id]: inputValue };
+        setFormData(newFormData);
+        
+        // Notify parent component of form change
+        if (onFormChange) {
+            onFormChange(newFormData);
+        }
+    };
+
+    const handleExport = async (e) => {
+        try {
+            if (e) {
+                e.preventDefault();
+            }
+
+            // Check if there's a custom export handler
+            if (onExport) {
+                return onExport(formData);
+            }
+
+            // Default export logic
+            const missingFields = config.form.filters
+                .filter(
+                    (item) => item.required === true && formData[item.id] === ''
+                )
+                .map((item) => item.label);
+
+            if (missingFields.length > 0) {
+                const fieldNames = missingFields.join(', ');
+                const errorMessage = `Please fill in a value for the following field(s): ${fieldNames}.`;
+                toast.error(errorMessage);
+            } else {
+                toast.info('Preparing your export...');
+
+                const res = await Download(
+                    config.form.url,
+                    config.form.method,
+                    formData
+                );
+
+                if (res.data.error) {
+                    toast.error(res.data.error);
+                } else {
+                    // Assuming the response contains a Blob or similar data
+                    if (res.data && res.data instanceof Blob) {
+                        const fileName = `${config.form.filename}`;
+                        saveAs(res.data, fileName);
+                        toast.success('Export completed successfully');
+                    } else {
+                        // Handle the case where the response is not a Blob
+                        toast.error('Invalid file format received.');
+                    }
+                }
+            }
+        } catch (err) {
+            console.error(err);
+            toast.error('An error occurred during export');
+        }
+    };
+
+    useEffect(() => {
+        if (config.form?.filters) {
+            const tmpForm = config.form.filters.reduce((acc, item) => {
+                acc[item.id] = '';
+                return acc;
+            }, {});
+            setFormData(tmpForm);
+            
+            // Notify parent component of initial form data
+            if (onFormChange) {
+                onFormChange(tmpForm);
+            }
+        }
+    }, [config.form?.filters, onFormChange]);
+
+    // Determine if the form has a title
+    const formTitle = config.form?.title || 'Export Report';
+    const formDescription =
+        config.form?.description || 'Select your export criteria below.';
+
+    // Check if form configuration is valid
+    if (!config.form?.filters) {
+        return (
+            <div className={reportStyles.reportFormContainer}>
+                <div className={reportStyles.reportForm}>
+                    <h2 className={reportStyles.formTitle}>No Report Configuration</h2>
+                    <p className={reportStyles.formDescription}>
+                        Report form configuration is missing.
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={reportStyles.reportFormContainer}>
+            <form className={reportStyles.reportForm}>
+                <h2 className={reportStyles.formTitle}>{formTitle}</h2>
+                <p className={reportStyles.formDescription}>
+                    {formDescription}
+                </p>
+
+                {config.form.filters.map((item, key) => (
+                    <div
+                        key={`filter-container-${key}`}
+                        className={`${reportStyles.formField} ${
+                            item.fullWidth ? reportStyles.fullWidthField : ''
+                        }`}
+                    >
+                        <Field
+                            api={userProfile?.settings?.api}
+                            autocompleteCallback={() => {}}
+                            childDropdownCallback={() => {}}
+                            fetchData={() => {}}
+                            formData={formData}
+                            inputClass={''}
+                            inputValue={formData[item.id]}
+                            key={`filter-fields-${key}`}
+                            mapbox={{}}
+                            onChange={handleChange}
+                            onChangeCheckbox={() => {}}
+                            onChangeDate={handleChangeDate}
+                            onChangeNumberFormat={() => {}}
+                            onChangeRicheditor={() => {}}
+                            onChangeSelect={handleChangeSelect}
+                            onChangeToggle={() => {}}
+                            settings={item}
+                            setFormData={setFormData}
+                            style={userProfile?.settings?.style}
+                            uploadProgress={0}
+                            userProfile={userProfile}
+                        />
+                    </div>
+                ))}
+
+                <div className={reportStyles.formActions}>
+                    <button
+                        className={reportStyles.exportButton}
+                        onClick={handleExport}
+                        type="button"
+                    >
+                        <CloudDownload
+                            strokeWidth={2}
+                            size={18}
+                            style={{ marginRight: '8px' }}
+                        />{' '}
+                        Export
+                    </button>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default GenericReportForm;

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

@@ -0,0 +1,231 @@
+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, 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;
+
+    switch (valueType) {
+        case 'date':
+            return moment(value).isValid()
+                ? moment(value).format(column.format || 'DD/MM/YYYY')
+                : value;
+        case 'datetime':
+            return moment(value).isValid()
+                ? moment(value).format(column.format || 'DD/MM/YYYY HH:mm')
+                : value;
+        case 'currency':
+            return numeral(value).format(column.format || '$0,0.00');
+        case 'number':
+            // Check if it's actually a number before formatting
+            return !isNaN(parseFloat(value)) && isFinite(value)
+                ? numeral(value).format(column.format || '0,0')
+                : value;
+        case 'boolean':
+            if (
+                value === 1 ||
+                value === true ||
+                value === 'true' ||
+                value === 'yes' ||
+                value === 'Yes'
+            ) {
+                return 'Yes';
+            }
+            if (
+                value === 0 ||
+                value === false ||
+                value === 'false' ||
+                value === 'no' ||
+                value === 'No'
+            ) {
+                return 'No';
+            }
+            return value;
+        case 'year':
+            // Special handling for year values
+            return value.toString();
+        case 'quarter':
+            // Special handling for quarter values (Q1, Q2, etc.)
+            if (value && value.toString().startsWith('Q')) {
+                return value;
+            }
+            return value;
+        case 'html':
+            // Explicitly parse HTML content
+            return parse(String(value));
+        case 'richtext':
+            // Parse rich text content
+            return parse(String(value));
+        default:
+            // For text values, check if it contains HTML tags
+            if (
+                typeof value === 'string' &&
+                (value.includes('<br') ||
+                    value.includes('<p>') ||
+                    value.includes('<div') ||
+                    value.includes('<span'))
+            ) {
+                // Ensure <br /> tags are properly handled
+                const processedValue = String(value)
+                    .replace(/<br \/>/g, '<br>')
+                    .replace(/<br\/>/g, '<br>');
+                return parse(processedValue);
+            }
+            return value;
+    }
+};
+
+/**
+ * Generate year options for dropdown
+ * @param {number} startYear - Starting year
+ * @returns {Array} Array of year options
+ */
+export const generateYearOptions = (startYear) => {
+    const currentYear = new Date().getFullYear();
+    const years = [];
+
+    // Start from the specified year and go up to current year
+    for (let year = startYear; year <= currentYear + 1; year++) {
+        years.push({ value: year.toString(), label: year.toString() });
+    }
+
+    return years;
+};
+
+/**
+ * Apply custom styling from userProfile
+ * @param {Object} userProfile - User profile object
+ * @returns {Object} Custom styles object
+ */
+export const getCustomStyles = (userProfile) => {
+    const customStyles = {};
+
+    if (userProfile?.settings?.style) {
+        const { style } = userProfile.settings;
+
+        if (style.hoverColor) {
+            customStyles.hoverColor = {
+                '--hover-color': style.hoverColor,
+            };
+        }
+    }
+
+    return customStyles;
+};