Merge pull request 'development' (#57) from development into test

Reviewed-on: https://gitea.maskantech.in/gitea_admin/aeroresolve_frontend/pulls/57
This commit is contained in:
Syed Waseem khadri Rafai
2026-08-25 07:21:47 +00:00
5 changed files with 303 additions and 102 deletions
@@ -157,6 +157,7 @@ export function FieldDefinitionFormModal({
...prev,
fieldType: newType,
lookupSource: isLookupType ? prev.lookupSource : undefined,
validationJson: isLookupType ? undefined : prev.validationJson,
}));
if (setError && !isLookupType) {
setError(null);
@@ -235,57 +236,59 @@ export function FieldDefinitionFormModal({
/>
{/* Validation JSON Rules */}
<div className="p-4 bg-slate-50 border border-slate-200 rounded-[14px] space-y-3">
<h5 className="text-[13px] font-bold text-slate-800">Validation Rules (validation_json)</h5>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<CustomInput
label="Min Value / Length"
type="number"
value={formData.validationJson?.min !== undefined ? String(formData.validationJson.min) : ''}
onChange={(e) =>
setFormData((prev) => ({
...prev,
validationJson: {
...prev.validationJson,
min: e.target.value !== '' ? Number(e.target.value) : undefined,
},
}))
}
placeholder="e.g. 312"
/>
{formData.fieldType !== 'dropdown' && formData.fieldType !== 'multi_select' && (
<div className="p-4 bg-slate-50 border border-slate-200 rounded-[14px] space-y-3">
<h5 className="text-[13px] font-bold text-slate-800">Validation Rules (validation_json)</h5>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<CustomInput
label="Min Value / Length"
type="number"
value={formData.validationJson?.min !== undefined ? String(formData.validationJson.min) : ''}
onChange={(e) =>
setFormData((prev) => ({
...prev,
validationJson: {
...prev.validationJson,
min: e.target.value !== '' ? Number(e.target.value) : undefined,
},
}))
}
placeholder="e.g. 312"
/>
<CustomInput
label="Max Value / Length"
type="number"
value={formData.validationJson?.max !== undefined ? String(formData.validationJson.max) : ''}
onChange={(e) =>
setFormData((prev) => ({
...prev,
validationJson: {
...prev.validationJson,
max: e.target.value !== '' ? Number(e.target.value) : undefined,
},
}))
}
placeholder="e.g. 245"
/>
<CustomInput
label="Max Value / Length"
type="number"
value={formData.validationJson?.max !== undefined ? String(formData.validationJson.max) : ''}
onChange={(e) =>
setFormData((prev) => ({
...prev,
validationJson: {
...prev.validationJson,
max: e.target.value !== '' ? Number(e.target.value) : undefined,
},
}))
}
placeholder="e.g. 245"
/>
<CustomInput
label="Regex Pattern"
value={formData.validationJson?.regex || ''}
onChange={(e) =>
setFormData((prev) => ({
...prev,
validationJson: {
...prev.validationJson,
regex: e.target.value,
},
}))
}
placeholder="e.g. ^[A-Z0-9]+$"
/>
<CustomInput
label="Regex Pattern"
value={formData.validationJson?.regex || ''}
onChange={(e) =>
setFormData((prev) => ({
...prev,
validationJson: {
...prev.validationJson,
regex: e.target.value,
},
}))
}
placeholder="e.g. ^[A-Z0-9]+$"
/>
</div>
</div>
</div>
)}
{/* Conditional Visibility */}
<div className="p-4 bg-amber-50/60 border border-amber-200 rounded-[14px] space-y-3">
@@ -488,7 +488,7 @@ export default function AddPolicyEngine() {
}
setStatus(
data.status?.toLowerCase() === 'active' ? 'Active' :
data.status?.toLowerCase() === 'draft' ? 'Draft' : 'Inactive'
data.status?.toLowerCase() === 'draft' ? 'Draft' : 'Inactive'
);
setDescription(data.description || '');
@@ -641,23 +641,23 @@ export default function AddPolicyEngine() {
const isFormValid = (() => {
if (!policyName.trim()) return false;
if (audienceType === 'Selected Cohorts' && (!selectedCohorts || selectedCohorts.length === 0)) return false;
if (!rules || rules.length === 0) return false;
for (const rule of rules) {
if (!rule.category) return false;
if (!rule.conditions || rule.conditions.length === 0) return false;
for (const cond of rule.conditions) {
if (!cond.condition || !cond.operator || cond.value === '' || cond.value === undefined || cond.value === null) return false;
}
if (!rule.actions || rule.actions.length === 0) return false;
for (const act of rule.actions) {
if (!act.actionCategoryId || !act.actionTypeId) return false;
const allFields = actionTypeFieldsMap[act.actionTypeId] || [];
const visibleFields = allFields.filter((f) =>
isActionFieldVisible(f, act.fieldValues, allFields, fieldLookupOptionsMap)
@@ -674,7 +674,7 @@ export default function AddPolicyEngine() {
}
}
}
return true;
})();
@@ -784,8 +784,8 @@ export default function AddPolicyEngine() {
if (isEditMode) {
}
setSuccessTitle(isDeploy
setSuccessTitle(isDeploy
? (isEditMode ? "Policy Updated Successfully." : "Policy Created Successfully.")
: "Policy Saved as Draft.");
setShowSuccessModal(true);
@@ -1394,48 +1394,56 @@ export default function AddPolicyEngine() {
const fieldVal = action.fieldValues?.[field.fieldCode];
const lookupOpts = fieldLookupOptionsMap[field.lookupSource || ''] || [];
const helpText = field.helpText || (field as any).help_text;
const valRules = field.validationJson || (field as any).validation_json;
return (
<div key={field.id} className={widthClass}>
<label className="block text-[13px] font-semibold text-slate-700 mb-1.5">
{field.fieldName}
{field.isRequired && <span className="text-red-500 ml-1">*</span>}
</label>
{field.fieldType === 'textarea' ? (
<CustomTextArea
label={field.fieldName}
required={field.isRequired}
validationJson={valRules}
value={fieldVal || ''}
onChange={(e) => handleFieldValueChange(rule.id, action.id, field.fieldCode, e.target.value)}
placeholder={field.placeholder || 'Enter details...'}
/>
) : field.fieldType === 'currency' ? (
<div className="grid grid-cols-3 gap-2">
<div className="col-span-2">
<CustomInput
type="number"
value={fieldVal?.amount || ''}
onChange={(e) =>
<div>
<label className="block text-[13px] font-semibold text-slate-700 mb-1.5">
{field.fieldName}
{field.isRequired && <span className="text-red-500 ml-1">*</span>}
</label>
<div className="grid grid-cols-3 gap-2">
<div className="col-span-2">
<CustomInput
validationJson={valRules}
type="number"
value={fieldVal?.amount || ''}
onChange={(e) =>
handleFieldValueChange(rule.id, action.id, field.fieldCode, {
...(fieldVal || {}),
amount: e.target.value,
})
}
placeholder={field.placeholder || 'Amount'}
/>
</div>
<CustomDropdown
options={lookupOpts}
value={fieldVal?.currency}
onChange={(val) =>
handleFieldValueChange(rule.id, action.id, field.fieldCode, {
...(fieldVal || {}),
amount: e.target.value,
currency: val,
})
}
placeholder={field.placeholder || 'Amount'}
/>
</div>
<CustomDropdown
options={lookupOpts}
value={fieldVal?.currency}
onChange={(val) =>
handleFieldValueChange(rule.id, action.id, field.fieldCode, {
...(fieldVal || {}),
currency: val,
})
}
/>
</div>
) : field.fieldType === 'dropdown' ? (
<CustomDropdown
label={field.fieldName}
required={field.isRequired}
options={lookupOpts}
value={fieldVal || ''}
onChange={(val) => handleFieldValueChange(rule.id, action.id, field.fieldCode, val)}
@@ -1443,6 +1451,8 @@ export default function AddPolicyEngine() {
/>
) : field.fieldType === 'multi_select' ? (
<CustomMultiSelect
label={field.fieldName}
required={field.isRequired}
options={lookupOpts}
value={Array.isArray(fieldVal) ? fieldVal : []}
onChange={(vals) => handleFieldValueChange(rule.id, action.id, field.fieldCode, vals)}
@@ -1455,17 +1465,26 @@ export default function AddPolicyEngine() {
label={field.fieldName}
/>
) : field.fieldType === 'switch' ? (
<div className="flex items-center gap-3 pt-1">
<CustomSwitch
checked={!!fieldVal}
onChange={(e) => handleFieldValueChange(rule.id, action.id, field.fieldCode, e.target.checked)}
/>
<span className="text-[13px] font-medium text-slate-700">
{fieldVal ? 'Enabled' : 'Disabled'}
</span>
<div>
<label className="block text-[13px] font-semibold text-slate-700 mb-1.5">
{field.fieldName}
{field.isRequired && <span className="text-red-500 ml-1">*</span>}
</label>
<div className="flex items-center gap-3 pt-1">
<CustomSwitch
checked={!!fieldVal}
onChange={(e) => handleFieldValueChange(rule.id, action.id, field.fieldCode, e.target.checked)}
/>
<span className="text-[13px] font-medium text-slate-700">
{fieldVal ? 'Enabled' : 'Disabled'}
</span>
</div>
</div>
) : (
<CustomInput
label={field.fieldName}
required={field.isRequired}
validationJson={valRules}
type={
field.fieldType === 'number' || field.fieldType === 'decimal' || field.fieldType === 'percentage'
? 'number'
@@ -200,7 +200,7 @@ export default function PolicyEngineList() {
className: "text-right",
accessor: (row) => (
<CustomActionMenu>
{row.status !== "Active" && (
{row.status?.toLowerCase() === "inactive" && (
<CustomActionItem
icon={<ChecksIcon size={15} />}
variant="success"
@@ -209,7 +209,7 @@ export default function PolicyEngineList() {
Activate
</CustomActionItem>
)}
{row.status === "Active" && (
{row.status?.toLowerCase() === "active" && (
<CustomActionItem
icon={<XIcon size={15} />}
onClick={() => setDeactivateTarget(row)}
+105 -9
View File
@@ -1,8 +1,14 @@
import React, { useState, forwardRef } from "react";
import React, { useState, forwardRef, useEffect } from "react";
import { PhoneIcon, EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
type InputType = "text" | "password" | "number" | "email" | "tel" | "date" | "month" | "datetime-local" | "time";
export interface ValidationJsonRule {
min?: number;
max?: number;
regex?: string;
}
interface CustomInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
label?: string;
type?: InputType;
@@ -13,6 +19,7 @@ interface CustomInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
error?: string;
containerClassName?: string;
size?: "sm" | "md" | "lg";
validationJson?: ValidationJsonRule | string;
}
const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>(
@@ -29,7 +36,9 @@ const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>(
containerClassName = "",
error,
onInput,
onChange,
size = "md",
validationJson,
...props
},
ref
@@ -37,6 +46,7 @@ const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>(
const isPassword = type === "password";
const isPhone = phonePrefix !== undefined;
const [showPassword, setShowPassword] = useState(false);
const [validationError, setValidationError] = useState<string>("");
const inputType = isPassword && showPassword ? "text" : type;
@@ -46,16 +56,101 @@ const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>(
lg: "py-3 text-base h-[48px]",
};
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
if (maxLength && (type === "number" || type === "tel")) {
const target = e.target as HTMLInputElement;
if (target.value.length > maxLength) {
target.value = target.value.slice(0, maxLength);
const parsedValJson: ValidationJsonRule | null = (() => {
if (!validationJson) return null;
if (typeof validationJson === "string") {
try {
return JSON.parse(validationJson);
} catch {
return null;
}
}
return validationJson;
})();
const effectiveMax = parsedValJson?.max !== undefined ? Number(parsedValJson.max) : maxLength;
const effectiveMin = parsedValJson?.min !== undefined ? Number(parsedValJson.min) : undefined;
const effectiveRegex = parsedValJson?.regex || undefined;
const validateInput = (val: string) => {
const fieldLabel = label ? `"${label}"` : "This field";
// 1. Max length / value check
if (effectiveMax !== undefined && effectiveMax > 0) {
if (type === "number") {
if (val !== "" && Number(val) > effectiveMax) {
setValidationError(`${fieldLabel} cannot be greater than ${effectiveMax}`);
return;
}
} else {
if (val.length >= effectiveMax) {
setValidationError(`${fieldLabel} cannot exceed ${effectiveMax} characters`);
return;
}
}
}
// 2. Min length / value check
if (effectiveMin !== undefined && effectiveMin > 0) {
if (type === "number") {
if (val !== "" && Number(val) < effectiveMin) {
setValidationError(`${fieldLabel} must be at least ${effectiveMin}`);
return;
}
} else {
if (val.length > 0 && val.length < effectiveMin) {
setValidationError(`${fieldLabel} must be at least ${effectiveMin} characters`);
return;
}
}
}
// 3. Regex check
if (effectiveRegex && val.length > 0) {
try {
const reg = new RegExp(effectiveRegex, "u");
if (!reg.test(val)) {
setValidationError(`Invalid format for ${fieldLabel}`);
return;
}
} catch {
// ignore invalid regex string syntax
}
}
setValidationError("");
};
useEffect(() => {
if (props.value !== undefined && props.value !== null) {
validateInput(String(props.value));
}
}, [props.value, effectiveMax, effectiveMin, effectiveRegex, label]);
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
const target = e.target as HTMLInputElement;
if (effectiveMax && (type === "number" || type === "tel")) {
if (target.value.length > effectiveMax) {
target.value = target.value.slice(0, effectiveMax);
}
}
validateInput(target.value);
onInput?.(e as any);
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const target = e.target as HTMLInputElement;
if (effectiveMax && (type === "number" || type === "tel")) {
if (target.value.length > effectiveMax) {
target.value = target.value.slice(0, effectiveMax);
}
}
validateInput(target.value);
onChange?.(e);
};
const displayError = error || validationError;
return (
<div className={`w-full flex flex-col gap-1.5 ${containerClassName}`}>
{label && (
@@ -88,9 +183,10 @@ const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>(
ref={ref}
type={inputType}
maxLength={
type === "number" || type === "tel" ? undefined : maxLength
type === "number" || type === "tel" ? undefined : effectiveMax
}
onInput={handleInput}
onChange={handleChange}
disabled={disabled}
className={`
${isPhone
@@ -98,7 +194,7 @@ const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>(
: `
w-full rounded-lg
bg-white text-gray-900
border ${error ? "border-red-500" : "border-gray-300"}
border ${displayError ? "border-red-500" : "border-gray-300"}
px-3 ${sizeClasses[size]}
outline-none
transition-all duration-200
@@ -131,7 +227,7 @@ const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>(
)
)}
</div>
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
{displayError && <p className="text-xs text-red-500 mt-1">{displayError}</p>}
</div>
);
}
+87 -4
View File
@@ -1,4 +1,10 @@
import React, { forwardRef } from "react";
import React, { useState, forwardRef, useEffect } from "react";
export interface ValidationJsonRule {
min?: number;
max?: number;
regex?: string;
}
interface CustomTextAreaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -8,6 +14,7 @@ interface CustomTextAreaProps
maxLength?: number;
error?: string;
size?: "sm" | "md" | "lg";
validationJson?: ValidationJsonRule | string;
}
const CustomTextArea = forwardRef<HTMLTextAreaElement, CustomTextAreaProps>(
@@ -21,16 +28,90 @@ const CustomTextArea = forwardRef<HTMLTextAreaElement, CustomTextAreaProps>(
className = "",
rows = 4,
size = "md",
error,
onInput,
onChange,
validationJson,
...props
},
ref
) => {
const [validationError, setValidationError] = useState<string>("");
const sizeClasses = {
sm: "py-2 text-sm",
md: "py-2.5 text-sm",
lg: "py-3 text-base",
};
const parsedValJson: ValidationJsonRule | null = (() => {
if (!validationJson) return null;
if (typeof validationJson === "string") {
try {
return JSON.parse(validationJson);
} catch {
return null;
}
}
return validationJson;
})();
const effectiveMax = parsedValJson?.max !== undefined ? Number(parsedValJson.max) : maxLength;
const effectiveMin = parsedValJson?.min !== undefined ? Number(parsedValJson.min) : undefined;
const effectiveRegex = parsedValJson?.regex || undefined;
const validateInput = (val: string) => {
const fieldLabel = label ? `"${label}"` : "This field";
if (effectiveMax !== undefined && effectiveMax > 0) {
if (val.length >= effectiveMax) {
setValidationError(`${fieldLabel} cannot exceed ${effectiveMax} characters`);
return;
}
}
if (effectiveMin !== undefined && effectiveMin > 0) {
if (val.length > 0 && val.length < effectiveMin) {
setValidationError(`${fieldLabel} must be at least ${effectiveMin} characters`);
return;
}
}
if (effectiveRegex && val.length > 0) {
try {
const reg = new RegExp(effectiveRegex, "u");
if (!reg.test(val)) {
setValidationError(`Invalid format for ${fieldLabel}`);
return;
}
} catch {
// ignore invalid regex string syntax
}
}
setValidationError("");
};
useEffect(() => {
if (props.value !== undefined && props.value !== null) {
validateInput(String(props.value));
}
}, [props.value, effectiveMax, effectiveMin, effectiveRegex, label]);
const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
const target = e.target as HTMLTextAreaElement;
validateInput(target.value);
onInput?.(e as any);
};
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const target = e.target as HTMLTextAreaElement;
validateInput(target.value);
onChange?.(e);
};
const displayError = error || validationError;
return (
<div className="w-full flex flex-col gap-1.5">
{label && (
@@ -50,12 +131,14 @@ const CustomTextArea = forwardRef<HTMLTextAreaElement, CustomTextAreaProps>(
<textarea
ref={ref}
rows={rows}
maxLength={maxLength}
maxLength={effectiveMax}
onInput={handleInput}
onChange={handleChange}
disabled={disabled}
className={`
w-full rounded-lg
bg-white text-gray-900
border ${props.error ? 'border-red-500' : 'border-gray-300'}
border ${displayError ? 'border-red-500' : 'border-gray-300'}
px-3 ${sizeClasses[size]}
outline-none
transition-all duration-200
@@ -77,7 +160,7 @@ const CustomTextArea = forwardRef<HTMLTextAreaElement, CustomTextAreaProps>(
</span>
)}
</div>
{props.error && <p className="text-xs text-red-500 mt-1">{props.error}</p>}
{displayError && <p className="text-xs text-red-500 mt-1">{displayError}</p>}
</div>
);
}