9bb4c42f84
Tạo mới trang /listings dạng bảng ticker-style theo spec TEC-3034. - DataTable compact (row 36px, sticky header, alternating rows) - Cột: #, Mã (GG-xxx), Quận, Loại, Giá, Δ30d, DT m², KL/Views - Sortable theo Giá, Δ30d, DT m², KL/Views - Filter inline: Loại giao dịch, Loại BĐS, Quận, Khoảng giá - Toggle view: Table (default) ↔ Card grid (legacy component cũ) - Pagination restyle compact, giữ nguyên API params - Click row → navigate to detail page - Dùng DataTable + PriceDelta từ @/components/design-system Co-Authored-By: Paperclip <noreply@paperclip.ing>
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { PriceDelta, type PriceDeltaDirection } from './price-delta';
|
|
|
|
export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
/** Tên chỉ số, vd "Giá TB/m²". */
|
|
label: string;
|
|
/** Giá trị chính, đã format sẵn (string) hoặc number. */
|
|
value: string | number;
|
|
/** Đơn vị đi kèm, vd "tr/m²". */
|
|
unit?: string;
|
|
/** Delta % (nếu có). */
|
|
delta?: number;
|
|
/** Ép direction của delta. */
|
|
deltaDirection?: PriceDeltaDirection;
|
|
/** Mô tả phụ, vd "24h", "7 ngày". */
|
|
sublabel?: string;
|
|
/** Prefix icon. */
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Card KPI compact cho Market Dashboard.
|
|
* Bố cục: label (sans muted) + value (mono lớn) + delta (signal).
|
|
*/
|
|
export function StatCard({
|
|
label,
|
|
value,
|
|
unit,
|
|
delta,
|
|
deltaDirection,
|
|
sublabel,
|
|
icon,
|
|
className,
|
|
...rest
|
|
}: StatCardProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex flex-col gap-1 rounded-md border border-border bg-background-elevated px-4 py-3 shadow-elevation-1',
|
|
className,
|
|
)}
|
|
{...rest}
|
|
>
|
|
<div className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-foreground-muted">
|
|
{icon ? <span className="text-foreground-dim">{icon}</span> : null}
|
|
<span>{label}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-2">
|
|
<span data-numeric className="font-mono text-data-lg font-semibold text-foreground">
|
|
{value}
|
|
</span>
|
|
{unit ? <span className="text-xs text-foreground-muted">{unit}</span> : null}
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
{typeof delta === 'number' ? (
|
|
<PriceDelta value={delta} size="sm" direction={deltaDirection} />
|
|
) : (
|
|
<span />
|
|
)}
|
|
{sublabel ? (
|
|
<span className="text-[11px] text-foreground-dim">{sublabel}</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|