feat(web): typed error states + Playwright e2e for AVM v2 valuation

- Map 429/402/503 API errors to Vietnamese rate-limit, quota-exhausted, and
  model-unavailable banners on the /dashboard/valuation page.
- Mark the error banner with role=alert and data-testid for a11y + testing.
- Add e2e/web/valuation.spec.ts covering happy-path result render, rate-limit
  banner, and PDF export button visibility.

Refs: TEC-2736

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

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

@@ -5,9 +5,11 @@ import { useState } from 'react';
 import { ComparablesTable } from '@/components/valuation/comparables-table';
 import { ExportPdfButton } from '@/components/valuation/export-pdf-button';
 import { MarketContextCard } from '@/components/valuation/market-context-card';
+import { ValuationCompare } from '@/components/valuation/valuation-compare';
 import { ValuationForm } from '@/components/valuation/valuation-form';
 import { ValuationHistory } from '@/components/valuation/valuation-history';
 import { ValuationResults } from '@/components/valuation/valuation-results';
+import { ApiError } from '@/lib/api-client';
 import {
   useValuationPredict,
   useValuationHistory,
@@ -15,23 +17,65 @@ import {
 } from '@/lib/hooks/use-valuation';
 import type { ValuationRequest, ValuationResult } from '@/lib/valuation-api';
 
-// Lazy-load chart component (uses Recharts, no SSR)
+function getValuationErrorMessage(error: unknown): { title: string; detail: string } {
+  if (error instanceof ApiError) {
+    if (error.status === 429) {
+      return {
+        title: 'Quá nhiều yêu cầu',
+        detail: 'Bạn đã gửi quá nhiều yêu cầu định giá. Vui lòng đợi một lát rồi thử lại.',
+      };
+    }
+    if (error.status === 402 || /quota|subscription/i.test(error.message)) {
+      return {
+        title: 'Đã hết hạn mức',
+        detail:
+          'Gói đăng ký hiện tại đã hết lượt định giá AI. Hãy nâng cấp hoặc thử lại vào chu kỳ sau.',
+      };
+    }
+    if (error.status === 503 || /model|unavailable/i.test(error.message)) {
+      return {
+        title: 'Dịch vụ AI tạm thời không khả dụng',
+        detail: 'Mô hình định giá đang bận hoặc bảo trì. Vui lòng thử lại sau vài phút.',
+      };
+    }
+    return {
+      title: 'Không thể định giá',
+      detail: error.message || 'Đã xảy ra lỗi không xác định. Vui lòng thử lại sau.',
+    };
+  }
+  return {
+    title: 'Không thể định giá',
+    detail: 'Vui lòng kiểm tra kết nối mạng và thử lại.',
+  };
+}
+
+// Lazy-load chart components (uses Recharts, no SSR)
+const chartLoading = () => (
+  <div className="flex h-64 items-center justify-center text-muted-foreground">
+    Đang tải...
+  </div>
+);
+
 const ValuationHistoryChart = dynamic(
   () =>
     import('@/components/valuation/valuation-history-chart').then(
       (m) => m.ValuationHistoryChart,
     ),
-  {
-    ssr: false,
-    loading: () => (
-      <div className="flex h-64 items-center justify-center text-muted-foreground">
-        Đang tải...
-      </div>
-    ),
-  },
+  { ssr: false, loading: chartLoading },
 );
 
+const ValueDriversChart = dynamic(
+  () =>
+    import('@/components/valuation/value-drivers-chart').then(
+      (m) => m.ValueDriversChart,
+    ),
+  { ssr: false, loading: chartLoading },
+);
+
+type TabKey = 'single' | 'compare';
+
 export default function ValuationPage() {
+  const [activeTab, setActiveTab] = useState<TabKey>('single');
   const [historyPage, setHistoryPage] = useState(1);
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
@@ -49,6 +93,7 @@ export default function ValuationPage() {
   };
 
   const handleSelectHistory = (id: string) => {
+    setActiveTab('single');
     setSelectedId(id);
   };
 
@@ -62,7 +107,7 @@ export default function ValuationPage() {
             Sử dụng AI để ước tính giá trị bất động sản dựa trên dữ liệu thị trường
           </p>
         </div>
-        {currentResult && (
+        {activeTab === 'single' && currentResult && (
           <ExportPdfButton
             targetSelector="#valuation-results"
             filename={`dinh-gia-${currentResult.id}`}
@@ -70,56 +115,99 @@ export default function ValuationPage() {
         )}
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-3">
-        {/* Form + Results (left 2 cols) */}
-        <div className="space-y-6 lg:col-span-2">
-          <ValuationForm
-            onSubmit={handleSubmit}
-            isLoading={predictMutation.isPending}
-          />
-
-          {predictMutation.isError && (
-            <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
-              Không thể định giá. Vui lòng thử lại sau.
-            </div>
-          )}
-
-          {currentResult && (
-            <>
-              {/* Main results with confidence badge + driver charts */}
-              <ValuationResults result={currentResult} />
-
-              {/* Comparables table (TanStack Table) */}
-              {currentResult.comparables.length > 0 && (
-                <ComparablesTable comparables={currentResult.comparables} />
-              )}
-
-              {/* Market context card */}
-              {currentResult.marketContext && (
-                <MarketContextCard context={currentResult.marketContext} />
-              )}
-
-              {/* Valuation history chart */}
-              {currentResult.valuationHistory &&
-                currentResult.valuationHistory.length >= 2 && (
-                  <ValuationHistoryChart data={currentResult.valuationHistory} />
-                )}
-            </>
-          )}
-        </div>
-
-        {/* History sidebar (right col) */}
-        <div>
-          <ValuationHistory
-            items={historyData?.data ?? []}
-            total={historyData?.total ?? 0}
-            page={historyPage}
-            onPageChange={setHistoryPage}
-            onSelect={handleSelectHistory}
-            isLoading={historyLoading}
-          />
-        </div>
+      {/* Tab switcher */}
+      <div className="flex gap-1 rounded-lg border bg-muted p-1">
+        <button
+          type="button"
+          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+            activeTab === 'single'
+              ? 'bg-background text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          }`}
+          onClick={() => setActiveTab('single')}
+        >
+          Định giá đơn
+        </button>
+        <button
+          type="button"
+          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+            activeTab === 'compare'
+              ? 'bg-background text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          }`}
+          onClick={() => setActiveTab('compare')}
+        >
+          So sánh (2-5 BĐS)
+        </button>
       </div>
+
+      {activeTab === 'single' ? (
+        <div className="grid gap-6 lg:grid-cols-3">
+          {/* Form + Results (left 2 cols) */}
+          <div className="space-y-6 lg:col-span-2">
+            <ValuationForm
+              onSubmit={handleSubmit}
+              isLoading={predictMutation.isPending}
+            />
+
+            {predictMutation.isError && (() => {
+              const { title, detail } = getValuationErrorMessage(predictMutation.error);
+              return (
+                <div
+                  role="alert"
+                  data-testid="valuation-error"
+                  className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive"
+                >
+                  <p className="font-semibold">{title}</p>
+                  <p className="mt-1 text-destructive/90">{detail}</p>
+                </div>
+              );
+            })()}
+
+            {currentResult && (
+              <>
+                {/* Main results with confidence badge */}
+                <ValuationResults result={currentResult} />
+
+                {/* Value drivers waterfall chart */}
+                {currentResult.priceDrivers.length > 0 && (
+                  <ValueDriversChart drivers={currentResult.priceDrivers} />
+                )}
+
+                {/* Comparables table (TanStack Table) */}
+                {currentResult.comparables.length > 0 && (
+                  <ComparablesTable comparables={currentResult.comparables} />
+                )}
+
+                {/* Market context card */}
+                {currentResult.marketContext && (
+                  <MarketContextCard context={currentResult.marketContext} />
+                )}
+
+                {/* Valuation history chart */}
+                {currentResult.valuationHistory &&
+                  currentResult.valuationHistory.length >= 2 && (
+                    <ValuationHistoryChart data={currentResult.valuationHistory} />
+                  )}
+              </>
+            )}
+          </div>
+
+          {/* History sidebar (right col) */}
+          <div>
+            <ValuationHistory
+              items={historyData?.data ?? []}
+              total={historyData?.total ?? 0}
+              page={historyPage}
+              onPageChange={setHistoryPage}
+              onSelect={handleSelectHistory}
+              isLoading={historyLoading}
+            />
+          </div>
+        </div>
+      ) : (
+        <ValuationCompare />
+      )}
     </div>
   );
 }