@openg2p/registry-widgets 1.1.0-dev.9 → 1.1.1

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { createSlice, configureStore } from '@reduxjs/toolkit';
-import React, { useContext, createContext, useMemo, useEffect, useRef, useCallback, useState } from 'react';
+import React, { useContext, createContext, useMemo, useEffect, useRef, useCallback, useState, useId } from 'react';
 import { Provider, useDispatch, useSelector, useStore } from 'react-redux';
 import { z } from 'zod';
 import { createPortal } from 'react-dom';
@@ -807,6 +807,40 @@ const parseDateFromFormat = (dateString, format) => {
     }
     return parseDate(dateString);
 };
+/**
+ * Resolve a stored date value (ISO or parseable string) to YYYY-MM-DD for comparisons.
+ */
+const resolveDateBoundFromFieldValue = (fieldValue) => {
+    if (fieldValue == null || fieldValue === '') {
+        return undefined;
+    }
+    const iso = formatDateToISO(fieldValue);
+    return iso || undefined;
+};
+/**
+ * Pick the stricter (later) minimum when combining static and field-based bounds.
+ */
+const mergeMinDateBounds = (boundA, boundB) => {
+    if (!boundA) {
+        return boundB;
+    }
+    if (!boundB) {
+        return boundA;
+    }
+    return boundA > boundB ? boundA : boundB;
+};
+/**
+ * Pick the stricter (earlier) maximum when combining static and field-based bounds.
+ */
+const mergeMaxDateBounds = (boundA, boundB) => {
+    if (!boundA) {
+        return boundB;
+    }
+    if (!boundB) {
+        return boundA;
+    }
+    return boundA < boundB ? boundA : boundB;
+};
 /**
  * Get min date based on constraint type
  */
@@ -849,10 +883,7 @@ const getMaxDate = (constraint, maxDate) => {
     }
     return undefined;
 };
-/**
- * Validate date constraints
- */
-const validateDateConstraints = (date, minDate, maxDate, constraint) => {
+const validateDateConstraints = (date, minDate, maxDate, constraint, messages) => {
     if (!date)
         return null;
     const dateObj = date instanceof Date ? date : parseDate(date);
@@ -871,15 +902,12 @@ const validateDateConstraints = (date, minDate, maxDate, constraint) => {
             return 'Date must be in the future';
         }
     }
-    // Check minDate
-    const effectiveMinDate = getMinDate(constraint, minDate);
-    if (effectiveMinDate && dateISO < effectiveMinDate) {
-        return `Date must be on or after ${effectiveMinDate}`;
+    // minDate / maxDate are effective bounds (static + field-based), resolved by the caller
+    if (minDate && dateISO < minDate) {
+        return messages?.minDateMessage ?? `Date must be on or after ${minDate}`;
     }
-    // Check maxDate
-    const effectiveMaxDate = getMaxDate(constraint, maxDate);
-    if (effectiveMaxDate && dateISO > effectiveMaxDate) {
-        return `Date must be on or before ${effectiveMaxDate}`;
+    if (maxDate && dateISO > maxDate) {
+        return messages?.maxDateMessage ?? `Date must be on or before ${maxDate}`;
     }
     return null;
 };
@@ -1077,16 +1105,12 @@ const getApiDataSource = async (dataSource, allValues, dataSourceRequestHandler,
             console.error('[getApiDataSource] API data source missing endpoint. Use "endpoint" field to specify the operation (e.g., "get_g2p_geo_level_values")');
             return [];
         }
-        let response;
-        try {
-            response = await dataSourceRequestHandler(service, endpoint, method, requestParams, {
-                headers: dataSource.headers,
-            });
-        }
-        catch (error) {
-            console.error('[getApiDataSource] Handler error:', error);
-            throw error;
-        }
+        // Call handler — let any throw propagate to the outer catch so it is logged once
+        // by useBaseWidget rather than double-logged here (which can cascade when
+        // intercept-console-error.js converts console.error calls into thrown errors).
+        const response = await dataSourceRequestHandler(service, endpoint, method, requestParams, {
+            headers: dataSource.headers,
+        });
         // Handle OpenG2P response format (response_body.response_payload)
         if (response && typeof response === 'object') {
             if (response.response_body?.response_payload && Array.isArray(response.response_body.response_payload)) {
@@ -1109,8 +1133,8 @@ const getApiDataSource = async (dataSource, allValues, dataSourceRequestHandler,
         return [];
     }
     catch (error) {
-        console.error('Error fetching API data source:', error);
-        return [];
+        // Rethrow so useBaseWidget's catch can log it with full widget context
+        throw error;
     }
 };
 /**
@@ -2304,7 +2328,7 @@ const useBaseWidget = (options) => {
                 dispatch(setDataSource({ widgetId, data: transformed }));
             }
             catch (error) {
-                console.error(`[useBaseWidget] ERROR loading data source for ${widgetId}:`, error);
+                console.error(`[useBaseWidget] ERROR loading data source for widget "${widgetId}" (type="${dataSource.type}"):`, error, '\nWidget config:', config, '\ndataSourceRequestHandler provided:', Boolean(dataSourceRequestHandler));
                 dispatch(setDataSource({ widgetId, data: [] }));
             }
             finally {
@@ -3797,6 +3821,116 @@ const namespaceSectionConfig = (section, namespace) => {
     return namespaced;
 };
 
+/** Table-style widgets that bind to an array path in the store / schema. */
+function isTableLikeWidget(widget) {
+    const w = widget.widget;
+    /** widget-type union in types omits legacy values like simple-table still used at runtime */
+    const t = widget['widget-type'];
+    return (w === 'table' ||
+        w === 'dialog-table' ||
+        w === 'simple-table' ||
+        t === 'table' ||
+        t === 'simple-table');
+}
+/**
+ * Resolve `records` for section save payloads.
+ * - Back-compat: path ending in `.records` (e.g. `regId.records`)
+ * - Else: first array snapshot at a string `widget-data-path` on a table-like widget
+ *   (e.g. `household.members` for dialog-table)
+ */
+function extractTableRecordsFromSnapshot(snapshot, sectionWidgets) {
+    const convention = Object.entries(snapshot).find(([key, value]) => key.endsWith('.records') && Array.isArray(value));
+    if (convention) {
+        return convention[1];
+    }
+    const tablePaths = [];
+    sectionWidgets.forEach((widget) => {
+        if (!isTableLikeWidget(widget))
+            return;
+        const p = widget['widget-data-path'];
+        if (typeof p === 'string' && p.length > 0) {
+            tablePaths.push(p);
+        }
+        else if (p && typeof p === 'object') {
+            Object.values(p).forEach((sub) => {
+                if (typeof sub === 'string' && sub.length > 0)
+                    tablePaths.push(sub);
+            });
+        }
+    });
+    for (const path of tablePaths) {
+        const val = snapshot[path];
+        if (Array.isArray(val)) {
+            return val;
+        }
+    }
+    return [];
+}
+
+const isColumnRequired = (column, skipRequired) => {
+    if (skipRequired)
+        return false;
+    const validation = column['widget-data-validation'];
+    return !!(column['widget-required'] || validation?.required);
+};
+const validateTableLikeWidget = (widget, currentSchemaData, dispatch, skipRequired) => {
+    const widgetId = widget['widget-id'];
+    if (!widgetId)
+        return true;
+    const columns = (widget['widget-data-columns'] || []);
+    const value = getWidgetValue(currentSchemaData, widget['widget-data-path'], widgetId);
+    const rows = Array.isArray(value)
+        ? value
+        : [];
+    const activeRows = rows.filter((row) => row?.edit_action !== 'DELETE');
+    const rowErrors = [];
+    let isValid = true;
+    if (!skipRequired && widget['widget-required'] && activeRows.length === 0) {
+        dispatch(setTouched({ widgetId, touched: true }));
+        dispatch(setError({ widgetId, errors: ['At least one record is required'] }));
+        return false;
+    }
+    const hasRequiredColumns = columns.some((col) => isColumnRequired(col, skipRequired));
+    if (!skipRequired && hasRequiredColumns && activeRows.length === 0) {
+        dispatch(setTouched({ widgetId, touched: true }));
+        dispatch(setError({
+            widgetId,
+            errors: ['Add at least one record and fill all required fields'],
+        }));
+        return false;
+    }
+    activeRows.forEach((row, rowIndex) => {
+        columns.forEach((col) => {
+            if (col['widget-readonly'])
+                return;
+            const key = col['column-key'];
+            if (!key)
+                return;
+            const required = isColumnRequired(col, skipRequired);
+            const cellValue = row[key];
+            const errors = validateWidget(cellValue, col['widget-data-validation'], required, skipRequired);
+            if (errors.length > 0) {
+                isValid = false;
+                const label = col['widget-label'] || key;
+                rowErrors.push(`Row ${rowIndex + 1}, ${label}: ${errors[0]}`);
+            }
+        });
+    });
+    if (!isValid) {
+        dispatch(setTouched({ widgetId, touched: true }));
+        dispatch(setError({
+            widgetId,
+            errors: rowErrors.length > 0
+                ? rowErrors.slice(0, 5)
+                : ['Please fix required fields in the table'],
+        }));
+    }
+    else {
+        dispatch(setTouched({ widgetId, touched: false }));
+        dispatch(setError({ widgetId, errors: [] }));
+    }
+    return isValid;
+};
 const collectWidgets = (panels) => {
     let widgets = [];
     panels.forEach((panel) => {
@@ -3825,6 +3959,13 @@ const sectionValidate = (section, currentSchemaData, dispatch, skipRequired = fa
         if (!isVisible)
             continue;
         const widgetId = widget['widget-id'];
+        if (isTableLikeWidget(widget)) {
+            const tableValid = validateTableLikeWidget(widget, currentSchemaData, dispatch, skipRequired);
+            if (!tableValid) {
+                isValid = false;
+            }
+            continue;
+        }
         const value = getWidgetValue(currentSchemaData, widget['widget-data-path'], widgetId);
         const errors = validateWidget(value, widget['widget-data-validation'], widget['widget-required'], skipRequired);
         if (errors.length > 0) {
@@ -3859,52 +4000,6 @@ const sectionValidate = (section, currentSchemaData, dispatch, skipRequired = fa
     return isValid;
 };
 
-/** Table-style widgets that bind to an array path in the store / schema. */
-function isTableLikeWidget(widget) {
-    const w = widget.widget;
-    /** widget-type union in types omits legacy values like simple-table still used at runtime */
-    const t = widget['widget-type'];
-    return (w === 'table' ||
-        w === 'dialog-table' ||
-        w === 'simple-table' ||
-        t === 'table' ||
-        t === 'simple-table');
-}
-/**
- * Resolve `records` for section save payloads.
- * - Back-compat: path ending in `.records` (e.g. `regId.records`)
- * - Else: first array snapshot at a string `widget-data-path` on a table-like widget
- *   (e.g. `household.members` for dialog-table)
- */
-function extractTableRecordsFromSnapshot(snapshot, sectionWidgets) {
-    const convention = Object.entries(snapshot).find(([key, value]) => key.endsWith('.records') && Array.isArray(value));
-    if (convention) {
-        return convention[1];
-    }
-    const tablePaths = [];
-    sectionWidgets.forEach((widget) => {
-        if (!isTableLikeWidget(widget))
-            return;
-        const p = widget['widget-data-path'];
-        if (typeof p === 'string' && p.length > 0) {
-            tablePaths.push(p);
-        }
-        else if (p && typeof p === 'object') {
-            Object.values(p).forEach((sub) => {
-                if (typeof sub === 'string' && sub.length > 0)
-                    tablePaths.push(sub);
-            });
-        }
-    });
-    for (const path of tablePaths) {
-        const val = snapshot[path];
-        if (Array.isArray(val)) {
-            return val;
-        }
-    }
-    return [];
-}
-
 /** Root class on readonly label/value rows; SectionRenderer scopes overflow/ellipsis rules here. */
 const READONLY_VALUE_ROW_ROOT_CLASSES = [
     'TextDisplayWidget',
@@ -3946,7 +4041,7 @@ function scopedClassSelectors(sectionClassId, classNames) {
  * - Panels wrap when they exceed available width
  * - Sections can sit side-by-side if there's space
  */
-const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, changeRequestType, showChangeRequestLabel = true, dbSectionId, sectionRegisterId, onSectionDirtyChange, sectionIndex, sectionCount, expandedSectionIndex, onExpandSection, onSectionSaveSuccess, onPreviousSection, isDraft, onEditModeChange, forceExitEdit, }) => {
+const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, changeRequestType, showChangeRequestLabel = true, dbSectionId, sectionRegisterId, onSectionDirtyChange, sectionIndex, sectionCount, expandedSectionIndex, onExpandSection, onSectionSaveSuccess, onPreviousSection, isDraft, isAccessible = false, onEditModeChange, forceExitEdit, }) => {
     const { translateConfig, translate } = useWidgetTranslation();
     const resolvedTheme = useWidgetTheme();
     const portalCSSVariables = useMemo(() => themeToCSSVariables(resolvedTheme), [resolvedTheme]);
@@ -4012,16 +4107,25 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const isExpandedFromContainer = typeof sectionIndex === 'number' && expandedSectionIndex === sectionIndex;
     const isExpandedStandalone = sectionIndex === undefined && standaloneExpanded;
     const isExpanded = mode === 'IntakeForm' && (isExpandedFromContainer || isExpandedStandalone);
+    // IntakeForm only: tracks whether the user has clicked Next on this section at least once.
+    // Used to unlock the accordion header so the user can navigate back to a visited section.
+    const [hasBeenSavedByUser, setHasBeenSavedByUser] = useState(false);
+    // Accordion header click behaviour in IntakeForm mode:
+    //   - Standalone (no sectionIndex): always toggleable.
+    //   - Managed by SectionsContainer: toggleable only when isAccessible is true
+    //     (i.e. the section has been visited OR is the immediate next one).
+    //     Sections beyond that remain locked.
     const handleAccordionToggle = useCallback(() => {
         if (mode !== 'IntakeForm')
             return;
-        if (typeof sectionIndex === 'number' && onExpandSection) {
-            onExpandSection(sectionIndex);
-        }
-        else if (sectionIndex === undefined) {
+        if (sectionIndex === undefined) {
             setStandaloneExpanded(prev => !prev);
         }
-    }, [mode, sectionIndex, onExpandSection]);
+        else if (isAccessible && onExpandSection) {
+            onExpandSection(sectionIndex);
+        }
+        // Intentionally no-op for locked sections (isAccessible === false)
+    }, [mode, sectionIndex, isAccessible, onExpandSection]);
     // Recursively count all vertical panels, especially those nested inside horizontal panels
     // Typically: horizontal panels at first level contain vertical panels at second level
     // Accounts for panel-column-span: a panel with column-span 3 counts as 3 columns
@@ -4356,8 +4460,6 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const baselineSnapshotRef = useRef(null);
     // IntakeForm only: increment when baseline is updated after save - forces badge to update (refs don't trigger re-renders)
     const [intakeFormBaselineTrigger, setIntakeFormBaselineTrigger] = useState(0);
-    // IntakeForm only: tracks whether the user has actually saved this section (prevents "Saved" badge on initial load)
-    const [hasBeenSavedByUser, setHasBeenSavedByUser] = 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)
@@ -4590,6 +4692,11 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             }
             onSectionDirtyChange?.(sectionId, false);
         }
+        else if (mode === 'IntakeForm') {
+            // No onSectionSave provided, but still mark section as visited so the
+            // user can navigate back to it by clicking the accordion header.
+            setHasBeenSavedByUser(true);
+        }
         // Always navigate to the next section
         onSectionSaveSuccess?.(sectionIndex);
     }, [store, onSectionSave, onSectionSaveSuccess, sectionIndex, originalSection, schemaData, contextSchemaData, namespace, hasSupportingDocuments, dbSectionId, sectionRegisterId, dispatch, buildSectionSnapshot, sectionId, onSectionDirtyChange, mode, isDraft]);
@@ -4808,13 +4915,17 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header h2 {
           color: var(--owt-color-primary-dark, #F07B1A);
         }
-        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header:hover {
+        /* Hover / focus only shown when the header is actually interactive (standalone mode) */
+        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header[data-interactive="true"]:hover {
           opacity: 0.85;
         }
-        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header:focus-visible {
+        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header[data-interactive="true"]:focus-visible {
           outline: 2px solid var(--owt-color-primary, #F5BB1A);
           outline-offset: 2px;
         }
+        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header[data-interactive="false"]:focus-visible {
+          outline: none;
+        }
         .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-content {
           padding-top: 8px;
           padding-bottom: 0px;
@@ -4857,7 +4968,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                     }),
                 }, children: mode === 'IntakeForm' ? (
                 /* IntakeForm: accordion layout - header always visible, content only when expanded */
-                jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("button", { type: "button", id: `intake-form-accordion-header-${sectionId}`, className: "intake-form-accordion-header", onClick: handleAccordionToggle, "aria-expanded": isExpanded, "aria-controls": isExpanded ? `intake-form-accordion-content-${sectionId}` : undefined, style: {
+                jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("button", { type: "button", id: `intake-form-accordion-header-${sectionId}`, className: "intake-form-accordion-header", onClick: handleAccordionToggle, "aria-expanded": isExpanded, "aria-controls": isExpanded ? `intake-form-accordion-content-${sectionId}` : undefined, "data-interactive": sectionIndex === undefined || isAccessible ? 'true' : 'false', style: {
                                 width: '100%',
                                 display: 'flex',
                                 alignItems: 'flex-start',
@@ -4867,7 +4978,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                 marginBottom: 0,
                                 background: 'none',
                                 border: 'none',
-                                cursor: 'pointer',
+                                cursor: sectionIndex === undefined || isAccessible ? 'pointer' : 'default',
                                 textAlign: 'left',
                                 fontFamily: 'Roboto, sans-serif',
                             }, children: [jsxRuntimeExports.jsxs("div", { style: { flex: 1, display: 'flex', alignItems: 'center', gap: '12px', minWidth: 0 }, children: [jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold", style: { margin: 0 }, children: sectionToRender['section-title']
@@ -5165,6 +5276,11 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     const dataSourceRequestHandler = propDataSourceRequestHandler || contextDataSourceRequestHandler;
     // IntakeForm mode: accordion state - which section is expanded (null = none; first expanded by default)
     const [expandedSectionIndex, setExpandedSectionIndex] = useState(0);
+    // IntakeForm mode: high-water mark of the furthest section the user has clicked Next on.
+    // A section at index i is accessible when i <= maxVisitedIndex + 1
+    // (i.e. every visited section plus the one immediately after it).
+    // Starts at -1 so only section 0 is accessible before any Next is clicked.
+    const [maxVisitedIndex, setMaxVisitedIndex] = useState(-1);
     // RegistryView: track which section is currently in edit mode (by section-id); null = none
     const [editingSectionId, setEditingSectionId] = useState(null);
     const handleEditModeChange = useCallback((sectionId, editing) => {
@@ -5189,8 +5305,9 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     const handleExpandSection = useCallback((index) => {
         setExpandedSectionIndex(prev => (prev === index ? null : index));
     }, []);
-    // IntakeForm mode: called after section save - collapse current, expand next
+    // IntakeForm mode: called after section save - advance high-water mark, collapse current, expand next
     const handleSectionSaveSuccess = useCallback((index) => {
+        setMaxVisitedIndex(prev => Math.max(prev, index));
         if (index + 1 < safeSections.length) {
             setExpandedSectionIndex(index + 1);
         }
@@ -5384,6 +5501,8 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
                             onSectionSaveSuccess: handleSectionSaveSuccess,
                             onPreviousSection: handlePreviousSection,
                             isDraft,
+                            // Accessible = every visited section + the one immediately after
+                            isAccessible: index <= maxVisitedIndex + 1,
                         }
                         : {};
                     // RegistryView: single-edit coordination props
@@ -7366,7 +7485,7 @@ const NumberInputWidget = ({ config }) => {
         if (parsed === null) {
             // Allow empty input or partial input (e.g., "-", ".")
             if (inputValue === '' || inputValue === '-' || inputValue === '.') {
-                onChange('');
+                onChange(null);
             }
             // Don't update if invalid - let user continue typing
             return;
@@ -7490,6 +7609,8 @@ const BooleanWidget = ({ config }) => {
         return labels[representation];
     }, [representation, formatConfig, translateConfig]);
     const { trueLabel, falseLabel } = getLabels();
+    const unsetLabel = useMemo(() => translateConfig(formatConfig?.booleanUnsetLabel || 'Not set'), [formatConfig?.booleanUnsetLabel, translateConfig]);
+    const radioGroupName = `${widgetConfig['widget-id'] ?? 'boolean'}__${useId().replace(/:/g, '')}`;
     // Determine current value (handle null/undefined)
     const currentValue = useMemo(() => {
         if (value === null || value === undefined) {
@@ -7521,7 +7642,7 @@ const BooleanWidget = ({ config }) => {
         const label = translateConfig(widgetConfig['widget-label']);
         let displayValue = '';
         if (currentValue === null) {
-            displayValue = '-';
+            displayValue = '';
         }
         else if (currentValue === true) {
             displayValue = trueLabel;
@@ -7533,18 +7654,20 @@ const BooleanWidget = ({ config }) => {
     }
     // Render based on control type
     if (controlType === 'checkbox') {
-        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("label", { className: "flex items-center cursor-pointer", children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: currentValue === true, onChange: handleCheckboxChange, onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: currentValue === true ? trueLabel : (currentValue === false ? falseLabel : '-') })] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("label", { className: "inline-flex items-baseline cursor-pointer gap-2", children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: currentValue === true, onChange: handleCheckboxChange, onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), (currentValue === true || currentValue === false) && (jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: currentValue === true ? trueLabel : falseLabel }))] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
     }
     if (controlType === 'radio') {
         const containerClass = orientation === 'horizontal'
-            ? 'flex flex-row space-x-4'
-            : 'flex flex-col space-y-2';
-        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: containerClass, onBlur: onBlur, children: [allowUnset && (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], checked: currentValue === null, onChange: () => handleRadioChange(null), disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: "-" })] })), jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], checked: currentValue === true, onChange: () => handleRadioChange(true), disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: trueLabel })] }), jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], checked: currentValue === false, onChange: () => handleRadioChange(false), disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: falseLabel })] })] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+            ? 'flex flex-row flex-wrap items-baseline gap-x-4 gap-y-2'
+            : 'flex flex-col items-start gap-2';
+        const radioDisabled = !isEnabled || widgetConfig['widget-readonly'];
+        const optionDisabledClass = radioDisabled ? 'opacity-50 cursor-not-allowed' : '';
+        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: containerClass, onBlur: onBlur, children: [allowUnset && (jsxRuntimeExports.jsxs("label", { className: `inline-flex items-baseline gap-2 cursor-pointer ${optionDisabledClass}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: radioGroupName, checked: currentValue === null, onChange: () => handleRadioChange(null), disabled: radioDisabled, className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: unsetLabel })] })), jsxRuntimeExports.jsxs("label", { className: `inline-flex items-baseline gap-2 cursor-pointer ${optionDisabledClass}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: radioGroupName, checked: currentValue === true, onChange: () => handleRadioChange(true), disabled: radioDisabled, className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: trueLabel })] }), jsxRuntimeExports.jsxs("label", { className: `inline-flex items-baseline gap-2 cursor-pointer ${optionDisabledClass}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: radioGroupName, checked: currentValue === false, onChange: () => handleRadioChange(false), disabled: radioDisabled, className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-base text-gray-700 leading-normal", children: falseLabel })] })] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
     }
     // Toggle/switch control type
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 sm:min-w-[150px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", onBlur: onBlur, children: [allowUnset && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => handleChange(null), disabled: !isEnabled || widgetConfig['widget-readonly'], className: `px-3 py-1 text-sm border ${currentValue === null
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium leading-normal text-gray-700 sm:min-w-[150px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-3", onBlur: onBlur, children: [allowUnset && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => handleChange(null), disabled: !isEnabled || widgetConfig['widget-readonly'], className: `px-3 py-1 text-sm border ${currentValue === null
                                         ? 'bg-blue-600 text-white border-blue-600'
-                                        : 'bg-white text-gray-700 border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}`, style: { borderRadius: '15px' }, children: "-" })), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => handleChange(true), disabled: !isEnabled || widgetConfig['widget-readonly'], className: `px-3 py-1 text-sm border ${currentValue === true
+                                        : 'bg-white text-gray-700 border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}`, style: { borderRadius: '15px' }, children: unsetLabel })), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => handleChange(true), disabled: !isEnabled || widgetConfig['widget-readonly'], className: `px-3 py-1 text-sm border ${currentValue === true
                                         ? 'bg-blue-600 text-white border-blue-600'
                                         : 'bg-white text-gray-700 border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}`, style: { borderRadius: '15px' }, children: trueLabel }), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => handleChange(false), disabled: !isEnabled || widgetConfig['widget-readonly'], className: `px-3 py-1 text-sm border ${currentValue === false
                                         ? 'bg-blue-600 text-white border-blue-600'
@@ -7552,42 +7675,76 @@ const BooleanWidget = ({ config }) => {
 };
 
 const DateInputWidget = ({ config }) => {
-    const { value, formattedValue, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
-    const { translate, translateConfig } = useWidgetTranslation();
+    const { value, error, touched, isEnabled, onChange, onBlur, setError, config: widgetConfig, } = useBaseWidget({ config });
+    const formValues = useSelector((state) => state.widget.values);
+    const { translateConfig } = useWidgetTranslation();
     const formatConfig = widgetConfig['widget-data-format'];
     const optionsConfig = widgetConfig['widget-data-options'];
     const dateFormat = formatConfig?.dateFormat || 'YYYY-MM-DD';
-    const inputMethod = formatConfig?.inputMethod || 'picker'; // Default to picker for better UX
+    const inputMethod = formatConfig?.inputMethod || 'picker';
     const dateConstraint = formatConfig?.dateConstraint || 'any';
     const minDate = optionsConfig?.minDate;
     const maxDate = optionsConfig?.maxDate;
+    const minDateField = optionsConfig?.minDateField;
+    const maxDateField = optionsConfig?.maxDateField;
+    const minDateMessage = optionsConfig?.minDateMessage
+        ? translateConfig(optionsConfig.minDateMessage)
+        : undefined;
+    const maxDateMessage = optionsConfig?.maxDateMessage
+        ? translateConfig(optionsConfig.maxDateMessage)
+        : undefined;
     const defaultToToday = widgetConfig['widget-data-default'] === 'today';
-    // Track manual input value (for manual/hybrid modes)
     const [manualInputValue, setManualInputValue] = useState('');
     const [isFocused, setIsFocused] = useState(false);
-    // Initialize default value to today if configured
+    const fieldMinDate = useMemo(() => {
+        if (!minDateField) {
+            return undefined;
+        }
+        return resolveDateBoundFromFieldValue(getValueByPath(formValues, minDateField));
+    }, [formValues, minDateField]);
+    const fieldMaxDate = useMemo(() => {
+        if (!maxDateField) {
+            return undefined;
+        }
+        return resolveDateBoundFromFieldValue(getValueByPath(formValues, maxDateField));
+    }, [formValues, maxDateField]);
+    const effectiveMinDate = useMemo(() => {
+        const staticMin = getMinDate(dateConstraint, minDate);
+        return mergeMinDateBounds(staticMin, fieldMinDate);
+    }, [dateConstraint, minDate, fieldMinDate]);
+    const effectiveMaxDate = useMemo(() => {
+        const staticMax = getMaxDate(dateConstraint, maxDate);
+        return mergeMaxDateBounds(staticMax, fieldMaxDate);
+    }, [dateConstraint, maxDate, fieldMaxDate]);
+    const constraintMessages = useMemo(() => ({ minDateMessage, maxDateMessage }), [minDateMessage, maxDateMessage]);
+    const runDateConstraintValidation = useCallback((dateValue) => {
+        if (!dateValue) {
+            return null;
+        }
+        return validateDateConstraints(dateValue, effectiveMinDate, effectiveMaxDate, dateConstraint, constraintMessages);
+    }, [effectiveMinDate, effectiveMaxDate, dateConstraint, constraintMessages]);
     useEffect(() => {
         if (defaultToToday && (value === null || value === undefined || value === '')) {
             const todayISO = formatDateToISO(new Date());
             onChange(todayISO);
         }
     }, [defaultToToday, value, onChange]);
-    // Get effective min/max dates
-    const effectiveMinDate = useMemo(() => {
-        return getMinDate(dateConstraint, minDate);
-    }, [dateConstraint, minDate]);
-    const effectiveMaxDate = useMemo(() => {
-        return getMaxDate(dateConstraint, maxDate);
-    }, [dateConstraint, maxDate]);
-    // Convert ISO value to display format
+    // Re-validate when a relative bound field changes (e.g. start date set after end date)
+    useEffect(() => {
+        if (!value) {
+            return;
+        }
+        const constraintError = runDateConstraintValidation(value);
+        if (constraintError) {
+            setError([constraintError]);
+        }
+    }, [fieldMinDate, fieldMaxDate, value, runDateConstraintValidation, setError]);
     const getDisplayValue = useCallback(() => {
-        // For picker mode, always use YYYY-MM-DD
         if (inputMethod === 'picker') {
             if (!value)
                 return '';
             return formatDateToISO(value);
         }
-        // For manual/hybrid modes, use custom format
         if (isFocused && manualInputValue) {
             return manualInputValue;
         }
@@ -7598,7 +7755,6 @@ const DateInputWidget = ({ config }) => {
         }
         return formatDateToString(value, dateFormat);
     }, [value, inputMethod, dateFormat, isFocused, manualInputValue]);
-    // Initialize manual input value
     useEffect(() => {
         if (!isFocused && value) {
             if (dateFormat === 'YYYY-MM-DD') {
@@ -7609,66 +7765,81 @@ const DateInputWidget = ({ config }) => {
             }
         }
     }, [value, dateFormat, isFocused]);
-    // Handle input change
+    const applyConstraintError = useCallback((dateValue) => {
+        const constraintError = runDateConstraintValidation(dateValue);
+        setError(constraintError ? [constraintError] : []);
+    }, [runDateConstraintValidation, setError]);
     const handleChange = useCallback((e) => {
         const inputValue = e.target.value;
         if (inputMethod === 'picker') {
-            // Picker mode: input is always YYYY-MM-DD
             if (inputValue) {
                 const date = parseDate(inputValue);
                 if (date) {
-                    onChange(formatDateToISO(date));
+                    const iso = formatDateToISO(date);
+                    onChange(iso);
+                    applyConstraintError(iso);
                 }
                 else {
                     onChange('');
+                    setError([]);
                 }
             }
             else {
                 onChange('');
+                setError([]);
             }
         }
         else {
-            // Manual/hybrid mode: parse custom format
             setManualInputValue(inputValue);
             if (inputValue) {
                 const date = parseDateFromFormat(inputValue, dateFormat);
                 if (date) {
-                    // Validate constraints
-                    const constraintError = validateDateConstraints(date, minDate, maxDate, dateConstraint);
-                    if (!constraintError) {
-                        onChange(formatDateToISO(date));
-                    }
-                    else {
-                        // Still update the value but validation will catch it
-                        onChange(formatDateToISO(date));
-                    }
+                    const iso = formatDateToISO(date);
+                    onChange(iso);
+                    applyConstraintError(iso);
                 }
             }
             else {
                 onChange('');
+                setError([]);
             }
         }
-    }, [inputMethod, dateFormat, onChange, minDate, maxDate, dateConstraint]);
-    // Handle blur - validate and format
+    }, [inputMethod, dateFormat, onChange, applyConstraintError, setError]);
     const handleBlur = useCallback(() => {
         setIsFocused(false);
         if (inputMethod !== 'picker' && manualInputValue) {
             const date = parseDateFromFormat(manualInputValue, dateFormat);
             if (date) {
-                // Format the value according to the format
                 const formatted = formatDateToString(date, dateFormat);
                 setManualInputValue(formatted);
-                onChange(formatDateToISO(date));
+                const iso = formatDateToISO(date);
+                onChange(iso);
+                applyConstraintError(iso);
             }
             else {
-                // Invalid date, clear it
                 setManualInputValue('');
                 onChange('');
+                setError([]);
             }
         }
         onBlur();
-    }, [inputMethod, manualInputValue, dateFormat, onChange, onBlur]);
-    // Handle focus
+        if (value) {
+            const constraintError = runDateConstraintValidation(value);
+            if (constraintError) {
+                setError([constraintError]);
+            }
+        }
+    }, [
+        inputMethod,
+        manualInputValue,
+        dateFormat,
+        onChange,
+        onBlur,
+        applyConstraintError,
+        value,
+        runDateConstraintValidation,
+        setError,
+    ]);
     const handleFocus = useCallback(() => {
         setIsFocused(true);
         if (value) {
@@ -7680,15 +7851,15 @@ const DateInputWidget = ({ config }) => {
             }
         }
     }, [value, dateFormat]);
-    // Determine placeholder
     const placeholder = useMemo(() => {
-        const hasValue = getDisplayValue() && getDisplayValue().trim().length > 0;
+        const display = getDisplayValue();
+        const hasValue = display && display.trim().length > 0;
         const placeholderText = translateConfig(widgetConfig['widget-data-placeholder']);
-        return hasValue ? undefined : (placeholderText || dateFormat);
+        return hasValue ? undefined : placeholderText || dateFormat;
     }, [getDisplayValue, widgetConfig, translateConfig, dateFormat]);
-    // Determine input type
     const inputType = inputMethod === 'picker' ? 'date' : 'text';
-    // For readonly mode, render as display text
+    const showRequiredError = widgetConfig['widget-required'] && (!value || value === '');
+    const showValidationError = touched && error.length > 0;
     if (widgetConfig['widget-readonly']) {
         const label = translateConfig(widgetConfig['widget-label']);
         let displayValue = '';
@@ -7705,9 +7876,9 @@ const DateInputWidget = ({ config }) => {
         }
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] DateDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("input", { type: inputType, value: getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, min: inputMethod === 'picker' ? effectiveMinDate : undefined, max: inputMethod === 'picker' ? effectiveMaxDate : undefined, className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (!value || value === ''))
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("input", { type: inputType, value: getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, min: inputMethod === 'picker' ? effectiveMinDate : undefined, max: inputMethod === 'picker' ? effectiveMaxDate : undefined, className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${showValidationError || showRequiredError
                                 ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
-                                : 'border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+                                : 'border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']) }), showValidationError && jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] })] })] }) }));
 };
 
 /**
@@ -8255,7 +8426,7 @@ const CheckboxWidget = ({ config }) => {
             const displayValue = isChecked ? 'Yes' : 'No';
             return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] CheckboxDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
         }
-        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("label", { className: "flex items-center cursor-pointer", children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: isChecked, onChange: (e) => onChange(e.target.checked), onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: isChecked ? 'Yes' : 'No' })] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+        return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsxs("label", { className: "inline-flex cursor-pointer items-baseline gap-2", children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: isChecked, onChange: (e) => onChange(e.target.checked), onBlur: onBlur, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), jsxRuntimeExports.jsx("span", { className: "text-base leading-normal text-gray-700", children: isChecked ? 'Yes' : 'No' })] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
     }
     // Multiple checkboxes (with data source) - for array values
     // Process and sort options if needed
@@ -8298,7 +8469,7 @@ const CheckboxWidget = ({ config }) => {
         switch (layout) {
             case 'horizontal':
                 return {
-                    className: 'flex flex-row flex-wrap gap-4',
+                    className: 'flex flex-row flex-wrap items-baseline gap-4',
                     style: undefined,
                 };
             case 'grid':
@@ -8311,7 +8482,7 @@ const CheckboxWidget = ({ config }) => {
             case 'vertical':
             default:
                 return {
-                    className: 'flex flex-col space-y-2',
+                    className: 'flex flex-col gap-2',
                     style: undefined,
                 };
         }
@@ -8325,7 +8496,7 @@ const CheckboxWidget = ({ config }) => {
             : '-';
         return (jsxRuntimeExports.jsxs("div", { className: "mb-3 CheckboxDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-sm text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("div", { className: layoutConfig.className, style: layoutConfig.style, onBlur: onBlur, children: loading ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: translate('common.loading') })) : (processedOptions.map((option) => (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", value: option.value, checked: selectedValues.includes(option.value), onChange: (e) => handleCheckboxChange(option.value, e.target.checked), disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: translateConfig(option.label) })] }, option.value)))) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-baseline", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium leading-normal text-gray-700 md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0 sm:pt-0.5", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("div", { className: layoutConfig.className, style: layoutConfig.style, onBlur: onBlur, children: loading ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: translate('common.loading') })) : (processedOptions.map((option) => (jsxRuntimeExports.jsxs("label", { className: `inline-flex cursor-pointer items-baseline gap-2 ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", value: option.value, checked: selectedValues.includes(option.value), onChange: (e) => handleCheckboxChange(option.value, e.target.checked), disabled: !isEnabled || widgetConfig['widget-readonly'], className: "relative top-[0.2em] h-4 w-4 shrink-0 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }), jsxRuntimeExports.jsx("span", { className: "text-base leading-normal text-gray-700", children: translateConfig(option.label) })] }, option.value)))) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
 };
 
 const SimpleTableWidget = ({ config }) => {
@@ -8651,16 +8822,70 @@ const TableCellNumber = ({ config, value, onValueChange }) => {
             backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
         } }));
 };
-const TableCellDate = ({ config, value, onValueChange }) => {
+const TableCellDate = ({ config, value, rowValues, onValueChange }) => {
+    const { translateConfig } = useWidgetTranslation();
     const isReadonly = config['widget-readonly'] || false;
     const placeholder = config['widget-data-placeholder'] || '';
+    const optionsConfig = config['widget-data-options'];
+    const formatConfig = config['widget-data-format'];
+    const dateConstraint = formatConfig?.dateConstraint || 'any';
+    const minDate = optionsConfig?.minDate;
+    const maxDate = optionsConfig?.maxDate;
+    const minDateField = optionsConfig?.minDateField;
+    const maxDateField = optionsConfig?.maxDateField;
+    const minDateMessage = optionsConfig?.minDateMessage
+        ? translateConfig(optionsConfig.minDateMessage)
+        : undefined;
+    const maxDateMessage = optionsConfig?.maxDateMessage
+        ? translateConfig(optionsConfig.maxDateMessage)
+        : undefined;
+    const [constraintError, setConstraintError] = useState(null);
+    const resolveSiblingDate = (fieldRef) => {
+        if (!fieldRef || !rowValues) {
+            return undefined;
+        }
+        const raw = getValueByPath(rowValues, fieldRef) ?? rowValues[fieldRef];
+        return resolveDateBoundFromFieldValue(raw);
+    };
+    const fieldMinDate = useMemo(() => resolveSiblingDate(minDateField), [minDateField, rowValues]);
+    const fieldMaxDate = useMemo(() => resolveSiblingDate(maxDateField), [maxDateField, rowValues]);
+    const effectiveMinDate = useMemo(() => {
+        const staticMin = getMinDate(dateConstraint, minDate);
+        return mergeMinDateBounds(staticMin, fieldMinDate);
+    }, [dateConstraint, minDate, fieldMinDate]);
+    const effectiveMaxDate = useMemo(() => {
+        const staticMax = getMaxDate(dateConstraint, maxDate);
+        return mergeMaxDateBounds(staticMax, fieldMaxDate);
+    }, [dateConstraint, maxDate, fieldMaxDate]);
+    const constraintMessages = useMemo(() => ({ minDateMessage, maxDateMessage }), [minDateMessage, maxDateMessage]);
     // input type="date" requires YYYY-MM-DD format
     const displayValue = value && typeof value === 'string' ? value.split('T')[0] : '';
-    return (jsxRuntimeExports.jsx("input", { type: "date", value: displayValue, onChange: (e) => onValueChange(e.target.value), disabled: isReadonly, placeholder: placeholder, className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
-            borderRadius: '10px',
-            borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
-            backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
-        } }));
+    useEffect(() => {
+        if (!displayValue) {
+            setConstraintError(null);
+            return;
+        }
+        const error = validateDateConstraints(displayValue, effectiveMinDate, effectiveMaxDate, dateConstraint, constraintMessages);
+        setConstraintError(error);
+    }, [displayValue, effectiveMinDate, effectiveMaxDate, dateConstraint, constraintMessages]);
+    const handleChange = (e) => {
+        const nextValue = e.target.value;
+        onValueChange(nextValue);
+        if (!nextValue) {
+            setConstraintError(null);
+            return;
+        }
+        const error = validateDateConstraints(nextValue, effectiveMinDate, effectiveMaxDate, dateConstraint, constraintMessages);
+        setConstraintError(error);
+    };
+    const hasError = Boolean(constraintError);
+    return (jsxRuntimeExports.jsxs("div", { className: "w-full", children: [jsxRuntimeExports.jsx("input", { type: "date", value: displayValue, onChange: handleChange, disabled: isReadonly, placeholder: placeholder, min: effectiveMinDate, max: effectiveMaxDate, title: constraintError || translateConfig(config['widget-data-tooltip']), className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly ? 'cursor-not-allowed' : ''} ${hasError ? 'border-red-500' : ''} table-cell-input`, style: {
+                    borderRadius: '10px',
+                    borderColor: hasError
+                        ? 'var(--owt-color-error, #B91C1C)'
+                        : 'var(--owt-widget-input-border, #C4C4C4)',
+                    backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
+                } }), hasError && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-xs mt-0.5 leading-tight", children: constraintError }))] }));
 };
 const TableWidget = ({ config }) => {
     const { value, error, touched, isEnabled, onChange, config: widgetConfig, } = useBaseWidget({ config });
@@ -9019,11 +9244,21 @@ const TableWidget = ({ config }) => {
             });
         }
     }, [isAdding, newRowData, columns, widgetConfig, rows.length, dispatch]);
+    const getRowValuesForEdit = useCallback((rowIndex) => {
+        if (editingState && editingState.rowIndex === rowIndex) {
+            return editingState.currentValue ?? {};
+        }
+        if (isAdding && rowIndex === rows.length && newRowData) {
+            return newRowData;
+        }
+        return rows[rowIndex] ?? {};
+    }, [editingState, isAdding, rows, newRowData]);
     // Lightweight cell renderer for table cells (no labels, compact)
     const renderTableCell = useCallback((rowIndex, column, cellValue, isReadonly) => {
         const columnKey = column['column-key'];
         const widgetType = column.widget || 'text';
         const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${columnKey}`;
+        const rowValues = getRowValuesForEdit(rowIndex);
         // Use lightweight cell config (no label, minimal styling)
         const cellConfig = {
             ...column,
@@ -9046,7 +9281,7 @@ const TableWidget = ({ config }) => {
             return jsxRuntimeExports.jsx(TableCellNumber, { config: cellConfig, value: cellValue, onValueChange: (newValue) => updateCellValue(columnKey, newValue, rowIndex) });
         }
         else if (widgetType === 'date') {
-            return jsxRuntimeExports.jsx(TableCellDate, { config: cellConfig, value: cellValue, onValueChange: (newValue) => updateCellValue(columnKey, newValue, rowIndex) });
+            return jsxRuntimeExports.jsx(TableCellDate, { config: cellConfig, value: cellValue, rowValues: rowValues, onValueChange: (newValue) => updateCellValue(columnKey, newValue, rowIndex) });
         }
         // For other widget types, use WidgetRenderer but with compact styling
         return (jsxRuntimeExports.jsx("div", { className: "table-cell-widget", style: { margin: 0, padding: 0 }, children: jsxRuntimeExports.jsx(WidgetRenderer, { config: cellConfig, schemaData: {
@@ -9054,7 +9289,7 @@ const TableWidget = ({ config }) => {
                 }, onValueChange: (widgetId, newValue) => {
                     updateCellValue(columnKey, newValue, rowIndex);
                 } }) }));
-    }, [widgetConfig, updateCellValue]);
+    }, [widgetConfig, updateCellValue, getRowValuesForEdit]);
     // Render cell content (widget in edit mode, formatted value in view mode)
     const renderCell = useCallback((rowIndex, column, row) => {
         const columnKey = column['column-key'];
@@ -9364,6 +9599,27 @@ const DialogTableWidget = ({ config }) => {
     }, [formData, columns, storeValues, dialogFieldWidgetId]);
     const saveDialog = useCallback(() => {
         const payload = collectMergedRowPayload();
+        let hasErrors = false;
+        columns.forEach((col) => {
+            const key = col['column-key'];
+            const cellWidgetId = dialogFieldWidgetId(key);
+            const isColReadonly = isReadonly || col['widget-readonly'] === true;
+            if (isColReadonly)
+                return;
+            const cellValue = payload[key];
+            const validationErrors = validateWidget(cellValue, col['widget-data-validation'], col['widget-required']);
+            if (validationErrors && validationErrors.length > 0) {
+                hasErrors = true;
+                dispatch(setError({ widgetId: cellWidgetId, errors: validationErrors }));
+                dispatch(setTouched({ widgetId: cellWidgetId, touched: true }));
+            }
+            else {
+                dispatch(setError({ widgetId: cellWidgetId, errors: [] }));
+            }
+        });
+        if (hasErrors) {
+            return;
+        }
         if (dialogMode === 'add') {
             const savedRow = { ...payload, edit_action: 'ADD' };
             onChange([...rows, savedRow]);
@@ -9379,7 +9635,7 @@ const DialogTableWidget = ({ config }) => {
             onChange(newRows);
             closeDialog();
         }
-    }, [collectMergedRowPayload, dialogMode, onChange, rows, closeDialog, activeRowIndex]);
+    }, [collectMergedRowPayload, dialogMode, onChange, rows, closeDialog, activeRowIndex, columns, dialogFieldWidgetId, isReadonly, dispatch]);
     const deleteRow = useCallback((rowIndex) => {
         const newRows = rows.filter((_, i) => i !== rowIndex);
         onChange(newRows);
@@ -9730,10 +9986,13 @@ const TextAreaWidget = ({ config }) => {
     // For readonly mode, render as preformatted text using <pre> tag
     if (isReadonly) {
         const displayValue = getStringValue() || '-';
-        return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] TextAreaDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("pre", { className: "text-base text-gray-900 font-medium whitespace-pre-wrap", title: String(displayValue), style: {
+        return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] TextAreaDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { title: String(displayValue), className: "text-base text-gray-900 font-medium overflow-y-auto whitespace-pre-wrap break-words", style: {
                             fontFamily: 'Roboto, sans-serif',
-                            margin: 0,
-                            padding: 0,
+                            height: '56px',
+                            minHeight: '56px',
+                            maxHeight: '56px',
+                            lineHeight: '20px',
+                            padding: '8px 0',
                             backgroundColor: 'transparent',
                             border: 'none',
                         }, children: displayValue }) })] }));
@@ -10202,20 +10461,29 @@ const HeaderSectionWidget = ({ config }) => {
         .${cls} .hdr-field-row {
           display: flex;
           align-items: flex-start;
-          gap: 0.5rem;
           font-size: 1rem;
           line-height: 1.6;
         }
 
         .${cls} .hdr-field-label {
+          width: 50%;
+          flex: 0 0 50%;
           color: rgba(0, 0, 0, 0.5);
           font-weight: 400;
           white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding-right: 4px;
         }
 
         .${cls} .hdr-field-value {
+          width: 50%;
+          flex: 0 0 50%;
           color: var(--owt-color-text, #111827);
           font-weight: 500;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
 
         .${cls} .hdr-status-badge {
@@ -10225,24 +10493,38 @@ const HeaderSectionWidget = ({ config }) => {
           font-size: 0.75rem;
           font-weight: 600;
           color: #fff;
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
         .${cls} .hdr-meta-row {
           display: flex;
           align-items: baseline;
-          gap: 0.35rem;
           font-size: 1rem;
           line-height: 1.6;
         }
 
         .${cls} .hdr-meta-label {
+          width: 50%;
+          flex: 0 0 50%;
           color: rgba(0, 0, 0, 0.5);
           font-weight: 400;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding-right: 4px;
         }
 
         .${cls} .hdr-meta-value {
+          width: 50%;
+          flex: 0 0 50%;
           color: var(--owt-color-text, #111827);
           font-weight: 500;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
 
         .${cls} .hdr-select {
@@ -10306,7 +10588,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: 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.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [jsxRuntimeExports.jsx("input", { type: "text", className: `hdr-input ${(!isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing) ? 'hdr-input--error' : ''}`, value: statusReason, placeholder: getLabel('enterReason'), required: isStatusChanged, "aria-required": isStatusChanged, "aria-invalid": !isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing, onBlur: () => {
+                                        } })) : 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", title: `${getLabel('functionalId')} :`, children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", title: functionalId || '-', children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx("span", { className: "hdr-field-label", title: getLabel('status'), children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, title: statusLabel, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", title: "-", 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", title: `${getLabel('statusReason')} :`, children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", title: statusReason || '-', children: statusReason || '-' })) : (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [jsxRuntimeExports.jsx("input", { type: "text", className: `hdr-input ${(!isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing) ? 'hdr-input--error' : ''}`, value: statusReason, placeholder: getLabel('enterReason'), required: isStatusChanged, "aria-required": isStatusChanged, "aria-invalid": !isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing, onBlur: () => {
                                                             if (isReasonMissing)
                                                                 setShowReasonRequired(true);
                                                         }, onChange: (e) => {
@@ -10314,7 +10596,7 @@ const HeaderSectionWidget = ({ config }) => {
                                                             if (showReasonRequired && String(e.target.value || '').trim().length > 0) {
                                                                 setShowReasonRequired(false);
                                                             }
-                                                        } }), !isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing ? (jsxRuntimeExports.jsx("div", { className: "hdr-error-text", children: getLabel('enterReason') })) : null] }))] })] })] }), jsxRuntimeExports.jsx("div", { className: "hdr-right", children: jsxRuntimeExports.jsxs("div", { className: "hdr-right-top", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-col", 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 || '-' })] })] }), score ? (jsxRuntimeExports.jsx("div", { className: "hdr-score-ring", style: { ['--pct']: score.percent }, "aria-label": `Completion score ${score.completionDisplay} of ${score.idealDisplay} (${score.percent}%)`, title: `${score.completionDisplay} / ${score.idealDisplay} (${score.percent}%)`, children: jsxRuntimeExports.jsx("div", { className: "hdr-score-value", children: String(score.completionDisplay) }) })) : null] }) })] })] }));
+                                                        } }), !isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing ? (jsxRuntimeExports.jsx("div", { className: "hdr-error-text", children: getLabel('enterReason') })) : null] }))] })] })] }), jsxRuntimeExports.jsx("div", { className: "hdr-right", children: jsxRuntimeExports.jsxs("div", { className: "hdr-right-top", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-col", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", title: `${getLabel('createdBy')} :`, children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", title: createdBy || '-', children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", title: `${getLabel('createdAt')} :`, children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", title: createdAt || '-', children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", title: `${getLabel('lastApprovedBy')} :`, children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", title: lastApprovedBy || '-', children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", title: `${getLabel('lastApprovedAt')} :`, children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", title: lastApprovedAt || '-', children: lastApprovedAt || '-' })] })] }), score ? (jsxRuntimeExports.jsx("div", { className: "hdr-score-ring", style: { ['--pct']: score.percent }, "aria-label": `Completion score ${score.completionDisplay} of ${score.idealDisplay} (${score.percent}%)`, title: `${score.completionDisplay} / ${score.idealDisplay} (${score.percent}%)`, children: jsxRuntimeExports.jsx("div", { className: "hdr-score-value", children: String(score.completionDisplay) }) })) : null] }) })] })] }));
 };
 
 function getValueByPathOrKey(obj, path) {