From d3269e002f3409cf5b16ef7d1bdaeb11e682d98f Mon Sep 17 00:00:00 2001
From: isra el <vernu1997@gmail.com>
Date: Tue, 18 Mar 2025 08:01:25 +0300
Subject: [PATCH] fix(web): show current active subscription status in
 my-account correctly

---
 .../(components)/account-settings.tsx         | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/web/app/(app)/dashboard/(components)/account-settings.tsx b/web/app/(app)/dashboard/(components)/account-settings.tsx
index 16590a6..bdde2fc 100644
--- a/web/app/(app)/dashboard/(components)/account-settings.tsx
+++ b/web/app/(app)/dashboard/(components)/account-settings.tsx
@@ -268,10 +268,33 @@ export default function AccountSettings() {
               )}
             </div>
           </div>
-          <div className='flex items-center bg-green-50 dark:bg-green-900/30 px-2 py-0.5 rounded-full'>
-            <Check className='h-3 w-3 text-green-600 dark:text-green-400 mr-1' />
-            <span className='text-xs font-medium text-green-600 dark:text-green-400'>
-              Active
+          <div className={`flex items-center px-2 py-0.5 rounded-full ${
+            currentSubscription?.status === 'active' 
+              ? 'bg-green-50 dark:bg-green-900/30' 
+              : currentSubscription?.status === 'past_due'
+                ? 'bg-amber-50 dark:bg-amber-900/30'
+                : 'bg-gray-50 dark:bg-gray-800/50'
+          }`}>
+            <Check className={`h-3 w-3 mr-1 ${
+              currentSubscription?.status === 'active'
+                ? 'text-green-600 dark:text-green-400'
+                : currentSubscription?.status === 'past_due'
+                  ? 'text-amber-600 dark:text-amber-400'
+                  : 'text-gray-600 dark:text-gray-400'
+            }`} />
+            <span className={`text-xs font-medium ${
+              currentSubscription?.status === 'active'
+                ? 'text-green-600 dark:text-green-400'
+                : currentSubscription?.status === 'past_due'
+                  ? 'text-amber-600 dark:text-amber-400'
+                  : 'text-gray-600 dark:text-gray-400'
+            }`}>
+              {currentSubscription?.status 
+                ? currentSubscription.status
+                    .split('_')
+                    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                    .join(' ')
+                : 'Active'}
             </span>
           </div>
         </div>