@visns-studio/visns-components 5.14.14 → 5.14.16

package/package.json

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

package/src/components/DataGrid.jsx

@@ -24,6 +24,7 @@ import React, {
     useCallback,
     useEffect,
     useImperativeHandle,
+    useMemo,
     useRef,
     useState,
 } from 'react';
@@ -250,6 +251,29 @@ const DataGrid = forwardRef(
     ) => {
         const navigate = useNavigate();
 
+        /**
+         * DEBUG: Settings Configuration Tracking
+         * Monitor changes to settings prop to identify config update issues
+         */
+        useEffect(() => {
+            console.log('🔍 DataGrid settings prop changed:', {
+                settings: settings,
+                settingsLength: settings?.length || 0,
+                hasUpdateSetting:
+                    settings?.some((s) => s.id === 'update') || false,
+                settingsIds: settings?.map((s) => s.id) || [],
+                timestamp: new Date().toISOString(),
+            });
+        }, [settings]);
+
+        useEffect(() => {
+            console.log('🔍 DataGrid form prop changed:', {
+                form: form,
+                primaryKey: form?.primaryKey,
+                timestamp: new Date().toISOString(),
+            });
+        }, [form]);
+
         /** Audio */
         const [audioSource, setAudioSource] = useState('');
 
@@ -285,6 +309,11 @@ const DataGrid = forwardRef(
 
         /** Modal Functions */
         const modalOpen = (formType, formId) => {
+            console.log('🔍 modalOpen called:', {
+                formType: formType,
+                formId: formId,
+                timestamp: new Date().toISOString(),
+            });
             setModalShow(true);
             setFormType(formType);
             setFormId(formId);
@@ -304,6 +333,32 @@ const DataGrid = forwardRef(
         const dataRef = useRef(null);
         const [dSearch, setDSearch] = useState('');
 
+        /** Optimized refs for settings and form to avoid unnecessary re-renders */
+        const settingsRef = useRef(settings);
+        const formRef = useRef(form);
+
+        // Keep refs updated with current values
+        useEffect(() => {
+            settingsRef.current = settings;
+        }, [settings]);
+
+        useEffect(() => {
+            formRef.current = form;
+        }, [form]);
+
+        // Memoize settings to avoid unnecessary re-renders when array reference changes but content is same
+        const memoizedSettings = useMemo(
+            () => settings,
+            [
+                settings?.length,
+                settings
+                    ?.map(
+                        (s) => `${s.id}-${s.roles?.join(',') || ''}-${s.active}`
+                    )
+                    .join('|'),
+            ]
+        );
+
         /** Group expansion state */
         const [collapsedGroups, setCollapsedGroups] = useState({});
 
@@ -1209,7 +1264,7 @@ const DataGrid = forwardRef(
 
         const handleReload = () => {
             gridRef.current.paginationProps.reload();
-            
+
             // Force grid to recalculate row heights after reload
             // This fixes the row height rendering issue after filter changes
             setTimeout(() => {
@@ -1321,7 +1376,7 @@ const DataGrid = forwardRef(
                     // Reload grid data if needed
                     if (gridRef.current && gridRef.current.paginationProps) {
                         gridRef.current.paginationProps.reload();
-                        
+
                         // Force grid to recalculate row heights after reload
                         setTimeout(() => {
                             if (gridRef.current?.api) {
@@ -1463,112 +1518,198 @@ const DataGrid = forwardRef(
             }
         };
 
-        const onRowClick = useCallback((rowProps, event) => {
-            const cellElement = event.target.closest(
-                '.InovuaReactDataGrid__cell'
-            );
+        /**
+         * DEBUG: Row Click Analysis
+         *
+         * When row clicks aren't working, check the console for these debug messages:
+         *
+         * 1. "Row onClick triggered" - Initial row click detection
+         * 2. "Group row check" - Whether it's a group row (should be false for data rows)
+         * 3. "Cell element in row handler" - Cell element detection
+         * 4. "Row handler column analysis" - Column identification
+         * 5. "Non-checkbox column - calling onRowClick" - Normal row click path
+         * 6. "DataGrid onRowClick triggered" - Main onRowClick function entry
+         * 7. "Column analysis" - Column detection and type checking
+         * 8. "Checking for update setting" - Modal opening prerequisites
+         * 9. "Update setting found" - Whether update setting exists
+         * 10. "Opening modal with" / "No update setting found" - Final modal decision
+         * 11. "modalOpen called" - Modal function execution
+         *
+         * Common issues:
+         * - Missing cell element: Check if click target is within grid
+         * - Wrong column type: Check column configuration
+         * - No update setting: Check config.settings for update permission
+         * - Group row interference: Check if data is being treated as group row
+         */
+        const onRowClick = useCallback(
+            (rowProps, event) => {
+                console.log('🔍 DataGrid onRowClick triggered:', {
+                    rowData: rowProps.data,
+                    event: event,
+                    target: event.target,
+                    timestamp: new Date().toISOString(),
+                });
 
-            // Add null check to prevent errors when cellElement is null
-            if (!cellElement) {
-                return; // Exit early if no cell element was found
-            }
+                const cellElement = event.target.closest(
+                    '.InovuaReactDataGrid__cell'
+                );
 
-            const columnIndex = Array.from(
-                cellElement.parentNode.children
-            ).indexOf(cellElement);
+                console.log('🔍 Cell element found:', cellElement);
 
-            if (
-                rowProps.columns.length > 1 &&
-                columnIndex === rowProps.columns.length - 1
-            ) {
-                // Handle last column click
-            } else {
-                const column = rowProps.columns[columnIndex];
+                // Add null check to prevent errors when cellElement is null
+                if (!cellElement) {
+                    console.warn(
+                        '⚠️ No cell element found - row click aborted'
+                    );
+                    return; // Exit early if no cell element was found
+                }
+
+                const columnIndex = Array.from(
+                    cellElement.parentNode.children
+                ).indexOf(cellElement);
+
+                console.log('🔍 Column analysis:', {
+                    columnIndex: columnIndex,
+                    totalColumns: rowProps.columns.length,
+                    isLastColumn: columnIndex === rowProps.columns.length - 1,
+                    columns: rowProps.columns.map((col) => ({
+                        id: col.id,
+                        type: col.type,
+                    })),
+                });
 
                 if (
-                    column.type !== 'dropdown' &&
-                    column.type !== 'input_text'
+                    rowProps.columns.length > 1 &&
+                    columnIndex === rowProps.columns.length - 1
                 ) {
-                    if (column.id !== '__checkbox-column') {
-                        if (column.link && column.link.hasOwnProperty('url')) {
-                            if (column.link.url) {
-                                // Helper function to safely retrieve nested values
-                                const getNestedValue = (obj, key) =>
-                                    key
-                                        .split('.')
-                                        .reduce(
-                                            (acc, part) =>
-                                                acc ? acc[part] : undefined,
-                                            obj
-                                        );
+                    console.log('🔍 Last column clicked - no action');
+                    // Handle last column click
+                } else {
+                    const column = rowProps.columns[columnIndex];
+                    console.log('🔍 Column clicked:', {
+                        columnId: column?.id,
+                        columnType: column?.type,
+                        hasLink: !!column?.link,
+                    });
 
-                                const fileRelationArray = column.id.split('.');
-                                const linkUrl = column.link.url;
-                                const linkKey =
-                                    rowProps.columns[columnIndex].link.key;
-                                const rowData = getNestedValue(
-                                    rowProps.data,
-                                    linkKey
-                                );
+                    if (
+                        column.type !== 'dropdown' &&
+                        column.type !== 'input_text'
+                    ) {
+                        if (column.id !== '__checkbox-column') {
+                            if (
+                                column.link &&
+                                column.link.hasOwnProperty('url')
+                            ) {
+                                if (column.link.url) {
+                                    // Helper function to safely retrieve nested values
+                                    const getNestedValue = (obj, key) =>
+                                        key
+                                            .split('.')
+                                            .reduce(
+                                                (acc, part) =>
+                                                    acc ? acc[part] : undefined,
+                                                obj
+                                            );
 
-                                if (column.link.hasOwnProperty('folder')) {
-                                    const linkFolder =
-                                        rowProps.columns[columnIndex].link
-                                            .folder;
+                                    const fileRelationArray =
+                                        column.id.split('.');
+                                    const linkUrl = column.link.url;
+                                    const linkKey =
+                                        rowProps.columns[columnIndex].link.key;
+                                    const rowData = getNestedValue(
+                                        rowProps.data,
+                                        linkKey
+                                    );
 
-                                    // Adjusted to use the nested value for checking the file relation
-                                    if (
-                                        getNestedValue(
-                                            rowProps.data,
-                                            fileRelationArray[0]
-                                        )
-                                    ) {
-                                        if (linkFolder !== '') {
-                                            window.open(
-                                                `${linkUrl}${rowData}/${linkFolder}`
-                                            );
-                                        } else {
-                                            window.open(`${linkUrl}${rowData}`);
+                                    if (column.link.hasOwnProperty('folder')) {
+                                        const linkFolder =
+                                            rowProps.columns[columnIndex].link
+                                                .folder;
+
+                                        // Adjusted to use the nested value for checking the file relation
+                                        if (
+                                            getNestedValue(
+                                                rowProps.data,
+                                                fileRelationArray[0]
+                                            )
+                                        ) {
+                                            if (linkFolder !== '') {
+                                                window.open(
+                                                    `${linkUrl}${rowData}/${linkFolder}`
+                                                );
+                                            } else {
+                                                window.open(
+                                                    `${linkUrl}${rowData}`
+                                                );
+                                            }
                                         }
+                                    } else {
+                                        navigate(`${linkUrl}${rowData}`);
                                     }
                                 } else {
-                                    navigate(`${linkUrl}${rowData}`);
+                                    if (rowProps.data[column.id]) {
+                                        window.open(
+                                            rowProps.data[column.id],
+                                            '_blank'
+                                        );
+                                    }
                                 }
+                            } else if (column.link && column.link.popup) {
+                                const linkPopup = column.link.popup;
+                                const linkKey =
+                                    rowProps.columns[columnIndex].link.key;
+                                const rowData = rowProps.data[linkKey];
+
+                                window.open(
+                                    `${linkPopup}/${rowData}`,
+                                    '',
+                                    'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
+                                );
                             } else {
-                                if (rowProps.data[column.id]) {
-                                    window.open(
-                                        rowProps.data[column.id],
-                                        '_blank'
-                                    );
-                                }
-                            }
-                        } else if (column.link && column.link.popup) {
-                            const linkPopup = column.link.popup;
-                            const linkKey =
-                                rowProps.columns[columnIndex].link.key;
-                            const rowData = rowProps.data[linkKey];
-
-                            window.open(
-                                `${linkPopup}/${rowData}`,
-                                '',
-                                'width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1'
-                            );
-                        } else {
-                            const updateSetting = settings.find(
-                                (setting) => setting.id === 'update'
-                            );
+                                console.log('🔍 Checking for update setting:', {
+                                    settings: settingsRef.current,
+                                    form: formRef.current,
+                                    primaryKey: formRef.current?.primaryKey,
+                                    rowId: rowProps.data[
+                                        formRef.current?.primaryKey
+                                    ],
+                                });
 
-                            if (updateSetting) {
-                                modalOpen(
-                                    'update',
-                                    rowProps.data[form.primaryKey]
+                                const updateSetting = settingsRef.current.find(
+                                    (setting) => setting.id === 'update'
                                 );
+
+                                console.log(
+                                    '🔍 Update setting found:',
+                                    updateSetting
+                                );
+
+                                if (updateSetting) {
+                                    console.log('✅ Opening modal with:', {
+                                        type: 'update',
+                                        id: rowProps.data[
+                                            formRef.current.primaryKey
+                                        ],
+                                    });
+                                    modalOpen(
+                                        'update',
+                                        rowProps.data[
+                                            formRef.current.primaryKey
+                                        ]
+                                    );
+                                } else {
+                                    console.warn(
+                                        '⚠️ No update setting found - modal will not open'
+                                    );
+                                }
                             }
                         }
                     }
                 }
-            }
-        }, []);
+            },
+            [modalOpen, navigate]
+        );
 
         const onRenderRow = useCallback(
             (rowProps) => {
@@ -1576,6 +1717,14 @@ const DataGrid = forwardRef(
                 const { onClick } = rowProps;
 
                 rowProps.onClick = (event) => {
+                    console.log('🔍 Row onClick triggered:', {
+                        rowId: rowProps.data?.id,
+                        rowData: rowProps.data,
+                        event: event,
+                        target: event.target,
+                        timestamp: new Date().toISOString(),
+                    });
+
                     // Check if this is a group row - group rows should only handle expand/collapse, not onRowClick
                     const isGroupRow =
                         rowProps.isGroupRow ||
@@ -1587,7 +1736,12 @@ const DataGrid = forwardRef(
                             '.InovuaReactDataGrid__group-cell'
                         );
 
+                    console.log('🔍 Group row check:', isGroupRow);
+
                     if (isGroupRow) {
+                        console.log(
+                            '🔍 Group row detected - calling original onClick only'
+                        );
                         // For group rows, only allow the original onClick handler (for expand/collapse)
                         // Do NOT call onRowClick as it should only apply to data rows
                         if (onClick) {
@@ -1600,8 +1754,13 @@ const DataGrid = forwardRef(
                         '.InovuaReactDataGrid__cell'
                     );
 
+                    console.log('🔍 Cell element in row handler:', cellElement);
+
                     // Add null check to prevent errors when cellElement is null
                     if (!cellElement) {
+                        console.warn(
+                            '⚠️ No cell element found in row handler - exiting'
+                        );
                         return; // Exit early if no cell element was found
                     }
 
@@ -1611,7 +1770,16 @@ const DataGrid = forwardRef(
 
                     const column = rowProps.columns[columnIndex];
 
+                    console.log('🔍 Row handler column analysis:', {
+                        columnIndex: columnIndex,
+                        columnId: column?.id,
+                        isCheckboxColumn: column?.id === '__checkbox-column',
+                    });
+
                     if (column.id === '__checkbox-column') {
+                        console.log(
+                            '🔍 Checkbox column clicked - handling checkbox logic'
+                        );
                         // For checkbox column clicks, we need to handle them specially
                         // to ensure consistent behavior whether clicking checkbox or cell area
 
@@ -1657,10 +1825,17 @@ const DataGrid = forwardRef(
                             onClick(event);
                         }
                     } else {
+                        console.log(
+                            '🔍 Non-checkbox column - calling onRowClick'
+                        );
                         // For non-checkbox columns, handle normal row clicks
                         // But do NOT trigger checkbox selection
                         onRowClick(rowProps, event);
 
+                        console.log(
+                            '🔍 Calling original onClick handler:',
+                            !!onClick
+                        );
                         // Call the original onClick handler
                         if (onClick) {
                             onClick(event);
@@ -2283,6 +2458,10 @@ const DataGrid = forwardRef(
                         return null;
                 }
             } else {
+                console.log('🔍 Setting NOT rendered (allow=false):', {
+                    settingId: s.id,
+                    reason: 'filtered out by permissions or active conditions',
+                });
                 return null;
             }
 
@@ -2874,14 +3053,22 @@ const DataGrid = forwardRef(
 
                     // Function to check if any settings would be visible for any row
                     const hasVisibleSettings = () => {
-                        if (settings.length === 0) return false;
-                        
+                        if (memoizedSettings.length === 0) return false;
+
                         // Check if any setting would be visible based on role permissions
-                        return settings.some(setting => {
+                        return memoizedSettings.some((setting) => {
                             // Check role-based permissions
-                            if (setting.roles && Array.isArray(setting.roles) && setting.roles.length > 0) {
-                                const hasRequiredRole = setting.roles.some(requiredRole => 
-                                    userProfile?.roles?.some(userRole => userRole.name === requiredRole)
+                            if (
+                                setting.roles &&
+                                Array.isArray(setting.roles) &&
+                                setting.roles.length > 0
+                            ) {
+                                const hasRequiredRole = setting.roles.some(
+                                    (requiredRole) =>
+                                        userProfile?.roles?.some(
+                                            (userRole) =>
+                                                userRole.name === requiredRole
+                                        )
                                 );
                                 return hasRequiredRole;
                             }
@@ -2903,7 +3090,7 @@ const DataGrid = forwardRef(
                             render: ({ data }) => {
                                 return (
                                     <div className={styles.tdactions}>
-                                        {settings.map((setting) =>
+                                        {memoizedSettings.map((setting) =>
                                             renderSetting(setting, data)
                                         )}
                                     </div>
@@ -2986,7 +3173,7 @@ const DataGrid = forwardRef(
                 .catch((error) => {
                     console.error('Error in fetching dropdown data: ', error);
                 });
-        }, [columns, filterDataSource]);
+        }, [columns, filterDataSource, memoizedSettings]);
 
         useEffect(() => {
             if (setFilterData) {
@@ -3146,7 +3333,7 @@ const DataGrid = forwardRef(
             // Force reload of data
             if (gridRef.current && gridRef.current.paginationProps) {
                 gridRef.current.paginationProps.reload();
-                
+
                 // Force grid to recalculate row heights after reload
                 setTimeout(() => {
                     if (gridRef.current?.api) {
@@ -3284,37 +3471,69 @@ const DataGrid = forwardRef(
                                                     '';
 
                                           // Check for important marker
-                                          const checkGroupImportantMarker = (groupValue, importantMarkerConfig) => {
-                                              if (!importantMarkerConfig || !dataRef.current?.length || !ajaxSetting?.groupBy) {
+                                          const checkGroupImportantMarker = (
+                                              groupValue,
+                                              importantMarkerConfig
+                                          ) => {
+                                              if (
+                                                  !importantMarkerConfig ||
+                                                  !dataRef.current?.length ||
+                                                  !ajaxSetting?.groupBy
+                                              ) {
                                                   return false;
                                               }
-                                              
-                                              const { id: fieldId, value: expectedValue } = importantMarkerConfig;
-                                              const groupField = ajaxSetting.groupBy[0];
-                                              
+
+                                              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];
-                                                  
+                                              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;
+                                                  if (
+                                                      typeof expectedValue ===
+                                                      'boolean'
+                                                  ) {
+                                                      return (
+                                                          Boolean(
+                                                              fieldValue
+                                                          ) === expectedValue
+                                                      );
                                                   }
-                                                  
-                                                  return 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";
+                                          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 =
@@ -3395,11 +3614,29 @@ const DataGrid = forwardRef(
 
                                           return (
                                               <div
-                                                  className={`group-header-clean group-header-fixed-height ${styles.groupHeaderContainer} ${hasImportantMarker ? styles.groupHeaderImportant : ''}`}
-                                                  style={hasImportantMarker ? {
-                                                      borderLeftColor: importantMarkerColor || '#FF6961',
-                                                      background: `linear-gradient(135deg, ${importantMarkerColor || '#FF6961'}15 0%, ${importantMarkerColor || '#FF6961'}08 100%)`
-                                                  } : {}}
+                                                  className={`group-header-clean group-header-fixed-height ${
+                                                      styles.groupHeaderContainer
+                                                  } ${
+                                                      hasImportantMarker
+                                                          ? styles.groupHeaderImportant
+                                                          : ''
+                                                  }`}
+                                                  style={
+                                                      hasImportantMarker
+                                                          ? {
+                                                                borderLeftColor:
+                                                                    importantMarkerColor ||
+                                                                    '#FF6961',
+                                                                background: `linear-gradient(135deg, ${
+                                                                    importantMarkerColor ||
+                                                                    '#FF6961'
+                                                                }15 0%, ${
+                                                                    importantMarkerColor ||
+                                                                    '#FF6961'
+                                                                }08 100%)`,
+                                                            }
+                                                          : {}
+                                                  }
                                                   onClick={
                                                       handleGroupHeaderClick
                                                   }
@@ -3577,16 +3814,25 @@ const DataGrid = forwardRef(
                                                                   <AlertCircle
                                                                       className="important-marker"
                                                                       style={{
-                                                                          display: 'inline-block',
-                                                                          marginLeft: '8px',
-                                                                          color: importantMarkerColor || '#FF6961',
-                                                                          position: 'relative',
-                                                                          top: '1px'
+                                                                          display:
+                                                                              'inline-block',
+                                                                          marginLeft:
+                                                                              '8px',
+                                                                          color:
+                                                                              importantMarkerColor ||
+                                                                              '#FF6961',
+                                                                          position:
+                                                                              'relative',
+                                                                          top: '1px',
                                                                       }}
                                                                       size={16}
-                                                                      title={importantMarkerTooltip}
+                                                                      title={
+                                                                          importantMarkerTooltip
+                                                                      }
                                                                       data-tooltip-id="system-tooltip"
-                                                                      data-tooltip-content={importantMarkerTooltip}
+                                                                      data-tooltip-content={
+                                                                          importantMarkerTooltip
+                                                                      }
                                                                   />
                                                               )}
                                                           </strong>

package/src/components/Form.jsx

@@ -125,45 +125,49 @@ function Form({
 
         if (e.target.files && e.target.files.length > 0) {
             // Find the field settings to check if multiple is enabled
-            const fieldSettings = formSettings?.fields?.find(field => field.id === id);
+            const fieldSettings = formSettings?.fields?.find(
+                (field) => field.id === id
+            );
             const isMultiple = fieldSettings?.multiple === true;
-            
+
             // Debug logging for development
             if (process.env.NODE_ENV === 'development') {
                 console.log('File input change:', {
                     id,
                     filesCount: e.target.files.length,
                     isMultiple,
-                    fieldSettings
+                    fieldSettings,
                 });
             }
-            
+
             if (isMultiple) {
                 // For multiple file inputs, append new files to existing ones
                 setFormData((prevState) => {
                     const existingFiles = prevState[id] || [];
                     const newFiles = Array.from(e.target.files);
-                    
+
                     // Ensure existingFiles is always an array for multiple inputs
-                    const currentFiles = Array.isArray(existingFiles) ? existingFiles : [];
-                    
+                    const currentFiles = Array.isArray(existingFiles)
+                        ? existingFiles
+                        : [];
+
                     const updatedFiles = [...currentFiles, ...newFiles];
-                    
+
                     // Debug logging for development
                     if (process.env.NODE_ENV === 'development') {
                         console.log('Multiple file update:', {
                             existingCount: currentFiles.length,
                             newCount: newFiles.length,
-                            totalCount: updatedFiles.length
+                            totalCount: updatedFiles.length,
                         });
                     }
-                    
+
                     return {
                         ...prevState,
                         [id]: updatedFiles,
                     };
                 });
-                
+
                 // Clear the input so the same files can be selected again
                 setTimeout(() => {
                     if (e.target) {
@@ -318,15 +322,19 @@ function Form({
         const handleSelectOption = () => {
             updateFormData({ [id]: inputValue });
 
-            // Update any matching form data properties
-            Object.keys(inputValue)
-                .filter(
-                    (key) =>
-                        formData.hasOwnProperty(key) &&
-                        key !== 'id' &&
-                        key !== 'label'
-                )
-                .forEach((key) => updateFormData({ [key]: inputValue[key] }));
+            // Batch update version
+            const excludedKeys = new Set(['id', 'label', 'description']);
+            const updates = {};
+
+            for (const key in inputValue) {
+                if (key in formData && !excludedKeys.has(key)) {
+                    updates[key] = inputValue[key];
+                }
+            }
+
+            if (Object.keys(updates).length > 0) {
+                updateFormData(updates);
+            }
 
             formSettings.fields.forEach((field) => {
                 if (field.id === id && field.trigger) {
@@ -495,7 +503,7 @@ function Form({
     const handleFileDownload = async (fileData) => {
         try {
             console.info('File download data:', fileData);
-            
+
             if (!fileData) {
                 toast.error('No file data available for download');
                 return;
@@ -503,7 +511,11 @@ function Form({
 
             // Handle different file data structures
             let downloadUrl = null;
-            let fileName = fileData.filename || fileData.name || fileData.file_name || 'download';
+            let fileName =
+                fileData.filename ||
+                fileData.name ||
+                fileData.file_name ||
+                'download';
 
             // Priority order for download methods:
             // 1. Direct file URL (S3, CDN, etc.)
@@ -518,7 +530,9 @@ function Form({
                     downloadUrl = filePath;
                 } else {
                     // Construct URL - adjust this based on your API structure
-                    downloadUrl = `/api/files/download?path=${encodeURIComponent(filePath)}`;
+                    downloadUrl = `/api/files/download?path=${encodeURIComponent(
+                        filePath
+                    )}`;
                 }
             }
             // 3. Legacy key/uuid method
@@ -529,7 +543,7 @@ function Form({
             else if (fileData.id) {
                 downloadUrl = `/api/files/download/${fileData.id}`;
             }
-            
+
             if (!downloadUrl) {
                 toast.error('Unable to determine download URL for this file');
                 return;
@@ -540,14 +554,13 @@ function Form({
             link.href = downloadUrl;
             link.download = fileName;
             link.target = '_blank';
-            
+
             // Add to DOM, click, and remove
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
-            
+
             toast.success(`Downloading ${fileName}...`);
-            
         } catch (error) {
             console.error('File download error:', error);
             toast.error('Failed to download file');
@@ -925,11 +938,19 @@ function Form({
 
                             // Check if formData[item.id] is null, undefined, or an empty string AND there's no auto value
                             // Note: 0 is considered a valid value for dropdowns/options
-                            if ((formData[item.id] === null || formData[item.id] === undefined || formData[item.id] === '') && !autoValue) {
+                            if (
+                                (formData[item.id] === null ||
+                                    formData[item.id] === undefined ||
+                                    formData[item.id] === '') &&
+                                !autoValue
+                            ) {
                                 // Check for required_check dependency
                                 if (
                                     item.required_check &&
-                                    (formData[item.required_check] === null || formData[item.required_check] === undefined || formData[item.required_check] === '')
+                                    (formData[item.required_check] === null ||
+                                        formData[item.required_check] ===
+                                            undefined ||
+                                        formData[item.required_check] === '')
                                 ) {
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
@@ -943,7 +964,9 @@ function Form({
                         } else if (
                             item.required_rely &&
                             formData[item.required_rely] &&
-                            (formData[item.id] === null || formData[item.id] === undefined || formData[item.id] === '')
+                            (formData[item.id] === null ||
+                                formData[item.id] === undefined ||
+                                formData[item.id] === '')
                         ) {
                             // Check if the dependent required field is empty when it should be filled
                             validation += `${item.label} is a required field.<br/>`;
@@ -994,9 +1017,13 @@ function Form({
                             method = formSettings.customMethod;
                         } else {
                             // Check if this is bulk edit mode
-                            if (bulkEditMode && bulkEditGroupData?.iconConfig?.formModal) {
+                            if (
+                                bulkEditMode &&
+                                bulkEditGroupData?.iconConfig?.formModal
+                            ) {
                                 // Use bulk edit endpoint configuration
-                                const formModalConfig = bulkEditGroupData.iconConfig.formModal;
+                                const formModalConfig =
+                                    bulkEditGroupData.iconConfig.formModal;
                                 url = formModalConfig.url || url;
                                 method = formModalConfig.method || 'POST';
                             } else {
@@ -1020,7 +1047,9 @@ function Form({
                                                       }`;
                                         } else {
                                             url += `/${
-                                                formData[formSettings.primaryKey]
+                                                formData[
+                                                    formSettings.primaryKey
+                                                ]
                                             }`;
                                         }
                                         method =
@@ -1179,9 +1208,11 @@ function Form({
                                 ...payload,
                                 bulkEdit: true,
                                 groupValue: bulkEditGroupData.groupValue,
-                                groupKey: bulkEditGroupData.iconConfig.formModal?.groupKey || ajaxSetting?.groupBy?.[0],
+                                groupKey:
+                                    bulkEditGroupData.iconConfig.formModal
+                                        ?.groupKey || ajaxSetting?.groupBy?.[0],
                                 rowIds: bulkEditGroupData.groupRowIds,
-                                ...bulkEditGroupData.iconConfig.formModal?.data
+                                ...bulkEditGroupData.iconConfig.formModal?.data,
                             };
                         }
 
@@ -1237,7 +1268,8 @@ function Form({
                                         if (resSaveAnother.data.error === '') {
                                             toast.success(saveAnother.message);
                                             if (fetchTable) {
-                                                const createdItem = res.data.data || res.data;
+                                                const createdItem =
+                                                    res.data.data || res.data;
                                                 fetchTable(createdItem);
                                             }
                                         }
@@ -1846,28 +1878,36 @@ function Form({
                         />
                     </div>
                     {tableData?.dataSource?.length > 0 && (
-                        <div 
+                        <div
                             className={`${styles.formItem} ${styles.fwItem}`}
                             style={{
-                                width: formSettings?.save?.return?.width 
-                                    ? `min(${parseInt(formSettings.save.return.width)}px, 100vw - 40px)` 
+                                width: formSettings?.save?.return?.width
+                                    ? `min(${parseInt(
+                                          formSettings.save.return.width
+                                      )}px, 100vw - 40px)`
                                     : '100%',
-                                maxWidth: formSettings?.save?.return?.width 
-                                    ? `${parseInt(formSettings.save.return.width)}px` 
+                                maxWidth: formSettings?.save?.return?.width
+                                    ? `${parseInt(
+                                          formSettings.save.return.width
+                                      )}px`
                                     : '100%',
                                 overflow: 'auto',
-                                margin: formSettings?.save?.return?.width ? '0 auto' : undefined
+                                margin: formSettings?.save?.return?.width
+                                    ? '0 auto'
+                                    : undefined,
                             }}
                         >
                             <ReactDataGrid
                                 idProperty="form-table-result"
                                 columns={tableData.columns}
                                 dataSource={tableData.dataSource}
-                                style={{ 
+                                style={{
                                     minHeight: 550,
-                                    width: formSettings?.save?.return?.width 
-                                        ? `${parseInt(formSettings.save.return.width)}px` 
-                                        : '100%'
+                                    width: formSettings?.save?.return?.width
+                                        ? `${parseInt(
+                                              formSettings.save.return.width
+                                          )}px`
+                                        : '100%',
                                 }}
                                 showActiveRowIndicator={false}
                                 selected={selected}
@@ -2361,9 +2401,13 @@ function Form({
                     <div className={styles.modal__header}>
                         <h1>
                             {bulkEditMode && bulkEditGroupData
-                                ? `${bulkEditGroupData.iconConfig.formModal?.title || 'Bulk Edit'} - ${bulkEditGroupData.groupValue} (${bulkEditGroupData.groupRows.length} items)`
-                                : formSettings[formType]?.title
-                            }
+                                ? `${
+                                      bulkEditGroupData.iconConfig.formModal
+                                          ?.title || 'Bulk Edit'
+                                  } - ${bulkEditGroupData.groupValue} (${
+                                      bulkEditGroupData.groupRows.length
+                                  } items)`
+                                : formSettings[formType]?.title}
                         </h1>
                         <button
                             className={styles.modal__close}
@@ -2398,9 +2442,12 @@ function Form({
                                     }
                                     // In bulk edit mode, only show fields specified in the formModal configuration
                                     if (
-                                        bulkEditMode && 
-                                        bulkEditGroupData?.iconConfig?.formModal?.fields &&
-                                        !bulkEditGroupData.iconConfig.formModal.fields.includes(item.id)
+                                        bulkEditMode &&
+                                        bulkEditGroupData?.iconConfig?.formModal
+                                            ?.fields &&
+                                        !bulkEditGroupData.iconConfig.formModal.fields.includes(
+                                            item.id
+                                        )
                                     ) {
                                         return null;
                                     }