@visns-studio/visns-components 6.0.2 → 6.0.3

package/package.json

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

package/src/components/DataGrid.jsx

@@ -73,6 +73,8 @@ import {
     Volume2,
     AlertTriangle,
     AlertCircle,
+    CheckCheck,
+    Plus,
 } from 'lucide-react';
 import styles from './styles/DataGrid.module.scss';
 
@@ -403,6 +405,14 @@ const DataGrid = forwardRef(
         /** Group expansion state */
         const [collapsedGroups, setCollapsedGroups] = useState({});
 
+        /**
+         * Collapse state for treeGroupBy blocks, keyed by group value.
+         * Separate from `collapsedGroups` (which drives the grid's own
+         * grouping) because tree children are hidden by filtering the data
+         * rather than by the grid.
+         */
+        const [collapsedTreeGroups, setCollapsedTreeGroups] = useState({});
+
         /** Track if groups have been initialized to prevent re-initialization */
         const groupsInitializedRef = useRef(false);
 
@@ -604,13 +614,15 @@ const DataGrid = forwardRef(
                     }
 
                     // Opt-in grouped display (ajaxSetting.treeGroupBy {key,
-                    // column, parentFields, countLabel}): consecutive rows
-                    // sharing a non-empty `key` value get a synthetic summary
-                    // parent row inserted above them, always visible — no
-                    // expand/collapse. `parentFields` are lifted from the
-                    // first row onto the parent and blanked on the children,
-                    // so shared details display once; children get an "↳"
-                    // prefix in the display column. Single rows stay plain.
+                    // column, parentFields, countLabel, collapsible,
+                    // defaultCollapsed, icons}): consecutive rows sharing a
+                    // non-empty `key` value get a synthetic summary parent
+                    // row inserted above them. `parentFields` are lifted from
+                    // the first row onto the parent and blanked on the
+                    // children, so shared details display once; children get
+                    // an "↳" prefix in the display column. Single rows stay
+                    // plain — unlike the grid's own groupBy, which forces a
+                    // header row onto every key.
                     // Runs after dataRef is set so selection/group helpers
                     // keep operating on the real rows only.
                     if (
@@ -622,6 +634,8 @@ const DataGrid = forwardRef(
                             column: treeDisplayColumn,
                             parentFields = [],
                             countLabel,
+                            collapsible,
+                            defaultCollapsed,
                         } = ajaxSetting.treeGroupBy;
                         const rows = res.data;
                         const grouped = [];
@@ -689,7 +703,25 @@ const DataGrid = forwardRef(
                                         );
                                 }
 
-                                grouped.push(parent, ...children);
+                                if (collapsible) {
+                                    // Groups the user has never touched sit at
+                                    // the configured default, so an auto-
+                                    // refresh cannot spring them open or shut
+                                    const isCollapsed =
+                                        collapsedTreeGroups[value] ??
+                                        defaultCollapsed === true;
+
+                                    parent.__treeCollapsed = isCollapsed;
+                                    parent.__treeChildCount = children.length;
+
+                                    grouped.push(parent);
+
+                                    if (!isCollapsed) {
+                                        grouped.push(...children);
+                                    }
+                                } else {
+                                    grouped.push(parent, ...children);
+                                }
                             } else {
                                 grouped.push(row);
                             }
@@ -723,7 +755,7 @@ const DataGrid = forwardRef(
                     count: res.count,
                 }));
             },
-            [ajaxSetting, dSearch, collapsedGroups]
+            [ajaxSetting, dSearch, collapsedGroups, collapsedTreeGroups]
         );
         const [filterDataSource, setFilterDataSource] = useState([]);
         const [filterValue, setFilterValue] = useState([]);
@@ -1612,12 +1644,60 @@ const DataGrid = forwardRef(
             }, 50); // Increased delay to ensure proper rendering after reload
         };
 
+        /**
+         * Flip a treeGroupBy block open/shut. The state change re-creates
+         * dataSource, which reloads and re-runs the tree transform with the
+         * new collapse state.
+         */
+        const toggleTreeGroup = (groupValue) => {
+            const defaultCollapsed =
+                ajaxSetting?.treeGroupBy?.defaultCollapsed === true;
+
+            setCollapsedTreeGroups((prev) => ({
+                ...prev,
+                [groupValue]: !(prev[groupValue] ?? defaultCollapsed),
+            }));
+        };
+
+        /** Icon id (groupBySetting.icons[].id / treeGroupBy.icons[].id) → glyph */
+        const getGroupIconComponent = (iconId) => {
+            switch (iconId) {
+                case 'clock':
+                    return Clock;
+                case 'alarm':
+                    return AlarmClock;
+                case 'check':
+                    return Check;
+                case 'checkAll':
+                    return CheckCheck;
+                case 'plus':
+                    return Plus;
+                case 'edit':
+                    return Edit;
+                case 'envelope':
+                    return Mail;
+                case 'file':
+                    return File;
+                case 'image':
+                    return Image;
+                case 'copy':
+                    return Copy;
+                case 'cloudUpload':
+                    return Upload;
+                case 'cloudDownload':
+                    return DownloadIcon;
+                default:
+                    return Clock; // Default fallback
+            }
+        };
+
         const handleGroupAction = async (groupValue, iconConfig) => {
             // Get all rows for this group
             const groupRows = getGroupRows(groupValue);
 
-            // Skip confirmation dialog for edit actions - open modal directly
-            if (iconConfig.id === 'edit' && iconConfig.formModal) {
+            // Skip confirmation dialog for modal actions - the modal itself is
+            // the confirmation step
+            if (iconConfig.formModal) {
                 executeGroupAction(groupValue, iconConfig);
                 return;
             }
@@ -1645,56 +1725,97 @@ const DataGrid = forwardRef(
             });
         };
 
+        // dataRef holds the real rows only (the treeGroupBy transform runs
+        // after it is set), so this resolves a group the same way whether the
+        // view groups via the grid's groupBy or via treeGroupBy.
         const getGroupRows = (groupValue) => {
-            if (!dataRef.current || !ajaxSetting?.groupBy) {
+            const groupField =
+                ajaxSetting?.groupBy?.[0] || ajaxSetting?.treeGroupBy?.key;
+
+            if (!dataRef.current || !groupField) {
                 return [];
             }
 
-            const groupField = ajaxSetting.groupBy[0];
             return dataRef.current.filter(
                 (row) => row[groupField] === groupValue
             );
         };
 
+        /**
+         * The show-condition grammar shared by group action icons and row
+         * action icons:
+         *   {id}                        field must be set (non-empty)
+         *   {id, value}                 strict match ({value: null} = empty)
+         *   {id, operator: 'empty'}     field must be empty
+         *   {id, operator: 'notEmpty'}  field must be set
+         */
+        const matchesRowCondition = (row, condition) => {
+            if (!condition || !condition.id) {
+                return true;
+            }
+
+            const { id, value, operator } = condition;
+            const rowValue = row?.[id];
+            const isEmpty =
+                rowValue === null || rowValue === undefined || rowValue === '';
+
+            if (operator === 'empty') {
+                return isEmpty;
+            }
+
+            if (operator === 'notEmpty') {
+                return !isEmpty;
+            }
+
+            // No value prop → field must be truthy (set/non-empty)
+            if (!Object.prototype.hasOwnProperty.call(condition, 'value')) {
+                return !isEmpty;
+            }
+
+            // Handle null value condition
+            if (value === null) {
+                return isEmpty;
+            }
+
+            // Handle other value conditions
+            return rowValue === value;
+        };
+
+        /** True when the signed-in user holds any of the listed role names */
+        const userHasAnyRole = (roleNames) =>
+            Array.isArray(roleNames) &&
+            roleNames.some((requiredRole) =>
+                userProfile?.roles?.some(
+                    (userRole) => userRole.name === requiredRole
+                )
+            );
+
         const shouldShowGroupAction = (iconConfig, groupValue) => {
+            // `showAll` is the every-row form of `show`: the icon appears only
+            // when the condition holds for the whole group (e.g. close a tag
+            // out only once every header on it is finished)
+            const requireAll = Array.isArray(iconConfig.showAll);
+            const conditions = requireAll ? iconConfig.showAll : iconConfig.show;
+
             // If no show conditions, always show the icon
-            if (!iconConfig.show || !Array.isArray(iconConfig.show)) {
+            if (!conditions || !Array.isArray(conditions)) {
                 return true;
             }
 
             // Get all rows for this group
             const groupRows = getGroupRows(groupValue);
 
-            // Check if all show conditions are met
-            return iconConfig.show.every((condition) => {
-                const { id, value } = condition;
-                const hasValueProp = condition.hasOwnProperty('value');
-
-                // Check if any row in the group matches the condition
-                return groupRows.some((row) => {
-                    const rowValue = row[id];
-
-                    // No value prop → field must be truthy (set/non-empty)
-                    if (!hasValueProp) {
-                        return (
-                            rowValue !== null &&
-                            rowValue !== undefined &&
-                            rowValue !== ''
-                        );
-                    }
+            if (requireAll && groupRows.length === 0) {
+                return false;
+            }
 
-                    // Handle null value condition
-                    if (value === null) {
-                        return (
-                            rowValue === null ||
-                            rowValue === undefined ||
-                            rowValue === ''
-                        );
-                    }
+            // Check if all show conditions are met
+            return conditions.every((condition) => {
+                const matches = (row) => matchesRowCondition(row, condition);
 
-                    // Handle other value conditions
-                    return rowValue === value;
-                });
+                return requireAll
+                    ? groupRows.every(matches)
+                    : groupRows.some(matches);
             });
         };
 
@@ -1707,18 +1828,40 @@ const DataGrid = forwardRef(
                         groupLabel: groupValue,
                     };
 
+                    // `dataFromRow` {payloadKey: rowField} carries an id the
+                    // endpoint needs but the group label does not hold (e.g.
+                    // split_group_id behind a tag). Every member row of a
+                    // group shares the value, so the first one answers.
+                    if (iconConfig.fetch.dataFromRow) {
+                        const sourceRow = getGroupRows(groupValue)[0];
+
+                        Object.entries(iconConfig.fetch.dataFromRow).forEach(
+                            ([payloadKey, rowField]) => {
+                                payload[payloadKey] = sourceRow?.[rowField];
+                            }
+                        );
+                    }
+
                     const result = await CustomFetch(
                         iconConfig.fetch.url,
                         iconConfig.fetch.method || 'POST',
                         payload
                     );
 
-                    if (result.error) {
-                        throw new Error(result.error);
+                    // These endpoints answer 200 with an `error` string rather
+                    // than an HTTP error, so the body is what decides
+                    const responseError = result?.data?.error || result?.error;
+
+                    if (responseError) {
+                        // CustomFetch has already toasted the message
+                        return;
                     }
 
                     toast.success(
-                        `${iconConfig.label} - Group: ${groupValue} completed successfully`
+                        iconConfig.fetch.messageFromResponse &&
+                            result?.data?.message
+                            ? result.data.message
+                            : `${iconConfig.label} - Group: ${groupValue} completed successfully`
                     );
 
                     // Reload grid data if needed
@@ -1738,6 +1881,23 @@ const DataGrid = forwardRef(
                         `${iconConfig.label} - Group: ${groupValue} failed: ${error.message}`
                     );
                 }
+            } else if (iconConfig.formModal) {
+                // Open the group form modal. Any icon may carry a formModal,
+                // not just 'edit' — the config decides what the modal does.
+                const groupRows = getGroupRows(groupValue);
+                const groupRowIds = groupRows.map(
+                    (row) => row[form?.primaryKey || 'id']
+                );
+
+                setBulkEditMode(true);
+                setBulkEditGroupData({
+                    groupValue: groupValue,
+                    groupRows: groupRows,
+                    groupRowIds: groupRowIds,
+                    iconConfig: iconConfig,
+                });
+
+                modalOpen('update', null);
             } else {
                 // Fallback to existing switch logic if no fetch config
                 // Skip toast notification for edit actions
@@ -1762,30 +1922,7 @@ const DataGrid = forwardRef(
                         );
                         break;
                     case 'edit':
-                        // Handle bulk edit action
-                        if (iconConfig.formModal) {
-                            // Get all rows in the group for bulk editing
-                            const groupRows = getGroupRows(groupValue);
-                            const groupRowIds = groupRows.map(
-                                (row) => row[form?.primaryKey || 'id']
-                            );
-
-                            // Set bulk edit data
-                            setBulkEditMode(true);
-                            setBulkEditGroupData({
-                                groupValue: groupValue,
-                                groupRows: groupRows,
-                                groupRowIds: groupRowIds,
-                                iconConfig: iconConfig,
-                            });
-
-                            // Open modal for bulk editing
-                            modalOpen('update', null);
-                        } else {
-                            debugLog(
-                                `Bulk edit action for group: ${groupValue}`
-                            );
-                        }
+                        debugLog(`Bulk edit action for group: ${groupValue}`);
                         break;
                     case 'envelope':
                         debugLog(
@@ -1801,6 +1938,175 @@ const DataGrid = forwardRef(
             }
         };
 
+        /**
+         * An `action` column's `settings` entry is either the id of a shared
+         * setting (rendered by renderSetting) or an inline row action config
+         * declared on the column itself.
+         */
+        const isRowActionConfig = (entry) =>
+            entry !== null && typeof entry === 'object';
+
+        /** Lucide icons an inline row action may name via `icon` */
+        const rowActionIcons = {
+            check: Check,
+            copy: Copy,
+            delete: Trash2,
+            edit: Edit,
+            envelope: Mail,
+            plus: Plus,
+            trash: Trash2,
+            undo: RotateCcw,
+        };
+
+        /**
+         * Row action visibility, in three parts:
+         *  - `show` must hold for the row (the hard rule: what the action is
+         *    even about, e.g. only split rows carry a header to remove)
+         *  - `removableWhen`, when present, must hold as well (the soft rule:
+         *    the state in which anyone may do it)
+         *  - unless the user holds one of `overrideRoles`, which bypasses the
+         *    soft rule only
+         *
+         * Synthetic tree parent rows are group summaries and never carry row
+         * actions, and a row missing a field simply fails its condition.
+         */
+        const shouldShowRowAction = (config, row) => {
+            if (!row || row.__treeParent) {
+                return false;
+            }
+
+            if (
+                Array.isArray(config.show) &&
+                !config.show.every((condition) =>
+                    matchesRowCondition(row, condition)
+                )
+            ) {
+                return false;
+            }
+
+            if (
+                Array.isArray(config.removableWhen) &&
+                !config.removableWhen.every((condition) =>
+                    matchesRowCondition(row, condition)
+                )
+            ) {
+                return userHasAnyRole(config.overrideRoles);
+            }
+
+            return true;
+        };
+
+        /** Fill {field} placeholders in a config string from the row */
+        const interpolateRowText = (text, row) =>
+            String(text ?? '').replace(/{(\w+)}/g, (match, field) => {
+                const value = row?.[field];
+
+                return value === null || value === undefined
+                    ? ''
+                    : String(value);
+            });
+
+        const executeRowAction = async (config, row) => {
+            const fetchConfig = config.fetch;
+
+            if (!fetchConfig?.url) {
+                console.warn(
+                    `Row action "${config.id}" has no fetch configuration`
+                );
+
+                return;
+            }
+
+            // `pathKey` names the row field that completes a RESTful url
+            // (/ajax/jobGoods + row.id)
+            const url = fetchConfig.pathKey
+                ? `${fetchConfig.url}/${row?.[fetchConfig.pathKey]}`
+                : fetchConfig.url;
+
+            try {
+                const result = await CustomFetch(
+                    url,
+                    fetchConfig.method || 'POST',
+                    { ...fetchConfig.data }
+                );
+
+                // These endpoints answer 200 with an `error` string rather
+                // than an HTTP error, so the body is what decides. CustomFetch
+                // has already toasted the message.
+                if (result?.data?.error || result?.error) {
+                    return;
+                }
+
+                toast.success(
+                    fetchConfig.messageFromResponse && result?.data?.message
+                        ? result.data.message
+                        : `${config.label || 'Action'} completed successfully`
+                );
+
+                handleReload();
+            } catch (error) {
+                console.error('Row action fetch error:', error);
+                toast.error(
+                    `${config.label || 'Action'} failed: ${error.message}`
+                );
+            }
+        };
+
+        const handleRowAction = (config, row) => {
+            if (!config.confirm) {
+                executeRowAction(config, row);
+
+                return;
+            }
+
+            confirmDialog({
+                title: config.label || 'Confirm Action',
+                message: interpolateRowText(config.confirm, row),
+                buttons: [
+                    {
+                        label: 'Yes',
+                        onClick: () => {
+                            executeRowAction(config, row);
+                        },
+                    },
+                    {
+                        label: 'No',
+                        onClick: () => {
+                            // User cancelled
+                        },
+                    },
+                ],
+            });
+        };
+
+        const renderRowAction = (config, row) => {
+            const IconComponent = rowActionIcons[config.icon];
+
+            if (!IconComponent || !shouldShowRowAction(config, row)) {
+                return null;
+            }
+
+            return (
+                <span
+                    key={`row-action-${config.id}`}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleRowAction(config, row);
+                    }}
+                >
+                    <IconComponent
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content={config.label || ''}
+                        strokeWidth={2}
+                        size={18}
+                        className={styles.tdaction}
+                        style={config.colour ? { color: config.colour } : {}}
+                    />
+                </span>
+            );
+        };
+
         // Touch handlers for tooltips
         const handleTouchStart = (e, buttonId, label) => {
             // Clear any existing timer
@@ -2590,13 +2896,7 @@ const DataGrid = forwardRef(
             // Check role-based permissions if roles are specified
             if (s.roles && Array.isArray(s.roles) && s.roles.length > 0) {
                 // Check if user has any of the required roles
-                const hasRequiredRole = s.roles.some((requiredRole) =>
-                    userProfile?.roles?.some(
-                        (userRole) => userRole.name === requiredRole
-                    )
-                );
-
-                if (!hasRequiredRole) {
+                if (!userHasAnyRole(s.roles)) {
                     allow = false;
                 }
             }
@@ -3067,6 +3367,8 @@ const DataGrid = forwardRef(
 
                     // Settings that an 'action' column renders inline render there
                     // instead of the trailing Action column (avoids duplication).
+                    // (Inline row action configs are declared on the column
+                    // itself, so they never name a shared setting.)
                     const actionColumnSettingIds = new Set(
                         (columns || [])
                             .filter(
@@ -3075,6 +3377,7 @@ const DataGrid = forwardRef(
                                     Array.isArray(c.settings)
                             )
                             .flatMap((c) => c.settings)
+                            .filter((entry) => !isRowActionConfig(entry))
                     );
 
                     // Width to fit N action icons: tablet-mode icons have a larger
@@ -3238,15 +3541,26 @@ const DataGrid = forwardRef(
 
                         switch (column.type) {
                             case 'action': {
-                                const actionSettings = (column.settings || [])
+                                // A string entry names a shared setting; an
+                                // object entry is an inline row action the
+                                // column declares itself
+                                const entries = column.settings || [];
+                                const actionSettings = entries
+                                    .filter(
+                                        (entry) => !isRowActionConfig(entry)
+                                    )
                                     .map((id) =>
                                         memoizedSettings.find(
                                             (s) => s.id === id
                                         )
                                     )
                                     .filter(Boolean);
+                                const rowActions =
+                                    entries.filter(isRowActionConfig);
+                                // Per-row conditions may hide row actions at
+                                // runtime, but the column must fit the maximum
                                 const width = actionColumnWidthFor(
-                                    actionSettings.length
+                                    actionSettings.length + rowActions.length
                                 );
                                 return {
                                     ...commonProps,
@@ -3264,6 +3578,9 @@ const DataGrid = forwardRef(
                                             {actionSettings.map((setting) =>
                                                 renderSetting(setting, data)
                                             )}
+                                            {rowActions.map((rowAction) =>
+                                                renderRowAction(rowAction, data)
+                                            )}
                                         </div>
                                     ),
                                 };
@@ -3641,8 +3958,188 @@ const DataGrid = forwardRef(
                         };
                     };
 
+                    // The tree parent's display column doubles as the group's
+                    // header line: expand/collapse plus any treeGroupBy.icons
+                    // whose show/showAll conditions the group's rows satisfy.
+                    const decorateTreeParentActions = (
+                        gridColumn,
+                        columnDef
+                    ) => {
+                        const tree = ajaxSetting?.treeGroupBy;
+                        const columnId = Array.isArray(columnDef?.id)
+                            ? columnDef.id.join('-')
+                            : columnDef?.id;
+
+                        if (
+                            !tree?.key ||
+                            !tree.column ||
+                            tree.column !== columnId ||
+                            !(tree.collapsible || tree.icons?.length)
+                        ) {
+                            return gridColumn;
+                        }
+
+                        const originalRender = gridColumn.render;
+
+                        return {
+                            ...gridColumn,
+                            render: (arg) => {
+                                const data = arg?.data;
+
+                                if (!data?.__treeParent) {
+                                    return originalRender
+                                        ? originalRender(arg)
+                                        : null;
+                                }
+
+                                const groupValue = data[tree.key];
+                                const collapsed = data.__treeCollapsed === true;
+
+                                return (
+                                    <div
+                                        className={styles.treeParentHeader}
+                                        onClick={(e) => e.stopPropagation()}
+                                    >
+                                        {tree.collapsible && (
+                                            <button
+                                                className={`group-expand-btn ${styles.groupExpandBtn}`}
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    toggleTreeGroup(groupValue);
+                                                }}
+                                                data-tooltip-id="system-tooltip"
+                                                data-tooltip-content={
+                                                    collapsed
+                                                        ? 'Expand group'
+                                                        : 'Collapse group'
+                                                }
+                                            >
+                                                {collapsed ? '+' : '−'}
+                                            </button>
+                                        )}
+                                        <strong
+                                            className={styles.treeParentLabel}
+                                        >
+                                            {groupValue}
+                                            {data.__treeChildCount
+                                                ? ` (${data.__treeChildCount})`
+                                                : ''}
+                                        </strong>
+                                        {(tree.icons || []).map(
+                                            (iconConfig, index) => {
+                                                if (
+                                                    !shouldShowGroupAction(
+                                                        iconConfig,
+                                                        groupValue
+                                                    )
+                                                ) {
+                                                    return null;
+                                                }
+
+                                                const IconComponent =
+                                                    getGroupIconComponent(
+                                                        iconConfig.id
+                                                    );
+
+                                                return (
+                                                    <button
+                                                        key={`tree-action-${index}`}
+                                                        className={`group-action-btn ${
+                                                            styles.groupActionBtn
+                                                        } ${
+                                                            styles[
+                                                                iconConfig.colour ||
+                                                                    'success'
+                                                            ] || ''
+                                                        }`}
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            handleGroupAction(
+                                                                groupValue,
+                                                                iconConfig
+                                                            );
+                                                        }}
+                                                        data-tooltip-id="system-tooltip"
+                                                        data-tooltip-content={
+                                                            iconConfig.label
+                                                        }
+                                                    >
+                                                        <IconComponent
+                                                            strokeWidth={2}
+                                                            size={14}
+                                                        />
+                                                    </button>
+                                                );
+                                            }
+                                        )}
+                                    </div>
+                                );
+                            },
+                        };
+                    };
+
+                    // Any column may carry `rowActions` (same config objects
+                    // as an 'action' column's settings): the icons render
+                    // after the cell's normal content. Useful for cells that
+                    // are blank on tree-child rows (e.g. a parentFields-
+                    // lifted column) so the action reuses the empty space.
+                    const decorateColumnRowActions = (gridColumn, columnDef) => {
+                        if (!Array.isArray(columnDef?.rowActions)) {
+                            return gridColumn;
+                        }
+
+                        const originalRender = gridColumn.render;
+
+                        return {
+                            ...gridColumn,
+                            render: (arg) => {
+                                const base = originalRender
+                                    ? originalRender(arg)
+                                    : null;
+                                const row = arg?.data;
+
+                                if (!row || row.__treeParent) {
+                                    return base;
+                                }
+
+                                const icons = columnDef.rowActions
+                                    .map((config) =>
+                                        renderRowAction(config, row)
+                                    )
+                                    .filter(Boolean);
+
+                                if (!icons.length) {
+                                    return base;
+                                }
+
+                                return (
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '4px',
+                                        }}
+                                        onClick={(e) => e.stopPropagation()}
+                                    >
+                                        {base}
+                                        {icons}
+                                    </div>
+                                );
+                            },
+                        };
+                    };
+
                     const newColumns = columns.map((column) =>
-                        guardTreeParentRender(renderColumn(column), column)
+                        decorateColumnRowActions(
+                            decorateTreeParentActions(
+                                guardTreeParentRender(
+                                    renderColumn(column),
+                                    column
+                                ),
+                                column
+                            ),
+                            column
+                        )
                     );
 
                     // Count settings that could render in the trailing Action
@@ -4393,37 +4890,6 @@ const DataGrid = forwardRef(
                                                               iconConfig,
                                                               index
                                                           ) => {
-                                                              // Get the icon component based on the id
-                                                              const getIconComponent =
-                                                                  (iconId) => {
-                                                                      switch (
-                                                                          iconId
-                                                                      ) {
-                                                                          case 'clock':
-                                                                              return Clock;
-                                                                          case 'alarm':
-                                                                              return AlarmClock;
-                                                                          case 'check':
-                                                                              return Check;
-                                                                          case 'edit':
-                                                                              return Edit;
-                                                                          case 'envelope':
-                                                                              return Mail;
-                                                                          case 'file':
-                                                                              return File;
-                                                                          case 'image':
-                                                                              return Image;
-                                                                          case 'copy':
-                                                                              return Copy;
-                                                                          case 'cloudUpload':
-                                                                              return Upload;
-                                                                          case 'cloudDownload':
-                                                                              return DownloadIcon;
-                                                                          default:
-                                                                              return Clock; // Default fallback
-                                                                      }
-                                                                  };
-
                                                               // Check if this icon should be shown based on show conditions
                                                               if (
                                                                   !shouldShowGroupAction(
@@ -4435,7 +4901,7 @@ const DataGrid = forwardRef(
                                                               }
 
                                                               const IconComponent =
-                                                                  getIconComponent(
+                                                                  getGroupIconComponent(
                                                                       iconConfig.id
                                                                   );
 

package/src/components/Form.jsx

@@ -1202,12 +1202,28 @@ function Form({
                 let validation = '';
 
                 if (['create', 'update'].includes(formType)) {
+                    // A group modal renders only the handful of fields it
+                    // names, so the rest of the form's required fields are
+                    // not on screen for the user to fill — validating them
+                    // would make the modal impossible to save
+                    const modalFieldIds =
+                        bulkEditMode &&
+                        bulkEditGroupData?.iconConfig?.formModal?.fields
+                            ? new Set(
+                                  bulkEditGroupData.iconConfig.formModal.fields
+                              )
+                            : null;
+
                     fields.forEach((item) => {
                         // Skip createOnly fields if formType is 'update'
                         if (formType === 'update' && item.createOnly) {
                             return;
                         }
 
+                        if (modalFieldIds && !modalFieldIds.has(item.id)) {
+                            return;
+                        }
+
                         // Check if the item is required
                         if (item.required) {
                             // Find the corresponding Field component to check for auto values
@@ -1573,6 +1589,20 @@ function Form({
                                     bulkEditGroupData.iconConfig.formModal;
                                 url = formModalConfig.url || url;
                                 method = formModalConfig.method || 'POST';
+
+                                // `anchorRow` modals act on the group through
+                                // one of its real records (the endpoint reads
+                                // the rest of the group off that row), so the
+                                // id goes in the path like an ordinary update
+                                if (formModalConfig.anchorRow) {
+                                    const anchorRow =
+                                        bulkEditGroupData.groupRows?.[0];
+                                    url += `/${
+                                        anchorRow?.[
+                                            formSettings.primaryKey || 'id'
+                                        ]
+                                    }`;
+                                }
                             } else {
                                 switch (formType) {
                                     case 'create':
@@ -1853,16 +1883,39 @@ function Form({
 
                         // Add bulk edit data to payload if in bulk edit mode
                         if (bulkEditMode && bulkEditGroupData) {
-                            payload = {
-                                ...payload,
-                                bulkEdit: true,
-                                groupValue: bulkEditGroupData.groupValue,
-                                groupKey:
-                                    bulkEditGroupData.iconConfig.formModal
-                                        ?.groupKey || ajaxSetting?.groupBy?.[0],
-                                rowIds: bulkEditGroupData.groupRowIds,
-                                ...bulkEditGroupData.iconConfig.formModal?.data,
-                            };
+                            const formModalConfig =
+                                bulkEditGroupData.iconConfig.formModal;
+
+                            if (formModalConfig?.anchorRow) {
+                                // A plain record update: send only what the
+                                // modal asked for, or the untouched blanks of
+                                // every other form field would wipe the row
+                                const allowed = new Set([
+                                    ...(formModalConfig.fields || []),
+                                    ...Object.keys(formModalConfig.data || {}),
+                                ]);
+
+                                payload = Object.keys(payload).reduce(
+                                    (acc, key) => {
+                                        if (allowed.has(key)) {
+                                            acc[key] = payload[key];
+                                        }
+                                        return acc;
+                                    },
+                                    { ...formModalConfig.data }
+                                );
+                            } else {
+                                payload = {
+                                    ...payload,
+                                    bulkEdit: true,
+                                    groupValue: bulkEditGroupData.groupValue,
+                                    groupKey:
+                                        formModalConfig?.groupKey ||
+                                        ajaxSetting?.groupBy?.[0],
+                                    rowIds: bulkEditGroupData.groupRowIds,
+                                    ...formModalConfig?.data,
+                                };
+                            }
                         }
 
                         const res = await CustomFetch(url, method, payload);
@@ -2416,13 +2469,83 @@ function Form({
                 toast.error('Failed to fetch data:', error);
             }
         } else {
+            const formModalConfig =
+                bulkEditGroupData?.iconConfig?.formModal || null;
+
+            // Anchor-row modals submit against one real record, and the
+            // endpoint reads that record's current values back out of the
+            // payload (adding a header means "these plus this new one"), so
+            // seed from the anchor rather than from what the group shares.
+            // `seedFields` adds rows values a field needs but does not submit
+            // — e.g. the job id a conflict check excludes itself by.
+            if (
+                formModalConfig?.anchorRow &&
+                bulkEditGroupData?.groupRows?.length
+            ) {
+                const anchorRow = bulkEditGroupData.groupRows[0];
+                const seedIds = [
+                    ...(formModalConfig.fields || []),
+                    ...(formModalConfig.seedFields || []),
+                ];
+
+                seedIds.forEach((id) => {
+                    const field = formSettings.fields.find((f) => f.id === id);
+                    const relationKey = field?.relation?.[0];
+                    const relationValue = relationKey
+                        ? anchorRow[relationKey]
+                        : undefined;
+
+                    if (Array.isArray(relationValue)) {
+                        // The modal represents the whole group, but each
+                        // member row may hold only its own slice of the
+                        // relation (a split member carries one header), so
+                        // seed the union across every row, deduped. The
+                        // grow endpoint ignores ids a member already holds.
+                        const keyOf = (entry) =>
+                            entry[field.relation_from || 'id'];
+                        const seen = new Set();
+
+                        _formData[id] = bulkEditGroupData.groupRows
+                            .flatMap((row) =>
+                                Array.isArray(row[relationKey])
+                                    ? row[relationKey]
+                                    : []
+                            )
+                            .filter((entry) => {
+                                if (seen.has(keyOf(entry))) {
+                                    return false;
+                                }
+                                seen.add(keyOf(entry));
+                                return true;
+                            })
+                            .map((entry) => ({
+                                value: keyOf(entry),
+                                label:
+                                    entry[field.relationName] ??
+                                    entry.label ??
+                                    entry.name,
+                                // Existing memberships are locked in the
+                                // modal — it can only add, never take away
+                                isFixed: true,
+                            }));
+                        return;
+                    }
+
+                    if (anchorRow[id] !== undefined) {
+                        _formData[id] = anchorRow[id];
+                    }
+                });
+
+                setFormData(_formData);
+                return;
+            }
+
             // Bulk edit opens without a record fetch (columnId is null), so
             // seed each field with the value the group rows already share —
             // otherwise saved values (e.g. an assigned user) render blank and
             // required fields force a re-pick on every open.
             if (bulkEditMode && bulkEditGroupData?.groupRows?.length) {
-                const modalFields =
-                    bulkEditGroupData.iconConfig?.formModal?.fields || [];
+                const modalFields = formModalConfig?.fields || [];
 
                 formSettings.fields.forEach((item) => {
                     const { id, type, parent } = item;
@@ -3418,6 +3541,20 @@ function Form({
                                                       formData
                                                   )
                                                 : false;
+                                        // A group modal whose save means one
+                                        // narrow thing (e.g. "add a header")
+                                        // must not also offer the stage-
+                                        // completing saveAnother, which would
+                                        // fire against every row in the group
+                                        const showSaveAnother =
+                                            formSettings.update?.hasOwnProperty(
+                                                'saveAnother'
+                                            ) &&
+                                            !(
+                                                bulkEditMode &&
+                                                bulkEditGroupData?.iconConfig
+                                                    ?.formModal?.hideSaveAnother
+                                            );
 
                                         return (
                                             <>
@@ -3431,9 +3568,7 @@ function Form({
                                                     >
                                                         Save & Close
                                                     </button>
-                                                    {formSettings.update?.hasOwnProperty(
-                                                        'saveAnother'
-                                                    ) && (
+                                                    {showSaveAnother && (
                                                         <button
                                                             className={
                                                                 styles.btn

package/src/components/MultiSelect.jsx

@@ -64,6 +64,13 @@ const CustomMultiValue = (props) => {
 
 // Custom MultiValueRemove component with proper removal handling
 const CustomMultiValueRemove = (props) => {
+    // Fixed values cannot be deselected: render no × at all — the module
+    // SCSS forces `display` on the remove button with !important, so
+    // hiding it from the styles function is not enough.
+    if (props.data?.isFixed) {
+        return null;
+    }
+
     const handleRemove = (e) => {
         e.stopPropagation();
         
@@ -334,7 +341,27 @@ function MultiSelect({
                         action: action
                     });
                 }
-                
+
+                // Values seeded with isFixed represent memberships this
+                // field is not allowed to take away (e.g. a tag's existing
+                // headers in an add-only group modal): ignore their removal
+                // and survive a clear-all.
+                if (
+                    ['remove-value', 'pop-value'].includes(action.action) &&
+                    action.removedValue?.isFixed
+                ) {
+                    return;
+                }
+
+                if (action.action === 'clear') {
+                    const fixed = selectValue.filter((v) => v?.isFixed);
+
+                    if (fixed.length) {
+                        onChange(fixed, action, settings.id);
+                        return;
+                    }
+                }
+
                 // Special handling for limit=1: keep only the most recent selection
                 if (
                     settings.limit === 1 &&
@@ -435,7 +462,8 @@ function MultiSelect({
                 multiValueRemove: (base, state) => ({
                     ...base,
                     padding: '0 4px',
-                    display: 'flex',
+                    // Fixed values cannot be deselected, so they get no ×
+                    display: state.data?.isFixed ? 'none' : 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     margin: '0',

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

@@ -357,7 +357,7 @@
 
     /* Add custom styles to override react-grid-gallery */
     :global {
-        /* These styles will be applied globally */
+        // These styles will be applied globally
         .ReactGridGallery_tile {
             border-radius: 6px !important;
             overflow: hidden !important;
@@ -508,7 +508,7 @@
 
 /* Date field styling for uniform width */
 :global {
-    /* Target date cells specifically */
+    // Target date cells specifically
     .InovuaReactDataGrid__cell[data-column-id*='date'],
     .InovuaReactDataGrid__cell[data-column-id*='Date'] {
         min-width: 120px !important;
@@ -516,7 +516,7 @@
         max-width: 120px !important;
     }
 
-    /* Target datetime cells specifically */
+    // Target datetime cells specifically
     .InovuaReactDataGrid__cell[data-column-id*='datetime'],
     .InovuaReactDataGrid__cell[data-column-id*='Datetime'] {
         min-width: 160px !important;
@@ -524,7 +524,7 @@
         max-width: 160px !important;
     }
 
-    /* Target daterange cells specifically */
+    // Target daterange cells specifically
     .InovuaReactDataGrid__cell[data-column-id*='daterange'] {
         min-width: 200px !important;
         width: 200px !important;
@@ -1048,6 +1048,24 @@
     margin-left: 4px;
 }
 
+// treeGroupBy parent rows: the group's controls live in an ordinary grid
+// cell, so keep the buttons on one line and let the label take what is left
+.treeParentHeader {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    width: 100%;
+    overflow: hidden;
+}
+
+.treeParentLabel {
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-right: 6px;
+}
+
 .groupValue {
     font-size: 0.85rem;
     color: var(--secondary-color, #1f2937);

package/src/components/styles/MultiSelect.module.scss

@@ -91,14 +91,14 @@
         overflow-y: auto !important;
     }
 
-    /* Control styles */
+    // Control styles
     .visns-select__control {
         min-height: 50px !important;
         height: auto !important; /* Allow height to grow with content */
         overflow: visible !important;
     }
 
-    /* Value container styles */
+    // Value container styles
     .visns-select__value-container {
         padding: 2px 8px !important;
         flex-wrap: wrap !important;
@@ -106,7 +106,7 @@
         overflow-y: auto !important; /* Add scrolling when needed */
     }
 
-    /* Indicator styles */
+    // Indicator styles
     .visns-select__indicators {
         display: flex !important;
         align-items: center !important;
@@ -130,7 +130,7 @@
         margin-left: 2px !important;
     }
 
-    /* Multi-value styles */
+    // Multi-value styles
     .visns-select__multi-value {
         margin: 2px !important;
         padding: 2px 4px !important;
@@ -187,7 +187,7 @@
         transform: scale(0.95) !important;
     }
 
-    /* Fix for modals */
+    // Fix for modals
     .popup-content {
         overflow: visible !important;
     }
@@ -196,7 +196,7 @@
         overflow: visible !important;
     }
 
-    /* CSS class fixes for React Select */
+    // CSS class fixes for React Select
     .css-13cymwt-control,
     .css-t3ipsp-control {
         min-height: 50px !important;
@@ -204,7 +204,7 @@
         overflow: visible !important;
     }
 
-    /* Option styling for description */
+    // Option styling for description
     .visns-select__option {
         padding: 8px 12px !important;
     }
@@ -216,7 +216,7 @@
         overflow-y: auto !important;
     }
 
-    /* Indicators container */
+    // Indicators container
     .css-1hb7zxy-IndicatorsContainer {
         display: flex !important;
         align-items: center !important;
@@ -224,7 +224,7 @@
         height: auto !important;
     }
 
-    /* Individual indicators */
+    // Individual indicators
     .css-1xc3v61-indicatorContainer,
     .css-15lsz6c-indicatorContainer {
         padding: 8px !important;
@@ -233,7 +233,7 @@
         align-self: stretch !important;
     }
 
-    /* Separator */
+    // Separator
     .css-1u9des2-indicatorSeparator {
         align-self: stretch !important;
         margin: 4px 0 !important;

package/src/components/styles/global.css

@@ -316,18 +316,22 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     border-width: 1px;
     box-sizing: border-box;
     box-shadow: none !important;
+}
 
-    &--is-focused {
-        border-color: var(--primary-color) !important;
-        box-shadow: none !important;
-        border-width: 1px !important;
-    }
+/* These were written as `&--is-focused` / `&--menu-is-open` nested inside the
+   rule above. That is Sass syntax — this is a plain .css file, and CSS nesting
+   cannot concatenate a suffix onto the parent selector, so both rules were
+   invalid and the focus/menu-open border colour never applied. */
+.visns-select__control--is-focused {
+    border-color: var(--primary-color) !important;
+    box-shadow: none !important;
+    border-width: 1px !important;
+}
 
-    &--menu-is-open {
-        border-color: var(--primary-color) !important;
-        box-shadow: none !important;
-        border-width: 1px !important;
-    }
+.visns-select__control--menu-is-open {
+    border-color: var(--primary-color) !important;
+    box-shadow: none !important;
+    border-width: 1px !important;
 }
 
 .visns-select__menu {