feat(web): build agent dashboard with analytics charts and listing management

- Dashboard overview: stats cards (listings, views, inquiries, market avg price), Recharts bar chart for district pricing, recent listings feed with engagement metrics
- Analytics page: tabbed layout (overview/trends/districts), interactive bar chart for district comparison, line chart for price trend over quarters with dual Y-axis, clickable heatmap cards
- Listings management: grid/table view toggle, status filter, stats summary cards, table view with thumbnails and engagement data

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

apps/web/app/(dashboard)/dashboard/page.tsx

@@ -1,54 +1,322 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ListingStatusBadge } from '@/components/listings/listing-status-badge';
+import {
+  analyticsApi,
+  type MarketReportDistrict,
+  type HeatmapDataPoint,
+} from '@/lib/analytics-api';
+import { listingsApi, type ListingDetail, type PaginatedResult } from '@/lib/listings-api';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+
+const CITY = 'Ho Chi Minh';
+const PERIOD = '2026-Q1';
+
+function formatPrice(priceStr: string): string {
+  const num = Number(priceStr);
+  if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} ty`;
+  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} trieu`;
+  return num.toLocaleString('vi-VN');
+}
+
+function formatPriceM2(price: number): string {
+  if (price >= 1_000_000) return `${(price / 1_000_000).toFixed(1)} tr/m2`;
+  return `${price.toLocaleString('vi-VN')} d/m2`;
+}
+
+interface StatCardProps {
+  title: string;
+  value: string;
+  description?: string;
+  trend?: number | null;
+}
+
+function StatCard({ title, value, description, trend }: StatCardProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardDescription>{title}</CardDescription>
+        <CardTitle className="text-2xl">{value}</CardTitle>
+      </CardHeader>
+      {(description || trend != null) && (
+        <CardContent>
+          <div className="flex items-center gap-2">
+            {trend != null && (
+              <span
+                className={`text-xs font-medium ${trend >= 0 ? 'text-green-600' : 'text-red-600'}`}
+              >
+                {trend >= 0 ? '+' : ''}
+                {trend.toFixed(1)}%
+              </span>
+            )}
+            {description && (
+              <span className="text-xs text-muted-foreground">{description}</span>
+            )}
+          </div>
+        </CardContent>
+      )}
+    </Card>
+  );
+}
 
 export default function DashboardPage() {
+  const [marketReport, setMarketReport] = useState<MarketReportDistrict[]>([]);
+  const [heatmap, setHeatmap] = useState<HeatmapDataPoint[]>([]);
+  const [listings, setListings] = useState<PaginatedResult<ListingDetail> | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    Promise.all([
+      analyticsApi.getMarketReport(CITY, PERIOD).catch(() => ({ districts: [] as MarketReportDistrict[] })),
+      analyticsApi.getHeatmap(CITY, PERIOD).catch(() => ({ dataPoints: [] as HeatmapDataPoint[] })),
+      listingsApi.search({ page: 1, limit: 6 }).catch(() => null),
+    ])
+      .then(([report, heatmapData, listingsResult]) => {
+        setMarketReport(report.districts);
+        setHeatmap(heatmapData.dataPoints);
+        setListings(listingsResult);
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  const totalListings = marketReport.reduce((sum, d) => sum + d.totalListings, 0);
+  const avgPriceM2 =
+    marketReport.length > 0
+      ? marketReport.reduce((sum, d) => sum + d.avgPriceM2, 0) / marketReport.length
+      : 0;
+  const avgDaysOnMarket =
+    marketReport.length > 0
+      ? marketReport.reduce((sum, d) => sum + d.daysOnMarket, 0) / marketReport.length
+      : 0;
+  const avgYoy =
+    marketReport.filter((d) => d.yoyChange != null).length > 0
+      ? marketReport
+          .filter((d) => d.yoyChange != null)
+          .reduce((sum, d) => sum + (d.yoyChange ?? 0), 0) /
+        marketReport.filter((d) => d.yoyChange != null).length
+      : null;
+
+  const myListingsCount = listings?.total ?? 0;
+  const totalViews = listings?.data.reduce((s, l) => s + l.viewCount, 0) ?? 0;
+  const totalInquiries = listings?.data.reduce((s, l) => s + l.inquiryCount, 0) ?? 0;
+
+  const chartData = heatmap
+    .sort((a, b) => b.avgPriceM2 - a.avgPriceM2)
+    .slice(0, 8)
+    .map((p) => ({
+      district: p.district.replace(/^Quan\s*/i, 'Q.').replace(/^Huyen\s*/i, 'H.'),
+      'Gia/m2': Math.round(p.avgPriceM2 / 1_000_000),
+      listings: p.totalListings,
+    }));
+
   return (
     <div className="space-y-8">
-      <div>
-        <h1 className="text-3xl font-bold">Bảng điều khiển</h1>
-        <p className="mt-2 text-muted-foreground">
-          Quản lý tin đăng bất động sản của bạn
-        </p>
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Bang dieu khien</h1>
+          <p className="mt-2 text-muted-foreground">
+            Tong quan thi truong va tin dang cua ban
+          </p>
+        </div>
+        <Link href="/listings/new">
+          <Button>Dang tin moi</Button>
+        </Link>
       </div>
 
-      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        <Card>
+      {/* Stats overview */}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          title="Tin dang cua toi"
+          value={loading ? '...' : myListingsCount.toLocaleString('vi-VN')}
+          description="Tong so tin da dang"
+        />
+        <StatCard
+          title="Luot xem"
+          value={loading ? '...' : totalViews.toLocaleString('vi-VN')}
+          description="Tren tat ca tin dang"
+        />
+        <StatCard
+          title="Lien he"
+          value={loading ? '...' : totalInquiries.toLocaleString('vi-VN')}
+          description="Yeu cau tu khach hang"
+        />
+        <StatCard
+          title="Gia TB thi truong"
+          value={loading ? '...' : formatPriceM2(avgPriceM2)}
+          trend={avgYoy}
+          description="YoY"
+        />
+      </div>
+
+      {/* Market overview + quick stats */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Price chart */}
+        <Card className="lg:col-span-2">
           <CardHeader>
-            <CardTitle>Đăng tin mới</CardTitle>
-            <CardDescription>Tạo tin đăng bán hoặc cho thuê bất động sản</CardDescription>
+            <CardTitle className="text-lg">Gia trung binh theo quan</CardTitle>
+            <CardDescription>{CITY} - {PERIOD} (trieu VND/m2)</CardDescription>
           </CardHeader>
           <CardContent>
-            <Link href="/listings/new">
-              <Button className="w-full">Đăng tin ngay</Button>
-            </Link>
+            {loading ? (
+              <div className="flex h-64 items-center justify-center text-muted-foreground">
+                Dang tai...
+              </div>
+            ) : chartData.length === 0 ? (
+              <div className="flex h-64 items-center justify-center text-muted-foreground">
+                Chua co du lieu
+              </div>
+            ) : (
+              <ResponsiveContainer width="100%" height={280}>
+                <BarChart data={chartData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
+                  <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                  <XAxis
+                    dataKey="district"
+                    tick={{ fontSize: 12 }}
+                    className="fill-muted-foreground"
+                  />
+                  <YAxis tick={{ fontSize: 12 }} className="fill-muted-foreground" />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: 'hsl(var(--card))',
+                      border: '1px solid hsl(var(--border))',
+                      borderRadius: '0.5rem',
+                      fontSize: '0.875rem',
+                    }}
+                    formatter={(value) => [`${value} tr/m2`, 'Gia']}
+                  />
+                  <Bar dataKey="Gia/m2" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            )}
           </CardContent>
         </Card>
 
+        {/* Market summary */}
         <Card>
           <CardHeader>
-            <CardTitle>Tin đăng của tôi</CardTitle>
-            <CardDescription>Quản lý các tin đăng đã tạo</CardDescription>
+            <CardTitle className="text-lg">Thi truong {CITY}</CardTitle>
+            <CardDescription>Chi so chinh - {PERIOD}</CardDescription>
           </CardHeader>
-          <CardContent>
-            <Link href="/listings">
-              <Button variant="outline" className="w-full">Xem danh sách</Button>
-            </Link>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Tìm kiếm</CardTitle>
-            <CardDescription>Tìm bất động sản phù hợp nhu cầu</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Link href="/search">
-              <Button variant="outline" className="w-full">Tìm kiếm</Button>
-            </Link>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">Tong tin dang</span>
+              <span className="font-semibold">
+                {loading ? '...' : totalListings.toLocaleString('vi-VN')}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">Gia TB/m2</span>
+              <span className="font-semibold">
+                {loading ? '...' : formatPriceM2(avgPriceM2)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">Ngay TB de ban</span>
+              <span className="font-semibold">
+                {loading ? '...' : `${avgDaysOnMarket.toFixed(0)} ngay`}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">So quan</span>
+              <span className="font-semibold">
+                {loading ? '...' : new Set(marketReport.map((d) => d.district)).size}
+              </span>
+            </div>
+            <div className="pt-2">
+              <Link href="/analytics">
+                <Button variant="outline" size="sm" className="w-full">
+                  Xem phan tich chi tiet
+                </Button>
+              </Link>
+            </div>
           </CardContent>
         </Card>
       </div>
+
+      {/* Recent listings */}
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <div>
+            <CardTitle className="text-lg">Tin dang gan day</CardTitle>
+            <CardDescription>Danh sach tin dang moi nhat cua ban</CardDescription>
+          </div>
+          <Link href="/listings">
+            <Button variant="outline" size="sm">
+              Xem tat ca
+            </Button>
+          </Link>
+        </CardHeader>
+        <CardContent>
+          {loading ? (
+            <div className="flex h-32 items-center justify-center text-muted-foreground">
+              Dang tai...
+            </div>
+          ) : !listings || listings.data.length === 0 ? (
+            <div className="flex h-32 flex-col items-center justify-center text-muted-foreground">
+              <p>Chua co tin dang nao</p>
+              <Link href="/listings/new" className="mt-2">
+                <Button variant="outline" size="sm">
+                  Dang tin dau tien
+                </Button>
+              </Link>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {listings.data.slice(0, 5).map((listing) => (
+                <Link
+                  key={listing.id}
+                  href={`/listings/${listing.id}`}
+                  className="flex items-center gap-4 rounded-lg border p-3 transition-colors hover:bg-accent"
+                >
+                  <div className="h-12 w-16 flex-shrink-0 overflow-hidden rounded bg-muted">
+                    {listing.property.media.length > 0 ? (
+                      <img
+                        src={listing.property.media[0]?.url}
+                        alt=""
+                        className="h-full w-full object-cover"
+                      />
+                    ) : (
+                      <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
+                        N/A
+                      </div>
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate font-medium">{listing.property.title}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {listing.property.district}, {listing.property.city}
+                    </p>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-semibold text-primary">
+                      {formatPrice(listing.priceVND)}
+                    </p>
+                    <ListingStatusBadge status={listing.status} />
+                  </div>
+                  <div className="hidden sm:flex sm:gap-3 sm:text-sm sm:text-muted-foreground">
+                    <span>{listing.viewCount} luot xem</span>
+                    <span>{listing.inquiryCount} lien he</span>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
     </div>
   );
 }