@visns-studio/visns-components 5.10.11 → 5.11.2

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

@@ -0,0 +1,2888 @@
+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 { Calendar, X, Mail, FileText, Users } from 'lucide-react';
+import { Tooltip } from 'react-tooltip';
+
+import CustomFetch from '../Fetch';
+import MultiSelect from '../MultiSelect';
+import { showDatePickerDialog } from './DatePickerDialog';
+import { showContactSelectorModal } from './ContactSelectorModal';
+import { showDateRangeSelectorModal } from './DateRangeSelectorModal';
+import { showAlternativeActionModal } from './AlternativeActionModal';
+import { showReasonCollectorModal } from './ReasonCollectorModal';
+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) => {
+        // Check for quarter columns with status FIRST (before null checks)
+        if (
+            column.key &&
+            (column.key.startsWith('quarter_') ||
+                column.key === 'anniversary') &&
+            column.onClick?.type === 'date_with_alternatives' &&
+            row
+        ) {
+            return formatQuarterWithStatus(value, column, row);
+        }
+
+        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);
+        }
+
+        // Check if this is a date range field (agreement period)
+        if (column.type === 'daterange' && row) {
+            return formatDateRange(value, column, row);
+        }
+
+        // Check if this is a status field with reasons
+        if (column.type === 'status' && row) {
+            return formatStatusWithReason(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>
+        );
+    };
+
+    // Format date range field (start and end dates)
+    const formatDateRange = (_, column, row) => {
+        // For agreement period, use the fetched agreement dates
+        const startField =
+            column.key === 'agreement_period'
+                ? 'agreement_start_date'
+                : column.onClick?.startField || 'start_date';
+        const endField =
+            column.key === 'agreement_period'
+                ? 'agreement_end_date'
+                : column.onClick?.endField || 'end_date';
+        const contactsField = column.key + '_contacts';
+
+        const startDate = row[startField];
+        const endDate = row[endField];
+        const contacts = row[contactsField];
+
+        // Format dates
+        const formattedStart =
+            startDate && moment(startDate).isValid()
+                ? moment(startDate).format(column.format || 'DD/MM/YYYY')
+                : '';
+        const formattedEnd =
+            endDate && moment(endDate).isValid()
+                ? moment(endDate).format(column.format || 'DD/MM/YYYY')
+                : '';
+
+        let dateDisplay = '';
+        if (formattedStart && formattedEnd) {
+            dateDisplay = `${formattedStart} - ${formattedEnd}`;
+        } else if (formattedStart) {
+            dateDisplay = `From ${formattedStart}`;
+        } else if (formattedEnd) {
+            dateDisplay = `Until ${formattedEnd}`;
+        } else {
+            dateDisplay = 'Not set';
+        }
+
+        // If no contacts, just return the date range
+        if (!contacts || !Array.isArray(contacts) || contacts.length === 0) {
+            return dateDisplay;
+        }
+
+        // Create JSX element to display date range + contacts
+        return (
+            <div className={styles.dateWithContacts}>
+                <div className={styles.dateValue}>{dateDisplay}</div>
+                <ContactTooltip contacts={contacts}>
+                    <div className={styles.contactsSummary}>
+                        📧 {contacts.length} contact
+                        {contacts.length !== 1 ? 's' : ''}
+                    </div>
+                </ContactTooltip>
+            </div>
+        );
+    };
+
+    // Format status field with reason
+    const formatStatusWithReason = (statusValue, column, row) => {
+        const reasonField = column.key + '_reason';
+        const reason = row[reasonField];
+
+        // Status display mapping
+        const statusMap = {
+            sent: { label: 'Sent', icon: '✅', color: '#10b981' },
+            not_sent: { label: 'Not Sent', icon: '❌', color: '#ef4444' },
+            pending: { label: 'Pending', icon: '⏳', color: '#f59e0b' },
+        };
+
+        const status = statusMap[statusValue] || {
+            label: statusValue || 'Unknown',
+            icon: '❓',
+            color: '#6b7280',
+        };
+
+        return (
+            <div className={styles.statusWithReason}>
+                <div
+                    className={styles.statusValue}
+                    style={{ color: status.color }}
+                >
+                    {status.icon} {status.label}
+                </div>
+                {reason && (
+                    <div className={styles.statusReason} title={reason}>
+                        📝{' '}
+                        {reason.length > 30
+                            ? reason.substring(0, 30) + '...'
+                            : reason}
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    // Helper function to check if a quarter cell should be clickable
+    const isQuarterCellClickable = (column, row) => {
+        // Check if this is a quarter column with alternatives
+        if (
+            !column.key ||
+            (!column.key.startsWith('quarter_') &&
+                column.key !== 'anniversary') ||
+            column.onClick?.type !== 'date_with_alternatives'
+        ) {
+            return true; // Not a quarter column, use default logic
+        }
+
+        const statusField = column.key + '_status';
+        const status = row[statusField];
+
+        // Not clickable if status is 'not_sent'
+        return status !== 'not_sent';
+    };
+
+    // Helper function to check if a quarter cell has content (for display purposes)
+    const quarterCellHasContent = (column, row) => {
+        if (
+            !column.key ||
+            (!column.key.startsWith('quarter_') &&
+                column.key !== 'anniversary') ||
+            column.onClick?.type !== 'date_with_alternatives'
+        ) {
+            return !!row[column.key]; // Not a quarter column, use default logic
+        }
+
+        const statusField = column.key + '_status';
+        const status = row[statusField];
+
+        // Has content if there's a date value OR if status is not_sent
+        return !!row[column.key] || status === 'not_sent';
+    };
+
+    // Format quarter columns with status, contacts, and reasons with react-tooltip
+    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 called for:', column.key, {
+            status,
+            hasValue: !!value,
+            hasReason: !!reason,
+            contactCount: contacts.length,
+            'will show not_sent': status === 'not_sent',
+            'will show sent': status === 'sent' && value,
+            'will show legacy':
+                value && status !== 'sent' && status !== 'not_sent',
+        });
+
+        // Generate unique ID for tooltip
+        const tooltipId = `quarter-tooltip-${column.key}-${row.id}`;
+
+        // 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 rich tooltip content
+            const tooltipContent = (
+                <div style={{ padding: '8px', maxWidth: '300px' }}>
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            marginBottom: '8px',
+                            color: '#059669',
+                            fontWeight: 'bold',
+                        }}
+                    >
+                        <Calendar size={16} style={{ marginRight: '6px' }} />
+                        Sent on {formattedDate}
+                    </div>
+                    {contactCount > 0 && (
+                        <div>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    marginBottom: '6px',
+                                    color: '#1d4ed8',
+                                    fontWeight: '500',
+                                }}
+                            >
+                                <Users
+                                    size={14}
+                                    style={{ marginRight: '6px' }}
+                                />
+                                {contactCount} Contact
+                                {contactCount !== 1 ? 's' : ''}
+                            </div>
+                            <div style={{ fontSize: '12px', color: '#6b7280' }}>
+                                {contacts.map((contact, index) => (
+                                    <div
+                                        key={index}
+                                        style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            marginBottom: '4px',
+                                        }}
+                                    >
+                                        <Mail
+                                            size={12}
+                                            style={{
+                                                marginRight: '6px',
+                                                color: '#9ca3af',
+                                            }}
+                                        />
+                                        <span>
+                                            {contact.name || 'Unknown'}
+                                            {contact.email && (
+                                                <span
+                                                    style={{ color: '#9ca3af' }}
+                                                >
+                                                    {' '}
+                                                    ({contact.email})
+                                                </span>
+                                            )}
+                                            {contact.notes && (
+                                                <div
+                                                    style={{
+                                                        fontSize: '11px',
+                                                        fontStyle: 'italic',
+                                                        marginTop: '2px',
+                                                    }}
+                                                >
+                                                    {contact.notes}
+                                                </div>
+                                            )}
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            );
+
+            return (
+                <>
+                    <span
+                        data-tooltip-id={tooltipId}
+                        style={{
+                            color: '#059669',
+                            fontWeight: '500',
+                            cursor: 'help',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '4px',
+                        }}
+                        className="quarter-cell-with-tooltip"
+                    >
+                        <Calendar size={14} />
+                        {formattedDate}
+                        {contactCount > 0 && (
+                            <span
+                                style={{ color: '#1d4ed8', marginLeft: '4px' }}
+                            >
+                                ({contactCount})
+                            </span>
+                        )}
+                    </span>
+                    <Tooltip
+                        id={tooltipId}
+                        place="top"
+                        style={{
+                            backgroundColor: '#fff',
+                            color: '#000',
+                            border: '1px solid #e5e7eb',
+                            borderRadius: '8px',
+                            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+                        }}
+                    >
+                        {tooltipContent}
+                    </Tooltip>
+                </>
+            );
+        }
+
+        // If status is 'not_sent' (with or without reason)
+        if (status === 'not_sent') {
+            const tooltipContent = (
+                <div style={{ padding: '8px', maxWidth: '250px' }}>
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            marginBottom: '8px',
+                            color: '#dc2626',
+                            fontWeight: 'bold',
+                        }}
+                    >
+                        <X size={16} style={{ marginRight: '6px' }} />
+                        Not Sent
+                    </div>
+                    {reason && (
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'flex-start',
+                                color: '#6b7280',
+                            }}
+                        >
+                            <FileText
+                                size={14}
+                                style={{
+                                    marginRight: '6px',
+                                    marginTop: '2px',
+                                    flexShrink: 0,
+                                }}
+                            />
+                            <span style={{ fontSize: '13px' }}>{reason}</span>
+                        </div>
+                    )}
+                </div>
+            );
+
+            return (
+                <>
+                    <span
+                        data-tooltip-id={tooltipId}
+                        style={{
+                            color: '#dc2626',
+                            fontWeight: '500',
+                            cursor: 'help',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '4px',
+                        }}
+                        className="quarter-cell-with-tooltip"
+                    >
+                        <X size={14} />
+                        Not Sent
+                    </span>
+                    <Tooltip
+                        id={tooltipId}
+                        place="top"
+                        style={{
+                            backgroundColor: '#fff',
+                            color: '#000',
+                            border: '1px solid #e5e7eb',
+                            borderRadius: '8px',
+                            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+                        }}
+                    >
+                        {tooltipContent}
+                    </Tooltip>
+                </>
+            );
+        }
+
+        // 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;
+
+            const tooltipContent = (
+                <div style={{ padding: '8px', maxWidth: '300px' }}>
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            marginBottom: '8px',
+                            color: '#374151',
+                            fontWeight: 'bold',
+                        }}
+                    >
+                        <Calendar size={16} style={{ marginRight: '6px' }} />
+                        {formattedDate}
+                    </div>
+                    {contactCount > 0 && (
+                        <div>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    marginBottom: '6px',
+                                    color: '#1d4ed8',
+                                    fontWeight: '500',
+                                }}
+                            >
+                                <Users
+                                    size={14}
+                                    style={{ marginRight: '6px' }}
+                                />
+                                {contactCount} Contact
+                                {contactCount !== 1 ? 's' : ''}
+                            </div>
+                            <div style={{ fontSize: '12px', color: '#6b7280' }}>
+                                {contacts.map((contact, index) => (
+                                    <div
+                                        key={index}
+                                        style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            marginBottom: '4px',
+                                        }}
+                                    >
+                                        <Mail
+                                            size={12}
+                                            style={{
+                                                marginRight: '6px',
+                                                color: '#9ca3af',
+                                            }}
+                                        />
+                                        <span>
+                                            {contact.name || 'Unknown'}
+                                            {contact.email && (
+                                                <span
+                                                    style={{ color: '#9ca3af' }}
+                                                >
+                                                    {' '}
+                                                    ({contact.email})
+                                                </span>
+                                            )}
+                                            {contact.notes && (
+                                                <div
+                                                    style={{
+                                                        fontSize: '11px',
+                                                        fontStyle: 'italic',
+                                                        marginTop: '2px',
+                                                    }}
+                                                >
+                                                    {contact.notes}
+                                                </div>
+                                            )}
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            );
+
+            return (
+                <>
+                    <span
+                        data-tooltip-id={tooltipId}
+                        style={{
+                            color: '#374151',
+                            cursor: 'help',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '4px',
+                        }}
+                        className="quarter-cell-with-tooltip"
+                    >
+                        <Calendar size={14} />
+                        {formattedDate}
+                        {contactCount > 0 && (
+                            <span
+                                style={{ color: '#1d4ed8', marginLeft: '4px' }}
+                            >
+                                ({contactCount})
+                            </span>
+                        )}
+                    </span>
+                    <Tooltip
+                        id={tooltipId}
+                        place="top"
+                        style={{
+                            backgroundColor: '#fff',
+                            color: '#000',
+                            border: '1px solid #e5e7eb',
+                            borderRadius: '8px',
+                            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+                        }}
+                    >
+                        {tooltipContent}
+                    </Tooltip>
+                </>
+            );
+        }
+
+        // Default case - return empty or pending
+        return '';
+    };
+
+    // 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 DEBUG ===');
+                console.log('Column:', header.label);
+                console.log('Column Key:', header.key);
+                console.log('Full Header:', header);
+                console.log('onClick Config:', header.onClick);
+                console.log('onClick Type:', header.onClick?.type);
+                console.log(
+                    'Has Alternatives:',
+                    !!header.onClick?.alternatives
+                );
+                console.log('Alternatives:', header.onClick?.alternatives);
+                console.log('========================');
+
+                // Determine the interaction type
+                const clickType = header.onClick.type || 'date';
+
+                switch (clickType) {
+                    case 'date_with_contacts':
+                        // Multi-step process: Date selection first, then contact selection
+                        await handleDateWithContactsFlow(
+                            header,
+                            row,
+                            dateOnlyConfig
+                        );
+                        break;
+                    case 'date_range_with_contacts':
+                        // Date range selection with contacts
+                        await handleDateRangeWithContactsFlow(
+                            header,
+                            row,
+                            dateOnlyConfig
+                        );
+                        break;
+                    case 'date_with_alternatives':
+                        // Choice between different workflows (send survey vs not sent)
+                        await handleDateWithAlternativesFlow(
+                            header,
+                            row,
+                            dateOnlyConfig
+                        );
+                        break;
+                    case 'contacts_only':
+                        // Contact selection only (no date selection)
+                        await handleContactsOnlyFlow(header, row);
+                        break;
+                    default:
+                        // Simple date selection (backward compatibility)
+                        await handleSimpleDateSelection(
+                            header,
+                            row,
+                            dateOnlyConfig
+                        );
+                        break;
+                }
+            } 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');
+            }
+        },
+        []
+    );
+
+    // Handle date range selection with contact selection flow
+    const handleDateRangeWithContactsFlow = useCallback(
+        async (header, row, dateOnlyConfig) => {
+            const startField = header.onClick?.startField || 'start_date';
+            const endField = header.onClick?.endField || 'end_date';
+
+            // Step 1: Date range selection
+            await showDateRangeSelectorModal({
+                title: header.onClick.title || 'Select Agreement Period',
+                message:
+                    header.onClick.message ||
+                    `Please select the ${header.label} period:`,
+                confirmLabel: 'Next: Select Contacts',
+                cancelLabel: 'Cancel',
+                defaultStartDate: row[startField] || null,
+                defaultEndDate: row[endField] || 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 (selectedStartDateISO, selectedEndDateISO) => {
+                    // Step 2: Contact selection
+                    const contactsField = header.key + '_contacts';
+                    const existingContacts = row[contactsField] || [];
+
+                    await showContactSelectorModal({
+                        title:
+                            header.onClick.contactSelection?.title ||
+                            'Select Contacts for Agreement',
+                        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',
+                            ],
+                            fieldTypes:
+                                header.onClick.contactSelection?.fieldTypes ||
+                                {},
+                            fieldLabels:
+                                header.onClick.contactSelection?.fieldLabels ||
+                                {},
+                            validation:
+                                header.onClick.contactSelection?.validation ||
+                                {},
+                            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 date range and contacts
+                            await submitDateRangeAndContactsUpdate(
+                                header,
+                                row,
+                                selectedStartDateISO,
+                                selectedEndDateISO,
+                                selectedContacts
+                            );
+                        },
+                        onCancel: () => {
+                            // User cancelled contact selection - do nothing
+                        },
+                    });
+                },
+                onCancel: () => {
+                    // User cancelled date range selection - do nothing
+                },
+            });
+        },
+        [settings, settingsFilterValues, onDataChange, userProfile]
+    );
+
+    // Handle alternatives workflow (send vs not sent)
+    const handleDateWithAlternativesFlow = useCallback(
+        async (header, row, dateOnlyConfig) => {
+            console.log('=== ALTERNATIVES FLOW CALLED ===');
+            console.log('Header alternatives:', header.onClick.alternatives);
+
+            const alternatives = header.onClick.alternatives || [
+                {
+                    id: 'date_contacts',
+                    label: 'Send Survey',
+                    icon: '📅',
+                    workflow: 'date_with_contacts',
+                    description: 'Mark date and add contacts',
+                },
+                {
+                    id: 'not_sent',
+                    label: 'Mark as Not Sent',
+                    icon: '❌',
+                    workflow: 'reason_only',
+                    description: 'Record reason for not sending',
+                },
+            ];
+
+            await showAlternativeActionModal({
+                title: header.onClick.title || 'Choose Action',
+                message:
+                    header.onClick.message ||
+                    `What would you like to do for ${header.label}?`,
+                alternatives: alternatives,
+                data: { name: header.key, label: header.label, id: row.id },
+                onSelect: async (selectedAlternative) => {
+                    if (selectedAlternative.workflow === 'date_with_contacts') {
+                        // Handle date + contacts workflow
+                        await handleDateWithContactsWorkflow(
+                            header,
+                            row,
+                            dateOnlyConfig,
+                            selectedAlternative
+                        );
+                    } else if (selectedAlternative.workflow === 'reason_only') {
+                        // Handle not sent reason workflow
+                        await handleNotSentReasonWorkflow(
+                            header,
+                            row,
+                            selectedAlternative
+                        );
+                    }
+                },
+                onCancel: () => {
+                    // User cancelled - do nothing
+                },
+            });
+        },
+        [settings, settingsFilterValues, onDataChange, userProfile]
+    );
+
+    // Handle date with contacts workflow (from alternatives)
+    const handleDateWithContactsWorkflow = useCallback(
+        async (header, row, dateOnlyConfig, alternative) => {
+            // Step 1: Date selection
+            await showDatePickerDialog({
+                title:
+                    alternative.title || header.onClick.title || 'Select Date',
+                message:
+                    alternative.message ||
+                    header.onClick.message ||
+                    `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 contactsField = header.key + '_contacts';
+                    const existingContacts = row[contactsField] || [];
+
+                    const contactSelection =
+                        alternative.contactSelection ||
+                        header.onClick.contactSelection ||
+                        {};
+
+                    await showContactSelectorModal({
+                        title: contactSelection.title || 'Select Contacts',
+                        message:
+                            contactSelection.message ||
+                            `Add contacts for ${header.label}:`,
+                        confirmLabel: 'Save',
+                        cancelLabel: 'Cancel',
+                        existingContacts: Array.isArray(existingContacts)
+                            ? existingContacts
+                            : [],
+                        contactConfig: {
+                            contactsUrl:
+                                contactSelection.contactsUrl ||
+                                '/ajax/contacts/dropdown',
+                            urlParams: contactSelection.urlParams || {},
+                            allowManualEntry:
+                                contactSelection.allowManualEntry !== false,
+                            fields: contactSelection.fields || [
+                                'name',
+                                'email',
+                            ],
+                            fieldTypes: contactSelection.fieldTypes || {},
+                            fieldLabels: contactSelection.fieldLabels || {},
+                            validation: contactSelection.validation || {},
+                            multiple: contactSelection.multiple !== false,
+                            maxContacts: contactSelection.maxContacts || 10,
+                        },
+                        data: {
+                            name: header.key,
+                            label: header.label,
+                            id: row.id,
+                        },
+                        rowContext: row,
+                        onConfirm: async (selectedContacts) => {
+                            // Submit both date and contacts with status
+                            await submitDateContactsAndStatusUpdate(
+                                header,
+                                row,
+                                selectedDateISO,
+                                selectedContacts,
+                                'sent'
+                            );
+                        },
+                        onCancel: () => {
+                            // User cancelled contact selection - do nothing
+                        },
+                    });
+                },
+                onCancel: () => {
+                    // User cancelled date selection - do nothing
+                },
+            });
+        },
+        [settings, settingsFilterValues, onDataChange, userProfile]
+    );
+
+    // Handle not sent reason workflow
+    const handleNotSentReasonWorkflow = useCallback(
+        async (header, row, alternative) => {
+            const reasonField =
+                alternative.reasonField || header.key + '_reason';
+            const statusField =
+                alternative.statusField || header.key + '_status';
+
+            await showReasonCollectorModal({
+                title: alternative.title || 'Provide Reason',
+                message:
+                    alternative.message ||
+                    `Why wasn't the ${header.label} sent?`,
+                confirmLabel: 'Save Reason',
+                cancelLabel: 'Cancel',
+                reasonOptions: alternative.reasonOptions || [
+                    'Survey not applicable',
+                    'Client does not want survey',
+                    'Other',
+                ],
+                allowCustomReason: alternative.allowCustomReason !== false,
+                reasonRequired: alternative.reasonRequired !== false,
+                placeholder:
+                    alternative.placeholder || 'Enter custom reason...',
+                defaultReason: row[reasonField] || '',
+                data: { name: header.key, label: header.label, id: row.id },
+                onConfirm: async (reason) => {
+                    // Submit reason and status
+                    await submitReasonAndStatusUpdate(
+                        header,
+                        row,
+                        reason,
+                        'not_sent',
+                        reasonField,
+                        statusField
+                    );
+                },
+                onCancel: () => {
+                    // User cancelled - do nothing
+                },
+            });
+        },
+        [settings, settingsFilterValues, onDataChange, userProfile]
+    );
+
+    // Submit date range and contacts update
+    const submitDateRangeAndContactsUpdate = useCallback(
+        async (header, row, startDateISO, endDateISO, selectedContacts) => {
+            try {
+                const url = header.onClick.url.replace('{id}', row.id);
+                const startField = header.onClick?.startField || 'start_date';
+                const endField = header.onClick?.endField || 'end_date';
+                const contactsField = header.key + '_contacts';
+
+                toast.info('Saving date range and contacts...', {
+                    autoClose: 1000,
+                });
+
+                const params = {
+                    ...header.onClick.params,
+                    _method: header.onClick.method,
+                    [startField]: startDateISO,
+                    [endField]: endDateISO,
+                    [contactsField]: selectedContacts,
+                };
+
+                const response = await CustomFetch(
+                    url,
+                    header.onClick.method,
+                    params
+                );
+
+                if (response.data.error) {
+                    toast.error(response.data.error);
+                } else {
+                    toast.success(
+                        'Date range and contacts saved successfully',
+                        { autoClose: 1500 }
+                    );
+                    await refreshGridData();
+                }
+            } catch (error) {
+                console.error('Error updating date range and contacts:', error);
+                toast.error('An error occurred while saving');
+            }
+        },
+        []
+    );
+
+    // Submit date, contacts, and status update
+    const submitDateContactsAndStatusUpdate = useCallback(
+        async (header, row, selectedDateISO, selectedContacts, status) => {
+            try {
+                const url = header.onClick.url.replace('{id}', row.id);
+                const { field, ...otherParams } = header.onClick.params;
+                const contactsField = field + '_contacts';
+                const statusField = field + '_status';
+
+                toast.info('Saving date, contacts, and status...', {
+                    autoClose: 1000,
+                });
+
+                const params = {
+                    ...otherParams,
+                    _method: header.onClick.method,
+                    [field]: selectedDateISO,
+                    [contactsField]: selectedContacts,
+                    [statusField]: status,
+                };
+
+                const response = await CustomFetch(
+                    url,
+                    header.onClick.method,
+                    params
+                );
+
+                if (response.data.error) {
+                    toast.error(response.data.error);
+                } else {
+                    toast.success('Survey data saved successfully', {
+                        autoClose: 1500,
+                    });
+                    await refreshGridData();
+                }
+            } catch (error) {
+                console.error('Error updating survey data:', error);
+                toast.error('An error occurred while saving');
+            }
+        },
+        []
+    );
+
+    // Submit reason and status update
+    const submitReasonAndStatusUpdate = useCallback(
+        async (header, row, reason, status, reasonField, statusField) => {
+            try {
+                const url = header.onClick.url.replace('{id}', row.id);
+
+                toast.info('Saving reason...', { autoClose: 1000 });
+
+                const params = {
+                    ...header.onClick.params,
+                    _method: header.onClick.method,
+                    [reasonField]: reason,
+                    [statusField]: status,
+                };
+
+                const response = await CustomFetch(
+                    url,
+                    header.onClick.method,
+                    params
+                );
+
+                if (response.data.error) {
+                    toast.error(response.data.error);
+                } else {
+                    toast.success('Reason saved successfully', {
+                        autoClose: 1500,
+                    });
+                    await refreshGridData();
+                }
+            } catch (error) {
+                console.error('Error saving reason:', error);
+                toast.error('An error occurred while saving');
+            }
+        },
+        []
+    );
+
+    // Handle contacts only flow (no date selection)
+    const handleContactsOnlyFlow = useCallback(
+        async (header, row) => {
+            const contactsField = header.key + '_contacts';
+            const existingContacts = row[contactsField] || [];
+
+            await showContactSelectorModal({
+                title:
+                    header.onClick.contactSelection?.title ||
+                    header.onClick.title ||
+                    'Select Contacts',
+                message:
+                    header.onClick.contactSelection?.message ||
+                    header.onClick.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',
+                    ],
+                    fieldTypes:
+                        header.onClick.contactSelection?.fieldTypes || {},
+                    fieldLabels:
+                        header.onClick.contactSelection?.fieldLabels || {},
+                    validation:
+                        header.onClick.contactSelection?.validation || {},
+                    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 only contacts (no date)
+                    await submitContactsOnlyUpdate(
+                        header,
+                        row,
+                        selectedContacts
+                    );
+                },
+                onCancel: () => {
+                    // User cancelled contact selection - do nothing
+                },
+            });
+        },
+        [settings, settingsFilterValues, onDataChange, userProfile]
+    );
+
+    // Submit contacts only update
+    const submitContactsOnlyUpdate = useCallback(
+        async (header, row, selectedContacts) => {
+            try {
+                const url = header.onClick.url.replace('{id}', row.id);
+                const contactsField = header.key + '_contacts';
+
+                toast.info('Saving contacts...', { autoClose: 1000 });
+
+                const params = {
+                    ...header.onClick.params,
+                    _method: header.onClick.method,
+                    [contactsField]: selectedContacts,
+                };
+
+                console.log('Submitting contacts only:', params);
+
+                const response = await CustomFetch(
+                    url,
+                    header.onClick.method,
+                    params
+                );
+
+                if (response.data.error) {
+                    toast.error(response.data.error);
+                } else {
+                    toast.success('Contacts saved successfully', {
+                        autoClose: 1500,
+                    });
+                    await refreshGridData();
+                }
+            } catch (error) {
+                console.error('Error updating 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 &&
+                                                          !quarterCellHasContent(
+                                                              header,
+                                                              row
+                                                          ) &&
+                                                          isQuarterCellClickable(
+                                                              header,
+                                                              row
+                                                          )
+                                                              ? styles.clickableCell
+                                                              : ''
+                                                      }`}
+                                                      onClick={
+                                                          header.onClick &&
+                                                          !quarterCellHasContent(
+                                                              header,
+                                                              row
+                                                          ) &&
+                                                          isQuarterCellClickable(
+                                                              header,
+                                                              row
+                                                          )
+                                                              ? (e) =>
+                                                                    handleCellClick(
+                                                                        e,
+                                                                        header,
+                                                                        row
+                                                                    )
+                                                              : undefined
+                                                      }
+                                                  >
+                                                      {quarterCellHasContent(
+                                                          header,
+                                                          row
+                                                      ) ? (
+                                                          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 &&
+                                                        isQuarterCellClickable(
+                                                            header,
+                                                            row
+                                                        ) ? (
+                                                          <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;