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>
2026-04-16 09:07:45 +07:00
parent 62a8842193
commit 7ce651fce5
30 changed files with 2874 additions and 1 deletions
--- a/apps/web/lib/chuyen-nhuong-api.ts
+++ b/apps/web/lib/chuyen-nhuong-api.ts
@@ -0,0 +1,179 @@
+import { apiClient } from './api-client';
+
+// ─── Types ──────────────────────────────────────────────
+
+export type TransferCategory = 'FURNITURE' | 'APPLIANCE' | 'OFFICE_EQUIPMENT' | 'KITCHEN' | 'PREMISES' | 'FULL_UNIT';
+export type TransferCondition = 'NEW' | 'LIKE_NEW' | 'GOOD' | 'FAIR' | 'WORN';
+export type TransferListingStatus = 'DRAFT' | 'PENDING_REVIEW' | 'ACTIVE' | 'RESERVED' | 'SOLD' | 'EXPIRED' | 'REJECTED';
+export type TransferPricingSource = 'MANUAL' | 'AI_ESTIMATED' | 'NEGOTIABLE';
+
+export interface TransferListingListItem {
+  id: string;
+  sellerId: string;
+  category: TransferCategory;
+  status: TransferListingStatus;
+  title: string;
+  address: string;
+  district: string;
+  city: string;
+  latitude: number;
+  longitude: number;
+  askingPriceVND: string; // BigInt serialized as string
+  aiEstimatePriceVND: string | null;
+  pricingSource: TransferPricingSource;
+  isNegotiable: boolean;
+  areaM2: number | null;
+  media: { url: string; type: string; order: number; caption?: string }[] | null;
+  viewCount: number;
+  inquiryCount: number;
+  publishedAt: string | null;
+  itemCount: number;
+}
+
+export interface TransferItemData {
+  id: string;
+  name: string;
+  brand: string | null;
+  modelName: string | null;
+  category: TransferCategory;
+  condition: TransferCondition;
+  purchaseYear: number | null;
+  originalPriceVND: string | null;
+  askingPriceVND: string;
+  aiEstimatePriceVND: string | null;
+  aiConfidence: number | null;
+  quantity: number;
+  dimensions: { widthCm?: number; heightCm?: number; depthCm?: number; weightKg?: number } | null;
+  media: { url: string; type: string; order: number }[] | null;
+  notes: string | null;
+}
+
+export interface TransferListingDetail {
+  id: string;
+  sellerId: string;
+  category: TransferCategory;
+  status: TransferListingStatus;
+  title: string;
+  description: string | null;
+  address: string;
+  ward: string | null;
+  district: string;
+  city: string;
+  latitude: number;
+  longitude: number;
+  askingPriceVND: string;
+  aiEstimatePriceVND: string | null;
+  aiConfidence: number | null;
+  pricingSource: TransferPricingSource;
+  isNegotiable: boolean;
+  areaM2: number | null;
+  monthlyRentVND: string | null;
+  depositMonths: number | null;
+  remainingLeaseMo: number | null;
+  businessType: string | null;
+  footTraffic: string | null;
+  media: { url: string; type: string; order: number; caption?: string }[] | null;
+  viewCount: number;
+  saveCount: number;
+  inquiryCount: number;
+  contactPhone: string | null;
+  contactName: string | null;
+  items: TransferItemData[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface TransferStats {
+  totalListings: number;
+  totalValue: string;
+  byCategory: { category: string; count: number; avgPrice: number }[];
+  byDistrict: { district: string; count: number; avgPrice: number }[];
+  byStatus: { status: string; count: number }[];
+}
+
+export interface PaginatedResult<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export interface SearchTransferListingsParams {
+  q?: string;
+  category?: TransferCategory;
+  status?: TransferListingStatus;
+  district?: string;
+  city?: string;
+  minPrice?: number;
+  maxPrice?: number;
+  page?: number;
+  limit?: number;
+}
+
+// ─── Labels ─────────────────────────────────────────────
+
+export const CATEGORY_LABELS: Record<TransferCategory, string> = {
+  FURNITURE: 'Nội thất',
+  APPLIANCE: 'Thiết bị gia dụng',
+  OFFICE_EQUIPMENT: 'Thiết bị văn phòng',
+  KITCHEN: 'Bếp & thiết bị',
+  PREMISES: 'Mặt bằng',
+  FULL_UNIT: 'Trọn bộ',
+};
+
+export const CATEGORY_ICONS: Record<TransferCategory, string> = {
+  FURNITURE: '🛋️',
+  APPLIANCE: '🧊',
+  OFFICE_EQUIPMENT: '🖥️',
+  KITCHEN: '🍳',
+  PREMISES: '🏪',
+  FULL_UNIT: '🏠',
+};
+
+export const CONDITION_LABELS: Record<TransferCondition, string> = {
+  NEW: 'Mới',
+  LIKE_NEW: 'Như mới',
+  GOOD: 'Tốt',
+  FAIR: 'Khá',
+  WORN: 'Cũ',
+};
+
+export const CONDITION_COLORS: Record<TransferCondition, string> = {
+  NEW: 'bg-green-100 text-green-800',
+  LIKE_NEW: 'bg-emerald-100 text-emerald-800',
+  GOOD: 'bg-blue-100 text-blue-800',
+  FAIR: 'bg-amber-100 text-amber-800',
+  WORN: 'bg-red-100 text-red-800',
+};
+
+export const STATUS_LABELS: Record<TransferListingStatus, string> = {
+  DRAFT: 'Nháp',
+  PENDING_REVIEW: 'Chờ duyệt',
+  ACTIVE: 'Đang đăng',
+  RESERVED: 'Đã giữ',
+  SOLD: 'Đã bán',
+  EXPIRED: 'Hết hạn',
+  REJECTED: 'Từ chối',
+};
+
+// ─── API Functions ──────────────────────────────────────
+
+export const transferApi = {
+  search: (params: SearchTransferListingsParams = {}) => {
+    const query = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== '') query.append(key, String(value));
+    });
+    const qs = query.toString();
+    return apiClient.get<PaginatedResult<TransferListingListItem>>(
+      `/transfer/listings${qs ? `?${qs}` : ''}`,
+    );
+  },
+
+  getById: (id: string) =>
+    apiClient.get<TransferListingDetail>(`/transfer/listings/${id}`),
+
+  getStats: () =>
+    apiClient.get<TransferStats>('/transfer/stats'),
+};
--- a/apps/web/lib/chuyen-nhuong-server.ts
+++ b/apps/web/lib/chuyen-nhuong-server.ts
@@ -0,0 +1,15 @@
+import type { TransferListingDetail } from './chuyen-nhuong-api';
+
+const API_URL = process.env['NEXT_PUBLIC_API_URL'] ?? 'http://localhost:3001/api/v1';
+
+export async function fetchTransferListingById(id: string): Promise<TransferListingDetail | null> {
+  try {
+    const res = await fetch(`${API_URL}/transfer/listings/${id}`, {
+      next: { revalidate: 300 },
+    });
+    if (!res.ok) return null;
+    return res.json() as Promise<TransferListingDetail>;
+  } catch {
+    return null;
+  }
+}
--- a/apps/web/lib/hooks/use-chuyen-nhuong.ts
+++ b/apps/web/lib/hooks/use-chuyen-nhuong.ts
@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query';
+import { transferApi, type SearchTransferListingsParams } from '@/lib/chuyen-nhuong-api';
+
+export const transferKeys = {
+  all: ['transfer'] as const,
+  search: (params: SearchTransferListingsParams) => ['transfer', 'search', params] as const,
+  detail: (id: string) => ['transfer', 'detail', id] as const,
+  stats: () => ['transfer', 'stats'] as const,
+};
+
+export function useTransferListingsSearch(params: SearchTransferListingsParams = {}) {
+  return useQuery({
+    queryKey: transferKeys.search(params),
+    queryFn: () => transferApi.search(params),
+  });
+}
+
+export function useTransferListingDetail(id: string) {
+  return useQuery({
+    queryKey: transferKeys.detail(id),
+    queryFn: () => transferApi.getById(id),
+    enabled: !!id,
+  });
+}
+
+export function useTransferStats() {
+  return useQuery({
+    queryKey: transferKeys.stats(),
+    queryFn: () => transferApi.getStats(),
+    staleTime: 5 * 60 * 1000,
+  });
+}
--- a/apps/web/lib/hooks/use-khu-cong-nghiep.ts
+++ b/apps/web/lib/hooks/use-khu-cong-nghiep.ts
@@ -0,0 +1,53 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  industrialApi,
+  type SearchIndustrialParksParams,
+} from '@/lib/khu-cong-nghiep-api';
+
+export const industrialKeys = {
+  all: ['industrial'] as const,
+  search: (params: SearchIndustrialParksParams) => ['industrial', 'search', params] as const,
+  detail: (slug: string) => ['industrial', 'detail', slug] as const,
+  stats: () => ['industrial', 'stats'] as const,
+  market: () => ['industrial', 'market'] as const,
+  compare: (ids: string[]) => ['industrial', 'compare', ids] as const,
+};
+
+export function useIndustrialParksSearch(params: SearchIndustrialParksParams = {}) {
+  return useQuery({
+    queryKey: industrialKeys.search(params),
+    queryFn: () => industrialApi.search(params),
+  });
+}
+
+export function useIndustrialParkDetail(slug: string) {
+  return useQuery({
+    queryKey: industrialKeys.detail(slug),
+    queryFn: () => industrialApi.getBySlug(slug),
+    enabled: !!slug,
+  });
+}
+
+export function useIndustrialStats() {
+  return useQuery({
+    queryKey: industrialKeys.stats(),
+    queryFn: () => industrialApi.getStats(),
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useIndustrialMarket() {
+  return useQuery({
+    queryKey: industrialKeys.market(),
+    queryFn: () => industrialApi.getMarket(),
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useIndustrialCompare(ids: string[]) {
+  return useQuery({
+    queryKey: industrialKeys.compare(ids),
+    queryFn: () => industrialApi.compare(ids),
+    enabled: ids.length >= 2,
+  });
+}
--- a/apps/web/lib/hooks/use-reports.ts
+++ b/apps/web/lib/hooks/use-reports.ts
@@ -0,0 +1,68 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  listReports,
+  getReport,
+  getReportStatus,
+  generateReport,
+  deleteReport,
+  type ReportType,
+} from '../reports-api';
+
+export const reportKeys = {
+  all: ['reports'] as const,
+  list: (params?: { type?: ReportType; limit?: number; offset?: number }) =>
+    ['reports', 'list', params] as const,
+  detail: (id: string) => ['reports', 'detail', id] as const,
+  status: (id: string) => ['reports', 'status', id] as const,
+};
+
+export function useReportsList(params?: {
+  type?: ReportType;
+  limit?: number;
+  offset?: number;
+}) {
+  return useQuery({
+    queryKey: reportKeys.list(params),
+    queryFn: () => listReports(params),
+  });
+}
+
+export function useReport(id: string | null) {
+  return useQuery({
+    queryKey: reportKeys.detail(id!),
+    queryFn: () => getReport(id!),
+    enabled: !!id,
+  });
+}
+
+export function useReportStatus(id: string | null, shouldPoll = false) {
+  return useQuery({
+    queryKey: reportKeys.status(id!),
+    queryFn: () => getReportStatus(id!),
+    enabled: !!id,
+    refetchInterval: shouldPoll ? 3000 : false,
+  });
+}
+
+export function useGenerateReport() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: { type: ReportType; title: string; params: Record<string, unknown> }) =>
+      generateReport(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: reportKeys.all });
+    },
+  });
+}
+
+export function useDeleteReport() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => deleteReport(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: reportKeys.all });
+    },
+  });
+}
--- a/apps/web/lib/khu-cong-nghiep-api.ts
+++ b/apps/web/lib/khu-cong-nghiep-api.ts
@@ -0,0 +1,160 @@
+import { apiClient } from './api-client';
+
+// ─── Types ──────────────────────────────────────────────
+
+export type IndustrialParkStatus =
+  | 'PLANNING'
+  | 'UNDER_CONSTRUCTION'
+  | 'OPERATIONAL'
+  | 'FULL';
+
+export type VietnamRegion = 'NORTH' | 'CENTRAL' | 'SOUTH';
+
+export interface IndustrialParkListItem {
+  id: string;
+  name: string;
+  nameEn: string | null;
+  slug: string;
+  developer: string;
+  status: IndustrialParkStatus;
+  province: string;
+  region: VietnamRegion;
+  totalAreaHa: number;
+  occupancyRate: number;
+  remainingAreaHa: number;
+  tenantCount: number;
+  landRentUsdM2Year: number | null;
+  rbfRentUsdM2Month: number | null;
+  rbwRentUsdM2Month: number | null;
+  targetIndustries: string[];
+  latitude: number;
+  longitude: number;
+}
+
+export interface IndustrialParkDetail {
+  id: string;
+  name: string;
+  nameEn: string | null;
+  slug: string;
+  developer: string;
+  operator: string | null;
+  status: IndustrialParkStatus;
+  latitude: number;
+  longitude: number;
+  address: string;
+  district: string;
+  province: string;
+  region: VietnamRegion;
+  totalAreaHa: number;
+  leasableAreaHa: number;
+  occupancyRate: number;
+  remainingAreaHa: number;
+  tenantCount: number;
+  establishedYear: number | null;
+  landRentUsdM2Year: number | null;
+  rbfRentUsdM2Month: number | null;
+  rbwRentUsdM2Month: number | null;
+  managementFeeUsd: number | null;
+  infrastructure: Record<string, string> | null;
+  connectivity: Record<string, { name: string; distanceKm: number }> | null;
+  incentives: Record<string, unknown> | null;
+  targetIndustries: string[];
+  existingTenants: { name: string; country: string; industry: string }[] | null;
+  certifications: string[] | null;
+  media: { url: string; type: string; caption?: string }[] | null;
+  documents: { url: string; name: string }[] | null;
+  description: string | null;
+  descriptionEn: string | null;
+  isVerified: boolean;
+  listingCount: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface IndustrialParkStats {
+  totalParks: number;
+  totalAreaHa: number;
+  avgOccupancyRate: number;
+  totalTenants: number;
+  byRegion: { region: string; count: number; avgOccupancy: number }[];
+  byStatus: { status: string; count: number }[];
+  topProvinces: { province: string; count: number; avgRent: number | null }[];
+}
+
+export interface IndustrialMarketData {
+  totalParks: number;
+  avgOccupancyRate: number;
+  avgLandRentUsdM2: number | null;
+  avgRbfRentUsdM2: number | null;
+  rentByRegion: { region: string; avgLandRent: number | null; avgRbfRent: number | null; parkCount: number }[];
+  rentByProvince: { province: string; avgLandRent: number | null; avgRbfRent: number | null; parkCount: number }[];
+}
+
+export interface PaginatedResult<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export interface SearchIndustrialParksParams {
+  q?: string;
+  province?: string;
+  region?: VietnamRegion;
+  status?: IndustrialParkStatus;
+  minAreaHa?: number;
+  maxRentUsdM2?: number;
+  targetIndustry?: string;
+  page?: number;
+  limit?: number;
+}
+
+// ─── Labels ─────────────────────────────────────────────
+
+export const PARK_STATUS_LABELS: Record<IndustrialParkStatus, string> = {
+  PLANNING: 'Quy hoạch',
+  UNDER_CONSTRUCTION: 'Đang xây dựng',
+  OPERATIONAL: 'Đang hoạt động',
+  FULL: 'Đã lấp đầy',
+};
+
+export const PARK_STATUS_COLORS: Record<IndustrialParkStatus, string> = {
+  PLANNING: 'bg-blue-100 text-blue-800',
+  UNDER_CONSTRUCTION: 'bg-amber-100 text-amber-800',
+  OPERATIONAL: 'bg-green-100 text-green-800',
+  FULL: 'bg-red-100 text-red-800',
+};
+
+export const REGION_LABELS: Record<VietnamRegion, string> = {
+  NORTH: 'Miền Bắc',
+  CENTRAL: 'Miền Trung',
+  SOUTH: 'Miền Nam',
+};
+
+// ─── API Functions ──────────────────────────────────────
+
+export const industrialApi = {
+  search: (params: SearchIndustrialParksParams = {}) => {
+    const query = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== '') query.append(key, String(value));
+    });
+    const qs = query.toString();
+    return apiClient.get<PaginatedResult<IndustrialParkListItem>>(
+      `/industrial/parks${qs ? `?${qs}` : ''}`,
+    );
+  },
+
+  getBySlug: (slug: string) =>
+    apiClient.get<IndustrialParkDetail>(`/industrial/parks/${slug}`),
+
+  compare: (ids: string[]) =>
+    apiClient.post<IndustrialParkDetail[]>('/industrial/parks/compare', { ids }),
+
+  getStats: () =>
+    apiClient.get<IndustrialParkStats>('/industrial/parks/stats'),
+
+  getMarket: () =>
+    apiClient.get<IndustrialMarketData>('/industrial/market'),
+};
--- a/apps/web/lib/khu-cong-nghiep-server.ts
+++ b/apps/web/lib/khu-cong-nghiep-server.ts
@@ -0,0 +1,15 @@
+import type { IndustrialParkDetail } from './khu-cong-nghiep-api';
+
+const API_URL = process.env['NEXT_PUBLIC_API_URL'] ?? 'http://localhost:3001/api/v1';
+
+export async function fetchIndustrialParkBySlug(slug: string): Promise<IndustrialParkDetail | null> {
+  try {
+    const res = await fetch(`${API_URL}/industrial/parks/${slug}`, {
+      next: { revalidate: 300 },
+    });
+    if (!res.ok) return null;
+    return res.json() as Promise<IndustrialParkDetail>;
+  } catch {
+    return null;
+  }
+}
--- a/apps/web/lib/reports-api.ts
+++ b/apps/web/lib/reports-api.ts
@@ -0,0 +1,78 @@
+import { apiClient } from './api-client';
+
+// ─── Types ──────────────────────────────────────────────
+
+export type ReportType =
+  | 'RESIDENTIAL_MARKET'
+  | 'INDUSTRIAL_MARKET'
+  | 'DISTRICT_ANALYSIS'
+  | 'INVESTMENT_FEASIBILITY'
+  | 'INDUSTRIAL_LOCATION'
+  | 'PROPERTY_VALUATION'
+  | 'PORTFOLIO';
+
+export type ReportStatus = 'GENERATING' | 'READY' | 'FAILED';
+
+export interface Report {
+  id: string;
+  type: ReportType;
+  title: string;
+  params: Record<string, unknown>;
+  content: Record<string, unknown> | null;
+  pdfUrl: string | null;
+  status: ReportStatus;
+  errorMsg: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ListReportsResponse {
+  data: Report[];
+  total: number;
+}
+
+export interface GenerateReportResponse {
+  reportId: string;
+}
+
+export interface ReportStatusResponse {
+  id: string;
+  status: ReportStatus;
+  errorMsg: string | null;
+  pdfUrl: string | null;
+}
+
+// ─── API Calls ──────────────────────────────────────────
+
+export function listReports(params?: {
+  type?: ReportType;
+  limit?: number;
+  offset?: number;
+}): Promise<ListReportsResponse> {
+  const searchParams = new URLSearchParams();
+  if (params?.type) searchParams.set('type', params.type);
+  if (params?.limit) searchParams.set('limit', String(params.limit));
+  if (params?.offset) searchParams.set('offset', String(params.offset));
+  const qs = searchParams.toString();
+  return apiClient.get<ListReportsResponse>(`/reports${qs ? `?${qs}` : ''}`);
+}
+
+export function getReport(id: string): Promise<Report> {
+  return apiClient.get<Report>(`/reports/${id}`);
+}
+
+export function getReportStatus(id: string): Promise<ReportStatusResponse> {
+  return apiClient.get<ReportStatusResponse>(`/reports/${id}/status`);
+}
+
+export function generateReport(data: {
+  type: ReportType;
+  title: string;
+  params: Record<string, unknown>;
+}): Promise<GenerateReportResponse> {
+  return apiClient.post<GenerateReportResponse>('/reports/generate', data);
+}
+
+export function deleteReport(id: string): Promise<void> {
+  return apiClient.delete<void>(`/reports/${id}`);
+}