Concept (Generative Design)
-- TODO Stage 1a: polygon import (GeoJSON / Leaflet draw) + parameter form - + result tabs. -
-TODO Stage 1b: render 3 variants on the map with colored buildings.
-- TODO Stage 1c: TEAP table, financial form, PDF/Excel/DXF download - buttons. -
++ Концепция застройки · генеративный дизайн +
+
+
+
+
+
+ {/* Results */}
+ {concept.isError && (
+ + Задайте границы участка и параметры проекта — движок предложит три + стратегии размещения застройки с расчётом ТЭП и финансовой модели. +
+ + {/* Input row: parcel boundary (left) + parameters (right) */} +
+ {/* Parcel boundary */}
+
+ setMode("draw")}
+ icon={ setMode("cadastre")}
+ icon={
+ }
+ >
+ {mode === "cadastre" && (
+
+
+ )}
+
+ + {cadastreGeom.error.message} +
+ )} +
+ {polygon
+ ? `Участок задан · площадь ≈ ${ha(parcelAreaSqm)} га`
+ : "Участок не задан."}
+
+
+
+ {/* Parameters */}
+ + Не удалось рассчитать концепции: {concept.error.message} +
++ Движок рассчитывает варианты размещения… +
+
+
+ )}
+
+
+ {}}
+ />
+
+
+ {/* Toolbar — primary draw + clear; overlays the map top-left. */}
+
+ );
+}
diff --git a/frontend/src/components/concept/ConceptExportButtons.tsx b/frontend/src/components/concept/ConceptExportButtons.tsx
new file mode 100644
index 00000000..e07453f3
--- /dev/null
+++ b/frontend/src/components/concept/ConceptExportButtons.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+/**
+ * ConceptExportButtons — export controls for one concept variant.
+ *
+ * The Stage-1a backend contract (`backend/app/api/v1/concepts.py`) ships only
+ * `POST /concepts`; no export endpoint exists yet. So:
+ * - GeoJSON (buildings) + CSV (ТЭП + финмодель) are generated client-side
+ * here, re-using `triggerDownload` and the CSV-injection-safe escaping from
+ * the Site Finder ExportButtons.
+ * - DXF / PDF are produced server-side (ezdxf / WeasyPrint per the stack).
+ * We POST the variant to the documented `/api/v1/concepts/export` path and
+ * download the blob; until that endpoint lands the button reports a clear
+ * "не готово" message instead of failing silently.
+ */
+
+import { useState } from "react";
+import { Download, FileCode, FileText, Map as MapIcon } from "lucide-react";
+
+import { API_BASE_URL } from "@/lib/api";
+import { triggerDownload } from "@/lib/download";
+import { STRATEGY_LABELS, type ConceptVariant } from "@/lib/concept-api";
+
+// ── CSV helpers (mirrors site-finder ExportButtons) ───────────────────────────
+
+function escapeCsvCell(cell: string): string {
+ // CSV-injection mitigation (OWASP / CWE-1236): cells starting with =, +, -, @,
+ // tab, or CR are evaluated as formulas by Excel/Calc/Sheets. Prefix dangerous
+ // starters with a leading apostrophe so the spreadsheet treats them as text.
+ let safe = cell;
+ if (/^[=+\-@\t\r]/.test(safe)) {
+ safe = "'" + safe;
+ }
+ const needsQuotes = /[",\n\r]/.test(safe);
+ if (needsQuotes) {
+ return `"${safe.replace(/"/g, '""')}"`;
+ }
+ return safe;
+}
+
+function buildCsvRows(variant: ConceptVariant): string[][] {
+ const t = variant.teap;
+ const f = variant.financial;
+ return [
+ ["Показатель", "Значение"],
+ ["Стратегия", STRATEGY_LABELS[variant.strategy]],
+ ["Площадь застройки, м²", String(t.built_area_sqm)],
+ ["Общая площадь, м²", String(t.total_floor_area_sqm)],
+ ["Жилая площадь, м²", String(t.residential_area_sqm)],
+ ["Квартир, шт", String(t.apartments_count)],
+ ["Плотность", String(t.density)],
+ ["Машино-мест", String(t.parking_spaces)],
+ ["Выручка, ₽", String(f.revenue_rub)],
+ ["Затраты, ₽", String(f.cost_rub)],
+ ["Валовая прибыль, ₽", String(f.gross_margin_rub)],
+ ["IRR", String(f.irr)],
+ ];
+}
+
+function generateCsvBlob(rows: string[][]): Blob {
+ const csv = rows.map((row) => row.map(escapeCsvCell).join(",")).join("\r\n");
+ // UTF-8 BOM so Excel renders Cyrillic correctly.
+ return new Blob(["" + csv], { type: "text/csv;charset=utf-8" });
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+const today = () => new Date().toISOString().slice(0, 10);
+
+interface Props {
+ variant: ConceptVariant;
+}
+
+export function ConceptExportButtons({ variant }: Props) {
+ const [serverLoading, setServerLoading] = useState<"dxf" | "pdf" | null>(
+ null,
+ );
+ const [error, setError] = useState
+
+ {polygon && (
+
+ )}
+
+
+
+ );
+}
diff --git a/frontend/src/components/concept/ConceptParamsForm.tsx b/frontend/src/components/concept/ConceptParamsForm.tsx
new file mode 100644
index 00000000..95117f61
--- /dev/null
+++ b/frontend/src/components/concept/ConceptParamsForm.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+/**
+ * ConceptParamsForm — controlled form for the ConceptInput parameters
+ * (housing_class / target_floors / development_type / land_cost_rub). The
+ * parcel polygon is collected separately by the map; this form owns only the
+ * scalar fields and the submit CTA. Submit is disabled until the parent
+ * confirms a polygon is present (`hasPolygon`).
+ */
+
+import { Sparkles } from "lucide-react";
+
+import {
+ DEVELOPMENT_TYPE_LABELS,
+ HOUSING_CLASS_LABELS,
+ type DevelopmentType,
+ type HousingClass,
+} from "@/lib/concept-api";
+
+export interface ConceptParams {
+ housing_class: HousingClass;
+ target_floors: number;
+ development_type: DevelopmentType;
+ land_cost_rub: number | null;
+}
+
+export const DEFAULT_PARAMS: ConceptParams = {
+ housing_class: "comfort",
+ target_floors: 9,
+ development_type: "mid_rise",
+ land_cost_rub: null,
+};
+
+const fieldLabelStyle: React.CSSProperties = {
+ display: "block",
+ fontSize: 12,
+ fontWeight: 500,
+ textTransform: "uppercase",
+ letterSpacing: "0.04em",
+ color: "var(--fg-secondary)",
+ marginBottom: 6,
+};
+
+const controlStyle: React.CSSProperties = {
+ width: "100%",
+ padding: "8px 12px",
+ fontSize: 14,
+ border: "1px solid var(--border-strong)",
+ borderRadius: 8,
+ outline: "none",
+ background: "var(--bg-card)",
+ color: "var(--fg-primary)",
+};
+
+interface Props {
+ params: ConceptParams;
+ onChange: (params: ConceptParams) => void;
+ onSubmit: () => void;
+ hasPolygon: boolean;
+ isPending: boolean;
+}
+
+export function ConceptParamsForm({
+ params,
+ onChange,
+ onSubmit,
+ hasPolygon,
+ isPending,
+}: Props) {
+ function handleSubmit(e: React.FormEvent) {
+ e.preventDefault();
+ if (!hasPolygon || isPending) return;
+ onSubmit();
+ }
+
+ const disabled = !hasPolygon || isPending;
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/concept/ConceptResultMap.tsx b/frontend/src/components/concept/ConceptResultMap.tsx
new file mode 100644
index 00000000..efd0daab
--- /dev/null
+++ b/frontend/src/components/concept/ConceptResultMap.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+/**
+ * ConceptResultMap — renders one variant's building placement: the parcel
+ * polygon (outline) + the generated buildings FeatureCollection (filled), over
+ * an OSM base. Re-uses the react-leaflet + GeoJSON pattern from SiteMap.
+ * Lazy-mounted (ssr:false) by the parent — Leaflet touches `window`.
+ */
+
+import { useEffect } from "react";
+import { MapContainer, TileLayer, GeoJSON, useMap } from "react-leaflet";
+import type { FeatureCollection, Polygon, Position } from "geojson";
+import L from "leaflet";
+
+import "leaflet/dist/leaflet.css";
+
+// ── Bounds helper ─────────────────────────────────────────────────────────────
+
+function ringBounds(rings: Position[][]): L.LatLngBoundsExpression | null {
+ let minLat = Infinity;
+ let maxLat = -Infinity;
+ let minLon = Infinity;
+ let maxLon = -Infinity;
+ for (const ring of rings) {
+ for (const [lon, lat] of ring) {
+ if (lat < minLat) minLat = lat;
+ if (lat > maxLat) maxLat = lat;
+ if (lon < minLon) minLon = lon;
+ if (lon > maxLon) maxLon = lon;
+ }
+ }
+ if (!Number.isFinite(minLat)) return null;
+ return [
+ [minLat, minLon],
+ [maxLat, maxLon],
+ ];
+}
+
+interface FitBoundsProps {
+ bounds: L.LatLngBoundsExpression | null;
+}
+
+// react-leaflet does not auto-fit to data; do it imperatively once mounted.
+function FitBounds({ bounds }: FitBoundsProps) {
+ const map = useMap();
+ useEffect(() => {
+ if (bounds) {
+ map.fitBounds(bounds, { padding: [24, 24] });
+ }
+ }, [map, bounds]);
+ return null;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+interface Props {
+ parcel: Polygon;
+ buildings: FeatureCollection;
+ /** Keying makes react-leaflet remount the buildings layer on variant switch. */
+ variantKey: string;
+ height?: number;
+}
+
+export function ConceptResultMap({
+ parcel,
+ buildings,
+ variantKey,
+ height = 360,
+}: Props) {
+ const bounds = ringBounds(parcel.coordinates as Position[][]);
+ const hasBuildings = buildings.features.length > 0;
+
+ return (
+
+
+
+
+
+
+ {error && (
+ + {error} +
+ )} +
+
+
+
+ {!hasBuildings && (
+
+ );
+}
diff --git a/frontend/src/components/concept/ConceptVariantsResult.tsx b/frontend/src/components/concept/ConceptVariantsResult.tsx
new file mode 100644
index 00000000..29ef3e16
--- /dev/null
+++ b/frontend/src/components/concept/ConceptVariantsResult.tsx
@@ -0,0 +1,290 @@
+"use client";
+
+/**
+ * ConceptVariantsResult — variant tabs + per-variant placement map, ТЭП KPIs,
+ * financial model, and export controls. Driven by the ConceptOutput returned
+ * from POST /concepts. The map is lazy-mounted (Leaflet uses `window`).
+ */
+
+import dynamic from "next/dynamic";
+import { useState } from "react";
+
+import { KpiCard } from "@/components/analytics/KpiCard";
+import { Section } from "@/components/analytics/Section";
+import { Badge } from "@/components/ui/Badge";
+import {
+ STRATEGY_HINTS,
+ STRATEGY_LABELS,
+ type ConceptVariant,
+} from "@/lib/concept-api";
+import type { Polygon } from "geojson";
+
+import { ConceptExportButtons } from "./ConceptExportButtons";
+
+const ConceptResultMap = dynamic(
+ () =>
+ import("./ConceptResultMap").then((m) => ({ default: m.ConceptResultMap })),
+ {
+ ssr: false,
+ loading: () => (
+
+ Движок ещё не вернул геометрию зданий для этого варианта.
+
+ )}
+
+ Загрузка карты…
+
+ ),
+ },
+);
+
+// ── Formatters (ru microcopy) ─────────────────────────────────────────────────
+
+const nf = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 });
+
+/** Compact ₽ for headline figures: "2.4 млрд ₽", "145 млн ₽". */
+function formatMoneyCompact(rub: number): string {
+ const abs = Math.abs(rub);
+ if (abs >= 1e9) return `${(rub / 1e9).toFixed(1)} млрд ₽`;
+ if (abs >= 1e6) return `${(rub / 1e6).toFixed(0)} млн ₽`;
+ return `${nf.format(Math.round(rub))} ₽`;
+}
+
+function formatInt(n: number): string {
+ return nf.format(Math.round(n));
+}
+
+function formatPct(fraction: number): string {
+ return `${(fraction * 100).toFixed(1)}%`;
+}
+
+// ── Variant panel ─────────────────────────────────────────────────────────────
+
+interface PanelProps {
+ parcel: Polygon;
+ variant: ConceptVariant;
+}
+
+function VariantPanel({ parcel, variant }: PanelProps) {
+ const { teap, financial } = variant;
+ const marginPositive =
+ financial.gross_margin_rub > 0
+ ? true
+ : financial.gross_margin_rub < 0
+ ? false
+ : null;
+
+ return (
+
+ {/* Headline-bar — one-sentence JTBD verdict for the variant. */}
+
+
+
+ {/* ТЭП — KPI grid */}
+
+
+
+ {/* Финмодель */}
+ }
+ >
+
+ );
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+interface Props {
+ parcel: Polygon;
+ variants: ConceptVariant[];
+}
+
+export function ConceptVariantsResult({ parcel, variants }: Props) {
+ const [active, setActive] = useState(0);
+
+ if (variants.length === 0) {
+ return (
+
+
+
+ {/* Placement map */}
+
+ {STRATEGY_LABELS[variant.strategy]}:{" "}
+ {formatInt(teap.total_floor_area_sqm)} м² надземной площади ·{" "}
+ {formatInt(teap.apartments_count)} квартир · валовая прибыль{" "}
+ {formatMoneyCompact(financial.gross_margin_rub)}
+
+
+ {STRATEGY_HINTS[variant.strategy]} IRR {formatPct(financial.irr)} ·
+ плотность {teap.density.toLocaleString("ru-RU")} м²/га.
+
+
+
+
+
+
+ + Движок не вернул ни одного варианта застройки. +
+ ); + } + + const activeVariant = variants[Math.min(active, variants.length - 1)]; + + return ( +
+ {/* Variant tabs */}
+
+ );
+}
diff --git a/frontend/src/lib/concept-api.ts b/frontend/src/lib/concept-api.ts
new file mode 100644
index 00000000..b65bb48b
--- /dev/null
+++ b/frontend/src/lib/concept-api.ts
@@ -0,0 +1,195 @@
+/**
+ * Concept (Generative Design) API — TanStack Query wrappers.
+ *
+ * Contract mirrors `backend/app/schemas/concept.py` exactly (Stage 1a frozen
+ * interface). Types are defined inline rather than via `npm run codegen`
+ * because codegen targets a live OpenAPI on localhost:8000 (`src/lib/
+ * api-types.ts`) which is unreachable in this env — same approach as the
+ * parcel-chat contract in `site-finder-api.ts`.
+ *
+ * Endpoint: POST /api/v1/concepts → ConceptOutput.
+ * Export endpoints (DXF/PDF) are not in the Stage-1a contract yet; the export
+ * buttons fall back to client-side GeoJSON/CSV generation and probe the
+ * documented `/concepts/{...}/export` path opportunistically (see
+ * ConceptExportButtons).
+ */
+
+import { useMutation } from "@tanstack/react-query";
+import type { Feature, FeatureCollection, Polygon } from "geojson";
+
+import { apiFetch, apiFetchWithStatus } from "@/lib/api";
+
+// ── Input contract (ConceptInput) ───────────────────────────────────────────
+
+export type HousingClass = "econom" | "comfort" | "business";
+export type DevelopmentType = "spot" | "mid_rise" | "high_rise";
+export type ConceptStrategy = "max_area" | "max_insolation" | "balanced";
+
+export interface ConceptInput {
+ /** GeoJSON Polygon of the parcel (WGS84 / EPSG:4326). */
+ parcel_geojson: Polygon;
+ housing_class: HousingClass;
+ /** Целевая этажность 1–30. */
+ target_floors: number;
+ development_type: DevelopmentType;
+ /** Стоимость участка (₽) — опционально, для финмодели. */
+ land_cost_rub?: number | null;
+}
+
+// ── Output contract (ConceptOutput) ─────────────────────────────────────────
+
+/** Технико-экономические показатели (ТЭП). */
+export interface Teap {
+ built_area_sqm: number;
+ total_floor_area_sqm: number;
+ residential_area_sqm: number;
+ apartments_count: number;
+ density: number;
+ parking_spaces: number;
+}
+
+export interface FinancialModel {
+ revenue_rub: number;
+ cost_rub: number;
+ gross_margin_rub: number;
+ irr: number;
+}
+
+export interface ConceptVariant {
+ strategy: ConceptStrategy;
+ /** FeatureCollection полигонов зданий (WGS84). */
+ buildings_geojson: FeatureCollection;
+ teap: Teap;
+ financial: FinancialModel;
+}
+
+export interface ConceptOutput {
+ variants: ConceptVariant[];
+}
+
+// ── Strategy display metadata ────────────────────────────────────────────────
+
+export const STRATEGY_LABELS: Record
+ {variants.map((v, i) => {
+ const isActive = i === active;
+ return (
+
+ );
+ })}
+
+
+