fix(billing): redirect to billing page after manual payment submission and improve status UX

- After submitting a bank transfer request, "Back to Billing" now navigates
  to /dashboard/admin/billing instead of resetting to the plan table, so
  users can immediately see their pending request in the queue
- Add try/catch + toast.error to handleManualSubmit so errors (e.g. duplicate
  pending request) are surfaced instead of swallowed silently
- Replace cryptic status badges with human-readable labels and per-status
  hint text explaining what happens next (awaiting review / instructions sent /
  payment received)
- Add clock icon and queue explanation to the pending requests card header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: guillermoscript

app/[locale]/dashboard/admin/billing/billing-dashboard-client.tsx

@@ -8,7 +8,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { ProofUpload } from '@/components/shared/proof-upload'
-import { IconExternalLink, IconRefresh, IconCreditCard, IconPhoto } from '@tabler/icons-react'
+import { IconExternalLink, IconRefresh, IconCreditCard, IconPhoto, IconClock } from '@tabler/icons-react'
 import { uploadPaymentProof, requestManualRenewal } from '@/app/actions/admin/billing'
 
 interface BillingDashboardClientProps {
@@ -176,8 +176,13 @@ export function BillingDashboardClient({ status, paymentRequests }: BillingDashb
       {pendingRequests.length > 0 && (
         <Card>
           <CardHeader>
-            <CardTitle>Pending Upgrade Requests</CardTitle>
-            <CardDescription>Bank transfer requests awaiting confirmation</CardDescription>
+            <CardTitle className="flex items-center gap-2">
+              <IconClock className="h-5 w-5" />
+              Pending Payment Requests
+            </CardTitle>
+            <CardDescription>
+              Your bank transfer request{pendingRequests.length > 1 ? 's are' : ' is'} in the queue — our team will review and activate your plan once payment is confirmed.
+            </CardDescription>
           </CardHeader>
           <CardContent>
             <div className="space-y-3">
@@ -192,8 +197,7 @@ export function BillingDashboardClient({ status, paymentRequests }: BillingDashb
                         {req.platform_plans?.name || 'Unknown Plan'}
                       </p>
                       <p className="text-sm text-muted-foreground">
-                        ${req.amount}/{req.interval === 'yearly' ? 'year' : 'month'} &middot;{' '}
-                        {new Date(req.created_at).toLocaleDateString()}
+                        ${req.amount}/{req.interval === 'yearly' ? 'year' : 'month'} &middot; Submitted {new Date(req.created_at).toLocaleDateString()}
                       </p>
                     </div>
                     <div className="flex items-center gap-2">
@@ -213,16 +217,26 @@ export function BillingDashboardClient({ status, paymentRequests }: BillingDashb
                           : req.status === 'instructions_sent' ? 'outline'
                             : 'default'
                       }>
-                        {req.status.replace(/_/g, ' ')}
+                        {req.status === 'pending' && 'Awaiting review'}
+                        {req.status === 'instructions_sent' && 'Instructions sent'}
+                        {req.status === 'payment_received' && 'Payment received'}
+                        {!['pending', 'instructions_sent', 'payment_received'].includes(req.status) && req.status.replace(/_/g, ' ')}
                       </Badge>
                     </div>
                   </div>
 
+                  {/* Status hint */}
+                  <p className="text-xs text-muted-foreground">
+                    {req.status === 'pending' && 'We\'ll send bank transfer instructions to your billing email shortly.'}
+                    {req.status === 'instructions_sent' && 'Check your email for bank transfer instructions. Once you\'ve transferred, upload proof below.'}
+                    {req.status === 'payment_received' && 'We\'ve received your payment and are confirming it. Your plan will be activated soon.'}
+                  </p>
+
                   {/* Proof upload for requests without proof */}
                   {!req.proof_url && (
                     <ProofUpload
                       onUpload={(file) => handleProofUpload(req.request_id, file)}
-                      label="Upload payment proof"
+                      label="Upload payment proof (optional — speeds up activation)"
                       disabled={uploadingFor === req.request_id}
                     />
                   )}

app/[locale]/dashboard/admin/billing/upgrade/upgrade-page-client.tsx

@@ -7,6 +7,7 @@ import { PlanComparisonTable } from '@/components/admin/plan-comparison-table'
 import { ManualTransferForm } from '@/components/admin/manual-transfer-form'
 import { requestManualPlanUpgrade } from '@/app/actions/admin/billing'
 import { useTranslations } from 'next-intl'
+import { useLocale } from 'next-intl'
 
 interface UpgradePageClientProps {
   plans: Array<{
@@ -25,8 +26,10 @@ interface UpgradePageClientProps {
 
 export function UpgradePageClient({ plans, currentPlan }: UpgradePageClientProps) {
   const router = useRouter()
+  const locale = useLocale()
   const t = useTranslations('dashboard.admin.billing.upgrade')
   const [loading, setLoading] = useState(false)
+  const [manualSubmitted, setManualSubmitted] = useState(false)
   const [manualTransfer, setManualTransfer] = useState<{
     planId: string
     planName: string
@@ -70,7 +73,13 @@ export function UpgradePageClient({ plans, currentPlan }: UpgradePageClientProps
 
   const handleManualSubmit = async (bankReference: string, notes: string) => {
     if (!manualTransfer) return
-    await requestManualPlanUpgrade(manualTransfer.planId, manualTransfer.interval, bankReference, notes)
+    try {
+      await requestManualPlanUpgrade(manualTransfer.planId, manualTransfer.interval, bankReference, notes)
+      setManualSubmitted(true)
+    } catch (e: any) {
+      toast.error(e.message || t('submitError'))
+      throw e
+    }
   }
 
   if (manualTransfer) {
@@ -80,7 +89,13 @@ export function UpgradePageClient({ plans, currentPlan }: UpgradePageClientProps
         amount={manualTransfer.amount}
         interval={manualTransfer.interval}
         onSubmit={handleManualSubmit}
-        onCancel={() => setManualTransfer(null)}
+        onCancel={() => {
+          if (manualSubmitted) {
+            router.push(`/${locale}/dashboard/admin/billing`)
+          } else {
+            setManualTransfer(null)
+          }
+        }}
       />
     )
   }