115 lines
3.3 KiB
TypeScript
115 lines
3.3 KiB
TypeScript
import type { ObjectQuartirographyRow } from "@/types/analytics";
|
||
|
||
function fmtPrice(v: number | null): string {
|
||
if (v === null) return "—";
|
||
return (
|
||
(v / 1_000_000).toLocaleString("ru-RU", {
|
||
minimumFractionDigits: 1,
|
||
maximumFractionDigits: 1,
|
||
}) + " млн"
|
||
);
|
||
}
|
||
|
||
function fmtArea(v: number | null): string {
|
||
if (v === null) return "—";
|
||
return v.toLocaleString("ru-RU", { maximumFractionDigits: 1 }) + " м²";
|
||
}
|
||
|
||
export function ObjectQuartirographyTable({
|
||
rows,
|
||
}: {
|
||
rows: ObjectQuartirographyRow[];
|
||
}) {
|
||
if (rows.length === 0) {
|
||
return (
|
||
<p style={{ color: "#9ca3af", fontSize: 13 }}>
|
||
Данные квартирографии отсутствуют.
|
||
</p>
|
||
);
|
||
}
|
||
|
||
const headers = ["Тип", "Всего", "В продаже", "Площадь", "Цена (от–до)"];
|
||
|
||
return (
|
||
<div style={{ overflowX: "auto" }}>
|
||
<table
|
||
style={{
|
||
width: "100%",
|
||
borderCollapse: "collapse",
|
||
fontSize: 13,
|
||
}}
|
||
>
|
||
<thead>
|
||
<tr style={{ background: "#f9fafb" }}>
|
||
{headers.map((h) => (
|
||
<th
|
||
key={h}
|
||
style={{
|
||
padding: "8px 10px",
|
||
textAlign: "left",
|
||
fontWeight: 600,
|
||
borderBottom: "1px solid #e6e8ec",
|
||
whiteSpace: "nowrap",
|
||
}}
|
||
>
|
||
{h}
|
||
</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{rows.map((r) => (
|
||
<tr key={r.room_label} style={{ borderTop: "1px solid #f3f4f6" }}>
|
||
<td style={{ padding: "8px 10px", fontWeight: 500 }}>
|
||
{r.room_label}
|
||
</td>
|
||
<td
|
||
style={{
|
||
padding: "8px 10px",
|
||
fontVariantNumeric: "tabular-nums",
|
||
}}
|
||
>
|
||
{r.total_count.toLocaleString("ru-RU")}
|
||
</td>
|
||
<td
|
||
style={{
|
||
padding: "8px 10px",
|
||
fontVariantNumeric: "tabular-nums",
|
||
}}
|
||
>
|
||
{r.free_count > 0 ? (
|
||
<span style={{ color: "#0a7a3a", fontWeight: 500 }}>
|
||
{r.free_count.toLocaleString("ru-RU")}
|
||
</span>
|
||
) : (
|
||
<span style={{ color: "#9ca3af" }}>0</span>
|
||
)}
|
||
</td>
|
||
<td
|
||
style={{
|
||
padding: "8px 10px",
|
||
color: "#5b6066",
|
||
fontVariantNumeric: "tabular-nums",
|
||
}}
|
||
>
|
||
{r.area_min !== null || r.area_max !== null
|
||
? `${fmtArea(r.area_min)} – ${fmtArea(r.area_max)}`
|
||
: "—"}
|
||
</td>
|
||
<td
|
||
style={{
|
||
padding: "8px 10px",
|
||
fontVariantNumeric: "tabular-nums",
|
||
}}
|
||
>
|
||
{r.price_min !== null || r.price_max !== null
|
||
? `${fmtPrice(r.price_min)} – ${fmtPrice(r.price_max)}`
|
||
: "—"}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|