@visns-studio/visns-components 5.14.12 → 5.14.13

package/package.json

@@ -89,7 +89,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.14.12",
+    "version": "5.14.13",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [
@@ -104,7 +104,7 @@
         "type": "git",
         "url": "git+https://github.com/visnsstudio/visns-components.git"
     },
-    "author": "Visns Studio",
+    "author": "Omnia Global",
     "license": "ISC",
     "bugs": {
         "url": "https://github.com/visnsstudio/visns-components/issues"

package/src/components/DataGrid.jsx

@@ -70,6 +70,7 @@ import {
     Archive,
     Volume2,
     AlertTriangle,
+    AlertCircle,
 } from 'lucide-react';
 import styles from './styles/DataGrid.module.scss';
 
@@ -3282,6 +3283,39 @@ const DataGrid = forwardRef(
                                                     groupData?.name ||
                                                     '';
 
+                                          // Check for important marker
+                                          const checkGroupImportantMarker = (groupValue, importantMarkerConfig) => {
+                                              if (!importantMarkerConfig || !dataRef.current?.length || !ajaxSetting?.groupBy) {
+                                                  return false;
+                                              }
+                                              
+                                              const { id: fieldId, value: expectedValue } = importantMarkerConfig;
+                                              const groupField = ajaxSetting.groupBy[0];
+                                              
+                                              // Get all rows that belong to this group
+                                              const groupRows = dataRef.current.filter(
+                                                  (row) => row[groupField] === groupValue
+                                              );
+                                              
+                                              return groupRows.some(row => {
+                                                  const fieldValue = row[fieldId];
+                                                  
+                                                  // Handle different value types
+                                                  if (typeof expectedValue === 'boolean') {
+                                                      return Boolean(fieldValue) === expectedValue;
+                                                  }
+                                                  
+                                                  return fieldValue === expectedValue;
+                                              });
+                                          };
+
+                                          const hasImportantMarker = checkGroupImportantMarker(
+                                              groupValue, 
+                                              ajaxSetting?.groupBySetting?.importantMarker
+                                          );
+                                          const importantMarkerColor = ajaxSetting?.groupBySetting?.importantMarker?.colour;
+                                          const importantMarkerTooltip = ajaxSetting?.groupBySetting?.importantMarker?.tooltip || "This group contains items that require attention";
+
                                           // Use ReactDataGrid's built-in toggle functionality
                                           const collapsed =
                                               collapsedGroups[groupValue] ||
@@ -3534,6 +3568,23 @@ const DataGrid = forwardRef(
                                                               }
                                                           >
                                                               {groupValue}
+                                                              {/* Important marker */}
+                                                              {hasImportantMarker && (
+                                                                  <AlertCircle
+                                                                      className="important-marker"
+                                                                      style={{
+                                                                          display: 'inline-block',
+                                                                          marginLeft: '8px',
+                                                                          color: importantMarkerColor || '#FF6961',
+                                                                          position: 'relative',
+                                                                          top: '1px'
+                                                                      }}
+                                                                      size={16}
+                                                                      title={importantMarkerTooltip}
+                                                                      data-tooltip-id="system-tooltip"
+                                                                      data-tooltip-content={importantMarkerTooltip}
+                                                                  />
+                                                              )}
                                                           </strong>
                                                           {/* Click indicator */}
                                                           <span