@airoom/nextmin-react 2.0.1 → 2.0.3

package/dist/components/SchemaForm.js

@@ -248,7 +248,7 @@ function toJsonString(v) {
     return typeof v === 'string' ? v : JSON.stringify(v);
 }
 /** --------------------------------------------------------------------------------------- **/
-export function SchemaForm({ model, schemaOverride, initialValues, submitLabel = 'Save', busy = false, showReset = true, onSubmit, fieldErrors, }) {
+export function SchemaForm({ model, schemaOverride, initialValues, submitLabel = 'Save', busy = false, showReset = true, onSubmit, fieldErrors, isEdit: isEditProp, }) {
     const mapsKey = useGoogleMapsKey();
     const formUid = useId();
     const { items } = useSelector((s) => s.schemas);
@@ -286,6 +286,16 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
     // For auto-slugging
     const [manuallyEditedSlugs, setManuallyEditedSlugs] = useState(new Set());
     const [pendingSlugChecks, setPendingSlugChecks] = useState({});
+    const [internalFieldErrors, setInternalFieldErrors] = useState(fieldErrors ?? []);
+    useEffect(() => {
+        setInternalFieldErrors(fieldErrors ?? []);
+    }, [fieldErrors]);
+    const getFieldError = (fieldName) => {
+        const match = internalFieldErrors.find((fe) => fe &&
+            (fe.field === fieldName ||
+                fe.field.toLowerCase() === fieldName.toLowerCase()));
+        return match?.message;
+    };
     useEffect(() => {
         const timer = setTimeout(async () => {
             const entries = Object.entries(pendingSlugChecks);
@@ -308,8 +318,9 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
         return () => clearTimeout(timer);
     }, [pendingSlugChecks, model, form.id, form._id, form]);
     const [error, setError] = useState();
-    const isEdit = useMemo(() => !!(initialValues &&
-        (initialValues.id || initialValues._id)), [initialValues]);
+    const isEdit = useMemo(() => isEditProp ??
+        !!(initialValues &&
+            (initialValues.id || initialValues._id)), [initialValues, isEditProp]);
     useEffect(() => {
         const next = { ...(initialValues ?? {}) };
         if ('password' in next)
@@ -333,13 +344,19 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
             .map(toName)
             .filter((s) => !!s)
             .map((s) => s.toLowerCase());
-        const result = configured.length > 0 ? configured : ['admin', 'superadmin'];
+        const result = configured.length > 0 ? configured : ['admin', 'superadmin', 'super-admin', 'super admin', 'developer'];
         return result;
     }, [schema]);
     const canBypassPrivacy = useMemo(() => {
-        const userRolesLC = sessionRole.map((r) => r.toLowerCase());
-        const result = userRolesLC.some((r) => bypassRoles.includes(r));
-        return result;
+        const userRolesLC = sessionRole.map((r) => r.toLowerCase().replace(/[\s\-_]+/g, ''));
+        const normalizedBypass = bypassRoles.map(r => r.toLowerCase().replace(/[\s\-_]+/g, ''));
+        if (userRolesLC.some((r) => normalizedBypass.includes(r))) {
+            return true;
+        }
+        if (userRolesLC.some(r => r.includes('admin') || r.includes('developer') || r.includes('owner') || r.includes('super'))) {
+            return true;
+        }
+        return false;
     }, [sessionRole, bypassRoles]);
     const fields = useMemo(() => {
         const allFields = Object.entries(schema.attributes);
@@ -401,6 +418,8 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
     }, [schema, canBypassPrivacy, isEdit]);
     const gridClass = 'grid gap-4 grid-cols-2';
     const handleChange = (name, value) => {
+        setInternalFieldErrors((prev) => prev.filter((fe) => fe.field !== name &&
+            fe.field.toLowerCase() !== name.toLowerCase()));
         setForm((f) => {
             const next = { ...f, [name]: value };
             if (schema) {
@@ -493,7 +512,7 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
                                                                 [fieldName]: fieldValue,
                                                             };
                                                             handleChange(name, next);
-                                                        }, disabled: busy, inputClassNames: inputClassNames, selectClassNames: selectClassNames, mapsKey: mapsKey, availableSchemas: items, formState: it }) }, `${name}-${idx}-${k}`));
+                                                        }, disabled: busy, inputClassNames: inputClassNames, selectClassNames: selectClassNames, mapsKey: mapsKey, availableSchemas: items, formState: it, isEdit: isEdit, canBypassPrivacy: canBypassPrivacy, isInvalid: Boolean(getFieldError(`${name}.${idx}.${k}`) || getFieldError(`${name}.${k}`) || getFieldError(k)), errorMessage: getFieldError(`${name}.${idx}.${k}`) || getFieldError(`${name}.${k}`) || getFieldError(k) }) }, `${name}-${idx}-${k}`));
                                             }), _jsx("div", { className: "col-span-2 flex justify-between", children: _jsx(Button, { size: "sm", variant: "flat", color: "danger", isDisabled: !canRemove, onPress: () => {
                                                         const next = items.slice();
                                                         next.splice(idx, 1);
@@ -513,7 +532,7 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
                                     return (_jsx("div", { className: isRich ? 'col-span-2' : 'col-span-1', children: _jsx(SchemaField, { uid: `${formUid}-${name}`, name: k, attr: a, value: obj?.[k], onChange: (fieldName, fieldValue) => {
                                                 const next = { ...(obj || {}), [fieldName]: fieldValue };
                                                 handleChange(name, next);
-                                            }, disabled: busy, inputClassNames: inputClassNames, selectClassNames: selectClassNames, mapsKey: mapsKey, availableSchemas: items, formState: obj }) }, `${name}-${k}`));
+                                            }, disabled: busy, inputClassNames: inputClassNames, selectClassNames: selectClassNames, mapsKey: mapsKey, availableSchemas: items, formState: obj, isEdit: isEdit, canBypassPrivacy: canBypassPrivacy, isInvalid: Boolean(getFieldError(`${name}.${k}`) || getFieldError(k)), errorMessage: getFieldError(`${name}.${k}`) || getFieldError(k) }) }, `${name}-${k}`));
                                 }) })] }, name));
                 }
                 // let password reflect local state, but never prefill
@@ -525,58 +544,94 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
                 // If it's a rich text field, force full width
                 const isRich = attr?.rich === true;
                 const dynamicColClass = isRich ? 'col-span-2' : colClass;
+                const fieldErr = getFieldError(name);
                 return (_jsx("div", { className: dynamicColClass, children: _jsx(SchemaField, { uid: formUid, name: name, attr: attr, inputClassNames: inputClassNames, selectClassNames: selectClassNames, value: baseValue, onChange: handleChange, disabled: busy, 
                         // pass schemas for slash cmd
-                        availableSchemas: items, mapsKey: mapsKey, formState: form }) }, name));
+                        availableSchemas: items, mapsKey: mapsKey, formState: form, isEdit: isEdit, canBypassPrivacy: canBypassPrivacy, isInvalid: Boolean(fieldErr), errorMessage: fieldErr }) }, name));
             }), error && (_jsx("div", { className: "col-span-2", children: _jsx("div", { className: "text-danger text-sm", children: error }) })), _jsxs("div", { className: "flex gap-2 col-span-2", children: [_jsx(Button, { type: "submit", color: "primary", isLoading: busy, children: submitLabel }), showReset && (_jsx(Button, { type: "reset", variant: "flat", isDisabled: busy, children: "Reset" }))] })] }));
 }
-function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNames, selectClassNames, mapsKey, availableSchemas, formState, }) {
+function isAttrReadOnly(attr, isEdit = false) {
+    if (!attr)
+        return false;
+    const a = Array.isArray(attr) ? attr[0] : attr;
+    if (a?.readOnly === true)
+        return true;
+    if (typeof a?.readOnly === 'object' && a?.readOnly !== null) {
+        return isEdit ? !!a.readOnly.edit : !!a.readOnly.create;
+    }
+    if (typeof a?.editable === 'boolean') {
+        return isEdit ? !a.editable : false;
+    }
+    if (typeof a?.editable === 'object' && a?.editable !== null) {
+        return isEdit ? !a.editable.edit : !a.editable.create;
+    }
+    return false;
+}
+function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNames, selectClassNames, mapsKey, availableSchemas, formState, isEdit = false, canBypassPrivacy = false, isInvalid = false, errorMessage, }) {
     const id = `${uid}-${name}`;
     const label = attr?.label ?? formatLabel(name);
-    const required = !!attr?.required ||
+    const isReadOnly = isAttrReadOnly(attr, isEdit);
+    const isEffectiveDisabled = disabled || isReadOnly;
+    const isPasswordField = name.toLowerCase() === 'password' ||
+        attr?.format === 'password' ||
+        attr?.writeOnly === true;
+    let required = !!attr?.required ||
         name.toLowerCase() === 'slug' ||
         !!attr?.populateSlugFrom;
+    if (isEdit) {
+        if (isPasswordField) {
+            required = false;
+        }
+        else if (canBypassPrivacy && attr?.private === true) {
+            required = false;
+        }
+    }
     const description = attr?.description;
     // Prefer ref over enum. Only use enum when there is NO ref.
-    const enumVals = attr?.ref
+    const enumVals = attr?.ref || attr?.refPath
         ? undefined
         : attr?.enum;
-    const isPasswordField = name.toLowerCase() === 'password' ||
-        attr?.format === 'password' ||
-        attr?.writeOnly === true;
     // RICH TEXT EDITOR CHECK
     if (attr?.rich === true) {
         // Extract speciality slug from form state
         const specialitySlug = formState?.speciality?.slug || formState?.slug || '';
-        return (_jsx(TiptapEditor, { value: value, onChange: (html) => onChange(name, html), placeholder: label, availableSchemas: availableSchemas, currentSpeciality: specialitySlug }));
+        return (_jsxs("div", { className: "w-full flex flex-col gap-1", children: [_jsx(TiptapEditor, { value: value, onChange: (html) => onChange(name, html), placeholder: label, availableSchemas: availableSchemas, currentSpeciality: specialitySlug, className: isInvalid ? 'border-danger ring-1 ring-danger rounded-lg' : undefined }), errorMessage && (_jsx("p", { className: "text-danger text-xs mt-1", children: errorMessage }))] }));
     }
     // --- 1) Array of references → multi select
-    const refArray = getRefArraySpec(attr);
+    const refArray = getRefArraySpec(attr, formState);
     if (refArray) {
-        return (_jsx(RefSelect, { name: name, label: attr[0]?.label ?? label, refModel: refArray.ref, showKey: refArray.show ?? 'name', description: attr?.description, value: normalizeIdsArray(value), onChange: (ids) => onChange(name, ids), multiple: true, disabled: disabled, required: attr[0]?.required, pageSize: attr[0]?.pageSize, where: attr[0]?.where || attr?.where }));
+        return (_jsx(RefSelect, { name: name, label: attr[0]?.label ?? label, refModel: refArray.ref, showKey: refArray.show ?? 'name', description: attr?.description, value: value, onChange: (ids) => onChange(name, ids), multiple: true, disabled: disabled || isReadOnly || !refArray.ref, required: attr[0]?.required, pageSize: attr[0]?.pageSize, where: attr[0]?.where || attr?.where, isInvalid: isInvalid, errorMessage: errorMessage }));
     }
     // --- 2) Single reference → single select
-    const refSingle = getRefSingleSpec(attr);
+    const refSingle = getRefSingleSpec(attr, formState);
     if (refSingle) {
-        return (_jsx(RefSelect, { name: name, label: label, refModel: refSingle.ref, showKey: refSingle.show ?? 'name', description: attr?.description, value: normalizeId(value), onChange: (id) => onChange(name, id), multiple: false, disabled: disabled, required: required, pageSize: attr?.pageSize, where: attr?.where }));
+        return (_jsx(RefSelect, { name: name, label: label, refModel: refSingle.ref, showKey: refSingle.show ?? 'name', description: attr?.description, value: value, onChange: (id) => onChange(name, id), multiple: false, disabled: disabled || isReadOnly || !refSingle.ref, required: required, pageSize: attr?.pageSize, where: attr?.where, isInvalid: isInvalid, errorMessage: errorMessage }));
     }
     const head = Array.isArray(attr) ? (attr?.[0] ?? {}) : (attr ?? {});
     const isPhoneField = isPhoneAttr(name, attr);
     const rawMask = typeof head?.mask === 'string' ? head.mask : '';
     const hasSlots = /[Xx9#_]/.test(rawMask);
     const phoneMask = hasSlots ? rawMask : 'xxx-xxxx-xxxx';
+    const fieldType = String(attr?.fieldType || attr?.filedType || '').toLowerCase();
     const isFileField = String(attr?.format || '').toLowerCase() === 'file' ||
-        /^(file|image|avatar|photo|picture|logo|siteLogo|sitelogo|profilepicture|bannerImage)$/i.test(name);
+        fieldType === 'file' ||
+        fieldType === 'image' ||
+        /(file|image|avatar|photo|picture|logo|siteLogo|sitelogo|profilepicture|bannerImage|catalog|brochure|document|attachment|pdf|upload|floorplan|floorPlan)s?$/i.test(name);
     if (isFileField) {
         const head = Array.isArray(attr) ? attr[0] : attr;
-        const multiple = Array.isArray(attr) || Boolean(head?.multiple);
+        const multiple = Array.isArray(attr) || String(head?.type || '').toLowerCase() === 'array' || Boolean(head?.multiple);
         const fileTypes = head?.fileTypes;
         const maxFileSize = typeof head?.maxFileSize === 'number' ? head.maxFileSize : undefined;
         const maxFilesCount = multiple && typeof head?.maxFilesCount === 'number'
             ? Math.max(1, head.maxFilesCount)
             : undefined;
-        const isRequired = !!attr?.required ||
+        let isRequired = !!attr?.required ||
             (Array.isArray(attr) ? !!head?.required : false);
+        if (isEdit && canBypassPrivacy) {
+            if (attr?.private === true || head?.private === true) {
+                isRequired = false;
+            }
+        }
         const controlledValue = multiple
             ? Array.isArray(value)
                 ? value
@@ -586,16 +641,16 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
             : typeof value === 'string'
                 ? value
                 : null;
-        return (_jsx(FileUploader, { name: name, label: label, value: controlledValue, onChange: (v) => onChange(name, v), required: isRequired, disabled: disabled, accept: fileTypes, maxSizeBytes: maxFileSize, multiple: multiple, maxFilesCount: maxFilesCount, description: attr?.description, className: "w-full" }));
+        return (_jsx(FileUploader, { name: name, label: label, value: controlledValue, onChange: (v) => onChange(name, v), required: isRequired, disabled: disabled, accept: fileTypes, maxSizeBytes: maxFileSize, multiple: multiple, maxFilesCount: maxFilesCount, isImage: fieldType === 'image' || /(image|photo|avatar|logo|picture|thumbnail|icon)/i.test(name), description: attr?.description, className: "w-full", isInvalid: isInvalid, errorMessage: errorMessage }));
     }
     if (isPasswordField) {
-        return (_jsx(PasswordInput, { id: id, name: name, label: label, value: typeof value === 'string' ? value : '', onChange: (v) => onChange(name, v), disabled: disabled, required: required, description: description, className: "w-full", classNames: inputClassNames, autoComplete: "new-password" }));
+        return (_jsx(PasswordInput, { id: id, name: name, label: label, value: typeof value === 'string' ? value : '', onChange: (v) => onChange(name, v), disabled: disabled, required: required, description: description, className: "w-full", classNames: inputClassNames, autoComplete: "new-password", isInvalid: isInvalid, errorMessage: errorMessage }));
     }
     if (isPhoneField) {
         const rawDigits = typeof value === 'string' || typeof value === 'number'
             ? String(value).replace(/\D/g, '')
             : '';
-        return (_jsx(PhoneInput, { id: id, name: name, label: label, mask: phoneMask, value: rawDigits, onChange: (raw) => onChange(name, raw), disabled: disabled, required: required, description: description, className: "w-full", classNames: inputClassNames, minLength: head?.minLength, maxLength: head?.maxLength, regex: head?.pattern }));
+        return (_jsx(PhoneInput, { id: id, name: name, label: label, mask: phoneMask, value: rawDigits, onChange: (raw) => onChange(name, raw), disabled: disabled, required: required, description: description, className: "w-full", classNames: inputClassNames, minLength: head?.minLength, maxLength: head?.maxLength, regex: head?.pattern, isInvalid: isInvalid, errorMessage: errorMessage }));
     }
     const populateField = getPopulateTarget(attr);
     // Address → Autocomplete
@@ -610,7 +665,7 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
                 if (populateField) {
                     onChange(populateField, `${latlng.lat.toFixed(6)},${latlng.lng.toFixed(6)}`);
                 }
-            }, disabled: disabled, required: required, className: "w-full", classNames: inputClassNames, countryCodes: attr?.countryCodes, limit: attr?.limit ?? 8 }));
+            }, disabled: disabled, required: required, className: "w-full", classNames: inputClassNames, countryCodes: attr?.countryCodes, limit: attr?.limit ?? 8, isInvalid: isInvalid, errorMessage: errorMessage }));
     }
     /** ----------------------- NEW: DATE / TIME / RANGE RENDERERS ----------------------- **/
     // 1) TIME-ONLY RANGE → two TimeInput fields (AM/PM UI)
@@ -630,7 +685,7 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
                 end: serializeTime(t),
             });
         };
-        return (_jsx("div", { className: "w-full", children: _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(TimeInput, { variant: "bordered", label: `${label} (Start)`, labelPlacement: "outside", className: "w-full", isDisabled: disabled, isRequired: required, description: description, value: startT ?? undefined, onChange: setStart, granularity: "minute", hourCycle: 12 }), _jsx(TimeInput, { variant: "bordered", label: `${label} (End)`, labelPlacement: "outside", className: "w-full", isDisabled: disabled, isRequired: required, description: description, value: endT ?? undefined, onChange: setEnd, granularity: "minute", hourCycle: 12 })] }) }));
+        return (_jsx("div", { className: "w-full", children: _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(TimeInput, { variant: "bordered", label: `${label} (Start)`, labelPlacement: "outside", className: "w-full", isDisabled: disabled, isRequired: required, description: description, value: startT ?? undefined, onChange: setStart, granularity: "minute", hourCycle: 12, isInvalid: isInvalid, errorMessage: errorMessage }), _jsx(TimeInput, { variant: "bordered", label: `${label} (End)`, labelPlacement: "outside", className: "w-full", isDisabled: disabled, isRequired: required, description: description, value: endT ?? undefined, onChange: setEnd, granularity: "minute", hourCycle: 12, isInvalid: isInvalid })] }) }));
     }
     // 2) DATE RANGE (default; supports withTime)
     if (isRangeType(attr)) {
@@ -643,7 +698,7 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
                     return onChange(name, null);
                 const { start, end } = val;
                 onChange(name, serializeRangeOut(start, end, withTime));
-            }, granularity: withTime ? 'minute' : 'day', hourCycle: withTime ? 24 : undefined }));
+            }, granularity: withTime ? 'minute' : 'day', hourCycle: withTime ? 24 : undefined, isInvalid: isInvalid, errorMessage: errorMessage }));
     }
     // 3) SINGLE DATE (supports withTime)
     if (isDateType(attr)) {
@@ -651,12 +706,12 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
         const parsed = parseDateString(value, withTime);
         return (_jsx(DatePicker, { variant: "bordered", label: label, labelPlacement: "outside", className: "w-full", isDisabled: disabled, isRequired: required, description: description, value: parsed ?? null, onChange: (v) => onChange(name, v
                 ? serializeDate(v, withTime)
-                : ''), granularity: withTime ? 'minute' : 'day', hourCycle: withTime ? 24 : undefined }));
+                : ''), granularity: withTime ? 'minute' : 'day', hourCycle: withTime ? 24 : undefined, isInvalid: isInvalid, errorMessage: errorMessage }));
     }
     // 4) SINGLE TIME (uses your existing isTimeType)
     if (isTimeType(attr)) {
         const tVal = parseTimeString(value);
-        return (_jsx(TimeInput, { variant: "bordered", label: label, labelPlacement: "outside", className: "w-full", isDisabled: disabled, isRequired: required, description: description, value: tVal ?? undefined, onChange: (t) => onChange(name, serializeTime(t)), granularity: "minute", hourCycle: 12 }));
+        return (_jsx(TimeInput, { variant: "bordered", label: label, labelPlacement: "outside", className: "w-full", isDisabled: disabled, isRequired: required, description: description, value: tVal ?? undefined, onChange: (t) => onChange(name, serializeTime(t)), granularity: "minute", hourCycle: 12, isInvalid: isInvalid, errorMessage: errorMessage }));
     }
     const normalize = (s) => (s ?? '').toLowerCase().trim();
     const canSeeOption = (opt) => {
@@ -690,10 +745,10 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
     // Enum → RadioGroup (≤4) or Select (>4)
     if (enumVals && enumVals.length > 0) {
         if (enumVals.length <= 4) {
-            return (_jsx(RadioGroup, { id: id, name: name, label: label, orientation: "horizontal", value: (value ?? ''), onValueChange: (v) => onChange(name, v), isDisabled: disabled, description: description, isRequired: required, className: "w-full", children: enumVals.map((opt) => {
+            return (_jsx(RadioGroup, { id: id, name: name, label: label, orientation: "horizontal", value: (value ?? ''), onValueChange: (v) => onChange(name, v), isDisabled: isEffectiveDisabled, description: description, isRequired: required, className: "w-full", isInvalid: isInvalid, errorMessage: errorMessage, children: enumVals.map((opt) => {
                     if (!canSeeOption(opt))
                         return null;
-                    return (_jsx(Radio, { value: opt, children: opt }, opt));
+                    return (_jsx(Radio, { value: opt, isDisabled: isEffectiveDisabled, children: opt }, opt));
                 }) }));
         }
         return (_jsx(Select, { isVirtualized: true, variant: "bordered", classNames: selectClassNames, labelPlacement: "outside", id: id, name: name, label: label, selectedKeys: value ? new Set([String(value)]) : new Set(), onSelectionChange: (keys) => {
@@ -701,29 +756,25 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
                     return;
                 const v = Array.from(keys)[0];
                 onChange(name, v != null ? String(v) : '');
-            }, isDisabled: disabled, description: description, className: "w-full", selectionMode: "single", isRequired: required, children: enumVals.map((opt) => (_jsx(SelectItem, { textValue: opt, children: opt }, opt))) }));
+            }, isDisabled: isEffectiveDisabled, description: description, className: "w-full", selectionMode: "single", isRequired: required, isInvalid: isInvalid, errorMessage: errorMessage, children: enumVals.map((opt) => (_jsx(SelectItem, { textValue: opt, children: opt }, opt))) }));
     }
     // Boolean → Checkbox
     if (inputTypeFor(attr) === 'checkbox') {
-        return (_jsxs("div", { className: "w-full", children: [_jsx(Checkbox, { id: id, name: name, isSelected: !!value, onValueChange: (v) => onChange(name, v), isDisabled: disabled, isRequired: required, children: label }), description ? (_jsx("p", { className: "text-default-500 text-xs mt-1", children: description })) : null] }));
+        return (_jsxs("div", { className: "w-full", children: [_jsx(Checkbox, { id: id, name: name, isSelected: !!value, onValueChange: (v) => onChange(name, v), isDisabled: isEffectiveDisabled, isRequired: required, isInvalid: isInvalid, children: label }), errorMessage ? (_jsx("p", { className: "text-danger text-xs mt-1", children: errorMessage })) : description ? (_jsx("p", { className: "text-default-500 text-xs mt-1", children: description })) : null] }));
     }
     // Textarea
     if (inputTypeFor(attr) === 'textarea') {
-        return (_jsx(Textarea, { variant: "bordered", classNames: inputClassNames, id: id, name: name, label: label, labelPlacement: "outside", value: value ?? '', onChange: (e) => onChange(name, e.target.value), isDisabled: disabled, minRows: 3, isReadOnly: attr.readOnly, description: description, className: "w-full", isRequired: required }));
+        return (_jsx(Textarea, { variant: "bordered", classNames: inputClassNames, id: id, name: name, label: label, labelPlacement: "outside", value: value ?? '', onChange: (e) => onChange(name, e.target.value), isDisabled: isEffectiveDisabled, minRows: 3, isReadOnly: isReadOnly, description: description, className: "w-full", isRequired: required, isInvalid: isInvalid, errorMessage: errorMessage }));
     }
     function attrHead(attr) {
         return Array.isArray(attr) ? attr[0] : attr;
     }
-    function isAttrReadOnly(attr) {
-        const a = attrHead(attr);
-        return !!a?.readOnly;
-    }
     // Array (non-ref) → comma-separated input
     if (Array.isArray(attr)) {
-        return (_jsx(Input, { variant: "bordered", classNames: inputClassNames, id: id, name: name, label: label, isReadOnly: isAttrReadOnly(attr), labelPlacement: "outside-top", placeholder: "comma-separated values", value: Array.isArray(value) ? value.join(', ') : (value ?? ''), onChange: (e) => onChange(name, e.target.value
+        return (_jsx(Input, { variant: "bordered", classNames: inputClassNames, id: id, name: name, label: label, isReadOnly: isReadOnly, labelPlacement: "outside-top", placeholder: "comma-separated values", value: Array.isArray(value) ? value.join(', ') : (value ?? ''), onChange: (e) => onChange(name, e.target.value
                 .split(',')
                 .map((s) => s.trim())
-                .filter(Boolean)), isDisabled: disabled, description: description ?? 'Enter values separated by commas.', className: "w-full", isRequired: required }));
+                .filter(Boolean)), isDisabled: isEffectiveDisabled, description: description ?? 'Enter values separated by commas.', className: "w-full", isRequired: required, isInvalid: isInvalid, errorMessage: errorMessage }));
     }
     function pickInputType(x, fieldName) {
         if (fieldName.toLowerCase() === 'password')
@@ -741,9 +792,9 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
         }
     }
     const inputType = pickInputType(inputTypeFor(attr), name);
-    return (_jsx(Input, { variant: "bordered", classNames: inputClassNames, id: id, name: name, label: label, isReadOnly: attr.readOnly, labelPlacement: "outside-top", type: inputType, value: value ?? '', onChange: (e) => onChange(name, inputType === 'number'
+    return (_jsx(Input, { variant: "bordered", classNames: inputClassNames, id: id, name: name, label: label, isReadOnly: isReadOnly, labelPlacement: "outside-top", type: inputType, value: value ?? '', onChange: (e) => onChange(name, inputType === 'number'
             ? numberOrEmpty(e.target.value)
-            : e.target.value), isDisabled: disabled, description: description, className: "w-full", isRequired: required, minLength: head?.minLength, maxLength: head?.maxLength, pattern: head?.pattern, autoComplete: name.toLowerCase() === 'password' ? 'new-password' : undefined }));
+            : e.target.value), isDisabled: isEffectiveDisabled, description: description, className: "w-full", isRequired: required, minLength: head?.minLength, maxLength: head?.maxLength, pattern: head?.pattern, autoComplete: name.toLowerCase() === 'password' ? 'new-password' : undefined, isInvalid: isInvalid, errorMessage: errorMessage }));
 }
 function isHiddenAttr(attr, isEdit) {
     const head = Array.isArray(attr) ? (attr?.[0] ?? {}) : (attr ?? {});
@@ -773,25 +824,51 @@ function isPasswordAttr(name, attr) {
     const byWriteOnly = attr?.writeOnly === true;
     return byName || byFormat || byWriteOnly;
 }
-function getRefArraySpec(attr) {
+function getRefArraySpec(attr, formState) {
     if (!Array.isArray(attr) || attr.length === 0)
         return null;
     const head = attr[0];
-    if (head &&
-        typeof head === 'object' &&
-        String(head.type).toLowerCase() === 'objectid' &&
-        typeof head.ref === 'string') {
-        return { ref: head.ref, show: head.show };
+    if (!head || typeof head !== 'object')
+        return null;
+    const t = String(head.type || '').toLowerCase();
+    const isRefType = t === 'objectid' || t === 'ref' || !!head.ref || !!head.refPath;
+    if (!isRefType)
+        return null;
+    let targetRef = typeof head.ref === 'string' && head.ref.trim() ? head.ref.trim() : undefined;
+    if (head.refPath && formState) {
+        const rawVal = formState[head.refPath];
+        if (typeof rawVal === 'string' && rawVal.trim()) {
+            targetRef = rawVal.trim();
+        }
+        else if (rawVal && typeof rawVal === 'object') {
+            targetRef = rawVal.modelName || rawVal.name || rawVal.slug || (rawVal.id || rawVal._id ? undefined : String(rawVal));
+        }
+    }
+    if (head.refPath || head.ref) {
+        return { ref: targetRef || '', show: head.show };
     }
     return null;
 }
-function getRefSingleSpec(attr) {
+function getRefSingleSpec(attr, formState) {
     if (!attr || typeof attr !== 'object' || Array.isArray(attr))
         return null;
     const a = attr;
     const t = String(a.type || '').toLowerCase();
-    if (t === 'objectid' && typeof a.ref === 'string' && a.ref.trim()) {
-        return { ref: a.ref, show: a.show };
+    const isRefType = t === 'objectid' || t === 'ref' || !!a.ref || !!a.refPath;
+    if (!isRefType)
+        return null;
+    let targetRef = typeof a.ref === 'string' && a.ref.trim() ? a.ref.trim() : undefined;
+    if (a.refPath && formState) {
+        const rawVal = formState[a.refPath];
+        if (typeof rawVal === 'string' && rawVal.trim()) {
+            targetRef = rawVal.trim();
+        }
+        else if (rawVal && typeof rawVal === 'object') {
+            targetRef = rawVal.modelName || rawVal.name || rawVal.slug || (rawVal.id || rawVal._id ? undefined : String(rawVal));
+        }
+    }
+    if (a.refPath || a.ref) {
+        return { ref: targetRef || '', show: a.show };
     }
     return null;
 }
@@ -877,7 +954,7 @@ async function findUniqueSlug(model, baseSlug, currentId) {
         const checkSlug = attempt === 0 ? baseSlug : `${baseSlug}-${attempt}`;
         try {
             // Check if slug exists in the model
-            const res = await api.list(model, { page: 0, limit: 1, where: { slug: checkSlug } });
+            const res = await api.list(model, { page: 0, limit: 1, where: { slug: checkSlug }, select: 'id,slug' });
             const existing = res.data?.[0];
             if (!existing ||
                 (currentId && String(existing.id || existing._id) === String(currentId))) {

package/dist/components/Sidebar.js

@@ -2,15 +2,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useRouter } from 'next/navigation';
-import { clearSession } from '../state/sessionSlice';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
 import { Button } from '@heroui/react';
+import { clearSession } from '../state/sessionSlice';
 import { AuthClient } from '../lib/AuthClient';
 import { RealtimeClient } from '../lib/RealtimeClient';
-import Link from 'next/link';
+import clsx from 'clsx';
+import { isTailwindClass, } from '../providers/themeResolver';
+import { useNextMin } from '../providers/NextMinProvider';
+import { useAppNavigation } from '../hooks/useAppNavigation';
 export function Sidebar() {
     const router = useRouter();
     const dispatch = useDispatch();
+    const pathname = usePathname();
+    const navigateTo = useAppNavigation();
     const system = useSelector((s) => s.nextMin.system);
     const systemStatus = useSelector((s) => s.nextMin.status);
     const { items, status, error } = useSelector((s) => s.schemas);
@@ -68,13 +74,96 @@ export function Sidebar() {
         const first = arr.find((u) => typeof u === 'string' && u.trim().length > 0);
         return first || undefined;
     }, [system]);
-    return (_jsxs("aside", { className: "flex h-full min-h-screen w-64 flex-col border-r", children: [_jsx(Link, { href: "/admin/dashboard", className: "h-20 px-3 border-b flex items-center justify-center", children: logoUrl ? (_jsx("img", { src: logoUrl, alt: siteName, className: "h-10 max-w-[160px] object-contain" })) : (_jsx("div", { className: "text-lg font-semibold truncate", children: siteName })) }), _jsxs("div", { className: "flex-1 overflow-y-auto p-2", children: [isLoading && _jsx("div", { children: "Loading\u2026" }), status === 'failed' && error && (_jsx("div", { className: "text-red-600", children: error })), status === 'succeeded' && (_jsxs("ul", { className: "list-none space-y-2", children: [_jsx("li", { children: _jsx(Link, { href: "/admin/dashboard", className: "w-full hover:bg-gray-200 px-3 py-2 rounded-md inline-flex items-center gap-2", children: "Dashboard" }) }, "dashboard"), orderedItems.map((s) => {
+    const { theme } = useNextMin();
+    const sidebarBgClass = theme?.sidebarColor && isTailwindClass(theme.sidebarColor)
+        ? theme.sidebarColor
+        : '';
+    const sidebarWidthClass = theme?.sidebarWidth && isTailwindClass(theme.sidebarWidth)
+        ? theme.sidebarWidth
+        : 'w-64';
+    const borderClass = theme?.sidebarPosition === 'right' ? 'border-l' : 'border-r';
+    // Active configurations
+    const activeBgClass = theme?.activeMenuBgColor && isTailwindClass(theme.activeMenuBgColor)
+        ? theme.activeMenuBgColor
+        : 'bg-primary/10 text-primary font-medium';
+    const activeBgStyle = theme?.activeMenuBgColor && !isTailwindClass(theme.activeMenuBgColor)
+        ? { backgroundColor: 'var(--nm-active-menu-bg)' }
+        : {};
+    const activeTextClass = theme?.activeMenuTextColor && isTailwindClass(theme.activeMenuTextColor)
+        ? theme.activeMenuTextColor
+        : '';
+    const activeTextStyle = theme?.activeMenuTextColor && !isTailwindClass(theme.activeMenuTextColor)
+        ? { color: 'var(--nm-active-menu-text)' }
+        : {};
+    // Inactive configurations
+    const inactiveTextClass = theme?.menuTextColor && isTailwindClass(theme.menuTextColor)
+        ? theme.menuTextColor
+        : 'text-gray-700';
+    const inactiveTextStyle = theme?.menuTextColor && !isTailwindClass(theme.menuTextColor)
+        ? { color: 'var(--nm-menu-text)' }
+        : {};
+    // Hover configurations
+    const hoverBgClass = theme?.menuHoverBgColor && isTailwindClass(theme.menuHoverBgColor)
+        ? theme.menuHoverBgColor
+        : 'hover:bg-gray-200';
+    const hoverTextClass = theme?.menuHoverTextColor && isTailwindClass(theme.menuHoverTextColor)
+        ? theme.menuHoverTextColor
+        : '';
+    const renderMenuItem = (href, label) => {
+        const isRootOrDashboard = href === '/admin' || href === '/admin/dashboard';
+        const isActive = isRootOrDashboard
+            ? pathname === href
+            : pathname === href || pathname?.startsWith(href + '/');
+        const handleClick = (e) => {
+            e.preventDefault();
+            if (pathname === href)
+                return;
+            navigateTo(href);
+        };
+        return (_jsx(Link, { href: href, onClick: handleClick, className: clsx("w-full px-3 py-2 rounded-md inline-flex items-center gap-2 transition-colors", isActive
+                ? clsx(activeBgClass, activeTextClass)
+                : clsx(hoverBgClass, hoverTextClass, inactiveTextClass)), style: {
+                ...(isActive ? { ...activeBgStyle, ...activeTextStyle } : inactiveTextStyle)
+            }, children: label }));
+    };
+    return (_jsxs("aside", { className: clsx("flex h-full min-h-screen flex-col flex-shrink-0", borderClass, sidebarBgClass, sidebarWidthClass), style: {
+            width: theme?.sidebarWidth && !isTailwindClass(theme.sidebarWidth) ? 'var(--nm-sidebar-width)' : undefined,
+            backgroundColor: theme?.sidebarColor && !isTailwindClass(theme.sidebarColor) ? 'var(--nm-sidebar-bg)' : undefined,
+            maxWidth: '100%'
+        }, children: [_jsx(Link, { href: "/admin/dashboard", onClick: (e) => {
+                    e.preventDefault();
+                    if (pathname === '/admin/dashboard')
+                        return;
+                    navigateTo('/admin/dashboard');
+                }, className: clsx("px-3 border-b flex items-center justify-center flex-shrink-0", theme?.topNavHeight && isTailwindClass(theme.topNavHeight) ? theme.topNavHeight : "h-20"), style: {
+                    height: theme?.topNavHeight && !isTailwindClass(theme.topNavHeight) ? 'var(--nm-top-nav-height)' : undefined,
+                    maxHeight: '100%'
+                }, children: logoUrl ? (_jsx("img", { src: logoUrl, alt: siteName, className: "h-10 max-w-[160px] object-contain" })) : (_jsx("div", { className: "text-lg font-semibold truncate", children: siteName })) }), _jsxs("div", { className: "flex-1 overflow-y-auto p-2", children: [isLoading && _jsx("div", { children: "Loading\u2026" }), status === 'failed' && error && (_jsx("div", { className: "text-red-600", children: error })), status === 'succeeded' && (_jsxs("ul", { className: "list-none space-y-2", children: [_jsx("li", { children: renderMenuItem("/admin/dashboard", "Dashboard") }, "dashboard"), orderedItems.map((s) => {
                                 const slug = String(s.modelName || '').toLowerCase();
                                 // Hide auto Settings model from the list; we link a fixed Settings route below
                                 if (slug === 'settings')
                                     return null;
-                                return (_jsx("li", { children: _jsx(Link, { href: `/admin/${slug}`, className: "w-full hover:bg-gray-200 px-3 py-2 rounded-md inline-flex items-center gap-2", children: s.modelName }) }, s.modelName));
-                            }), _jsx("li", { children: _jsx(Link, { href: "/admin/system/update", className: "w-full hover:bg-gray-200 px-3 py-2 rounded-md inline-flex items-center gap-2", children: "Settings" }) }, "settings"), !items.length && (_jsx("li", { className: "text-gray-500", children: "No schemas found" }))] }))] }), _jsxs("div", { className: "mt-auto border-t p-4 space-y-2", children: [_jsx(Link, { href: "/admin/profile", className: "w-full block hover:bg-gray-200 px-3 py-2 rounded-md", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [user && (_jsxs("div", { className: "text-sm text-gray-700 text-left", children: [_jsx("div", { className: "font-semibold", children: `${user.firstName ?? ''} ${user.lastName ?? ''}`.trim() ||
+                                return (_jsx("li", { children: renderMenuItem(`/admin/${slug}`, s.modelName) }, s.modelName));
+                            }), _jsx("li", { children: renderMenuItem("/admin/system/update", "Settings") }, "settings"), !items.length && (_jsx("li", { className: "text-gray-500", children: "No schemas found" }))] }))] }), _jsxs("div", { className: "mt-auto border-t p-4 space-y-2 flex-shrink-0", children: [_jsx(Link, { href: "/admin/profile", onClick: (e) => {
+                            e.preventDefault();
+                            if (pathname === '/admin/profile')
+                                return;
+                            navigateTo('/admin/profile');
+                        }, className: clsx("w-full block rounded-md transition-colors", pathname === '/admin/profile'
+                            ? clsx(activeBgClass, activeTextClass)
+                            : clsx(hoverBgClass, hoverTextClass, inactiveTextClass)), style: {
+                            ...(pathname === '/admin/profile' ? { ...activeBgStyle, ...activeTextStyle } : inactiveTextStyle)
+                        }, children: _jsxs("div", { className: "flex items-center justify-between gap-3 p-2", children: [user && (_jsxs("div", { className: clsx("text-sm text-left", pathname === '/admin/profile'
+                                        ? ""
+                                        : (theme?.sidebarTextColor && isTailwindClass(theme.sidebarTextColor) ? theme.sidebarTextColor : "text-gray-700")), style: {
+                                        color: pathname === '/admin/profile'
+                                            ? "inherit"
+                                            : (theme?.sidebarTextColor && !isTailwindClass(theme.sidebarTextColor) ? 'var(--nm-sidebar-text)' : undefined)
+                                    }, children: [_jsx("div", { className: "font-semibold", children: `${user.firstName ?? ''} ${user.lastName ?? ''}`.trim() ||
                                                 user.name ||
-                                                '' }), _jsx("div", { className: "text-gray-500", children: user.email })] })), _jsx("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-default-500 flex-shrink-0", children: _jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) }), _jsx(Button, { fullWidth: true, variant: "flat", onPress: logout, children: "Log out" })] })] }));
+                                                '' }), _jsx("div", { className: clsx(pathname === '/admin/profile'
+                                                ? "opacity-75"
+                                                : (theme?.sidebarTextColor && isTailwindClass(theme.sidebarTextColor) ? "opacity-75" : "text-gray-500")), style: {
+                                                color: pathname === '/admin/profile' ? 'inherit' : undefined
+                                            }, children: user.email })] })), _jsx("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-default-500 flex-shrink-0", children: _jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) }), _jsx(Button, { fullWidth: true, variant: "flat", onPress: logout, children: "Log out" })] })] }));
 }

package/dist/components/TableFilters.js

@@ -34,7 +34,7 @@ export function TableFilters({ model, value, onChange, busy, columns, visibleCol
         setQ('');
         onChange({});
     };
-    return (_jsxs(Form, { onSubmit: apply, onReset: clear, className: "grid gap-3 md:grid-cols-5 grid-cols-1 items-end", children: [_jsx(Select, { placeholder: "Search Field", "aria-label": "Search Field", variant: "bordered", size: "sm", selectedKeys: searchKey ? new Set([searchKey]) : new Set(), onSelectionChange: (s) => {
+    return (_jsxs(Form, { onSubmit: apply, onReset: clear, className: "nextmin-table-filters-form grid gap-3 md:grid-cols-5 grid-cols-1 items-end w-full", children: [_jsx(Select, { placeholder: "Search Field", "aria-label": "Search Field", variant: "bordered", size: "sm", selectedKeys: searchKey ? new Set([searchKey]) : new Set(), onSelectionChange: (s) => {
                     if (s === 'all')
                         return;
                     const v = Array.from(s)[0];