@openg2p/registry-widgets 0.1.7 → 0.1.9

package/dist/index.js

@@ -671,23 +671,235 @@ const getFormattedNumberLength = (value, format) => {
     return formatted.length;
 };
 
+/**
+ * Date input utilities for parsing, formatting, and validation
+ */
+/**
+ * Parse date string in various formats to Date object
+ */
+const parseDate = (dateString) => {
+    if (!dateString)
+        return null;
+    // Try ISO format first (YYYY-MM-DD)
+    const isoMatch = dateString.match(/^(\d{4})-(\d{2})-(\d{2})/);
+    if (isoMatch) {
+        const date = new Date(parseInt(isoMatch[1]), parseInt(isoMatch[2]) - 1, parseInt(isoMatch[3]));
+        if (!isNaN(date.getTime())) {
+            return date;
+        }
+    }
+    // Try common formats
+    const date = new Date(dateString);
+    if (!isNaN(date.getTime())) {
+        return date;
+    }
+    return null;
+};
+/**
+ * Format date to ISO string (YYYY-MM-DD) for storage
+ */
+const formatDateToISO = (date) => {
+    if (!date)
+        return '';
+    let dateObj;
+    if (date instanceof Date) {
+        dateObj = date;
+    }
+    else if (typeof date === 'string') {
+        const parsed = parseDate(date);
+        if (!parsed)
+            return '';
+        dateObj = parsed;
+    }
+    else {
+        return '';
+    }
+    if (isNaN(dateObj.getTime()))
+        return '';
+    const year = dateObj.getFullYear();
+    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
+    const day = String(dateObj.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+};
+/**
+ * Format date to custom format string
+ */
+const formatDateToString = (date, format) => {
+    if (!date || !format)
+        return '';
+    let dateObj;
+    if (date instanceof Date) {
+        dateObj = date;
+    }
+    else if (typeof date === 'string') {
+        const parsed = parseDate(date);
+        if (!parsed)
+            return '';
+        dateObj = parsed;
+    }
+    else {
+        return '';
+    }
+    if (isNaN(dateObj.getTime()))
+        return '';
+    const day = String(dateObj.getDate()).padStart(2, '0');
+    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
+    const year = dateObj.getFullYear();
+    const yearShort = year.toString().slice(-2);
+    return format
+        .replace(/DD/g, day)
+        .replace(/MM/g, month)
+        .replace(/YYYY/g, year.toString())
+        .replace(/YY/g, yearShort);
+};
+/**
+ * Parse custom format string to Date object
+ */
+const parseDateFromFormat = (dateString, format) => {
+    if (!dateString || !format)
+        return null;
+    // Extract day, month, year positions from format
+    const dayIndex = format.indexOf('DD');
+    const monthIndex = format.indexOf('MM');
+    const yearIndex = format.indexOf('YYYY');
+    const yearShortIndex = format.indexOf('YY');
+    if (dayIndex === -1 || monthIndex === -1 || (yearIndex === -1 && yearShortIndex === -1)) {
+        // Fallback to standard Date parsing
+        return parseDate(dateString);
+    }
+    try {
+        let day = '';
+        let month = '';
+        let year = '';
+        // Extract day (2 digits)
+        if (dayIndex !== -1) {
+            day = dateString.substring(dayIndex, dayIndex + 2);
+        }
+        // Extract month (2 digits)
+        if (monthIndex !== -1) {
+            month = dateString.substring(monthIndex, monthIndex + 2);
+        }
+        // Extract year (4 digits or 2 digits)
+        if (yearIndex !== -1) {
+            year = dateString.substring(yearIndex, yearIndex + 4);
+        }
+        else if (yearShortIndex !== -1) {
+            const yearShort = dateString.substring(yearShortIndex, yearShortIndex + 2);
+            const currentYear = new Date().getFullYear();
+            const currentCentury = Math.floor(currentYear / 100) * 100;
+            const parsedYear = parseInt(yearShort);
+            // Assume 20xx for years 00-50, 19xx for years 51-99
+            year = parsedYear <= 50
+                ? (currentCentury + parsedYear).toString()
+                : (currentCentury - 100 + parsedYear).toString();
+        }
+        if (day && month && year) {
+            const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+            if (!isNaN(date.getTime())) {
+                return date;
+            }
+        }
+    }
+    catch {
+        // Fallback to standard parsing
+    }
+    return parseDate(dateString);
+};
+/**
+ * Get min date based on constraint type
+ */
+const getMinDate = (constraint, minDate) => {
+    if (minDate) {
+        // If it's 'today', return today's date
+        if (minDate === 'today') {
+            return formatDateToISO(new Date());
+        }
+        return minDate;
+    }
+    if (constraint === 'past-only') {
+        // No minimum for past-only (can select any past date)
+        return undefined;
+    }
+    if (constraint === 'future-only') {
+        // Minimum is today for future-only
+        return formatDateToISO(new Date());
+    }
+    return undefined;
+};
+/**
+ * Get max date based on constraint type
+ */
+const getMaxDate = (constraint, maxDate) => {
+    if (maxDate) {
+        // If it's 'today', return today's date
+        if (maxDate === 'today') {
+            return formatDateToISO(new Date());
+        }
+        return maxDate;
+    }
+    if (constraint === 'past-only') {
+        // Maximum is today for past-only
+        return formatDateToISO(new Date());
+    }
+    if (constraint === 'future-only') {
+        // No maximum for future-only (can select any future date)
+        return undefined;
+    }
+    return undefined;
+};
+/**
+ * Validate date constraints
+ */
+const validateDateConstraints = (date, minDate, maxDate, constraint) => {
+    if (!date)
+        return null;
+    const dateObj = date instanceof Date ? date : parseDate(date);
+    if (!dateObj)
+        return null;
+    const dateISO = formatDateToISO(dateObj);
+    const todayISO = formatDateToISO(new Date());
+    // Check constraint type
+    if (constraint === 'past-only') {
+        if (dateISO > todayISO) {
+            return 'Date must be in the past';
+        }
+    }
+    else if (constraint === 'future-only') {
+        if (dateISO < todayISO) {
+            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}`;
+    }
+    // Check maxDate
+    const effectiveMaxDate = getMaxDate(constraint, maxDate);
+    if (effectiveMaxDate && dateISO > effectiveMaxDate) {
+        return `Date must be on or before ${effectiveMaxDate}`;
+    }
+    return null;
+};
+
 /**
  * Format date value
  */
 const formatDate = (value, format) => {
-    if (!value || !format?.dateFormat) {
-        return value?.toString() || '';
+    if (!value) {
+        return '';
     }
+    const dateFormat = format?.dateFormat || 'DD-MM-YYYY';
     try {
-        const date = new Date(value);
-        if (isNaN(date.getTime())) {
+        const date = typeof value === 'string' ? parseDate(value) : new Date(value);
+        if (!date || isNaN(date.getTime())) {
             return value?.toString() || '';
         }
         // Simple date formatting (can be enhanced with date-fns or similar)
         const day = date.getDate().toString().padStart(2, '0');
         const month = (date.getMonth() + 1).toString().padStart(2, '0');
         const year = date.getFullYear();
-        return format.dateFormat
+        return dateFormat
             .replace('DD', day)
             .replace('MM', month)
             .replace('YYYY', year.toString())
@@ -3623,8 +3835,6 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             return [];
         const snapshot = {};
         let hasTable = false;
-        if (!sectionRegisterId)
-            return [];
         const resolvePath = (path) => (pathPrefix ? `${pathPrefix}.${path}` : path);
         widgets.forEach(widget => {
             const widgetPath = widget['widget-data-path'];
@@ -3654,9 +3864,11 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                     : fullPath;
                 cleanedSnapshot[fieldPath] = value;
             });
-            const sectionData = pathPrefix
-                ? getValueByPath(sourceData, resolvePath(sectionRegisterId))
-                : sourceData[sectionRegisterId];
+            const sectionData = sectionRegisterId
+                ? (pathPrefix
+                    ? getValueByPath(sourceData, resolvePath(sectionRegisterId))
+                    : sourceData[sectionRegisterId])
+                : {};
             return [
                 {
                     ...sectionData,
@@ -3808,7 +4020,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
             try {
                 const sectionchanges = {
-                    section_id: dbSectionId,
+                    section_id: dbSectionId ?? originalSection['section-id'],
                     section_register_id: sectionRegisterId,
                     records: [...newSchemaData],
                     files: [...sectionFiles]
@@ -3823,49 +4035,52 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     };
     // IntakeForm: save section then collapse current and expand next (or stay on final section)
     const handleIntakeFormSave = React.useCallback(async () => {
-        if (!store || !onSectionSave || sectionIndex === undefined)
-            return;
-        const sectionWidgets = collectWidgets(originalSection.panels);
-        const currentState = store.getState().widget;
-        const currentSchemaData = currentState.values || {};
-        const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch);
-        if (!isSectionValid)
+        if (sectionIndex === undefined)
             return;
-        const oldSchemaData = schemaData || contextSchemaData;
-        const newSchemaData = trackSectionChages(sectionWidgets, currentSchemaData, namespace);
-        const sectionFiles = [];
-        if (hasSupportingDocuments) {
-            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
-            originalSupportingDocuments.forEach((doc) => {
-                const originalDataPath = doc['document-data-path'];
-                const storeDataPath = namespace && originalDataPath
-                    ? `${namespace}.${originalDataPath}`
-                    : originalDataPath;
-                sectionFiles.push(getValueByPath(currentSchemaData, storeDataPath));
-            });
-        }
-        if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
-            try {
-                await onSectionSave({
-                    section_id: dbSectionId,
-                    section_register_id: sectionRegisterId,
-                    records: [...newSchemaData],
-                    files: [...sectionFiles],
+        // Only run save/validation logic when in draft mode and handlers are available
+        if (isDraft !== false && store && onSectionSave) {
+            const sectionWidgets = collectWidgets(originalSection.panels);
+            const currentState = store.getState().widget;
+            const currentSchemaData = currentState.values || {};
+            const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch);
+            if (!isSectionValid)
+                return;
+            const oldSchemaData = schemaData || contextSchemaData;
+            const newSchemaData = trackSectionChages(sectionWidgets, currentSchemaData, namespace);
+            const sectionFiles = [];
+            if (hasSupportingDocuments) {
+                const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
+                originalSupportingDocuments.forEach((doc) => {
+                    const originalDataPath = doc['document-data-path'];
+                    const storeDataPath = namespace && originalDataPath
+                        ? `${namespace}.${originalDataPath}`
+                        : originalDataPath;
+                    sectionFiles.push(getValueByPath(currentSchemaData, storeDataPath));
                 });
             }
-            catch (error) {
-                console.error('Section Changes Save failed', error);
-                return;
+            if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
+                try {
+                    await onSectionSave({
+                        section_id: dbSectionId ?? originalSection['section-id'],
+                        section_register_id: sectionRegisterId,
+                        records: [...newSchemaData],
+                        files: [...sectionFiles],
+                    });
+                }
+                catch (error) {
+                    console.error('Section Changes Save failed', error);
+                    return;
+                }
             }
+            if (mode === 'IntakeForm') {
+                baselineSnapshotRef.current = buildSectionSnapshot(currentSchemaData, namespace);
+                setIntakeFormBaselineTrigger((prev) => prev + 1);
+            }
+            onSectionDirtyChange?.(sectionId, false);
         }
-        // IntakeForm only: update baseline so section is no longer dirty; trigger re-render so badge updates to "Saved"
-        if (mode === 'IntakeForm') {
-            baselineSnapshotRef.current = buildSectionSnapshot(currentSchemaData, namespace);
-            setIntakeFormBaselineTrigger((prev) => prev + 1);
-        }
-        onSectionDirtyChange?.(sectionId, false);
+        // Always navigate to the next section
         onSectionSaveSuccess?.(sectionIndex);
-    }, [store, onSectionSave, onSectionSaveSuccess, sectionIndex, originalSection, schemaData, contextSchemaData, namespace, hasSupportingDocuments, dbSectionId, sectionRegisterId, dispatch, buildSectionSnapshot, sectionId, onSectionDirtyChange, mode]);
+    }, [store, onSectionSave, onSectionSaveSuccess, sectionIndex, originalSection, schemaData, contextSchemaData, namespace, hasSupportingDocuments, dbSectionId, sectionRegisterId, dispatch, buildSectionSnapshot, sectionId, onSectionDirtyChange, mode, isDraft]);
     // Handle cancel button click
     const handleCancel = () => {
         // Revert values in store to original schema data
@@ -4186,7 +4401,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                             gap: '12px',
                                             marginBottom: '20px',
                                             width: '100%',
-                                        }, children: [jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => onPreviousSection?.(sectionIndex), disabled: sectionIndex === 0, className: "intake-form-prev-btn", style: {
+                                        }, children: [typeof sectionIndex === 'number' && sectionIndex > 0 && (jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => onPreviousSection?.(sectionIndex), className: "intake-form-prev-btn", style: {
                                                     fontFamily: 'Roboto, sans-serif',
                                                     fontSize: '14px',
                                                     fontWeight: 400,
@@ -4194,25 +4409,25 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                                     borderRadius: '10px',
                                                     border: '1px solid #FD8C3E',
                                                     background: '#F3F4F6',
-                                                    color: sectionIndex === 0 ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.5)',
-                                                    cursor: sectionIndex === 0 ? 'not-allowed' : 'pointer',
+                                                    color: 'rgba(0, 0, 0, 0.5)',
+                                                    cursor: 'pointer',
                                                     display: 'inline-flex',
                                                     alignItems: 'center',
                                                     gap: '8px',
-                                                }, children: [jsxRuntimeExports.jsx("img", { src: img$5, alt: "", "aria-hidden": true, style: { width: '14px', height: '14px', opacity: sectionIndex === 0 ? 0.5 : 0.5 } }), translate('common.previous') || 'Prev'] }), jsxRuntimeExports.jsxs("button", { type: "button", onClick: handleIntakeFormSave, disabled: isDraft === false, className: "intake-form-save-btn", style: {
+                                                }, children: [jsxRuntimeExports.jsx("img", { src: img$5, alt: "", "aria-hidden": true, style: { width: '14px', height: '14px', opacity: 0.5 } }), translate('common.previous') || 'Prev'] })), jsxRuntimeExports.jsxs("button", { type: "button", onClick: handleIntakeFormSave, className: "intake-form-save-btn", style: {
                                                     fontFamily: 'Roboto, sans-serif',
                                                     fontSize: '14px',
                                                     fontWeight: 400,
                                                     padding: '8px 24px',
                                                     borderRadius: '10px',
                                                     border: '1px solid #FD8C3E',
-                                                    background: isDraft === false ? '#9CA3AF' : '#F3F4F6',
-                                                    color: isDraft === false ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.5)',
-                                                    cursor: isDraft === false ? 'not-allowed' : 'pointer',
+                                                    background: '#F3F4F6',
+                                                    color: 'rgba(0, 0, 0, 0.5)',
+                                                    cursor: 'pointer',
                                                     display: 'inline-flex',
                                                     alignItems: 'center',
                                                     gap: '8px',
-                                                }, children: [translate('common.save') || 'Save', jsxRuntimeExports.jsx("img", { src: img$4, alt: "", "aria-hidden": true, style: { width: '14px', height: '14px' } })] })] })] }) }))] })) : (
+                                                }, children: [translate('common.next') || 'Next', jsxRuntimeExports.jsx("img", { src: img$4, alt: "", "aria-hidden": true, style: { width: '14px', height: '14px' } })] })] })] }) }))] })) : (
                 /* RegistryView / CRView: standard layout */
                 jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsxs("div", { style: {
                                 marginTop: '35px',
@@ -4469,7 +4684,9 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
         if (index + 1 < safeSections.length) {
             setExpandedSectionIndex(index + 1);
         }
-        // Last section: stay expanded (no action)
+        else {
+            setExpandedSectionIndex(null);
+        }
     }, [safeSections.length]);
     // IntakeForm mode: called when Previous clicked - collapse current, expand previous
     const handlePreviousSection = React.useCallback((index) => {
@@ -6797,217 +7014,6 @@ const BooleanWidget = ({ config }) => {
                                         : '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: falseLabel })] }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
 };
 
-/**
- * Date input utilities for parsing, formatting, and validation
- */
-/**
- * Parse date string in various formats to Date object
- */
-const parseDate = (dateString) => {
-    if (!dateString)
-        return null;
-    // Try ISO format first (YYYY-MM-DD)
-    const isoMatch = dateString.match(/^(\d{4})-(\d{2})-(\d{2})/);
-    if (isoMatch) {
-        const date = new Date(parseInt(isoMatch[1]), parseInt(isoMatch[2]) - 1, parseInt(isoMatch[3]));
-        if (!isNaN(date.getTime())) {
-            return date;
-        }
-    }
-    // Try common formats
-    const date = new Date(dateString);
-    if (!isNaN(date.getTime())) {
-        return date;
-    }
-    return null;
-};
-/**
- * Format date to ISO string (YYYY-MM-DD) for storage
- */
-const formatDateToISO = (date) => {
-    if (!date)
-        return '';
-    let dateObj;
-    if (date instanceof Date) {
-        dateObj = date;
-    }
-    else if (typeof date === 'string') {
-        const parsed = parseDate(date);
-        if (!parsed)
-            return '';
-        dateObj = parsed;
-    }
-    else {
-        return '';
-    }
-    if (isNaN(dateObj.getTime()))
-        return '';
-    const year = dateObj.getFullYear();
-    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
-    const day = String(dateObj.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-};
-/**
- * Format date to custom format string
- */
-const formatDateToString = (date, format) => {
-    if (!date || !format)
-        return '';
-    let dateObj;
-    if (date instanceof Date) {
-        dateObj = date;
-    }
-    else if (typeof date === 'string') {
-        const parsed = parseDate(date);
-        if (!parsed)
-            return '';
-        dateObj = parsed;
-    }
-    else {
-        return '';
-    }
-    if (isNaN(dateObj.getTime()))
-        return '';
-    const day = String(dateObj.getDate()).padStart(2, '0');
-    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
-    const year = dateObj.getFullYear();
-    const yearShort = year.toString().slice(-2);
-    return format
-        .replace(/DD/g, day)
-        .replace(/MM/g, month)
-        .replace(/YYYY/g, year.toString())
-        .replace(/YY/g, yearShort);
-};
-/**
- * Parse custom format string to Date object
- */
-const parseDateFromFormat = (dateString, format) => {
-    if (!dateString || !format)
-        return null;
-    // Extract day, month, year positions from format
-    const dayIndex = format.indexOf('DD');
-    const monthIndex = format.indexOf('MM');
-    const yearIndex = format.indexOf('YYYY');
-    const yearShortIndex = format.indexOf('YY');
-    if (dayIndex === -1 || monthIndex === -1 || (yearIndex === -1 && yearShortIndex === -1)) {
-        // Fallback to standard Date parsing
-        return parseDate(dateString);
-    }
-    try {
-        let day = '';
-        let month = '';
-        let year = '';
-        // Extract day (2 digits)
-        if (dayIndex !== -1) {
-            day = dateString.substring(dayIndex, dayIndex + 2);
-        }
-        // Extract month (2 digits)
-        if (monthIndex !== -1) {
-            month = dateString.substring(monthIndex, monthIndex + 2);
-        }
-        // Extract year (4 digits or 2 digits)
-        if (yearIndex !== -1) {
-            year = dateString.substring(yearIndex, yearIndex + 4);
-        }
-        else if (yearShortIndex !== -1) {
-            const yearShort = dateString.substring(yearShortIndex, yearShortIndex + 2);
-            const currentYear = new Date().getFullYear();
-            const currentCentury = Math.floor(currentYear / 100) * 100;
-            const parsedYear = parseInt(yearShort);
-            // Assume 20xx for years 00-50, 19xx for years 51-99
-            year = parsedYear <= 50
-                ? (currentCentury + parsedYear).toString()
-                : (currentCentury - 100 + parsedYear).toString();
-        }
-        if (day && month && year) {
-            const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-            if (!isNaN(date.getTime())) {
-                return date;
-            }
-        }
-    }
-    catch {
-        // Fallback to standard parsing
-    }
-    return parseDate(dateString);
-};
-/**
- * Get min date based on constraint type
- */
-const getMinDate = (constraint, minDate) => {
-    if (minDate) {
-        // If it's 'today', return today's date
-        if (minDate === 'today') {
-            return formatDateToISO(new Date());
-        }
-        return minDate;
-    }
-    if (constraint === 'past-only') {
-        // No minimum for past-only (can select any past date)
-        return undefined;
-    }
-    if (constraint === 'future-only') {
-        // Minimum is today for future-only
-        return formatDateToISO(new Date());
-    }
-    return undefined;
-};
-/**
- * Get max date based on constraint type
- */
-const getMaxDate = (constraint, maxDate) => {
-    if (maxDate) {
-        // If it's 'today', return today's date
-        if (maxDate === 'today') {
-            return formatDateToISO(new Date());
-        }
-        return maxDate;
-    }
-    if (constraint === 'past-only') {
-        // Maximum is today for past-only
-        return formatDateToISO(new Date());
-    }
-    if (constraint === 'future-only') {
-        // No maximum for future-only (can select any future date)
-        return undefined;
-    }
-    return undefined;
-};
-/**
- * Validate date constraints
- */
-const validateDateConstraints = (date, minDate, maxDate, constraint) => {
-    if (!date)
-        return null;
-    const dateObj = date instanceof Date ? date : parseDate(date);
-    if (!dateObj)
-        return null;
-    const dateISO = formatDateToISO(dateObj);
-    const todayISO = formatDateToISO(new Date());
-    // Check constraint type
-    if (constraint === 'past-only') {
-        if (dateISO > todayISO) {
-            return 'Date must be in the past';
-        }
-    }
-    else if (constraint === 'future-only') {
-        if (dateISO < todayISO) {
-            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}`;
-    }
-    // Check maxDate
-    const effectiveMaxDate = getMaxDate(constraint, maxDate);
-    if (effectiveMaxDate && dateISO > effectiveMaxDate) {
-        return `Date must be on or before ${effectiveMaxDate}`;
-    }
-    return null;
-};
-
 const DateInputWidget = ({ config }) => {
     const { value, formattedValue, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
@@ -8096,6 +8102,13 @@ const TableCellNumber = ({ config, value, onValueChange }) => {
     };
     return (jsxRuntimeExports.jsx("input", { type: "number", value: displayValue, onChange: handleChange, disabled: isReadonly, placeholder: placeholder, min: validationConfig?.min, max: validationConfig?.max, step: formatConfig?.decimalPlaces ? Math.pow(0.1, formatConfig.decimalPlaces) : undefined, className: `w-full h-[28px] px-2 text-sm border focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-right ${isReadonly ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} border-gray-300`, style: { borderRadius: '10px' } }));
 };
+const TableCellDate = ({ config, value, onValueChange }) => {
+    const isReadonly = config['widget-readonly'] || false;
+    const placeholder = config['widget-data-placeholder'] || '';
+    // 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 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 ${isReadonly ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} border-gray-300`, style: { borderRadius: '10px' } }));
+};
 const TableWidget = ({ config }) => {
     const { value, error, touched, isEnabled, onChange, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
@@ -8479,6 +8492,9 @@ const TableWidget = ({ config }) => {
         else if (widgetType === 'number') {
             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) });
+        }
         // 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: {
                     [cellWidgetId]: cellValue !== undefined ? cellValue : (column['widget-data-default'] ?? ''),
@@ -8872,6 +8888,326 @@ const TextAreaWidget = ({ config }) => {
                                     }, children: charCounterText }))] }), hasError && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: errorMessage }))] })] }) }));
 };
 
+const DEFAULT_STATUS_COLORS = {
+    active: '#16A34A',
+    inactive: '#D97706',
+    archived: '#6B7280',
+};
+// ── Hook: load data-source options for a single field ────────────
+// Options are loaded in both view and edit modes because view mode
+// needs them to resolve display labels (e.g. "active" → "Active").
+// For API data sources, loading is deferred to edit mode to avoid
+// unnecessary network calls when only labels are needed.
+function useFieldDataSource(fieldKey, fieldConfig, isReadonly) {
+    const [options, setOptions] = React.useState([]);
+    const { dataSourceRequestHandler, schemaData } = useWidgetContext();
+    const values = reactRedux.useSelector((state) => state.widget.values);
+    const dataSource = fieldConfig?.['data-source'];
+    const dsType = dataSource?.type;
+    const dsKey = dataSource
+        ? `${fieldKey}-${dsType}-${JSON.stringify(dataSource)}`
+        : '';
+    React.useEffect(() => {
+        if (!dataSource) {
+            setOptions([]);
+            return;
+        }
+        // API sources: only fetch when editable to avoid unnecessary calls
+        if (dataSource.type === 'api' && isReadonly) {
+            return;
+        }
+        let cancelled = false;
+        const load = async () => {
+            try {
+                let raw = [];
+                if (dataSource.type === 'static') {
+                    raw = getStaticDataSource(dataSource);
+                }
+                else if (dataSource.type === 'api') {
+                    if (!dataSourceRequestHandler)
+                        return;
+                    raw = await getApiDataSource(dataSource, values, dataSourceRequestHandler);
+                }
+                else if (dataSource.type === 'schema') {
+                    raw = getSchemaDataSource(dataSource, schemaData || {});
+                }
+                const transformed = transformDataSourceOptions(raw, dataSource.valueKey, dataSource.labelKey);
+                if (!cancelled)
+                    setOptions(transformed);
+            }
+            catch (err) {
+                console.error(`[HeaderSectionWidget] Error loading data-source for field "${fieldKey}":`, err);
+                if (!cancelled)
+                    setOptions([]);
+            }
+        };
+        load();
+        return () => { cancelled = true; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dsKey, isReadonly, dataSourceRequestHandler]);
+    return options;
+}
+// ── Main component ───────────────────────────────────────────────
+const HeaderSectionWidget = ({ config }) => {
+    const { config: widgetConfig, getFieldValue, } = useBaseWidget({ config });
+    const dispatch = reactRedux.useDispatch();
+    const { translateConfig } = useWidgetTranslation();
+    const { schemaData } = useWidgetContext();
+    const values = reactRedux.useSelector((state) => state.widget.values);
+    const isReadonly = widgetConfig['widget-readonly'] !== false;
+    const dataPath = widgetConfig['widget-data-path'];
+    // ── Per-field config map ──────────────────────────────────────
+    const fieldConfigMap = React.useMemo(() => {
+        return widgetConfig['widget-field-config'] || {};
+    }, [widgetConfig['widget-field-config']]);
+    // ── Load data source options for the status field ─────────────
+    const statusOptions = useFieldDataSource('status', fieldConfigMap['status'], isReadonly);
+    // ── Resolve field values ──────────────────────────────────────
+    const paths = React.useMemo(() => {
+        if (!dataPath || typeof dataPath !== 'object')
+            return {};
+        return dataPath;
+    }, [dataPath]);
+    const findValue = React.useCallback((fieldKey) => {
+        const path = paths[fieldKey];
+        if (!path)
+            return undefined;
+        const searchIn = (source) => {
+            if (!source)
+                return undefined;
+            let v = getValueByPath(source, path);
+            if (v !== undefined)
+                return v;
+            for (const obj of Object.values(source)) {
+                if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+                    v = getValueByPath(obj, path);
+                    if (v !== undefined)
+                        return v;
+                }
+            }
+            return undefined;
+        };
+        let result = searchIn(values);
+        if (result === undefined)
+            result = searchIn(schemaData);
+        return result;
+    }, [paths, values, schemaData]);
+    const imageUrl = findValue('image') || null;
+    const displayName = findValue('name') || '';
+    const functionalId = findValue('functionalId') || '';
+    const statusValue = findValue('status') || '';
+    const statusReason = findValue('statusReason') || '';
+    const createdBy = findValue('createdBy') || '';
+    const createdAt = findValue('createdAt') || '';
+    const lastApprovedBy = findValue('lastApprovedBy') || '';
+    const lastApprovedAt = findValue('lastApprovedAt') || '';
+    // ── Format options ────────────────────────────────────────────
+    const format = (widgetConfig['widget-data-format'] || {});
+    const imageSize = format.imageSize || 90;
+    const nameColor = format.nameColor || '#ED7C22';
+    const statusColors = {
+        ...DEFAULT_STATUS_COLORS,
+        ...(format.statusColors || {}),
+    };
+    // ── Value change helpers ──────────────────────────────────────
+    const updateFieldValue = React.useCallback((fieldKey, newValue) => {
+        const path = paths[fieldKey];
+        if (!path)
+            return;
+        const updated = setValueByPath({ ...values }, path, newValue);
+        dispatch(setValues(updated));
+    }, [paths, values, dispatch]);
+    // ── Status helpers ────────────────────────────────────────────
+    const statusLabel = React.useMemo(() => {
+        if (!statusValue)
+            return '';
+        const opt = statusOptions.find((o) => String(o.value).toLowerCase() === String(statusValue).toLowerCase());
+        return opt ? opt.label : String(statusValue);
+    }, [statusValue, statusOptions]);
+    const statusColor = statusColors[String(statusValue).toLowerCase()] || '#6B7280';
+    // ── Scoped class for CSS isolation ────────────────────────────
+    const cls = `header-section-widget-${widgetConfig['widget-id']}`;
+    // ── Indicator dot component ───────────────────────────────────
+    const Dot = ({ color }) => (jsxRuntimeExports.jsx("span", { style: {
+            display: 'inline-block',
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            backgroundColor: color,
+            flexShrink: 0,
+            marginTop: 6,
+        } }));
+    // ── RENDER ────────────────────────────────────────────────────
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
+        .${cls} {
+          display: flex;
+          flex-direction: row;
+          gap: 1.5rem;
+          width: 100%;
+          font-family: Roboto, sans-serif;
+          padding: 35px 0 16px 0;
+        }
+
+        .${cls} .hdr-left {
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+          gap: 1rem;
+          flex: 1 1 55%;
+          min-width: 0;
+        }
+
+        .${cls} .hdr-right {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+          flex: 0 0 auto;
+          min-width: 220px;
+        }
+
+        .${cls} .hdr-avatar {
+          width: ${imageSize}px;
+          height: ${imageSize}px;
+          border-radius: 8px;
+          object-fit: cover;
+          background-color: #e5e7eb;
+          border: 2px solid #d1d5db;
+          flex-shrink: 0;
+        }
+
+        .${cls} .hdr-avatar-placeholder {
+          width: ${imageSize}px;
+          height: ${imageSize}px;
+          border-radius: 8px;
+          background-color: #e5e7eb;
+          border: 2px solid #d1d5db;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          overflow: hidden;
+        }
+
+        .${cls} .hdr-avatar-placeholder img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 8px;
+        }
+
+        .${cls} .hdr-info {
+          display: flex;
+          flex-direction: column;
+          gap: 0.35rem;
+          min-width: 0;
+          flex: 1;
+        }
+
+        .${cls} .hdr-name {
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: ${nameColor};
+          line-height: 1.4;
+          word-wrap: break-word;
+        }
+
+        .${cls} .hdr-field-row {
+          display: flex;
+          align-items: flex-start;
+          gap: 0.5rem;
+          font-size: 0.875rem;
+          line-height: 1.6;
+        }
+
+        .${cls} .hdr-field-label {
+          color: #6b7280;
+          font-weight: 500;
+          white-space: nowrap;
+        }
+
+        .${cls} .hdr-field-value {
+          color: #111827;
+          font-weight: 600;
+        }
+
+        .${cls} .hdr-status-badge {
+          display: inline-block;
+          padding: 2px 12px;
+          border-radius: 4px;
+          font-size: 0.75rem;
+          font-weight: 600;
+          color: #fff;
+        }
+
+        .${cls} .hdr-meta-row {
+          display: flex;
+          align-items: baseline;
+          gap: 0.35rem;
+          font-size: 0.875rem;
+          line-height: 1.6;
+        }
+
+        .${cls} .hdr-meta-label {
+          color: #6b7280;
+          font-weight: 400;
+        }
+
+        .${cls} .hdr-meta-value {
+          color: #111827;
+          font-weight: 600;
+        }
+
+        .${cls} .hdr-select {
+          height: 32px;
+          padding: 0 8px;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          font-size: 0.875rem;
+          font-family: Roboto, sans-serif;
+          background: #fff;
+          min-width: 140px;
+          color: #374151;
+        }
+        .${cls} .hdr-select:focus {
+          outline: none;
+          border-color: #ED7C22;
+          box-shadow: 0 0 0 2px rgba(237, 124, 34, 0.15);
+        }
+
+        .${cls} .hdr-input {
+          height: 32px;
+          padding: 0 8px;
+          border: 1px solid #d1d5db;
+          border-radius: 6px;
+          font-size: 0.875rem;
+          font-family: Roboto, sans-serif;
+          background: #fff;
+          min-width: 140px;
+          color: #374151;
+        }
+        .${cls} .hdr-input:focus {
+          outline: none;
+          border-color: #ED7C22;
+          box-shadow: 0 0 0 2px rgba(237, 124, 34, 0.15);
+        }
+
+        @media (max-width: 768px) {
+          .${cls} {
+            flex-direction: column;
+          }
+          .${cls} .hdr-right {
+            min-width: 0;
+          }
+        }
+      ` }), jsxRuntimeExports.jsxs("div", { className: cls, children: [jsxRuntimeExports.jsxs("div", { className: "hdr-left", children: [jsxRuntimeExports.jsxs("div", { children: [imageUrl ? (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: displayName || 'Profile', className: "hdr-avatar", onError: (e) => {
+                                            e.target.style.display = 'none';
+                                            const placeholder = e.target
+                                                .parentElement?.querySelector('.hdr-avatar-placeholder');
+                                            if (placeholder)
+                                                placeholder.style.display = 'flex';
+                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: imageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: "#9CA3AF" }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [translateConfig('Functional Record ID') || 'Functional Record ID', " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? statusColor : '#F59E0B' }), jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: translateConfig('Record Status') || 'Record Status' }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: translateConfig('Select') || 'Select' }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? '#9CA3AF' : '#F59E0B' }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [translateConfig('Status Reason') || 'Status Reason', " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: translateConfig('Enter Reason') || 'Enter Reason', onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [translateConfig('Created by') || 'Created by', " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [translateConfig('Created at') || 'Created at', " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [translateConfig('Last Approved by') || 'Last Approved by', " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [translateConfig('Last Approved at') || 'Last Approved at', " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
+};
+
 /**
  * Register all default/generic widgets
  * This is called automatically when the package is imported
@@ -8911,6 +9247,8 @@ const registerDefaultWidgets = () => {
     widgetRegistry.register({ widget: 'display', component: DisplayWidget });
     // Profile widget for displaying user identity (image, name, ID)
     widgetRegistry.register({ widget: 'profile', component: ProfileWidget });
+    // Header section widget for full-width registry header with profile, status, and metadata
+    widgetRegistry.register({ widget: 'header-section', component: HeaderSectionWidget });
 };
 // Auto-register on import
 registerDefaultWidgets();
@@ -9276,6 +9614,7 @@ exports.DateInputWidget = DateInputWidget;
 exports.DateTimeInputWidget = DateTimeInputWidget;
 exports.DisplayWidget = DisplayWidget;
 exports.FileInputWidget = FileInputWidget;
+exports.HeaderSectionWidget = HeaderSectionWidget;
 exports.IterableAccordionWidget = IterableAccordionWidget;
 exports.JSONEditorPanel = JSONEditorPanel;
 exports.NumberInputWidget = NumberInputWidget;