@visns-studio/visns-components 5.8.20 → 5.9.1

package/src/components/crm/DataGrid.jsx

@@ -43,6 +43,7 @@ import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
 import Vapor from 'laravel-vapor';
 import Lightbox from 'yet-another-react-lightbox';
+import { Tooltip } from 'react-tooltip';
 import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
 import {
@@ -85,6 +86,101 @@ import Download from './Download';
 import Form from './Form';
 import _ from 'lodash';
 
+// CSS styles to ensure consistent group header heights with compact design and click indicators
+const groupHeaderStyles = `
+    .datagrid-fixed-group-headers .group-header-fixed-height {
+        height: 34px !important;
+        min-height: 34px !important;
+        max-height: 34px !important;
+        box-sizing: border-box !important;
+        line-height: 1.1 !important;
+        flex-shrink: 0 !important;
+        overflow: hidden !important;
+        transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
+        cursor: pointer !important;
+        position: relative !important;
+    }
+
+    /* Hover effect for entire group header */
+    .datagrid-fixed-group-headers .group-header-fixed-height:hover {
+        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
+        transform: translateY(-1px) !important;
+    }
+
+    /* Click indicator overlay */
+    .datagrid-fixed-group-headers .group-header-fixed-height::after {
+        content: '' !important;
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        background: rgba(59, 130, 246, 0.05) !important;
+        opacity: 0 !important;
+        transition: opacity 0.2s ease !important;
+        pointer-events: none !important;
+    }
+
+    .datagrid-fixed-group-headers .group-header-fixed-height:hover::after {
+        opacity: 1 !important;
+    }
+
+    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row {
+        height: 34px !important;
+        min-height: 34px !important;
+        max-height: 34px !important;
+    }
+
+    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row .InovuaReactDataGrid__group-cell {
+        height: 34px !important;
+        min-height: 34px !important;
+        max-height: 34px !important;
+        padding: 0 !important;
+        overflow: hidden !important;
+    }
+
+    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row .InovuaReactDataGrid__group-cell > div {
+        height: 34px !important;
+        min-height: 34px !important;
+        max-height: 34px !important;
+        overflow: hidden !important;
+    }
+
+    /* Ensure group headers maintain consistent styling during expand/collapse */
+    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row--collapsed .group-header-fixed-height,
+    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row--expanded .group-header-fixed-height {
+        height: 34px !important;
+        min-height: 34px !important;
+        max-height: 34px !important;
+        transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
+    }
+
+    /* Force consistent height for all group headers regardless of content */
+    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row[data-group-by] {
+        height: 34px !important;
+        min-height: 34px !important;
+        max-height: 34px !important;
+    }
+
+    .datagrid-fixed-group-headers .InovuaReactDataGrid__group-row[data-group-by] .InovuaReactDataGrid__group-cell {
+        height: 34px !important;
+        min-height: 34px !important;
+        max-height: 34px !important;
+    }
+`;
+
+// Inject styles into the document head
+if (typeof document !== 'undefined') {
+    const styleId = 'datagrid-group-header-styles';
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = groupHeaderStyles;
+        document.head.appendChild(style);
+    }
+}
+
 const loadData = async (
     { skip, limit, sortInfo, filterValue },
     search,
@@ -146,6 +242,123 @@ const loadData = async (
     }
 };
 
+// Utility function to check if text content is truncated
+const isTextTruncated = (element) => {
+    if (!element) return false;
+    return (
+        element.scrollWidth > element.clientWidth ||
+        element.scrollHeight > element.clientHeight
+    );
+};
+
+// Utility function to format cell value for tooltip display
+const formatCellValueForTooltip = (value, columnType) => {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+
+    switch (columnType) {
+        case 'date':
+        case 'datetime':
+            if (
+                moment(value).isValid() &&
+                moment(value).format('YYYY-MM-DD') !== '1970-01-01'
+            ) {
+                return moment(value).format('DD-MM-YYYY HH:mm');
+            }
+            return String(value);
+        case 'currency':
+            return numeral(value).format('$0,0.00');
+        case 'number':
+            return numeral(value).format('0,0');
+        case 'boolean':
+            return value ? 'Yes' : 'No';
+        case 'richtext':
+            // Strip HTML tags for tooltip
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = value;
+            return tempDiv.textContent || tempDiv.innerText || '';
+        default:
+            return String(value);
+    }
+};
+
+// Component to wrap cell content with tooltip functionality
+const CellWithTooltip = ({
+    children,
+    value,
+    columnType = 'text',
+    className = '',
+}) => {
+    const cellRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [tooltipId] = useState(
+        () => `cell-tooltip-${Math.random().toString(36).substr(2, 9)}`
+    );
+
+    useEffect(() => {
+        const checkTruncation = () => {
+            if (cellRef.current) {
+                const isTruncated = isTextTruncated(cellRef.current);
+                setShowTooltip(isTruncated);
+            }
+        };
+
+        // Check truncation on mount and when content changes
+        checkTruncation();
+
+        // Also check on window resize
+        const handleResize = () => checkTruncation();
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [children, value]);
+
+    const tooltipContent = formatCellValueForTooltip(value, columnType);
+
+    // Only show tooltip if content is truncated and we have meaningful content
+    const shouldShowTooltip =
+        showTooltip && tooltipContent && tooltipContent.trim() !== '';
+
+    return (
+        <div
+            ref={cellRef}
+            className={className}
+            style={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                width: '100%',
+            }}
+            {...(shouldShowTooltip && {
+                'data-tooltip-id': tooltipId,
+                'data-tooltip-content': tooltipContent,
+            })}
+        >
+            {children}
+            {shouldShowTooltip && (
+                <Tooltip
+                    id={tooltipId}
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                        color: 'white',
+                        borderRadius: '6px',
+                        padding: '8px 12px',
+                        fontSize: '13px',
+                        maxWidth: '300px',
+                        wordWrap: 'break-word',
+                        zIndex: 9999,
+                    }}
+                    place="top"
+                    offset={5}
+                />
+            )}
+        </div>
+    );
+};
+
 const DataGrid = forwardRef(
     (
         {
@@ -370,6 +583,75 @@ const DataGrid = forwardRef(
         /** Table States */
         const dataRef = useRef(null);
         const [dSearch, setDSearch] = useState('');
+
+        /** Group expansion state */
+        const [collapsedGroups, setCollapsedGroups] = useState({});
+
+        /** Force re-render trigger for group header consistency */
+        const [groupRenderKey, setGroupRenderKey] = useState(0);
+
+        /** Prevent rapid group selection clicks */
+        const groupClickTimeoutRef = useRef(null);
+
+        // Effect to ensure group headers maintain consistent styling after expand/collapse
+        useEffect(() => {
+            if (ajaxSetting?.groupBy) {
+                // Small delay to allow ReactDataGrid to complete its rendering
+                const timer = setTimeout(() => {
+                    // Force a re-render to ensure consistent styling
+                    setGroupRenderKey((prev) => prev + 1);
+
+                    // Apply styles to any group headers that might have been missed
+                    const groupHeaders = document.querySelectorAll(
+                        '.group-header-fixed-height'
+                    );
+                    groupHeaders.forEach((header) => {
+                        header.style.height = '34px';
+                        header.style.minHeight = '34px';
+                        header.style.maxHeight = '34px';
+                        header.style.boxSizing = 'border-box';
+                        header.style.lineHeight = '1.1';
+                        header.style.flexShrink = '0';
+                        header.style.overflow = 'hidden';
+                        header.style.cursor = 'pointer';
+                        header.style.position = 'relative';
+                    });
+
+                    // Also apply to ReactDataGrid group rows to fix height inconsistency
+                    const groupRows = document.querySelectorAll(
+                        '.datagrid-fixed-group-headers .InovuaReactDataGrid__group-row'
+                    );
+                    groupRows.forEach((row) => {
+                        row.style.height = '34px';
+                        row.style.minHeight = '34px';
+                        row.style.maxHeight = '34px';
+
+                        // Apply to group cells within the row
+                        const groupCells = row.querySelectorAll(
+                            '.InovuaReactDataGrid__group-cell'
+                        );
+                        groupCells.forEach((cell) => {
+                            cell.style.height = '34px';
+                            cell.style.minHeight = '34px';
+                            cell.style.maxHeight = '34px';
+                            cell.style.padding = '0';
+                            cell.style.overflow = 'hidden';
+
+                            // Apply to div elements within group cells
+                            const divs = cell.querySelectorAll('div');
+                            divs.forEach((div) => {
+                                div.style.height = '34px';
+                                div.style.minHeight = '34px';
+                                div.style.maxHeight = '34px';
+                                div.style.overflow = 'hidden';
+                            });
+                        });
+                    });
+                }, 50);
+
+                return () => clearTimeout(timer);
+            }
+        }, [collapsedGroups, ajaxSetting?.groupBy]);
         const dataSource = useCallback(
             (params) => {
                 const sqlResult = loadData(params, dSearch, ajaxSetting);
@@ -378,6 +660,18 @@ const DataGrid = forwardRef(
                 }
 
                 sqlResult.then((res) => {
+                    // Sort data by grouping field if grouping is enabled
+                    if (ajaxSetting?.groupBy?.length > 0) {
+                        const groupField = ajaxSetting.groupBy[0]; // groupBy is array of strings
+                        res.data.sort((a, b) => {
+                            const aValue = a[groupField] || '';
+                            const bValue = b[groupField] || '';
+                            return aValue
+                                .toString()
+                                .localeCompare(bValue.toString());
+                        });
+                    }
+
                     if (setTotal) {
                         setTotal(res.count);
                     }
@@ -390,7 +684,7 @@ const DataGrid = forwardRef(
 
                 return sqlResult;
             },
-            [ajaxSetting, dSearch]
+            [ajaxSetting, dSearch, collapsedGroups]
         );
         const [filterDataSource, setFilterDataSource] = useState([]);
         const [filterValue, setFilterValue] = useState([]);
@@ -547,9 +841,31 @@ const DataGrid = forwardRef(
                 if (param.selected === true) {
                     // Select all rows - this happens when header checkbox is clicked to select all
                     const s = {};
-                    param.data.forEach((obj) => {
-                        s[obj.id] = obj;
-                    });
+
+                    // Always prefer dataRef.current as it contains the most reliable data
+                    // especially when grouping is active
+                    if (dataRef.current && Array.isArray(dataRef.current)) {
+                        dataRef.current.forEach((obj) => {
+                            if (
+                                obj &&
+                                obj.id !== undefined &&
+                                obj.id !== null
+                            ) {
+                                s[obj.id] = obj;
+                            }
+                        });
+                    } else if (param.data && Array.isArray(param.data)) {
+                        // Fallback to param.data if dataRef.current is not available
+                        param.data.forEach((obj) => {
+                            if (
+                                obj &&
+                                obj.id !== undefined &&
+                                obj.id !== null
+                            ) {
+                                s[obj.id] = obj;
+                            }
+                        });
+                    }
                     setSelected(s);
                     // Update parent component's rowsSelected state
                     if (setRowsSelected) {
@@ -569,17 +885,148 @@ const DataGrid = forwardRef(
                 } else if (typeof param.selected === 'object') {
                     // Individual row selection/deselection - ReactDataGrid sends the complete new selection state
                     // ReactDataGrid sends the complete new selection state, not just the changed row
-                    // So we can directly use param.selected as the new selection state
-                    setSelected(param.selected);
+                    // Clean the selection to remove any group objects or invalid entries
+                    const cleanSelection = {};
+                    Object.keys(param.selected).forEach((key) => {
+                        const item = param.selected[key];
+                        // Only keep items that have valid IDs and are not group objects
+                        if (
+                            key !== 'undefined' &&
+                            key !== 'null' &&
+                            item &&
+                            !item.__group &&
+                            item.id !== undefined
+                        ) {
+                            cleanSelection[key] = item;
+                        }
+                    });
+
+                    setSelected(cleanSelection);
                     // Update parent component's rowsSelected state
                     if (setRowsSelected) {
-                        setRowsSelected(param.selected);
+                        setRowsSelected(cleanSelection);
                     }
                 }
             },
             [selected, setRowsSelected]
         );
 
+        // Group selection functions
+        const handleGroupSelectionChange = useCallback(
+            (groupValue, isChecked) => {
+                if (!dataRef.current || !ajaxSetting?.groupBy) {
+                    return;
+                }
+
+                const groupField = ajaxSetting.groupBy[0];
+                const groupRows = dataRef.current.filter(
+                    (row) => row[groupField] === groupValue
+                );
+
+                // Clean the selected state - remove any invalid entries
+                const cleanSelected = {};
+                Object.keys(selected).forEach((key) => {
+                    const item = selected[key];
+                    // Only keep items that have valid IDs and are not group objects
+                    if (
+                        key !== 'undefined' &&
+                        key !== 'null' &&
+                        item &&
+                        !item.__group &&
+                        item.id !== undefined
+                    ) {
+                        cleanSelected[key] = item;
+                    }
+                });
+                const newSelected = { ...cleanSelected };
+
+                if (isChecked) {
+                    // Select all rows in the group
+                    groupRows.forEach((row) => {
+                        if (row && row.id !== undefined && row.id !== null) {
+                            newSelected[row.id] = row;
+                        }
+                    });
+                } else {
+                    // Deselect all rows in the group
+                    groupRows.forEach((row) => {
+                        if (row && row.id !== undefined && row.id !== null) {
+                            delete newSelected[row.id];
+                        }
+                    });
+                }
+
+                // Update the selection state
+                setSelected(newSelected);
+                if (setRowsSelected) {
+                    setRowsSelected(newSelected);
+                }
+
+                // Force ReactDataGrid to update its selection using the grid API
+                setTimeout(() => {
+                    if (gridRef.current && gridRef.current.setSelected) {
+                        gridRef.current.setSelected(newSelected);
+                    } else if (gridRef.current) {
+                        // Try alternative methods
+                        if (gridRef.current.updateSelected) {
+                            gridRef.current.updateSelected(newSelected);
+                        } else if (gridRef.current.setSelection) {
+                            gridRef.current.setSelection(newSelected);
+                        }
+                    }
+                }, 10);
+            },
+            [selected, setRowsSelected, ajaxSetting]
+        );
+
+        const isGroupSelected = useCallback(
+            (groupValue) => {
+                if (!dataRef.current || !ajaxSetting?.groupBy) {
+                    return false;
+                }
+
+                // Clean the selected state first
+                const cleanSelected = {};
+                Object.keys(selected).forEach((key) => {
+                    const item = selected[key];
+                    if (
+                        key !== 'undefined' &&
+                        key !== 'null' &&
+                        item &&
+                        !item.__group &&
+                        item.id !== undefined
+                    ) {
+                        cleanSelected[key] = item;
+                    }
+                });
+
+                const groupField = ajaxSetting.groupBy[0];
+                const groupRows = dataRef.current.filter(
+                    (row) => row[groupField] === groupValue
+                );
+
+                if (groupRows.length === 0) {
+                    return false;
+                }
+
+                // Filter out rows with invalid IDs and check if all valid rows are selected
+                const validRows = groupRows.filter(
+                    (row) => row && row.id !== undefined && row.id !== null
+                );
+
+                if (validRows.length === 0) {
+                    return false;
+                }
+
+                const allSelected = validRows.every(
+                    (row) => cleanSelected[row.id]
+                );
+
+                return allSelected;
+            },
+            [selected, ajaxSetting]
+        );
+
         const findUpdatedFilter = (filters, currentValues) => {
             for (const filter of filters) {
                 const matchingCurrentValue = currentValues.find(
@@ -1213,6 +1660,7 @@ const DataGrid = forwardRef(
                         }
                     } else {
                         // For non-checkbox columns, handle normal row clicks
+                        // But do NOT trigger checkbox selection
                         onRowClick(rowProps, event);
 
                         // Call the original onClick handler
@@ -1222,7 +1670,7 @@ const DataGrid = forwardRef(
                     }
                 };
             },
-            [selected, setRowsSelected]
+            [selected, setRowsSelected, onRowClick]
         );
 
         const exportTrigger = async () => {
@@ -1538,10 +1986,11 @@ const DataGrid = forwardRef(
                                     'var(--light-bg-color, #f5f5f5)',
                                 borderRadius: '4px',
                                 padding: '4px',
-                                width: '22px',
-                                height: '22px',
+                                width: '28px',
+                                height: '28px',
                                 boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
                                 margin: '0 1px',
+                                cursor: 'pointer',
                             }}
                         >
                             <img
@@ -1550,8 +1999,8 @@ const DataGrid = forwardRef(
                                 data-tooltip-id="system-tooltip"
                                 data-tooltip-content={tooltipContent}
                                 style={{
-                                    maxHeight: '16px',
-                                    maxWidth: '16px',
+                                    maxHeight: '20px',
+                                    maxWidth: '20px',
                                     objectFit: 'contain',
                                 }}
                             />
@@ -1586,10 +2035,11 @@ const DataGrid = forwardRef(
                                         'var(--light-bg-color, #f5f5f5)',
                                     borderRadius: '4px',
                                     padding: '4px',
-                                    width: '22px',
-                                    height: '22px',
+                                    width: '28px',
+                                    height: '28px',
                                     boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
                                     margin: '0 1px',
+                                    cursor: 'pointer',
                                 }}
                             >
                                 <IconComponent
@@ -1670,6 +2120,82 @@ const DataGrid = forwardRef(
             }
         }, [selected]);
 
+        // Add styling to grouped column header with enhanced debugging
+        useEffect(() => {
+            if (ajaxSetting?.groupBy && ajaxSetting.groupBy.length > 0) {
+                const groupedColumnName = ajaxSetting.groupBy[0];
+
+                // Multiple attempts to find and style the grouped column header
+                const applyGroupedStyling = () => {
+                    const headerCells = document.querySelectorAll(
+                        '.InovuaReactDataGrid__header-cell'
+                    );
+
+                    headerCells.forEach((cell) => {
+                        const cellContent = cell.textContent?.trim();
+                        const dataColumnId =
+                            cell.getAttribute('data-column-id');
+
+                        // Find the column that matches the grouped field
+                        const matchingColumn = gridColumns.find(
+                            (col) =>
+                                col.name === groupedColumnName ||
+                                col.header === cellContent ||
+                                col.id === groupedColumnName ||
+                                dataColumnId === groupedColumnName
+                        );
+
+                        if (
+                            matchingColumn &&
+                            (matchingColumn.name === groupedColumnName ||
+                                matchingColumn.id === groupedColumnName ||
+                                dataColumnId === groupedColumnName)
+                        ) {
+                            cell.classList.add(
+                                'InovuaReactDataGrid__header-cell--grouped'
+                            );
+                            // Force inline styles as backup
+                            cell.style.background =
+                                'linear-gradient(135deg, var(--primary-color, #3b82f6) 0%, var(--secondary-color, #2563eb) 100%)';
+                            cell.style.color = 'white';
+                            cell.style.fontWeight = '800';
+                            cell.style.textTransform = 'uppercase';
+                            cell.style.letterSpacing = '0.1em';
+                            cell.style.borderBottom =
+                                '4px solid var(--secondary-color, #2563eb)';
+                        }
+                    });
+
+                    // Also apply class to the main DataGrid container for debugging
+                    const dataGrids = document.querySelectorAll(
+                        '.InovuaReactDataGrid'
+                    );
+                    dataGrids.forEach((grid) => {
+                        if (
+                            grid.classList.contains(
+                                'InovuaReactDataGrid--grouped'
+                            ) ||
+                            grid.classList.contains('datagrid-with-grouping')
+                        ) {
+                            // Main checkbox is now enabled for grouped data
+                        }
+                    });
+                };
+
+                // Apply immediately and with delays
+                applyGroupedStyling();
+                const timer1 = setTimeout(applyGroupedStyling, 100);
+                const timer2 = setTimeout(applyGroupedStyling, 500);
+                const timer3 = setTimeout(applyGroupedStyling, 1000);
+
+                return () => {
+                    clearTimeout(timer1);
+                    clearTimeout(timer2);
+                    clearTimeout(timer3);
+                };
+            }
+        }, [ajaxSetting?.groupBy, gridColumns]);
+
         useEffect(() => {
             const delayedSetDSearch = debounce(() => {
                 setDSearch(search);
@@ -2133,7 +2659,14 @@ const DataGrid = forwardRef(
 
                                         const value = `${addressValue} ${stateValue}`;
 
-                                        return <span>{value}</span>;
+                                        return (
+                                            <CellWithTooltip
+                                                value={value}
+                                                columnType="address"
+                                            >
+                                                <span>{value}</span>
+                                            </CellWithTooltip>
+                                        );
                                     },
                                 };
                             case 'age':
@@ -2190,11 +2723,17 @@ const DataGrid = forwardRef(
                                     name: `${column.type}.${column.id}`,
                                     sortable: false,
                                     render: ({ data }) => {
-                                        if (data[column.id]) {
-                                            return 'Yes';
-                                        } else {
-                                            return 'No';
-                                        }
+                                        const value = data[column.id]
+                                            ? 'Yes'
+                                            : 'No';
+                                        return (
+                                            <CellWithTooltip
+                                                value={data[column.id]}
+                                                columnType="boolean"
+                                            >
+                                                <span>{value}</span>
+                                            </CellWithTooltip>
+                                        );
                                     },
                                 };
                             case 'coding':
@@ -2278,7 +2817,14 @@ const DataGrid = forwardRef(
                                                 data[column.id]
                                             ).format('$0,0.00');
 
-                                            return <span>{data}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="currency"
+                                                >
+                                                    <span>{data}</span>
+                                                </CellWithTooltip>
+                                            );
                                         } else {
                                             return null;
                                         }
@@ -2328,9 +2874,14 @@ const DataGrid = forwardRef(
                                             }
 
                                             return (
-                                                <span style={columnStyle}>
-                                                    {value}
-                                                </span>
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="date"
+                                                >
+                                                    <span style={columnStyle}>
+                                                        {value}
+                                                    </span>
+                                                </CellWithTooltip>
                                             );
                                         } else {
                                             return null;
@@ -2451,7 +3002,13 @@ const DataGrid = forwardRef(
                                                 }}
                                             >
                                                 <option value="">
-                                                    Select an Option
+                                                    Select{' '}
+                                                    {/^[aeioAEIO]/.test(
+                                                        column.label
+                                                    )
+                                                        ? 'an'
+                                                        : 'a'}{' '}
+                                                    {column.label}
                                                 </option>
                                                 {dropdownData[column.id] &&
                                                 dropdownData[column.id].length >
@@ -2505,7 +3062,7 @@ const DataGrid = forwardRef(
                                                                 data-tooltip-id={`system-tooltip`}
                                                                 data-tooltip-content={`Download File ${file.file_name}`}
                                                                 strokeWidth={2}
-                                                                size={18}
+                                                                size={14}
                                                                 className={
                                                                     styles.tdaction
                                                                 }
@@ -2537,7 +3094,7 @@ const DataGrid = forwardRef(
                                                                     .file_name
                                                             }`}
                                                             strokeWidth={2}
-                                                            size={18}
+                                                            size={14}
                                                             className={
                                                                 styles.tdaction
                                                             }
@@ -2622,7 +3179,14 @@ const DataGrid = forwardRef(
                                                     column.jsonData
                                                 ];
 
-                                            return <span>{data}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={data}
+                                                    columnType="json"
+                                                >
+                                                    <span>{data}</span>
+                                                </CellWithTooltip>
+                                            );
                                         } else {
                                             return null;
                                         }
@@ -2668,7 +3232,14 @@ const DataGrid = forwardRef(
                                                     ];
                                             }
 
-                                            return <span>{newData}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={newData}
+                                                    columnType="option"
+                                                >
+                                                    <span>{newData}</span>
+                                                </CellWithTooltip>
+                                            );
                                         } else {
                                             return null;
                                         }
@@ -2682,9 +3253,14 @@ const DataGrid = forwardRef(
                                     render: ({ data }) => {
                                         if (data) {
                                             return (
-                                                <span>
-                                                    {column.placeholder}
-                                                </span>
+                                                <CellWithTooltip
+                                                    value={column.placeholder}
+                                                    columnType="placeholder"
+                                                >
+                                                    <span>
+                                                        {column.placeholder}
+                                                    </span>
+                                                </CellWithTooltip>
                                             );
                                         } else {
                                             return null;
@@ -2772,7 +3348,14 @@ const DataGrid = forwardRef(
                                                     typeof value === 'string' ||
                                                     typeof value === 'number'
                                                 ) {
-                                                    return <span>{value}</span>;
+                                                    return (
+                                                        <CellWithTooltip
+                                                            value={value}
+                                                            columnType="relation"
+                                                        >
+                                                            <span>{value}</span>
+                                                        </CellWithTooltip>
+                                                    );
                                                 } else {
                                                     return null;
                                                 }
@@ -2923,7 +3506,14 @@ const DataGrid = forwardRef(
                                                 result += values.join('<br />');
                                             }
 
-                                            return <span>{parse(result)}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={result}
+                                                    columnType="relationArray"
+                                                >
+                                                    <span>{parse(result)}</span>
+                                                </CellWithTooltip>
+                                            );
                                             // }
                                         } else {
                                             let result = '';
@@ -2954,7 +3544,14 @@ const DataGrid = forwardRef(
                                                         : '';
                                             }
 
-                                            return <span>{parse(result)}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={result}
+                                                    columnType="relationArray"
+                                                >
+                                                    <span>{parse(result)}</span>
+                                                </CellWithTooltip>
+                                            );
                                         }
 
                                         return null;
@@ -2967,9 +3564,14 @@ const DataGrid = forwardRef(
                                     render: ({ data }) => {
                                         if (data && data[column.id]) {
                                             return (
-                                                <span>
-                                                    {parse(data[column.id])}
-                                                </span>
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="richtext"
+                                                >
+                                                    <span>
+                                                        {parse(data[column.id])}
+                                                    </span>
+                                                </CellWithTooltip>
                                             );
                                         } else {
                                             return null;
@@ -2990,7 +3592,14 @@ const DataGrid = forwardRef(
                                             }
                                         });
 
-                                        return <span>{stage}</span>;
+                                        return (
+                                            <CellWithTooltip
+                                                value={stage}
+                                                columnType="stage"
+                                            >
+                                                <span>{stage}</span>
+                                            </CellWithTooltip>
+                                        );
                                     },
                                 };
                             case 'time':
@@ -3014,7 +3623,14 @@ const DataGrid = forwardRef(
                                                     : 'hh:mm A'
                                             );
 
-                                            return <span>{data}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="time"
+                                                >
+                                                    <span>{data}</span>
+                                                </CellWithTooltip>
+                                            );
                                         } else {
                                             return null;
                                         }
@@ -3041,7 +3657,14 @@ const DataGrid = forwardRef(
                                                     : 'DD-MM-YYYY hh:mm A'
                                             );
 
-                                            return <span>{data}</span>;
+                                            return (
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="timer"
+                                                >
+                                                    <span>{data}</span>
+                                                </CellWithTooltip>
+                                            );
                                         } else {
                                             let shouldRenderButton = false;
 
@@ -3166,7 +3789,7 @@ const DataGrid = forwardRef(
                                                             data-tooltip-id="system-tooltip"
                                                             data-tooltip-content={`${column.label} Timer`}
                                                             strokeWidth={2}
-                                                            size={18}
+                                                            size={14}
                                                             style={{
                                                                 color: 'white',
                                                             }}
@@ -3175,7 +3798,22 @@ const DataGrid = forwardRef(
                                                 );
                                             }
 
-                                            return null;
+                                            // Return a placeholder div to maintain consistent row height
+                                            return (
+                                                <div
+                                                    style={{
+                                                        width: '28px',
+                                                        height: '28px',
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        justifyContent:
+                                                            'center',
+                                                        margin: '0 auto',
+                                                    }}
+                                                >
+                                                    {/* Empty placeholder to maintain layout */}
+                                                </div>
+                                            );
                                         }
                                     },
                                 };
@@ -3467,14 +4105,21 @@ const DataGrid = forwardRef(
                                     render: ({ data }) => {
                                         if (data && data[column.id]) {
                                             return (
-                                                <span>
-                                                    <a
-                                                        href={data[column.id]}
-                                                        target="_blank"
-                                                    >
-                                                        Link
-                                                    </a>
-                                                </span>
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="url"
+                                                >
+                                                    <span>
+                                                        <a
+                                                            href={
+                                                                data[column.id]
+                                                            }
+                                                            target="_blank"
+                                                        >
+                                                            Link
+                                                        </a>
+                                                    </span>
+                                                </CellWithTooltip>
                                             );
                                         } else {
                                             return null;
@@ -3606,7 +4251,14 @@ const DataGrid = forwardRef(
                                             }
 
                                             return (
-                                                <span>{parse(content)}</span>
+                                                <CellWithTooltip
+                                                    value={data[column.id]}
+                                                    columnType="text"
+                                                >
+                                                    <span>
+                                                        {parse(content)}
+                                                    </span>
+                                                </CellWithTooltip>
                                             );
                                         } else {
                                             return null;
@@ -3840,7 +4492,7 @@ const DataGrid = forwardRef(
                 setLimit(ajaxSetting.take);
             } else {
                 const calculateRows = (height) =>
-                    Math.floor((height - 100) / 40);
+                    Math.floor((height - 100) / 32);
 
                 const rowCount = calculateRows(minHeight);
                 setLimit(rowCount);
@@ -3936,12 +4588,395 @@ const DataGrid = forwardRef(
                         <ReactDataGrid
                             key={`datagrid-${ajaxSetting?.url || ''}-${
                                 ajaxSetting?.groupBy ? 'grouped' : 'ungrouped'
-                            }`}
+                            }-${groupRenderKey}`}
                             {...tableSetting}
                             columns={gridColumns}
                             dataSource={dataSource}
                             {...(ajaxSetting && ajaxSetting.groupBy
-                                ? { defaultGroupBy: ajaxSetting.groupBy }
+                                ? {
+                                      defaultGroupBy: ajaxSetting.groupBy,
+                                      defaultCollapsed: true,
+                                      collapsedGroups: collapsedGroups,
+                                      onGroupToggle: (groupData) => {
+                                          // Handle group expand/collapse events
+                                          // Update collapsed groups state
+                                          const groupValue =
+                                              typeof groupData === 'string'
+                                                  ? groupData
+                                                  : groupData?.value ||
+                                                    groupData?.name ||
+                                                    '';
+
+                                          setCollapsedGroups((prev) => {
+                                              const newState = { ...prev };
+                                              if (newState[groupValue]) {
+                                                  delete newState[groupValue];
+                                              } else {
+                                                  newState[groupValue] = true;
+                                              }
+                                              console.log(
+                                                  'Updated collapsed groups:',
+                                                  newState
+                                              );
+                                              return newState;
+                                          });
+                                      },
+                                      renderGroupTitle: (groupData) => {
+                                          const groupValue =
+                                              typeof groupData === 'string'
+                                                  ? groupData
+                                                  : groupData?.value ||
+                                                    groupData?.name ||
+                                                    '';
+
+                                          // Use ReactDataGrid's built-in toggle functionality
+                                          const collapsed =
+                                              collapsedGroups[groupValue] ||
+                                              false;
+                                          const toggleGroup = () => {
+                                              // Update the collapsed state
+                                              setCollapsedGroups((prev) => {
+                                                  const newState = { ...prev };
+                                                  if (newState[groupValue]) {
+                                                      delete newState[
+                                                          groupValue
+                                                      ];
+                                                  } else {
+                                                      newState[
+                                                          groupValue
+                                                      ] = true;
+                                                  }
+                                                  return newState;
+                                              });
+                                          };
+                                          const groupCount =
+                                              typeof groupData === 'object'
+                                                  ? groupData?.count || 0
+                                                  : 0;
+                                          const hasCheckboxColumn =
+                                              gridColumns.some(
+                                                  (col) =>
+                                                      col.id ===
+                                                      '__checkbox-column'
+                                              );
+
+                                          // Handle group header click for selection
+                                          const handleGroupHeaderClick = (
+                                              e
+                                          ) => {
+                                              // Prevent rapid clicks
+                                              if (
+                                                  groupClickTimeoutRef.current
+                                              ) {
+                                                  console.log(
+                                                      '🖱️ Ignoring rapid click'
+                                                  );
+                                                  return;
+                                              }
+
+                                              // Don't trigger if clicking on the expand button or checkbox
+                                              if (
+                                                  e.target.closest(
+                                                      '.group-expand-btn'
+                                                  ) ||
+                                                  e.target.closest(
+                                                      'input[type="checkbox"]'
+                                                  )
+                                              ) {
+                                                  console.log(
+                                                      '🖱️ Ignoring click on expand button or checkbox'
+                                                  );
+                                                  return;
+                                              }
+
+                                              // Set timeout to prevent rapid clicks
+                                              groupClickTimeoutRef.current =
+                                                  setTimeout(() => {
+                                                      groupClickTimeoutRef.current =
+                                                          null;
+                                                  }, 300);
+
+                                              // Toggle selection of all items in this group
+                                              const isCurrentlySelected =
+                                                  isGroupSelected(groupValue);
+
+                                              handleGroupSelectionChange(
+                                                  groupValue,
+                                                  !isCurrentlySelected
+                                              );
+                                          };
+
+                                          return (
+                                              <div
+                                                  className="group-header-clean group-header-fixed-height"
+                                                  onClick={
+                                                      handleGroupHeaderClick
+                                                  }
+                                                  style={{
+                                                      display: 'flex',
+                                                      alignItems: 'center',
+                                                      justifyContent:
+                                                          'space-between',
+                                                      width: '100%',
+                                                      height: '34px', // Compact height
+                                                      padding: '6px 12px', // Reduced padding for compact design
+                                                      background:
+                                                          'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
+                                                      borderLeft:
+                                                          '4px solid var(--primary-color, #3b82f6)',
+                                                      position: 'relative',
+                                                      overflow: 'hidden',
+                                                      boxShadow:
+                                                          '0 1px 3px rgba(0,0,0,0.1)',
+                                                      borderRadius:
+                                                          '0 4px 4px 0',
+                                                      cursor: 'pointer',
+                                                      boxSizing: 'border-box',
+                                                      lineHeight: '1.1', // Compact line height
+                                                      flexShrink: 0,
+                                                      transition:
+                                                          'background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease',
+                                                  }}
+                                                  onMouseEnter={(e) => {
+                                                      e.currentTarget.style.background =
+                                                          'linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)';
+                                                      e.currentTarget.style.boxShadow =
+                                                          '0 2px 8px rgba(0,0,0,0.15)';
+                                                      e.currentTarget.style.transform =
+                                                          'translateY(-1px)';
+                                                  }}
+                                                  onMouseLeave={(e) => {
+                                                      e.currentTarget.style.background =
+                                                          'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)';
+                                                      e.currentTarget.style.boxShadow =
+                                                          '0 1px 3px rgba(0,0,0,0.1)';
+                                                      e.currentTarget.style.transform =
+                                                          'translateY(0)';
+                                                  }}
+                                              >
+                                                  {/* Left side - Group info and expand/collapse */}
+                                                  <div
+                                                      style={{
+                                                          display: 'flex',
+                                                          alignItems: 'center',
+                                                          flex: 1,
+                                                          zIndex: 2,
+                                                          position: 'relative',
+                                                      }}
+                                                  >
+                                                      <button
+                                                          className="group-expand-btn"
+                                                          onClick={(e) => {
+                                                              e.stopPropagation();
+                                                              if (
+                                                                  typeof toggleGroup ===
+                                                                  'function'
+                                                              ) {
+                                                                  toggleGroup();
+                                                              } else {
+                                                                  console.warn(
+                                                                      'toggleGroup is not a function:',
+                                                                      toggleGroup
+                                                                  );
+                                                              }
+                                                          }}
+                                                          style={{
+                                                              background:
+                                                                  'var(--primary-color, #3b82f6)',
+                                                              border: 'none',
+                                                              borderRadius:
+                                                                  '3px',
+                                                              color: 'white',
+                                                              width: '20px', // More compact
+                                                              height: '20px', // More compact
+                                                              display: 'flex',
+                                                              alignItems:
+                                                                  'center',
+                                                              justifyContent:
+                                                                  'center',
+                                                              marginRight:
+                                                                  '8px', // Reduced margin
+                                                              cursor: 'pointer',
+                                                              fontSize: '11px', // Smaller font
+                                                              fontWeight:
+                                                                  'bold',
+                                                              boxShadow:
+                                                                  '0 1px 2px rgba(0,0,0,0.1)',
+                                                              transition:
+                                                                  'all 0.15s ease',
+                                                          }}
+                                                          onMouseEnter={(e) => {
+                                                              e.target.style.transform =
+                                                                  'scale(1.05)';
+                                                              e.target.style.background =
+                                                                  'var(--secondary-color, #2563eb)';
+                                                          }}
+                                                          onMouseLeave={(e) => {
+                                                              e.target.style.transform =
+                                                                  'scale(1)';
+                                                              e.target.style.background =
+                                                                  'var(--primary-color, #3b82f6)';
+                                                          }}
+                                                      >
+                                                          {collapsed
+                                                              ? '+'
+                                                              : '−'}
+                                                      </button>
+                                                      <div
+                                                          style={{
+                                                              display: 'flex',
+                                                              alignItems:
+                                                                  'center', // Changed to center for compact layout
+                                                              gap: '8px', // Add gap between elements
+                                                          }}
+                                                      >
+                                                          <strong
+                                                              style={{
+                                                                  fontSize:
+                                                                      '0.85rem', // Slightly smaller for compact design
+                                                                  color: 'var(--secondary-color, #1f2937)',
+                                                                  fontWeight:
+                                                                      '600',
+                                                                  textTransform:
+                                                                      'uppercase',
+                                                                  letterSpacing:
+                                                                      '0.025em',
+                                                              }}
+                                                          >
+                                                              {groupValue}
+                                                          </strong>
+                                                          {groupCount > 0 && (
+                                                              <span
+                                                                  style={{
+                                                                      color: '#6b7280',
+                                                                      fontSize:
+                                                                          '0.75rem', // Smaller for compact design
+                                                                      fontWeight:
+                                                                          '500',
+                                                                  }}
+                                                              >
+                                                                  ({groupCount}{' '}
+                                                                  {groupCount ===
+                                                                  1
+                                                                      ? 'item'
+                                                                      : 'items'}
+                                                                  )
+                                                              </span>
+                                                          )}
+                                                          {/* Click indicator */}
+                                                          <span
+                                                              style={{
+                                                                  color: '#9ca3af',
+                                                                  fontSize:
+                                                                      '0.7rem',
+                                                                  fontStyle:
+                                                                      'italic',
+                                                                  opacity: 0.8,
+                                                                  marginLeft:
+                                                                      'auto',
+                                                                  userSelect:
+                                                                      'none',
+                                                              }}
+                                                          >
+                                                              Click to
+                                                              select/unselect
+                                                              all
+                                                          </span>
+                                                      </div>
+                                                  </div>
+
+                                                  {/* Right side - Group selection */}
+                                                  {hasCheckboxColumn && (
+                                                      <div
+                                                          style={{
+                                                              display: 'flex',
+                                                              alignItems:
+                                                                  'center',
+                                                              gap: '4px', // Reduced gap for compact design
+                                                              fontSize:
+                                                                  '0.75rem', // Smaller font for compact design
+                                                              background:
+                                                                  'rgba(255, 255, 255, 0.9)',
+                                                              padding:
+                                                                  '3px 8px', // Reduced padding for compact design
+                                                              borderRadius:
+                                                                  '12px', // Smaller border radius
+                                                              border: '1px solid rgba(59, 130, 246, 0.3)',
+                                                              zIndex: 2,
+                                                              position:
+                                                                  'relative',
+                                                              boxShadow:
+                                                                  '0 1px 2px rgba(0,0,0,0.05)',
+                                                          }}
+                                                      >
+                                                          <input
+                                                              type="checkbox"
+                                                              onChange={(e) => {
+                                                                  e.stopPropagation();
+                                                                  handleGroupSelectionChange(
+                                                                      groupValue,
+                                                                      e.target
+                                                                          .checked
+                                                                  );
+                                                              }}
+                                                              checked={isGroupSelected(
+                                                                  groupValue
+                                                              )}
+                                                              style={{
+                                                                  width: '14px', // Smaller checkbox for compact design
+                                                                  height: '14px',
+                                                                  cursor: 'pointer',
+                                                                  accentColor:
+                                                                      'var(--primary-color, #3b82f6)',
+                                                              }}
+                                                          />
+                                                          <span
+                                                              style={{
+                                                                  cursor: 'pointer',
+                                                                  userSelect:
+                                                                      'none',
+                                                                  color: 'var(--secondary-color, #1f2937)',
+                                                                  fontWeight:
+                                                                      '500',
+                                                                  fontSize:
+                                                                      '0.7rem', // Smaller font for compact design
+                                                              }}
+                                                              onClick={(e) => {
+                                                                  e.stopPropagation();
+                                                                  const checkbox =
+                                                                      e.target
+                                                                          .previousElementSibling;
+                                                                  checkbox.checked =
+                                                                      !checkbox.checked;
+                                                                  handleGroupSelectionChange(
+                                                                      groupValue,
+                                                                      checkbox.checked
+                                                                  );
+                                                              }}
+                                                          >
+                                                              Select All
+                                                          </span>
+                                                      </div>
+                                                  )}
+
+                                                  {/* Background pattern */}
+                                                  <div
+                                                      style={{
+                                                          position: 'absolute',
+                                                          top: 0,
+                                                          left: 0,
+                                                          right: 0,
+                                                          bottom: 0,
+                                                          background:
+                                                              'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(59, 130, 246, 0.03) 2px, rgba(59, 130, 246, 0.03) 4px)',
+                                                          zIndex: 1,
+                                                          pointerEvents: 'none',
+                                                      }}
+                                                  />
+                                              </div>
+                                          );
+                                      },
+                                  }
                                 : {})}
                             filterValue={filterValue}
                             limit={limit}
@@ -3952,7 +4987,7 @@ const DataGrid = forwardRef(
                             }
                             headerProps={headerProps}
                             idProperty="id"
-                            minRowHeight={40}
+                            minRowHeight={32}
                             onFilterValueChange={(fv) => {
                                 handleFilterChange(fv, filterValue);
                             }}
@@ -3986,6 +5021,11 @@ const DataGrid = forwardRef(
                                 borderRadius: 'var(--br, 4px)',
                                 overflow: 'hidden',
                             }}
+                            className={
+                                ajaxSetting?.groupBy
+                                    ? 'InovuaReactDataGrid--grouped datagrid-with-grouping datagrid-fixed-group-headers'
+                                    : 'datagrid-without-grouping'
+                            }
                             checkboxColumnProps={{
                                 width: 60,
                                 minWidth: 60,
@@ -3994,7 +5034,88 @@ const DataGrid = forwardRef(
                                 sortable: false,
                                 headerAlign: 'center',
                                 textAlign: 'center',
+                                renderHeader: () => {
+                                    // Custom header checkbox that works with grouped data
+                                    const allRowsSelected =
+                                        dataRef.current &&
+                                        dataRef.current.length > 0 &&
+                                        dataRef.current.every(
+                                            (row) =>
+                                                row &&
+                                                row.id !== undefined &&
+                                                row.id !== null &&
+                                                selected[row.id]
+                                        );
+                                    const someRowsSelected =
+                                        dataRef.current &&
+                                        dataRef.current.some(
+                                            (row) =>
+                                                row &&
+                                                row.id !== undefined &&
+                                                row.id !== null &&
+                                                selected[row.id]
+                                        );
+
+                                    return (
+                                        <input
+                                            type="checkbox"
+                                            checked={allRowsSelected}
+                                            ref={(checkbox) => {
+                                                if (checkbox) {
+                                                    checkbox.indeterminate =
+                                                        someRowsSelected &&
+                                                        !allRowsSelected;
+                                                }
+                                            }}
+                                            onChange={(e) => {
+                                                if (e.target.checked) {
+                                                    // Select all rows
+                                                    const s = {};
+                                                    if (
+                                                        dataRef.current &&
+                                                        Array.isArray(
+                                                            dataRef.current
+                                                        )
+                                                    ) {
+                                                        dataRef.current.forEach(
+                                                            (obj) => {
+                                                                if (
+                                                                    obj &&
+                                                                    obj.id !==
+                                                                        undefined &&
+                                                                    obj.id !==
+                                                                        null
+                                                                ) {
+                                                                    s[obj.id] =
+                                                                        obj;
+                                                                }
+                                                            }
+                                                        );
+                                                    }
+                                                    setSelected(s);
+                                                    if (setRowsSelected) {
+                                                        setRowsSelected(s);
+                                                    }
+                                                } else {
+                                                    // Deselect all rows
+                                                    setSelected({});
+                                                    if (setRowsSelected) {
+                                                        setRowsSelected({});
+                                                    }
+                                                }
+                                            }}
+                                            style={{
+                                                width: '20px',
+                                                height: '20px',
+                                                cursor: 'pointer',
+                                                accentColor:
+                                                    'var(--primary-color, #3b82f6)',
+                                            }}
+                                        />
+                                    );
+                                },
                             }}
+                            checkboxOnlyRowSelect={true}
                         />
                     ) : null}
                 </div>