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>
This commit is contained in:
Ho Ngoc Hai
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user