feat: implement AddPolicyEngine component for dynamic policy and rule configuration

src/app/policyEngine/components/AddPolicyEngine.tsx

@@ -336,7 +336,7 @@ export default function AddPolicyEngine() {
   // Policy Info State
   const [policyName, setPolicyName] = useState('');
   const [jurisdiction, setJurisdiction] = useState<(string | number)[]>([]);
-  const [status, setStatus] = useState<'Active' | 'Inactive'>('Active');
+  const [status, setStatus] = useState<'Active' | 'Inactive' | 'Draft'>('Active');
   const [description, setDescription] = useState('');
 
   // Target Audience State
@@ -379,7 +379,8 @@ export default function AddPolicyEngine() {
           setJurisdiction(singleJur ? [singleJur] : []);
         }
         setStatus(
-          data.status?.toLowerCase() === 'active' ? 'Active' : 'Inactive'
+          data.status?.toLowerCase() === 'active' ? 'Active' :
+          data.status?.toLowerCase() === 'draft' ? 'Draft' : 'Inactive'
         );
         setDescription(data.description || '');
 
@@ -566,8 +567,13 @@ export default function AddPolicyEngine() {
     return true;
   })();
 
+  const isDraftValid = policyName.trim().length > 0;
+
   const handleSavePolicy = async (isDeploy: boolean) => {
-    if (!isFormValid) {
+    if (isDeploy && !isFormValid) {
+      return;
+    }
+    if (!isDeploy && !isDraftValid) {
       return;
     }
 
@@ -578,7 +584,7 @@ export default function AddPolicyEngine() {
         jurisdictionId: Array.isArray(jurisdiction) && jurisdiction.length > 0 ? String(jurisdiction[0]) : undefined,
         jurisdictionIds: Array.isArray(jurisdiction) ? jurisdiction.map(String) : [],
         description: description || undefined,
-        status: isDeploy ? status.toLowerCase() : 'draft',
+        status: isDeploy ? (status === 'Draft' ? 'active' : status.toLowerCase()) : 'draft',
         audienceType: audienceType === 'Selected Cohorts' ? 'COHORT' : 'ALL',
         targetAudiences:
           audienceType === 'Selected Cohorts'
@@ -1369,16 +1375,14 @@ export default function AddPolicyEngine() {
           <CustomStatus status={status} />
         </div>
         <div className="flex items-center gap-3">
-          {!isEditMode && (
-            <CustomButton
-              variant="secondary"
-              className="!text-[#1E7D5C] !bg-[#E8F3EF] hover:!bg-[#d9ece4] !border-none font-semibold px-6 disabled:opacity-50"
-              onClick={() => handleSavePolicy(false)}
-              disabled={isSaving || !isFormValid}
-            >
-              {isSaving ? 'Saving...' : 'Save Draft'}
-            </CustomButton>
-          )}
+          <CustomButton
+            variant="secondary"
+            className="!text-[#1E7D5C] !bg-[#E8F3EF] hover:!bg-[#d9ece4] !border-none font-semibold px-6 disabled:opacity-50"
+            onClick={() => handleSavePolicy(false)}
+            disabled={isSaving || !isDraftValid}
+          >
+            {isSaving ? 'Saving...' : 'Save Draft'}
+          </CustomButton>
           <CustomButton
             variant="outlined"
             className="!border-[#1E7D5C] !text-[#1E7D5C] hover:!bg-gray-50 font-semibold px-6"