feat: add AddPolicyEngine component with dynamic rule and action configuration logic

This commit is contained in:
azeeee05
2026-08-21 11:23:30 +05:30
parent cd5fcc3084
commit 7f9d20309a
@@ -929,6 +929,7 @@ export default function AddPolicyEngine() {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<CustomMultiSelect <CustomMultiSelect
label='Jurisdiction' label='Jurisdiction'
required
options={jurisdictionOptions} options={jurisdictionOptions}
value={jurisdiction} value={jurisdiction}
onChange={setJurisdiction} onChange={setJurisdiction}
@@ -936,7 +937,7 @@ export default function AddPolicyEngine() {
/> />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label className="text-[13px] font-semibold text-gray-700">Status</label> <label className="text-[13px] font-semibold text-gray-700">Status<span className="text-red-500 ml-1">*</span></label>
<div className="flex items-center gap-6 h-11"> <div className="flex items-center gap-6 h-11">
<CustomRadio <CustomRadio
name="status" name="status"
@@ -957,6 +958,7 @@ export default function AddPolicyEngine() {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<CustomTextArea <CustomTextArea
label='Description' label='Description'
required
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
placeholder="Enter description..." placeholder="Enter description..."
@@ -989,6 +991,7 @@ export default function AddPolicyEngine() {
<div className="w-1/3 flex flex-col gap-2"> <div className="w-1/3 flex flex-col gap-2">
<CustomMultiSelect <CustomMultiSelect
label='Cohort' label='Cohort'
required
options={cohortOptions} options={cohortOptions}
value={selectedCohorts} value={selectedCohorts}
onChange={setSelectedCohorts} onChange={setSelectedCohorts}
@@ -1035,6 +1038,7 @@ export default function AddPolicyEngine() {
<div className="w-1/3 flex flex-col gap-2"> <div className="w-1/3 flex flex-col gap-2">
<CustomDropdown <CustomDropdown
label='Rule Category' label='Rule Category'
required
options={ruleCategoryOptions} options={ruleCategoryOptions}
value={rule.category} value={rule.category}
onChange={(val) => handleCategoryChange(rule.id, val)} onChange={(val) => handleCategoryChange(rule.id, val)}
@@ -1042,7 +1046,7 @@ export default function AddPolicyEngine() {
/> />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label className="text-[14px] font-medium leading-none text-[#001811]">Priority</label> <label className="text-[14px] font-medium leading-none text-[#001811]">Priority<span className="text-red-500 ml-1">*</span></label>
{(() => { {(() => {
const prevPriority = getPrevPriority(rule); const prevPriority = getPrevPriority(rule);
const nextPriority = getNextPriority(rule); const nextPriority = getNextPriority(rule);
@@ -1090,6 +1094,7 @@ export default function AddPolicyEngine() {
<div className="flex-1 flex flex-col gap-2"> <div className="flex-1 flex flex-col gap-2">
<CustomDropdown <CustomDropdown
label='Condition' label='Condition'
required
options={categoryConditionMap[rule.category] || []} options={categoryConditionMap[rule.category] || []}
value={condition.condition} value={condition.condition}
onChange={(val) => handleConditionFieldSelect(rule.id, condition.id, val)} onChange={(val) => handleConditionFieldSelect(rule.id, condition.id, val)}
@@ -1100,6 +1105,7 @@ export default function AddPolicyEngine() {
<div className="flex-1 flex flex-col gap-2"> <div className="flex-1 flex flex-col gap-2">
<CustomDropdown <CustomDropdown
label='Operator' label='Operator'
required
options={operatorOptions} options={operatorOptions}
value={condition.operator} value={condition.operator}
onChange={(val) => handleUpdateCondition(rule.id, condition.id, { operator: val })} onChange={(val) => handleUpdateCondition(rule.id, condition.id, { operator: val })}
@@ -1110,6 +1116,7 @@ export default function AddPolicyEngine() {
{isLookup ? ( {isLookup ? (
<CustomDropdown <CustomDropdown
label='Value' label='Value'
required
options={lookupOpts} options={lookupOpts}
value={condition.value} value={condition.value}
onChange={(val) => handleUpdateCondition(rule.id, condition.id, { value: val })} onChange={(val) => handleUpdateCondition(rule.id, condition.id, { value: val })}
@@ -1118,6 +1125,7 @@ export default function AddPolicyEngine() {
) : isBoolean ? ( ) : isBoolean ? (
<CustomDropdown <CustomDropdown
label='Value' label='Value'
required
options={[ options={[
{ label: 'True', value: 'true' }, { label: 'True', value: 'true' },
{ label: 'False', value: 'false' }, { label: 'False', value: 'false' },
@@ -1129,6 +1137,7 @@ export default function AddPolicyEngine() {
) : ( ) : (
<CustomInput <CustomInput
label='Value' label='Value'
required
type={isNumber ? 'number' : 'text'} type={isNumber ? 'number' : 'text'}
value={condition.value} value={condition.value}
onChange={(e) => handleUpdateCondition(rule.id, condition.id, { value: e.target.value })} onChange={(e) => handleUpdateCondition(rule.id, condition.id, { value: e.target.value })}
@@ -1138,7 +1147,7 @@ export default function AddPolicyEngine() {
</div> </div>
{cIdx < rule.conditions.length - 1 ? ( {cIdx < rule.conditions.length - 1 ? (
<div className="w-[163px] flex flex-col gap-2"> <div className="w-[163px] flex flex-col gap-2">
<label className="text-[14px] font-medium leading-none text-[#001811]">Logic</label> <label className="text-[14px] font-medium leading-none text-[#001811]">Logic<span className="text-red-500 ml-1">*</span></label>
<LogicDropdown <LogicDropdown
value={condition.logic} value={condition.logic}
onChange={(val) => handleUpdateCondition(rule.id, condition.id, { logic: val })} onChange={(val) => handleUpdateCondition(rule.id, condition.id, { logic: val })}
@@ -1186,6 +1195,7 @@ export default function AddPolicyEngine() {
<div className="flex-1 flex flex-col gap-2"> <div className="flex-1 flex flex-col gap-2">
<CustomDropdown <CustomDropdown
label="Action Category" label="Action Category"
required
options={actionCategoryOptions} options={actionCategoryOptions}
value={action.actionCategoryId} value={action.actionCategoryId}
onChange={(val) => handleActionCategoryChange(rule.id, action.id, val)} onChange={(val) => handleActionCategoryChange(rule.id, action.id, val)}
@@ -1196,6 +1206,7 @@ export default function AddPolicyEngine() {
<div className="flex-1 flex flex-col gap-2"> <div className="flex-1 flex flex-col gap-2">
<CustomDropdown <CustomDropdown
label="Action Type" label="Action Type"
required
options={actionTypesByCategoryMap[action.actionCategoryId] || []} options={actionTypesByCategoryMap[action.actionCategoryId] || []}
value={action.actionTypeId} value={action.actionTypeId}
onChange={(val) => handleActionTypeChange(rule.id, action.id, val)} onChange={(val) => handleActionTypeChange(rule.id, action.id, val)}
@@ -1206,7 +1217,7 @@ export default function AddPolicyEngine() {
{aIdx < rule.actions.length - 1 ? ( {aIdx < rule.actions.length - 1 ? (
<div className="w-[163px] flex flex-col gap-2"> <div className="w-[163px] flex flex-col gap-2">
<label className="text-[14px] font-medium leading-none text-[#001811]">Logic</label> <label className="text-[14px] font-medium leading-none text-[#001811]">Logic<span className="text-red-500 ml-1">*</span></label>
<LogicDropdown value={action.logic} readOnly /> <LogicDropdown value={action.logic} readOnly />
</div> </div>
) : ( ) : (