9cefd439db
Refactors /agents/[id] from card-avatar layout to a data-dense trading-floor style profile per TEC-3037 §5 mockup. - Profile header: avatar, KYC badge, quality score, years exp, service areas - KPI strip (5 cards): total listings, active, deals, avg price, rating - Performance line chart (12m): published vs sold, derived from real listings - Listings table (DataTable): sortable by price/area/views/inquiries, dense rows - Reviews panel: EmptyState when none, ReviewRow cards otherwise - Sticky right sidebar: contact card + quality donut + bio - fetchAgentListings() server fn (agents-server.ts) via GET /listings?agentId - SearchListingsParams.agentId added (listings-api.ts) - page.tsx fetches listings in parallel with agent + reviews - Test suite updated for new props (listings/listingsTotal) + new text copy - Web unit tests: 82/82 files pass, 697/697 tests pass Co-Authored-By: Paperclip <noreply@paperclip.ing>
724 lines
25 KiB
TypeScript
724 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
BadgeCheck,
|
|
Building2,
|
|
Calendar,
|
|
MapPin,
|
|
Phone,
|
|
Mail,
|
|
Star,
|
|
Home,
|
|
MessageSquare,
|
|
TrendingUp,
|
|
|
|
Award,
|
|
BarChart2,
|
|
} from 'lucide-react';
|
|
import Image from 'next/image';
|
|
import * as React from 'react';
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
import {
|
|
KpiCard,
|
|
DataTable,
|
|
EmptyState,
|
|
StatusChip,
|
|
type DataTableColumn
|
|
} from '@/components/design-system';
|
|
import { InquiryModal } from '@/components/listings/inquiry-modal';
|
|
import { Badge as UiBadge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
|
import { Link } from '@/i18n/navigation';
|
|
import type { AgentPublicProfile, AgentReviewItem } from '@/lib/agents-api';
|
|
import { shimmerBlurDataURL } from '@/lib/image-blur';
|
|
import type { ListingDetail } from '@/lib/listings-api';
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const VND = new Intl.NumberFormat('vi-VN');
|
|
|
|
function fmtVND(value: string | number | bigint): string {
|
|
const n = typeof value === 'bigint' ? Number(value) : Number(value);
|
|
if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)} tỷ`;
|
|
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(0)} tr`;
|
|
return VND.format(n);
|
|
}
|
|
|
|
function qualityLabel(score: number): string {
|
|
if (score >= 80) return 'Xuất sắc';
|
|
if (score >= 60) return 'Tốt';
|
|
if (score >= 40) return 'Trung bình';
|
|
return 'Cần cải thiện';
|
|
}
|
|
|
|
function qualityColor(score: number): string {
|
|
if (score >= 80) return 'text-signal-up';
|
|
if (score >= 60) return 'text-primary';
|
|
if (score >= 40) return 'text-signal-neutral';
|
|
return 'text-signal-down';
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Types
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface AgentProfileClientProps {
|
|
agent: AgentPublicProfile;
|
|
reviews: AgentReviewItem[];
|
|
/** Agent's managed listings — fetched server-side. */
|
|
listings: ListingDetail[];
|
|
/** Total listing count (may exceed `listings.length` if paginated). */
|
|
listingsTotal: number;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Listings table columns
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const listingColumns: DataTableColumn<ListingDetail>[] = [
|
|
{
|
|
id: 'title',
|
|
header: 'Bất động sản',
|
|
cell: (row) => (
|
|
<Link href={`/listings/${row.id}` as never} className="block min-w-0">
|
|
<p className="truncate text-xs font-medium text-foreground hover:text-primary transition-colors">
|
|
{row.property.title}
|
|
</p>
|
|
<p className="truncate text-xs text-foreground-muted">
|
|
{row.property.district}, {row.property.city}
|
|
</p>
|
|
</Link>
|
|
),
|
|
width: '30%',
|
|
},
|
|
{
|
|
id: 'type',
|
|
header: 'Loại',
|
|
cell: (row) => (
|
|
<span className="text-xs text-foreground-muted">
|
|
{row.transactionType === 'SALE' ? 'Bán' : 'Cho thuê'}
|
|
</span>
|
|
),
|
|
width: '8%',
|
|
},
|
|
{
|
|
id: 'status',
|
|
header: 'Trạng thái',
|
|
cell: (row) => {
|
|
const s = row.status.toLowerCase() as Parameters<typeof StatusChip>[0]['status'];
|
|
const safe = ['active', 'pending', 'sold', 'rented', 'rejected', 'draft'].includes(s)
|
|
? s
|
|
: 'draft';
|
|
return <StatusChip status={safe} />;
|
|
},
|
|
width: '10%',
|
|
},
|
|
{
|
|
id: 'area',
|
|
header: 'DT (m²)',
|
|
numeric: true,
|
|
align: 'right',
|
|
sortable: true,
|
|
sortValue: (row) => row.property.areaM2,
|
|
cell: (row) => (
|
|
<span className="text-xs tabular-nums text-foreground">{row.property.areaM2}</span>
|
|
),
|
|
width: '8%',
|
|
},
|
|
{
|
|
id: 'price',
|
|
header: 'Giá',
|
|
numeric: true,
|
|
align: 'right',
|
|
sortable: true,
|
|
sortValue: (row) => Number(row.priceVND),
|
|
cell: (row) => (
|
|
<span className="text-xs font-semibold tabular-nums text-primary">
|
|
{fmtVND(row.priceVND)}
|
|
</span>
|
|
),
|
|
width: '12%',
|
|
},
|
|
{
|
|
id: 'pricePerM2',
|
|
header: 'đ/m²',
|
|
numeric: true,
|
|
align: 'right',
|
|
sortable: true,
|
|
sortValue: (row) => row.pricePerM2 ?? 0,
|
|
cell: (row) =>
|
|
row.pricePerM2 != null ? (
|
|
<span className="text-xs tabular-nums text-foreground-muted">
|
|
{fmtVND(row.pricePerM2)}
|
|
</span>
|
|
) : (
|
|
<span className="text-xs text-foreground-dim">—</span>
|
|
),
|
|
width: '12%',
|
|
},
|
|
{
|
|
id: 'views',
|
|
header: 'Lượt xem',
|
|
numeric: true,
|
|
align: 'right',
|
|
sortable: true,
|
|
sortValue: (row) => row.viewCount,
|
|
cell: (row) => (
|
|
<span className="text-xs tabular-nums text-foreground-muted">{VND.format(row.viewCount)}</span>
|
|
),
|
|
width: '10%',
|
|
},
|
|
{
|
|
id: 'inquiries',
|
|
header: 'Liên hệ',
|
|
numeric: true,
|
|
align: 'right',
|
|
sortable: true,
|
|
sortValue: (row) => row.inquiryCount ?? 0,
|
|
cell: (row) =>
|
|
row.inquiryCount != null ? (
|
|
<span className="text-xs tabular-nums text-foreground-muted">{row.inquiryCount}</span>
|
|
) : (
|
|
<span className="text-xs text-foreground-dim">—</span>
|
|
),
|
|
width: '10%',
|
|
},
|
|
];
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Performance chart — derived from real listings data
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface MonthBucket {
|
|
month: string;
|
|
published: number;
|
|
sold: number;
|
|
}
|
|
|
|
function buildPerformanceData(listings: ListingDetail[]): MonthBucket[] {
|
|
const map = new Map<string, MonthBucket>();
|
|
|
|
const now = new Date();
|
|
for (let i = 11; i >= 0; i--) {
|
|
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
|
|
const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
|
|
const label = d.toLocaleDateString('vi-VN', { month: 'short', year: '2-digit' });
|
|
map.set(key, { month: label, published: 0, sold: 0 });
|
|
}
|
|
|
|
for (const l of listings) {
|
|
const src = l.publishedAt ?? l.createdAt;
|
|
const d = new Date(src);
|
|
const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
|
|
const bucket = map.get(key);
|
|
if (!bucket) continue;
|
|
bucket.published++;
|
|
if (l.status === 'SOLD' || l.status === 'RENTED') bucket.sold++;
|
|
}
|
|
|
|
return Array.from(map.values());
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Main Component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function AgentProfileClient({
|
|
agent,
|
|
reviews,
|
|
listings,
|
|
listingsTotal,
|
|
}: AgentProfileClientProps) {
|
|
const [inquiryOpen, setInquiryOpen] = React.useState(false);
|
|
const firstListing = agent.activeListings[0] ?? null;
|
|
|
|
const handleMessageClick = React.useCallback(() => {
|
|
if (firstListing) {
|
|
setInquiryOpen(true);
|
|
} else {
|
|
window.location.href = `sms:${agent.phone}`;
|
|
}
|
|
}, [firstListing, agent.phone]);
|
|
|
|
const perfData = React.useMemo(() => buildPerformanceData(listings), [listings]);
|
|
|
|
// Derived KPIs from real data
|
|
const activeCount = listings.filter((l) => l.status === 'ACTIVE').length;
|
|
const avgPriceVND =
|
|
listings.length > 0
|
|
? listings.reduce((acc, l) => acc + Number(l.priceVND), 0) / listings.length
|
|
: null;
|
|
|
|
const yearsExp = Math.floor(
|
|
(Date.now() - new Date(agent.memberSince).getTime()) / (365.25 * 24 * 3600 * 1000),
|
|
);
|
|
|
|
return (
|
|
<div className="mx-auto max-w-7xl px-4 py-6 space-y-6">
|
|
{/* ── Breadcrumb ── */}
|
|
<nav className="flex items-center gap-1.5 text-xs text-foreground-muted">
|
|
<Link href="/" className="hover:text-foreground transition-colors">Trang chủ</Link>
|
|
<span>/</span>
|
|
<Link href="/agents" className="hover:text-foreground transition-colors">Môi giới</Link>
|
|
<span>/</span>
|
|
<span className="truncate text-foreground">{agent.fullName}</span>
|
|
</nav>
|
|
|
|
{/* ── Profile Header ── */}
|
|
<div className="rounded-lg border border-border bg-background-elevated shadow-elevation-1 p-6">
|
|
<div className="flex flex-col gap-6 sm:flex-row sm:items-start">
|
|
{/* Avatar */}
|
|
<div className="shrink-0">
|
|
{agent.avatarUrl ? (
|
|
<Image
|
|
src={agent.avatarUrl}
|
|
alt={agent.fullName}
|
|
width={96}
|
|
height={96}
|
|
className="h-24 w-24 rounded-full border-2 border-primary/20 object-cover"
|
|
placeholder="blur"
|
|
blurDataURL={shimmerBlurDataURL()}
|
|
/>
|
|
) : (
|
|
<div className="flex h-24 w-24 items-center justify-center rounded-full border-2 border-primary/20 bg-primary/10">
|
|
<span className="text-3xl font-bold text-primary">
|
|
{agent.fullName.charAt(0).toUpperCase()}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="min-w-0 flex-1 space-y-2">
|
|
{/* Name + badges */}
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h1 className="text-xl font-bold text-foreground md:text-2xl">{agent.fullName}</h1>
|
|
{agent.isVerified && (
|
|
<UiBadge variant="success" className="gap-1 text-xs">
|
|
<BadgeCheck className="h-3 w-3" />
|
|
KYC xác minh
|
|
</UiBadge>
|
|
)}
|
|
<span
|
|
className={`text-sm font-semibold tabular-nums ${qualityColor(agent.qualityScore)}`}
|
|
title="Điểm chất lượng"
|
|
>
|
|
★ {agent.qualityScore}/100 · {qualityLabel(agent.qualityScore)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Meta */}
|
|
<div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-foreground-muted">
|
|
{agent.agency && (
|
|
<span className="flex items-center gap-1">
|
|
<Building2 className="h-3.5 w-3.5 shrink-0" />
|
|
{agent.agency}
|
|
</span>
|
|
)}
|
|
{agent.licenseNumber && (
|
|
<span>Giấy phép: {agent.licenseNumber}</span>
|
|
)}
|
|
<span className="flex items-center gap-1">
|
|
<Calendar className="h-3.5 w-3.5 shrink-0" />
|
|
{yearsExp > 0 ? `${yearsExp} năm kinh nghiệm` : 'Mới tham gia'} · từ{' '}
|
|
{new Date(agent.memberSince).toLocaleDateString('vi-VN', {
|
|
month: 'long',
|
|
year: 'numeric',
|
|
})}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Service areas */}
|
|
{agent.serviceAreas.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5 pt-1">
|
|
{agent.serviceAreas.map((area) => (
|
|
<span
|
|
key={area}
|
|
className="inline-flex items-center gap-1 rounded-md bg-background-surface px-2 py-0.5 text-xs text-foreground-muted ring-1 ring-inset ring-border"
|
|
>
|
|
<MapPin className="h-3 w-3 shrink-0" />
|
|
{area}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Desktop CTA */}
|
|
<div className="hidden shrink-0 sm:block">
|
|
<ContactCard agent={agent} onMessageClick={handleMessageClick} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── KPI Strip ── */}
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
|
|
<KpiCard
|
|
label="Tổng tin đăng"
|
|
value={VND.format(listingsTotal)}
|
|
icon={<Home className="h-4 w-4" />}
|
|
footnote="Tất cả thời gian"
|
|
/>
|
|
<KpiCard
|
|
label="Đang hoạt động"
|
|
value={VND.format(activeCount)}
|
|
icon={<TrendingUp className="h-4 w-4" />}
|
|
footnote="Đang rao bán"
|
|
/>
|
|
<KpiCard
|
|
label="Đã giao dịch"
|
|
value={VND.format(agent.totalDeals)}
|
|
icon={<Award className="h-4 w-4" />}
|
|
footnote="Tổng deals thành công"
|
|
/>
|
|
<KpiCard
|
|
label="Giá TB"
|
|
value={avgPriceVND != null ? fmtVND(avgPriceVND) : '—'}
|
|
icon={<BarChart2 className="h-4 w-4" />}
|
|
footnote="Danh mục hiện tại"
|
|
/>
|
|
<KpiCard
|
|
label="Đánh giá"
|
|
value={
|
|
agent.totalReviews > 0
|
|
? `${agent.avgReviewRating.toFixed(1)}/5`
|
|
: '—'
|
|
}
|
|
icon={<Star className="h-4 w-4" />}
|
|
footnote={
|
|
agent.totalReviews > 0
|
|
? `${agent.totalReviews} lượt đánh giá`
|
|
: 'Chưa có đánh giá'
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
{/* ── Main Grid ── */}
|
|
<div className="grid gap-6 lg:grid-cols-3">
|
|
{/* Left column — chart + table + reviews */}
|
|
<div className="space-y-6 lg:col-span-2">
|
|
{/* Performance Chart */}
|
|
<Card className="border-border bg-background-elevated shadow-elevation-1">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-semibold text-foreground">
|
|
Hiệu suất 12 tháng — tin đăng & giao dịch
|
|
</CardTitle>
|
|
<CardDescription className="text-xs text-foreground-muted">
|
|
Tổng hợp từ danh mục thực
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={220}>
|
|
<LineChart data={perfData} margin={{ top: 4, right: 16, left: -16, bottom: 0 }}>
|
|
<CartesianGrid
|
|
strokeDasharray="3 3"
|
|
stroke="hsl(var(--border))"
|
|
strokeOpacity={0.5}
|
|
/>
|
|
<XAxis
|
|
dataKey="month"
|
|
tick={{ fontSize: 10, fill: 'hsl(var(--foreground-muted))' }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
/>
|
|
<YAxis
|
|
tick={{ fontSize: 10, fill: 'hsl(var(--foreground-muted))' }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
allowDecimals={false}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'hsl(var(--background-elevated))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '0.5rem',
|
|
fontSize: '0.75rem',
|
|
}}
|
|
formatter={(value, name) => [
|
|
value,
|
|
name === 'published' ? 'Tin đăng' : 'Giao dịch',
|
|
]}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="published"
|
|
stroke="hsl(var(--chart-1))"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
name="published"
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="sold"
|
|
stroke="hsl(var(--signal-up))"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
name="sold"
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
<div className="mt-2 flex items-center gap-4 text-xs text-foreground-muted">
|
|
<span className="flex items-center gap-1.5">
|
|
<span className="inline-block h-2 w-4 rounded-sm" style={{ background: 'hsl(var(--chart-1))' }} />
|
|
Tin đăng
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<span className="inline-block h-2 w-4 rounded-sm" style={{ background: 'hsl(var(--signal-up))' }} />
|
|
Giao dịch thành công
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Listings Table */}
|
|
<Card className="border-border bg-background-elevated shadow-elevation-1">
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-sm font-semibold text-foreground">
|
|
Danh mục bất động sản{' '}
|
|
<span className="ml-1 text-foreground-muted tabular-nums font-normal">
|
|
({VND.format(listingsTotal)})
|
|
</span>
|
|
</CardTitle>
|
|
</div>
|
|
<CardDescription className="text-xs text-foreground-muted">
|
|
Sắp xếp theo giá, diện tích, lượt xem
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<DataTable
|
|
columns={listingColumns}
|
|
data={listings}
|
|
getRowId={(row) => row.id}
|
|
defaultSortId="price"
|
|
defaultSortDir="desc"
|
|
dense
|
|
stickyHeader
|
|
emptyText={
|
|
<EmptyState
|
|
icon={<Home className="h-6 w-6" />}
|
|
title="Chưa có tin đăng"
|
|
description="Môi giới này chưa có bất động sản nào"
|
|
/>
|
|
}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Reviews */}
|
|
<Card className="border-border bg-background-elevated shadow-elevation-1">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-semibold text-foreground">
|
|
Đánh giá{' '}
|
|
<span className="ml-1 text-foreground-muted font-normal tabular-nums">
|
|
({agent.totalReviews})
|
|
</span>
|
|
</CardTitle>
|
|
{agent.totalReviews > 0 && (
|
|
<CardDescription className="text-xs text-foreground-muted">
|
|
Trung bình{' '}
|
|
<span className="font-semibold text-foreground">
|
|
{agent.avgReviewRating.toFixed(1)}/5
|
|
</span>
|
|
</CardDescription>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent>
|
|
{reviews.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{reviews.map((review) => (
|
|
<ReviewRow key={review.id} review={review} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<EmptyState
|
|
icon={<Star className="h-6 w-6" />}
|
|
title="Chưa có đánh giá"
|
|
description="Chưa có khách hàng nào để lại đánh giá cho môi giới này"
|
|
/>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Right column — sticky contact + quality + bio */}
|
|
<div className="space-y-4 lg:sticky lg:top-20 lg:self-start">
|
|
{/* Mobile contact */}
|
|
<div className="sm:hidden">
|
|
<ContactCard agent={agent} onMessageClick={handleMessageClick} />
|
|
</div>
|
|
|
|
{/* Desktop contact (hidden on mobile, shown lg via sticky container) */}
|
|
<div className="hidden sm:block">
|
|
<ContactCard agent={agent} onMessageClick={handleMessageClick} />
|
|
</div>
|
|
|
|
{/* Quality Score */}
|
|
<Card className="border-border bg-background-elevated shadow-elevation-1">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-semibold text-foreground">Chất lượng môi giới</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center gap-4">
|
|
{/* Donut */}
|
|
<div className="relative h-16 w-16 shrink-0">
|
|
<svg className="h-16 w-16 -rotate-90" viewBox="0 0 36 36">
|
|
<path
|
|
fill="none"
|
|
stroke="hsl(var(--border))"
|
|
strokeWidth="3"
|
|
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
|
/>
|
|
<path
|
|
fill="none"
|
|
stroke="hsl(var(--primary))"
|
|
strokeWidth="3"
|
|
strokeDasharray={`${agent.qualityScore}, 100`}
|
|
strokeLinecap="round"
|
|
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
|
/>
|
|
</svg>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-sm font-bold tabular-nums text-foreground">
|
|
{agent.qualityScore}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<p className={`text-sm font-semibold ${qualityColor(agent.qualityScore)}`}>
|
|
{qualityLabel(agent.qualityScore)}
|
|
</p>
|
|
<p className="text-xs text-foreground-muted">
|
|
Dựa trên phản hồi, thời gian phản hồi và deals thành công
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Bio */}
|
|
{agent.bio && (
|
|
<Card className="border-border bg-background-elevated shadow-elevation-1">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-semibold text-foreground">Giới thiệu</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="whitespace-pre-wrap text-xs leading-relaxed text-foreground-muted">
|
|
{agent.bio}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{firstListing && (
|
|
<InquiryModal
|
|
open={inquiryOpen}
|
|
onOpenChange={setInquiryOpen}
|
|
listingId={firstListing.id}
|
|
listingTitle={firstListing.property.title}
|
|
sellerName={agent.fullName}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Sub-Components
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function ContactCard({
|
|
agent,
|
|
onMessageClick,
|
|
}: {
|
|
agent: AgentPublicProfile;
|
|
onMessageClick: () => void;
|
|
}) {
|
|
return (
|
|
<Card className="border-border bg-background-elevated shadow-elevation-1">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-semibold text-foreground">Liên hệ môi giới</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<a href={`tel:${agent.phone}`} className="block">
|
|
<Button className="w-full gap-2" size="sm">
|
|
<Phone className="h-3.5 w-3.5" />
|
|
Gọi ngay
|
|
</Button>
|
|
</a>
|
|
<Button variant="outline" className="w-full gap-2" size="sm" onClick={onMessageClick}>
|
|
<MessageSquare className="h-3.5 w-3.5" />
|
|
Nhắn tin
|
|
</Button>
|
|
{agent.email && (
|
|
<a href={`mailto:${agent.email}`} className="block">
|
|
<Button variant="outline" className="w-full gap-2" size="sm">
|
|
<Mail className="h-3.5 w-3.5" />
|
|
Email
|
|
</Button>
|
|
</a>
|
|
)}
|
|
<div className="border-t border-border pt-2 space-y-1.5">
|
|
<div>
|
|
<p className="text-xs text-foreground-dim">Số điện thoại</p>
|
|
<p className="text-xs font-medium text-foreground">{agent.phone}</p>
|
|
</div>
|
|
{agent.email && (
|
|
<div>
|
|
<p className="text-xs text-foreground-dim">Email</p>
|
|
<p className="text-xs font-medium text-foreground">{agent.email}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function ReviewRow({ review }: { review: AgentReviewItem }) {
|
|
return (
|
|
<div className="rounded-lg border border-border bg-background-surface p-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
|
|
{(review.userName ?? 'Ẩn').charAt(0).toUpperCase()}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-xs font-medium text-foreground truncate">{review.userName ?? 'Ẩn danh'}</p>
|
|
<p className="text-xs text-foreground-dim">
|
|
{new Date(review.createdAt).toLocaleDateString('vi-VN')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* Stars */}
|
|
<div className="flex items-center gap-0.5 shrink-0">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<Star
|
|
key={i}
|
|
className={`h-3 w-3 ${
|
|
i < review.rating ? 'fill-yellow-400 text-yellow-400' : 'text-foreground-dim'
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{review.comment && (
|
|
<p className="mt-2 text-xs leading-relaxed text-foreground-muted">{review.comment}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|