@openg2p/registry-widgets 0.1.8 → 0.1.9

package/dist/index.js

@@ -3835,8 +3835,6 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             return [];
         const snapshot = {};
         let hasTable = false;
-        if (!sectionRegisterId)
-            return [];
         const resolvePath = (path) => (pathPrefix ? `${pathPrefix}.${path}` : path);
         widgets.forEach(widget => {
             const widgetPath = widget['widget-data-path'];
@@ -3866,9 +3864,11 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                     : fullPath;
                 cleanedSnapshot[fieldPath] = value;
             });
-            const sectionData = pathPrefix
-                ? getValueByPath(sourceData, resolvePath(sectionRegisterId))
-                : sourceData[sectionRegisterId];
+            const sectionData = sectionRegisterId
+                ? (pathPrefix
+                    ? getValueByPath(sourceData, resolvePath(sectionRegisterId))
+                    : sourceData[sectionRegisterId])
+                : {};
             return [
                 {
                     ...sectionData,
@@ -4020,7 +4020,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
             try {
                 const sectionchanges = {
-                    section_id: dbSectionId,
+                    section_id: dbSectionId ?? originalSection['section-id'],
                     section_register_id: sectionRegisterId,
                     records: [...newSchemaData],
                     files: [...sectionFiles]
@@ -4035,49 +4035,52 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     };
     // IntakeForm: save section then collapse current and expand next (or stay on final section)
     const handleIntakeFormSave = React.useCallback(async () => {
-        if (!store || !onSectionSave || sectionIndex === undefined)
-            return;
-        const sectionWidgets = collectWidgets(originalSection.panels);
-        const currentState = store.getState().widget;
-        const currentSchemaData = currentState.values || {};
-        const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch);
-        if (!isSectionValid)
+        if (sectionIndex === undefined)
             return;
-        const oldSchemaData = schemaData || contextSchemaData;
-        const newSchemaData = trackSectionChages(sectionWidgets, currentSchemaData, namespace);
-        const sectionFiles = [];
-        if (hasSupportingDocuments) {
-            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
-            originalSupportingDocuments.forEach((doc) => {
-                const originalDataPath = doc['document-data-path'];
-                const storeDataPath = namespace && originalDataPath
-                    ? `${namespace}.${originalDataPath}`
-                    : originalDataPath;
-                sectionFiles.push(getValueByPath(currentSchemaData, storeDataPath));
-            });
-        }
-        if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
-            try {
-                await onSectionSave({
-                    section_id: dbSectionId,
-                    section_register_id: sectionRegisterId,
-                    records: [...newSchemaData],
-                    files: [...sectionFiles],
+        // Only run save/validation logic when in draft mode and handlers are available
+        if (isDraft !== false && store && onSectionSave) {
+            const sectionWidgets = collectWidgets(originalSection.panels);
+            const currentState = store.getState().widget;
+            const currentSchemaData = currentState.values || {};
+            const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch);
+            if (!isSectionValid)
+                return;
+            const oldSchemaData = schemaData || contextSchemaData;
+            const newSchemaData = trackSectionChages(sectionWidgets, currentSchemaData, namespace);
+            const sectionFiles = [];
+            if (hasSupportingDocuments) {
+                const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
+                originalSupportingDocuments.forEach((doc) => {
+                    const originalDataPath = doc['document-data-path'];
+                    const storeDataPath = namespace && originalDataPath
+                        ? `${namespace}.${originalDataPath}`
+                        : originalDataPath;
+                    sectionFiles.push(getValueByPath(currentSchemaData, storeDataPath));
                 });
             }
-            catch (error) {
-                console.error('Section Changes Save failed', error);
-                return;
+            if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
+                try {
+                    await onSectionSave({
+                        section_id: dbSectionId ?? originalSection['section-id'],
+                        section_register_id: sectionRegisterId,
+                        records: [...newSchemaData],
+                        files: [...sectionFiles],
+                    });
+                }
+                catch (error) {
+                    console.error('Section Changes Save failed', error);
+                    return;
+                }
             }
+            if (mode === 'IntakeForm') {
+                baselineSnapshotRef.current = buildSectionSnapshot(currentSchemaData, namespace);
+                setIntakeFormBaselineTrigger((prev) => prev + 1);
+            }
+            onSectionDirtyChange?.(sectionId, false);
         }
-        // IntakeForm only: update baseline so section is no longer dirty; trigger re-render so badge updates to "Saved"
-        if (mode === 'IntakeForm') {
-            baselineSnapshotRef.current = buildSectionSnapshot(currentSchemaData, namespace);
-            setIntakeFormBaselineTrigger((prev) => prev + 1);
-        }
-        onSectionDirtyChange?.(sectionId, false);
+        // Always navigate to the next section
         onSectionSaveSuccess?.(sectionIndex);
-    }, [store, onSectionSave, onSectionSaveSuccess, sectionIndex, originalSection, schemaData, contextSchemaData, namespace, hasSupportingDocuments, dbSectionId, sectionRegisterId, dispatch, buildSectionSnapshot, sectionId, onSectionDirtyChange, mode]);
+    }, [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
@@ -4398,7 +4401,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                             gap: '12px',
                                             marginBottom: '20px',
                                             width: '100%',
-                                        }, children: [jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => onPreviousSection?.(sectionIndex), disabled: sectionIndex === 0, className: "intake-form-prev-btn", style: {
+                                        }, children: [typeof sectionIndex === 'number' && sectionIndex > 0 && (jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => onPreviousSection?.(sectionIndex), className: "intake-form-prev-btn", style: {
                                                     fontFamily: 'Roboto, sans-serif',
                                                     fontSize: '14px',
                                                     fontWeight: 400,
@@ -4406,25 +4409,25 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                                     borderRadius: '10px',
                                                     border: '1px solid #FD8C3E',
                                                     background: '#F3F4F6',
-                                                    color: sectionIndex === 0 ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.5)',
-                                                    cursor: sectionIndex === 0 ? 'not-allowed' : 'pointer',
+                                                    color: 'rgba(0, 0, 0, 0.5)',
+                                                    cursor: 'pointer',
                                                     display: 'inline-flex',
                                                     alignItems: 'center',
                                                     gap: '8px',
-                                                }, children: [jsxRuntimeExports.jsx("img", { src: img$5, alt: "", "aria-hidden": true, style: { width: '14px', height: '14px', opacity: sectionIndex === 0 ? 0.5 : 0.5 } }), translate('common.previous') || 'Prev'] }), jsxRuntimeExports.jsxs("button", { type: "button", onClick: handleIntakeFormSave, disabled: isDraft === false, className: "intake-form-save-btn", style: {
+                                                }, children: [jsxRuntimeExports.jsx("img", { src: img$5, alt: "", "aria-hidden": true, style: { width: '14px', height: '14px', opacity: 0.5 } }), translate('common.previous') || 'Prev'] })), jsxRuntimeExports.jsxs("button", { type: "button", onClick: handleIntakeFormSave, className: "intake-form-save-btn", style: {
                                                     fontFamily: 'Roboto, sans-serif',
                                                     fontSize: '14px',
                                                     fontWeight: 400,
                                                     padding: '8px 24px',
                                                     borderRadius: '10px',
                                                     border: '1px solid #FD8C3E',
-                                                    background: isDraft === false ? '#9CA3AF' : '#F3F4F6',
-                                                    color: isDraft === false ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.5)',
-                                                    cursor: isDraft === false ? 'not-allowed' : 'pointer',
+                                                    background: '#F3F4F6',
+                                                    color: 'rgba(0, 0, 0, 0.5)',
+                                                    cursor: 'pointer',
                                                     display: 'inline-flex',
                                                     alignItems: 'center',
                                                     gap: '8px',
-                                                }, children: [translate('common.save') || 'Save', jsxRuntimeExports.jsx("img", { src: img$4, alt: "", "aria-hidden": true, style: { width: '14px', height: '14px' } })] })] })] }) }))] })) : (
+                                                }, children: [translate('common.next') || 'Next', jsxRuntimeExports.jsx("img", { src: img$4, alt: "", "aria-hidden": true, style: { width: '14px', height: '14px' } })] })] })] }) }))] })) : (
                 /* RegistryView / CRView: standard layout */
                 jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsxs("div", { style: {
                                 marginTop: '35px',
@@ -4681,7 +4684,9 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
         if (index + 1 < safeSections.length) {
             setExpandedSectionIndex(index + 1);
         }
-        // Last section: stay expanded (no action)
+        else {
+            setExpandedSectionIndex(null);
+        }
     }, [safeSections.length]);
     // IntakeForm mode: called when Previous clicked - collapse current, expand previous
     const handlePreviousSection = React.useCallback((index) => {
@@ -8883,6 +8888,326 @@ const TextAreaWidget = ({ config }) => {
                                     }, children: charCounterText }))] }), hasError && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: errorMessage }))] })] }) }));
 };
 
+const DEFAULT_STATUS_COLORS = {
+    active: '#16A34A',
+    inactive: '#D97706',
+    archived: '#6B7280',
+};
+// ── Hook: load data-source options for a single field ────────────
+// Options are loaded in both view and edit modes because view mode
+// needs them to resolve display labels (e.g. "active" → "Active").
+// For API data sources, loading is deferred to edit mode to avoid
+// unnecessary network calls when only labels are needed.
+function useFieldDataSource(fieldKey, fieldConfig, isReadonly) {
+    const [options, setOptions] = React.useState([]);
+    const { dataSourceRequestHandler, schemaData } = useWidgetContext();
+    const values = reactRedux.useSelector((state) => state.widget.values);
+    const dataSource = fieldConfig?.['data-source'];
+    const dsType = dataSource?.type;
+    const dsKey = dataSource
+        ? `${fieldKey}-${dsType}-${JSON.stringify(dataSource)}`
+        : '';
+    React.useEffect(() => {
+        if (!dataSource) {
+            setOptions([]);
+            return;
+        }
+        // API sources: only fetch when editable to avoid unnecessary calls
+        if (dataSource.type === 'api' && isReadonly) {
+            return;
+        }
+        let cancelled = false;
+        const load = async () => {
+            try {
+                let raw = [];
+                if (dataSource.type === 'static') {
+                    raw = getStaticDataSource(dataSource);
+                }
+                else if (dataSource.type === 'api') {
+                    if (!dataSourceRequestHandler)
+                        return;
+                    raw = await getApiDataSource(dataSource, values, dataSourceRequestHandler);
+                }
+                else if (dataSource.type === 'schema') {
+                    raw = getSchemaDataSource(dataSource, schemaData || {});
+                }
+                const transformed = transformDataSourceOptions(raw, dataSource.valueKey, dataSource.labelKey);
+                if (!cancelled)
+                    setOptions(transformed);
+            }
+            catch (err) {
+                console.error(`[HeaderSectionWidget] Error loading data-source for field "${fieldKey}":`, err);
+                if (!cancelled)
+                    setOptions([]);
+            }
+        };
+        load();
+        return () => { cancelled = true; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dsKey, isReadonly, dataSourceRequestHandler]);
+    return options;
+}
+// ── Main component ───────────────────────────────────────────────
+const HeaderSectionWidget = ({ config }) => {
+    const { config: widgetConfig, getFieldValue, } = useBaseWidget({ config });
+    const dispatch = reactRedux.useDispatch();
+    const { translateConfig } = useWidgetTranslation();
+    const { schemaData } = useWidgetContext();
+    const values = reactRedux.useSelector((state) => state.widget.values);
+    const isReadonly = widgetConfig['widget-readonly'] !== false;
+    const dataPath = widgetConfig['widget-data-path'];
+    // ── Per-field config map ──────────────────────────────────────
+    const fieldConfigMap = React.useMemo(() => {
+        return widgetConfig['widget-field-config'] || {};
+    }, [widgetConfig['widget-field-config']]);
+    // ── Load data source options for the status field ─────────────
+    const statusOptions = useFieldDataSource('status', fieldConfigMap['status'], isReadonly);
+    // ── Resolve field values ──────────────────────────────────────
+    const paths = React.useMemo(() => {
+        if (!dataPath || typeof dataPath !== 'object')
+            return {};
+        return dataPath;
+    }, [dataPath]);
+    const findValue = React.useCallback((fieldKey) => {
+        const path = paths[fieldKey];
+        if (!path)
+            return undefined;
+        const searchIn = (source) => {
+            if (!source)
+                return undefined;
+            let v = getValueByPath(source, path);
+            if (v !== undefined)
+                return v;
+            for (const obj of Object.values(source)) {
+                if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+                    v = getValueByPath(obj, path);
+                    if (v !== undefined)
+                        return v;
+                }
+            }
+            return undefined;
+        };
+        let result = searchIn(values);
+        if (result === undefined)
+            result = searchIn(schemaData);
+        return result;
+    }, [paths, values, schemaData]);
+    const imageUrl = findValue('image') || null;
+    const displayName = findValue('name') || '';
+    const functionalId = findValue('functionalId') || '';
+    const statusValue = findValue('status') || '';
+    const statusReason = findValue('statusReason') || '';
+    const createdBy = findValue('createdBy') || '';
+    const createdAt = findValue('createdAt') || '';
+    const lastApprovedBy = findValue('lastApprovedBy') || '';
+    const lastApprovedAt = findValue('lastApprovedAt') || '';
+    // ── Format options ────────────────────────────────────────────
+    const format = (widgetConfig['widget-data-format'] || {});
+    const imageSize = format.imageSize || 90;
+    const nameColor = format.nameColor || '#ED7C22';
+    const statusColors = {
+        ...DEFAULT_STATUS_COLORS,
+        ...(format.statusColors || {}),
+    };
+    // ── Value change helpers ──────────────────────────────────────
+    const updateFieldValue = React.useCallback((fieldKey, newValue) => {
+        const path = paths[fieldKey];
+        if (!path)
+            return;
+        const updated = setValueByPath({ ...values }, path, newValue);
+        dispatch(setValues(updated));
+    }, [paths, values, dispatch]);
+    // ── Status helpers ────────────────────────────────────────────
+    const statusLabel = React.useMemo(() => {
+        if (!statusValue)
+            return '';
+        const opt = statusOptions.find((o) => String(o.value).toLowerCase() === String(statusValue).toLowerCase());
+        return opt ? opt.label : String(statusValue);
+    }, [statusValue, statusOptions]);
+    const statusColor = statusColors[String(statusValue).toLowerCase()] || '#6B7280';
+    // ── 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} {
+          display: flex;
+          flex-direction: row;
+          gap: 1.5rem;
+          width: 100%;
+          font-family: Roboto, sans-serif;
+          padding: 35px 0 16px 0;
+        }
+
+        .${cls} .hdr-left {
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+          gap: 1rem;
+          flex: 1 1 55%;
+          min-width: 0;
+        }
+
+        .${cls} .hdr-right {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+          flex: 0 0 auto;
+          min-width: 220px;
+        }
+
+        .${cls} .hdr-avatar {
+          width: ${imageSize}px;
+          height: ${imageSize}px;
+          border-radius: 8px;
+          object-fit: cover;
+          background-color: #e5e7eb;
+          border: 2px solid #d1d5db;
+          flex-shrink: 0;
+        }
+
+        .${cls} .hdr-avatar-placeholder {
+          width: ${imageSize}px;
+          height: ${imageSize}px;
+          border-radius: 8px;
+          background-color: #e5e7eb;
+          border: 2px solid #d1d5db;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          overflow: hidden;
+        }
+
+        .${cls} .hdr-avatar-placeholder img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 8px;
+        }
+
+        .${cls} .hdr-info {
+          display: flex;
+          flex-direction: column;
+          gap: 0.35rem;
+          min-width: 0;
+          flex: 1;
+        }
+
+        .${cls} .hdr-name {
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: ${nameColor};
+          line-height: 1.4;
+          word-wrap: break-word;
+        }
+
+        .${cls} .hdr-field-row {
+          display: flex;
+          align-items: flex-start;
+          gap: 0.5rem;
+          font-size: 0.875rem;
+          line-height: 1.6;
+        }
+
+        .${cls} .hdr-field-label {
+          color: #6b7280;
+          font-weight: 500;
+          white-space: nowrap;
+        }
+
+        .${cls} .hdr-field-value {
+          color: #111827;
+          font-weight: 600;
+        }
+
+        .${cls} .hdr-status-badge {
+          display: inline-block;
+          padding: 2px 12px;
+          border-radius: 4px;
+          font-size: 0.75rem;
+          font-weight: 600;
+          color: #fff;
+        }
+
+        .${cls} .hdr-meta-row {
+          display: flex;
+          align-items: baseline;
+          gap: 0.35rem;
+          font-size: 0.875rem;
+          line-height: 1.6;
+        }
+
+        .${cls} .hdr-meta-label {
+          color: #6b7280;
+          font-weight: 400;
+        }
+
+        .${cls} .hdr-meta-value {
+          color: #111827;
+          font-weight: 600;
+        }
+
+        .${cls} .hdr-select {
+          height: 32px;
+          padding: 0 8px;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          font-size: 0.875rem;
+          font-family: Roboto, sans-serif;
+          background: #fff;
+          min-width: 140px;
+          color: #374151;
+        }
+        .${cls} .hdr-select:focus {
+          outline: none;
+          border-color: #ED7C22;
+          box-shadow: 0 0 0 2px rgba(237, 124, 34, 0.15);
+        }
+
+        .${cls} .hdr-input {
+          height: 32px;
+          padding: 0 8px;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          font-size: 0.875rem;
+          font-family: Roboto, sans-serif;
+          background: #fff;
+          min-width: 140px;
+          color: #374151;
+        }
+        .${cls} .hdr-input:focus {
+          outline: none;
+          border-color: #ED7C22;
+          box-shadow: 0 0 0 2px rgba(237, 124, 34, 0.15);
+        }
+
+        @media (max-width: 768px) {
+          .${cls} {
+            flex-direction: column;
+          }
+          .${cls} .hdr-right {
+            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) => {
+                                            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: [translateConfig('Functional Record ID') || 'Functional Record ID', " :"] }), 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: translateConfig('Record Status') || 'Record 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: translateConfig('Select') || '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: [translateConfig('Status Reason') || 'Status Reason', " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: translateConfig('Enter Reason') || 'Enter Reason', 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: [translateConfig('Created by') || 'Created by', " :"] }), 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: [translateConfig('Created at') || 'Created at', " :"] }), 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: [translateConfig('Last Approved by') || 'Last Approved by', " :"] }), 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: [translateConfig('Last Approved at') || 'Last Approved at', " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
+};
+
 /**
  * Register all default/generic widgets
  * This is called automatically when the package is imported
@@ -8922,6 +9247,8 @@ const registerDefaultWidgets = () => {
     widgetRegistry.register({ widget: 'display', component: DisplayWidget });
     // Profile widget for displaying user identity (image, name, ID)
     widgetRegistry.register({ widget: 'profile', component: ProfileWidget });
+    // Header section widget for full-width registry header with profile, status, and metadata
+    widgetRegistry.register({ widget: 'header-section', component: HeaderSectionWidget });
 };
 // Auto-register on import
 registerDefaultWidgets();
@@ -9287,6 +9614,7 @@ exports.DateInputWidget = DateInputWidget;
 exports.DateTimeInputWidget = DateTimeInputWidget;
 exports.DisplayWidget = DisplayWidget;
 exports.FileInputWidget = FileInputWidget;
+exports.HeaderSectionWidget = HeaderSectionWidget;
 exports.IterableAccordionWidget = IterableAccordionWidget;
 exports.JSONEditorPanel = JSONEditorPanel;
 exports.NumberInputWidget = NumberInputWidget;