From 51d0acb90cff9cd4c72765db767f9e35b62f8396 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Sun, 17 Aug 2025 17:32:24 +0530
Subject: [PATCH] chore: account health

---
 .../captain/campaign/CampaignPlayground.vue   |  2 +-
 .../campaign/EditCampaignForm.vue             | 77 +++++++++++++++++++
 .../dashboard/i18n/locale/en/campaign.json    | 14 ++++
 3 files changed, 92 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/captain/campaign/CampaignPlayground.vue b/app/javascript/dashboard/components-next/captain/campaign/CampaignPlayground.vue
index c013077f0..a5cd67da0 100644
--- a/app/javascript/dashboard/components-next/captain/campaign/CampaignPlayground.vue
+++ b/app/javascript/dashboard/components-next/captain/campaign/CampaignPlayground.vue
@@ -46,7 +46,7 @@ watch(
 </script>
 
 <template>
-  <div class="p-4 h-full bg-white rounded-lg border">
+  <div class="p-4 h-full bg-white rounded-lg border border-n-slate-4">
     <h3 class="mb-4 text-lg font-semibold">
       {{ t('CAMPAIGN.PLAYGROUND.TITLE') }}
     </h3>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/campaign/EditCampaignForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/campaign/EditCampaignForm.vue
index 46bce9783..eb26eaf8f 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/campaign/EditCampaignForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/campaign/EditCampaignForm.vue
@@ -366,6 +366,83 @@ watch(
       </div>
     </Accordion>
 
+    <!-- Account Health Section -->
+    <Accordion :title="t('CAMPAIGN.FORM.SECTIONS.ACCOUNT_HEALTH')">
+      <div class="flex flex-col gap-6 pt-4">
+        <!-- Messaging Tier Card -->
+        <div class="p-4 border rounded-lg bg-n-alpha-1 border-n-weak">
+          <div class="flex items-start justify-between">
+            <div class="flex items-center gap-2">
+              <span class="i-lucide-gauge text-lg text-n-slate-10" />
+              <div>
+                <h4 class="text-sm font-medium text-n-slate-12">
+                  {{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.MESSAGING_TIER') }}
+                </h4>
+                <p class="text-xs text-n-slate-11 mt-1">
+                  {{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.TIER_DESCRIPTION') }}
+                </p>
+              </div>
+            </div>
+            <a
+              href="https://www.zoko.io/learning-article/whatsapp-business-api-messaging-limits-and-how-to-upgrade-to-the-next-tier"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-1 text-n-blue-11 hover:text-n-blue-12 text-xs underline"
+            >
+              {{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.LEARN_MORE') }}
+              <span class="i-lucide-external-link text-xs" />
+            </a>
+          </div>
+        </div>
+
+        <!-- Account Health Status -->
+        <div class="p-4 border rounded-lg bg-n-alpha-1 border-n-weak">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <span class="i-lucide-heart-pulse text-lg text-green-600" />
+              <div>
+                <h4 class="text-sm font-medium text-n-slate-12">
+                  {{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.ACCOUNT_HEALTH') }}
+                </h4>
+                <p class="text-xs text-n-slate-11 mt-1">
+                  {{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.QUALITY_RATING') }}
+                </p>
+              </div>
+            </div>
+            <span
+              class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-white bg-green-600 rounded-full"
+            >
+              <span class="w-1.5 h-1.5 bg-white rounded-full mr-1.5" />
+              {{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.HEALTH_GREEN') }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Account Status -->
+        <div class="p-4 border rounded-lg bg-n-alpha-1 border-n-weak">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <span class="i-lucide-wifi text-lg text-blue-600" />
+              <div>
+                <h4 class="text-sm font-medium text-n-slate-12">
+                  {{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.ACCOUNT_STATUS') }}
+                </h4>
+                <p class="text-xs text-n-slate-11 mt-1">
+                  {{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.API_CONNECTION') }}
+                </p>
+              </div>
+            </div>
+            <span
+              class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-100 rounded-full"
+            >
+              <span class="w-1.5 h-1.5 bg-blue-600 rounded-full mr-1.5" />
+              {{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.STATUS_CONNECTED') }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </Accordion>
+
     <!-- Schedule Template Section -->
     <Accordion :title="t('CAMPAIGN.FORM.SECTIONS.SCHEDULE_TEMPLATE')">
       <div class="flex flex-col gap-4 pt-4">
diff --git a/app/javascript/dashboard/i18n/locale/en/campaign.json b/app/javascript/dashboard/i18n/locale/en/campaign.json
index eed7aa523..fbad78764 100644
--- a/app/javascript/dashboard/i18n/locale/en/campaign.json
+++ b/app/javascript/dashboard/i18n/locale/en/campaign.json
@@ -211,6 +211,7 @@
         "BASIC_DETAILS": "Basic Details",
         "SELECT_TEMPLATE": "Select Template",
         "SELECT_AUDIENCE": "Select Audience",
+        "ACCOUNT_HEALTH": "Account Health",
         "SCHEDULE_TEMPLATE": "Schedule Template"
       },
       "TITLE": {
@@ -250,6 +251,19 @@
         "VIEW_CONTACTS": "view contacts",
         "SENDING_TO": "You are sending this campaign to",
         "CONTACTS_TOTAL": "contacts"
+      },
+      "ACCOUNT_HEALTH": {
+        "MESSAGING_TIER": "Messaging Tier:",
+        "ACCOUNT_HEALTH": "Account Health:",
+        "ACCOUNT_STATUS": "Account Status:",
+        "TIER_DESCRIPTION": "TIER 3 (MAX 100,000 CUSTOMERS IN 24 HOURS)",
+        "STATUS_CONNECTED": "CONNECTED",
+        "HEALTH_GREEN": "GREEN",
+        "HEALTH_YELLOW": "YELLOW", 
+        "HEALTH_RED": "RED",
+        "LEARN_MORE": "Learn more about Tiers",
+        "QUALITY_RATING": "Quality rating",
+        "API_CONNECTION": "API connection"
       }
     },
     "PLAYGROUND": {