@openg2p/registry-widgets 1.0.0 → 1.0.2

package/dist/index.js

@@ -3516,6 +3516,39 @@ const sectionValidate = (section, currentSchemaData, dispatch) => {
     return isValid;
 };
 
+/** Root class on readonly label/value rows; SectionRenderer scopes overflow/ellipsis rules here. */
+const READONLY_VALUE_ROW_ROOT_CLASSES = [
+    'TextDisplayWidget',
+    'TextAreaDisplayWidget',
+    'SelectDisplayWidget',
+    'PhoneDisplayWidget',
+    'NumberDisplayWidget',
+    'CurrencyDisplayWidget',
+    'RadioDisplayWidget',
+    'DateDisplayWidget',
+    'DateTimeDisplayWidget',
+    'CheckboxDisplayWidget',
+    'BooleanDisplayWidget',
+    'FileDisplayWidget',
+    'DisplayFieldWidget',
+];
+/** Rows whose value is one line in .flex-1 > .text-gray-900 (ellipsis; full string via title on the element). */
+const READONLY_SINGLE_LINE_VALUE_ROW_CLASSES = [
+    'TextDisplayWidget',
+    'SelectDisplayWidget',
+    'PhoneDisplayWidget',
+    'NumberDisplayWidget',
+    'CurrencyDisplayWidget',
+    'RadioDisplayWidget',
+    'DateDisplayWidget',
+    'DateTimeDisplayWidget',
+    'CheckboxDisplayWidget',
+    'BooleanDisplayWidget',
+    'DisplayFieldWidget',
+];
+function scopedClassSelectors(sectionClassId, classNames) {
+    return classNames.map((c) => `.${sectionClassId} .${c}`).join(',\n        ');
+}
 /**
  * Renders a section with its panels
  *
@@ -3542,41 +3575,22 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         }
         return section;
     }, [section, namespace]);
-    // Create namespaced schemaData if namespace is provided
-    // This ensures widgets can read initial values from schemaData at namespaced paths
+    // Create namespaced schemaData if namespace is provided.
+    // Widgets with namespaced data-paths (e.g. "rv-section-0.a1a4d25a.birth_date")
+    // need a nested object at values[namespace] so getValueByPath can traverse it.
     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;
+        return { ...currentSchemaData, [namespace]: currentSchemaData };
     }, [namespace, schemaData, currentSchemaData]);
+    // Populate the store with namespaced schema data so that namespaced widgets
+    // can read their initial values via getValueByPath on the namespaced paths.
+    React.useEffect(() => {
+        if (namespace && namespacedSchemaData) {
+            dispatch(setValues(namespacedSchemaData));
+        }
+    }, [namespace, namespacedSchemaData, dispatch]);
     const crViewData = React.useMemo(() => {
         if (mode !== 'CRView')
             return null;
@@ -3599,6 +3613,9 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const sectionId = sectionToRender['section-id'];
     const gridId = `section-panels-${sectionId}`;
     const sectionClassId = `section-${sectionId}`;
+    const readonlyValueRowRootsCss = React.useMemo(() => scopedClassSelectors(sectionClassId, READONLY_VALUE_ROW_ROOT_CLASSES), [sectionClassId]);
+    const readonlyValueRowFlex1Css = React.useMemo(() => READONLY_VALUE_ROW_ROOT_CLASSES.map((c) => `.${sectionClassId} .${c} > .flex-1`).join(',\n        '), [sectionClassId]);
+    const readonlySingleLineValueTextCss = React.useMemo(() => READONLY_SINGLE_LINE_VALUE_ROW_CLASSES.map((c) => `.${sectionClassId} .${c} > .flex-1 > .text-gray-900`).join(',\n        '), [sectionClassId]);
     // IntakeForm mode: accordion expand/collapse state (supports toggle)
     const [standaloneExpanded, setStandaloneExpanded] = React.useState(true); // For sectionIndex undefined (standalone use)
     const isExpandedFromContainer = typeof sectionIndex === 'number' && expandedSectionIndex === sectionIndex;
@@ -3938,6 +3955,8 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const baselineSnapshotRef = React.useRef(null);
     // IntakeForm only: increment when baseline is updated after save - forces badge to update (refs don't trigger re-renders)
     const [intakeFormBaselineTrigger, setIntakeFormBaselineTrigger] = React.useState(0);
+    // IntakeForm only: tracks whether the user has actually saved this section (prevents "Saved" badge on initial load)
+    const [hasBeenSavedByUser, setHasBeenSavedByUser] = React.useState(false);
     // IntakeForm: treat as edit mode for dirty tracking when isDraft. RegistryView: use isEditMode.
     const effectiveEditModeForDirty = mode === 'IntakeForm' ? (isDraft !== false) : isEditMode;
     // Compute isDirty: compare current store state to baseline (only when in edit mode)
@@ -3980,18 +3999,68 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const intakeFormSectionStatus = React.useMemo(() => {
         if (mode !== 'IntakeForm' || isDraft === false)
             return null;
-        const hasValue = (v) => v !== undefined && v !== null && (typeof v !== 'string' || v.trim().length > 0);
-        const currentSnapshot = buildSectionSnapshot(storeValues, namespace);
-        const record = currentSnapshot.records?.[0];
-        const hasData = record &&
-            typeof record === 'object' &&
-            Object.values(record).some((v) => hasValue(v));
         if (isDirty)
             return 'modified';
-        if (hasData)
+        if (hasBeenSavedByUser)
             return 'saved';
         return null;
-    }, [mode, isDirty, storeValues, namespace, buildSectionSnapshot]);
+    }, [mode, isDirty, hasBeenSavedByUser]);
+    // Revert store values to the original schemaData for this section's widgets.
+    // Used by both handleSave (RegistryView raises a CR, so values should not persist)
+    // and handleCancel.
+    const revertToOriginalValues = React.useCallback(() => {
+        const sectionWidgets = collectWidgets(originalSection.panels);
+        const oldSchemaData = schemaData || contextSchemaData;
+        const currentStoreValues = store.getState().widget.values;
+        let newStoreValues = currentStoreValues;
+        sectionWidgets.forEach(widget => {
+            const originalWidgetId = widget['widget-id'];
+            const namespacedWidgetId = namespace ? `${namespace}__${originalWidgetId}` : originalWidgetId;
+            const widgetId = namespacedWidgetId;
+            const originalDataPath = widget['widget-data-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) {
+                let oldValue;
+                if (typeof originalDataPath === 'object') {
+                    oldValue = {};
+                    Object.entries(originalDataPath).forEach(([key, path]) => {
+                        if (typeof path === 'string') {
+                            oldValue[key] = getValueByPath(oldSchemaData, path);
+                        }
+                    });
+                }
+                else if (typeof originalDataPath === 'string') {
+                    oldValue = getValueByPath(oldSchemaData, originalDataPath);
+                }
+                if (oldValue !== undefined) {
+                    newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
+                    // Also revert the widgetId-based entry — useBaseWidget.handleChange
+                    // sets values[widgetId] during editing, and useBaseWidget.currentValue
+                    // reads values[widgetId] first before falling through to the dataPath.
+                    newStoreValues = { ...newStoreValues, [widgetId]: oldValue };
+                }
+            }
+        });
+        if (hasSupportingDocuments) {
+            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
+            originalSupportingDocuments.forEach((doc, index) => {
+                const widgetId = `supporting-doc-${sectionId}-${index}`;
+                const originalDataPath = doc['document-data-path'];
+                const storeDataPath = namespace && originalDataPath
+                    ? `${namespace}.${originalDataPath}`
+                    : originalDataPath;
+                const oldValue = getValueByPath(oldSchemaData, originalDataPath);
+                newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
+            });
+        }
+        if (newStoreValues !== currentStoreValues) {
+            dispatch(setValues(newStoreValues));
+        }
+    }, [originalSection, schemaData, contextSchemaData, store, namespace, hasSupportingDocuments, sectionId, dispatch]);
     // Handle save button click
     const handleSave = async () => {
         if (!store || !onSectionSave) {
@@ -4028,12 +4097,24 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             });
         }
         if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
+            let profileImage = null;
+            for (const record of newSchemaData) {
+                if (typeof record === 'object' && record !== null) {
+                    for (const [key, value] of Object.entries(record)) {
+                        if (value instanceof File) {
+                            profileImage = value;
+                            record[key] = '';
+                        }
+                    }
+                }
+            }
             try {
                 const sectionchanges = {
                     section_id: dbSectionId ?? originalSection['section-id'],
                     section_register_id: sectionRegisterId,
                     records: [...newSchemaData],
-                    files: [...sectionFiles]
+                    files: [...sectionFiles],
+                    ...(profileImage ? { image: profileImage } : {}),
                 };
                 await onSectionSave(sectionchanges);
             }
@@ -4041,6 +4122,12 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                 console.error('Section Changes Save failed', error);
             }
         }
+        // In RegistryView, save raises a CR — the actual data update follows a
+        // separate approval workflow, so revert the displayed values to the
+        // originals so the view doesn't show unapproved edits.
+        if (mode === 'RegistryView') {
+            revertToOriginalValues();
+        }
         setIsEditMode(false);
         onEditModeChange?.(originalSectionId, false);
     };
@@ -4070,12 +4157,24 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                 });
             }
             if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
+                let profileImage = null;
+                for (const record of newSchemaData) {
+                    if (typeof record === 'object' && record !== null) {
+                        for (const [key, value] of Object.entries(record)) {
+                            if (value instanceof File) {
+                                profileImage = value;
+                                record[key] = '';
+                            }
+                        }
+                    }
+                }
                 try {
                     await onSectionSave({
                         section_id: dbSectionId ?? originalSection['section-id'],
                         section_register_id: sectionRegisterId,
                         records: [...newSchemaData],
                         files: [...sectionFiles],
+                        ...(profileImage ? { image: profileImage } : {}),
                     });
                 }
                 catch (error) {
@@ -4086,6 +4185,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             if (mode === 'IntakeForm') {
                 baselineSnapshotRef.current = buildSectionSnapshot(currentSchemaData, namespace);
                 setIntakeFormBaselineTrigger((prev) => prev + 1);
+                setHasBeenSavedByUser(true);
             }
             onSectionDirtyChange?.(sectionId, false);
         }
@@ -4094,64 +4194,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     }, [store, onSectionSave, onSectionSaveSuccess, sectionIndex, originalSection, schemaData, contextSchemaData, namespace, hasSupportingDocuments, dbSectionId, sectionRegisterId, dispatch, buildSectionSnapshot, sectionId, onSectionDirtyChange, mode, isDraft]);
     // Handle cancel button click
     const handleCancel = () => {
-        // Revert values in store to original schema data
-        // 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 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 originalDataPath === 'object') {
-                    // Multi-path: get values for each path
-                    oldValue = {};
-                    Object.entries(originalDataPath).forEach(([key, path]) => {
-                        if (typeof path === 'string') {
-                            oldValue[key] = getValueByPath(oldSchemaData, path);
-                        }
-                    });
-                }
-                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, storeDataPath, widgetId, oldValue);
-                }
-            }
-        });
-        // Also revert supporting documents if any
-        if (hasSupportingDocuments) {
-            // 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 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) {
-            dispatch(setValues(newStoreValues));
-        }
+        revertToOriginalValues();
         setIsEditMode(false);
         onEditModeChange?.(originalSectionId, false);
     };
@@ -4202,20 +4245,27 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
           white-space: nowrap !important;
         }
         /* Readonly: prevent flex row from overflowing panel */
-        .${sectionClassId} .TextDisplayWidget {
+        ${readonlyValueRowRootsCss} {
           min-width: 0 !important;
           overflow: hidden !important;
         }
-        .${sectionClassId} .TextDisplayWidget > .flex-1 {
+        ${readonlyValueRowFlex1Css} {
           min-width: 0 !important;
           overflow: hidden !important;
         }
-        /* Readonly value text truncation */
-        .${sectionClassId} .TextDisplayWidget > .flex-1 > .text-gray-900 {
+        /* Readonly value: single-line ellipsis; full value via title on the value node */
+        ${readonlySingleLineValueTextCss} {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
+        /* Readonly textarea: break unbroken long tokens; title on pre keeps full text on hover */
+        .${sectionClassId} .TextAreaDisplayWidget > .flex-1 > pre {
+          min-width: 0;
+          max-width: 100%;
+          overflow-wrap: anywhere;
+          word-break: break-word;
+        }
         
         /* Only apply fixed height when in edit mode */
         .${sectionClassId}[data-edit-mode="true"] {
@@ -4717,6 +4767,9 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     }, []);
     const safeSections = sections ?? [];
     const prevSectionsLengthRef = React.useRef(safeSections.length);
+    // Stable ref for namespace so formHandle useMemo doesn't depend on the (possibly inline) function identity
+    const namespaceRef = React.useRef(namespace);
+    namespaceRef.current = namespace;
     // Track dirty (unsaved changes) per section for form handle validation
     const sectionDirtyMapRef = React.useRef({});
     const handleSectionDirtyChange = React.useCallback((sectionId, isDirty) => {
@@ -4762,11 +4815,14 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     // Form handle for onFormReady - allows host to validate and get all section data from its own Submit button
     const formHandle = React.useMemo(() => {
         const getValues = () => store.getState().widget?.values || {};
-        const getNamespace = (section, index) => namespace
-            ? typeof namespace === 'string'
-                ? namespace
-                : namespace(section['section-id'], index)
-            : undefined;
+        const getNamespace = (section, index) => {
+            const ns = namespaceRef.current;
+            return ns
+                ? typeof ns === 'string'
+                    ? ns
+                    : ns(section['section-id'], index)
+                : undefined;
+        };
         const checkNoUnsavedChanges = () => {
             const hasDirty = Object.values(sectionDirtyMapRef.current).some(Boolean);
             if (hasDirty) {
@@ -4816,7 +4872,7 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
                 return results;
             },
         };
-    }, [store, dispatch, safeSections, namespace]);
+    }, [store, dispatch, safeSections]);
     // Call onFormReady when form is ready (sections loaded)
     React.useEffect(() => {
         if (onFormReady && safeSections.length > 0) {
@@ -8099,10 +8155,10 @@ const DisplayWidget = ({ config }) => {
     const label = translateConfig(widgetConfig['widget-label']);
     // If no label, render as paragraph text
     if (!label || label.trim() === '') {
-        return (jsxRuntimeExports.jsx("div", { className: "mb-3 text-base text-gray-700", title: String(displayValue ?? ''), children: displayValue }));
+        return (jsxRuntimeExports.jsx("div", { className: "DisplayFieldWidget mb-3 min-w-0 w-full overflow-hidden text-ellipsis whitespace-nowrap text-base text-gray-700", title: String(displayValue ?? ''), children: displayValue }));
     }
-    // With label, render as key-value pair
-    return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] flex flex-col sm:flex-row sm:items-start", children: [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' }, title: label, children: [label, ":"] }), jsxRuntimeExports.jsx("div", { className: "flex-1 text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue })] }));
+    // With label, render as key-value pair (structure matches other readonly widgets for SectionRenderer ellipsis)
+    return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] DisplayFieldWidget flex flex-col sm:flex-row sm:items-start", children: [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' }, title: label, children: [label, ":"] }), jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
 };
 
 const TableCellSelect = ({ config, value, onValueChange }) => {
@@ -9070,7 +9126,18 @@ const HeaderSectionWidget = ({ config }) => {
             result = searchIn(schemaData);
         return result;
     }, [paths, values, schemaData]);
-    const imageUrl = findValue('image') || null;
+    const imageVal = findValue('image');
+    const imageUrlVal = findValue('imageUrl');
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    React.useEffect(() => {
+        if (imageVal instanceof File) {
+            const url = URL.createObjectURL(imageVal);
+            setPreviewUrl(url);
+            return () => URL.revokeObjectURL(url);
+        }
+        setPreviewUrl(null);
+    }, [imageVal]);
+    const displayImageUrl = previewUrl || (typeof imageUrlVal === 'string' && imageUrlVal ? imageUrlVal : null);
     const displayName = findValue('name') || '';
     const functionalId = findValue('functionalId') || '';
     const statusValue = findValue('status') || '';
@@ -9103,18 +9170,20 @@ const HeaderSectionWidget = ({ config }) => {
         return opt ? opt.label : String(statusValue);
     }, [statusValue, statusOptions]);
     const statusColor = statusColors[String(statusValue).toLowerCase()] || '#6B7280';
+    // ── Image edit helpers ───────────────────────────────────────
+    const fileInputRef = React.useRef(null);
+    const handleImageUpload = React.useCallback((e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        updateFieldValue('image', file);
+        e.target.value = '';
+    }, [updateFieldValue]);
+    const handleImageDelete = React.useCallback(() => {
+        updateFieldValue('image', '');
+    }, [updateFieldValue]);
     // ── Scoped class for CSS isolation ────────────────────────────
     const cls = `header-section-widget-${widgetConfig['widget-id']}`;
-    // ── Indicator dot component ───────────────────────────────────
-    const Dot = ({ color }) => (jsxRuntimeExports.jsx("span", { style: {
-            display: 'inline-block',
-            width: 8,
-            height: 8,
-            borderRadius: '50%',
-            backgroundColor: color,
-            flexShrink: 0,
-            marginTop: 6,
-        } }));
     // ── RENDER ────────────────────────────────────────────────────
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
         .${cls} {
@@ -9173,6 +9242,56 @@ const HeaderSectionWidget = ({ config }) => {
           border-radius: 8px;
         }
 
+        .${cls} .hdr-avatar-wrapper {
+          position: relative;
+          width: ${imageSize}px;
+          height: ${imageSize}px;
+          flex-shrink: 0;
+        }
+
+        .${cls} .hdr-avatar-overlay {
+          position: absolute;
+          inset: 0;
+          border-radius: 8px;
+          background: rgba(0, 0, 0, 0.55);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 6px;
+          opacity: 0;
+          transition: opacity 0.2s;
+        }
+
+        .${cls} .hdr-avatar-wrapper:hover .hdr-avatar-overlay {
+          opacity: 1;
+        }
+
+        .${cls} .hdr-avatar-action {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          padding: 5px 14px;
+          border: none;
+          border-radius: 4px;
+          background: rgba(255, 255, 255, 0.92);
+          color: #374151;
+          font-size: 0.7rem;
+          font-weight: 500;
+          cursor: pointer;
+          font-family: Roboto, sans-serif;
+          transition: background 0.15s;
+          white-space: nowrap;
+        }
+
+        .${cls} .hdr-avatar-action:hover {
+          background: #fff;
+        }
+
+        .${cls} .hdr-avatar-action--delete {
+          color: #DC2626;
+        }
+
         .${cls} .hdr-info {
           display: flex;
           flex-direction: column;
@@ -9277,13 +9396,13 @@ const HeaderSectionWidget = ({ config }) => {
             min-width: 0;
           }
         }
-      ` }), jsxRuntimeExports.jsxs("div", { className: cls, children: [jsxRuntimeExports.jsxs("div", { className: "hdr-left", children: [jsxRuntimeExports.jsxs("div", { children: [imageUrl ? (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: displayName || 'Profile', className: "hdr-avatar", onError: (e) => {
+      ` }), jsxRuntimeExports.jsxs("div", { className: cls, children: [jsxRuntimeExports.jsxs("div", { className: "hdr-left", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-avatar-wrapper", children: [displayImageUrl ? (jsxRuntimeExports.jsx("img", { src: displayImageUrl, alt: displayName || 'Profile', className: "hdr-avatar", onError: (e) => {
                                             e.target.style.display = 'none';
                                             const placeholder = e.target
                                                 .parentElement?.querySelector('.hdr-avatar-placeholder');
                                             if (placeholder)
                                                 placeholder.style.display = 'flex';
-                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: imageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: "#9CA3AF" }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? statusColor : '#F59E0B' }), jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? '#9CA3AF' : '#F59E0B' }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: getLabel('enterReason'), onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
+                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: displayImageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) }), !isReadonly && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "hdr-avatar-overlay", children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "hdr-avatar-action", onClick: () => fileInputRef.current?.click(), children: [jsxRuntimeExports.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), jsxRuntimeExports.jsx("polyline", { points: "17 8 12 3 7 8" }), jsxRuntimeExports.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] }), "Upload"] }), jsxRuntimeExports.jsxs("button", { type: "button", className: "hdr-avatar-action hdr-avatar-action--delete", onClick: handleImageDelete, children: [jsxRuntimeExports.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("polyline", { points: "3 6 5 6 21 6" }), jsxRuntimeExports.jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })] }), "Delete"] })] }), jsxRuntimeExports.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: handleImageUpload })] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: getLabel('enterReason'), onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
 };
 
 /**