bot-backend
fcb85deab8
Прод-/trade-in/* обслуживает tradein-mvp/frontend (basePath=/trade-in, standalone), а не главный frontend — v2 по ошибке попал в главный, где прод его не отдаёт. Markup-only порт (fixtures, без API): - компоненты v2 → tradein-mvp/frontend/src/components/trade-in/v2/ - роут src/app/v2/ (basePath даёт прод-URL /trade-in/v2) - public/trade-in-v2/building.png - HeroBar: <img> → next/image (плоский img не префиксит basePath → 404) - удалён мёртвый v2 из главного frontend next build (NEXT_PUBLIC_BASE_PATH=/trade-in) зелёный, роут /v2 prerendered.
359 lines
11 KiB
TypeScript
359 lines
11 KiB
TypeScript
// Overlay 04 "ПРОДАЖИ В ДОМЕ" body for the /trade-in/v2 "МЕРА Оценка" port.
|
||
// Faithful markup port of the design's showHistory block (МЕРА Оценка.dc.html,
|
||
// lines 457-489): "История продаж в этом доме" card (house sales) +
|
||
// "ДКП-сделки на улице" card (3 KPI + dealine table + footer count).
|
||
// Static markup — data comes from fixtures, no fetch / no local state.
|
||
|
||
import { tokens } from "./tokens";
|
||
import { history, dkpRows } from "./fixtures";
|
||
|
||
// Shared grid templates (kept verbatim from the design column tracks).
|
||
const houseGrid = "2fr 1.4fr 1fr 1fr";
|
||
const dkpGrid = "2.2fr 1fr 1.3fr 1fr .9fr 2fr";
|
||
|
||
export default function HistoryView() {
|
||
return (
|
||
<div style={{ display: "flex", flexDirection: "column", gap: "22px" }}>
|
||
{/* ── История продаж в этом доме ───────────────────────────── */}
|
||
<div
|
||
style={{
|
||
background: tokens.surface.w55,
|
||
border: `1px solid ${tokens.line2}`,
|
||
borderRadius: "8px",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
padding: "14px 18px",
|
||
borderBottom: `1px solid ${tokens.lineSoft}`,
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
fontSize: "12px",
|
||
fontWeight: 600,
|
||
letterSpacing: "1px",
|
||
color: tokens.ink2,
|
||
}}
|
||
>
|
||
История продаж в этом доме
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontSize: "10px",
|
||
letterSpacing: "1px",
|
||
color: tokens.muted2,
|
||
}}
|
||
>
|
||
{history.houseSales.length} ЛОТА
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: houseGrid,
|
||
gap: "12px",
|
||
padding: "9px 18px",
|
||
fontSize: "9px",
|
||
letterSpacing: "1.2px",
|
||
color: tokens.muted2,
|
||
borderBottom: `1px solid ${tokens.lineSoft2}`,
|
||
}}
|
||
>
|
||
<span>ЛОТ</span>
|
||
<span>ЦЕНА НАЧ. → ПОСЛ.</span>
|
||
<span>ДАТА</span>
|
||
<span>ЭКСПОЗИЦИЯ</span>
|
||
</div>
|
||
|
||
{history.houseSales.map((row, i) => (
|
||
<div
|
||
key={i}
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: houseGrid,
|
||
gap: "12px",
|
||
padding: "13px 18px",
|
||
fontSize: "12px",
|
||
borderBottom:
|
||
i < history.houseSales.length - 1
|
||
? `1px solid ${tokens.lineSoft4}`
|
||
: undefined,
|
||
}}
|
||
>
|
||
<span style={{ color: tokens.body }}>{row.lot}</span>
|
||
<span style={{ fontFamily: tokens.font.mono, color: tokens.muted }}>
|
||
{row.priceFrom} →{" "}
|
||
<b style={{ color: tokens.ink2 }}>{row.priceTo}</b>
|
||
</span>
|
||
<span style={{ fontFamily: tokens.font.mono, color: tokens.muted }}>
|
||
{row.date}
|
||
</span>
|
||
<span style={{ fontFamily: tokens.font.mono, color: tokens.muted }}>
|
||
{row.exposure}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* ── ДКП-сделки на улице ──────────────────────────────────── */}
|
||
<div
|
||
style={{
|
||
background: tokens.surface.w55,
|
||
border: `1px solid ${tokens.line2}`,
|
||
borderRadius: "8px",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
padding: "14px 18px",
|
||
borderBottom: `1px solid ${tokens.lineSoft}`,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "flex-start",
|
||
justifyContent: "space-between",
|
||
}}
|
||
>
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: "8.5px",
|
||
letterSpacing: "2px",
|
||
color: tokens.muted2,
|
||
marginBottom: "5px",
|
||
}}
|
||
>
|
||
ПОХОЖИЕ КВАРТИРЫ · ПО ВАШЕЙ УЛИЦЕ
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: "12px",
|
||
fontWeight: 600,
|
||
letterSpacing: ".5px",
|
||
color: tokens.ink2,
|
||
}}
|
||
>
|
||
{history.dkpHeader.title}
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
textAlign: "right",
|
||
fontSize: "9.5px",
|
||
color: tokens.muted2,
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
Период:{" "}
|
||
<b style={{ color: tokens.muted }}>{history.dkpHeader.period}</b>
|
||
<br />
|
||
Источник: Росреестр + объявления
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: "10px",
|
||
color: tokens.hint,
|
||
marginTop: "8px",
|
||
}}
|
||
>
|
||
{history.dkpHeader.note}
|
||
</div>
|
||
</div>
|
||
|
||
{/* KPI band */}
|
||
<div
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "repeat(3,1fr)",
|
||
borderBottom: `1px solid ${tokens.lineSoft}`,
|
||
background: tokens.surfaceTint,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
padding: "12px 18px",
|
||
borderRight: `1px solid ${tokens.lineSoft2}`,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: "9px",
|
||
letterSpacing: "1.5px",
|
||
color: tokens.muted2,
|
||
}}
|
||
>
|
||
СДЕЛОК ЗА 24 МЕС
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontFamily: tokens.font.mono,
|
||
fontSize: "22px",
|
||
fontWeight: 300,
|
||
color: tokens.ink2,
|
||
marginTop: "4px",
|
||
}}
|
||
>
|
||
{history.dkpKpi.count}
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
padding: "12px 18px",
|
||
borderRight: `1px solid ${tokens.lineSoft2}`,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: "9px",
|
||
letterSpacing: "1.5px",
|
||
color: tokens.muted2,
|
||
}}
|
||
>
|
||
МЕДИАНА
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontFamily: tokens.font.mono,
|
||
fontSize: "22px",
|
||
fontWeight: 300,
|
||
color: tokens.ink2,
|
||
marginTop: "4px",
|
||
}}
|
||
>
|
||
{history.dkpKpi.median}{" "}
|
||
<span style={{ fontSize: "11px", color: tokens.muted }}>
|
||
₽/м²
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div style={{ padding: "12px 18px" }}>
|
||
<div
|
||
style={{
|
||
fontSize: "9px",
|
||
letterSpacing: "1.5px",
|
||
color: tokens.muted2,
|
||
}}
|
||
>
|
||
ДИАПАЗОН
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontFamily: tokens.font.mono,
|
||
fontSize: "22px",
|
||
fontWeight: 300,
|
||
color: tokens.accent,
|
||
marginTop: "4px",
|
||
}}
|
||
>
|
||
{history.dkpKpi.range}{" "}
|
||
<span style={{ fontSize: "11px", color: tokens.muted }}>
|
||
млн ₽
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Table header */}
|
||
<div
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: dkpGrid,
|
||
gap: "10px",
|
||
padding: "9px 18px",
|
||
fontSize: "9px",
|
||
letterSpacing: "1px",
|
||
color: tokens.muted2,
|
||
borderBottom: `1px solid ${tokens.lineSoft2}`,
|
||
}}
|
||
>
|
||
<span>АДРЕС</span>
|
||
<span>ПЛОЩАДЬ</span>
|
||
<span>ЦЕНА СДЕЛКИ</span>
|
||
<span>₽/М²</span>
|
||
<span>ДАТА</span>
|
||
<span>ОБЪЯВЛЕНИЕ ДО СДЕЛКИ</span>
|
||
</div>
|
||
|
||
{dkpRows.map((r, i) => (
|
||
<div
|
||
key={i}
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: dkpGrid,
|
||
gap: "10px",
|
||
padding: "11px 18px",
|
||
fontSize: "11px",
|
||
borderBottom: `1px solid ${tokens.lineSoft3}`,
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
<span style={{ color: tokens.body }}>
|
||
Екатеринбург, Академика Ландау
|
||
</span>
|
||
<span style={{ fontFamily: tokens.font.mono, color: tokens.muted }}>
|
||
{r.area}
|
||
</span>
|
||
<span style={{ fontFamily: tokens.font.mono, color: tokens.ink2 }}>
|
||
{r.price}
|
||
</span>
|
||
<span style={{ fontFamily: tokens.font.mono, color: tokens.muted }}>
|
||
{r.ppm}
|
||
</span>
|
||
<span
|
||
style={{ fontFamily: tokens.font.mono, color: tokens.muted2 }}
|
||
>
|
||
01.01.26
|
||
</span>
|
||
<span
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "7px",
|
||
fontFamily: tokens.font.mono,
|
||
fontSize: "10px",
|
||
color: tokens.muted,
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
fontSize: "8px",
|
||
letterSpacing: ".5px",
|
||
background: tokens.badgeTint,
|
||
border: `1px solid ${tokens.line2}`,
|
||
borderRadius: "3px",
|
||
padding: "1px 5px",
|
||
color: tokens.accent,
|
||
}}
|
||
>
|
||
Яндекс
|
||
</span>
|
||
{r.ask}
|
||
<span style={{ color: r.deltaColor }}>{r.delta}</span>
|
||
</span>
|
||
</div>
|
||
))}
|
||
|
||
<div
|
||
style={{
|
||
padding: "11px 18px",
|
||
fontSize: "10px",
|
||
color: tokens.hint,
|
||
background: tokens.surfaceTint,
|
||
}}
|
||
>
|
||
Показано {dkpRows.length} из {history.dkpKpi.count} сделок
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|