feat: create AddPolicyEngine component with dynamic condition and action builders

src/app/policyEngine/components/AddPolicyEngine.tsx

@@ -15,6 +15,7 @@ import {
   CustomSwitch,
   CustomCheckBox,
   CustomLoader,
+  Skeleton,
 } from '../../../components/custom';
 import CustomSuccessModal from '../../../components/custom/CustomSuccessModal';
 import {
@@ -544,7 +545,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 ? 'active' : 'draft',
+        status: isDeploy ? status.toLowerCase() : 'draft',
         audienceType: audienceType === 'Selected Cohorts' ? 'COHORT' : 'ALL',
         targetAudiences:
           audienceType === 'Selected Cohorts'
@@ -759,8 +760,82 @@ export default function AddPolicyEngine() {
 
   if (loadingPolicy) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-white">
+      <div className="flex flex-col h-full bg-white min-h-screen">
-        <CustomLoader label="Loading Policy Details..." />
+        {/* ─── Header Skeleton ────────────────────────────────────────────── */}
+        <div className="flex items-center justify-between py-4 bg-white border-b border-gray-200">
+          <div className="flex items-start gap-4">
+            <div className="mt-1 p-1">
+              <Skeleton variant="circular" className="w-5 h-5" />
+            </div>
+            <div className="flex flex-col gap-1">
+              <Skeleton className="w-48 h-7" />
+              <Skeleton className="w-32 h-4" />
+            </div>
+          </div>
+        </div>
+
+        {/* ─── Body Content Skeleton ──────────────────────────────────────── */}
+        <div className="flex-1 overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden py-6 pb-32">
+          <div className="w-full flex flex-col gap-6">
+            
+            {/* Policy Information Card */}
+            <div className="bg-[#FAFAFA] rounded-[16px] p-6 border border-gray-100">
+              <div className="flex items-center gap-2 mb-5">
+                <Skeleton className="w-8 h-8 rounded-lg" />
+                <Skeleton className="w-40 h-5" />
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                <div className="flex flex-col gap-2">
+                  <Skeleton className="w-24 h-4" />
+                  <Skeleton className="w-full h-11" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Skeleton className="w-24 h-4" />
+                  <Skeleton className="w-full h-11" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Skeleton className="w-24 h-4" />
+                  <Skeleton className="w-full h-11" />
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <Skeleton className="w-24 h-4" />
+                <Skeleton className="w-full h-24" />
+              </div>
+            </div>
+
+            {/* Target Audience Card */}
+            <div className="bg-[#FAFAFA] rounded-[16px] p-6 border border-gray-100">
+              <div className="flex items-center gap-2 mb-5">
+                <Skeleton className="w-8 h-8 rounded-lg" />
+                <Skeleton className="w-40 h-5" />
+              </div>
+              <div className="flex flex-col gap-6">
+                <div className="flex items-center gap-8">
+                  <Skeleton className="w-32 h-6" />
+                  <Skeleton className="w-32 h-6" />
+                </div>
+              </div>
+            </div>
+
+            {/* Rule Engine Card */}
+            <div className="bg-[#FAFAFA] rounded-[16px] p-6 border border-gray-100">
+              <div className="flex items-center justify-between mb-6">
+                <div className="flex items-center gap-2">
+                  <Skeleton className="w-8 h-8 rounded-lg" />
+                  <Skeleton className="w-32 h-5" />
+                </div>
+                <Skeleton className="w-40 h-10 rounded-lg" />
+              </div>
+              <div className="border border-gray-100 rounded-[12px] p-6 bg-white">
+                <Skeleton className="w-full h-32" />
+              </div>
+            </div>
+
+          </div>
+        </div>
       </div>
     );
   }