feat(web): add khu-cong-nghiep, chuyen-nhuong, and reports pages

Add three new frontend page sections:
- Industrial parks (khu-cong-nghiep): listing, detail, filter bar
- Transfer listings (chuyen-nhuong): search, category tabs, detail
- AI reports dashboard: list, create, viewer with TOC

Includes components, API clients, hooks, server helpers, i18n keys,
navigation links in public and dashboard layouts, and lint fixes.

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

apps/web/components/chuyen-nhuong/chuyen-nhuong-detail-client.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import {
+  Eye,
+  Heart,
+  MapPin,
+  MessageCircle,
+  Phone,
+  User,
+} from 'lucide-react';
+import * as React from 'react';
+import { TransferItemTable } from '@/components/chuyen-nhuong/transfer-item-table';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  type TransferListingDetail,
+  CATEGORY_ICONS,
+  CATEGORY_LABELS,
+  STATUS_LABELS,
+} from '@/lib/chuyen-nhuong-api';
+import { cn } from '@/lib/utils';
+
+interface ChuyenNhuongDetailClientProps {
+  listing: TransferListingDetail;
+}
+
+function formatVND(value: string): string {
+  return new Intl.NumberFormat('vi-VN').format(Number(value)) + ' \u20ab';
+}
+
+export function ChuyenNhuongDetailClient({ listing }: ChuyenNhuongDetailClientProps) {
+  const statusColor =
+    listing.status === 'ACTIVE' ? 'bg-green-100 text-green-800' :
+    listing.status === 'RESERVED' ? 'bg-amber-100 text-amber-800' :
+    listing.status === 'SOLD' ? 'bg-red-100 text-red-800' :
+    'bg-gray-100 text-gray-800';
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-6">
+      {/* Header */}
+      <div className="mb-6">
+        <div className="mb-2 flex flex-wrap items-center gap-2">
+          <Badge className={cn('text-xs', statusColor)} variant="secondary">
+            {STATUS_LABELS[listing.status]}
+          </Badge>
+          <Badge variant="outline" className="text-xs">
+            {CATEGORY_ICONS[listing.category]} {CATEGORY_LABELS[listing.category]}
+          </Badge>
+          {listing.isNegotiable && (
+            <Badge className="bg-blue-100 text-blue-800 text-xs" variant="secondary">
+              Thương lượng
+            </Badge>
+          )}
+        </div>
+        <h1 className="text-2xl font-bold md:text-3xl">{listing.title}</h1>
+        <div className="mt-2 flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <MapPin className="h-4 w-4" />
+            {listing.address}, {listing.ward ? `${listing.ward}, ` : ''}{listing.district}, {listing.city}
+          </span>
+        </div>
+      </div>
+
+      {/* Quick stats */}
+      <div className="my-6 grid grid-cols-2 gap-4 rounded-lg border bg-card p-4 sm:grid-cols-4 lg:grid-cols-6">
+        <QuickStat
+          label="Giá yêu cầu"
+          value={formatVND(listing.askingPriceVND)}
+          valueClassName="text-primary"
+        />
+        {listing.aiEstimatePriceVND && (
+          <QuickStat
+            label="Giá AI ước tính"
+            value={formatVND(listing.aiEstimatePriceVND)}
+          />
+        )}
+        {listing.areaM2 && (
+          <QuickStat
+            label="Diện tích"
+            value={`${listing.areaM2} m\u00b2`}
+          />
+        )}
+        <QuickStat
+          icon={<Eye className="h-5 w-5" />}
+          label="Lượt xem"
+          value={`${listing.viewCount}`}
+        />
+        <QuickStat
+          icon={<Heart className="h-5 w-5" />}
+          label="Lượt lưu"
+          value={`${listing.saveCount}`}
+        />
+        <QuickStat
+          icon={<MessageCircle className="h-5 w-5" />}
+          label="Liên hệ"
+          value={`${listing.inquiryCount}`}
+        />
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Main content */}
+        <div className="space-y-6 lg:col-span-2">
+          {/* Description */}
+          {listing.description && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Mô tả</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="whitespace-pre-wrap text-sm leading-relaxed">
+                  {listing.description}
+                </p>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Items table */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Danh sách vật phẩm ({listing.items.length})</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <TransferItemTable items={listing.items} />
+            </CardContent>
+          </Card>
+
+          {/* Business info */}
+          {(listing.businessType || listing.monthlyRentVND || listing.remainingLeaseMo) && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Thông tin kinh doanh</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {listing.businessType && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Loại hình kinh doanh</span>
+                    <span className="font-medium">{listing.businessType}</span>
+                  </div>
+                )}
+                {listing.monthlyRentVND && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Tiền thuê hàng tháng</span>
+                    <span className="font-medium">{formatVND(listing.monthlyRentVND)}</span>
+                  </div>
+                )}
+                {listing.depositMonths != null && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Cọc</span>
+                    <span className="font-medium">{listing.depositMonths} tháng</span>
+                  </div>
+                )}
+                {listing.remainingLeaseMo != null && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Hợp đồng còn lại</span>
+                    <span className="font-medium">{listing.remainingLeaseMo} tháng</span>
+                  </div>
+                )}
+                {listing.footTraffic && (
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Lưu lượng khách</span>
+                    <span className="font-medium">{listing.footTraffic}</span>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Price card */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Giá chuyển nhượng</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">Giá yêu cầu</span>
+                <span className="text-lg font-bold text-primary">
+                  {formatVND(listing.askingPriceVND)}
+                </span>
+              </div>
+              {listing.aiEstimatePriceVND && (
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-muted-foreground">Giá AI ước tính</span>
+                  <span className="font-semibold">
+                    {formatVND(listing.aiEstimatePriceVND)}
+                  </span>
+                </div>
+              )}
+              {listing.aiConfidence != null && (
+                <div className="flex items-center justify-between border-t pt-3">
+                  <span className="text-sm text-muted-foreground">Độ tin cậy AI</span>
+                  <span className="font-semibold">{Math.round(listing.aiConfidence * 100)}%</span>
+                </div>
+              )}
+              {listing.isNegotiable && (
+                <p className="text-xs text-muted-foreground">Giá có thể thương lượng</p>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Contact card */}
+          <Card className="lg:sticky lg:top-20">
+            <CardHeader>
+              <CardTitle className="text-base">Thông tin liên hệ</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {listing.contactName ? (
+                <div className="flex items-center gap-2">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+                    <User className="h-4 w-4 text-primary" />
+                  </div>
+                  <p className="text-sm font-medium">{listing.contactName}</p>
+                </div>
+              ) : null}
+              {listing.contactPhone ? (
+                <div className="flex items-center gap-2">
+                  <Phone className="h-4 w-4 text-muted-foreground" />
+                  <p className="text-sm font-medium">{listing.contactPhone}</p>
+                </div>
+              ) : null}
+              {!listing.contactName && !listing.contactPhone && (
+                <p className="text-sm text-muted-foreground">Liên hệ qua hệ thống</p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Sub-components ────────────────────────────────────────
+
+function QuickStat({
+  icon,
+  label,
+  value,
+  valueClassName,
+}: {
+  icon?: React.ReactNode;
+  label: string;
+  value: string;
+  valueClassName?: string;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      {icon && <div className="text-muted-foreground">{icon}</div>}
+      <div>
+        <p className="text-xs text-muted-foreground">{label}</p>
+        <p className={cn('text-sm font-semibold', valueClassName)}>{value}</p>
+      </div>
+    </div>
+  );
+}

apps/web/components/chuyen-nhuong/transfer-item-table.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import {
+  type TransferItemData,
+  CATEGORY_LABELS,
+  CONDITION_COLORS,
+  CONDITION_LABELS,
+} from '@/lib/chuyen-nhuong-api';
+
+interface TransferItemTableProps {
+  items: TransferItemData[];
+}
+
+function formatVND(value: string): string {
+  return new Intl.NumberFormat('vi-VN').format(Number(value)) + ' \u20ab';
+}
+
+export function TransferItemTable({ items }: TransferItemTableProps) {
+  if (items.length === 0) {
+    return <p className="text-sm text-muted-foreground">Chưa có danh sách vật phẩm.</p>;
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b">
+            <th className="px-3 py-2 text-left font-medium">Tên</th>
+            <th className="px-3 py-2 text-left font-medium">Loại</th>
+            <th className="px-3 py-2 text-left font-medium">Tình trạng</th>
+            <th className="px-3 py-2 text-left font-medium">Thương hiệu</th>
+            <th className="px-3 py-2 text-right font-medium">SL</th>
+            <th className="px-3 py-2 text-right font-medium">Giá yêu cầu</th>
+            <th className="px-3 py-2 text-right font-medium">Giá AI</th>
+          </tr>
+        </thead>
+        <tbody>
+          {items.map((item) => (
+            <tr key={item.id} className="border-b">
+              <td className="px-3 py-2">
+                <div>
+                  <p className="font-medium">{item.name}</p>
+                  {item.modelName && (
+                    <p className="text-xs text-muted-foreground">{item.modelName}</p>
+                  )}
+                </div>
+              </td>
+              <td className="px-3 py-2 text-muted-foreground">
+                {CATEGORY_LABELS[item.category]}
+              </td>
+              <td className="px-3 py-2">
+                <Badge className={CONDITION_COLORS[item.condition]} variant="secondary">
+                  {CONDITION_LABELS[item.condition]}
+                </Badge>
+              </td>
+              <td className="px-3 py-2 text-muted-foreground">
+                {item.brand ?? '—'}
+              </td>
+              <td className="px-3 py-2 text-right">{item.quantity}</td>
+              <td className="px-3 py-2 text-right font-medium">
+                {formatVND(item.askingPriceVND)}
+              </td>
+              <td className="px-3 py-2 text-right text-muted-foreground">
+                {item.aiEstimatePriceVND ? (
+                  <span title={item.aiConfidence ? `Độ tin cậy: ${Math.round(item.aiConfidence * 100)}%` : undefined}>
+                    {formatVND(item.aiEstimatePriceVND)}
+                  </span>
+                ) : '—'}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

apps/web/components/chuyen-nhuong/transfer-listing-card.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { Eye, MapPin, Package } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { Link } from '@/i18n/navigation';
+import {
+  type TransferListingListItem,
+  CATEGORY_ICONS,
+  CATEGORY_LABELS,
+  STATUS_LABELS,
+} from '@/lib/chuyen-nhuong-api';
+
+interface TransferListingCardProps {
+  listing: TransferListingListItem;
+}
+
+function formatVND(value: string): string {
+  return new Intl.NumberFormat('vi-VN').format(Number(value)) + ' \u20ab';
+}
+
+export function TransferListingCard({ listing }: TransferListingCardProps) {
+  const statusColor =
+    listing.status === 'ACTIVE' ? 'bg-green-100 text-green-800' :
+    listing.status === 'RESERVED' ? 'bg-amber-100 text-amber-800' :
+    listing.status === 'SOLD' ? 'bg-red-100 text-red-800' :
+    'bg-gray-100 text-gray-800';
+
+  return (
+    <Link href={`/chuyen-nhuong/${listing.id}`}>
+      <Card className="group h-full transition-shadow hover:shadow-lg">
+        <CardContent className="p-5">
+          {/* Header */}
+          <div className="mb-3 flex items-start justify-between gap-2">
+            <div className="min-w-0 flex-1">
+              <h3 className="line-clamp-2 font-semibold text-foreground group-hover:text-primary">
+                {listing.title}
+              </h3>
+            </div>
+            <Badge className={statusColor} variant="secondary">
+              {STATUS_LABELS[listing.status]}
+            </Badge>
+          </div>
+
+          {/* Category */}
+          <div className="mb-3">
+            <Badge variant="outline" className="text-xs">
+              {CATEGORY_ICONS[listing.category]} {CATEGORY_LABELS[listing.category]}
+            </Badge>
+          </div>
+
+          {/* Location */}
+          <div className="mb-3 flex items-center gap-1 text-sm text-muted-foreground">
+            <MapPin className="h-3.5 w-3.5 shrink-0" />
+            <span className="line-clamp-1">{listing.district}, {listing.city}</span>
+          </div>
+
+          {/* Price */}
+          <div className="mb-3">
+            <p className="text-lg font-bold text-primary">
+              {formatVND(listing.askingPriceVND)}
+            </p>
+            {listing.isNegotiable && (
+              <span className="text-xs text-muted-foreground">Thương lượng</span>
+            )}
+          </div>
+
+          {/* Stats grid */}
+          <div className="mb-3 grid grid-cols-3 gap-2">
+            <div className="rounded-md bg-muted p-2 text-center">
+              <div className="text-xs text-muted-foreground">Món</div>
+              <div className="flex items-center justify-center gap-1 font-semibold">
+                <Package className="h-3 w-3" />
+                {listing.itemCount}
+              </div>
+            </div>
+            <div className="rounded-md bg-muted p-2 text-center">
+              <div className="text-xs text-muted-foreground">Lượt xem</div>
+              <div className="flex items-center justify-center gap-1 font-semibold">
+                <Eye className="h-3 w-3" />
+                {listing.viewCount}
+              </div>
+            </div>
+            {listing.areaM2 && (
+              <div className="rounded-md bg-muted p-2 text-center">
+                <div className="text-xs text-muted-foreground">Diện tích</div>
+                <div className="font-semibold">{listing.areaM2} m&sup2;</div>
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          {listing.publishedAt && (
+            <div className="border-t pt-3 text-xs text-muted-foreground">
+              Đăng {new Date(listing.publishedAt).toLocaleDateString('vi-VN')}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}