feat(analytics): AVM v2 batch valuation, comparison, history + frontend upgrade

Add batch valuation (POST /analytics/valuation/batch, max 50 properties),
valuation comparison (POST /analytics/valuation/compare, 2-5 properties),
and history endpoint (GET /analytics/valuation/history/:propertyId) with
confidence explanation helper. Frontend: enhanced valuation form with project
autocomplete and deep analysis toggle, results with confidence badges and
price range visualization, comparables table, history chart, market context
card, and PDF export.

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

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

@@ -1,6 +1,10 @@
 'use client';
 
+import dynamic from 'next/dynamic';
 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 { ValuationForm } from '@/components/valuation/valuation-form';
 import { ValuationHistory } from '@/components/valuation/valuation-history';
 import { ValuationResults } from '@/components/valuation/valuation-results';
@@ -11,12 +15,29 @@ 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(
+      (m) => m.ValuationHistoryChart,
+    ),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex h-64 items-center justify-center text-muted-foreground">
+        Đang tải...
+      </div>
+    ),
+  },
+);
+
 export default function ValuationPage() {
   const [historyPage, setHistoryPage] = useState(1);
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
   const predictMutation = useValuationPredict();
-  const { data: historyData, isLoading: historyLoading } = useValuationHistory(historyPage);
+  const { data: historyData, isLoading: historyLoading } =
+    useValuationHistory(historyPage);
   const { data: selectedResult } = useValuationDetail(selectedId ?? '');
 
   const currentResult: ValuationResult | undefined =
@@ -33,15 +54,24 @@ export default function ValuationPage() {
 
   return (
     <div className="space-y-8">
-      <div>
-        <h1 className="text-2xl font-bold sm:text-3xl">Định giá AI</h1>
-        <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>
+      {/* Page header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="text-2xl font-bold sm:text-3xl">Định giá AI</h1>
+          <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 && (
+          <ExportPdfButton
+            targetSelector="#valuation-results"
+            filename={`dinh-gia-${currentResult.id}`}
+          />
+        )}
       </div>
 
       <div className="grid gap-6 lg:grid-cols-3">
-        {/* Form + Results */}
+        {/* Form + Results (left 2 cols) */}
         <div className="space-y-6 lg:col-span-2">
           <ValuationForm
             onSubmit={handleSubmit}
@@ -54,10 +84,31 @@ export default function ValuationPage() {
             </div>
           )}
 
-          {currentResult && <ValuationResults result={currentResult} />}
+          {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 */}
+        {/* History sidebar (right col) */}
         <div>
           <ValuationHistory
             items={historyData?.data ?? []}