@visns-studio/visns-components 5.9.0 → 5.9.2

package/package.json

@@ -86,7 +86,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.9.0",
+    "version": "5.9.2",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -86,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,
@@ -488,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);
@@ -520,7 +684,7 @@ const DataGrid = forwardRef(
 
                 return sqlResult;
             },
-            [ajaxSetting, dSearch]
+            [ajaxSetting, dSearch, collapsedGroups]
         );
         const [filterDataSource, setFilterDataSource] = useState([]);
         const [filterValue, setFilterValue] = useState([]);
@@ -677,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) {
@@ -699,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(
@@ -1343,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
@@ -1352,7 +1670,7 @@ const DataGrid = forwardRef(
                     }
                 };
             },
-            [selected, setRowsSelected]
+            [selected, setRowsSelected, onRowClick]
         );
 
         const exportTrigger = async () => {
@@ -1802,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);
@@ -2609,7 +3003,7 @@ const DataGrid = forwardRef(
                                             >
                                                 <option value="">
                                                     Select{' '}
-                                                    {/^[aeiouAEIOU]/.test(
+                                                    {/^[aeioAEIO]/.test(
                                                         column.label
                                                     )
                                                         ? 'an'
@@ -3404,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>
+                                            );
                                         }
                                     },
                                 };
@@ -4179,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}
@@ -4229,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,
@@ -4237,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>

package/src/components/crm/styles/DataGrid.module.scss

@@ -833,3 +833,53 @@
         }
     }
 }
+
+/* Group header styles */
+.groupHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+    font-size: 0.9rem;
+    width: 100%;
+}
+
+.groupTitle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+
+    strong {
+        color: var(--secondary-color, #1f2937);
+        font-weight: 600;
+    }
+}
+
+.groupCount {
+    color: var(--paragraph-color, #6b7280);
+    font-size: 0.85rem;
+    font-weight: normal;
+}
+
+.groupCheckbox {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.85rem;
+    color: var(--secondary-color, #1f2937);
+
+    input[type='checkbox'] {
+        width: 16px;
+        height: 16px;
+        margin: 0;
+        cursor: pointer;
+    }
+
+    span {
+        cursor: pointer;
+        user-select: none;
+    }
+}

package/src/components/crm/styles/global-datagrid.css

@@ -206,3 +206,231 @@
         margin: -18px !important;
     }
 }
+
+/* Group expand/collapse icon fixes - Enhanced for better visibility */
+.InovuaReactDataGrid__group-expand-icon,
+.InovuaReactDataGrid__group-collapse-icon {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 24px !important;
+    height: 24px !important;
+    margin-right: 8px !important;
+    cursor: pointer !important;
+    border-radius: 4px !important;
+    background-color: var(--primary-color, #3b82f6) !important;
+    transition: all 0.2s ease !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+}
+
+.InovuaReactDataGrid__group-expand-icon:hover,
+.InovuaReactDataGrid__group-collapse-icon:hover {
+    background-color: var(--secondary-color, #2563eb) !important;
+    transform: scale(1.05) !important;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
+}
+
+.InovuaReactDataGrid__group-expand-icon svg,
+.InovuaReactDataGrid__group-collapse-icon svg {
+    width: 14px !important;
+    height: 14px !important;
+    fill: white !important;
+    color: white !important;
+    display: block !important;
+    opacity: 1 !important;
+    stroke: white !important;
+    stroke-width: 2 !important;
+}
+
+/* Enhanced group row styling */
+.InovuaReactDataGrid__group-row {
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
+    border-bottom: 2px solid #e2e8f0 !important;
+    border-left: 4px solid var(--primary-color, #3b82f6) !important;
+    position: relative !important;
+    transition: all 0.2s ease !important;
+}
+
+.InovuaReactDataGrid__group-row:hover {
+    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
+    border-left-color: var(--secondary-color, #2563eb) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Enhanced group cell styling */
+.InovuaReactDataGrid__group-cell {
+    padding: 12px 16px !important;
+    font-weight: 700 !important;
+    color: var(--secondary-color, #1f2937) !important;
+    font-size: 0.95rem !important;
+    letter-spacing: 0.025em !important;
+    text-transform: uppercase !important;
+    position: relative !important;
+}
+
+/* Add a subtle pattern to group cells */
+.InovuaReactDataGrid__group-cell::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    background: repeating-linear-gradient(
+        45deg,
+        transparent,
+        transparent 2px,
+        rgba(59, 130, 246, 0.05) 2px,
+        rgba(59, 130, 246, 0.05) 4px
+    ) !important;
+    pointer-events: none !important;
+}
+
+/* Ensure group expand/collapse icons are visible in all themes */
+.InovuaReactDataGrid__group-expand-icon .InovuaReactDataGrid__icon,
+.InovuaReactDataGrid__group-collapse-icon .InovuaReactDataGrid__icon {
+    opacity: 1 !important;
+    visibility: visible !important;
+    display: block !important;
+    color: white !important;
+    fill: white !important;
+}
+
+/* Alternative selectors for different library versions */
+.InovuaReactDataGrid .InovuaReactDataGrid__group-expand-icon,
+.InovuaReactDataGrid .InovuaReactDataGrid__group-collapse-icon {
+    opacity: 1 !important;
+    visibility: visible !important;
+}
+
+/* Fix for SVG icons that might be hidden */
+.InovuaReactDataGrid__group-expand-icon > *,
+.InovuaReactDataGrid__group-collapse-icon > * {
+    opacity: 1 !important;
+    visibility: visible !important;
+    display: block !important;
+    color: white !important;
+    fill: white !important;
+}
+
+/* Enhanced styling for the grouped column header */
+.InovuaReactDataGrid__header-cell--grouped {
+    background: linear-gradient(
+        135deg,
+        var(--primary-color, #3b82f6) 0%,
+        var(--secondary-color, #2563eb) 100%
+    ) !important;
+    color: white !important;
+    font-weight: 800 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.1em !important;
+    border-bottom: 4px solid var(--secondary-color, #2563eb) !important;
+    border-top: 2px solid rgba(255, 255, 255, 0.3) !important;
+    position: relative !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
+    font-size: 0.9rem !important;
+    padding: 12px 16px !important;
+}
+
+.InovuaReactDataGrid__header-cell--grouped::before {
+    content: '🔗' !important;
+    position: absolute !important;
+    left: 8px !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    font-size: 16px !important;
+    opacity: 0.9 !important;
+    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) !important;
+}
+
+.InovuaReactDataGrid__header-cell--grouped::after {
+    content: 'GROUPED BY' !important;
+    position: absolute !important;
+    right: 8px !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    font-size: 10px !important;
+    opacity: 0.8 !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.05em !important;
+    background: rgba(255, 255, 255, 0.2) !important;
+    padding: 2px 6px !important;
+    border-radius: 10px !important;
+}
+
+.InovuaReactDataGrid__header-cell--grouped:hover {
+    background: linear-gradient(
+        135deg,
+        var(--secondary-color, #2563eb) 0%,
+        #1d4ed8 100%
+    ) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+    transition: all 0.2s ease !important;
+}
+
+/* Group selection functionality */
+.group-selection-checkbox {
+    position: absolute !important;
+    right: 12px !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    width: 18px !important;
+    height: 18px !important;
+    cursor: pointer !important;
+    z-index: 10 !important;
+}
+
+/* Clean up group header rows - hide all column content */
+.InovuaReactDataGrid__group-row .InovuaReactDataGrid__group-cell {
+    position: relative !important;
+    padding-right: 50px !important;
+}
+
+/* PRESERVE ORIGINAL GROUPING: Clean group rows while maintaining ReactDataGrid structure */
+
+/* Let ReactDataGrid handle the group cell spanning, but clean up any content that shouldn't be there */
+/* The group cell should naturally span across all columns in ReactDataGrid */
+
+/* Clean approach: Only hide content within group cells that shouldn't be there */
+/* This preserves ReactDataGrid's natural group row spanning behavior */
+
+/* Hide specific unwanted elements in group rows */
+.InovuaReactDataGrid__group-row select,
+.InovuaReactDataGrid__group-row input:not([type='checkbox']),
+.InovuaReactDataGrid__group-row
+    button:not(.InovuaReactDataGrid__group-expand-button),
+.InovuaReactDataGrid__group-row .dropdown,
+.InovuaReactDataGrid__group-row .timer-button,
+.InovuaReactDataGrid__group-row .action-icon,
+.InovuaReactDataGrid__group-row
+    .btn:not(.InovuaReactDataGrid__group-expand-button),
+.InovuaReactDataGrid__group-row
+    .icon:not(.InovuaReactDataGrid__group-expand-icon),
+.InovuaReactDataGrid__group-row .cell-content,
+.InovuaReactDataGrid__group-row .cell-value,
+.InovuaReactDataGrid__group-row .dropdown-value {
+    display: none !important;
+    visibility: hidden !important;
+}
+
+/* Enhance group cell styling */
+.InovuaReactDataGrid__group-cell {
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
+    border-left: 4px solid var(--primary-color, #3b82f6) !important;
+    font-weight: 600 !important;
+    padding: 12px 16px !important;
+}
+
+/* Additional group row cleanup */
+.InovuaReactDataGrid__group-row * {
+    background-image: none !important;
+}
+
+.InovuaReactDataGrid__group-toolbar {
+    display: none !important;
+}