df-ae-forms-package 1.0.89 → 1.0.91

package/dist/index.esm.js

@@ -5301,9 +5301,27 @@ const DfFormSection = ({ id, properties, mode = 'edit', formData = {}, onValueCh
 
 // Dynamic imports to avoid circular dependencies
 const DfFormTable$1 = React.lazy(() => Promise.resolve().then(function () { return dfFormTable; }));
+// Normalize a table row from API format (object with numeric keys) into a proper array.
+// The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...].
+const normalizeTableRow = (row) => {
+    if (Array.isArray(row))
+        return row;
+    if (row && typeof row === 'object') {
+        const keys = Object.keys(row).filter(k => !isNaN(Number(k))).sort((a, b) => Number(a) - Number(b));
+        if (keys.length > 0)
+            return keys.map(k => row[k]);
+    }
+    return [];
+};
 const DfFormPreview = ({ formComponents = [], currentDevice = 'desktop', isPreviewMode = false, initialFormData = [], onSubmit, onFormDataChange, formTitle, formDescription, formTemplateId, 
 // Add component management props for edit mode
 onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, workOrderNumber, assetNumber, isStandalone, user, onCreateIssue, onUpdateIssue }) => {
+    // Local copy of formComponents so structure updates (e.g. table cell init) are reflected immediately
+    const [localFormComponents, setLocalFormComponents] = useState(formComponents);
+    // Sync local state when the prop changes from the parent
+    useEffect(() => {
+        setLocalFormComponents(formComponents);
+    }, [formComponents]);
     // Form state
     const [formValues, setFormValues] = useState({});
     const [validationErrors, setValidationErrors] = useState({});
@@ -5324,7 +5342,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     // Initialize form state
     useEffect(() => {
         initializeFormState();
-    }, [formComponents, initialFormData]);
+    }, [localFormComponents, initialFormData]);
     // Recursive function to initialize values from nested components
     const initializeComponentValues = (components, values) => {
         components.forEach(component => {
@@ -5353,13 +5371,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             // Handle nested components in table cells
             if (component.cells && Array.isArray(component.cells)) {
                 component.cells.forEach((row, _rowIndex) => {
-                    if (Array.isArray(row)) {
-                        row.forEach((cell, _cellIndex) => {
-                            if (cell && cell.components && Array.isArray(cell.components)) {
-                                initializeComponentValues(cell.components, values);
-                            }
-                        });
-                    }
+                    normalizeTableRow(row).forEach((cell, _cellIndex) => {
+                        if (cell && cell.components && Array.isArray(cell.components)) {
+                            initializeComponentValues(cell.components, values);
+                        }
+                    });
                 });
             }
             // Handle nested components in datagrid entries
@@ -5422,11 +5438,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     extractNotesAndAttachments(comp.children);
                 if (comp.cells && Array.isArray(comp.cells))
                     comp.cells.forEach((row) => {
-                        if (Array.isArray(row))
-                            row.forEach((cell) => {
-                                if (cell && cell.components)
-                                    extractNotesAndAttachments(cell.components);
-                            });
+                        normalizeTableRow(row).forEach((cell) => {
+                            if (cell && cell.components)
+                                extractNotesAndAttachments(cell.components);
+                        });
                     });
                 if (comp.entries)
                     comp.entries.forEach((entry) => {
@@ -5465,8 +5480,9 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 }
                 if (validatedComponent.cells && Array.isArray(validatedComponent.cells)) {
                     validatedComponent.cells = validatedComponent.cells.map((row) => {
-                        if (Array.isArray(row)) {
-                            return row.map((cell) => {
+                        const normalizedRow = normalizeTableRow(row);
+                        if (normalizedRow.length > 0) {
+                            return normalizedRow.map((cell) => {
                                 if (cell && cell.components && Array.isArray(cell.components)) {
                                     return {
                                         ...cell,
@@ -5494,11 +5510,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             });
         };
         // Initialize validated components
-        let validatedFormComponents = formComponents;
-        if (formComponents && formComponents.length > 0) {
-            validatedFormComponents = getValidatedComponents(formComponents);
+        let validatedFormComponents = localFormComponents;
+        if (localFormComponents && localFormComponents.length > 0) {
+            validatedFormComponents = getValidatedComponents(localFormComponents);
             // Notifying parent of changed components if they were mutated (IDs added/fixed)
-            if (JSON.stringify(validatedFormComponents) !== JSON.stringify(formComponents)) {
+            if (JSON.stringify(validatedFormComponents) !== JSON.stringify(localFormComponents)) {
                 onFormDataChange?.(validatedFormComponents);
             }
         }
@@ -5526,7 +5542,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         setComponentAttachments(prev => ({ ...initialAttachments, ...prev }));
         // Conditional logic evaluation disabled temporarily to fix table issues
         // evaluateConditionalLogic()
-    }, [initialFormData, formComponents]);
+    }, [initialFormData, localFormComponents]);
     // Conditional logic disabled temporarily - all components are always visible
     const shouldShowComponent = useCallback((_componentId) => {
         return true;
@@ -5539,7 +5555,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             return;
         }
         // CRITICAL: Check if multiple components share this ID (ID collision detection)
-        const componentsWithSameId = formComponents.filter(comp => comp.id === change.id);
+        const componentsWithSameId = localFormComponents.filter(comp => comp.id === change.id);
         if (componentsWithSameId.length > 1) {
             console.error(`[DfFormPreview] ID COLLISION DETECTED! Multiple components share ID "${change.id}":`, componentsWithSameId.map(c => ({ id: c.id, name: c.name, label: c.basic?.label })));
             // Don't update - this would cause all components with this ID to get the same value
@@ -5560,7 +5576,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         }
         // Clear raised issues for this component when value changes
         // This ensures that if threshold condition changes, user must raise issue again
-        const component = formComponents.find(comp => comp.id === change.id);
+        const component = localFormComponents.find(comp => comp.id === change.id);
         if (component) {
             const threshold = component?.threshold;
             if (threshold && threshold.conditions && threshold.conditions.length > 0) {
@@ -5613,13 +5629,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 if (component.name === 'table' && component.cells) {
                     return {
                         ...component,
-                        cells: component.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
+                        cells: component.cells.map((row) => normalizeTableRow(row).map((cell) => {
                             const updatedCell = { ...cell };
                             if (updatedCell.components) {
                                 updatedCell.components = updateComponentValue(updatedCell.components);
                             }
                             return updatedCell;
-                        }) : row)
+                        }))
                     };
                 }
                 if (component.name === 'datagrid' && component.entries) {
@@ -5638,7 +5654,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             });
         };
         // Update form components
-        const updatedComponents = updateComponentValue(formComponents);
+        const updatedComponents = updateComponentValue(localFormComponents);
+        // CRITICAL: Update local state immediately so structure changes (e.g. table cell init)
+        // are reflected without waiting for Angular parent round-trip
+        setLocalFormComponents(updatedComponents);
         onFormDataChange?.(updatedComponents);
         // Clear validation errors when user starts typing and re-validate
         if (validationErrors[change.id]) {
@@ -5675,7 +5694,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         }
         // Conditional logic evaluation disabled temporarily
         // evaluateConditionalLogic(newFormValues, updatedComponents)
-    }, [formComponents, formValues, validationErrors, onFormDataChange]);
+    }, [localFormComponents, formValues, validationErrors, onFormDataChange]);
     // Recursive function to find a component by ID in nested structures
     const findComponentById = useCallback((components, fieldId) => {
         for (const comp of components) {
@@ -5719,7 +5738,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         if (isPreviewMode)
             return;
         // Find component recursively (handles nested components)
-        const component = findComponentById(formComponents, fieldId);
+        const component = findComponentById(localFormComponents, fieldId);
         if (!component)
             return;
         // Get current value from form values (real-time input)
@@ -5814,7 +5833,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             ...prev,
             [fieldId]: errorMessage
         }));
-    }, [formComponents, isPreviewMode, formValues, findComponentById]);
+    }, [localFormComponents, isPreviewMode, formValues, findComponentById]);
     // Handle form control blur
     const onFormControlBlur = useCallback((fieldId) => {
         setTouchedFields(prev => ({
@@ -5844,11 +5863,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     // useEffect(() => {
     //   if (!isPreviewMode && Object.keys(formValues).length > 0) {
     //     // Validate all form components when form values change (but not on initial load)
-    //     formComponents.forEach(component => {
+    //     localFormComponents.forEach(component => {
     //       validateField(component.id)
     //     })
     //   }
-    // }, [formValues, validateField, isPreviewMode, formComponents])
+    // }, [formValues, validateField, isPreviewMode, localFormComponents])
     // Enhanced form validity check
     const isFormValid = useCallback(() => {
         // Check if there are any validation errors
@@ -5857,7 +5876,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             return false;
         }
         // Check required fields
-        return formComponents.every(component => {
+        return localFormComponents.every(component => {
             // Use real-time form values instead of component values
             const currentValue = formValues[component.id] || '';
             // Check if field has a value
@@ -5903,7 +5922,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             }
             return true;
         });
-    }, [formComponents, formValues, validationErrors]);
+    }, [localFormComponents, formValues, validationErrors]);
     // Evaluate threshold condition (handles both numeric and string values)
     const evaluateThresholdCondition = useCallback((condition, currentVal) => {
         // Handle array values (for checkbox)
@@ -5957,7 +5976,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         if (isPreviewMode)
             return [];
         const metConditions = [];
-        formComponents.forEach(component => {
+        localFormComponents.forEach(component => {
             const condition = component?.condition;
             if (!condition || !condition.conditions || condition.conditions.length === 0) {
                 return;
@@ -5983,7 +6002,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             });
         });
         return metConditions;
-    }, [formComponents, formValues, isPreviewMode, evaluateThresholdCondition]);
+    }, [localFormComponents, formValues, isPreviewMode, evaluateThresholdCondition]);
     // Validate threshold conditions - check if all met conditions have all mandatory actions completed
     const validateThresholdConditions = useCallback(() => {
         if (isPreviewMode)
@@ -6068,7 +6087,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         let isValid = true;
         setFormSubmitted(true);
         const errors = {};
-        formComponents.forEach(component => {
+        localFormComponents.forEach(component => {
             // Use real-time form values instead of component values
             const currentValue = formValues[component.id] || '';
             // Check if field has a value
@@ -6135,13 +6154,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         });
         setValidationErrors(errors);
         return isValid;
-    }, [formComponents, isPreviewMode, formValues]);
+    }, [localFormComponents, isPreviewMode, formValues]);
     // Handle form submission
     const handleSubmit = useCallback((status = 'Submitted') => {
         setFormSubmitted(true);
         if (!validateAllFields()) {
             // Focus on the first invalid field
-            const firstErrorField = formComponents.find(comp => {
+            const firstErrorField = localFormComponents.find(comp => {
                 const currentValue = formValues[comp.id] || '';
                 // Check if field has a value
                 let hasValue = false;
@@ -6223,13 +6242,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     updatedComponent.children = updateComponentValues(updatedComponent.children);
                 }
                 if (updatedComponent.name === 'table' && updatedComponent.cells) {
-                    updatedComponent.cells = updatedComponent.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
+                    updatedComponent.cells = updatedComponent.cells.map((row) => normalizeTableRow(row).map((cell) => {
                         const updatedCell = { ...cell };
                         if (updatedCell.components) {
                             updatedCell.components = updateComponentValues(updatedCell.components);
                         }
                         return updatedCell;
-                    }) : row);
+                    }));
                 }
                 if (updatedComponent.name === 'datagrid' && updatedComponent.entries) {
                     updatedComponent.entries = updatedComponent.entries.map((entry) => {
@@ -6244,12 +6263,12 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
             });
         };
         // Prepare final form data
-        const finalFormData = updateComponentValues(formComponents);
+        const finalFormData = updateComponentValues(localFormComponents);
         // Also prepare a clean key-value payload
         const payloadValues = { ...formValues, status };
         // Pass both the updated component tree and the flat values object
         onSubmit?.(finalFormData, payloadValues);
-    }, [formComponents, formValues, validateAllFields, onSubmit, componentNotes, componentAttachments]);
+    }, [localFormComponents, formValues, validateAllFields, onSubmit, componentNotes, componentAttachments]);
     // Get preview classes
     const getPreviewClasses = useCallback(() => {
         return {
@@ -6311,7 +6330,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         // Debug: Log if formValue is being shared incorrectly
         if (formValue !== undefined) {
             // Check if this value is being used by multiple components
-            const componentsWithSameValue = formComponents.filter(comp => comp.id !== componentId && formValues[comp.id] === formValue);
+            const componentsWithSameValue = localFormComponents.filter(comp => comp.id !== componentId && formValues[comp.id] === formValue);
             if (componentsWithSameValue.length > 0) {
                 console.warn(`[DfFormPreview] Component ${componentId} shares form value with other components:`, componentsWithSameValue.map(c => c.id));
             }
@@ -6410,9 +6429,9 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             return renderFormComponent(field);
                         }, onNotesChange: (componentId, notes) => {
                             // Handle notes change for table cell components
-                            const updatedComponents = formComponents.map(comp => {
+                            const updatedComponents = localFormComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
+                                    const updatedCells = comp.cells.map((row) => normalizeTableRow(row).map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
                                                 if (cellComp.id === componentId) {
@@ -6429,7 +6448,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                             return { ...cell, components: updatedCellComponents };
                                         }
                                         return cell;
-                                    }) : row);
+                                    }));
                                     return { ...comp, cells: updatedCells };
                                 }
                                 return comp;
@@ -6437,9 +6456,9 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             onFormDataChange?.(updatedComponents);
                         }, onAttachmentChange: (componentId, attachments) => {
                             // Handle attachment change for table cell components
-                            const updatedComponents = formComponents.map(comp => {
+                            const updatedComponents = localFormComponents.map(comp => {
                                 if (comp.id === component.id && comp.cells) {
-                                    const updatedCells = comp.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
+                                    const updatedCells = comp.cells.map((row) => normalizeTableRow(row).map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
                                                 if (cellComp.id === componentId) {
@@ -6456,7 +6475,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                             return { ...cell, components: updatedCellComponents };
                                         }
                                         return cell;
-                                    }) : row);
+                                    }));
                                     return { ...comp, cells: updatedCells };
                                 }
                                 return comp;
@@ -6467,7 +6486,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 return (jsx(DfFormDataGrid, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, onNotesChange: (componentId, notes) => {
                         handleComponentNotesChange(componentId, notes);
                         // Handle notes change for datagrid entry components
-                        const updatedComponents = formComponents.map(comp => {
+                        const updatedComponents = localFormComponents.map(comp => {
                             if (comp.id === component.id && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
                                     if (entry.components) {
@@ -6495,7 +6514,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }, onAttachmentChange: (componentId, attachments) => {
                         handleComponentAttachmentChange(componentId, attachments);
                         // Handle attachment change for datagrid entry components
-                        const updatedComponents = formComponents.map(comp => {
+                        const updatedComponents = localFormComponents.map(comp => {
                             if (comp.id === component.id && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
                                     if (entry.components) {
@@ -6523,8 +6542,8 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }, onValueChange: (change) => {
                         // Handle datagrid value changes (entries updates)
                         if (change.id === component.id && change.value && typeof change.value === 'object' && 'entries' in change.value) {
-                            // Update formComponents with new entries structure
-                            const updatedComponents = formComponents.map(comp => {
+                            // Update localFormComponents with new entries structure
+                            const updatedComponents = localFormComponents.map(comp => {
                                 if (comp.id === component.id) {
                                     return {
                                         ...comp,
@@ -6562,12 +6581,12 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         }
                     }, onEntryAdd: () => {
                         // CRITICAL: Entry has already been added via onValueChange in DfFormDataGrid
-                        // Get the updated component from formComponents (which should have been updated by onValueChange)
-                        const currentComponent = formComponents.find(comp => comp.id === component.id);
+                        // Get the updated component from localFormComponents (which should have been updated by onValueChange)
+                        const currentComponent = localFormComponents.find(comp => comp.id === component.id);
                         if (currentComponent && currentComponent.entries) {
                             // Entry should already be in the component via onValueChange
-                            // Just ensure formComponents is in sync (no-op if already synced)
-                            const updatedComponents = formComponents.map(comp => {
+                            // Just ensure localFormComponents is in sync (no-op if already synced)
+                            const updatedComponents = localFormComponents.map(comp => {
                                 if (comp.id === component.id) {
                                     // Ensure entries are properly structured
                                     return {
@@ -6584,7 +6603,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             setTimeout(() => {
                                 const datagridValue = formValues[component.id];
                                 if (datagridValue && typeof datagridValue === 'object' && 'entries' in datagridValue) {
-                                    const updatedComponents = formComponents.map(comp => {
+                                    const updatedComponents = localFormComponents.map(comp => {
                                         if (comp.id === component.id) {
                                             return {
                                                 ...comp,
@@ -6599,7 +6618,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         }
                     }, onEntryRemove: (entryIndex) => {
                         // Handle entry remove - update form components
-                        const updatedComponents = formComponents.map(comp => {
+                        const updatedComponents = localFormComponents.map(comp => {
                             if (comp.id === component.id && comp.entries) {
                                 const currentEntries = comp.entries || [];
                                 const updatedEntries = currentEntries
@@ -6641,7 +6660,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 return (jsx("div", { className: "form-group", children: jsxs("div", { className: "form-group-label", children: ["Unsupported Component: ", component.name] }) }));
         }
     };
-    return (jsx("div", { className: "form-preview-container", children: jsx("div", { className: "form-preview-wrapper", children: jsxs("div", { className: `form-preview ${Object.entries(getPreviewClasses()).map(([key, value]) => value ? key : '').join(' ')}`, children: [jsx("div", { className: "form-canvas-header" }), formComponents.length === 0 ? (jsx("div", { className: "empty-state", children: jsx("div", { className: "empty-state-card", children: jsx("div", { className: "empty-state-preview-area", children: jsx("span", { className: "empty-state-placeholder", children: "Add components to see the form preview" }) }) }) })) : (jsxs("form", { className: "form-preview-form", onSubmit: (e) => { e.preventDefault(); handleSubmit(); }, children: [(formTitle || formDescription) && (jsxs("div", { className: "form-header", children: [formTitle && (jsx("h1", { className: "form-title", children: formTitle })), formDescription && (jsx("p", { className: "form-description", children: formDescription }))] })), formComponents.map((component) => {
+    return (jsx("div", { className: "form-preview-container", children: jsx("div", { className: "form-preview-wrapper", children: jsxs("div", { className: `form-preview ${Object.entries(getPreviewClasses()).map(([key, value]) => value ? key : '').join(' ')}`, children: [jsx("div", { className: "form-canvas-header" }), localFormComponents.length === 0 ? (jsx("div", { className: "empty-state", children: jsx("div", { className: "empty-state-card", children: jsx("div", { className: "empty-state-preview-area", children: jsx("span", { className: "empty-state-placeholder", children: "Add components to see the form preview" }) }) }) })) : (jsxs("form", { className: "form-preview-form", onSubmit: (e) => { e.preventDefault(); handleSubmit(); }, children: [(formTitle || formDescription) && (jsxs("div", { className: "form-header", children: [formTitle && (jsx("h1", { className: "form-title", children: formTitle })), formDescription && (jsx("p", { className: "form-description", children: formDescription }))] })), localFormComponents.map((component) => {
                                 const basic = component.basic;
                                 const formValue = formValues[component.id];
                                 const isOptionBased = ['select', 'radio', 'checkbox', 'segment'].includes(component.name || '');
@@ -6693,7 +6712,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                                 // Update local state immediately
                                                 setComponentNotes(prev => ({ ...prev, [component.id]: notes }));
                                                 // Handle notes change for regular components - update component.basic.notes
-                                                const updatedComponents = formComponents.map(comp => {
+                                                const updatedComponents = localFormComponents.map(comp => {
                                                     if (comp.id === component.id) {
                                                         return {
                                                             ...comp,
@@ -6710,7 +6729,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                                                 // Update local state immediately
                                                 setComponentAttachments(prev => ({ ...prev, [component.id]: attachments || [] }));
                                                 // Handle attachment change for regular components - update component.basic.attachments
-                                                const updatedComponents = formComponents.map(comp => {
+                                                const updatedComponents = localFormComponents.map(comp => {
                                                     if (comp.id === component.id) {
                                                         return {
                                                             ...comp,
@@ -6762,6 +6781,26 @@ const DfFormComments = ({ comment = '', onSave, placeholder = 'Enter your reason
     return (jsxs("div", { className: `df-form-comments ${className}`, children: [jsxs("div", { className: "df-form-comments__header", children: [jsx("h3", { className: "df-form-comments__title", children: "Comments" }), jsx("button", { className: "df-form-comments__toggle", type: "button", onClick: toggleComments, "aria-expanded": isExpanded, "aria-label": "Toggle comments section", disabled: disabled, children: isExpanded ? (jsx("span", { className: "df-form-comments__toggle-icon", children: "\u25BC" })) : (jsx("span", { className: "df-form-comments__toggle-icon", children: "\u25B6" })) })] }), jsx("div", { className: `df-form-comments__content ${isExpanded ? 'df-form-comments__content--expanded' : ''}`, children: jsx("div", { className: "df-form-comments__input-container", children: jsx("div", { className: "df-form-comments__input-line", children: jsx("input", { type: "text", id: "comment-input", className: "df-form-comments__input", value: currentComment, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, placeholder: placeholder, disabled: disabled }) }) }) })] }));
 };
 
+// Normalize a row from the API format (object with numeric keys) into a proper TableCell array.
+// The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...].
+const normalizeRow = (row) => {
+    if (Array.isArray(row))
+        return row;
+    if (row && typeof row === 'object') {
+        // Convert object with numeric keys to array, sorted by key
+        const keys = Object.keys(row).filter(k => !isNaN(Number(k))).sort((a, b) => Number(a) - Number(b));
+        if (keys.length > 0) {
+            return keys.map(k => row[k]);
+        }
+    }
+    return [];
+};
+// Normalize the entire cells structure from API format to TableCell[][]
+const normalizeCells = (cells) => {
+    if (!cells || !Array.isArray(cells))
+        return [];
+    return cells.map(normalizeRow);
+};
 // Function to ensure table cell components have proper IDs
 const ensureComponentHasId = (component) => {
     if (!component.id) {
@@ -6846,19 +6885,22 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
 };
 const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationErrors = {}, touchedFields = {}, formSubmitted = false, onValueChange, onSelect, isSelected = false, className = '', onTableSelect, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
     const [isCollapsed, setIsCollapsed] = useState(false); // Always start expanded to show drop zones
+    // CRITICAL: Normalize cells from API format (object with numeric keys) to proper 2D array
+    // The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...]
+    const normalizedCells = useMemo(() => normalizeCells(properties.cells), [properties.cells]);
     // Check if table has any components in any cells
-    const hasAnyComponents = properties.cells?.some((row) => Array.isArray(row) && row.some((cell) => cell.components && cell.components.length > 0)) || false;
+    const hasAnyComponents = normalizedCells.some((row) => row.some((cell) => cell.components && cell.components.length > 0)) || false;
     // Initialize and update table cells when rows/columns change
     // Only trigger when cells are truly missing or structure doesn't match rows/columns
     useEffect(() => {
         // Get rows and columns from table properties (where they're actually stored)
         const currentRows = Number(properties.table?.rows || properties.basic?.rows || 3);
         const currentColumns = Number(properties.table?.columns || properties.basic?.columns || 3);
-        const currentCells = properties.cells || [];
+        const currentCells = normalizedCells;
         // Check if we need to update the table structure
         const needsUpdate = currentCells.length === 0 ||
             currentCells.length !== currentRows ||
-            (currentCells.length > 0 && Array.isArray(currentCells[0]) && currentCells[0].length !== currentColumns);
+            (currentCells.length > 0 && currentCells[0].length !== currentColumns);
         if (needsUpdate) {
             const newCells = [];
             for (let row = 0; row < currentRows; row++) {
@@ -6867,7 +6909,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                     const cellId = `cell-${row}-${col}`;
                     // Try to preserve existing components if the cell exists
                     let existingComponents = [];
-                    if (Array.isArray(currentCells[row]) && currentCells[row][col]) {
+                    if (currentCells[row] && currentCells[row][col]) {
                         existingComponents = (currentCells[row][col].components || []).map(ensureComponentHasId);
                     }
                     rowCells.push({
@@ -6885,7 +6927,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                 value: { ...properties, cells: newCells }
             });
         }
-    }, [properties.table?.rows, properties.table?.columns, properties.basic?.rows, properties.basic?.columns, properties.cells?.length, id, onValueChange]);
+    }, [properties.table?.rows, properties.table?.columns, properties.basic?.rows, properties.basic?.columns, normalizedCells, id, onValueChange]);
     const handleTableClick = useCallback((event) => {
         event.stopPropagation();
         onSelect?.();
@@ -6902,7 +6944,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
     const handleComponentDelete = useCallback((component, event) => {
         event.stopPropagation();
         // Find and remove the component from the table cell
-        const updatedCells = properties.cells.map((row) => Array.isArray(row) ? row.map((cell) => {
+        const updatedCells = normalizedCells.map((row) => row.map((cell) => {
             if (cell.components && cell.components.some((comp) => comp.id === component.id)) {
                 const filteredComponents = cell.components.filter((comp) => comp.id !== component.id);
                 return {
@@ -6911,7 +6953,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                 };
             }
             return cell;
-        }) : row);
+        }));
         // Update the table with the modified cells
         if (onValueChange) {
             onValueChange({
@@ -6921,13 +6963,13 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
         }
         // Don't call parent delete handler for table cell components
         // The parent delete handler is for deleting entire fields, not components within table cells
-    }, [onComponentDelete, properties, onValueChange, id]);
+    }, [onComponentDelete, normalizedCells, properties, onValueChange, id]);
     // CRITICAL FIX: Ensure all table cell components have proper IDs with table and cell position
     // Use useMemo to prevent ID regeneration on every render
     const cellsWithIds = useMemo(() => {
-        if (!properties.cells)
+        if (normalizedCells.length === 0)
             return [];
-        return properties.cells.map((row, rowIndex) => Array.isArray(row) ? row.map((cell, cellIndex) => ({
+        return normalizedCells.map((row, rowIndex) => row.map((cell, cellIndex) => ({
             ...cell,
             components: (cell.components && Array.isArray(cell.components))
                 ? cell.components.map((comp, compIndex) => {
@@ -6946,8 +6988,8 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                     };
                 })
                 : []
-        })) : []);
-    }, [properties.cells, id]); // Only recalculate if cells or table ID changes
+        })));
+    }, [normalizedCells, id]); // Only recalculate if cells or table ID changes
     // CRITICAL FIX: Update the parent component with the cells that have proper IDs
     // Skip this in package to prevent flickering - cells are managed by parent
     // useEffect(() => {