@visns-studio/visns-components 5.11.1 → 5.11.2

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

@@ -1,19 +1,18 @@
-import {
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+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
@@ -25,11 +24,11 @@ const ContactTooltip = ({ contacts, children }) => {
 
     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
+            y: rect.top - 10,
         });
         setIsVisible(true);
     };
@@ -41,8 +40,9 @@ const ContactTooltip = ({ contacts, children }) => {
     const formatContact = (contact) => {
         const name = contact.name || 'Unknown Contact';
         const email = contact.email || '';
-        const type = contact.type === 'contact' ? 'Existing Contact' : 'Manual Entry';
-        
+        const type =
+            contact.type === 'contact' ? 'Existing Contact' : 'Manual Entry';
+
         return { name, email, type };
     };
 
@@ -56,7 +56,7 @@ const ContactTooltip = ({ contacts, children }) => {
             >
                 {children}
             </div>
-            
+
             {isVisible && contacts && contacts.length > 0 && (
                 <div
                     ref={tooltipRef}
@@ -70,16 +70,31 @@ const ContactTooltip = ({ contacts, children }) => {
                     }}
                 >
                     <div className={styles.contactTooltipHeader}>
-                        <strong>{contacts.length} Contact{contacts.length !== 1 ? 's' : ''}</strong>
+                        <strong>
+                            {contacts.length} Contact
+                            {contacts.length !== 1 ? 's' : ''}
+                        </strong>
                     </div>
                     <div className={styles.contactTooltipBody}>
                         {contacts.map((contact, index) => {
-                            const { name, email, type } = formatContact(contact);
+                            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
+                                    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>
                             );
                         })}
@@ -91,7 +106,13 @@ const ContactTooltip = ({ contacts, children }) => {
     );
 };
 
-const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) => {
+const GenericGrid = ({
+    config,
+    userProfile,
+    data,
+    onDataChange,
+    onRowClick,
+}) => {
     const [gridData, setGridData] = useState([]);
     const [sortedData, setSortedData] = useState([]);
     const [, setFilteredData] = useState([]);
@@ -128,15 +149,40 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
 
     // 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) {
+        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;
 
@@ -214,7 +260,7 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
     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')
@@ -231,13 +277,501 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                 <div className={styles.dateValue}>{formattedDate}</div>
                 <ContactTooltip contacts={contacts}>
                     <div className={styles.contactsSummary}>
-                        📧 {contacts.length} contact{contacts.length !== 1 ? 's' : ''}
+                        📧 {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([]);
@@ -439,7 +973,7 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
             // 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);
@@ -467,7 +1001,7 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                     const newData = staticData.rows || [];
                     setGridData(newData);
                     setSortedData(newData);
-                    
+
                     // Notify parent component of data change
                     if (onDataChange) {
                         onDataChange(newData);
@@ -540,7 +1074,7 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                         const newData = response.data.data.rows || [];
                         setGridData(newData);
                         setSortedData(newData);
-                        
+
                         // Notify parent component of data change
                         if (onDataChange) {
                             onDataChange(newData);
@@ -550,7 +1084,7 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                         const newData = response.data.data.data || [];
                         setGridData(newData);
                         setSortedData(newData);
-                        
+
                         // Notify parent component of data change
                         if (onDataChange) {
                             onDataChange(newData);
@@ -600,9 +1134,9 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
         try {
             const response = await CustomFetch(filter.url, 'POST', {});
             if (response.data && response.data.data) {
-                setFilterOptions(prev => ({
+                setFilterOptions((prev) => ({
                     ...prev,
-                    [filter.id]: response.data.data
+                    [filter.id]: response.data.data,
                 }));
             }
         } catch (error) {
@@ -617,20 +1151,30 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
             const initialValues = {};
 
             settings.filters.forEach((filter) => {
-                if ((filter.type === 'dropdown' || filter.type === 'multiselect') && (filter.id === 'year' || filter.startYear)) {
+                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];
+                            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 || []);
+                            initialValues[filter.id] =
+                                filter.isMulti === false
+                                    ? filter.value || ''
+                                    : filter.value || [];
                         } else {
                             initialValues[filter.id] = filter.value || '';
                         }
@@ -639,27 +1183,46 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                     // 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];
+                        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 || '');
+                            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] : []);
+                            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();
+                        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) {
+                if (
+                    (filter.type === 'dropdown' ||
+                        filter.type === 'multiselect') &&
+                    filter.url
+                ) {
                     fetchFilterOptions(filter);
                 }
             });
@@ -679,13 +1242,13 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
             // 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,
@@ -729,207 +1292,847 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
     };
 
     // Handle row click
-    const handleRowClick = useCallback((row, rowIndex) => {
-        if (onRowClick) {
-            onRowClick(row, rowIndex);
-        }
-    }, [onRowClick]);
+    const handleRowClick = useCallback(
+        (row, rowIndex) => {
+            if (onRowClick) {
+                onRowClick(row, rowIndex);
+            }
+        },
+        [onRowClick]
+    );
 
     // Handle cell click with support for date picker and contact selection
-    const handleCellClick = useCallback(async (e, header, row) => {
-        e.stopPropagation(); // Prevent row click
-        
-        try {
-            // Debug logging to check configuration
-            const dateOnlyConfig = header.onClick.dateOnly || userProfile?.settings?.dateOnly || false;
-            console.log('Cell click configuration:', {
-                column: header.label,
-                clickType: header.onClick.type || 'date',
-                hasContactSelection: !!header.onClick.contactSelection,
-                headerDateOnly: header.onClick.dateOnly,
-                userProfileDateOnly: userProfile?.settings?.dateOnly,
-                finalDateOnly: dateOnlyConfig
-            });
+    const handleCellClick = useCallback(
+        async (e, header, row) => {
+            e.stopPropagation(); // Prevent row click
 
-            // Determine the interaction type
-            const clickType = header.onClick.type || 'date';
-            
-            if (clickType === 'date_with_contacts') {
-                // Multi-step process: Date selection first, then contact selection
-                await handleDateWithContactsFlow(header, row, dateOnlyConfig);
-            } else {
-                // Simple date selection (backward compatibility)
-                await handleSimpleDateSelection(header, row, dateOnlyConfig);
+            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');
             }
-        } catch (error) {
-            console.error('Error handling cell click:', error);
-            toast.error('An error occurred while opening the dialog');
-        }
-    }, [settings, settingsFilterValues, onDataChange, userProfile]);
+        },
+        [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]);
+    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]);
+    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);
+    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 });
+                // Show loading toast
+                toast.info('Updating...', { autoClose: 1000 });
 
-            // Extract field and value from params
-            const { field, ...otherParams } = header.onClick.params;
+                // 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
-            };
+                // 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;
+                // 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);
+                // 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();
+                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');
             }
-        } 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);
+    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 });
+                // Show loading toast
+                toast.info('Saving date and contacts...', { autoClose: 1000 });
 
-            // Extract field and value from params
-            const { field, ...otherParams } = header.onClick.params;
+                // 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
-            };
+                // 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 date field
-            params[field] = selectedDateISO;
-            
-            // Set the contacts field (field name + '_contacts')
-            const contactsField = field + '_contacts';
-            params[contactsField] = selectedContacts;
+                // Set the contacts field (field name + '_contacts')
+                const contactsField = field + '_contacts';
+                params[contactsField] = selectedContacts;
 
-            console.log('Submitting date and contacts:', params);
+                console.log('Submitting date and contacts:', params);
 
-            // Make the API call
-            const response = await CustomFetch(url, header.onClick.method, 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();
+                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');
             }
-        } 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';
@@ -939,9 +2142,16 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
             };
 
             setLoading(true);
-            const fetchResponse = await CustomFetch(fetchUrl, fetchMethod, fetchParams);
+            const fetchResponse = await CustomFetch(
+                fetchUrl,
+                fetchMethod,
+                fetchParams
+            );
             if (fetchResponse.data.data) {
-                if (fetchResponse.data.data.header && fetchResponse.data.data.rows) {
+                if (
+                    fetchResponse.data.data.header &&
+                    fetchResponse.data.data.rows
+                ) {
                     const newData = fetchResponse.data.data.rows || [];
                     setGridData(newData);
                     setSortedData(newData);
@@ -1056,34 +2266,57 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                                 const initialValues = {};
                                 settings.filters.forEach((filter) => {
                                     if (
-                                        (filter.type === 'dropdown' || filter.type === 'multiselect') &&
-                                        (filter.id === 'year' || filter.startYear) &&
+                                        (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];
+                                            initialValues[filter.id] =
+                                                filter.isMulti === false
+                                                    ? currentYear
+                                                    : [currentYear];
                                         } else {
-                                            initialValues[filter.id] = currentYear;
+                                            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];
+                                            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 || '');
+                                                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] : []);
+                                                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();
+                                            initialValues[filter.id] =
+                                                new Date()
+                                                    .getFullYear()
+                                                    .toString();
                                         } else {
-                                            initialValues[filter.id] = filter.value || '';
+                                            initialValues[filter.id] =
+                                                filter.value || '';
                                         }
                                     }
                                 });
@@ -1168,16 +2401,28 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                                             )
                                         }
                                     >
-                                        <option value="">Select {filter.label}</option>
+                                        <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>
-                                            ))}
+                                            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
@@ -1195,7 +2440,9 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                                             )
                                         }
                                     >
-                                        <option value="">Select {filter.label}</option>
+                                        <option value="">
+                                            Select {filter.label}
+                                        </option>
                                         {filter.options &&
                                             filter.options.map((option) => (
                                                 <option
@@ -1207,43 +2454,104 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                                             ))}
                                     </select>
                                 ) : filter.type === 'multiselect' ? (
-                                    <div className={styles.multiselectContainer}>
+                                    <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 || []
+                                                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 || [];
+                                                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;
+                                                        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);
+                                                    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 [];
                                                 }
@@ -1251,21 +2559,37 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                                             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);
+                                                    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);
+                                                    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
+                                                limit:
+                                                    filter.limit || undefined,
                                             }}
                                         />
                                     </div>
@@ -1380,9 +2704,13 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                             sortedData.map((row, rowIndex) => (
                                 <tr
                                     key={`row-${rowIndex}`}
-                                    className={`${styles.gridRow} ${onRowClick ? styles.clickableRow : ''}`}
+                                    className={`${styles.gridRow} ${
+                                        onRowClick ? styles.clickableRow : ''
+                                    }`}
                                     style={getCustomStyles().hoverColor}
-                                    onClick={() => handleRowClick(row, rowIndex)}
+                                    onClick={() =>
+                                        handleRowClick(row, rowIndex)
+                                    }
                                 >
                                     {/* Use gridHeaders if available, otherwise fall back to columns */}
                                     {gridHeaders.length > 0
@@ -1394,18 +2722,40 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                                                           styles.gridCell
                                                       } ${
                                                           header.onClick &&
-                                                          !row[header.key]
+                                                          !quarterCellHasContent(
+                                                              header,
+                                                              row
+                                                          ) &&
+                                                          isQuarterCellClickable(
+                                                              header,
+                                                              row
+                                                          )
                                                               ? styles.clickableCell
                                                               : ''
                                                       }`}
                                                       onClick={
                                                           header.onClick &&
-                                                          !row[header.key]
-                                                              ? (e) => handleCellClick(e, header, row)
+                                                          !quarterCellHasContent(
+                                                              header,
+                                                              row
+                                                          ) &&
+                                                          isQuarterCellClickable(
+                                                              header,
+                                                              row
+                                                          )
+                                                              ? (e) =>
+                                                                    handleCellClick(
+                                                                        e,
+                                                                        header,
+                                                                        row
+                                                                    )
                                                               : undefined
                                                       }
                                                   >
-                                                      {row[header.key] ? (
+                                                      {quarterCellHasContent(
+                                                          header,
+                                                          row
+                                                      ) ? (
                                                           header.onClick ? (
                                                               <span
                                                                   className={
@@ -1469,7 +2819,11 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
                                                                   )}
                                                               </span>
                                                           )
-                                                      ) : header.onClick ? (
+                                                      ) : header.onClick &&
+                                                        isQuarterCellClickable(
+                                                            header,
+                                                            row
+                                                        ) ? (
                                                           <span
                                                               className={
                                                                   styles.placeholderText
@@ -1531,4 +2885,4 @@ const GenericGrid = ({ config, userProfile, data, onDataChange, onRowClick }) =>
     );
 };
 
-export default GenericGrid;
+export default GenericGrid;