@visns-studio/visns-components 5.11.11 → 5.11.13

package/package.json

@@ -24,13 +24,13 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.18.1",
+        "framer-motion": "^12.19.1",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.518.0",
         "moment": "^2.30.1",
-        "motion": "^12.18.1",
+        "motion": "^12.19.1",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -58,7 +58,7 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.22.0",
+        "sweetalert2": "^11.22.1",
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.11",
+    "version": "5.11.13",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/cms/DataGrid.jsx

@@ -36,6 +36,7 @@ import 'react-toggle/style.css';
 
 import CustomFetch from '../crm/Fetch';
 import Form from './Form';
+import { extractColumnsMetadata, isColumnSortable } from '../../utils/columnsMetadataUtils';
 
 const loadData = async (
     { skip, limit, sortInfo, currentData, filterValue, groupBy },
@@ -83,10 +84,14 @@ const loadData = async (
     try {
         const response = await fetchUtil.post(url, params);
         const { data, total } = response.data;
-        return { data, count: total };
+        
+        // Extract columns metadata if available
+        const metadata = extractColumnsMetadata(response);
+        
+        return { data, count: total, metadata };
     } catch (error) {
         console.error('Error fetching data:', error);
-        return { data: [], count: 0 };
+        return { data: [], count: 0, metadata: {} };
     }
 };
 
@@ -146,9 +151,16 @@ const DataGrid = ({
 
             sqlResult.then((res) => {
                 setDataCount(res.count);
+                // Update metadata when data is loaded
+                if (res.metadata) {
+                    setColumnsMetadata(res.metadata);
+                }
             });
 
-            return sqlResult;
+            return sqlResult.then(res => ({
+                data: res.data,
+                count: res.count
+            }));
         },
         [ajaxSetting, dataReload, dSearch]
     );
@@ -157,6 +169,7 @@ const DataGrid = ({
     const [gridColumns, setGridColumns] = useState([]);
     const [limit, setLimit] = useState(ajaxSetting.take || 10);
     const [search, setSearch] = useState('');
+    const [columnsMetadata, setColumnsMetadata] = useState({});
 
     /** Table Functions */
     const handleChangeSearch = (e) => {
@@ -455,9 +468,14 @@ const DataGrid = ({
             let style;
             let value;
 
+            // Check if column is sortable based on metadata
+            const columnKey = column.id;
+            const sortable = isColumnSortable(columnKey, columnsMetadata);
+            
             const commonProps = {
                 header: column.label,
                 defaultFlex: 1,
+                sortable: sortable,
                 link: column.link ? column.link : {},
                 minWidth:
                     column.minWidth && column.minWidth > 0
@@ -1384,7 +1402,7 @@ const DataGrid = ({
             });
 
         setFilterValue(newFilterValue);
-    }, [columns, filterDataSource]);
+    }, [columns, filterDataSource, columnsMetadata]);
 
     useEffect(() => {
         if (setFilterData) {

package/src/components/crm/Autocomplete.jsx

@@ -178,11 +178,11 @@ const VisnsAutocomplete = memo((props) => {
 
     // Effect to handle overwrite toggle
     useEffect(() => {
-        if (!overwrite && search) {
+        if (!overwrite && search && search.length > 1 && isFocused) {
             setIsLoading(true);
             performSearch(1, search);
         }
-    }, [overwrite, search, performSearch]);
+    }, [overwrite, search, performSearch, isFocused]);
 
     // Effect to sync with inputValue prop
     useEffect(() => {
@@ -274,7 +274,7 @@ const VisnsAutocomplete = memo((props) => {
                 )}
             </div>
 
-            {isFocused && (search.length > 1 || isLoading) && (
+            {isFocused && !overwrite && (search.length > 1 || isLoading) && (
                 <ul
                     ref={resultsRef}
                     className={styles['AutocompletePlace-results']}

package/src/components/crm/DataGrid.jsx

@@ -42,6 +42,7 @@ import { toast } from 'react-toastify';
 import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
 import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../../utils/relationshipSortingUtils';
+import { extractColumnsMetadata, isColumnSortable } from '../../utils/columnsMetadataUtils';
 import {
     AlarmClock,
     RotateCcw,
@@ -205,10 +206,14 @@ const loadData = async (
     try {
         const response = await fetchUtil.post(url, params);
         const { data, total } = response.data;
-        return { data, count: total };
+        
+        // Extract columns metadata if available
+        const metadata = extractColumnsMetadata(response);
+        
+        return { data, count: total, metadata };
     } catch (error) {
         console.error('Error fetching data:', error);
-        return { data: [], count: 0 };
+        return { data: [], count: 0, metadata: {} };
     }
 };
 
@@ -377,6 +382,11 @@ const DataGrid = forwardRef(
                 }
 
                 sqlResult.then((res) => {
+                    // Update metadata when data is loaded
+                    if (res.metadata) {
+                        setColumnsMetadata(res.metadata);
+                    }
+                    
                     // Sort data by grouping field if grouping is enabled
                     if (ajaxSetting?.groupBy?.length > 0) {
                         const groupField = ajaxSetting.groupBy[0]; // groupBy is array of strings
@@ -434,13 +444,17 @@ const DataGrid = forwardRef(
                     }, 10);
                 });
 
-                return sqlResult;
+                return sqlResult.then(res => ({
+                    data: res.data,
+                    count: res.count
+                }));
             },
             [ajaxSetting, dSearch, collapsedGroups]
         );
         const [filterDataSource, setFilterDataSource] = useState([]);
         const [filterValue, setFilterValue] = useState([]);
         const [gridColumns, setGridColumns] = useState([]);
+        const [columnsMetadata, setColumnsMetadata] = useState({});
         const gridRef = useRef(null);
         const [limit, setLimit] = useState(0);
         const [search, setSearch] = useState('');
@@ -2354,9 +2368,14 @@ const DataGrid = forwardRef(
                         let columnStyle;
                         let value;
 
+                        // Check if column is sortable based on metadata
+                        const columnKey = column.id;
+                        const sortable = isColumnSortable(columnKey, columnsMetadata);
+                        
                         const commonProps = {
                             header: column.label,
                             defaultFlex: 1,
+                            sortable: sortable,
                             link: column.link ?? {},
                             minWidth: column.minWidth ?? undefined,
                             maxWidth: column.maxWidth ?? undefined,
@@ -2836,7 +2855,7 @@ const DataGrid = forwardRef(
                 .catch((error) => {
                     console.error('Error in fetching dropdown data: ', error);
                 });
-        }, [columns, filterDataSource]);
+        }, [columns, filterDataSource, columnsMetadata]);
 
         useEffect(() => {
             if (setFilterData) {

package/src/components/crm/Field.jsx

@@ -1,6 +1,6 @@
 import '../styles/global.css';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
 import Toggle from 'react-toggle';
@@ -189,22 +189,6 @@ function Field({
         const fetchOptions = () => {
             let filter = {};
 
-            if (settings.where?.length > 0) {
-                const processedWhere = settings.where.map((whereItem) => {
-                    if (whereItem.getKey && formData[whereItem.getKey]) {
-                        return {
-                            ...whereItem,
-                            value: formData[whereItem.getKey],
-                        };
-                    }
-                    return whereItem;
-                });
-
-                filter = {
-                    where: processedWhere,
-                };
-            }
-
             if (settings.fields?.length > 0) {
                 filter.fields = settings.fields;
             }
@@ -261,7 +245,10 @@ function Field({
             case 'dropdown-ajax':
             case 'multi-dropdown-ajax':
             case 'radio-ajax':
-                fetchOptions();
+                // Only fetch if there are no dependent fields (no 'where' conditions)
+                if (!settings.where || settings.where.length === 0) {
+                    fetchOptions();
+                }
                 break;
             default:
                 break;
@@ -285,7 +272,66 @@ function Field({
             );
             setCanvasUrl(canvasType.url);
         }
-    }, [settings, counter, formData]);
+    }, [settings, counter]);
+
+    // Get dependency field keys once
+    const dependencyKeys = useMemo(() => {
+        return settings.where?.map(whereItem => whereItem.getKey).filter(Boolean) || [];
+    }, [settings.where]);
+
+    // Separate useEffect for handling dependent form data changes for dropdown refetch
+    useEffect(() => {
+        if (['dropdown-ajax', 'multi-dropdown-ajax', 'radio-ajax'].includes(settings.type) && settings.where?.length > 0) {
+            let filter = {};
+
+            const processedWhere = settings.where.map((whereItem) => {
+                if (whereItem.getKey && formData[whereItem.getKey]) {
+                    return {
+                        ...whereItem,
+                        value: formData[whereItem.getKey],
+                    };
+                }
+                return whereItem;
+            });
+
+            filter = { where: processedWhere };
+
+            if (settings.fields?.length > 0) {
+                filter.fields = settings.fields;
+            }
+
+            if (settings.order && settings.order.sortBy && settings.order.sort) {
+                filter.sortBy = settings.order.sortBy;
+                filter.sort = settings.order.sort;
+            }
+
+            if (settings?.customParams) {
+                filter = { ...filter, ...settings.customParams };
+            }
+
+            CustomFetch(settings.url, 'POST', filter, function (result) {
+                setOptions(result.data);
+
+                let dataArray = [];
+                result.data.forEach((a) => {
+                    let _tempObject = a;
+                    if (!_.isEmpty(_tempObject)) {
+                        let modifiedObject = {};
+                        Object.keys(_tempObject).forEach(function (c) {
+                            if (c !== 'id' && c !== 'label') {
+                                modifiedObject['data-' + c] = _tempObject[c];
+                            }
+                        });
+                        dataArray.push(modifiedObject);
+                    }
+                });
+
+                if (dataArray.length > 0) {
+                    setDataOptions(dataArray);
+                }
+            });
+        }
+    }, [...dependencyKeys.map(key => formData[key])]);
 
     const fetchChildDropdownData = (s, v) => {
         let filter = {};
@@ -2126,7 +2172,6 @@ function Field({
                         </span>
                     );
                 }
-                break;
             case 'plaintextheading':
                 return <h2>{settings.label ? settings.label : ''}</h2>;
             case 'section':
@@ -2143,7 +2188,7 @@ function Field({
                         onEditorChange={(value, e) => {
                             onChangeRicheditor(e, value, settings.id);
                         }}
-                        onInit={(evt, editor) => (editorRef.current = editor)}
+                        onInit={(_, editor) => (editorRef.current = editor)}
                         value={inputValue || ''}
                         init={{
                             branding: false,

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

@@ -13,6 +13,7 @@ import { showContactSelectorModal } from './ContactSelectorModal';
 import { showDateRangeSelectorModal } from './DateRangeSelectorModal';
 import { showAlternativeActionModal } from './AlternativeActionModal';
 import { showReasonCollectorModal } from './ReasonCollectorModal';
+import { processGridHeaders, getColumnHeaderClasses, getColumnHeaderStyles, getColumnHeaderTooltip, getColumnCellClasses, getColumnCellStyles } from '../../../utils/columnsMetadataUtils';
 import styles from './styles/GenericIndex.module.scss';
 
 // ContactTooltip component for enhanced contact display
@@ -106,6 +107,82 @@ const ContactTooltip = ({ contacts, children }) => {
     );
 };
 
+// CellContentWithTooltip component for handling text truncation and tooltips
+const CellContentWithTooltip = ({ content, header, className }) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+    const cellRef = useRef(null);
+    const tooltipId = `cell-tooltip-${Math.random().toString(36).substr(2, 9)}`;
+    
+    // Show tooltip by default for text content, but exclude date columns which have their own tooltip system
+    const isDateColumn = header.type === 'date' || header.dataType === 'date' || header.key?.includes('date') || header.key?.includes('anniversary');
+    const shouldShowTooltip = !isDateColumn && header.tooltip !== false && (header.truncate !== false || header.tooltip);
+    
+    const handleMouseEnter = (e) => {
+        if (!shouldShowTooltip) return;
+        
+        const rect = e.currentTarget.getBoundingClientRect();
+        setTooltipPosition({
+            x: rect.left + rect.width / 2,
+            y: rect.top - 10,
+        });
+        setShowTooltip(true);
+    };
+
+    const handleMouseLeave = () => {
+        setShowTooltip(false);
+    };
+
+    // Determine if cell should allow wrapping based on header configuration
+    const allowWrap = header.allowWrap === true || header.truncate === false;
+    const cellClassName = `${className} ${allowWrap ? '' : ''}`;
+
+    if (shouldShowTooltip) {
+        return (
+            <>
+                <span
+                    ref={cellRef}
+                    className={cellClassName}
+                    data-allow-wrap={allowWrap}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    title={content} // Fallback native tooltip
+                >
+                    {content}
+                </span>
+                {showTooltip && (
+                    <div
+                        className={styles.cellTooltip}
+                        style={{
+                            position: 'fixed',
+                            left: `${tooltipPosition.x}px`,
+                            top: `${tooltipPosition.y}px`,
+                            transform: 'translateX(-50%) translateY(-100%)',
+                            zIndex: 999999,
+                            backgroundColor: 'white',
+                            color: 'black',
+                            border: '1px solid black',
+                            borderRadius: '4px',
+                            padding: '16px 20px',
+                            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                            fontSize: '14px',
+                            maxWidth: '500px',
+                            minWidth: '200px',
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                            lineHeight: '1.4'
+                        }}
+                    >
+                        {content}
+                    </div>
+                )}
+            </>
+        );
+    }
+
+    return <span className={cellClassName} data-allow-wrap={allowWrap}>{content}</span>;
+};
+
 const GenericGrid = ({
     config,
     userProfile,
@@ -825,6 +902,14 @@ const GenericGrid = ({
 
     // Handle sort request
     const requestSort = useCallback((key) => {
+        // Find the header configuration for this key to check if it's sortable
+        const header = gridHeaders.find((h) => h.key === key);
+        
+        // If the column is not sortable, don't proceed with sorting
+        if (header && header.sortable === false) {
+            return;
+        }
+        
         // If clicking the same column, toggle direction
         // Otherwise, start with ascending sort for the new column
         setSortConfig((prevConfig) => {
@@ -835,7 +920,7 @@ const GenericGrid = ({
 
             return { key, direction: newDirection };
         });
-    }, []);
+    }, [gridHeaders]);
 
     // Function to filter data based on filter values
     const filterData = useCallback(
@@ -930,6 +1015,11 @@ const GenericGrid = ({
                                     );
                             }
 
+                        case 'dropdown':
+                            const rowStrDropdown = String(rowValue).toLowerCase();
+                            const filterStrDropdown = String(value).toLowerCase();
+                            return rowStrDropdown === filterStrDropdown;
+
                         default:
                             return true;
                     }
@@ -941,10 +1031,27 @@ const GenericGrid = ({
 
     // Handle filter change
     const handleFilterChange = useCallback((key, value) => {
-        setFilterValues((prev) => ({
-            ...prev,
-            [key]: value,
-        }));
+        console.group('🔍 Filter Change Debug');
+        console.log('Filter key:', key);
+        console.log('Filter value:', value);
+        console.log('Value type:', typeof value);
+        console.log('Value length:', value?.length);
+        console.log('Is empty value:', !value || value === '');
+        
+        setFilterValues((prev) => {
+            console.log('Previous filter values:', prev);
+            
+            const newFilterValues = {
+                ...prev,
+                [key]: value,
+            };
+            
+            console.log('New filter values:', newFilterValues);
+            console.log('Active filters count:', Object.keys(newFilterValues).filter(k => newFilterValues[k]).length);
+            console.groupEnd();
+            
+            return newFilterValues;
+        });
     }, []);
 
     // Effect to update filteredData and sortedData when gridData, filterValues, or sortConfig changes
@@ -975,24 +1082,16 @@ const GenericGrid = ({
                 const staticData = settings.staticData;
 
                 if (staticData.header && staticData.rows) {
-                    // Set the headers from the static data
-                    const headerEntries = Object.entries(staticData.header);
-                    setGridHeaders(
-                        headerEntries.map(([key, config]) => ({
-                            key,
-                            label: config.label || key,
-                            sort: config.sort || key,
-                            type: config.type || 'text',
-                            filter: config.filter || null,
-                            onClick: config.onClick || null,
-                        }))
-                    );
+                    // Process static headers using the metadata utilities
+                    const mockResponse = { data: { data: staticData } };
+                    const processedHeaders = processGridHeaders(mockResponse);
+                    setGridHeaders(processedHeaders);
 
                     // Initialize filter values
                     const initialFilterValues = {};
-                    headerEntries.forEach(([key, config]) => {
-                        if (config.filter) {
-                            initialFilterValues[key] = '';
+                    processedHeaders.forEach((header) => {
+                        if (header.filter) {
+                            initialFilterValues[header.key] = '';
                         }
                     });
                     setFilterValues(initialFilterValues);
@@ -1046,26 +1145,15 @@ const GenericGrid = ({
                 if (response.data.data) {
                     // Check if the response has the expected structure with header and rows
                     if (response.data.data.header && response.data.data.rows) {
-                        // Set the headers from the response with the new structure
-                        const headerEntries = Object.entries(
-                            response.data.data.header
-                        );
-                        setGridHeaders(
-                            headerEntries.map(([key, config]) => ({
-                                key,
-                                label: config.label || key,
-                                sort: config.sort || key,
-                                type: config.type || 'text',
-                                filter: config.filter || null,
-                                onClick: config.onClick || null,
-                            }))
-                        );
+                        // Process headers using the metadata utilities
+                        const processedHeaders = processGridHeaders(response.data);
+                        setGridHeaders(processedHeaders);
 
                         // Initialize filter values
                         const initialFilterValues = {};
-                        headerEntries.forEach(([key, config]) => {
-                            if (config.filter) {
-                                initialFilterValues[key] = '';
+                        processedHeaders.forEach((header) => {
+                            if (header.filter) {
+                                initialFilterValues[header.key] = '';
                             }
                         });
                         setFilterValues(initialFilterValues);
@@ -2627,34 +2715,36 @@ const GenericGrid = ({
                         <tr>
                             {/* Use gridHeaders if available, otherwise fall back to headers from columns */}
                             {gridHeaders.length > 0
-                                ? gridHeaders.map((header, index) => (
-                                      <th
-                                          key={`header-${index}`}
-                                          className={`${styles.gridHeader} ${styles.sortableHeader}`}
-                                          onClick={() =>
-                                              requestSort(header.key)
-                                          }
-                                          style={{ cursor: 'pointer' }}
-                                      >
-                                          <div className={styles.headerContent}>
-                                              {header.label}
-                                              <span
-                                                  className={
-                                                      styles.sortIndicator
-                                                  }
-                                                  style={getSortIndicatorStyle(
-                                                      header.key
+                                ? gridHeaders.map((header, index) => {
+                                      const headerClasses = getColumnHeaderClasses(header);
+                                      const headerStyles = getColumnHeaderStyles(header);
+                                      const tooltip = getColumnHeaderTooltip(header);
+                                      
+                                      return (
+                                          <th
+                                              key={`header-${index}`}
+                                              className={`${styles.gridHeader} ${headerClasses.join(' ')}`}
+                                              onClick={header.sortable !== false ? () => requestSort(header.key) : undefined}
+                                              style={headerStyles}
+                                              title={tooltip}
+                                          >
+                                              <div className={styles.headerContent}>
+                                                  {header.label}
+                                                  {header.sortable !== false && (
+                                                      <span
+                                                          className={styles.sortIndicator}
+                                                          style={getSortIndicatorStyle(header.key)}
+                                                      >
+                                                          {sortConfig.key === header.key &&
+                                                          sortConfig.direction === 'asc'
+                                                              ? ' ▲'
+                                                              : ' ▼'}
+                                                      </span>
                                                   )}
-                                              >
-                                                  {sortConfig.key ===
-                                                      header.key &&
-                                                  sortConfig.direction === 'asc'
-                                                      ? ' ▲'
-                                                      : ' ▼'}
-                                              </span>
-                                          </div>
-                                      </th>
-                                  ))
+                                              </div>
+                                          </th>
+                                      );
+                                  })
                                 : headers.map((header, index) => (
                                       <th
                                           key={`header-${index}`}
@@ -2673,26 +2763,82 @@ const GenericGrid = ({
                                         className={styles.filterCell}
                                     >
                                         {header.filter ? (
-                                            <input
-                                                type={
-                                                    header.filter.type ===
-                                                    'date'
-                                                        ? 'date'
-                                                        : 'text'
-                                                }
-                                                className={styles.filterInput}
-                                                placeholder={`Filter ${header.label}...`}
-                                                value={
-                                                    filterValues[header.key] ||
-                                                    ''
-                                                }
-                                                onChange={(e) =>
-                                                    handleFilterChange(
-                                                        header.key,
-                                                        e.target.value
-                                                    )
-                                                }
-                                            />
+                                            header.filter.type === 'dropdown' ? (
+                                                <div className={styles.filterInput}>
+                                                    <MultiSelect
+                                                        placeholder={`Filter ${header.label}...`}
+                                                        inputValue={filterValues[header.key] ? { value: filterValues[header.key], label: filterValues[header.key] } : null}
+                                                        multi={false}
+                                                        options={header.filter.options || []}
+                                                        settings={{}}
+                                                        style={{
+                                                            control: (provided) => ({
+                                                                ...provided,
+                                                                minHeight: '32px',
+                                                                height: '32px',
+                                                                border: 'none',
+                                                                boxShadow: 'none',
+                                                                backgroundColor: 'transparent',
+                                                            }),
+                                                            valueContainer: (provided) => ({
+                                                                ...provided,
+                                                                height: '30px',
+                                                                padding: '0 6px',
+                                                            }),
+                                                            input: (provided) => ({
+                                                                ...provided,
+                                                                margin: '0px',
+                                                            }),
+                                                            indicatorSeparator: () => ({
+                                                                display: 'none',
+                                                            }),
+                                                            indicatorsContainer: (provided) => ({
+                                                                ...provided,
+                                                                height: '30px',
+                                                            }),
+                                                        }}
+                                                        onChange={(selectedOption) => {
+                                                            console.log('=== DROPDOWN FILTER DEBUG ===');
+                                                            console.log('Header key:', header.key);
+                                                            console.log('Header:', header);
+                                                            console.log('Selected option:', selectedOption);
+                                                            console.log('Selected option type:', typeof selectedOption);
+                                                            console.log('Is array?', Array.isArray(selectedOption));
+                                                            console.log('Current filterValues:', filterValues);
+                                                            
+                                                            // Fix: MultiSelect returns a single object when multi=false, not an array
+                                                            const newValue = selectedOption ? selectedOption.value : '';
+                                                            console.log('New value to set:', newValue);
+                                                            
+                                                            handleFilterChange(header.key, newValue);
+                                                            
+                                                            console.log('Filter change called with:', header.key, newValue);
+                                                            console.log('=== END DROPDOWN DEBUG ===');
+                                                        }}
+                                                    />
+                                                </div>
+                                            ) : (
+                                                <input
+                                                    type={
+                                                        header.filter.type ===
+                                                        'date'
+                                                            ? 'date'
+                                                            : 'text'
+                                                    }
+                                                    className={styles.filterInput}
+                                                    placeholder={`Filter ${header.label}...`}
+                                                    value={
+                                                        filterValues[header.key] ||
+                                                        ''
+                                                    }
+                                                    onChange={(e) =>
+                                                        handleFilterChange(
+                                                            header.key,
+                                                            e.target.value
+                                                        )
+                                                    }
+                                                />
+                                            )
                                         ) : null}
                                     </th>
                                 ))}
@@ -2715,7 +2861,11 @@ const GenericGrid = ({
                                     {/* Use gridHeaders if available, otherwise fall back to columns */}
                                     {gridHeaders.length > 0
                                         ? gridHeaders.map(
-                                              (header, colIndex) => (
+                                              (header, colIndex) => {
+                                                  const cellClasses = getColumnCellClasses(header);
+                                                  const cellStyles = getColumnCellStyles(header);
+                                                  
+                                                  return (
                                                   <td
                                                       key={`cell-${rowIndex}-${colIndex}`}
                                                       className={`${
@@ -2732,7 +2882,8 @@ const GenericGrid = ({
                                                           )
                                                               ? styles.clickableCell
                                                               : ''
-                                                      }`}
+                                                      } ${cellClasses.join(' ')}`}
+                                                      style={cellStyles}
                                                       onClick={
                                                           header.onClick &&
                                                           !quarterCellHasContent(
@@ -2757,12 +2908,8 @@ const GenericGrid = ({
                                                           row
                                                       ) ? (
                                                           header.onClick ? (
-                                                              <span
-                                                                  className={
-                                                                      styles.cellWithValue
-                                                                  }
-                                                              >
-                                                                  {formatCellContent(
+                                                              <CellContentWithTooltip
+                                                                  content={formatCellContent(
                                                                       row[
                                                                           header
                                                                               .key
@@ -2781,24 +2928,12 @@ const GenericGrid = ({
                                                                       },
                                                                       row
                                                                   )}
-                                                              </span>
+                                                                  header={header}
+                                                                  className={styles.cellWithValue}
+                                                              />
                                                           ) : (
-                                                              <span
-                                                                  className={
-                                                                      styles.cellContent
-                                                                  }
-                                                                  data-type={
-                                                                      header.type ||
-                                                                      (typeof row[
-                                                                          header
-                                                                              .key
-                                                                      ] ===
-                                                                      'number'
-                                                                          ? 'number'
-                                                                          : '')
-                                                                  }
-                                                              >
-                                                                  {formatCellContent(
+                                                              <CellContentWithTooltip
+                                                                  content={formatCellContent(
                                                                       row[
                                                                           header
                                                                               .key
@@ -2817,7 +2952,9 @@ const GenericGrid = ({
                                                                       },
                                                                       row
                                                                   )}
-                                                              </span>
+                                                                  header={header}
+                                                                  className={styles.cellContent}
+                                                              />
                                                           )
                                                       ) : header.onClick &&
                                                         isQuarterCellClickable(
@@ -2837,7 +2974,8 @@ const GenericGrid = ({
                                                           ''
                                                       )}
                                                   </td>
-                                              )
+                                                  );
+                                              }
                                           )
                                         : columns.map((col, colIndex) => (
                                               <td

package/src/components/crm/generic/styles/GenericIndex.module.scss

@@ -502,6 +502,58 @@
     }
 }
 
+// Non-sortable column styles
+.non-sortable {
+    cursor: default !important;
+    opacity: 0.8;
+    user-select: none;
+    
+    &:hover {
+        background-color: var(--primary-color, #007bff) !important;
+    }
+    
+    .headerContent {
+        opacity: 0.9;
+    }
+}
+
+// Virtual column styles
+.virtual-column {
+    position: relative;
+    
+    &::after {
+        content: '🔗';
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        font-size: 0.7em;
+        opacity: 0.6;
+    }
+}
+
+// Computed column styles  
+.computed-column {
+    position: relative;
+    
+    &::after {
+        content: '🧮';
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        font-size: 0.7em;
+        opacity: 0.6;
+    }
+}
+
+// Column type indicators
+.column-type-virtual {
+    border-left: 3px solid rgba(255, 193, 7, 0.7);
+}
+
+.column-type-computed {
+    border-left: 3px solid rgba(40, 167, 69, 0.7);
+}
+
 .headerContent {
     display: flex;
     align-items: center;
@@ -564,6 +616,10 @@
 .cellContent {
     display: inline-block;
     width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
 
     /* Ensure date fields have uniform width */
     &[data-type='date'] {
@@ -572,6 +628,13 @@
         max-width: 120px;
         display: inline-block;
     }
+
+    /* Allow wrapping for specific content types that need it */
+    &[data-allow-wrap='true'] {
+        white-space: normal;
+        max-width: none;
+        text-overflow: initial;
+    }
 }
 
 /* Date with contacts display */

package/src/utils/columnsMetadataUtils.js

@@ -0,0 +1,329 @@
+/**
+ * Utilities for handling columns_metadata from API responses
+ * 
+ * This module provides functions to parse and apply metadata from the backend
+ * that controls column behavior, especially for virtual columns that should not be sortable.
+ */
+
+/**
+ * Extracts and normalizes columns metadata from API response
+ * 
+ * @param {Object} response - API response object
+ * @returns {Object} - Normalized metadata object with column keys as properties
+ */
+export const extractColumnsMetadata = (response) => {
+    // Handle different possible response structures
+    const metadata = response?.data?.columns_metadata || 
+                    response?.columns_metadata || 
+                    response?.metadata?.columns ||
+                    {};
+    
+    // Ensure we have a valid object
+    if (!metadata || typeof metadata !== 'object') {
+        return {};
+    }
+    
+    return metadata;
+};
+
+/**
+ * Checks if a column is sortable based on metadata
+ * 
+ * @param {string} columnKey - The column key/identifier
+ * @param {Object} metadata - Columns metadata object
+ * @returns {boolean} - Whether the column is sortable
+ */
+export const isColumnSortable = (columnKey, metadata) => {
+    // If no metadata available, assume sortable (backward compatibility)
+    if (!metadata || typeof metadata !== 'object') {
+        return true;
+    }
+    
+    const columnMeta = metadata[columnKey];
+    
+    // If no specific metadata for this column, assume sortable
+    if (!columnMeta || typeof columnMeta !== 'object') {
+        return true;
+    }
+    
+    // Check the sortable property, default to true if not specified
+    return columnMeta.sortable !== false;
+};
+
+/**
+ * Gets the display type for a column based on metadata
+ * 
+ * @param {string} columnKey - The column key/identifier  
+ * @param {Object} metadata - Columns metadata object
+ * @returns {string} - Column display type (e.g., 'virtual', 'computed', 'regular')
+ */
+export const getColumnDisplayType = (columnKey, metadata) => {
+    if (!metadata || typeof metadata !== 'object') {
+        return 'regular';
+    }
+    
+    const columnMeta = metadata[columnKey];
+    
+    if (!columnMeta || typeof columnMeta !== 'object') {
+        return 'regular';
+    }
+    
+    return columnMeta.type || 'regular';
+};
+
+/**
+ * Gets additional column properties from metadata
+ * 
+ * @param {string} columnKey - The column key/identifier
+ * @param {Object} metadata - Columns metadata object  
+ * @returns {Object} - Additional properties like tooltip, description, etc.
+ */
+export const getColumnProperties = (columnKey, metadata) => {
+    if (!metadata || typeof metadata !== 'object') {
+        return {};
+    }
+    
+    const columnMeta = metadata[columnKey];
+    
+    if (!columnMeta || typeof columnMeta !== 'object') {
+        return {};
+    }
+    
+    return {
+        tooltip: columnMeta.tooltip || null,
+        description: columnMeta.description || null,
+        virtual: columnMeta.virtual === true,
+        computed: columnMeta.computed === true,
+        searchable: columnMeta.searchable !== false,
+        filterable: columnMeta.filterable !== false,
+        width: columnMeta.width || null,
+        truncate: columnMeta.truncate === true
+    };
+};
+
+/**
+ * Merges column configuration with metadata to create enhanced column objects
+ * 
+ * @param {Array} columns - Original column configuration array
+ * @param {Object} metadata - Columns metadata object
+ * @returns {Array} - Enhanced column array with metadata applied
+ */
+export const mergeColumnsWithMetadata = (columns, metadata) => {
+    if (!Array.isArray(columns)) {
+        return [];
+    }
+    
+    if (!metadata || typeof metadata !== 'object') {
+        return columns;
+    }
+    
+    return columns.map(column => {
+        const columnKey = column.key || column.id || column.name;
+        
+        if (!columnKey) {
+            return column;
+        }
+        
+        const columnProperties = getColumnProperties(columnKey, metadata);
+        const isSortable = isColumnSortable(columnKey, metadata);
+        const displayType = getColumnDisplayType(columnKey, metadata);
+        
+        return {
+            ...column,
+            sortable: isSortable,
+            displayType,
+            virtual: columnProperties.virtual,
+            computed: columnProperties.computed,
+            tooltip: columnProperties.tooltip,
+            description: columnProperties.description,
+            searchable: columnProperties.searchable,
+            filterable: columnProperties.filterable,
+            width: columnProperties.width,
+            truncate: columnProperties.truncate,
+            // Keep original metadata for reference
+            _metadata: metadata[columnKey] || {}
+        };
+    });
+};
+
+/**
+ * Processes grid headers from API response and applies metadata
+ * 
+ * @param {Object} response - API response containing headers and metadata
+ * @returns {Array} - Processed headers with metadata applied
+ */
+export const processGridHeaders = (response) => {
+    // Extract headers from different possible response structures
+    const headers = response?.data?.data?.header || 
+                   response?.data?.header || 
+                   response?.header || 
+                   {};
+                   
+    const metadata = extractColumnsMetadata(response);
+    
+    if (!headers || typeof headers !== 'object') {
+        return [];
+    }
+    
+    // Convert headers object to array format expected by components
+    const headerEntries = Object.entries(headers);
+    
+    return headerEntries.map(([key, config]) => {
+        const isSortable = isColumnSortable(key, metadata);
+        const displayType = getColumnDisplayType(key, metadata);
+        const properties = getColumnProperties(key, metadata);
+        
+        return {
+            key,
+            label: config.label || key,
+            sort: config.sort || key,
+            type: config.type || 'text',
+            filter: config.filter || null,
+            onClick: config.onClick || null,
+            // Apply metadata
+            sortable: isSortable,
+            displayType,
+            virtual: properties.virtual,
+            computed: properties.computed,
+            tooltip: properties.tooltip,
+            description: properties.description,
+            searchable: properties.searchable,
+            filterable: properties.filterable,
+            width: properties.width,
+            truncate: properties.truncate,
+            // Keep original metadata for reference
+            _metadata: metadata[key] || {}
+        };
+    });
+};
+
+/**
+ * Gets CSS classes for a column header based on its metadata
+ * 
+ * @param {Object} header - Header configuration object with metadata
+ * @returns {Array} - Array of CSS class names
+ */
+export const getColumnHeaderClasses = (header) => {
+    const classes = [];
+    
+    if (header.sortable === false) {
+        classes.push('non-sortable');
+    } else {
+        classes.push('sortable');
+    }
+    
+    if (header.virtual) {
+        classes.push('virtual-column');
+    }
+    
+    if (header.computed) {
+        classes.push('computed-column');
+    }
+    
+    if (header.displayType) {
+        classes.push(`column-type-${header.displayType}`);
+    }
+    
+    if (header.truncate) {
+        classes.push('truncate-text');
+    }
+    
+    return classes;
+};
+
+/**
+ * Gets inline styles for a column header based on its metadata
+ * 
+ * @param {Object} header - Header configuration object with metadata
+ * @returns {Object} - Style object for the header
+ */
+export const getColumnHeaderStyles = (header) => {
+    const styles = {};
+    
+    if (header.sortable === false) {
+        styles.cursor = 'default';
+        styles.opacity = 0.7;
+    } else {
+        styles.cursor = 'pointer';
+    }
+    
+    if (header.width) {
+        styles.width = header.width;
+        styles.minWidth = header.width;
+        styles.maxWidth = header.width;
+    }
+    
+    return styles;
+};
+
+/**
+ * Gets tooltip text for a column header based on its metadata
+ * 
+ * @param {Object} header - Header configuration object with metadata
+ * @returns {string|null} - Tooltip text or null if no tooltip needed
+ */
+export const getColumnHeaderTooltip = (header) => {
+    if (header.tooltip) {
+        return header.tooltip;
+    }
+    
+    if (header.sortable === false) {
+        if (header.virtual) {
+            return 'This is a virtual column and cannot be sorted';
+        }
+        if (header.computed) {
+            return 'This is a computed column and cannot be sorted';
+        }
+        return 'This column cannot be sorted';
+    }
+    
+    return null;
+};
+
+/**
+ * Gets CSS classes for a column cell based on its metadata
+ * 
+ * @param {Object} header - Header configuration object with metadata
+ * @returns {Array} - Array of CSS class names
+ */
+export const getColumnCellClasses = (header) => {
+    const classes = [];
+    
+    if (header.truncate) {
+        classes.push('truncate-text');
+    }
+    
+    return classes;
+};
+
+/**
+ * Gets inline styles for a column cell based on its metadata
+ * 
+ * @param {Object} header - Header configuration object with metadata
+ * @returns {Object} - Style object for the cell
+ */
+export const getColumnCellStyles = (header) => {
+    const styles = {};
+    
+    if (header.width) {
+        styles.width = header.width;
+        styles.minWidth = header.width;
+        styles.maxWidth = header.width;
+    }
+    
+    return styles;
+};
+
+export default {
+    extractColumnsMetadata,
+    isColumnSortable,
+    getColumnDisplayType,
+    getColumnProperties,
+    mergeColumnsWithMetadata,
+    processGridHeaders,
+    getColumnHeaderClasses,
+    getColumnHeaderStyles,
+    getColumnHeaderTooltip,
+    getColumnCellClasses,
+    getColumnCellStyles
+};