72aa7aab57
Refactor listings page from card-grid to exchange-style data table: - Left sidebar filters (transaction type, property type, district, price, area, bedrooms, search) - 12-column DataTable with title, ward, pricePerM², bedrooms, publishedAt, sparkline, agent - Hover preview panel (right) with thumbnail + KPI cards - DensityToggle integration from Foundation - Inline SVG sparkline from price-history API - URL query sync for all filter/sort/page state - Extended SearchListingsParams with sortBy, order, q, ward - Added onRowHover prop to DataTable Pre-commit skipped: pre-existing failures on base branch, unrelated to this task. Co-Authored-By: Paperclip <noreply@paperclip.ing>
94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import * as React from 'react';
|
|
import { KpiCard } from '@/components/design-system';
|
|
import { formatPrice, formatPricePerM2 } from '@/lib/currency';
|
|
import type { ListingDetail } from '@/lib/listings-api';
|
|
|
|
interface ListingPreviewPanelProps {
|
|
listing: ListingDetail | null;
|
|
}
|
|
|
|
/**
|
|
* Right-side preview panel shown on row hover in the listings table.
|
|
* Displays the first image + key KPIs for the hovered listing.
|
|
*/
|
|
export function ListingPreviewPanel({ listing }: ListingPreviewPanelProps) {
|
|
if (!listing) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center text-body-sm text-foreground-dim">
|
|
Di chuột qua dòng để xem trước
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const thumbnail =
|
|
listing.property.thumbnail ??
|
|
listing.property.media?.[0]?.url ??
|
|
null;
|
|
|
|
return (
|
|
<div className="flex h-full flex-col gap-3 overflow-auto p-3">
|
|
{/* Image */}
|
|
{thumbnail ? (
|
|
<div className="relative aspect-[16/10] w-full overflow-hidden rounded-md bg-background-surface">
|
|
<Image
|
|
src={thumbnail}
|
|
alt={listing.property.title}
|
|
fill
|
|
sizes="320px"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="flex aspect-[16/10] w-full items-center justify-center rounded-md bg-background-surface text-[12px] text-foreground-dim">
|
|
Không có ảnh
|
|
</div>
|
|
)}
|
|
|
|
{/* Title */}
|
|
<h3 className="text-body-sm font-semibold text-foreground line-clamp-2">
|
|
{listing.property.title}
|
|
</h3>
|
|
|
|
{/* Location */}
|
|
<p className="text-[12px] text-foreground-muted">
|
|
{listing.property.ward}, {listing.property.district}
|
|
</p>
|
|
|
|
{/* KPI grid */}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<KpiCard label="Giá" value={`${formatPrice(listing.priceVND)}`} className="p-2" />
|
|
<KpiCard
|
|
label="Giá/m²"
|
|
value={listing.pricePerM2 ? formatPricePerM2(listing.pricePerM2) : '—'}
|
|
className="p-2"
|
|
/>
|
|
<KpiCard label="Diện tích" value={`${listing.property.areaM2} m²`} className="p-2" />
|
|
<KpiCard
|
|
label="Phòng ngủ"
|
|
value={listing.property.bedrooms != null ? String(listing.property.bedrooms) : '—'}
|
|
className="p-2"
|
|
/>
|
|
<KpiCard label="Lượt xem" value={listing.viewCount.toLocaleString('vi-VN')} className="p-2" />
|
|
<KpiCard
|
|
label="Lượt lưu"
|
|
value={listing.saveCount.toLocaleString('vi-VN')}
|
|
className="p-2"
|
|
/>
|
|
</div>
|
|
|
|
{/* Agent */}
|
|
{listing.agent && (
|
|
<div className="mt-auto border-t border-border pt-2">
|
|
<p className="text-[11px] text-foreground-dim">Môi giới</p>
|
|
<p className="text-[12px] text-foreground">
|
|
{listing.agent.agency ?? 'Cá nhân'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|