@openg2p/registry-widgets 0.1.0 → 0.1.1

package/dist/index.js

@@ -1594,30 +1594,36 @@ const PanelRenderer = ({ panel, apiAdapter, schemaData, onValueChange, isEditMod
     const nestedPanels = panel.panels || [];
     const widgets = panel.widgets || [];
     // For horizontal orientation, use grid for equal-width columns
-    // Dynamic grid based on number of nested panels
+    // Dynamic grid based on number of nested panels and their column spans
     // For vertical orientation, use flex column
     const getContainerClassAndStyle = () => {
         if (orientation === 'horizontal' && nestedPanels.length > 0) {
-            const numPanels = nestedPanels.length;
-            // Use predefined grid classes based on number of panels (1-5)
+            // Calculate total columns needed based on panel column spans
+            // Sum up all column spans, or use panel count if no spans specified
+            let totalColumns = 0;
+            nestedPanels.forEach(panel => {
+                const columnSpan = panel['panel-column-span'] || 1;
+                totalColumns += columnSpan;
+            });
+            // Ensure at least as many columns as panels (for panels without explicit span)
+            totalColumns = Math.max(totalColumns, nestedPanels.length);
+            // Use predefined grid classes for common cases (1-5)
             // For more than 5, use inline style
             // Removed gap to allow borders to show properly
-            console.log('numPanels', numPanels);
-            if (numPanels <= 5) {
-                const gridClasses = {
-                    1: 'grid grid-cols-1',
-                    2: 'grid grid-cols-2',
-                    3: 'grid grid-cols-3',
-                    4: 'grid grid-cols-4',
-                    5: 'grid grid-cols-5',
+            if (totalColumns <= 5) {
+                // For grid with column spans, we need to use inline styles to set minmax
+                // This ensures each column is at least 200px wide
+                return {
+                    className: 'grid',
+                    style: { gridTemplateColumns: `repeat(${totalColumns}, minmax(200px, 1fr))` },
                 };
-                return { className: gridClasses[numPanels] || 'grid', style: {} };
             }
             else {
-                // For more than 5 panels, use inline style
+                // For more than 5 columns, use inline style
+                // Use minmax(200px, 1fr) to ensure minimum 200px per column
                 return {
                     className: 'grid',
-                    style: { gridTemplateColumns: `repeat(${numPanels}, minmax(0, 1fr))` },
+                    style: { gridTemplateColumns: `repeat(${totalColumns}, minmax(200px, 1fr))` },
                 };
             }
         }
@@ -1637,15 +1643,44 @@ const PanelRenderer = ({ panel, apiAdapter, schemaData, onValueChange, isEditMod
         }, children: [nestedPanels.map((nestedPanel, index) => {
                 const isLastPanel = index === nestedPanels.length - 1;
                 const isFirstPanel = index === 0;
-                const horizontalStyle = orientation === 'horizontal'
-                    ? {
-                        minWidth: '200px',
-                        paddingRight: !isLastPanel ? '40px' : undefined,
-                        paddingLeft: !isFirstPanel ? '40px' : undefined,
-                        position: 'relative',
+                const nestedOrientation = nestedPanel['panel-orientation'] || 'vertical';
+                const columnSpan = nestedPanel['panel-column-span'];
+                // Calculate style for nested panel based on orientation and column span
+                const getNestedPanelStyle = () => {
+                    if (orientation === 'horizontal') {
+                        // When nested inside horizontal panel, check for column span
+                        const baseStyle = {
+                            minWidth: '200px',
+                            paddingRight: !isLastPanel ? '40px' : undefined,
+                            paddingLeft: !isFirstPanel ? '40px' : undefined,
+                            position: 'relative',
+                        };
+                        // If vertical panel has column span, use CSS grid-column-span
+                        if (nestedOrientation === 'vertical' && columnSpan && columnSpan > 1) {
+                            return {
+                                ...baseStyle,
+                                gridColumn: `span ${columnSpan}`,
+                                minWidth: 'auto', // Remove minWidth constraint when spanning columns
+                            };
+                        }
+                        return baseStyle;
+                    }
+                    else {
+                        // Vertical panel nested in vertical panel
+                        if (columnSpan && columnSpan > 1) {
+                            // If column span is specified, calculate width based on 200px per column
+                            const width = columnSpan * 200;
+                            return {
+                                width: `${width}px`,
+                                maxWidth: '100%',
+                                flexShrink: 0,
+                            };
+                        }
+                        return { width: '100%' };
                     }
-                    : { width: '100%' };
-                return (jsxRuntimeExports.jsx(React.Fragment, { children: jsxRuntimeExports.jsxs("div", { className: orientation === 'horizontal' ? 'min-w-200 relative' : 'w-full', style: horizontalStyle, children: [jsxRuntimeExports.jsx(PanelRenderer, { panel: nestedPanel, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange, isEditMode: isEditMode }), orientation === 'horizontal' && !isLastPanel && (jsxRuntimeExports.jsx("div", { style: {
+                };
+                const nestedPanelStyle = getNestedPanelStyle();
+                return (jsxRuntimeExports.jsx(React.Fragment, { children: jsxRuntimeExports.jsxs("div", { className: orientation === 'horizontal' ? 'min-w-200 relative' : 'w-full', style: nestedPanelStyle, "data-panel-column-span": columnSpan || undefined, children: [jsxRuntimeExports.jsx(PanelRenderer, { panel: nestedPanel, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange, isEditMode: isEditMode }), orientation === 'horizontal' && !isLastPanel && (jsxRuntimeExports.jsx("div", { style: {
                                     position: 'absolute',
                                     right: 0,
                                     top: 0,
@@ -2247,6 +2282,104 @@ const FileInputWidget = ({ config }) => {
                 } }, `modal-${previewFile ? (previewFile instanceof File ? previewFile.name : previewFile) : 'none'}`)] }));
 };
 
+/**
+ * Namespace a data path by adding a namespace prefix
+ */
+const namespaceDataPath = (dataPath, namespace) => {
+    if (!dataPath)
+        return dataPath;
+    if (typeof dataPath === 'string') {
+        // Add namespace prefix to the data path
+        return `${namespace}.${dataPath}`;
+    }
+    // Multi-path: namespace each path
+    const namespaced = {};
+    for (const [key, path] of Object.entries(dataPath)) {
+        namespaced[key] = `${namespace}.${path}`;
+    }
+    return namespaced;
+};
+/**
+ * Recursively namespace widget IDs and data paths in a widget configuration
+ * This ensures unique widget IDs and data paths when the same section is rendered multiple times
+ */
+const namespaceWidgetConfig = (widgetConfig, namespace) => {
+    const namespaced = { ...widgetConfig };
+    // Namespace the widget-id
+    if (namespaced['widget-id']) {
+        namespaced['widget-id'] = `${namespace}__${namespaced['widget-id']}`;
+    }
+    // Namespace the widget-data-path to ensure values are stored separately
+    if (namespaced['widget-data-path']) {
+        namespaced['widget-data-path'] = namespaceDataPath(namespaced['widget-data-path'], namespace);
+    }
+    // Recursively namespace nested widgets (for layout widgets)
+    if (namespaced.widgets && Array.isArray(namespaced.widgets)) {
+        namespaced.widgets = namespaced.widgets.map((widget) => namespaceWidgetConfig(widget, namespace));
+    }
+    // Namespace widget-item (for array/group widgets)
+    if (namespaced['widget-item']) {
+        namespaced['widget-item'] = namespaceWidgetConfig(namespaced['widget-item'], namespace);
+    }
+    // Namespace widget-data-columns (for table widgets)
+    if (namespaced['widget-data-columns'] && Array.isArray(namespaced['widget-data-columns'])) {
+        namespaced['widget-data-columns'] = namespaced['widget-data-columns'].map((column) => {
+            const namespacedColumn = { ...column };
+            // Namespace column data paths if they exist (columns only support string paths, not multi-path)
+            if (namespacedColumn['widget-data-path'] && typeof namespacedColumn['widget-data-path'] === 'string') {
+                namespacedColumn['widget-data-path'] = namespaceDataPath(namespacedColumn['widget-data-path'], namespace); // Safe cast since we checked it's a string
+            }
+            return namespacedColumn;
+        });
+    }
+    return namespaced;
+};
+/**
+ * Recursively namespace widget IDs in a panel configuration
+ */
+const namespacePanelConfig = (panel, namespace) => {
+    const namespaced = { ...panel };
+    // Recursively namespace nested panels
+    if (namespaced.panels && Array.isArray(namespaced.panels)) {
+        namespaced.panels = namespaced.panels.map((p) => namespacePanelConfig(p, namespace));
+    }
+    // Namespace widgets in panel
+    if (namespaced.widgets && Array.isArray(namespaced.widgets)) {
+        namespaced.widgets = namespaced.widgets.map((widget) => namespaceWidgetConfig(widget, namespace));
+    }
+    return namespaced;
+};
+/**
+ * Namespace widget IDs and data paths in a section configuration
+ * This ensures unique widget IDs and data paths when the same section is rendered multiple times
+ * (e.g., in CRView mode showing old and new records side by side)
+ *
+ * @param section - Section configuration to namespace
+ * @param namespace - Namespace prefix to add to widget IDs and data paths (e.g., "old", "new", "instance-1")
+ * @returns Namespaced section configuration
+ */
+const namespaceSectionConfig = (section, namespace) => {
+    const namespaced = { ...section };
+    // Namespace the section-id as well to ensure uniqueness
+    if (namespaced['section-id']) {
+        namespaced['section-id'] = `${namespace}__${namespaced['section-id']}`;
+    }
+    // Recursively namespace panels
+    if (namespaced.panels && Array.isArray(namespaced.panels)) {
+        namespaced.panels = namespaced.panels.map((panel) => namespacePanelConfig(panel, namespace));
+    }
+    // Namespace supporting documents data paths
+    if (namespaced['section-supporting-documents'] && Array.isArray(namespaced['section-supporting-documents'])) {
+        namespaced['section-supporting-documents'] = namespaced['section-supporting-documents'].map((doc) => ({
+            ...doc,
+            'document-data-path': doc['document-data-path']
+                ? `${namespace}.${doc['document-data-path']}`
+                : doc['document-data-path'],
+        }));
+    }
+    return namespaced;
+};
+
 /**
  * Renders a section with its panels
  *
@@ -2255,7 +2388,7 @@ const FileInputWidget = ({ config }) => {
  * - Panels wrap when they exceed available width
  * - Sections can sit side-by-side if there's space
  */
-const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', }) => {
+const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, }) => {
     const { translateConfig, translate } = useWidgetTranslation();
     const { schemaData: contextSchemaData } = useWidgetContext();
     const store = reactRedux.useStore();
@@ -2263,6 +2396,49 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
     // Get CRView data from schemaData (prefer prop over context, then Redux store)
     const currentSchemaData = schemaData || contextSchemaData || {};
     const storeValues = reactRedux.useSelector((state) => state.widget?.values || {});
+    // Namespace the section if namespace is provided
+    // This ensures unique widget IDs when the same section is rendered multiple times
+    const namespacedSection = React.useMemo(() => {
+        if (namespace) {
+            return namespaceSectionConfig(section, namespace);
+        }
+        return section;
+    }, [section, namespace]);
+    // Create namespaced schemaData if namespace is provided
+    // This ensures widgets can read initial values from schemaData at namespaced paths
+    const namespacedSchemaData = React.useMemo(() => {
+        if (!namespace || !currentSchemaData) {
+            return schemaData;
+        }
+        // Create a namespaced version of schemaData by copying values to namespaced paths
+        const namespaced = { ...currentSchemaData };
+        // Copy all top-level keys to namespaced paths
+        Object.keys(currentSchemaData).forEach(key => {
+            const namespacedKey = `${namespace}.${key}`;
+            if (!(namespacedKey in namespaced)) {
+                namespaced[namespacedKey] = currentSchemaData[key];
+            }
+        });
+        // Also handle nested objects - copy nested values to namespaced paths
+        const copyNestedValues = (obj, prefix = '') => {
+            if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+                Object.keys(obj).forEach(key => {
+                    const fullPath = prefix ? `${prefix}.${key}` : key;
+                    const namespacedPath = `${namespace}.${fullPath}`;
+                    if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
+                        copyNestedValues(obj[key], fullPath);
+                        // Also set the nested object at the namespaced path
+                        setValueByPath(namespaced, namespacedPath, obj[key]);
+                    }
+                    else {
+                        setValueByPath(namespaced, namespacedPath, obj[key]);
+                    }
+                });
+            }
+        };
+        copyNestedValues(currentSchemaData);
+        return namespaced;
+    }, [namespace, schemaData, currentSchemaData]);
     const crViewData = React.useMemo(() => {
         if (mode !== 'CRView')
             return null;
@@ -2281,11 +2457,14 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
         }
         return result;
     }, [mode, currentSchemaData, storeValues]);
-    const sectionId = section['section-id'];
+    // Use namespaced section for rendering
+    const sectionToRender = namespacedSection;
+    const sectionId = sectionToRender['section-id'];
     const gridId = `section-panels-${sectionId}`;
     const sectionClassId = `section-${sectionId}`;
     // Recursively count all vertical panels, especially those nested inside horizontal panels
     // Typically: horizontal panels at first level contain vertical panels at second level
+    // Accounts for panel-column-span: a panel with column-span 3 counts as 3 columns
     const countVerticalPanels = (panels) => {
         let count = 0;
         for (const panel of panels) {
@@ -2295,8 +2474,9 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
                 count += countVerticalPanels(panel.panels);
             }
             else if (orientation === 'vertical') {
-                // Count this vertical panel
-                count += 1;
+                // Count this vertical panel, accounting for column span
+                const columnSpan = panel['panel-column-span'] || 1;
+                count += columnSpan;
                 // Also recursively count vertical panels nested inside this vertical panel
                 if (panel.panels && panel.panels.length > 0) {
                     count += countVerticalPanels(panel.panels);
@@ -2343,9 +2523,9 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
         }
         return null;
     };
-    const hasTableWidget = checkForTableWidget(section.panels);
-    const tableWidgetColumnSpan = getTableWidgetColumnSpan(section.panels);
-    const verticalPanelsCount = countVerticalPanels(section.panels);
+    const hasTableWidget = checkForTableWidget(sectionToRender.panels);
+    const tableWidgetColumnSpan = getTableWidgetColumnSpan(sectionToRender.panels);
+    const verticalPanelsCount = countVerticalPanels(sectionToRender.panels);
     // If section contains a table widget with explicit column span, use it
     // Otherwise, if it has a table widget, ensure it spans at least 2 columns
     // Otherwise, use the vertical panel count
@@ -2355,7 +2535,7 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
     // Check if table widget has explicit column span (not default)
     const hasExplicitTableSpan = tableWidgetColumnSpan !== null;
     // Supporting documents configuration
-    const supportingDocuments = section['section-supporting-documents'] || [];
+    const supportingDocuments = sectionToRender['section-supporting-documents'] || [];
     const hasSupportingDocuments = supportingDocuments.length > 0;
     // Edit mode state
     const [isEditMode, setIsEditMode] = React.useState(false);
@@ -2393,7 +2573,7 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
     }, [isEditMode]);
     // Recursively modify panels to set readonly based on edit mode
     const makePanelsEditable = (panels, editable) => {
-        const sectionEditable = section['section-editable'] === true;
+        const sectionEditable = sectionToRender['section-editable'] === true;
         return panels.map(panel => {
             const modifiedPanel = {
                 ...panel,
@@ -2416,10 +2596,10 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
     const editableSection = React.useMemo(() => {
         // Always apply readonly/editable state based on edit mode
         return {
-            ...section,
-            panels: makePanelsEditable(section.panels, isEditMode),
+            ...sectionToRender,
+            panels: makePanelsEditable(sectionToRender.panels, isEditMode),
         };
-    }, [section, isEditMode]);
+    }, [sectionToRender, isEditMode]);
     // Handle edit button click
     const handleEdit = () => {
         // Capture height BEFORE entering edit mode to preserve space
@@ -2486,9 +2666,9 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
                         width: `${editSectionPosition.width}px`,
                         maxHeight: '90vh',
                         overflowY: 'auto',
-                    }, children: [section['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { fontFamily: 'Roboto, sans-serif', marginTop: '35px' }, children: translateConfig(section['section-title']) })), jsxRuntimeExports.jsxs("div", { id: editGridId, className: "section-panels", children: [editableSection.panels.map((panel, index) => {
+                    }, children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { fontFamily: 'Roboto, sans-serif', marginTop: '35px' }, children: translateConfig(sectionToRender['section-title']) })), jsxRuntimeExports.jsxs("div", { id: editGridId, className: "section-panels", children: [editableSection.panels.map((panel, index) => {
                                     const isLastPanel = index === editableSection.panels.length - 1;
-                                    return (jsxRuntimeExports.jsx("div", { className: `panel-wrapper ${isLastPanel ? 'last-panel-wrapper' : ''}`, children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange, isEditMode: true }) }, panel['panel-id'] || `section-panel-${index}`));
+                                    return (jsxRuntimeExports.jsx("div", { className: `panel-wrapper ${isLastPanel ? 'last-panel-wrapper' : ''}`, children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, apiAdapter: apiAdapter, schemaData: namespacedSchemaData, onValueChange: onValueChange, isEditMode: true }) }, panel['panel-id'] || `section-panel-${index}`));
                                 }), hasSupportingDocuments && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "my-4 w-full", style: { height: '1px', backgroundColor: '#F2BA1A', border: 'none' } }), jsxRuntimeExports.jsxs("div", { className: "supporting-documents-container", children: [jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setIsDocumentsExpanded(!isDocumentsExpanded), className: "supporting-documents-title-button w-full flex items-center text-left", children: [jsxRuntimeExports.jsx("span", { className: "font-semibold", style: { fontFamily: 'Roboto, sans-serif', fontSize: '16px' }, children: translate('common.supportedDocuments') || 'Supported Documents' }), jsxRuntimeExports.jsx("svg", { className: `w-5 h-5 text-[#ED7C22] transition-transform ml-2 ${isDocumentsExpanded ? 'rotate-180' : ''}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), isDocumentsExpanded && (jsxRuntimeExports.jsx("div", { className: "supporting-documents-grid mt-4", children: supportingDocuments.map((doc, index) => {
                                                         const docConfig = createDocumentWidgetConfig(doc, sectionId, index);
                                                         return (jsxRuntimeExports.jsx("div", { className: "supporting-document-item", children: jsxRuntimeExports.jsx(FileInputWidget, { config: docConfig }) }, `${sectionId}-doc-${index}`));
@@ -2506,27 +2686,62 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
         });
         return widgets;
     };
-    const buildSectionSnapshot = (widgets, sourceData) => {
+    const trackSectionChages = (widgets, sourceData, useNamespacedPaths = false) => {
         const snapshot = {};
+        let hasTable = false;
+        const recordId = Object.keys(sourceData)[0];
         widgets.forEach(widget => {
-            const dataPath = widget['widget-data-path'];
-            if (!dataPath)
+            const originalDataPath = widget['widget-data-path'];
+            if (!originalDataPath)
                 return;
+            if (widget['widget-type'] === 'table' || widget['widget-type'] === 'simple-table') {
+                hasTable = true;
+            }
+            // If namespace was used and we're reading from store, use namespaced paths
+            useNamespacedPaths && namespace && originalDataPath
+                ? (typeof originalDataPath === 'string'
+                    ? `${namespace}.${originalDataPath}`
+                    : Object.fromEntries(Object.entries(originalDataPath).map(([key, path]) => [key, `${namespace}.${path}`])))
+                : originalDataPath;
+            // Always store snapshot using original paths (for change tracking)
             // Handle multi-path (object) or single path (string)
-            if (typeof dataPath === 'object') {
-                // Multi-path: store each path separately
-                Object.entries(dataPath).forEach(([key, path]) => {
+            if (typeof originalDataPath === 'object') {
+                // Multi-path: store each path separately using original paths
+                Object.entries(originalDataPath).forEach(([key, path]) => {
                     if (typeof path === 'string') {
-                        snapshot[path] = getValueByPath(sourceData, path);
+                        // Read from source using namespaced path if needed
+                        const readPath = useNamespacedPaths && namespace ? `${namespace}.${path}` : path;
+                        snapshot[path] = getValueByPath(sourceData, readPath);
                     }
                 });
             }
-            else if (typeof dataPath === 'string') {
-                snapshot[dataPath] = getValueByPath(sourceData, dataPath);
+            else if (typeof originalDataPath === 'string') {
+                // Read from source using namespaced path if needed
+                const readPath = useNamespacedPaths && namespace ? `${namespace}.${originalDataPath}` : originalDataPath;
+                snapshot[originalDataPath] = getValueByPath(sourceData, readPath);
             }
         });
-        return snapshot;
+        if (hasTable === false) {
+            const cleanedSnapshot = {};
+            Object.entries(snapshot).forEach(([key, value]) => {
+                const removedFirstLevelPath = key.includes('.')
+                    ? key.split('.').slice(1).join('.')
+                    : key;
+                cleanedSnapshot[removedFirstLevelPath] = value;
+            });
+            return [
+                { ...sourceData[recordId],
+                    ...cleanedSnapshot,
+                    edit_action: "UPDATE"
+                }
+            ];
+        }
+        const recordEntry = Object.entries(snapshot).find(([key, value]) => key.endsWith('.records') && Array.isArray(value));
+        return recordEntry ? recordEntry[1] : snapshot;
     };
+    // Get original section (without namespace) for building snapshots
+    // This ensures we use the original data paths when saving
+    const originalSection = section;
     // Handle save button click
     const handleSave = async () => {
         if (!store || !onSectionSave) {
@@ -2534,31 +2749,37 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
             setIsEditMode(false);
             return;
         }
-        const sectionWidgets = collectWidgets(section.panels);
+        // Use original section (without namespace) for collecting widgets
+        // This ensures we use the original widget IDs and data paths
+        const sectionWidgets = collectWidgets(originalSection.panels);
         const currentState = store.getState().widget;
         const currentSchemaData = currentState.values || {};
+        // schema data before section change
         const oldSchemaData = schemaData || contextSchemaData;
-        const oldSectionValue = buildSectionSnapshot(sectionWidgets, oldSchemaData);
-        const newSectionValue = buildSectionSnapshot(sectionWidgets, currentSchemaData);
+        // schema data after section change
+        const newSchemaData = trackSectionChages(sectionWidgets, currentSchemaData);
         // Include supporting documents in the snapshot if they exist
+        const sectionFiles = [];
         if (hasSupportingDocuments) {
-            supportingDocuments.forEach((doc, index) => {
-                const dataPath = doc['document-data-path'];
-                const oldValue = getValueByPath(oldSchemaData, dataPath);
-                const newValue = getValueByPath(currentSchemaData, dataPath);
-                oldSectionValue[dataPath] = oldValue;
-                newSectionValue[dataPath] = newValue;
+            // Use original section's supporting documents to get original data paths
+            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
+            originalSupportingDocuments.forEach((doc) => {
+                const originalDataPath = doc['document-data-path'];
+                // Read new value from store (with namespace if used)
+                const storeDataPath = namespace && originalDataPath
+                    ? `${namespace}.${originalDataPath}`
+                    : originalDataPath;
+                sectionFiles.push(getValueByPath(currentSchemaData, storeDataPath));
             });
         }
-        if (JSON.stringify(oldSectionValue) !== JSON.stringify(newSectionValue)) {
-            const changes = {
-                section_id: sectionId,
-                section_schema: section,
-                old_section_value: oldSectionValue,
-                new_section_value: newSectionValue,
-            };
+        if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
             try {
-                await onSectionSave(changes);
+                const sectionchanges = {
+                    section_id: originalSection['section-id'],
+                    records: [...newSchemaData],
+                    files: [...sectionFiles]
+                };
+                await onSectionSave(sectionchanges);
             }
             catch (error) {
                 console.error('Section Changes Save failed', error);
@@ -2569,40 +2790,58 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
     // Handle cancel button click
     const handleCancel = () => {
         // Revert values in store to original schema data
-        const sectionWidgets = collectWidgets(section.panels);
+        // Use original section (without namespace) for collecting widgets
+        const sectionWidgets = collectWidgets(originalSection.panels);
         const oldSchemaData = schemaData || contextSchemaData;
         const currentStoreValues = store.getState().widget.values;
         let newStoreValues = currentStoreValues;
         sectionWidgets.forEach(widget => {
-            const widgetId = widget['widget-id'];
-            const dataPath = widget['widget-data-path'];
-            if (widgetId && dataPath) {
+            const originalWidgetId = widget['widget-id'];
+            // If namespace was used, we need to use namespaced widget ID and data path
+            const namespacedWidgetId = namespace ? `${namespace}__${originalWidgetId}` : originalWidgetId;
+            const widgetId = namespacedWidgetId;
+            const originalDataPath = widget['widget-data-path'];
+            // If namespace was used, data path in store is namespaced, but we read from original schema using original path
+            const storeDataPath = namespace && originalDataPath
+                ? (typeof originalDataPath === 'string'
+                    ? `${namespace}.${originalDataPath}`
+                    : Object.fromEntries(Object.entries(originalDataPath).map(([key, path]) => [key, `${namespace}.${path}`])))
+                : originalDataPath;
+            if (widgetId && originalDataPath) {
                 // Handle multi-path (object) or single path (string)
+                // Read from original schema data using original paths
                 let oldValue;
-                if (typeof dataPath === 'object') {
+                if (typeof originalDataPath === 'object') {
                     // Multi-path: get values for each path
                     oldValue = {};
-                    Object.entries(dataPath).forEach(([key, path]) => {
+                    Object.entries(originalDataPath).forEach(([key, path]) => {
                         if (typeof path === 'string') {
                             oldValue[key] = getValueByPath(oldSchemaData, path);
                         }
                     });
                 }
-                else if (typeof dataPath === 'string') {
-                    oldValue = getValueByPath(oldSchemaData, dataPath);
+                else if (typeof originalDataPath === 'string') {
+                    oldValue = getValueByPath(oldSchemaData, originalDataPath);
                 }
+                // Set in store using namespaced data path (if namespace was used)
                 if (oldValue !== undefined) {
-                    newStoreValues = setWidgetValue(newStoreValues, dataPath, widgetId, oldValue);
+                    newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
                 }
             }
         });
         // Also revert supporting documents if any
         if (hasSupportingDocuments) {
-            supportingDocuments.forEach((doc, index) => {
+            // Use original section's supporting documents to get original data paths
+            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
+            originalSupportingDocuments.forEach((doc, index) => {
                 const widgetId = `supporting-doc-${sectionId}-${index}`;
-                const dataPath = doc['document-data-path'];
-                const oldValue = getValueByPath(oldSchemaData, dataPath);
-                newStoreValues = setWidgetValue(newStoreValues, dataPath, widgetId, oldValue);
+                const originalDataPath = doc['document-data-path'];
+                // If namespace was used, data path in store is namespaced
+                const storeDataPath = namespace && originalDataPath
+                    ? `${namespace}.${originalDataPath}`
+                    : originalDataPath;
+                const oldValue = getValueByPath(oldSchemaData, originalDataPath);
+                newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
             });
         }
         if (newStoreValues !== currentStoreValues) {
@@ -2617,11 +2856,13 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
             (documentType === 'image' ? 'image/*' :
                 documentType === 'pdf' ? '.pdf' :
                     '*/*');
+        // Use the namespaced section ID for widget ID to ensure uniqueness
+        const widgetId = `supporting-doc-${sectionId}-${index}`;
         return {
             widget: 'file',
             'widget-type': 'input',
             'widget-label': doc['document-label'] || doc['document-data-path'] || `Document ${index + 1}`,
-            'widget-id': `supporting-doc-${sectionId}-${index}`,
+            'widget-id': widgetId,
             'widget-data-path': doc['document-data-path'],
             'widget-required': doc['document-required'] || false,
             'widget-readonly': false,
@@ -2777,7 +3018,7 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
                         minHeight: 'auto',
                         height: 'auto'
                     }),
-                }, children: [section['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { marginTop: '35px' }, children: translateConfig(section['section-title']) })), jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: mode === 'RegistryView' && hideEditButton ? { paddingBottom: '40px' } : {}, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange }) }, panel['panel-id'] || `section-panel-${index}`))), mode === 'CRView' && crViewData && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: '20px', marginBottom: '0px' } }), jsxRuntimeExports.jsxs("div", { className: "cr-view-container", style: {
+                }, children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { marginTop: '35px' }, children: translateConfig(sectionToRender['section-title']) })), jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: mode === 'RegistryView' && hideEditButton ? { paddingBottom: '40px' } : {}, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, apiAdapter: apiAdapter, schemaData: namespacedSchemaData, onValueChange: onValueChange }) }, panel['panel-id'] || `section-panel-${index}`))), mode === 'CRView' && crViewData && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: '20px', marginBottom: '0px' } }), jsxRuntimeExports.jsxs("div", { className: "cr-view-container", style: {
                                             marginTop: '20px',
                                             paddingBottom: '30px',
                                             display: 'flex',
@@ -2881,6 +3122,7 @@ const getTableWidgetColumnSpan = (panels) => {
 /**
  * Recursively count all vertical panels in a section
  * Handles nested structure: horizontal panels containing vertical panels
+ * Accounts for panel-column-span: a panel with column-span 3 counts as 3 columns
  */
 const countVerticalPanels = (panels) => {
     let count = 0;
@@ -2891,8 +3133,9 @@ const countVerticalPanels = (panels) => {
             count += countVerticalPanels(panel.panels);
         }
         else if (orientation === 'vertical') {
-            // Count this vertical panel
-            count += 1;
+            // Count this vertical panel, accounting for column span
+            const columnSpan = panel['panel-column-span'] || 1;
+            count += columnSpan;
             // Also recursively count vertical panels nested inside this vertical panel
             if (panel.panels && panel.panels.length > 0) {
                 count += countVerticalPanels(panel.panels);
@@ -2911,7 +3154,7 @@ const countVerticalPanels = (panels) => {
  * - All sections align to the same grid, ensuring right-side alignment
  * - Handles nested structure: multiple horizontal panels, each with multiple vertical panels
  */
-const SectionsContainer = ({ sections, apiAdapter, schemaData, onValueChange, className = '', onSectionSave, hideEditButton = false, mode = 'RegistryView', }) => {
+const SectionsContainer = ({ sections, apiAdapter, schemaData, onValueChange, className = '', onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, }) => {
     // Find the maximum number of vertical panels across all sections
     // This determines the grid size (minimum 3 columns)
     // Also account for table widgets and their explicit column spans
@@ -2953,10 +3196,14 @@ const SectionsContainer = ({ sections, apiAdapter, schemaData, onValueChange, cl
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
           }
         }
-      ` }), jsxRuntimeExports.jsx("div", { id: containerId, className: `sections-container ${className}`, children: sections.map((section) => {
+      ` }), jsxRuntimeExports.jsx("div", { id: containerId, className: `sections-container ${className}`, children: sections.map((section, index) => {
+                    // Determine namespace for this section
+                    const sectionNamespace = namespace
+                        ? (typeof namespace === 'string' ? namespace : namespace(section['section-id'], index))
+                        : undefined;
                     // Check if section has explicit column span
                     if (section['section-column-span']) {
-                        return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: section['section-column-span'], onSectionSave: onSectionSave, hideEditButton: hideEditButton, mode: mode }, section['section-id']));
+                        return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: section['section-column-span'], onSectionSave: onSectionSave, hideEditButton: hideEditButton, mode: mode, namespace: sectionNamespace }, section['section-id']));
                     }
                     const verticalPanelsCount = countVerticalPanels(section.panels);
                     const tableWidgetColumnSpan = getTableWidgetColumnSpan(section.panels);
@@ -2967,7 +3214,7 @@ const SectionsContainer = ({ sections, apiAdapter, schemaData, onValueChange, cl
                     const columnSpan = tableWidgetColumnSpan !== null
                         ? tableWidgetColumnSpan
                         : (containsTable ? Math.max(verticalPanelsCount, 2) : verticalPanelsCount);
-                    return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: columnSpan, onSectionSave: onSectionSave, hideEditButton: hideEditButton, mode: mode }, section['section-id']));
+                    return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: columnSpan, onSectionSave: onSectionSave, hideEditButton: hideEditButton, mode: mode, namespace: sectionNamespace }, section['section-id']));
                 }) })] }));
 };
 
@@ -4401,6 +4648,14 @@ const DateTimeInputWidget = ({ config }) => {
 const SelectWidget = ({ config }) => {
     const { value, error, touched, isEnabled, onChange, onBlur, dataSourceOptions, loading, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
+    // For readonly mode, render as display text showing only the selected label
+    if (widgetConfig['widget-readonly']) {
+        const label = translateConfig(widgetConfig['widget-label']);
+        // Find the selected option's label
+        const selectedOption = dataSourceOptions.find((option) => option.value === value);
+        const displayValue = selectedOption ? selectedOption.label : (value || '-');
+        return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] SelectDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", children: displayValue }) })] }));
+    }
     return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("select", { value: value || '', onChange: (e) => onChange(e.target.value), onBlur: onBlur, disabled: !isEnabled || loading || widgetConfig['widget-readonly'], className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (!value || value === ''))
                                 ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
                                 : 'border-gray-300'} ${!isEnabled || loading || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']), children: [jsxRuntimeExports.jsx("option", { value: "", children: translate('common.select') }), dataSourceOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value)))] }), loading && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 mt-1", children: translate('common.loadingOptions') })), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
@@ -4426,54 +4681,87 @@ const RadioWidget = ({ config }) => {
         }
         return options;
     }, [dataSourceOptions, sortOptions]);
-    // Handle value change
-    const handleChange = React.useCallback((optionValue) => {
-        onChange(optionValue);
+    // Handle radio button change - simple and direct
+    React.useCallback((selectedValue) => {
+        onChange(selectedValue);
     }, [onChange]);
-    // Handle unset (clear selection) - only if optional
-    const handleUnset = React.useCallback(() => {
-        if (allowUnset) {
-            onChange(null);
-        }
-    }, [allowUnset, onChange]);
-    // Determine current value (handle null/undefined for optional fields)
+    // Determine current value
     const currentValue = React.useMemo(() => {
+        console.log('[RadioWidget] Value from useBaseWidget:', {
+            value,
+            type: typeof value,
+            widgetId: widgetConfig['widget-id'],
+            dataPath: widgetConfig['widget-data-path']
+        });
         if (value === null || value === undefined) {
             return null;
         }
         return value;
-    }, [value]);
-    // Get layout classes and styles
-    const layoutConfig = React.useMemo(() => {
+    }, [value, widgetConfig]);
+    // Helper to safely compare values (handles type coercion)
+    const isValueSelected = React.useCallback((optionValue) => {
+        // Handle null/undefined cases
+        if (currentValue === null || currentValue === undefined) {
+            return optionValue === null || optionValue === undefined;
+        }
+        if (optionValue === null || optionValue === undefined) {
+            return false;
+        }
+        // Convert both to strings and compare (handles any type mismatch)
+        const currentStr = String(currentValue).trim();
+        const optionStr = String(optionValue).trim();
+        return currentStr === optionStr;
+    }, [currentValue]);
+    // Get layout classes
+    const getLayoutClass = React.useMemo(() => {
         switch (layout) {
             case 'horizontal':
-                return {
-                    className: 'flex flex-row flex-wrap gap-4',
-                    style: undefined,
-                };
+                return 'flex flex-row flex-wrap gap-4';
             case 'grid':
-                // Calculate grid columns based on option count (max 4 columns, min 2)
-                const cols = Math.max(2, Math.min(processedOptions.length, 4));
-                return {
-                    className: 'grid gap-3',
-                    style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
-                };
+                Math.max(2, Math.min(processedOptions.length, 4));
+                return 'grid gap-3';
             case 'vertical':
             default:
-                return {
-                    className: 'flex flex-col space-y-2',
-                    style: undefined,
-                };
+                return 'flex flex-col space-y-2';
         }
     }, [layout, processedOptions.length]);
+    const getLayoutStyle = React.useMemo(() => {
+        if (layout === 'grid') {
+            const cols = Math.max(2, Math.min(processedOptions.length, 4));
+            return { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` };
+        }
+        return undefined;
+    }, [layout, processedOptions.length]);
     // For readonly mode, render as display text
     if (widgetConfig['widget-readonly']) {
         const label = translateConfig(widgetConfig['widget-label']);
-        const selectedOption = processedOptions.find(opt => opt.value === currentValue);
+        const selectedOption = processedOptions.find(opt => isValueSelected(opt.value));
         const displayValue = selectedOption ? selectedOption.label : (allowUnset && currentValue === null ? '-' : '');
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] RadioDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("div", { className: layoutConfig.className, style: layoutConfig.style, onBlur: onBlur, children: loading ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: translate('common.loading') })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [allowUnset && (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], checked: currentValue === null, onChange: handleUnset, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: "-" })] })), processedOptions.map((option) => (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], value: option.value, checked: currentValue === option.value, onChange: (e) => handleChange(option.value), disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: translateConfig(option.label) })] }, option.value)))] })) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("div", { className: getLayoutClass, style: getLayoutStyle, children: loading ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: translate('common.loading') })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [allowUnset && (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], checked: currentValue === null, 
+                                                // onChange={() => handleRadioChange(null)}
+                                                disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: "-" })] })), processedOptions.map((option, index) => {
+                                        const isChecked = isValueSelected(option.value);
+                                        // Debug log (remove after testing)
+                                        if (index === 0) {
+                                            console.log('[RadioWidget] Value check:', {
+                                                currentValue,
+                                                optionValue: option.value,
+                                                currentType: typeof currentValue,
+                                                optionType: typeof option.value,
+                                                isChecked,
+                                                currentStr: String(currentValue),
+                                                optionStr: String(option.value)
+                                            });
+                                        }
+                                        return (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], value: String(option.value), checked: isChecked, 
+                                                    // onChange={() => {
+                                                    //   console.log('[RadioWidget] onChange called:', option.value);
+                                                    //   handleRadioChange(option.value);
+                                                    // }}
+                                                    disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: translateConfig(option.label) })] }, `${widgetConfig['widget-id']}-${option.value}-${index}`));
+                                    })] })) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
 };
 
 const CheckboxWidget = ({ config }) => {
@@ -4801,6 +5089,17 @@ const TableCellSelect = ({ config, value, onValueChange }) => {
     const isReadonly = config['widget-readonly'] || false;
     return (jsxRuntimeExports.jsxs("select", { value: value || '', onChange: (e) => onValueChange(e.target.value), disabled: isReadonly || loading, className: `w-full h-[28px] px-2 text-sm border focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 ${isReadonly || loading ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} border-gray-300`, style: { borderRadius: '10px' }, children: [jsxRuntimeExports.jsx("option", { value: "", children: translate('common.select') || 'Select' }), dataSourceOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value)))] }));
 };
+const SelectDisplayValue = ({ config, value }) => {
+    const { dataSourceOptions, loading } = useBaseWidget({ config });
+    if (loading) {
+        return jsxRuntimeExports.jsx("span", { children: "-" });
+    }
+    if (value === null || value === undefined || value === '') {
+        return jsxRuntimeExports.jsx("span", { children: "-" });
+    }
+    const selectedOption = dataSourceOptions.find((option) => option.value === value);
+    return jsxRuntimeExports.jsx("span", { children: selectedOption ? selectedOption.label : String(value) });
+};
 const TableCellText = ({ config, value, onValueChange }) => {
     const isReadonly = config['widget-readonly'] || false;
     const placeholder = config['widget-data-placeholder'] || '';
@@ -4837,6 +5136,7 @@ const TableWidget = ({ config }) => {
     const { translate, translateConfig } = useWidgetTranslation();
     const { apiAdapter } = useWidgetContext();
     const dispatch = reactRedux.useDispatch();
+    const storeValues = reactRedux.useSelector((state) => state.widget?.values || {});
     const rows = Array.isArray(value) ? value : [];
     const columns = widgetConfig['widget-data-columns'] || [];
     const operations = widgetConfig['widget-data-operations'] || {};
@@ -4848,10 +5148,13 @@ const TableWidget = ({ config }) => {
     const [confirmationState, setConfirmationState] = React.useState(null);
     const [isAdding, setIsAdding] = React.useState(false);
     const [newRowData, setNewRowData] = React.useState(null);
-    // When section is in edit mode (isReadonly is false), all rows are automatically editable
+    // Track original rows when entering section edit mode for edit_action tracking
+    const [originalRows, setOriginalRows] = React.useState(null);
+    // When section is in edit mode (isReadonly is false), rows can be edited individually
+    // But they are NOT automatically editable - user must click Edit button for each row
     const isSectionEditMode = !isReadonly && operations.edit;
     // Check if any row is being edited (either manually or via section edit mode)
-    const isAnyRowEditing = editingState !== null || isAdding || isSectionEditMode;
+    const isAnyRowEditing = editingState !== null || isAdding;
     // Show confirmation dialog
     const showConfirmation = React.useCallback((message, onConfirm, onCancel) => {
         setConfirmationState({
@@ -4917,19 +5220,8 @@ const TableWidget = ({ config }) => {
     }, [isAnyRowEditing, rows, showConfirmation, cancelEdit, translate]);
     // Update cell value during edit
     const updateCellValue = React.useCallback((columnKey, newValue, rowIndex) => {
-        if (isSectionEditMode && rowIndex !== undefined) {
-            // When section is in edit mode, update the row directly
-            const newRows = [...rows];
-            if (!newRows[rowIndex]) {
-                newRows[rowIndex] = {};
-            }
-            newRows[rowIndex] = {
-                ...newRows[rowIndex],
-                [columnKey]: newValue,
-            };
-            onChange(newRows);
-        }
-        else if (editingState) {
+        if (editingState && rowIndex !== undefined) {
+            // Update editing state (works for both section edit mode and normal mode)
             setEditingState({
                 ...editingState,
                 currentValue: {
@@ -4937,6 +5229,9 @@ const TableWidget = ({ config }) => {
                     [columnKey]: newValue,
                 },
             });
+            // Also update Redux store for the cell widget
+            const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${columnKey}`;
+            dispatch(setValue({ widgetId: cellWidgetId, value: newValue }));
         }
         else if (isAdding && newRowData) {
             setNewRowData({
@@ -4944,7 +5239,7 @@ const TableWidget = ({ config }) => {
                 [columnKey]: newValue,
             });
         }
-    }, [editingState, isAdding, newRowData, isSectionEditMode, rows, onChange]);
+    }, [editingState, isAdding, newRowData, widgetConfig, dispatch]);
     // Save edited row
     const saveEdit = React.useCallback(async () => {
         if (!editingState)
@@ -4969,8 +5264,53 @@ const TableWidget = ({ config }) => {
             }
             // Update local state
             const newRows = [...rows];
-            newRows[rowIndex] = rowData;
+            const currentRow = newRows[rowIndex] || {};
+            const wasDeleted = currentRow.edit_action === 'DELETE';
+            // Determine edit_action (for color coding)
+            let editAction = currentRow.edit_action;
+            if (isSectionEditMode) {
+                // If row was deleted but is being saved, un-delete it
+                if (wasDeleted) {
+                    // Check if this row exists in original rows
+                    if (originalRows) {
+                        const rowId = rowData.id;
+                        const existsInOriginal = rowId !== undefined
+                            ? originalRows.some(or => or.id === rowId)
+                            : rowIndex < originalRows.length;
+                        editAction = existsInOriginal ? 'UPDATE' : 'ADD';
+                    }
+                    else {
+                        editAction = 'UPDATE';
+                    }
+                }
+                else if (!editAction && originalRows) {
+                    // Check if this row exists in original rows
+                    const rowId = rowData.id;
+                    const existsInOriginal = rowId !== undefined
+                        ? originalRows.some(or => or.id === rowId)
+                        : rowIndex < originalRows.length;
+                    editAction = existsInOriginal ? 'UPDATE' : 'ADD';
+                }
+                else if (!editAction) {
+                    editAction = 'UPDATE';
+                }
+            }
+            else {
+                // In non-section edit mode, mark as UPDATE if not already set
+                if (!editAction && !wasDeleted) {
+                    editAction = 'UPDATE';
+                }
+            }
+            newRows[rowIndex] = {
+                ...rowData,
+                ...(editAction ? { edit_action: editAction } : {}),
+            };
             onChange(newRows);
+            // Clear editing state and reset widget values in Redux
+            columns.forEach((col) => {
+                const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${col['column-key']}`;
+                dispatch(resetWidget(cellWidgetId));
+            });
             setEditingState(null);
         }
         catch (error) {
@@ -4981,7 +5321,7 @@ const TableWidget = ({ config }) => {
         finally {
             setLoadingRowIndex(null);
         }
-    }, [editingState, rows, onChange, apiAdapter, apiConfig, translate]);
+    }, [editingState, rows, onChange, apiAdapter, apiConfig, translate, isSectionEditMode, originalRows, columns, widgetConfig, dispatch]);
     // Add new row
     const startAdd = React.useCallback(() => {
         // If there's an unsaved edit, cancel it first (no confirmation needed)
@@ -5015,6 +5355,8 @@ const TableWidget = ({ config }) => {
                     savedRow = { ...savedRow, ...response };
                 }
             }
+            // Mark new row with edit_action: 'ADD' (for color coding)
+            savedRow = { ...savedRow, edit_action: 'ADD' };
             // Add to local state
             onChange([...rows, savedRow]);
             setIsAdding(false);
@@ -5027,7 +5369,7 @@ const TableWidget = ({ config }) => {
         finally {
             setLoadingRowIndex(null);
         }
-    }, [isAdding, newRowData, rows, onChange, apiAdapter, apiConfig, translate]);
+    }, [isAdding, newRowData, rows, onChange, apiAdapter, apiConfig, translate, isSectionEditMode]);
     // Delete row
     const deleteRow = React.useCallback(async (rowIndex) => {
         if (isAnyRowEditing) {
@@ -5059,9 +5401,20 @@ const TableWidget = ({ config }) => {
                     headers: deleteConfig.headers || {},
                 });
             }
-            // Remove from local state
-            const newRows = rows.filter((_, i) => i !== rowIndex);
-            onChange(newRows);
+            // In section edit mode, mark row as deleted instead of removing it
+            if (isSectionEditMode) {
+                const newRows = [...rows];
+                newRows[rowIndex] = {
+                    ...newRows[rowIndex],
+                    edit_action: 'DELETE',
+                };
+                onChange(newRows);
+            }
+            else {
+                // Remove from local state (non-section edit mode)
+                const newRows = rows.filter((_, i) => i !== rowIndex);
+                onChange(newRows);
+            }
         }
         catch (error) {
             console.error('Error deleting record:', error);
@@ -5070,28 +5423,37 @@ const TableWidget = ({ config }) => {
         finally {
             setLoadingRowIndex(null);
         }
-    }, [rows, onChange, apiAdapter, apiConfig, translate]);
+    }, [rows, onChange, apiAdapter, apiConfig, translate, isSectionEditMode]);
     // Get cell value (from editing state or row data)
     const getCellValue = React.useCallback((rowIndex, columnKey) => {
-        // When section is in edit mode, use row data directly
-        if (isSectionEditMode) {
-            return rows[rowIndex]?.[columnKey];
-        }
+        // When a specific row is being edited (either in section edit mode or normal mode)
         if (editingState && editingState.rowIndex === rowIndex) {
+            // Check Redux store first for most up-to-date value
+            const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${columnKey}`;
+            const storeValue = storeValues[cellWidgetId];
+            if (storeValue !== undefined) {
+                return storeValue;
+            }
             return editingState.currentValue[columnKey];
         }
         if (isAdding && rowIndex === rows.length) {
             return newRowData?.[columnKey];
         }
         return rows[rowIndex]?.[columnKey];
-    }, [editingState, isAdding, rows, newRowData, isSectionEditMode]);
+    }, [editingState, isAdding, rows, newRowData, widgetConfig, storeValues]);
     // Get formatted display value for a cell
     const getDisplayValue = React.useCallback((rowIndex, column) => {
         const columnKey = column['column-key'];
         const cellValue = getCellValue(rowIndex, columnKey);
+        const widgetType = column.widget || 'text';
         if (cellValue === null || cellValue === undefined || cellValue === '') {
             return '-';
         }
+        // For select widgets, we'll use SelectDisplayValue component instead
+        // This function is kept for other widget types
+        if (widgetType === 'select') {
+            return null; // Will be handled by SelectDisplayValue component
+        }
         // Use formatValue if format config exists
         if (column['widget-data-format']) {
             return formatValue(cellValue, column['widget-data-format'], column.widget);
@@ -5099,29 +5461,22 @@ const TableWidget = ({ config }) => {
         return cellValue?.toString() || '-';
     }, [getCellValue]);
     // Check if row is being edited
-    // When section is in edit mode, all rows are editable
+    // In section edit mode, only the row with active editingState is editable
     const isRowEditing = React.useCallback((rowIndex) => {
-        if (isSectionEditMode) {
-            return true; // All rows are editable when section is in edit mode
-        }
         return editingState?.rowIndex === rowIndex || (isAdding && rowIndex === rows.length);
-    }, [editingState, isAdding, rows.length, isSectionEditMode]);
-    // Set cell widget value in Redux when entering edit mode
+    }, [editingState, isAdding, rows.length]);
+    // Store original rows when entering section edit mode (for edit_action tracking)
     React.useEffect(() => {
-        if (isSectionEditMode) {
-            // When section is in edit mode, set values for all rows
-            rows.forEach((row, rowIndex) => {
-                columns.forEach((col) => {
-                    const columnKey = col['column-key'];
-                    const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${columnKey}`;
-                    const cellValue = row[columnKey];
-                    const defaultValue = cellValue !== undefined ? cellValue : (col['widget-data-default'] ?? '');
-                    // Set value in Redux store
-                    dispatch(setValue({ widgetId: cellWidgetId, value: defaultValue }));
-                });
-            });
+        if (isSectionEditMode && originalRows === null) {
+            setOriginalRows(JSON.parse(JSON.stringify(rows))); // Deep clone
+        }
+        else if (!isSectionEditMode && originalRows !== null) {
+            setOriginalRows(null);
         }
-        else if (editingState) {
+    }, [isSectionEditMode, rows, originalRows]);
+    // Set cell widget value in Redux when entering edit mode for a specific row
+    React.useEffect(() => {
+        if (editingState) {
             columns.forEach((col) => {
                 const columnKey = col['column-key'];
                 const cellWidgetId = `${widgetConfig['widget-id']}-row-${editingState.rowIndex}-col-${columnKey}`;
@@ -5131,7 +5486,7 @@ const TableWidget = ({ config }) => {
                 dispatch(setValue({ widgetId: cellWidgetId, value: defaultValue }));
             });
         }
-    }, [isSectionEditMode, editingState, columns, widgetConfig, dispatch, rows]);
+    }, [editingState, columns, widgetConfig, dispatch]);
     React.useEffect(() => {
         if (isAdding && newRowData) {
             columns.forEach((col) => {
@@ -5178,18 +5533,48 @@ const TableWidget = ({ config }) => {
                 } }) }));
     }, [widgetConfig, updateCellValue]);
     // Render cell content (widget in edit mode, formatted value in view mode)
-    const renderCell = React.useCallback((rowIndex, column) => {
+    const renderCell = React.useCallback((rowIndex, column, row) => {
         const columnKey = column['column-key'];
         const isEditing = isRowEditing(rowIndex);
         const cellValue = getCellValue(rowIndex, columnKey);
         const columnReadonly = column['widget-readonly'] === true;
+        // Get color styling based on edit_action
+        const getCellStyle = () => {
+            if (isEditing)
+                return {}; // No special styling when editing
+            const editAction = row?.edit_action;
+            if (editAction === 'ADD') {
+                return { color: '#16a34a' }; // green-600
+            }
+            else if (editAction === 'DELETE') {
+                return { color: '#dc2626', textDecoration: 'line-through' }; // red-600 with strikethrough
+            }
+            else if (editAction === 'UPDATE') {
+                return { color: '#ea580c' }; // orange-600
+            }
+            return {};
+        };
         if (isEditing) {
             // Use lightweight cell renderer
             return renderTableCell(rowIndex, column, cellValue, columnReadonly);
         }
         else {
-            // Display formatted value in view mode
-            return (jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900", children: getDisplayValue(rowIndex, column) }));
+            // Display formatted value in view mode with color styling
+            const widgetType = column.widget || 'text';
+            const displayValue = getDisplayValue(rowIndex, column);
+            // For select widgets, use SelectDisplayValue component to show label
+            if (widgetType === 'select' && displayValue === null) {
+                const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${columnKey}`;
+                const cellConfig = {
+                    ...column,
+                    'widget-id': cellWidgetId,
+                    'widget-label': '',
+                    'widget-readonly': true,
+                    'widget-data-path': undefined,
+                };
+                return (jsxRuntimeExports.jsx("div", { className: "text-sm", style: getCellStyle(), children: jsxRuntimeExports.jsx(SelectDisplayValue, { config: cellConfig, value: cellValue }) }));
+            }
+            return (jsxRuntimeExports.jsx("div", { className: "text-sm", style: getCellStyle(), children: displayValue }));
         }
     }, [isRowEditing, getCellValue, getDisplayValue, renderTableCell]);
     const tableWidgetId = `table-widget-${widgetConfig['widget-id']}`;
@@ -5249,11 +5634,13 @@ const TableWidget = ({ config }) => {
         .${tableWidgetId} button {
           border-radius: 10px !important;
         }
-      ` }), jsxRuntimeExports.jsxs("div", { className: `table-widget-container ${tableWidgetId}`, children: [confirmationState?.show && (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: jsxRuntimeExports.jsxs("div", { className: "bg-white rounded-lg p-6 max-w-md w-full mx-4", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-4", children: translate('table.confirm') || 'Confirm Action' }), jsxRuntimeExports.jsx("p", { className: "text-gray-700 mb-6", children: confirmationState.message }), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3", children: [jsxRuntimeExports.jsx("button", { onClick: confirmationState.onCancel, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300", style: { borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { onClick: confirmationState.onConfirm, className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700", style: { borderRadius: '15px' }, children: translate('table.discard') || 'Discard & Continue' })] })] }) })), operations.add && !isReadonly && isEnabled && (jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: jsxRuntimeExports.jsx("button", { type: "button", onClick: startAdd, disabled: loadingRowIndex !== null, className: "px-3 py-1 text-sm bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('table.addRecord') || 'Add New Record' }) })), rows.length === 0 && !isAdding ? (jsxRuntimeExports.jsxs("div", { className: "text-gray-500 text-sm py-4 text-center border border-gray-300", style: { borderRadius: '15px' }, children: [translate('table.noData') || 'No records available.', operations.add && !isReadonly && ` ${translate('table.clickToAdd') || 'Click "Add New Record" to add one.'}`] })) : (jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border border-gray-300", style: { borderRadius: '15px' }, children: jsxRuntimeExports.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [jsxRuntimeExports.jsx("thead", { className: "bg-gray-50", children: jsxRuntimeExports.jsxs("tr", { children: [columns.map((col) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: translateConfig(col['widget-label']) }, col['column-key']))), ((operations.edit || operations.remove) && !isReadonly) || isAnyRowEditing ? (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: translate('common.actions') || 'Actions' })) : null] }) }), jsxRuntimeExports.jsxs("tbody", { className: "bg-white divide-y divide-gray-200", children: [rows.map((row, rowIndex) => {
+      ` }), jsxRuntimeExports.jsxs("div", { className: `table-widget-container ${tableWidgetId}`, children: [confirmationState?.show && (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: jsxRuntimeExports.jsxs("div", { className: "bg-white rounded-lg p-6 max-w-md w-full mx-4", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-4", children: translate('table.confirm') || 'Confirm Action' }), jsxRuntimeExports.jsx("p", { className: "text-gray-700 mb-6", children: confirmationState.message }), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3", children: [jsxRuntimeExports.jsx("button", { onClick: confirmationState.onCancel, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300", style: { borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { onClick: confirmationState.onConfirm, className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700", style: { borderRadius: '15px' }, children: translate('table.discard') || 'Discard & Continue' })] })] }) })), operations.add && !isReadonly && isEnabled && (isSectionEditMode || !isAnyRowEditing) && (jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: jsxRuntimeExports.jsx("button", { type: "button", onClick: startAdd, disabled: loadingRowIndex !== null, className: "px-3 py-1 text-sm bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('table.addRecord') || 'Add New Record' }) })), rows.length === 0 && !isAdding ? (jsxRuntimeExports.jsxs("div", { className: "text-gray-500 text-sm py-4 text-center border border-gray-300", style: { borderRadius: '15px' }, children: [translate('table.noData') || 'No records available.', operations.add && !isReadonly && ` ${translate('table.clickToAdd') || 'Click "Add New Record" to add one.'}`] })) : (jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border border-gray-300", style: { borderRadius: '15px' }, children: jsxRuntimeExports.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [jsxRuntimeExports.jsx("thead", { className: "bg-gray-50", children: jsxRuntimeExports.jsxs("tr", { children: [columns.map((col) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: translateConfig(col['widget-label']) }, col['column-key']))), ((operations.edit || operations.remove) && !isReadonly) || isAnyRowEditing || isSectionEditMode ? (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: translate('common.actions') || 'Actions' })) : null] }) }), jsxRuntimeExports.jsxs("tbody", { className: "bg-white divide-y divide-gray-200", children: [rows.map((row, rowIndex) => {
                                             const isEditing = isRowEditing(rowIndex);
                                             const isLoading = loadingRowIndex === rowIndex;
-                                            return (jsxRuntimeExports.jsxs("tr", { className: isEditing ? 'bg-blue-50' : isLoading ? 'opacity-50' : '', children: [columns.map((col) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rowIndex, col) }, col['column-key']))), ((operations.edit || operations.remove) && !isReadonly) || isEditing ? (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", style: { minWidth: '120px' }, children: isEditing && !isSectionEditMode ? (
-                                                        // Show Save/Cancel buttons only for manual row editing (not section edit mode)
+                                            return (jsxRuntimeExports.jsxs("tr", { className: isEditing ? 'bg-blue-50' : isLoading ? 'opacity-50' : row.edit_action === 'DELETE' ? 'bg-red-50' : '', children: [columns.map((col) => {
+                                                        return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rowIndex, col, row) }, col['column-key']));
+                                                    }), ((operations.edit || operations.remove) && !isReadonly) || isEditing || isSectionEditMode ? (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", style: { minWidth: '120px' }, children: isEditing ? (
+                                                        // Show OK (Save)/Cancel buttons when row is being edited (works in both section edit mode and normal mode)
                                                         jsxRuntimeExports.jsxs("div", { className: "flex flex-row gap-2 items-center", style: { width: '100%' }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveEdit, disabled: isLoading, className: "px-3 py-1 text-xs font-medium hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: {
                                                                         display: 'inline-block',
                                                                         minWidth: '60px',
@@ -5261,12 +5648,10 @@ const TableWidget = ({ config }) => {
                                                                         color: '#ffffff', // white text
                                                                         border: 'none',
                                                                         borderRadius: '15px'
-                                                                    }, children: "Save" }), jsxRuntimeExports.jsx("button", { type: "button", onClick: cancelEdit, disabled: isLoading, className: "px-3 py-1 text-xs font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: { display: 'inline-block', minWidth: '60px', borderRadius: '15px' }, children: "Cancel" })] })) : !isSectionEditMode ? (
-                                                        // Show Edit/Delete buttons only when not in section edit mode
-                                                        jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [operations.edit && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => startEdit(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs text-blue-600 hover:text-blue-800 hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.edit') || 'Edit' })), operations.remove && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs text-red-600 hover:text-red-800 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.remove') || 'Delete' }))] })) : (
-                                                        // In section edit mode, show only Delete button if remove is enabled
-                                                        operations.remove && (jsxRuntimeExports.jsx("div", { className: "flex gap-2", children: jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: isLoading, className: "px-3 py-1 text-xs text-red-600 hover:text-red-800 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.remove') || 'Delete' }) }))) })) : null] }, rowIndex));
-                                        }), isAdding && newRowData && (jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50", children: [columns.map((col) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rows.length, col) }, col['column-key']))), jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveAdd, disabled: loadingRowIndex === -1, className: "px-3 py-1 text-xs bg-green-600 text-white hover:bg-green-700 disabled:opacity-50", style: { borderRadius: '15px' }, children: translate('common.save') || 'Save' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => {
+                                                                    }, children: translate('common.ok') || 'OK' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: cancelEdit, disabled: isLoading, className: "px-3 py-1 text-xs font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: { display: 'inline-block', minWidth: '60px', borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' })] })) : (
+                                                        // Show Edit/Delete buttons when row is not being edited
+                                                        jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [operations.edit && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => startEdit(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs text-blue-600 hover:text-blue-800 hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.edit') || 'Edit' })), operations.remove && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs text-red-600 hover:text-red-800 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.remove') || 'Delete' }))] })) })) : null] }, rowIndex));
+                                        }), isAdding && newRowData && (jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50", children: [columns.map((col) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rows.length, col, { ...newRowData, edit_action: 'ADD' }) }, col['column-key']))), jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveAdd, disabled: loadingRowIndex === -1, className: "px-3 py-1 text-xs bg-green-600 text-white hover:bg-green-700 disabled:opacity-50", style: { borderRadius: '15px' }, children: translate('common.save') || 'Save' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => {
                                                                     setIsAdding(false);
                                                                     setNewRowData(null);
                                                                 }, disabled: loadingRowIndex === -1, className: "px-3 py-1 text-xs bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-50", style: { borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' })] }) })] }))] })] }) })), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }));