91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
"use client";
|
||
import type { RecentSoldEntry } from "@/types/trade-in";
|
||
|
||
type Props = { items: RecentSoldEntry[] };
|
||
|
||
const fmtPrice = (n: number | null): string =>
|
||
n == null ? "—" : `${(n / 1_000_000).toFixed(2)} М`;
|
||
|
||
const fmtDate = (d: string | null): string => {
|
||
if (!d) return "—";
|
||
try {
|
||
return new Date(d).toLocaleDateString("ru-RU");
|
||
} catch {
|
||
return d;
|
||
}
|
||
};
|
||
|
||
export function RecentSoldList({ items }: Props) {
|
||
const suffix = items.length === 1 ? "" : "ов";
|
||
|
||
return (
|
||
<article className="card" style={{ marginTop: 12 }}>
|
||
<header className="card-head">
|
||
<h4 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>
|
||
Недавно снятые (12 мес)
|
||
</h4>
|
||
<small style={{ color: "var(--muted, #6b7280)" }}>
|
||
{items.length} лот{suffix}
|
||
</small>
|
||
</header>
|
||
<div style={{ padding: "8px 16px 16px" }}>
|
||
<table
|
||
style={{ width: "100%", fontSize: 13, borderCollapse: "collapse" }}
|
||
>
|
||
<thead>
|
||
<tr
|
||
style={{
|
||
borderBottom: "1px solid var(--border, #e5e7eb)",
|
||
textAlign: "left",
|
||
}}
|
||
>
|
||
<th style={{ padding: "6px 8px" }}>Лот</th>
|
||
<th style={{ padding: "6px 8px" }}>Цена</th>
|
||
<th style={{ padding: "6px 8px" }}>Торг</th>
|
||
<th style={{ padding: "6px 8px" }}>Снято</th>
|
||
<th style={{ padding: "6px 8px" }}>Экспозиция</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{items.map((it) => {
|
||
const hasDiscount =
|
||
it.discount_pct != null && it.discount_pct !== 0;
|
||
const discountColor =
|
||
it.discount_pct != null && it.discount_pct > 0
|
||
? "#16a34a"
|
||
: "var(--muted, #6b7280)";
|
||
|
||
return (
|
||
<tr
|
||
key={it.id}
|
||
style={{
|
||
borderBottom: "1px solid var(--border-soft, #f3f4f6)",
|
||
}}
|
||
>
|
||
<td style={{ padding: "6px 8px" }}>
|
||
{it.rooms ?? "?"}к, {it.area_m2 ?? "?"} м²
|
||
{it.floor != null ? `, эт. ${it.floor}` : ""}
|
||
</td>
|
||
<td style={{ padding: "6px 8px", whiteSpace: "nowrap" }}>
|
||
{fmtPrice(it.last_price)} ₽
|
||
</td>
|
||
<td style={{ padding: "6px 8px", color: discountColor }}>
|
||
{hasDiscount
|
||
? `${it.discount_pct! > 0 ? "−" : "+"}${Math.abs(it.discount_pct!).toFixed(1)}%`
|
||
: "—"}
|
||
</td>
|
||
<td style={{ padding: "6px 8px", whiteSpace: "nowrap" }}>
|
||
{fmtDate(it.removed_date)}
|
||
</td>
|
||
<td style={{ padding: "6px 8px" }}>
|
||
{it.exposure_days ?? "—"} дн.
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</article>
|
||
);
|
||
}
|