fix(web): add proper Vietnamese diacritics to all dashboard and listing pages
Vietnamese text throughout the frontend was missing accent marks (diacritics), using plain ASCII instead of proper Unicode characters. Fixed all user-visible text across dashboard, analytics, listings, search, and chart components. Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
@@ -15,12 +15,12 @@ import {
|
||||
|
||||
const DistrictBarChart = dynamic(
|
||||
() => import('@/components/charts/district-bar-chart').then((mod) => mod.DistrictBarChart),
|
||||
{ ssr: false, loading: () => <div className="flex h-64 items-center justify-center text-muted-foreground">Dang tai bieu do...</div> },
|
||||
{ ssr: false, loading: () => <div className="flex h-64 items-center justify-center text-muted-foreground">Đang tải biểu đồ...</div> },
|
||||
);
|
||||
|
||||
const PriceTrendChart = dynamic(
|
||||
() => import('@/components/charts/price-trend-chart').then((mod) => mod.PriceTrendChart),
|
||||
{ ssr: false, loading: () => <div className="flex h-64 items-center justify-center text-muted-foreground">Dang tai bieu do...</div> },
|
||||
{ ssr: false, loading: () => <div className="flex h-64 items-center justify-center text-muted-foreground">Đang tải biểu đồ...</div> },
|
||||
);
|
||||
|
||||
const CITIES = ['Ho Chi Minh', 'Ha Noi', 'Da Nang'];
|
||||
@@ -29,14 +29,14 @@ const TREND_PERIODS = ['2025-Q1', '2025-Q2', '2025-Q3', '2025-Q4', '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`;
|
||||
if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} tỷ`;
|
||||
if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} triệu`;
|
||||
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`;
|
||||
if (price >= 1_000_000) return `${(price / 1_000_000).toFixed(1)} tr/m²`;
|
||||
return `${price.toLocaleString('vi-VN')} đ/m²`;
|
||||
}
|
||||
|
||||
function YoYBadge({ value }: { value: number | null }) {
|
||||
@@ -91,7 +91,7 @@ export default function AnalyticsPage() {
|
||||
setTrendDistrict(firstDistrict);
|
||||
}
|
||||
})
|
||||
.catch(() => setError('Khong the tai du lieu phan tich'))
|
||||
.catch(() => setError('Không thể tải dữ liệu phân tích'))
|
||||
.finally(() => setLoading(false));
|
||||
}, [city, period]);
|
||||
|
||||
@@ -131,16 +131,16 @@ export default function AnalyticsPage() {
|
||||
const trendChartData = priceTrend.map((p) => ({
|
||||
period: p.period,
|
||||
'Gia/m2': Math.round(p.avgPriceM2 / 1_000_000),
|
||||
'Tin dang': p.totalListings,
|
||||
'Tin đăng': p.totalListings,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Phan tich thi truong</h1>
|
||||
<h1 className="text-3xl font-bold">Phân tích thị trường</h1>
|
||||
<p className="mt-2 text-muted-foreground">
|
||||
Bao cao thi truong bat dong san - {period}
|
||||
Báo cáo thị trường bất động sản - {period}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
@@ -163,7 +163,7 @@ export default function AnalyticsPage() {
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Tong tin dang</CardDescription>
|
||||
<CardDescription>Tổng tin đăng</CardDescription>
|
||||
<CardTitle className="text-2xl">
|
||||
{loading ? '...' : totalListings.toLocaleString('vi-VN')}
|
||||
</CardTitle>
|
||||
@@ -171,7 +171,7 @@ export default function AnalyticsPage() {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Gia TB/m2</CardDescription>
|
||||
<CardDescription>Giá TB/m²</CardDescription>
|
||||
<CardTitle className="text-2xl">
|
||||
{loading ? '...' : formatPriceM2(avgPriceM2)}
|
||||
</CardTitle>
|
||||
@@ -179,15 +179,15 @@ export default function AnalyticsPage() {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Ngay trung binh de ban</CardDescription>
|
||||
<CardDescription>Ngày trung bình để bán</CardDescription>
|
||||
<CardTitle className="text-2xl">
|
||||
{loading ? '...' : `${avgDaysOnMarket.toFixed(0)} ngay`}
|
||||
{loading ? '...' : `${avgDaysOnMarket.toFixed(0)} ngày`}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>So quan/huyen</CardDescription>
|
||||
<CardDescription>Số quận/huyện</CardDescription>
|
||||
<CardTitle className="text-2xl">
|
||||
{loading ? '...' : new Set(marketReport.map((d) => d.district)).size}
|
||||
</CardTitle>
|
||||
@@ -198,9 +198,9 @@ export default function AnalyticsPage() {
|
||||
{/* Tabs */}
|
||||
<Tabs value={tab} onValueChange={setTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="overview">Tong quan</TabsTrigger>
|
||||
<TabsTrigger value="trends">Xu huong gia</TabsTrigger>
|
||||
<TabsTrigger value="districts">Chi tiet quan</TabsTrigger>
|
||||
<TabsTrigger value="overview">Tổng quan</TabsTrigger>
|
||||
<TabsTrigger value="trends">Xu hướng giá</TabsTrigger>
|
||||
<TabsTrigger value="districts">Chi tiết quận</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Overview Tab */}
|
||||
@@ -209,17 +209,17 @@ export default function AnalyticsPage() {
|
||||
{/* Bar Chart - Price by District */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Gia trung binh theo quan</CardTitle>
|
||||
<CardDescription>Trieu VND/m2 tai {city}</CardDescription>
|
||||
<CardTitle className="text-lg">Giá trung bình theo quận</CardTitle>
|
||||
<CardDescription>Triệu VND/m² tại {city}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground">
|
||||
Dang tai...
|
||||
Đang tải...
|
||||
</div>
|
||||
) : barChartData.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground">
|
||||
Chua co du lieu
|
||||
Chưa có dữ liệu
|
||||
</div>
|
||||
) : (
|
||||
<DistrictBarChart data={barChartData} height={300} dataKey="price" />
|
||||
@@ -230,17 +230,17 @@ export default function AnalyticsPage() {
|
||||
{/* Heatmap - Card Grid */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Ban do gia theo quan</CardTitle>
|
||||
<CardDescription>So sanh gia trung binh/m2 tai {city}</CardDescription>
|
||||
<CardTitle className="text-lg">Bản đồ giá theo quận</CardTitle>
|
||||
<CardDescription>So sánh giá trung bình/m² tại {city}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground">
|
||||
Dang tai...
|
||||
Đang tải...
|
||||
</div>
|
||||
) : heatmap.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground">
|
||||
Chua co du lieu
|
||||
Chưa có dữ liệu
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
@@ -267,7 +267,7 @@ export default function AnalyticsPage() {
|
||||
{formatPriceM2(point.avgPriceM2)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{point.totalListings} tin dang
|
||||
{point.totalListings} tin đăng
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -299,20 +299,20 @@ export default function AnalyticsPage() {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">
|
||||
Xu huong gia - {trendDistrict || 'Chon quan'}
|
||||
Xu hướng giá - {trendDistrict || 'Chọn quận'}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Bien dong gia trung binh/m2 qua cac quy (Can ho)
|
||||
Biến động giá trung bình/m² qua các quý (Căn hộ)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{trendLoading ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground">
|
||||
Dang tai...
|
||||
Đang tải...
|
||||
</div>
|
||||
) : trendChartData.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground">
|
||||
Chua co du lieu xu huong
|
||||
Chưa có dữ liệu xu hướng
|
||||
</div>
|
||||
) : (
|
||||
<PriceTrendChart data={trendChartData} height={350} />
|
||||
@@ -328,31 +328,31 @@ export default function AnalyticsPage() {
|
||||
{/* Stats Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Thong ke chi tiet theo quan</CardTitle>
|
||||
<CardTitle className="text-lg">Thống kê chi tiết theo quận</CardTitle>
|
||||
<CardDescription>
|
||||
Du lieu thi truong bat dong san tai {city} - {period}
|
||||
Dữ liệu thị trường bất động sản tại {city} - {period}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="flex h-48 items-center justify-center text-muted-foreground">
|
||||
Dang tai...
|
||||
Đang tải...
|
||||
</div>
|
||||
) : districtStats.length === 0 ? (
|
||||
<div className="flex h-48 items-center justify-center text-muted-foreground">
|
||||
Chua co du lieu
|
||||
Chưa có dữ liệu
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b text-left">
|
||||
<th className="pb-2 pr-4 font-medium">Quan</th>
|
||||
<th className="pb-2 pr-4 font-medium">Loai BDS</th>
|
||||
<th className="pb-2 pr-4 font-medium text-right">Gia trung vi</th>
|
||||
<th className="pb-2 pr-4 font-medium text-right">Gia/m2</th>
|
||||
<th className="pb-2 pr-4 font-medium text-right">Tin dang</th>
|
||||
<th className="pb-2 pr-4 font-medium text-right">Ngay ban</th>
|
||||
<th className="pb-2 pr-4 font-medium">Quận</th>
|
||||
<th className="pb-2 pr-4 font-medium">Loại BĐS</th>
|
||||
<th className="pb-2 pr-4 font-medium text-right">Giá trung vị</th>
|
||||
<th className="pb-2 pr-4 font-medium text-right">Giá/m²</th>
|
||||
<th className="pb-2 pr-4 font-medium text-right">Tin đăng</th>
|
||||
<th className="pb-2 pr-4 font-medium text-right">Ngày bán</th>
|
||||
<th className="pb-2 font-medium text-right">YoY</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -391,17 +391,17 @@ export default function AnalyticsPage() {
|
||||
{/* Market Report Cards */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Bao cao thi truong</CardTitle>
|
||||
<CardDescription>Tong hop chi so thi truong theo tung quan</CardDescription>
|
||||
<CardTitle className="text-lg">Báo cáo thị trường</CardTitle>
|
||||
<CardDescription>Tổng hợp chỉ số thị trường theo từng quận</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="flex h-48 items-center justify-center text-muted-foreground">
|
||||
Dang tai...
|
||||
Đang tải...
|
||||
</div>
|
||||
) : marketReport.length === 0 ? (
|
||||
<div className="flex h-48 items-center justify-center text-muted-foreground">
|
||||
Chua co du lieu
|
||||
Chưa có dữ liệu
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
@@ -411,25 +411,25 @@ export default function AnalyticsPage() {
|
||||
<h3 className="font-semibold">{district.district}</h3>
|
||||
<div className="mt-2 space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Gia trung vi</span>
|
||||
<span className="text-muted-foreground">Giá trung vị</span>
|
||||
<span className="font-medium">
|
||||
{formatPrice(district.medianPrice)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Gia/m2</span>
|
||||
<span className="text-muted-foreground">Giá/m²</span>
|
||||
<span>{formatPriceM2(district.avgPriceM2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Tin dang</span>
|
||||
<span className="text-muted-foreground">Tin đăng</span>
|
||||
<span>{district.totalListings}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Ton kho</span>
|
||||
<span className="text-muted-foreground">Tồn kho</span>
|
||||
<span>{district.inventoryLevel}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Thay doi YoY</span>
|
||||
<span className="text-muted-foreground">Thay đổi YoY</span>
|
||||
<YoYBadge value={district.yoyChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@ import { listingsApi, type ListingDetail, type PaginatedResult } from '@/lib/lis
|
||||
|
||||
const DistrictBarChart = dynamic(
|
||||
() => import('@/components/charts/district-bar-chart').then((mod) => mod.DistrictBarChart),
|
||||
{ ssr: false, loading: () => <div className="flex h-64 items-center justify-center text-muted-foreground">Dang tai bieu do...</div> },
|
||||
{ ssr: false, loading: () => <div className="flex h-64 items-center justify-center text-muted-foreground">Đang tải biểu đồ...</div> },
|
||||
);
|
||||
|
||||
const CITY = 'Ho Chi Minh';
|
||||
@@ -24,14 +24,14 @@ 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`;
|
||||
if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} tỷ`;
|
||||
if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} triệu`;
|
||||
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`;
|
||||
if (price >= 1_000_000) return `${(price / 1_000_000).toFixed(1)} tr/m²`;
|
||||
return `${price.toLocaleString('vi-VN')} đ/m²`;
|
||||
}
|
||||
|
||||
interface StatCardProps {
|
||||
@@ -124,35 +124,35 @@ export default function DashboardPage() {
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Bang dieu khien</h1>
|
||||
<h1 className="text-3xl font-bold">Bảng điều khiển</h1>
|
||||
<p className="mt-2 text-muted-foreground">
|
||||
Tong quan thi truong va tin dang cua ban
|
||||
Tổng quan thị trường và tin đăng của bạn
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/listings/new">
|
||||
<Button>Dang tin moi</Button>
|
||||
<Button>Đăng tin mới</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stats overview */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
title="Tin dang cua toi"
|
||||
title="Tin đăng của tôi"
|
||||
value={loading ? '...' : myListingsCount.toLocaleString('vi-VN')}
|
||||
description="Tong so tin da dang"
|
||||
description="Tổng số tin đã đăng"
|
||||
/>
|
||||
<StatCard
|
||||
title="Luot xem"
|
||||
title="Lượt xem"
|
||||
value={loading ? '...' : totalViews.toLocaleString('vi-VN')}
|
||||
description="Tren tat ca tin dang"
|
||||
description="Trên tất cả tin đăng"
|
||||
/>
|
||||
<StatCard
|
||||
title="Lien he"
|
||||
title="Liên hệ"
|
||||
value={loading ? '...' : totalInquiries.toLocaleString('vi-VN')}
|
||||
description="Yeu cau tu khach hang"
|
||||
description="Yêu cầu từ khách hàng"
|
||||
/>
|
||||
<StatCard
|
||||
title="Gia TB thi truong"
|
||||
title="Giá TB thị trường"
|
||||
value={loading ? '...' : formatPriceM2(avgPriceM2)}
|
||||
trend={avgYoy}
|
||||
description="YoY"
|
||||
@@ -164,24 +164,24 @@ export default function DashboardPage() {
|
||||
{/* Price chart */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Gia trung binh theo quan</CardTitle>
|
||||
<CardDescription>{CITY} - {PERIOD} (trieu VND/m2)</CardDescription>
|
||||
<CardTitle className="text-lg">Giá trung bình theo quận</CardTitle>
|
||||
<CardDescription>{CITY} - {PERIOD} (triệu VND/m²)</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground">
|
||||
Dang tai...
|
||||
Đang tải...
|
||||
</div>
|
||||
) : chartData.length === 0 ? (
|
||||
<div className="flex h-64 items-center justify-center text-muted-foreground">
|
||||
Chua co du lieu
|
||||
Chưa có dữ liệu
|
||||
</div>
|
||||
) : (
|
||||
<DistrictBarChart
|
||||
data={chartData}
|
||||
height={280}
|
||||
dataKey="Gia/m2"
|
||||
tooltipFormatter={(value) => [`${value} tr/m2`, 'Gia']}
|
||||
tooltipFormatter={(value) => [`${value} tr/m²`, 'Giá']}
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
@@ -190,30 +190,30 @@ export default function DashboardPage() {
|
||||
{/* Market summary */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Thi truong {CITY}</CardTitle>
|
||||
<CardDescription>Chi so chinh - {PERIOD}</CardDescription>
|
||||
<CardTitle className="text-lg">Thị trường {CITY}</CardTitle>
|
||||
<CardDescription>Chỉ số chính - {PERIOD}</CardDescription>
|
||||
</CardHeader>
|
||||
<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="text-sm text-muted-foreground">Tổng tin đăng</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="text-sm text-muted-foreground">Giá TB/m²</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="text-sm text-muted-foreground">Ngày TB để bán</span>
|
||||
<span className="font-semibold">
|
||||
{loading ? '...' : `${avgDaysOnMarket.toFixed(0)} ngay`}
|
||||
{loading ? '...' : `${avgDaysOnMarket.toFixed(0)} ngày`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">So quan</span>
|
||||
<span className="text-sm text-muted-foreground">Số quận</span>
|
||||
<span className="font-semibold">
|
||||
{loading ? '...' : new Set(marketReport.map((d) => d.district)).size}
|
||||
</span>
|
||||
@@ -221,7 +221,7 @@ export default function DashboardPage() {
|
||||
<div className="pt-2">
|
||||
<Link href="/analytics">
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
Xem phan tich chi tiet
|
||||
Xem phân tích chi tiết
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -233,26 +233,26 @@ export default function DashboardPage() {
|
||||
<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>
|
||||
<CardTitle className="text-lg">Tin đăng gần đây</CardTitle>
|
||||
<CardDescription>Danh sách tin đăng mới nhất của bạn</CardDescription>
|
||||
</div>
|
||||
<Link href="/listings">
|
||||
<Button variant="outline" size="sm">
|
||||
Xem tat ca
|
||||
Xem tất cả
|
||||
</Button>
|
||||
</Link>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="flex h-32 items-center justify-center text-muted-foreground">
|
||||
Dang tai...
|
||||
Đang tải...
|
||||
</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>
|
||||
<p>Chưa có tin đăng nào</p>
|
||||
<Link href="/listings/new" className="mt-2">
|
||||
<Button variant="outline" size="sm">
|
||||
Dang tin dau tien
|
||||
Đăng tin đầu tiên
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -292,8 +292,8 @@ export default function DashboardPage() {
|
||||
<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>
|
||||
<span>{listing.viewCount} lượt xem</span>
|
||||
<span>{listing.inquiryCount} liên hệ</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
@@ -16,8 +16,8 @@ import {
|
||||
import { PROPERTY_TYPES, TRANSACTION_TYPES, LISTING_STATUSES } from '@/lib/validations/listings';
|
||||
function formatPrice(priceVND: string): string {
|
||||
const num = Number(priceVND);
|
||||
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`;
|
||||
if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} tỷ`;
|
||||
if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} triệu`;
|
||||
return num.toLocaleString('vi-VN');
|
||||
}
|
||||
|
||||
@@ -77,13 +77,13 @@ export default function ListingsPage() {
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Quan ly tin dang</h1>
|
||||
<h1 className="text-2xl font-bold">Quản lý tin đăng</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Quan ly, theo doi va cap nhat cac tin dang cua ban
|
||||
Quản lý, theo dõi và cập nhật các tin đăng của bạn
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/listings/new">
|
||||
<Button>Dang tin moi</Button>
|
||||
<Button>Đăng tin mới</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -91,13 +91,13 @@ export default function ListingsPage() {
|
||||
<div className="grid gap-3 sm:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Tong tin dang</CardDescription>
|
||||
<CardDescription>Tổng tin đăng</CardDescription>
|
||||
<CardTitle className="text-xl">{loading ? '...' : stats.total}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Dang hoat dong</CardDescription>
|
||||
<CardDescription>Đang hoạt động</CardDescription>
|
||||
<CardTitle className="text-xl text-green-600">
|
||||
{loading ? '...' : stats.active}
|
||||
</CardTitle>
|
||||
@@ -105,7 +105,7 @@ export default function ListingsPage() {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Cho duyet</CardDescription>
|
||||
<CardDescription>Chờ duyệt</CardDescription>
|
||||
<CardTitle className="text-xl text-yellow-600">
|
||||
{loading ? '...' : stats.pending}
|
||||
</CardTitle>
|
||||
@@ -113,7 +113,7 @@ export default function ListingsPage() {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Tong luot xem</CardDescription>
|
||||
<CardDescription>Tổng lượt xem</CardDescription>
|
||||
<CardTitle className="text-xl">{loading ? '...' : stats.views}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
@@ -128,7 +128,7 @@ export default function ListingsPage() {
|
||||
}
|
||||
className="w-40"
|
||||
>
|
||||
<option value="">Tat ca giao dich</option>
|
||||
<option value="">Tất cả giao dịch</option>
|
||||
{TRANSACTION_TYPES.map((t) => (
|
||||
<option key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
@@ -142,7 +142,7 @@ export default function ListingsPage() {
|
||||
}
|
||||
className="w-44"
|
||||
>
|
||||
<option value="">Tat ca loai BDS</option>
|
||||
<option value="">Tất cả loại BĐS</option>
|
||||
{PROPERTY_TYPES.map((t) => (
|
||||
<option key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
@@ -154,7 +154,7 @@ export default function ListingsPage() {
|
||||
onChange={(e) => setFilters((f) => ({ ...f, status: e.target.value, page: 1 }))}
|
||||
className="w-40"
|
||||
>
|
||||
<option value="">Tat ca trang thai</option>
|
||||
<option value="">Tất cả trạng thái</option>
|
||||
{Object.entries(LISTING_STATUSES).map(([key, { label }]) => (
|
||||
<option key={key} value={key}>
|
||||
{label}
|
||||
@@ -168,14 +168,14 @@ export default function ListingsPage() {
|
||||
size="sm"
|
||||
onClick={() => setViewMode('grid')}
|
||||
>
|
||||
Luoi
|
||||
Lưới
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'table' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setViewMode('table')}
|
||||
>
|
||||
Bang
|
||||
Bảng
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -187,10 +187,10 @@ export default function ListingsPage() {
|
||||
</div>
|
||||
) : !result || result.data.length === 0 ? (
|
||||
<div className="flex min-h-[300px] flex-col items-center justify-center text-muted-foreground">
|
||||
<p>Chua co tin dang nao</p>
|
||||
<p>Chưa có tin đăng nào</p>
|
||||
<Link href="/listings/new" className="mt-2">
|
||||
<Button variant="outline" size="sm">
|
||||
Dang tin dau tien
|
||||
Đăng tin đầu tiên
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -228,7 +228,7 @@ export default function ListingsPage() {
|
||||
</p>
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{listing.property.areaM2} m2
|
||||
{listing.property.areaM2} m²
|
||||
</Badge>
|
||||
{listing.property.bedrooms != null && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
@@ -242,9 +242,9 @@ export default function ListingsPage() {
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 flex gap-3 text-xs text-muted-foreground">
|
||||
<span>{listing.viewCount} luot xem</span>
|
||||
<span>{listing.inquiryCount} lien he</span>
|
||||
<span>{listing.saveCount} da luu</span>
|
||||
<span>{listing.viewCount} lượt xem</span>
|
||||
<span>{listing.inquiryCount} liên hệ</span>
|
||||
<span>{listing.saveCount} đã lưu</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -259,14 +259,14 @@ export default function ListingsPage() {
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b text-left">
|
||||
<th className="p-3 font-medium">Tin dang</th>
|
||||
<th className="p-3 font-medium">Loai</th>
|
||||
<th className="p-3 font-medium text-right">Gia</th>
|
||||
<th className="p-3 font-medium text-right">Dien tich</th>
|
||||
<th className="p-3 font-medium text-center">Trang thai</th>
|
||||
<th className="p-3 font-medium text-right">Luot xem</th>
|
||||
<th className="p-3 font-medium text-right">Lien he</th>
|
||||
<th className="p-3 font-medium text-right">Ngay dang</th>
|
||||
<th className="p-3 font-medium">Tin đăng</th>
|
||||
<th className="p-3 font-medium">Loại</th>
|
||||
<th className="p-3 font-medium text-right">Giá</th>
|
||||
<th className="p-3 font-medium text-right">Diện tích</th>
|
||||
<th className="p-3 font-medium text-center">Trạng thái</th>
|
||||
<th className="p-3 font-medium text-right">Lượt xem</th>
|
||||
<th className="p-3 font-medium text-right">Liên hệ</th>
|
||||
<th className="p-3 font-medium text-right">Ngày đăng</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -311,7 +311,7 @@ export default function ListingsPage() {
|
||||
<td className="p-3 text-right font-medium text-primary">
|
||||
{formatPrice(listing.priceVND)}
|
||||
</td>
|
||||
<td className="p-3 text-right">{listing.property.areaM2} m2</td>
|
||||
<td className="p-3 text-right">{listing.property.areaM2} m²</td>
|
||||
<td className="p-3 text-center">
|
||||
<ListingStatusBadge status={listing.status} />
|
||||
</td>
|
||||
@@ -338,7 +338,7 @@ export default function ListingsPage() {
|
||||
disabled={filters.page <= 1}
|
||||
onClick={() => setFilters((f) => ({ ...f, page: f.page - 1 }))}
|
||||
>
|
||||
Truoc
|
||||
Trước
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Trang {result.page} / {result.totalPages}
|
||||
@@ -349,7 +349,7 @@ export default function ListingsPage() {
|
||||
disabled={filters.page >= result.totalPages}
|
||||
onClick={() => setFilters((f) => ({ ...f, page: f.page + 1 }))}
|
||||
>
|
||||
Tiep
|
||||
Tiếp
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user