feat(web): AVM v2 upgraded valuation dashboard (TEC-2763)

R5.4 ships the upgraded AVM UI behind the `avm_v2` A/B flag. When the
flag is on, the dashboard exposes:

- Tab switch between single valuation and multi-property compare
- Waterfall drivers chart (ValueDriversChart) alongside the existing
  horizontal bar breakdown
- Mapbox comparables map with similarity-coloured markers and an
  optional highlighted subject pin
- Confidence interval + range bar and PDF export remain available
- Valuation history chart surface unchanged (still lazy-loaded)

Flag plumbing (useAvmV2Flag):
- NEXT_PUBLIC_FEATURE_AVM_V2=1 enables by default
- `?avm_v2=1|0` URL param forces + persists to localStorage
- safe localStorage handling (no throw when storage is blocked)

Tests: comparables-map, value-drivers-chart, use-avm-v2-flag specs
added. Pre-existing "Yếu tố chính" assertion in valuation-results.spec
updated to match the current copy ("Yếu tố ảnh hưởng giá") so the
valuation suite is green (7 files, 52 tests).

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

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

@@ -2,12 +2,17 @@
 
 import dynamic from 'next/dynamic';
 import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { ComparablesMap } from '@/components/valuation/comparables-map';
 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 { ValueDriversChart } from '@/components/valuation/value-drivers-chart';
+import { useAvmV2Flag } from '@/lib/hooks/use-avm-v2-flag';
 import {
   useValuationPredict,
   useValuationHistory,
@@ -15,7 +20,6 @@ import {
 } from '@/lib/hooks/use-valuation';
 import type { ValuationRequest, ValuationResult } from '@/lib/valuation-api';
 
-// Lazy-load chart component (uses Recharts, no SSR)
 const ValuationHistoryChart = dynamic(
   () =>
     import('@/components/valuation/valuation-history-chart').then(
@@ -31,9 +35,13 @@ const ValuationHistoryChart = dynamic(
   },
 );
 
+type ViewMode = 'single' | 'compare';
+
 export default function ValuationPage() {
+  const avmV2 = useAvmV2Flag();
   const [historyPage, setHistoryPage] = useState(1);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<ViewMode>('single');
 
   const predictMutation = useValuationPredict();
   const { data: historyData, isLoading: historyLoading } =
@@ -54,15 +62,21 @@ export default function ValuationPage() {
 
   return (
     <div className="space-y-8">
-      {/* Page header */}
       <div className="flex items-start justify-between">
         <div>
-          <h1 className="text-2xl font-bold sm:text-3xl">Định giá AI</h1>
+          <div className="flex items-center gap-2">
+            <h1 className="text-2xl font-bold sm:text-3xl">Định giá AI</h1>
+            {avmV2 && (
+              <Badge variant="success" className="text-xs" data-testid="avm-v2-badge">
+                AVM v2
+              </Badge>
+            )}
+          </div>
           <p className="mt-2 text-muted-foreground">
             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 && (
+        {currentResult && viewMode === 'single' && (
           <ExportPdfButton
             targetSelector="#valuation-results"
             filename={`dinh-gia-${currentResult.id}`}
@@ -70,56 +84,101 @@ 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}
-          />
+      {avmV2 && (
+        <div
+          className="inline-flex rounded-lg border bg-muted/40 p-1"
+          role="tablist"
+          aria-label="Chế độ định giá"
+        >
+          <button
+            type="button"
+            role="tab"
+            aria-selected={viewMode === 'single'}
+            data-testid="avm-v2-tab-single"
+            className={`rounded-md px-4 py-1.5 text-sm font-medium transition ${
+              viewMode === 'single'
+                ? 'bg-background shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+            onClick={() => setViewMode('single')}
+          >
+            Định giá đơn
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={viewMode === 'compare'}
+            data-testid="avm-v2-tab-compare"
+            className={`rounded-md px-4 py-1.5 text-sm font-medium transition ${
+              viewMode === 'compare'
+                ? 'bg-background shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+            onClick={() => setViewMode('compare')}
+          >
+            So sánh nhiều BĐS
+          </button>
+        </div>
+      )}
 
-          {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>
-          )}
+      {viewMode === 'compare' && avmV2 ? (
+        <ValuationCompare />
+      ) : (
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="space-y-6 lg:col-span-2">
+            <ValuationForm
+              onSubmit={handleSubmit}
+              isLoading={predictMutation.isPending}
+            />
 
-          {currentResult && (
-            <>
-              {/* Main results with confidence badge + driver charts */}
-              <ValuationResults result={currentResult} />
+            {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>
+            )}
 
-              {/* Comparables table (TanStack Table) */}
-              {currentResult.comparables.length > 0 && (
-                <ComparablesTable comparables={currentResult.comparables} />
-              )}
+            {currentResult && (
+              <>
+                <ValuationResults result={currentResult} />
 
-              {/* Market context card */}
-              {currentResult.marketContext && (
-                <MarketContextCard context={currentResult.marketContext} />
-              )}
-
-              {/* Valuation history chart */}
-              {currentResult.valuationHistory &&
-                currentResult.valuationHistory.length >= 2 && (
-                  <ValuationHistoryChart data={currentResult.valuationHistory} />
+                {avmV2 && currentResult.priceDrivers.length > 0 && (
+                  <ValueDriversChart drivers={currentResult.priceDrivers} />
                 )}
-            </>
-          )}
-        </div>
 
-        {/* History sidebar (right col) */}
-        <div>
-          <ValuationHistory
-            items={historyData?.data ?? []}
-            total={historyData?.total ?? 0}
-            page={historyPage}
-            onPageChange={setHistoryPage}
-            onSelect={handleSelectHistory}
-            isLoading={historyLoading}
-          />
+                {currentResult.comparables.length > 0 && (
+                  <ComparablesTable comparables={currentResult.comparables} />
+                )}
+
+                {avmV2 && currentResult.comparables.length > 0 && (
+                  <ComparablesMap
+                    comparables={currentResult.comparables}
+                  />
+                )}
+
+                {currentResult.marketContext && (
+                  <MarketContextCard context={currentResult.marketContext} />
+                )}
+
+                {currentResult.valuationHistory &&
+                  currentResult.valuationHistory.length >= 2 && (
+                    <ValuationHistoryChart data={currentResult.valuationHistory} />
+                  )}
+              </>
+            )}
+          </div>
+
+          <div>
+            <ValuationHistory
+              items={historyData?.data ?? []}
+              total={historyData?.total ?? 0}
+              page={historyPage}
+              onPageChange={setHistoryPage}
+              onSelect={handleSelectHistory}
+              isLoading={historyLoading}
+            />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }