feat: add pricing checkout flow, MFA type fixes, and Wave 13 audit docs

- Pricing page: enhanced with checkout modal integration, plan
  comparison table, and subscription funnel
- Payment return page: new VNPay/MoMo callback handler
- Subscription components: new checkout-modal with payment method
  selection (VNPay, MoMo, ZaloPay)
- API modules: type-safe PII encryption, improved error handling in
  MFA/auth/payments/analytics/search/notifications modules
- Audit docs: comprehensive Wave 13 platform assessment, pricing
  audit, production readiness checklist
- Updated PROJECT_TRACKER with Wave 13 status

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/app/[locale]/(dashboard)/dashboard/subscription/page.tsx

@@ -2,18 +2,13 @@
 
 import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
+import { CheckoutModal } from '@/components/subscription/checkout-modal';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Link } from '@/i18n/navigation';
+import { formatVND } from '@/lib/currency';
 import { usePlans, useBillingHistory, useQuota, subscriptionKeys } from '@/lib/hooks/use-subscription';
 import {
   subscriptionApi,
@@ -21,13 +16,6 @@ import {
   type QuotaCheckResult,
 } from '@/lib/subscription-api';
 
-function formatVND(amount: string | number): string {
-  const num = typeof amount === 'string' ? Number(amount) : amount;
-  if (num === 0) return 'Miễn phí';
-  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} triệu đ`;
-  return num.toLocaleString('vi-VN') + ' đ';
-}
-
 const PLAN_TIER_ORDER = ['FREE', 'AGENT_PRO', 'INVESTOR', 'ENTERPRISE'];
 const PLAN_TIER_LABELS: Record<string, string> = {
   FREE: 'Miễn phí',
@@ -43,18 +31,35 @@ const STATUS_MAP: Record<string, { label: string; variant: 'default' | 'secondar
   EXPIRED: { label: 'Hết hạn', variant: 'secondary' },
 };
 
+const PAYMENT_STATUS_MAP: Record<string, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }> = {
+  COMPLETED: { label: 'Thành công', variant: 'default' },
+  FAILED: { label: 'Thất bại', variant: 'destructive' },
+  PENDING: { label: 'Chờ xử lý', variant: 'secondary' },
+  CANCELLED: { label: 'Đã hủy', variant: 'outline' },
+};
+
+const PAYMENT_TYPE_LABELS: Record<string, string> = {
+  SUBSCRIPTION: 'Đăng ký gói',
+  LISTING_FEE: 'Phí đăng tin',
+  DEPOSIT: 'Đặt cọc',
+  FEATURED_LISTING: 'Tin nổi bật',
+};
+
 export default function SubscriptionPage() {
   const queryClient = useQueryClient();
   const { data: plansData, isLoading: plansLoading } = usePlans();
   const { data: billing, isLoading: billingLoading } = useBillingHistory();
   const { data: listingsQuota } = useQuota('listings');
   const { data: savedSearchesQuota } = useQuota('saved_searches');
-  const [upgradeTarget, setUpgradeTarget] = useState<PlanDto | null>(null);
   const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly');
-  const [processing, setProcessing] = useState(false);
+  const [cancelProcessing, setCancelProcessing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState('plan');
 
+  // Checkout modal state
+  const [checkoutPlan, setCheckoutPlan] = useState<PlanDto | null>(null);
+  const [checkoutOpen, setCheckoutOpen] = useState(false);
+
   const loading = plansLoading || billingLoading;
   const plans = (plansData ?? []).slice().sort(
     (a, b) => PLAN_TIER_ORDER.indexOf(a.tier) - PLAN_TIER_ORDER.indexOf(b.tier),
@@ -69,22 +74,21 @@ export default function SubscriptionPage() {
     ? STATUS_MAP[billing.subscription.status] ?? { label: 'Đang hoạt động', variant: 'default' as const }
     : null;
 
-  const handleUpgrade = async () => {
-    if (!upgradeTarget) return;
-    setProcessing(true);
+  const handleUpgrade = (plan: PlanDto) => {
+    setCheckoutPlan(plan);
+    setCheckoutOpen(true);
+  };
+
+  const handleCancel = async () => {
+    setCancelProcessing(true);
     setError(null);
     try {
-      if (billing?.subscription) {
-        await subscriptionApi.upgradeSubscription(upgradeTarget.tier);
-      } else {
-        await subscriptionApi.createSubscription(upgradeTarget.tier, billingCycle);
-      }
+      await subscriptionApi.cancelSubscription('Hủy từ trang quản lý');
       await queryClient.invalidateQueries({ queryKey: subscriptionKeys.billing() });
-      setUpgradeTarget(null);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Nâng cấp thất bại');
+      setError(e instanceof Error ? e.message : 'Hủy gói thất bại');
     } finally {
-      setProcessing(false);
+      setCancelProcessing(false);
     }
   };
 
@@ -122,7 +126,7 @@ export default function SubscriptionPage() {
           <TabsContent value="plan" className="space-y-6">
             <Card>
               <CardHeader>
-                <div className="flex items-center justify-between">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                   <div>
                     <CardTitle className="text-lg">
                       Gói {PLAN_TIER_LABELS[currentTier] ?? currentTier}
@@ -133,10 +137,12 @@ export default function SubscriptionPage() {
                         : 'Bạn đang sử dụng gói miễn phí'}
                     </CardDescription>
                   </div>
-                  {subStatus && <Badge variant={subStatus.variant}>{subStatus.label}</Badge>}
+                  <div className="flex items-center gap-2">
+                    {subStatus && <Badge variant={subStatus.variant}>{subStatus.label}</Badge>}
+                  </div>
                 </div>
               </CardHeader>
-              <CardContent>
+              <CardContent className="space-y-6">
                 {/* Quota usage */}
                 {quotas.length > 0 && (
                   <div className="space-y-4">
@@ -155,7 +161,7 @@ export default function SubscriptionPage() {
                           </div>
                           <div className="h-2 w-full rounded-full bg-muted">
                             <div
-                              className={`h-2 rounded-full ${pct > 90 ? 'bg-red-500' : pct > 70 ? 'bg-yellow-500' : 'bg-primary'}`}
+                              className={`h-2 rounded-full transition-all ${pct > 90 ? 'bg-red-500' : pct > 70 ? 'bg-yellow-500' : 'bg-primary'}`}
                               style={{ width: `${Math.min(pct, 100)}%` }}
                             />
                           </div>
@@ -164,6 +170,28 @@ export default function SubscriptionPage() {
                     })}
                   </div>
                 )}
+
+                {/* Quick actions */}
+                <div className="flex flex-col gap-2 border-t pt-4 sm:flex-row">
+                  {currentTier !== 'ENTERPRISE' && (
+                    <Button onClick={() => setActiveTab('plans')}>
+                      Nâng cấp gói
+                    </Button>
+                  )}
+                  {billing?.subscription && billing.subscription.status === 'ACTIVE' && (
+                    <Button
+                      variant="outline"
+                      onClick={handleCancel}
+                      disabled={cancelProcessing}
+                      className="text-red-600 hover:text-red-700"
+                    >
+                      {cancelProcessing ? 'Đang xử lý...' : 'Hủy gói'}
+                    </Button>
+                  )}
+                  <Link href={'/pricing' as const}>
+                    <Button variant="outline">Xem bảng giá</Button>
+                  </Link>
+                </div>
               </CardContent>
             </Card>
           </TabsContent>
@@ -201,12 +229,17 @@ export default function SubscriptionPage() {
                 return (
                   <Card
                     key={plan.id}
-                    className={isCurrent ? 'border-primary ring-1 ring-primary' : ''}
+                    className={isCurrent ? 'border-green-500 ring-1 ring-green-500' : ''}
                   >
                     <CardHeader>
-                      <CardTitle className="text-lg">
-                        {PLAN_TIER_LABELS[plan.tier] ?? plan.name}
-                      </CardTitle>
+                      <div className="flex items-center justify-between">
+                        <CardTitle className="text-lg">
+                          {PLAN_TIER_LABELS[plan.tier] ?? plan.name}
+                        </CardTitle>
+                        {isCurrent && (
+                          <Badge className="bg-green-600 text-white">Hiện tại</Badge>
+                        )}
+                      </div>
                       <CardDescription>
                         <span className="text-2xl font-bold text-foreground">
                           {formatVND(price)}
@@ -234,15 +267,6 @@ export default function SubscriptionPage() {
                               : plan.maxSavedSearches}
                           </span>
                         </div>
-                        {plan.features &&
-                          Object.entries(plan.features).map(([key, val]) => (
-                            <div key={key} className="flex justify-between">
-                              <span className="text-muted-foreground">{key}</span>
-                              <span className="font-medium">
-                                {typeof val === 'boolean' ? (val ? '✓' : '✗') : String(val)}
-                              </span>
-                            </div>
-                          ))}
                       </div>
 
                       {isCurrent ? (
@@ -250,9 +274,17 @@ export default function SubscriptionPage() {
                           Gói hiện tại
                         </Button>
                       ) : isUpgrade ? (
-                        <Button className="w-full" onClick={() => setUpgradeTarget(plan)}>
-                          Nâng cấp
-                        </Button>
+                        plan.tier === 'ENTERPRISE' ? (
+                          <Link href={'/pricing' as const} className="block w-full">
+                            <Button variant="outline" className="w-full">
+                              Liên hệ tư vấn
+                            </Button>
+                          </Link>
+                        ) : (
+                          <Button className="w-full" onClick={() => handleUpgrade(plan)}>
+                            Nâng cấp
+                          </Button>
+                        )
                       ) : (
                         <Button variant="outline" className="w-full" disabled>
                           —
@@ -279,39 +311,30 @@ export default function SubscriptionPage() {
                   </div>
                 ) : (
                   <div className="space-y-3">
-                    {billing.payments.map((p) => (
-                      <div
-                        key={p.id}
-                        className="flex items-center justify-between rounded-lg border p-3"
-                      >
-                        <div>
-                          <p className="text-sm font-medium">{p.type}</p>
-                          <p className="text-xs text-muted-foreground">
-                            {new Date(p.createdAt).toLocaleDateString('vi-VN')} — {p.provider}
-                          </p>
+                    {billing.payments.map((p) => {
+                      const pStatus = PAYMENT_STATUS_MAP[p.status] ?? { label: p.status, variant: 'secondary' as const };
+                      return (
+                        <div
+                          key={p.id}
+                          className="flex items-center justify-between rounded-lg border p-3"
+                        >
+                          <div>
+                            <p className="text-sm font-medium">
+                              {PAYMENT_TYPE_LABELS[p.type] ?? p.type}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              {new Date(p.createdAt).toLocaleDateString('vi-VN')} — {p.provider}
+                            </p>
+                          </div>
+                          <div className="text-right">
+                            <p className="font-semibold">{formatVND(p.amountVND)}</p>
+                            <Badge variant={pStatus.variant}>
+                              {pStatus.label}
+                            </Badge>
+                          </div>
                         </div>
-                        <div className="text-right">
-                          <p className="font-semibold">{formatVND(p.amountVND)}</p>
-                          <Badge
-                            variant={
-                              p.status === 'COMPLETED'
-                                ? 'default'
-                                : p.status === 'FAILED'
-                                  ? 'destructive'
-                                  : 'secondary'
-                            }
-                          >
-                            {p.status === 'COMPLETED'
-                              ? 'Thành công'
-                              : p.status === 'FAILED'
-                                ? 'Thất bại'
-                                : p.status === 'PENDING'
-                                  ? 'Chờ xử lý'
-                                  : p.status}
-                          </Badge>
-                        </div>
-                      </div>
-                    ))}
+                      );
+                    })}
                   </div>
                 )}
               </CardContent>
@@ -320,52 +343,15 @@ export default function SubscriptionPage() {
         </Tabs>
       )}
 
-      {/* Upgrade dialog */}
-      <Dialog open={!!upgradeTarget} onOpenChange={(o) => !o && setUpgradeTarget(null)}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              Nâng cấp lên {PLAN_TIER_LABELS[upgradeTarget?.tier ?? ''] ?? upgradeTarget?.name}
-            </DialogTitle>
-            <DialogDescription>
-              Xác nhận nâng cấp gói dịch vụ. Bạn sẽ được chuyển hướng đến trang thanh toán.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-2 rounded-lg border bg-muted/50 p-4 text-sm">
-            <div className="flex justify-between">
-              <span className="text-muted-foreground">Gói</span>
-              <span className="font-medium">
-                {PLAN_TIER_LABELS[upgradeTarget?.tier ?? ''] ?? upgradeTarget?.name}
-              </span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-muted-foreground">Chu kỳ</span>
-              <span className="font-medium">
-                {billingCycle === 'monthly' ? 'Hàng tháng' : 'Hàng năm'}
-              </span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-muted-foreground">Giá</span>
-              <span className="font-semibold text-primary">
-                {upgradeTarget &&
-                  formatVND(
-                    billingCycle === 'monthly'
-                      ? upgradeTarget.priceMonthlyVND
-                      : upgradeTarget.priceYearlyVND,
-                  )}
-              </span>
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setUpgradeTarget(null)}>
-              Hủy
-            </Button>
-            <Button onClick={handleUpgrade} disabled={processing}>
-              {processing ? 'Đang xử lý...' : 'Xác nhận nâng cấp'}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      {/* Checkout modal */}
+      <CheckoutModal
+        open={checkoutOpen}
+        onOpenChange={setCheckoutOpen}
+        plan={checkoutPlan}
+        billingCycle={billingCycle}
+        isUpgrade={currentTierIndex > 0}
+        currentTier={currentTier}
+      />
     </div>
   );
 }

apps/web/app/[locale]/(public)/payment/return/page.tsx

@@ -0,0 +1,242 @@
+'use client';
+
+import { CheckCircle, Clock, Loader2, XCircle } from 'lucide-react';
+import { useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Link } from '@/i18n/navigation';
+import { formatVND } from '@/lib/currency';
+import { paymentApi, type PaymentStatusDto } from '@/lib/payment-api';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const POLL_INTERVAL_MS = 3000;
+const MAX_POLLS = 20; // max ~60 seconds
+
+const STATUS_CONFIG: Record<
+  string,
+  {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+    color: string;
+  }
+> = {
+  COMPLETED: {
+    icon: <CheckCircle className="h-12 w-12" />,
+    title: 'Thanh toán thành công!',
+    description: 'Gói dịch vụ của bạn đã được kích hoạt.',
+    color: 'text-green-600',
+  },
+  FAILED: {
+    icon: <XCircle className="h-12 w-12" />,
+    title: 'Thanh toán thất bại',
+    description: 'Giao dịch không thành công. Vui lòng thử lại.',
+    color: 'text-red-600',
+  },
+  PENDING: {
+    icon: <Clock className="h-12 w-12" />,
+    title: 'Đang xử lý thanh toán',
+    description: 'Giao dịch đang được xử lý. Vui lòng chờ...',
+    color: 'text-yellow-600',
+  },
+  CANCELLED: {
+    icon: <XCircle className="h-12 w-12" />,
+    title: 'Giao dịch đã hủy',
+    description: 'Bạn đã hủy giao dịch thanh toán.',
+    color: 'text-muted-foreground',
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export default function PaymentReturnPage() {
+  const searchParams = useSearchParams();
+  const paymentId = searchParams.get('paymentId') ?? searchParams.get('vnp_TxnRef') ?? searchParams.get('orderId');
+
+  const [payment, setPayment] = useState<PaymentStatusDto | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [pollCount, setPollCount] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const fetchStatus = useCallback(async () => {
+    if (!paymentId) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const result = await paymentApi.getPaymentStatus(paymentId);
+      setPayment(result);
+
+      // Stop polling if terminal status
+      if (result.status === 'COMPLETED' || result.status === 'FAILED' || result.status === 'CANCELLED') {
+        setLoading(false);
+        return;
+      }
+
+      // Continue polling if still pending
+      setPollCount((c) => {
+        if (c >= MAX_POLLS) {
+          setLoading(false);
+          return c;
+        }
+        timerRef.current = setTimeout(fetchStatus, POLL_INTERVAL_MS);
+        return c + 1;
+      });
+    } catch {
+      // If we can't fetch status, stop polling after some attempts
+      setPollCount((c) => {
+        if (c >= 5) {
+          setLoading(false);
+          return c;
+        }
+        timerRef.current = setTimeout(fetchStatus, POLL_INTERVAL_MS);
+        return c + 1;
+      });
+    }
+  }, [paymentId]);
+
+  useEffect(() => {
+    fetchStatus();
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [fetchStatus]);
+
+  const status = payment?.status ?? (loading ? 'PENDING' : 'FAILED');
+  const config = STATUS_CONFIG[status] ?? {
+    icon: <Clock className="h-12 w-12" />,
+    title: 'Đang xử lý thanh toán',
+    description: 'Giao dịch đang được xử lý. Vui lòng chờ...',
+    color: 'text-yellow-600',
+  };
+
+  // No paymentId at all
+  if (!paymentId && !loading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center px-4">
+        <Card className="w-full max-w-md text-center">
+          <CardHeader>
+            <div className="mx-auto mb-4 text-muted-foreground">
+              <XCircle className="h-12 w-12" />
+            </div>
+            <CardTitle>Không tìm thấy giao dịch</CardTitle>
+            <CardDescription>
+              Không có thông tin giao dịch thanh toán.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col gap-2 sm:flex-row sm:justify-center">
+              <Link href={'/pricing' as const}>
+                <Button variant="outline">Xem bảng giá</Button>
+              </Link>
+              <Link href={'/dashboard' as const}>
+                <Button>Về trang chủ</Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4">
+      <Card className="w-full max-w-md text-center">
+        <CardHeader>
+          <div className={`mx-auto mb-4 ${config.color}`}>
+            {loading && status === 'PENDING' ? (
+              <Loader2 className="h-12 w-12 animate-spin" />
+            ) : (
+              config.icon
+            )}
+          </div>
+          <CardTitle>{config.title}</CardTitle>
+          <CardDescription>{config.description}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Payment details */}
+          {payment && (
+            <div className="space-y-2 rounded-lg border bg-muted/50 p-4 text-sm">
+              {payment.amountVND && (
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Số tiền</span>
+                  <span className="font-semibold">{formatVND(payment.amountVND)}</span>
+                </div>
+              )}
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Phương thức</span>
+                <span className="font-medium">{payment.provider}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Mã giao dịch</span>
+                <span className="font-mono text-xs">
+                  {payment.providerTxId ?? payment.id.slice(0, 12)}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Thời gian</span>
+                <span className="font-medium">
+                  {new Date(payment.updatedAt).toLocaleString('vi-VN')}
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* Polling indicator */}
+          {loading && status === 'PENDING' && (
+            <p className="text-xs text-muted-foreground">
+              Đang kiểm tra trạng thái thanh toán... ({pollCount}/{MAX_POLLS})
+            </p>
+          )}
+
+          {/* Actions */}
+          <div className="flex flex-col gap-2 sm:flex-row sm:justify-center">
+            {status === 'COMPLETED' && (
+              <>
+                <Link href={'/dashboard/subscription' as const}>
+                  <Button>Xem gói dịch vụ</Button>
+                </Link>
+                <Link href={'/dashboard' as const}>
+                  <Button variant="outline">Về bảng điều khiển</Button>
+                </Link>
+              </>
+            )}
+            {(status === 'FAILED' || status === 'CANCELLED') && (
+              <>
+                <Link href={'/pricing' as const}>
+                  <Button>Thử lại</Button>
+                </Link>
+                <Link href={'/dashboard' as const}>
+                  <Button variant="outline">Về bảng điều khiển</Button>
+                </Link>
+              </>
+            )}
+            {!loading && status === 'PENDING' && (
+              <>
+                <Button onClick={fetchStatus} variant="outline">
+                  Kiểm tra lại
+                </Button>
+                <Link href={'/dashboard' as const}>
+                  <Button variant="outline">Về bảng điều khiển</Button>
+                </Link>
+              </>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/app/[locale]/(public)/pricing/page.tsx

@@ -3,6 +3,7 @@
 import { Check, Crown, Rocket, Shield, X, Zap } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
+import { CheckoutModal } from '@/components/subscription/checkout-modal';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -13,8 +14,9 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Link } from '@/i18n/navigation';
+import { useAuthStore } from '@/lib/auth-store';
 import { formatVND } from '@/lib/currency';
-import { usePlans } from '@/lib/hooks/use-subscription';
+import { usePlans, useBillingHistory } from '@/lib/hooks/use-subscription';
 import type { PlanDto } from '@/lib/subscription-api';
 import { cn } from '@/lib/utils';
 
@@ -197,10 +199,16 @@ function getFeatureValue(
 export default function PricingPage() {
   const t = useTranslations('pricing');
   const { data: plansData, isLoading, error } = usePlans();
+  const { isAuthenticated } = useAuthStore();
+  const { data: billing } = useBillingHistory();
   const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>(
     'monthly',
   );
 
+  // Checkout modal state
+  const [checkoutPlan, setCheckoutPlan] = useState<PlanDto | null>(null);
+  const [checkoutOpen, setCheckoutOpen] = useState(false);
+
   const plans = (plansData ?? (error ? FALLBACK_PLANS : []))
     .slice()
     .sort(
@@ -208,6 +216,51 @@ export default function PricingPage() {
         PLAN_TIER_ORDER.indexOf(a.tier) - PLAN_TIER_ORDER.indexOf(b.tier),
     );
 
+  // Current subscription info for logged-in users
+  const currentTier = billing?.subscription?.planTier ?? 'FREE';
+  const currentTierIndex = PLAN_TIER_ORDER.indexOf(currentTier);
+
+  const handleSelectPlan = (plan: PlanDto) => {
+    if (plan.tier === 'ENTERPRISE') return; // Enterprise uses contact form
+    if (plan.tier === 'FREE') return; // Free doesn't need payment
+
+    if (!isAuthenticated) {
+      // Redirect to register with plan context
+      return;
+    }
+
+    setCheckoutPlan(plan);
+    setCheckoutOpen(true);
+  };
+
+  const getPlanCta = (plan: PlanDto) => {
+    const tierIndex = PLAN_TIER_ORDER.indexOf(plan.tier);
+
+    if (plan.tier === 'FREE') {
+      if (isAuthenticated && currentTier === 'FREE') {
+        return { label: t('ctaCurrentPlan'), disabled: true, variant: 'outline' as const };
+      }
+      return { label: t('ctaFree'), disabled: false, variant: 'outline' as const };
+    }
+
+    if (plan.tier === 'ENTERPRISE') {
+      return { label: t('ctaEnterprise'), disabled: false, variant: 'outline' as const };
+    }
+
+    if (isAuthenticated) {
+      if (plan.tier === currentTier) {
+        return { label: t('ctaCurrentPlan'), disabled: true, variant: 'outline' as const };
+      }
+      if (tierIndex > currentTierIndex) {
+        return { label: t('ctaUpgrade'), disabled: false, variant: 'default' as const };
+      }
+      // Downgrade not supported from pricing page
+      return { label: t('ctaDowngrade'), disabled: true, variant: 'outline' as const };
+    }
+
+    return { label: t('ctaUpgrade'), disabled: false, variant: 'default' as const };
+  };
+
   return (
     <div className="bg-background">
       {/* Hero section */}
@@ -223,6 +276,17 @@ export default function PricingPage() {
             {t('subtitle')}
           </p>
 
+          {/* Current plan indicator for logged-in users */}
+          {isAuthenticated && billing?.subscription && (
+            <div className="mx-auto mt-4 max-w-md">
+              <Badge variant="default" className="px-3 py-1 text-sm">
+                {t('currentPlanBadge', {
+                  plan: t(`tiers.${currentTier}`),
+                })}
+              </Badge>
+            </div>
+          )}
+
           {/* Billing cycle toggle */}
           <div className="mt-8 flex items-center justify-center gap-3">
             <Button
@@ -256,17 +320,21 @@ export default function PricingPage() {
           <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
             {plans.map((plan) => {
               const isPopular = plan.tier === 'AGENT_PRO';
+              const isCurrent = isAuthenticated && plan.tier === currentTier;
               const price =
                 billingCycle === 'monthly'
                   ? plan.priceMonthlyVND
                   : plan.priceYearlyVND;
 
+              const cta = getPlanCta(plan);
+
               return (
                 <Card
                   key={plan.id}
                   className={cn(
                     'relative flex flex-col transition-shadow hover:shadow-lg',
                     isPopular && 'border-primary shadow-md ring-1 ring-primary',
+                    isCurrent && !isPopular && 'border-green-500 ring-1 ring-green-500',
                   )}
                 >
                   {isPopular && (
@@ -276,6 +344,13 @@ export default function PricingPage() {
                       </Badge>
                     </div>
                   )}
+                  {isCurrent && (
+                    <div className="absolute -top-3 right-4">
+                      <Badge className="bg-green-600 text-white">
+                        {t('currentPlan')}
+                      </Badge>
+                    </div>
+                  )}
                   <CardHeader className="pb-2">
                     <div
                       className={cn(
@@ -378,19 +453,47 @@ export default function PricingPage() {
                     </ul>
 
                     {/* CTA */}
-                    <Link href={'/register' as const} className="w-full">
+                    {plan.tier === 'FREE' && !isAuthenticated ? (
+                      <Link href={'/register' as const} className="w-full">
+                        <Button
+                          className="w-full"
+                          variant="outline"
+                          size="lg"
+                        >
+                          {t('ctaFree')}
+                        </Button>
+                      </Link>
+                    ) : plan.tier === 'ENTERPRISE' ? (
+                      <Link href={'/' as const} className="w-full">
+                        <Button
+                          className="w-full"
+                          variant="outline"
+                          size="lg"
+                        >
+                          {t('ctaEnterprise')}
+                        </Button>
+                      </Link>
+                    ) : !isAuthenticated ? (
+                      <Link href={'/register' as const} className="w-full">
+                        <Button
+                          className="w-full"
+                          variant={isPopular ? 'default' : 'outline'}
+                          size="lg"
+                        >
+                          {t('ctaUpgrade')}
+                        </Button>
+                      </Link>
+                    ) : (
                       <Button
                         className="w-full"
-                        variant={isPopular ? 'default' : 'outline'}
+                        variant={cta.variant}
                         size="lg"
+                        disabled={cta.disabled}
+                        onClick={() => handleSelectPlan(plan)}
                       >
-                        {plan.tier === 'FREE'
-                          ? t('ctaFree')
-                          : plan.tier === 'ENTERPRISE'
-                            ? t('ctaEnterprise')
-                            : t('ctaUpgrade')}
+                        {cta.label}
                       </Button>
-                    </Link>
+                    )}
                   </CardContent>
                 </Card>
               );
@@ -422,9 +525,15 @@ export default function PricingPage() {
                       className={cn(
                         'px-4 py-3 text-center text-sm font-semibold',
                         plan.tier === 'AGENT_PRO' && 'bg-primary/5',
+                        isAuthenticated && plan.tier === currentTier && 'bg-green-50',
                       )}
                     >
-                      {t(`tiers.${plan.tier}`)}
+                      <span>{t(`tiers.${plan.tier}`)}</span>
+                      {isAuthenticated && plan.tier === currentTier && (
+                        <Badge variant="secondary" className="ml-1 text-[10px]">
+                          {t('currentPlan')}
+                        </Badge>
+                      )}
                     </th>
                   ))}
                 </tr>
@@ -443,6 +552,7 @@ export default function PricingPage() {
                           className={cn(
                             'px-4 py-3 text-center text-sm',
                             plan.tier === 'AGENT_PRO' && 'bg-primary/5',
+                            isAuthenticated && plan.tier === currentTier && 'bg-green-50',
                           )}
                         >
                           {typeof val === 'boolean' ? (
@@ -473,9 +583,15 @@ export default function PricingPage() {
             {t('ctaDescription')}
           </p>
           <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
-            <Link href={'/register' as const}>
-              <Button size="lg">{t('ctaRegister')}</Button>
-            </Link>
+            {isAuthenticated ? (
+              <Link href={'/dashboard/subscription' as const}>
+                <Button size="lg">{t('ctaManageSubscription')}</Button>
+              </Link>
+            ) : (
+              <Link href={'/register' as const}>
+                <Button size="lg">{t('ctaRegister')}</Button>
+              </Link>
+            )}
             <Link href={'/' as const}>
               <Button variant="outline" size="lg">
                 {t('ctaLearnMore')}
@@ -484,6 +600,16 @@ export default function PricingPage() {
           </div>
         </div>
       </section>
+
+      {/* Checkout modal */}
+      <CheckoutModal
+        open={checkoutOpen}
+        onOpenChange={setCheckoutOpen}
+        plan={checkoutPlan}
+        billingCycle={billingCycle}
+        isUpgrade={isAuthenticated && currentTierIndex > 0}
+        currentTier={currentTier}
+      />
     </div>
   );
 }