136 lines
3.6 KiB
TypeScript
136 lines
3.6 KiB
TypeScript
/**
|
||
* EgrnPropertyTable — 2-column key-value table of 10 EGRN properties.
|
||
* Server component (no "use client") — pure display.
|
||
* monospace for cad_num and area_m2.
|
||
*/
|
||
|
||
import type { ParcelEgrn } from "@/lib/site-finder-api";
|
||
|
||
interface Props {
|
||
data: ParcelEgrn;
|
||
}
|
||
|
||
interface Row {
|
||
label: string;
|
||
value: string;
|
||
mono?: boolean;
|
||
}
|
||
|
||
function formatDate(raw: string | null): string {
|
||
if (!raw) return "—";
|
||
try {
|
||
return new Date(raw).toLocaleDateString("ru-RU");
|
||
} catch {
|
||
return raw;
|
||
}
|
||
}
|
||
|
||
function buildRows(data: ParcelEgrn): Row[] {
|
||
return [
|
||
{ label: "Кадастровый номер", value: data.cad_num, mono: true },
|
||
{ label: "Адрес", value: data.address },
|
||
{
|
||
label: "Площадь",
|
||
value:
|
||
Number.isFinite(data.area_m2) && data.area_m2 > 0
|
||
? `${data.area_m2.toLocaleString("ru")} м²`
|
||
: "—",
|
||
mono: true,
|
||
},
|
||
{ label: "ВРИ", value: data.vri },
|
||
{ label: "Категория", value: data.category },
|
||
{
|
||
label: "Дата регистрации",
|
||
value: formatDate(data.registration_date),
|
||
},
|
||
{ label: "Форма собственности", value: data.owner_type },
|
||
{ label: "Обременения", value: data.encumbrance },
|
||
{ label: "Статус", value: data.status },
|
||
{ label: "Обновлено", value: formatDate(data.last_updated) },
|
||
];
|
||
}
|
||
|
||
export function EgrnPropertyTable({ data }: Props) {
|
||
const rows = buildRows(data);
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
border: "1px solid var(--border-card)",
|
||
borderRadius: 12,
|
||
overflow: "hidden",
|
||
background: "var(--bg-card)",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
padding: "10px 16px",
|
||
borderBottom: "1px solid var(--border-soft)",
|
||
fontSize: 12,
|
||
fontWeight: 500,
|
||
textTransform: "uppercase",
|
||
letterSpacing: "0.04em",
|
||
color: "var(--fg-tertiary)",
|
||
}}
|
||
>
|
||
ЕГРН
|
||
</div>
|
||
|
||
<table
|
||
style={{
|
||
width: "100%",
|
||
borderCollapse: "collapse",
|
||
fontSize: 13,
|
||
}}
|
||
>
|
||
<tbody>
|
||
{rows.map((row, i) => (
|
||
<tr
|
||
key={row.label}
|
||
style={{
|
||
background:
|
||
i % 2 === 0 ? "var(--bg-card)" : "var(--bg-card-alt)",
|
||
}}
|
||
>
|
||
<td
|
||
style={{
|
||
padding: "8px 16px",
|
||
color: "var(--fg-secondary)",
|
||
fontWeight: 400,
|
||
width: "45%",
|
||
verticalAlign: "top",
|
||
borderBottom:
|
||
i < rows.length - 1
|
||
? "1px solid var(--border-soft)"
|
||
: "none",
|
||
}}
|
||
>
|
||
{row.label}
|
||
</td>
|
||
<td
|
||
style={{
|
||
padding: "8px 16px",
|
||
color: "var(--fg-primary)",
|
||
fontWeight: 500,
|
||
fontVariantNumeric: "tabular-nums",
|
||
fontFamily: row.mono
|
||
? "'JetBrains Mono', 'Fira Code', monospace"
|
||
: "inherit",
|
||
fontSize: row.mono ? 12 : 13,
|
||
verticalAlign: "top",
|
||
wordBreak: "break-word",
|
||
borderBottom:
|
||
i < rows.length - 1
|
||
? "1px solid var(--border-soft)"
|
||
: "none",
|
||
}}
|
||
>
|
||
{row.value}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|