@openg2p/registry-widgets 0.2.0 → 1.0.0

package/README.md

@@ -16,9 +16,14 @@ The Registry UI Widget Library is a layered, extensible system that enables you
 - ✅ **Data Sources** (static, API, schema reference)
 - ✅ **Formatting** (dates, currency, phone numbers, numbers)
 - ✅ **Widget Registry** system for extensible plugin architecture
-- ✅ **19+ Pre-built Widgets** ready to use
+- ✅ **20 Pre-built Widgets** ready to use (including HeaderSection)
 - ✅ **Internationalization** support via i18next
 - ✅ **Tailwind CSS** ready (unstyled base, you provide styles)
+- ✅ **Multi-mode Section Rendering** (RegistryView, CRView, IntakeForm)
+- ✅ **Geo Hierarchy Cascading Dropdowns** for location-based fields
+- ✅ **Section Builder** with visual and JSON editor for UI schemas
+- ✅ **Form Handle API** for host-driven validation and submission
+- ✅ **Dirty Tracking** with unsaved changes detection per section
 
 ## Installation
 
@@ -77,7 +82,7 @@ The library follows a layered architecture that separates concerns and enables e
               ↓
 ┌─────────────────────────────────────────┐
 │     Widget Components Layer              │
-│  (19+ Pre-built Widgets)                 │
+│  (20 Pre-built Widgets)                  │
 └─────────────────────────────────────────┘
               ↓
 ┌─────────────────────────────────────────┐
@@ -102,7 +107,7 @@ The library follows a layered architecture that separates concerns and enables e
 
 **Widget Registry Layer** - A plugin system that maintains a catalog of available widgets. When a widget is requested by name, the registry looks it up and returns the corresponding React component. This enables dynamic widget loading and easy extensibility - new widgets can be registered without modifying core library code.
 
-**Widget Components Layer** - The actual React components that render UI elements (text inputs, selects, tables, etc.). These are the 19+ pre-built widgets that come with the library. Each widget is a React component that receives configuration and renders the appropriate UI. Custom widgets can be added by registering them in the registry.
+**Widget Components Layer** - The actual React components that render UI elements (text inputs, selects, tables, etc.). These are the 20 pre-built widgets that come with the library. Each widget is a React component that receives configuration and renders the appropriate UI. Custom widgets can be added by registering them in the registry.
 
 **Core Hooks Layer** - React hooks that provide all the business logic for widgets. The `useBaseWidget` hook handles state management, validation, conditional logic, data source loading, and formatting. The `useWidgetTranslation` hook provides internationalization support. Widget components use these hooks to get values, errors, visibility states, and change handlers without directly interacting with Redux or utilities.
 
@@ -224,25 +229,92 @@ Support for multiple validation strategies:
 
 ## Available Widgets
 
-The library includes 19+ pre-built widgets:
+The library includes 20 pre-built widgets:
 
 - **Input Widgets**: TextInput, TextArea, NumberInput, CurrencyInput, DateInput, DateTimeInput, PhoneInput, FileInput
 - **Selection Widgets**: Select, Radio, Checkbox, Boolean
 - **Layout Widgets**: Array, IterableAccordion
 - **Display Widgets**: Display, Profile
 - **Table Widgets**: Table, SimpleTable
+- **Section Widgets**: HeaderSection
 
-> 📚 **Widget documentation coming soon!** Detailed guides for each widget will be available in our tutorial pages.
+### HeaderSection Widget
+
+A full-width header card designed for registry record views. Displays a profile image, record name, functional ID, status badge, and audit metadata (created by / approved by) in a responsive two-column layout. Supports editable status and status-reason fields with data source-driven dropdowns, customisable label overrides via i18n, and configurable status-colour mapping.
+
+```json
+{
+  "widget": "header-section",
+  "widget-type": "group",
+  "widget-id": "registry-header",
+  "widget-data-path": {
+    "image": "record_image_storage_id",
+    "name": "record_name",
+    "functionalId": "functional_record_id",
+    "status": "record_status"
+  }
+}
+```
+
+## Section Modes
+
+`SectionsContainer` supports three display modes via the `mode` prop:
+
+### RegistryView (default)
+
+Standard registry display. Sections render in a CSS Grid layout with an inline **Edit Details** button. Only one section can be in edit mode at a time; editing a section opens it as a portal-based overlay with save/cancel controls.
+
+### CRView (Change Request View)
+
+Read-only comparison view for change requests. Sections display **Created by** / **Approved by** metadata and support `changeRequestType` labels (`"new"` / `"old"`) for side-by-side comparison.
+
+### IntakeForm
+
+Accordion-based registration form. Sections expand and collapse, with **Prev** / **Next** navigation buttons. Supports `isDraft` mode (editable vs read-only), per-section validation on save, and status badges (**Saved** / **Modified and not saved**).
+
+## Form Handle API
+
+`SectionsContainer` exposes a `SectionsFormHandle` via the `onFormReady` callback, enabling host applications to drive form submission externally:
+
+```tsx
+<SectionsContainer
+  sections={sections}
+  mode="IntakeForm"
+  onFormReady={(handle) => {
+    // handle.validate()            – validate all sections, returns boolean
+    // handle.getFormData()         – raw store data (no validation)
+    // handle.validateAndGetData()  – validate then return SectionChanges[]
+    // handle.getStructuredData()   – get records and files without validation
+  }}
+/>
+```
+
+## Geo Hierarchy Cascading Dropdowns
+
+The `useGeoWidgetCascade` hook and `geoHierarchyBuilder` utility provide cascading dropdown functionality for geographic location fields (e.g. Country > State > City). Changes in a parent level automatically reload and reset child dropdowns via the widget event bus.
+
+## Section Builder
+
+A visual UI schema editor shipped as `SectionBuilder`, with sub-components:
+
+- **JSONEditorPanel** — Live JSON editor (powered by `json-edit-react`) for direct schema manipulation
+- **VisualBuilderPanel** — Drag-and-drop visual layout editor
+- **SectionTree** — Tree view of the section/panel/widget hierarchy
+- **PropertyEditor** — Contextual property panel for the selected node
 
 ## Examples
 
 See the `examples/` directory for comprehensive examples demonstrating:
 
-- Basic widget usage
-- Layout widgets
-- Schema internationalization
-- Comparison views
-- And more...
+- Basic widget usage (`usage-example.tsx`)
+- Layout widgets (`LayoutWidgets.tsx`)
+- Schema internationalization (`schema-i18n-example.tsx`)
+- Comparison views (`comparison-view-example.tsx`)
+- Section rendering modes (`section-renderer-example.tsx`)
+- Intake form flow (`intake-form-example.tsx`)
+- Header section widget (`header-section-example.tsx`)
+- Section builder (`section-builder-example.tsx`)
+- JSON editor standalone (`jsoneditor-standalone-example.tsx`)
 
 ## API Reference
 
@@ -280,10 +352,36 @@ Registry for managing widget components.
 
 ### Components
 
-- `SectionsContainer` - Container for rendering sections
-- `SectionRenderer` - Renders individual sections
+- `SectionsContainer` - Container for rendering sections with mode support (RegistryView, CRView, IntakeForm)
+- `SectionRenderer` - Renders individual sections with edit mode, dirty tracking, and accordion support
 - `PanelRenderer` - Renders panels within sections
 - `FilePreviewModal` - Modal for file preview
+- `SectionBuilder` - Visual UI schema editor
+- `JSONEditorPanel` - JSON editor for UI schemas
+- `VisualBuilderPanel` - Visual layout builder
+- `SectionTree` - Tree view of section hierarchy
+- `PropertyEditor` - Property editor for selected nodes
+
+### Hooks
+
+- `useBaseWidget` - Core hook for widget state, validation, conditional logic, and formatting
+- `useWidgetTranslation` - i18n hook for widget labels and messages
+- `useWidgetEventBus` - Pub/sub event bus for inter-widget communication
+- `useWidgetCascade` - Cascading dropdown behaviour between linked widgets
+- `useGeoWidgetCascade` - Geo hierarchy cascading for location-based dropdowns
+
+### Utilities
+
+- `pathUtils` - Dot-notation path read/write for nested data structures
+- `validation` - Built-in, regex, and Zod validation
+- `formatting` - Date, currency, phone, number, and text formatting
+- `conditions` - Conditional show/hide and enable/disable evaluation
+- `dataSource` - Static, API, and schema reference data loading
+- `geoHierarchy` - Geo hierarchy builder for location cascades
+- `sectionValidate` - Section-level validation across all widgets
+- `buildSectionChanges` - Build change payloads from section data
+- `schemaNamespace` - Namespace section configs for multi-instance rendering
+- `schemaTranslation` - Translate UI schemas, widget configs, and panel configs
 
 ## Contributing
 

package/dist/components/SectionRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionRenderer.d.ts","sourceRoot":"","sources":["../../src/components/SectionRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAyC,MAAM,UAAU,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAMlD,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,CAAC;IACvB,wBAAwB,CAAC,EAAE,oBAAoB,CAAC,0BAA0B,CAAC,CAAC;IAC5E,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAClC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAGjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,2GAA2G;IAC3G,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAErE,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,oGAAoG;IACpG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,uGAAuG;IACvG,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,4FAA4F;IAC5F,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,wGAAwG;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,0HAA0H;IAC1H,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjE,iGAAiG;IACjG,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAGD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,wZAwB7B,oBAAoB,4CA45CtB,CAAC"}
+{"version":3,"file":"SectionRenderer.d.ts","sourceRoot":"","sources":["../../src/components/SectionRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAyC,MAAM,UAAU,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAMlD,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,CAAC;IACvB,wBAAwB,CAAC,EAAE,oBAAoB,CAAC,0BAA0B,CAAC,CAAC;IAC5E,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAClC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAGjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,2GAA2G;IAC3G,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAErE,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,oGAAoG;IACpG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,uGAAuG;IACvG,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,4FAA4F;IAC5F,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,wGAAwG;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,0HAA0H;IAC1H,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjE,iGAAiG;IACjG,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAGD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,wZAwB7B,oBAAoB,4CAq6CtB,CAAC"}

package/dist/hooks/useWidgetTheme.d.ts

@@ -0,0 +1,19 @@
+import { resolveTheme } from '../theme';
+export type ResolvedTheme = ReturnType<typeof resolveTheme>;
+export declare const ThemeContext: import("react").Context<Required<{
+    colors: Required<import("../theme").WidgetThemeColors>;
+    section: Required<import("../theme").WidgetThemeSection>;
+    panel: Required<import("../theme").WidgetThemePanel>;
+    button: Required<import("../theme").WidgetThemeButton>;
+    widget: Required<import("../theme").WidgetThemeWidget>;
+}>>;
+/**
+ * Access the resolved widget theme from any component inside `<WidgetProvider>`.
+ *
+ * ```tsx
+ * const theme = useWidgetTheme();
+ * // theme.colors.primary, theme.section.dividerColor, etc.
+ * ```
+ */
+export declare function useWidgetTheme(): ResolvedTheme;
+//# sourceMappingURL=useWidgetTheme.d.ts.map

package/dist/hooks/useWidgetTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidgetTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useWidgetTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,YAAY,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AAE5D,eAAO,MAAM,YAAY;;;;;;GAA6C,CAAC;AAEvE;;;;;;;GAOG;AACH,wBAAgB,cAAc,IAAI,aAAa,CAE9C"}

package/dist/index.esm.js

@@ -4200,6 +4200,15 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
           text-overflow: ellipsis !important;
           white-space: nowrap !important;
         }
+        /* Readonly: prevent flex row from overflowing panel */
+        .${sectionClassId} .TextDisplayWidget {
+          min-width: 0 !important;
+          overflow: hidden !important;
+        }
+        .${sectionClassId} .TextDisplayWidget > .flex-1 {
+          min-width: 0 !important;
+          overflow: hidden !important;
+        }
         /* Readonly value text truncation */
         .${sectionClassId} .TextDisplayWidget > .flex-1 > .text-gray-900 {
           overflow: hidden;
@@ -4530,11 +4539,11 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                                                 fontSize: '14px',
                                                                 color: '#000000',
                                                                 fontWeight: 'normal',
-                                                            }, children: crViewData.approvedDate }))] })] })] })), mode === 'RegistryView' && !hideEditButton && (jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: !isEditMode ? '20px' : 0, marginBottom: '14px' } })), mode === 'RegistryView' && !isEditMode && !hideEditButton && (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center", style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("button", { onClick: handleEdit, className: "font-normal inline-flex items-center gap-2 bg-transparent border-0 p-0 cursor-pointer hover:opacity-80", style: {
+                                                            }, children: crViewData.approvedDate }))] })] })] })), mode === 'RegistryView' && !hideEditButton && (jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: !isEditMode ? '10px' : 0, marginBottom: '14px' } })), mode === 'RegistryView' && !isEditMode && !hideEditButton && (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center", style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("button", { onClick: handleEdit, className: "font-normal inline-flex items-center gap-2 bg-transparent border-0 p-0 cursor-pointer hover:opacity-80", style: {
                                             fontFamily: 'Roboto, sans-serif',
                                             fontSize: '16px',
                                             color: 'rgba(0, 0, 0, 0.50)'
-                                        }, children: ["Edit Details", jsxRuntimeExports.jsx("img", { src: img$8, alt: "right-arrow", className: "w-3.5 h-3.5 brightness-0 opacity-50" })] }) }))] })] })) })] }));
+                                        }, children: [translate('common.editDetails') || 'Edit Details', jsxRuntimeExports.jsx("img", { src: img$8, alt: "right-arrow", className: "w-3.5 h-3.5 brightness-0 opacity-50" })] }) }))] })] })) })] }));
 };
 
 /**
@@ -8935,6 +8944,17 @@ const DEFAULT_STATUS_COLORS = {
     inactive: '#D97706',
     archived: '#6B7280',
 };
+const DEFAULT_LABELS = {
+    functionalId: 'Functional Record ID',
+    status: 'Record Status',
+    statusReason: 'Status Reason',
+    select: 'Select',
+    enterReason: 'Enter Reason',
+    createdBy: 'Created by',
+    createdAt: 'Created at',
+    lastApprovedBy: 'Last Approved by',
+    lastApprovedAt: 'Last Approved at',
+};
 // ── 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").
@@ -8998,6 +9018,21 @@ const HeaderSectionWidget = ({ config }) => {
     const values = useSelector((state) => state.widget.values);
     const isReadonly = widgetConfig['widget-readonly'] !== false;
     const dataPath = widgetConfig['widget-data-path'];
+    // ── Resolve labels ──────────────────────────────────────────────
+    // Priority: widget-labels override → translateConfig(English default) → English default
+    // The host's locale JSON files should use the English text as keys,
+    // e.g. { "Functional Record ID": "ID fonctionnel" }
+    const configLabels = widgetConfig['widget-labels'];
+    const getLabel = useCallback((key) => {
+        const englishDefault = DEFAULT_LABELS[key] || key;
+        if (configLabels?.[key]) {
+            const translated = translateConfig(configLabels[key]);
+            if (translated && translated !== configLabels[key])
+                return translated;
+        }
+        const translated = translateConfig(englishDefault);
+        return translated || englishDefault;
+    }, [configLabels, translateConfig]);
     // ── Per-field config map ──────────────────────────────────────
     const fieldConfigMap = useMemo(() => {
         return widgetConfig['widget-field-config'] || {};
@@ -9045,7 +9080,7 @@ const HeaderSectionWidget = ({ config }) => {
     const lastApprovedAt = findValue('lastApprovedAt') || '';
     // ── Format options ────────────────────────────────────────────
     const format = (widgetConfig['widget-data-format'] || {});
-    const imageSize = format.imageSize || 90;
+    const imageSize = format.imageSize || 120;
     const nameColor = format.nameColor || '#ED7C22';
     const statusColors = {
         ...DEFAULT_STATUS_COLORS,
@@ -9095,7 +9130,7 @@ const HeaderSectionWidget = ({ config }) => {
           flex-direction: row;
           align-items: flex-start;
           gap: 1rem;
-          flex: 1 1 55%;
+          flex: 1 1 50%;
           min-width: 0;
         }
 
@@ -9103,7 +9138,7 @@ const HeaderSectionWidget = ({ config }) => {
           display: flex;
           flex-direction: column;
           gap: 0.5rem;
-          flex: 0 0 auto;
+          flex: 1 1 40%;
           min-width: 220px;
         }
 
@@ -9157,19 +9192,19 @@ const HeaderSectionWidget = ({ config }) => {
           display: flex;
           align-items: flex-start;
           gap: 0.5rem;
-          font-size: 0.875rem;
+          font-size: 1rem;
           line-height: 1.6;
         }
 
         .${cls} .hdr-field-label {
-          color: #6b7280;
-          font-weight: 500;
+          color: rgba(0, 0, 0, 0.5);
+          font-weight: 400;
           white-space: nowrap;
         }
 
         .${cls} .hdr-field-value {
           color: #111827;
-          font-weight: 600;
+          font-weight: 500;
         }
 
         .${cls} .hdr-status-badge {
@@ -9185,18 +9220,18 @@ const HeaderSectionWidget = ({ config }) => {
           display: flex;
           align-items: baseline;
           gap: 0.35rem;
-          font-size: 0.875rem;
+          font-size: 1rem;
           line-height: 1.6;
         }
 
         .${cls} .hdr-meta-label {
-          color: #6b7280;
+          color: rgba(0, 0, 0, 0.5);
           font-weight: 400;
         }
 
         .${cls} .hdr-meta-value {
           color: #111827;
-          font-weight: 600;
+          font-weight: 500;
         }
 
         .${cls} .hdr-select {
@@ -9247,7 +9282,7 @@ const HeaderSectionWidget = ({ config }) => {
                                                 .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 || '-' })] })] })] })] }));
+                                        } })) : 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 || '-' })] })] })] })] }));
 };
 
 /**
@@ -9345,8 +9380,13 @@ var enTranslations = {
 	"common.uploadFile": "Upload File",
 	"common.maxFileSize": "Maximum file size: {{size}} MB",
 	"common.edit": "Edit",
+	"common.editDetails": "Edit Details",
 	"common.save": "Save",
 	"common.cancel": "Cancel",
+	"common.previous": "Prev",
+	"common.next": "Next",
+	"common.sectionSaved": "Saved",
+	"common.sectionModified": "Modified and not saved",
 	"common.supportedDocuments": "Supported Documents",
 	"table.addRecord": "Add New Record",
 	"table.confirm": "Confirm Action",