credis pacakges ifxes

frontend/src/components/billing/PayInvoiceModal.tsx

@@ -339,7 +339,7 @@ export default function PayInvoiceModal({
         ) : (
           <>
             {/* Header */}
-            <div className="flex items-center justify-between mb-5">
+            <div className="flex items-center justify-between mb-5 pr-8">
               <div>
                 <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Pay Invoice</h2>
                 <p className="text-sm text-gray-500 dark:text-gray-400">#{invoice.invoice_number}</p>
@@ -348,6 +348,11 @@ export default function PayInvoiceModal({
                 <div className="text-2xl font-bold text-gray-900 dark:text-white">
                   {currency} {amount.toFixed(2)}
                 </div>
+                {isPakistan && selectedOption === 'bank_transfer' && (
+                  <div className="text-sm text-gray-500 dark:text-gray-400">
+                    ≈ PKR {Math.round(amount * 278).toLocaleString()}
+                  </div>
+                )}
               </div>
             </div>
 

frontend/src/components/ui/modal/index.tsx

@@ -71,11 +71,11 @@ export const Modal: React.FC<ModalProps> = ({
         {showCloseButton && (
           <button
             onClick={onClose}
-            className="absolute right-3 top-3 z-999 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
+            className="absolute right-2 top-2 z-999 flex h-7 w-7 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-3 sm:top-3 sm:h-8 sm:w-8"
           >
             <svg
-              width="24"
-              height="24"
+              width="16"
+              height="16"
               viewBox="0 0 24 24"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"

frontend/src/pages/account/PlansAndBillingPage.tsx

@@ -667,11 +667,19 @@ export default function PlansAndBillingPage() {
   
   // FIX: hasActivePlan should check account status, not just plan existence
   const accountStatus = user?.account?.status || '';
-  const hasPendingInvoice = invoices.some((inv) => inv.status === 'pending');
+  // FIX: Only consider SUBSCRIPTION invoices as pending for activation status
+  // Credit package invoices should NOT affect account active status
+  const hasPendingSubscriptionInvoice = invoices.some((inv) => 
+    inv.status === 'pending' && inv.subscription !== null && inv.subscription !== undefined
+  );
+  // Credit package invoices - pending but NOT subscription related
+  const hasPendingCreditInvoice = invoices.some((inv) => 
+    inv.status === 'pending' && (inv.subscription === null || inv.subscription === undefined)
+  );
   // Accept both 'active' and 'trial' status (free plans get 'trial' status)
   const hasActivePlan = (accountStatus === 'active' || accountStatus === 'trial')
                      && effectivePlanId 
-                     && !hasPendingInvoice;
+                     && !hasPendingSubscriptionInvoice;
   
   const hasPendingPayment = payments.some((p) => p.status === 'pending_approval');
   
@@ -680,7 +688,10 @@ export default function PlansAndBillingPage() {
   // - user has never made a successful payment
   const hasEverPaid = payments.some((p) => p.status === 'succeeded' || p.status === 'completed');
   const isNewUserPendingPayment = accountStatus === 'pending_payment' && !hasEverPaid;
-  const pendingInvoice = invoices.find((inv) => inv.status === 'pending');
+  // For new user flow, find specifically a SUBSCRIPTION pending invoice
+  const pendingSubscriptionInvoice = invoices.find((inv) => 
+    inv.status === 'pending' && inv.subscription !== null && inv.subscription !== undefined
+  );
   const billingCountry = (user?.account as any)?.billing_country || 'US';
   
   // FIX: canManageBilling should check if user actually paid via Stripe
@@ -691,8 +702,9 @@ export default function PlansAndBillingPage() {
   // Determine effective currency for display based on country and payment method
   const effectiveCurrency = getCurrencyForDisplay(billingCountry, userPaymentMethod);
   
-  // Combined check: disable Buy Credits if no active plan OR has pending invoice
-  const canBuyCredits = hasActivePlan && !hasPendingInvoice;
+  // Combined check: disable Buy Credits if no active plan OR has pending credit invoice
+  // Subscription invoices don't block credit purchases, only existing credit package invoices do
+  const canBuyCredits = hasActivePlan && !hasPendingCreditInvoice;
 
   // Credit usage percentage
   const creditUsage = creditBalance && creditBalance.plan_credits_per_month > 0
@@ -776,13 +788,13 @@ export default function PlansAndBillingPage() {
 
   // NEW USER PENDING PAYMENT - Show full-page payment view
   // This is the simplified flow for users who just signed up with a paid plan
-  if (isNewUserPendingPayment && pendingInvoice) {
-    const planName = currentPlan?.name || pendingInvoice.subscription?.plan?.name || 'Selected Plan';
-    const invoiceCurrency = pendingInvoice.currency || 'USD';
+  if (isNewUserPendingPayment && pendingSubscriptionInvoice) {
+    const planName = currentPlan?.name || pendingSubscriptionInvoice.subscription?.plan?.name || 'Selected Plan';
+    const invoiceCurrency = pendingSubscriptionInvoice.currency || 'USD';
     
     // Get USD price from plan, PKR price from invoice
-    const planUSDPrice = currentPlan?.price || pendingInvoice.subscription?.plan?.price || '0';
-    const invoicePKRPrice = invoiceCurrency === 'PKR' ? (pendingInvoice.total_amount || pendingInvoice.total || '0') : undefined;
+    const planUSDPrice = currentPlan?.price || pendingSubscriptionInvoice.subscription?.plan?.price || '0';
+    const invoicePKRPrice = invoiceCurrency === 'PKR' ? (pendingSubscriptionInvoice.total_amount || pendingSubscriptionInvoice.total || '0') : undefined;
     
     // Check if user has a pending bank transfer (status = pending_approval with payment_method = bank_transfer)
     const hasPendingBankTransfer = payments.some(
@@ -801,7 +813,7 @@ export default function PlansAndBillingPage() {
     
     return (
       <PendingPaymentView
-        invoice={pendingInvoice}
+        invoice={pendingSubscriptionInvoice}
         userCountry={billingCountry}
         planName={planName}
         planPrice={planUSDPrice}
@@ -1067,14 +1079,14 @@ export default function PlansAndBillingPage() {
                   Subscribe to a plan first to purchase additional credits
                 </p>
               </div>
-            ) : hasPendingInvoice ? (
+            ) : hasPendingCreditInvoice ? (
               <div className="text-center py-8 border-2 border-dashed border-warning-200 dark:border-warning-700 bg-warning-50 dark:bg-warning-900/20 rounded-xl">
                 <AlertCircleIcon className="w-8 h-8 mx-auto text-warning-500 mb-2" />
                 <p className="text-warning-700 dark:text-warning-300 text-sm font-medium">
-                  Please pay your pending invoice first
+                  You have a pending credit invoice
                 </p>
                 <p className="text-warning-600 dark:text-warning-400 text-xs mt-1">
-                  Credit purchases are disabled until your outstanding balance is settled
+                  Complete or cancel your pending payment before purchasing more credits
                 </p>
               </div>
             ) : (