@visns-studio/visns-components 5.10.10 → 5.11.1

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

@@ -0,0 +1,1534 @@
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { toast } from 'react-toastify';
+import parse from 'html-react-parser';
+import moment from 'moment';
+import numeral from 'numeral';
+
+import CustomFetch from '../Fetch';
+import MultiSelect from '../MultiSelect';
+import { showDatePickerDialog } from './DatePickerDialog';
+import { showContactSelectorModal } from './ContactSelectorModal';
+import styles from './styles/GenericIndex.module.scss';
+
+// ContactTooltip component for enhanced contact display
+const ContactTooltip = ({ contacts, children }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const tooltipRef = useRef(null);
+    const triggerRef = useRef(null);
+
+    const handleMouseEnter = (e) => {
+        if (!contacts || contacts.length === 0) return;
+        
+        const rect = e.currentTarget.getBoundingClientRect();
+        setPosition({
+            x: rect.left + rect.width / 2,
+            y: rect.top - 10
+        });
+        setIsVisible(true);
+    };
+
+    const handleMouseLeave = () => {
+        setIsVisible(false);
+    };
+
+    const formatContact = (contact) => {
+        const name = contact.name || 'Unknown Contact';
+        const email = contact.email || '';
+        const type = contact.type === 'contact' ? 'Existing Contact' : 'Manual Entry';
+        
+        return { name, email, type };
+    };
+
+    return (
+        <>
+            <div
+                ref={triggerRef}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                style={{ position: 'relative' }}
+            >
+                {children}
+            </div>
+            
+            {isVisible && contacts && contacts.length > 0 && (
+                <div
+                    ref={tooltipRef}
+                    className={styles.contactTooltip}
+                    style={{
+                        position: 'fixed',
+                        left: `${position.x}px`,
+                        top: `${position.y}px`,
+                        transform: 'translateX(-50%) translateY(-100%)',
+                        zIndex: 9999,
+                    }}
+                >
+                    <div className={styles.contactTooltipHeader}>
+                        <strong>{contacts.length} Contact{contacts.length !== 1 ? 's' : ''}</strong>
+                    </div>
+                    <div className={styles.contactTooltipBody}>
+                        {contacts.map((contact, index) => {
+                            const { name, email, type } = formatContact(contact);
+                            return (
+                                <div key={index} className={styles.contactTooltipItem}>
+                                    <div className={styles.contactName}>{name}</div>
+                                    {email && <div className={styles.contactEmail}>{email}</div>}
+                                    <div className={styles.contactType}>{type}</div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                    <div className={styles.contactTooltipArrow}></div>
+                </div>
+            )}
+        </>
+    );
+};
+
+const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) => {
+    const [gridData, setGridData] = useState([]);
+    const [sortedData, setSortedData] = useState([]);
+    const [, setFilteredData] = useState([]);
+    const [filterValues, setFilterValues] = useState({});
+    const [settingsFilterValues, setSettingsFilterValues] = useState({});
+    const [filterOptions, setFilterOptions] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [filtersCollapsed, setFiltersCollapsed] = useState(false);
+    const [sortConfig, setSortConfig] = useState({
+        key: null,
+        direction: 'asc',
+    });
+    const prevFetchParamsRef = useRef(null);
+
+    // Extract data and settings from config using useMemo to prevent unnecessary re-renders
+    const {
+        settings,
+        columns = [],
+        data: configData = [],
+    } = useMemo(
+        () => ({
+            settings: config.settings || {},
+            columns: config.columns || [],
+            data: config.data || data || [],
+        }),
+        [config.settings, config.columns, config.data, data]
+    );
+
+    // Create table headers from columns
+    const headers = useMemo(
+        () => columns.map((col) => col.header || col.name || ''),
+        [columns]
+    );
+
+    // Format cell content based on column type or value type
+    const formatCellContent = (value, column, row = null) => {
+        if (value === null || value === undefined) return '';
+        if (value === 0) return '0'; // Explicitly handle zero values
+        if (value === '') return '';
+
+        // Check if this is a date field with contacts (survey workflow)
+        if (column.type === 'date' && column.onClick?.type === 'date_with_contacts' && row) {
+            return formatDateWithContacts(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;
+        }
+    };
+
+    // Format date field with associated contacts
+    const formatDateWithContacts = (dateValue, column, row) => {
+        const contactsField = column.key + '_contacts';
+        const contacts = row[contactsField];
+        
+        // Format the date
+        const formattedDate = moment(dateValue).isValid()
+            ? moment(dateValue).format(column.format || 'DD/MM/YYYY')
+            : dateValue;
+
+        // If no contacts, just return the date
+        if (!contacts || !Array.isArray(contacts) || contacts.length === 0) {
+            return formattedDate;
+        }
+
+        // Create JSX element to display date + contacts with enhanced tooltip
+        return (
+            <div className={styles.dateWithContacts}>
+                <div className={styles.dateValue}>{formattedDate}</div>
+                <ContactTooltip contacts={contacts}>
+                    <div className={styles.contactsSummary}>
+                        📧 {contacts.length} contact{contacts.length !== 1 ? 's' : ''}
+                    </div>
+                </ContactTooltip>
+            </div>
+        );
+    };
+
+
+    // State for headers from API response
+    const [gridHeaders, setGridHeaders] = useState([]);
+
+    // Function to sort data
+    const sortData = useCallback(
+        (data, key, direction) => {
+            if (!key) return [...data];
+
+            return [...data].sort((a, b) => {
+                // Find the header config for this key to determine type
+                const headerConfig = gridHeaders.find((h) => h.key === key);
+                const type = headerConfig?.type || 'text';
+
+                // Get values, handling null/undefined
+                let aValue =
+                    a[key] === null || a[key] === undefined ? '' : a[key];
+                let bValue =
+                    b[key] === null || b[key] === undefined ? '' : b[key];
+
+                // Sort based on type
+                switch (type) {
+                    case 'number':
+                    case 'year':
+                        aValue = parseFloat(aValue) || 0;
+                        bValue = parseFloat(bValue) || 0;
+                        break;
+                    case 'date':
+                        // Convert to timestamp for comparison
+                        aValue = aValue ? new Date(aValue).getTime() : 0;
+                        bValue = bValue ? new Date(bValue).getTime() : 0;
+                        break;
+                    default:
+                        // For text, convert to lowercase strings
+                        aValue = String(aValue).toLowerCase();
+                        bValue = String(bValue).toLowerCase();
+                }
+
+                // Compare values
+                if (aValue < bValue) {
+                    return direction === 'asc' ? -1 : 1;
+                }
+                if (aValue > bValue) {
+                    return direction === 'asc' ? 1 : -1;
+                }
+                return 0;
+            });
+        },
+        [gridHeaders]
+    );
+
+    // Handle sort request
+    const requestSort = useCallback((key) => {
+        // If clicking the same column, toggle direction
+        // Otherwise, start with ascending sort for the new column
+        setSortConfig((prevConfig) => {
+            const newDirection =
+                prevConfig.key === key && prevConfig.direction === 'asc'
+                    ? 'desc'
+                    : 'asc';
+
+            return { key, direction: newDirection };
+        });
+    }, []);
+
+    // Function to filter data based on filter values
+    const filterData = useCallback(
+        (data) => {
+            // If no filter values are set, return the original data
+            if (Object.keys(filterValues).length === 0) {
+                return data;
+            }
+
+            // Filter the data based on the filter values
+            return data.filter((row) => {
+                // Check each filter
+                return Object.entries(filterValues).every(([key, value]) => {
+                    // Skip empty filter values
+                    if (!value) return true;
+
+                    // Get the row value
+                    const rowValue = row[key];
+                    if (rowValue === null || rowValue === undefined)
+                        return false;
+
+                    // Find the header config for this key
+                    const headerConfig = gridHeaders.find((h) => h.key === key);
+                    if (!headerConfig || !headerConfig.filter) return true;
+
+                    const { type, operator } = headerConfig.filter;
+
+                    // Apply filter based on type and operator
+                    switch (type) {
+                        case 'string':
+                            const rowStr = String(rowValue).toLowerCase();
+                            const filterStr = String(value).toLowerCase();
+
+                            switch (operator) {
+                                case 'equals':
+                                    return rowStr === filterStr;
+                                case 'contains':
+                                    return rowStr.includes(filterStr);
+                                case 'startsWith':
+                                    return rowStr.startsWith(filterStr);
+                                case 'endsWith':
+                                    return rowStr.endsWith(filterStr);
+                                default:
+                                    return rowStr.includes(filterStr);
+                            }
+
+                        case 'number':
+                            const rowNum = parseFloat(rowValue);
+                            const filterNum = parseFloat(value);
+
+                            if (isNaN(rowNum) || isNaN(filterNum)) return false;
+
+                            switch (operator) {
+                                case 'equals':
+                                    return rowNum === filterNum;
+                                case 'greaterThan':
+                                    return rowNum > filterNum;
+                                case 'lessThan':
+                                    return rowNum < filterNum;
+                                case 'greaterThanOrEqual':
+                                    return rowNum >= filterNum;
+                                case 'lessThanOrEqual':
+                                    return rowNum <= filterNum;
+                                default:
+                                    return rowNum === filterNum;
+                            }
+
+                        case 'date':
+                            const rowDate = new Date(rowValue);
+                            const filterDate = new Date(value);
+
+                            if (
+                                isNaN(rowDate.getTime()) ||
+                                isNaN(filterDate.getTime())
+                            )
+                                return false;
+
+                            switch (operator) {
+                                case 'equals':
+                                    return (
+                                        rowDate.toDateString() ===
+                                        filterDate.toDateString()
+                                    );
+                                case 'after':
+                                    return rowDate > filterDate;
+                                case 'before':
+                                    return rowDate < filterDate;
+                                default:
+                                    return (
+                                        rowDate.toDateString() ===
+                                        filterDate.toDateString()
+                                    );
+                            }
+
+                        default:
+                            return true;
+                    }
+                });
+            });
+        },
+        [filterValues, gridHeaders]
+    );
+
+    // Handle filter change
+    const handleFilterChange = useCallback((key, value) => {
+        setFilterValues((prev) => ({
+            ...prev,
+            [key]: value,
+        }));
+    }, []);
+
+    // Effect to update filteredData and sortedData when gridData, filterValues, or sortConfig changes
+    useEffect(() => {
+        if (gridData.length > 0) {
+            // First apply filters
+            const filtered = filterData(gridData);
+            setFilteredData(filtered);
+
+            // Then sort the filtered data
+            const sorted = sortData(
+                filtered,
+                sortConfig.key,
+                sortConfig.direction
+            );
+            setSortedData(sorted);
+        } else {
+            setFilteredData([]);
+            setSortedData([]);
+        }
+    }, [gridData, filterValues, sortConfig, sortData, filterData]);
+
+    // Load data from API if gridSetting.fetch is provided
+    useEffect(() => {
+        const fetchData = async () => {
+            // Check if we should use static data instead of fetching
+            if (settings?.useStaticData && settings?.staticData) {
+                const staticData = settings.staticData;
+                
+                if (staticData.header && staticData.rows) {
+                    // Set the headers from the static data
+                    const headerEntries = Object.entries(staticData.header);
+                    setGridHeaders(
+                        headerEntries.map(([key, config]) => ({
+                            key,
+                            label: config.label || key,
+                            sort: config.sort || key,
+                            type: config.type || 'text',
+                            filter: config.filter || null,
+                            onClick: config.onClick || null,
+                        }))
+                    );
+
+                    // Initialize filter values
+                    const initialFilterValues = {};
+                    headerEntries.forEach(([key, config]) => {
+                        if (config.filter) {
+                            initialFilterValues[key] = '';
+                        }
+                    });
+                    setFilterValues(initialFilterValues);
+
+                    // Set the rows data
+                    const newData = staticData.rows || [];
+                    setGridData(newData);
+                    setSortedData(newData);
+                    
+                    // Notify parent component of data change
+                    if (onDataChange) {
+                        onDataChange(newData);
+                    }
+                }
+                return;
+            }
+
+            // Only fetch if we have a URL
+            if (!settings?.fetch?.url) {
+                if (configData && configData.length > 0) {
+                    // Use provided data if no fetch setting
+                    setGridData(configData);
+                }
+                return;
+            }
+
+            const url = settings.fetch.url;
+            const method = settings.fetch.method || 'POST';
+
+            // Combine base params with settings filter values
+            const params = {
+                ...(settings.fetch.params || {}),
+                ...settingsFilterValues,
+            };
+
+            // Create a string representation of the fetch parameters for comparison
+            const fetchParamsString = JSON.stringify({ url, method, params });
+
+            // Skip fetch if the parameters haven't changed
+            if (prevFetchParamsRef.current === fetchParamsString) {
+                return;
+            }
+
+            // Update the ref with current parameters
+            prevFetchParamsRef.current = fetchParamsString;
+
+            setLoading(true);
+            try {
+                const response = await CustomFetch(url, method, params);
+
+                if (response.data.data) {
+                    // Check if the response has the expected structure with header and rows
+                    if (response.data.data.header && response.data.data.rows) {
+                        // Set the headers from the response with the new structure
+                        const headerEntries = Object.entries(
+                            response.data.data.header
+                        );
+                        setGridHeaders(
+                            headerEntries.map(([key, config]) => ({
+                                key,
+                                label: config.label || key,
+                                sort: config.sort || key,
+                                type: config.type || 'text',
+                                filter: config.filter || null,
+                                onClick: config.onClick || null,
+                            }))
+                        );
+
+                        // Initialize filter values
+                        const initialFilterValues = {};
+                        headerEntries.forEach(([key, config]) => {
+                            if (config.filter) {
+                                initialFilterValues[key] = '';
+                            }
+                        });
+                        setFilterValues(initialFilterValues);
+
+                        // Set the rows data
+                        const newData = response.data.data.rows || [];
+                        setGridData(newData);
+                        setSortedData(newData);
+                        
+                        // Notify parent component of data change
+                        if (onDataChange) {
+                            onDataChange(newData);
+                        }
+                    } else {
+                        // Fallback to the previous behavior if the structure is different
+                        const newData = response.data.data.data || [];
+                        setGridData(newData);
+                        setSortedData(newData);
+                        
+                        // Notify parent component of data change
+                        if (onDataChange) {
+                            onDataChange(newData);
+                        }
+                    }
+                }
+            } catch (error) {
+                console.error('Error fetching grid data:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [
+        // Only depend on the specific properties we need, not the entire objects
+        settings?.fetch?.url,
+        settings?.fetch?.method,
+        // Use JSON.stringify for the params to detect deep changes
+        JSON.stringify(settings?.fetch?.params),
+        JSON.stringify(settingsFilterValues),
+        // Only depend on data if we're not fetching
+        !settings?.fetch?.url ? JSON.stringify(configData) : null,
+        // Include static data dependencies
+        settings?.useStaticData,
+        JSON.stringify(settings?.staticData),
+        onDataChange,
+    ]);
+
+    // Generate year options for dropdown
+    const generateYearOptions = useCallback((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;
+    }, []);
+
+    // Fetch filter options from URL
+    const fetchFilterOptions = useCallback(async (filter) => {
+        if (!filter.url) return;
+
+        try {
+            const response = await CustomFetch(filter.url, 'POST', {});
+            if (response.data && response.data.data) {
+                setFilterOptions(prev => ({
+                    ...prev,
+                    [filter.id]: response.data.data
+                }));
+            }
+        } catch (error) {
+            console.error(`Error fetching options for ${filter.id}:`, error);
+            toast.error(`Failed to load ${filter.label} options`);
+        }
+    }, []);
+
+    // Initialize settings filters and fetch options
+    useEffect(() => {
+        if (settings?.filters && settings.filters.length > 0) {
+            const initialValues = {};
+
+            settings.filters.forEach((filter) => {
+                if ((filter.type === 'dropdown' || filter.type === 'multiselect') && (filter.id === 'year' || filter.startYear)) {
+                    // For year filters with 'now' value, set to current year
+                    if (filter.value === 'now') {
+                        const currentYear = new Date().getFullYear().toString();
+                        // For multiselect, check isMulti to determine if it should be array or single value
+                        if (filter.type === 'multiselect') {
+                            const value = filter.isMulti === false ? currentYear : [currentYear];
+                            initialValues[filter.id] = value;
+                        } else {
+                            initialValues[filter.id] = currentYear;
+                        }
+                    } else {
+                        if (filter.type === 'multiselect') {
+                            initialValues[filter.id] = filter.isMulti === false ? (filter.value || '') : (filter.value || []);
+                        } else {
+                            initialValues[filter.id] = filter.value || '';
+                        }
+                    }
+                } else if (filter.type === 'multiselect') {
+                    // For multiselect, handle 'now' value and initialize based on isMulti
+                    if (filter.value === 'now') {
+                        const currentYear = new Date().getFullYear().toString();
+                        initialValues[filter.id] = filter.isMulti === false ? currentYear : [currentYear];
+                    } else {
+                        if (filter.isMulti === false) {
+                            // Single select mode - use single value
+                            initialValues[filter.id] = Array.isArray(filter.value) ? filter.value[0] || '' : (filter.value || '');
+                        } else {
+                            // Multi select mode - use array
+                            initialValues[filter.id] = Array.isArray(filter.value) ? filter.value : (filter.value ? [filter.value] : []);
+                        }
+                    }
+                } else {
+                    // For other filter types
+                    if (filter.value === 'now') {
+                        initialValues[filter.id] = new Date().getFullYear().toString();
+                    } else {
+                        initialValues[filter.id] = filter.value || '';
+                    }
+                }
+
+                // Fetch options for dropdowns with URL
+                if ((filter.type === 'dropdown' || filter.type === 'multiselect') && filter.url) {
+                    fetchFilterOptions(filter);
+                }
+            });
+
+            setSettingsFilterValues(initialValues);
+        }
+    }, [settings?.filters, fetchFilterOptions]);
+
+    // Handle settings filter change
+    const handleSettingsFilterChange = useCallback(
+        (filterId, value) => {
+            setSettingsFilterValues((prev) => ({
+                ...prev,
+                [filterId]: value,
+            }));
+
+            // Update fetch params with the new filter value
+            if (settings?.fetch?.params) {
+                let processedValue = value;
+                
+                // For multiselect, convert array to appropriate format for API
+                if (Array.isArray(value)) {
+                    // Keep as array - most APIs expect this format for multiple values
+                    processedValue = value;
+                }
+                
+                const updatedParams = {
+                    ...settings.fetch.params,
+                    [filterId]: processedValue,
+                };
+
+                // Update the settings object
+                if (config.settings && config.settings.fetch) {
+                    config.settings.fetch.params = updatedParams;
+                }
+
+                // Trigger a re-fetch with the new params
+                prevFetchParamsRef.current = null;
+            }
+        },
+        [settings, config]
+    );
+
+    // Apply custom styling from userProfile if available
+    const getCustomStyles = () => {
+        const customStyles = {};
+
+        if (userProfile?.settings?.style) {
+            const { style } = userProfile.settings;
+
+            if (style.hoverColor) {
+                customStyles.hoverColor = {
+                    '--hover-color': style.hoverColor,
+                };
+            }
+        }
+
+        return customStyles;
+    };
+
+    // CSS for sort indicators
+    const getSortIndicatorStyle = (key) => {
+        if (sortConfig.key !== key) {
+            return { opacity: 0.3 }; // Dim the icon when not sorting by this column
+        }
+        return {}; // Full opacity when sorting by this column
+    };
+
+    // Handle row click
+    const handleRowClick = useCallback((row, rowIndex) => {
+        if (onRowClick) {
+            onRowClick(row, rowIndex);
+        }
+    }, [onRowClick]);
+
+    // Handle cell click with support for date picker and contact selection
+    const handleCellClick = useCallback(async (e, header, row) => {
+        e.stopPropagation(); // Prevent row click
+        
+        try {
+            // Debug logging to check configuration
+            const dateOnlyConfig = header.onClick.dateOnly || userProfile?.settings?.dateOnly || false;
+            console.log('Cell click configuration:', {
+                column: header.label,
+                clickType: header.onClick.type || 'date',
+                hasContactSelection: !!header.onClick.contactSelection,
+                headerDateOnly: header.onClick.dateOnly,
+                userProfileDateOnly: userProfile?.settings?.dateOnly,
+                finalDateOnly: dateOnlyConfig
+            });
+
+            // Determine the interaction type
+            const clickType = header.onClick.type || 'date';
+            
+            if (clickType === 'date_with_contacts') {
+                // Multi-step process: Date selection first, then contact selection
+                await handleDateWithContactsFlow(header, row, dateOnlyConfig);
+            } else {
+                // Simple date selection (backward compatibility)
+                await handleSimpleDateSelection(header, row, dateOnlyConfig);
+            }
+        } catch (error) {
+            console.error('Error handling cell click:', error);
+            toast.error('An error occurred while opening the dialog');
+        }
+    }, [settings, settingsFilterValues, onDataChange, userProfile]);
+
+    // Handle simple date selection (existing functionality)
+    const handleSimpleDateSelection = useCallback(async (header, row, dateOnlyConfig) => {
+        await showDatePickerDialog({
+            title: header.onClick.title || 'Select Date',
+            message: header.onClick.message || header.onClick.placeholder || `Please select a date for ${header.label}:`,
+            confirmLabel: 'Set Date',
+            cancelLabel: 'Cancel',
+            defaultDate: header.onClick.params?.value === 'now' ? 'now' : (row[header.key] || null),
+            data: { name: header.key, label: header.label, id: row.id },
+            // Timezone configuration - can be set via userProfile or header config
+            timezone: header.onClick.timezone || userProfile?.settings?.timezone || 'auto',
+            forcePerth: header.onClick.forcePerth || userProfile?.settings?.forcePerth || false,
+            // Date field type - set to true for DATE fields, false for DATETIME fields
+            dateOnly: dateOnlyConfig,
+            onConfirm: async (selectedDateISO) => {
+                await submitDateUpdate(header, row, selectedDateISO);
+            },
+            onCancel: () => {
+                // Do nothing when cancelled
+            }
+        });
+    }, [settings, settingsFilterValues, onDataChange, userProfile]);
+
+    // Handle date selection with contact selection flow
+    const handleDateWithContactsFlow = useCallback(async (header, row, dateOnlyConfig) => {
+        // Step 1: Date selection
+        await showDatePickerDialog({
+            title: header.onClick.title || 'Select Date',
+            message: header.onClick.message || header.onClick.placeholder || `Please select a date for ${header.label}:`,
+            confirmLabel: 'Next: Select Contacts',
+            cancelLabel: 'Cancel',
+            defaultDate: header.onClick.params?.value === 'now' ? 'now' : (row[header.key] || null),
+            data: { name: header.key, label: header.label, id: row.id },
+            timezone: header.onClick.timezone || userProfile?.settings?.timezone || 'auto',
+            forcePerth: header.onClick.forcePerth || userProfile?.settings?.forcePerth || false,
+            dateOnly: dateOnlyConfig,
+            onConfirm: async (selectedDateISO) => {
+                // Step 2: Contact selection
+                const contactFieldKey = header.key + '_contacts';
+                const existingContacts = row[contactFieldKey] || [];
+                
+                console.log('Opening contact selector with row context:', {
+                    rowKeys: Object.keys(row),
+                    rowClientId: row.client_id,
+                    urlParams: header.onClick.contactSelection?.urlParams,
+                    fullRow: row
+                });
+                
+                await showContactSelectorModal({
+                    title: header.onClick.contactSelection?.title || 'Select Contacts',
+                    message: header.onClick.contactSelection?.message || `Add contacts for ${header.label}:`,
+                    confirmLabel: 'Save',
+                    cancelLabel: 'Cancel',
+                    existingContacts: Array.isArray(existingContacts) ? existingContacts : [],
+                    contactConfig: {
+                        contactsUrl: header.onClick.contactSelection?.contactsUrl || '/ajax/contacts/dropdown',
+                        urlParams: header.onClick.contactSelection?.urlParams || {},
+                        allowManualEntry: header.onClick.contactSelection?.allowManualEntry !== false,
+                        fields: header.onClick.contactSelection?.fields || ['name', 'email'],
+                        multiple: header.onClick.contactSelection?.multiple !== false,
+                        maxContacts: header.onClick.contactSelection?.maxContacts || 10
+                    },
+                    data: { name: header.key, label: header.label, id: row.id },
+                    rowContext: row,
+                    onConfirm: async (selectedContacts) => {
+                        // Submit both date and contacts
+                        await submitDateAndContactsUpdate(header, row, selectedDateISO, selectedContacts);
+                    },
+                    onCancel: () => {
+                        // User cancelled contact selection - do nothing
+                    }
+                });
+            },
+            onCancel: () => {
+                // User cancelled date selection - do nothing
+            }
+        });
+    }, [settings, settingsFilterValues, onDataChange, userProfile]);
+
+    // Submit date update only
+    const submitDateUpdate = useCallback(async (header, row, selectedDateISO) => {
+        try {
+            // Replace {id} in the URL with the row's ID
+            const url = header.onClick.url.replace('{id}', row.id);
+
+            // Show loading toast
+            toast.info('Updating...', { autoClose: 1000 });
+
+            // Extract field and value from params
+            const { field, ...otherParams } = header.onClick.params;
+
+            // Create a new params object with the field as the key
+            const params = {
+                ...otherParams,
+                _method: header.onClick.method, // Add _method for PUT/DELETE requests
+            };
+
+            // Set the field as the key with the selected date value
+            params[field] = selectedDateISO;
+
+            // Make the API call
+            const response = await CustomFetch(url, header.onClick.method, params);
+
+            if (response.data.error) {
+                toast.error(response.data.error);
+            } else {
+                toast.success('Date updated successfully', { autoClose: 1000 });
+                await refreshGridData();
+            }
+        } catch (error) {
+            console.error('Error updating date:', error);
+            toast.error('An error occurred while updating');
+        }
+    }, []);
+
+    // Submit date and contacts update
+    const submitDateAndContactsUpdate = useCallback(async (header, row, selectedDateISO, selectedContacts) => {
+        try {
+            // Replace {id} in the URL with the row's ID
+            const url = header.onClick.url.replace('{id}', row.id);
+
+            // Show loading toast
+            toast.info('Saving date and contacts...', { autoClose: 1000 });
+
+            // Extract field and value from params
+            const { field, ...otherParams } = header.onClick.params;
+
+            // Create a new params object with both date and contacts
+            const params = {
+                ...otherParams,
+                _method: header.onClick.method, // Add _method for PUT/DELETE requests
+            };
+
+            // Set the date field
+            params[field] = selectedDateISO;
+            
+            // Set the contacts field (field name + '_contacts')
+            const contactsField = field + '_contacts';
+            params[contactsField] = selectedContacts;
+
+            console.log('Submitting date and contacts:', params);
+
+            // Make the API call
+            const response = await CustomFetch(url, header.onClick.method, params);
+
+            if (response.data.error) {
+                toast.error(response.data.error);
+            } else {
+                toast.success('Date and contacts saved successfully', { autoClose: 1500 });
+                await refreshGridData();
+            }
+        } catch (error) {
+            console.error('Error updating date and contacts:', error);
+            toast.error('An error occurred while saving');
+        }
+    }, []);
+
+    // Refresh grid data helper function
+    const refreshGridData = useCallback(async () => {
+        try {
+            // Refresh the data
+            prevFetchParamsRef.current = null;
+            
+            // Force a re-fetch
+            const fetchUrl = settings.fetch.url;
+            const fetchMethod = settings.fetch.method || 'POST';
+            const fetchParams = {
+                ...(settings.fetch.params || {}),
+                ...settingsFilterValues,
+            };
+
+            setLoading(true);
+            const fetchResponse = await CustomFetch(fetchUrl, fetchMethod, fetchParams);
+            if (fetchResponse.data.data) {
+                if (fetchResponse.data.data.header && fetchResponse.data.data.rows) {
+                    const newData = fetchResponse.data.data.rows || [];
+                    setGridData(newData);
+                    setSortedData(newData);
+                    if (onDataChange) {
+                        onDataChange(newData);
+                    }
+                } else {
+                    const newData = fetchResponse.data.data.data || [];
+                    setGridData(newData);
+                    setSortedData(newData);
+                    if (onDataChange) {
+                        onDataChange(newData);
+                    }
+                }
+            }
+        } catch (error) {
+            console.error('Error refreshing data:', error);
+            toast.error('Error refreshing data');
+        } finally {
+            setLoading(false);
+        }
+    }, [settings, settingsFilterValues, onDataChange]);
+
+    return (
+        <div className={styles.gridContainer}>
+            {/* Settings Filters */}
+            {settings?.filters && settings.filters.length > 0 && (
+                <div className={styles.settingsFiltersContainer}>
+                    <div className={styles.settingsFiltersHeader}>
+                        <div
+                            className={styles.headerLeft}
+                            onClick={() =>
+                                setFiltersCollapsed(!filtersCollapsed)
+                            }
+                        >
+                            <div className={styles.settingsFiltersTitle}>
+                                <svg
+                                    width="16"
+                                    height="16"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                >
+                                    <path
+                                        d="M4 6H20M7 12H17M9 18H15"
+                                        stroke="currentColor"
+                                        strokeWidth="2"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                    />
+                                </svg>
+                                Filters
+                                {/* Show active filters count when collapsed */}
+                                {filtersCollapsed && (
+                                    <div
+                                        className={
+                                            styles.activeFiltersIndicator
+                                        }
+                                    >
+                                        {Object.values(
+                                            settingsFilterValues
+                                        ).some((value) => value !== '') && (
+                                            <>
+                                                <span>Active:</span>
+                                                <span
+                                                    className={
+                                                        styles.filterBadge
+                                                    }
+                                                >
+                                                    {
+                                                        Object.values(
+                                                            settingsFilterValues
+                                                        ).filter(
+                                                            (value) =>
+                                                                value !== ''
+                                                        ).length
+                                                    }
+                                                </span>
+                                            </>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+
+                            {/* Toggle icon */}
+                            <svg
+                                className={`${styles.toggleIcon} ${
+                                    filtersCollapsed ? styles.collapsed : ''
+                                }`}
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M19 9l-7 7-7-7"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                />
+                            </svg>
+                        </div>
+
+                        {/* Clear filters button */}
+                        <button
+                            className={styles.clearFiltersButton}
+                            onClick={(e) => {
+                                e.stopPropagation(); // Prevent toggling when clicking the button
+                                // Initialize with default values
+                                const initialValues = {};
+                                settings.filters.forEach((filter) => {
+                                    if (
+                                        (filter.type === 'dropdown' || filter.type === 'multiselect') &&
+                                        (filter.id === 'year' || filter.startYear) &&
+                                        filter.value === 'now'
+                                    ) {
+                                        const currentYear = new Date()
+                                            .getFullYear()
+                                            .toString();
+                                        if (filter.type === 'multiselect') {
+                                            initialValues[filter.id] = filter.isMulti === false ? currentYear : [currentYear];
+                                        } else {
+                                            initialValues[filter.id] = currentYear;
+                                        }
+                                    } else if (filter.type === 'multiselect') {
+                                        if (filter.value === 'now') {
+                                            const currentYear = new Date().getFullYear().toString();
+                                            initialValues[filter.id] = filter.isMulti === false ? currentYear : [currentYear];
+                                        } else {
+                                            if (filter.isMulti === false) {
+                                                initialValues[filter.id] = Array.isArray(filter.value) ? filter.value[0] || '' : (filter.value || '');
+                                            } else {
+                                                initialValues[filter.id] = Array.isArray(filter.value) ? filter.value : (filter.value ? [filter.value] : []);
+                                            }
+                                        }
+                                    } else {
+                                        if (filter.value === 'now') {
+                                            initialValues[filter.id] = new Date().getFullYear().toString();
+                                        } else {
+                                            initialValues[filter.id] = filter.value || '';
+                                        }
+                                    }
+                                });
+                                setSettingsFilterValues(initialValues);
+
+                                // Reset fetch params
+                                prevFetchParamsRef.current = null;
+                            }}
+                        >
+                            <svg
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M19 7l-7 7-7-7"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    transform="rotate(90, 12, 12)"
+                                />
+                            </svg>
+                            Clear
+                        </button>
+                    </div>
+
+                    <div
+                        className={`${styles.settingsFiltersContent} ${
+                            filtersCollapsed ? styles.collapsed : ''
+                        }`}
+                    >
+                        {settings.filters.map((filter, index) => (
+                            <div
+                                key={`settings-filter-${index}`}
+                                className={styles.settingsFilterItem}
+                            >
+                                <label className={styles.settingsFilterLabel}>
+                                    {filter.label}
+                                </label>
+                                {filter.type === 'dropdown' &&
+                                filter.id === 'year' ? (
+                                    <select
+                                        className={
+                                            styles.settingsFilterDropdown
+                                        }
+                                        value={
+                                            settingsFilterValues[filter.id] ||
+                                            ''
+                                        }
+                                        onChange={(e) =>
+                                            handleSettingsFilterChange(
+                                                filter.id,
+                                                e.target.value
+                                            )
+                                        }
+                                    >
+                                        {generateYearOptions(
+                                            filter.startYear || 2000
+                                        ).map((option) => (
+                                            <option
+                                                key={option.value}
+                                                value={option.value}
+                                            >
+                                                {option.label}
+                                            </option>
+                                        ))}
+                                    </select>
+                                ) : filter.type === 'dropdown' && filter.url ? (
+                                    <select
+                                        className={
+                                            styles.settingsFilterDropdown
+                                        }
+                                        value={
+                                            settingsFilterValues[filter.id] ||
+                                            ''
+                                        }
+                                        onChange={(e) =>
+                                            handleSettingsFilterChange(
+                                                filter.id,
+                                                e.target.value
+                                            )
+                                        }
+                                    >
+                                        <option value="">Select {filter.label}</option>
+                                        {filterOptions[filter.id] &&
+                                            filterOptions[filter.id].map((option) => (
+                                                <option
+                                                    key={option.value || option.id}
+                                                    value={option.value || option.id}
+                                                >
+                                                    {option.label || option.name || option.title}
+                                                </option>
+                                            ))}
+                                    </select>
+                                ) : filter.type === 'dropdown' ? (
+                                    <select
+                                        className={
+                                            styles.settingsFilterDropdown
+                                        }
+                                        value={
+                                            settingsFilterValues[filter.id] ||
+                                            ''
+                                        }
+                                        onChange={(e) =>
+                                            handleSettingsFilterChange(
+                                                filter.id,
+                                                e.target.value
+                                            )
+                                        }
+                                    >
+                                        <option value="">Select {filter.label}</option>
+                                        {filter.options &&
+                                            filter.options.map((option) => (
+                                                <option
+                                                    key={option.value}
+                                                    value={option.value}
+                                                >
+                                                    {option.label}
+                                                </option>
+                                            ))}
+                                    </select>
+                                ) : filter.type === 'multiselect' ? (
+                                    <div className={styles.multiselectContainer}>
+                                        <MultiSelect
+                                            options={
+                                                (filter.id === 'year' || filter.startYear) ? 
+                                                    generateYearOptions(filter.startYear || 2000) :
+                                                filter.url ? 
+                                                    (filterOptions[filter.id] || []).map(option => ({
+                                                        value: option.value || option.id,
+                                                        label: option.label || option.name || option.title
+                                                    })) :
+                                                    filter.options || []
+                                            }
+                                            inputValue={(() => {
+                                                const currentValue = settingsFilterValues[filter.id];
+                                                const availableOptions = (filter.id === 'year' || filter.startYear) ? 
+                                                    generateYearOptions(filter.startYear || 2000) :
+                                                filter.url ? 
+                                                    (filterOptions[filter.id] || []).map(option => ({
+                                                        value: option.value || option.id,
+                                                        label: option.label || option.name || option.title
+                                                    })) :
+                                                    filter.options || [];
+
+                                                if (filter.isMulti === false) {
+                                                    // Single select mode - find the matching option object
+                                                    if (currentValue) {
+                                                        const matchingOption = availableOptions.find(opt => opt.value === currentValue || opt.value === currentValue.toString());
+                                                        return matchingOption || null;
+                                                    }
+                                                    return null;
+                                                } else {
+                                                    // Multi select mode - return array of matching option objects
+                                                    if (Array.isArray(currentValue) && currentValue.length > 0) {
+                                                        return currentValue.map(val => {
+                                                            const matchingOption = availableOptions.find(opt => opt.value === val || opt.value === val.toString());
+                                                            return matchingOption || { value: val, label: val };
+                                                        }).filter(Boolean);
+                                                    }
+                                                    return [];
+                                                }
+                                            })()}
+                                            onChange={(selectedOptions) => {
+                                                if (filter.isMulti === false) {
+                                                    // Single select mode - extract value from the selected option object
+                                                    const value = selectedOptions ? selectedOptions.value : '';
+                                                    handleSettingsFilterChange(filter.id, value);
+                                                } else {
+                                                    // Multi select mode - extract values from array of option objects
+                                                    const values = Array.isArray(selectedOptions) 
+                                                        ? selectedOptions.map(opt => opt.value) 
+                                                        : [];
+                                                    handleSettingsFilterChange(filter.id, values);
+                                                }
+                                            }}
+                                            placeholder={`Select ${filter.label}`}
+                                            multi={filter.isMulti !== false} // Default to true, false only if explicitly set
+                                            settings={{
+                                                id: filter.id,
+                                                limit: filter.limit || undefined
+                                            }}
+                                        />
+                                    </div>
+                                ) : filter.type === 'text' ? (
+                                    <input
+                                        type="text"
+                                        className={styles.settingsFilterInput}
+                                        value={
+                                            settingsFilterValues[filter.id] ||
+                                            ''
+                                        }
+                                        onChange={(e) =>
+                                            handleSettingsFilterChange(
+                                                filter.id,
+                                                e.target.value
+                                            )
+                                        }
+                                        placeholder={filter.placeholder || ''}
+                                    />
+                                ) : null}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {loading ? (
+                <div className={styles.loadingContainer}>
+                    <div className={styles.loadingSpinner}></div>
+                    <p>Loading data...</p>
+                </div>
+            ) : (
+                <table className={styles.gridTable}>
+                    <thead>
+                        <tr>
+                            {/* Use gridHeaders if available, otherwise fall back to headers from columns */}
+                            {gridHeaders.length > 0
+                                ? gridHeaders.map((header, index) => (
+                                      <th
+                                          key={`header-${index}`}
+                                          className={`${styles.gridHeader} ${styles.sortableHeader}`}
+                                          onClick={() =>
+                                              requestSort(header.key)
+                                          }
+                                          style={{ cursor: 'pointer' }}
+                                      >
+                                          <div className={styles.headerContent}>
+                                              {header.label}
+                                              <span
+                                                  className={
+                                                      styles.sortIndicator
+                                                  }
+                                                  style={getSortIndicatorStyle(
+                                                      header.key
+                                                  )}
+                                              >
+                                                  {sortConfig.key ===
+                                                      header.key &&
+                                                  sortConfig.direction === 'asc'
+                                                      ? ' ▲'
+                                                      : ' ▼'}
+                                              </span>
+                                          </div>
+                                      </th>
+                                  ))
+                                : headers.map((header, index) => (
+                                      <th
+                                          key={`header-${index}`}
+                                          className={styles.gridHeader}
+                                      >
+                                          {header}
+                                      </th>
+                                  ))}
+                        </tr>
+                        {/* Filter row */}
+                        {gridHeaders.some((header) => header.filter) && (
+                            <tr className={styles.filterRow}>
+                                {gridHeaders.map((header, index) => (
+                                    <th
+                                        key={`filter-${index}`}
+                                        className={styles.filterCell}
+                                    >
+                                        {header.filter ? (
+                                            <input
+                                                type={
+                                                    header.filter.type ===
+                                                    'date'
+                                                        ? 'date'
+                                                        : 'text'
+                                                }
+                                                className={styles.filterInput}
+                                                placeholder={`Filter ${header.label}...`}
+                                                value={
+                                                    filterValues[header.key] ||
+                                                    ''
+                                                }
+                                                onChange={(e) =>
+                                                    handleFilterChange(
+                                                        header.key,
+                                                        e.target.value
+                                                    )
+                                                }
+                                            />
+                                        ) : null}
+                                    </th>
+                                ))}
+                            </tr>
+                        )}
+                    </thead>
+                    <tbody>
+                        {sortedData && sortedData.length > 0 ? (
+                            sortedData.map((row, rowIndex) => (
+                                <tr
+                                    key={`row-${rowIndex}`}
+                                    className={`${styles.gridRow} ${onRowClick ? styles.clickableRow : ''}`}
+                                    style={getCustomStyles().hoverColor}
+                                    onClick={() => handleRowClick(row, rowIndex)}
+                                >
+                                    {/* Use gridHeaders if available, otherwise fall back to columns */}
+                                    {gridHeaders.length > 0
+                                        ? gridHeaders.map(
+                                              (header, colIndex) => (
+                                                  <td
+                                                      key={`cell-${rowIndex}-${colIndex}`}
+                                                      className={`${
+                                                          styles.gridCell
+                                                      } ${
+                                                          header.onClick &&
+                                                          !row[header.key]
+                                                              ? styles.clickableCell
+                                                              : ''
+                                                      }`}
+                                                      onClick={
+                                                          header.onClick &&
+                                                          !row[header.key]
+                                                              ? (e) => handleCellClick(e, header, row)
+                                                              : undefined
+                                                      }
+                                                  >
+                                                      {row[header.key] ? (
+                                                          header.onClick ? (
+                                                              <span
+                                                                  className={
+                                                                      styles.cellWithValue
+                                                                  }
+                                                              >
+                                                                  {formatCellContent(
+                                                                      row[
+                                                                          header
+                                                                              .key
+                                                                      ],
+                                                                      {
+                                                                          ...header,
+                                                                          type:
+                                                                              header.type ||
+                                                                              (typeof row[
+                                                                                  header
+                                                                                      .key
+                                                                              ] ===
+                                                                              'number'
+                                                                                  ? 'number'
+                                                                                  : ''),
+                                                                      },
+                                                                      row
+                                                                  )}
+                                                              </span>
+                                                          ) : (
+                                                              <span
+                                                                  className={
+                                                                      styles.cellContent
+                                                                  }
+                                                                  data-type={
+                                                                      header.type ||
+                                                                      (typeof row[
+                                                                          header
+                                                                              .key
+                                                                      ] ===
+                                                                      'number'
+                                                                          ? 'number'
+                                                                          : '')
+                                                                  }
+                                                              >
+                                                                  {formatCellContent(
+                                                                      row[
+                                                                          header
+                                                                              .key
+                                                                      ],
+                                                                      {
+                                                                          ...header,
+                                                                          type:
+                                                                              header.type ||
+                                                                              (typeof row[
+                                                                                  header
+                                                                                      .key
+                                                                              ] ===
+                                                                              'number'
+                                                                                  ? 'number'
+                                                                                  : ''),
+                                                                      },
+                                                                      row
+                                                                  )}
+                                                              </span>
+                                                          )
+                                                      ) : header.onClick ? (
+                                                          <span
+                                                              className={
+                                                                  styles.placeholderText
+                                                              }
+                                                          >
+                                                              {header.onClick
+                                                                  .placeholder ||
+                                                                  'Click to set'}
+                                                          </span>
+                                                      ) : (
+                                                          ''
+                                                      )}
+                                                  </td>
+                                              )
+                                          )
+                                        : columns.map((col, colIndex) => (
+                                              <td
+                                                  key={`cell-${rowIndex}-${colIndex}`}
+                                                  className={styles.gridCell}
+                                              >
+                                                  <span
+                                                      className={
+                                                          styles.cellContent
+                                                      }
+                                                      data-type={
+                                                          col.type ||
+                                                          (typeof row[
+                                                              col.name
+                                                          ] === 'number'
+                                                              ? 'number'
+                                                              : '')
+                                                      }
+                                                  >
+                                                      {formatCellContent(
+                                                          row[col.name],
+                                                          col
+                                                      )}
+                                                  </span>
+                                              </td>
+                                          ))}
+                                </tr>
+                            ))
+                        ) : (
+                            <tr>
+                                <td
+                                    colSpan={
+                                        gridHeaders.length || headers.length
+                                    }
+                                    className={styles.noData}
+                                >
+                                    No data available
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            )}
+        </div>
+    );
+};
+
+export default GenericGrid;