2026-06-23 07:55:25 +00:00
8 changed files with 166 additions and 33 deletions
--- a/frontend/src/app/site-finder/analysis/[cad]/AnalysisPageContent.tsx
+++ b/frontend/src/app/site-finder/analysis/[cad]/AnalysisPageContent.tsx
@ -119,6 +119,18 @@ export function AnalysisPageContent({ cad }: Props) {
      {/* Breadcrumb */}
      <Breadcrumb cad={cad} districtName={districtName} areaStr={areaStr} />

+      <h1
+        style={{
+          fontSize: 22,
+          fontWeight: 600,
+          margin: "0 0 12px",
+          color: "var(--fg-primary)",
+        }}
+      >
+        Анализ участка {cad}
+        {districtName && districtName !== "—" ? ` · ${districtName}` : ""}
+      </h1>
+
      {/* Controls row — horizon selector drives the analyze + forecast queries */}
      <div
        style={{
--- a/frontend/src/components/site-finder/GateVerdictBanner.tsx
+++ b/frontend/src/components/site-finder/GateVerdictBanner.tsx
@ -1,5 +1,15 @@
 "use client";
 import { useState } from "react";
+import type { ComponentType } from "react";
+import {
+  AlertOctagon,
+  AlertTriangle,
+  CheckCircle2,
+  Clock,
+  HelpCircle,
+  XCircle,
+  type LucideProps,
+} from "lucide-react";
 import type { GateVerdict, GateVerdictLabel } from "@/types/site-finder";
 import { SectionLabel } from "@/components/ui/SectionLabel";

@ -10,23 +20,28 @@ interface GateVerdictBannerProps {
 interface VerdictColor {
  bg: string;
  border: string;
-  icon: string;
+  Icon: ComponentType<LucideProps>;
  iconBg: string;
 }

 const COLOR_BY_LABEL: Record<GateVerdictLabel, VerdictColor> = {
-  Можно: { bg: "#ecfdf5", border: "#34d399", icon: "✅", iconBg: "#10b981" },
-  Нельзя: { bg: "#fef2f2", border: "#f87171", icon: "🚫", iconBg: "#ef4444" },
+  Можно: {
+    bg: "#ecfdf5",
+    border: "#34d399",
+    Icon: CheckCircle2,
+    iconBg: "#10b981",
+  },
+  Нельзя: { bg: "#fef2f2", border: "#f87171", Icon: XCircle, iconBg: "#ef4444" },
  "С ограничениями": {
    bg: "#fffbeb",
    border: "#fbbf24",
-    icon: "⚠️",
+    Icon: AlertTriangle,
    iconBg: "#f59e0b",
  },
  "Нужна проверка": {
    bg: "#f9fafb",
    border: "#9ca3af",
-    icon: "❓",
+    Icon: HelpCircle,
    iconBg: "#6b7280",
  },
 };
@ -55,14 +70,32 @@ export function GateVerdictBanner({ verdict }: GateVerdictBannerProps) {
  if (!verdict) return null;

  const color = COLOR_BY_LABEL[verdict.verdict_label];
+  const Icon = color.Icon;
  const hasDetails = verdict.blockers.length > 0 || verdict.warnings.length > 0;

+  const iconSx = { flexShrink: 0 } as const;
  const sourceHint =
-    verdict.source === "nspd_dump_partial"
-      ? "⏱ устарели"
-      : verdict.source === "no_data"
-        ? "❓ нет данных"
-        : "🟢 свежие";
+    verdict.source === "nspd_dump_partial" ? (
+      <>
+        <Clock size={14} strokeWidth={1.5} aria-hidden style={iconSx} />
+        устарели
+      </>
+    ) : verdict.source === "no_data" ? (
+      <>
+        <HelpCircle size={14} strokeWidth={1.5} aria-hidden style={iconSx} />
+        нет данных
+      </>
+    ) : (
+      <>
+        <CheckCircle2
+          size={14}
+          strokeWidth={1.5}
+          aria-hidden
+          style={{ ...iconSx, color: "var(--success, #0A7A3A)" }}
+        />
+        свежие
+      </>
+    );

  const summaryParts: string[] = [];
  if (verdict.blockers.length > 0)
@ -94,11 +127,10 @@ export function GateVerdictBanner({ verdict }: GateVerdictBannerProps) {
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
-            fontSize: 20,
            flexShrink: 0,
          }}
        >
-          {color.icon}
+          <Icon size={20} strokeWidth={1.5} aria-hidden />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: "#111827" }}>
@ -107,7 +139,15 @@ export function GateVerdictBanner({ verdict }: GateVerdictBannerProps) {
          <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>
            {summaryText}
            {" · "}
-            <span title={SOURCE_LABEL[verdict.source] ?? verdict.source}>
+            <span
+              title={SOURCE_LABEL[verdict.source] ?? verdict.source}
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 4,
+                verticalAlign: "middle",
+              }}
+            >
              {sourceHint}
            </span>
          </div>
@ -142,7 +182,23 @@ export function GateVerdictBanner({ verdict }: GateVerdictBannerProps) {
        >
          {verdict.blockers.length > 0 && (
            <div style={{ marginBottom: 12 }}>
-              <SectionLabel>🚫 Блокеры</SectionLabel>
+              <SectionLabel>
+                <span
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 6,
+                  }}
+                >
+                  <AlertOctagon
+                    size={16}
+                    strokeWidth={1.5}
+                    aria-hidden
+                    style={{ flexShrink: 0, color: "var(--danger, #B3261E)" }}
+                  />
+                  Блокеры
+                </span>
+              </SectionLabel>
              <ul
                style={{
                  marginTop: 4,
@ -161,7 +217,23 @@ export function GateVerdictBanner({ verdict }: GateVerdictBannerProps) {
          )}
          {verdict.warnings.length > 0 && (
            <div style={{ marginBottom: 12 }}>
-              <SectionLabel>⚠️ Предупреждения</SectionLabel>
+              <SectionLabel>
+                <span
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 6,
+                  }}
+                >
+                  <AlertTriangle
+                    size={16}
+                    strokeWidth={1.5}
+                    aria-hidden
+                    style={{ flexShrink: 0, color: "var(--warn, #9A6700)" }}
+                  />
+                  Предупреждения
+                </span>
+              </SectionLabel>
              <ul
                style={{
                  marginTop: 4,
--- a/frontend/src/components/site-finder/GeotechRiskBlock.tsx
+++ b/frontend/src/components/site-finder/GeotechRiskBlock.tsx
@ -1,5 +1,6 @@
 "use client";

+import { AlertTriangle, Snowflake } from "lucide-react";
 import type { GeotechRisk } from "@/types/site-finder";

 interface Props {
@ -93,7 +94,12 @@ export function GeotechRiskBlock({ risk }: Props) {
            color: "#374151",
          }}
        >
-          <span>🟡</span>
+          <Snowflake
+            size={16}
+            strokeWidth={1.5}
+            aria-hidden
+            style={{ flexShrink: 0, color: "#92400e" }}
+          />
          <span>Вечная мерзлота — особые фундаменты</span>
        </div>
      )}
@ -114,7 +120,12 @@ export function GeotechRiskBlock({ risk }: Props) {
            gap: 6,
          }}
        >
-          <span>⚠</span>
+          <AlertTriangle
+            size={16}
+            strokeWidth={1.5}
+            aria-hidden
+            style={{ flexShrink: 0 }}
+          />
          <span>
            {risk.industrial_within_500m} промзон(ы) в &lt;500м (риск
            загрязнения почв)
--- a/frontend/src/components/site-finder/HydrologyBlock.tsx
+++ b/frontend/src/components/site-finder/HydrologyBlock.tsx
@ -1,16 +1,21 @@
 "use client";

+import type { ComponentType } from "react";
+import { AlertTriangle, Droplet, Waves, type LucideProps } from "lucide-react";
 import type { Hydrology, HydrologyNearest } from "@/types/site-finder";

 interface Props {
  hydrology: Hydrology;
 }

-const SUBTYPE_ICON: Record<string, string> = {
-  river: "🏞",
-  stream: "💦",
-  lake_or_pond: "🪷",
-  canal: "🚣",
+// Decorative water glyph per subtype — the text label already names the body
+// (река / ручей / озеро / канал), so the icon is aria-hidden. Lucide has no
+// distinct lake/canal glyph; flowing bodies use Waves, the rest use Droplet.
+const SUBTYPE_ICON: Record<string, ComponentType<LucideProps>> = {
+  river: Waves,
+  stream: Droplet,
+  lake_or_pond: Waves,
+  canal: Waves,
 };

 function subtypeLabel(subtype: HydrologyNearest["subtype"]): string {
@ -63,7 +68,12 @@ export function HydrologyBlock({ hydrology }: Props) {
            gap: 6,
          }}
        >
-          <span>⚠</span>
+          <AlertTriangle
+            size={16}
+            strokeWidth={1.5}
+            aria-hidden
+            style={{ flexShrink: 0 }}
+          />
          <span>Возможная пойма — река/канал в &lt;200м</span>
        </div>
      )}
@ -76,7 +86,7 @@ export function HydrologyBlock({ hydrology }: Props) {
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          {top5.map((item, i) => {
-            const icon = SUBTYPE_ICON[item.subtype ?? ""] ?? "💧";
+            const Icon = SUBTYPE_ICON[item.subtype ?? ""] ?? Droplet;
            const label = subtypeLabel(item.subtype);
            const name = item.name ?? "б/н";
            return (
@ -90,7 +100,12 @@ export function HydrologyBlock({ hydrology }: Props) {
                  color: "#374151",
                }}
              >
-                <span>{icon}</span>
+                <Icon
+                  size={16}
+                  strokeWidth={1.5}
+                  aria-hidden
+                  style={{ flexShrink: 0, color: "#0369a1" }}
+                />
                <span>
                  {name} {label} — {Math.round(item.distance_m)} м
                </span>
--- a/frontend/src/components/site-finder/OverviewTab.tsx
+++ b/frontend/src/components/site-finder/OverviewTab.tsx
@ -1,5 +1,6 @@
 "use client";

+import { AlertTriangle } from "lucide-react";
 import type { FeatureCollection } from "geojson";
 import type { ParcelAnalysis } from "@/types/site-finder";
 import { SectionLabel } from "@/components/ui/SectionLabel";
@ -185,13 +186,24 @@ export function OverviewTab({ data, onIsochronesResult }: Props) {
            {data.utilities.power_line_охранная_зона_flag && (
              <div
                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
                  fontSize: 12,
                  color: "#b3261e",
                  fontWeight: 600,
                  marginTop: 4,
                }}
              >
-                ⚠ Охранная зона ЛЭП — капитальное строительство запрещено
+                <AlertTriangle
+                  size={16}
+                  strokeWidth={1.5}
+                  aria-hidden
+                  style={{ flexShrink: 0 }}
+                />
+                <span>
+                  Охранная зона ЛЭП — капитальное строительство запрещено
+                </span>
              </div>
            )}
          </div>
@ -212,7 +224,12 @@ export function OverviewTab({ data, onIsochronesResult }: Props) {
            gap: 8,
          }}
        >
-          <span style={{ fontSize: 16 }}>⚠</span>
+          <AlertTriangle
+            size={16}
+            strokeWidth={1.5}
+            aria-hidden
+            style={{ flexShrink: 0 }}
+          />
          <span>Трамвай в {nearestTram} м — возможный источник шума</span>
        </div>
      )}
--- a/frontend/src/components/site-finder/analysis/ForecastChart.tsx
+++ b/frontend/src/components/site-finder/analysis/ForecastChart.tsx
@ -61,11 +61,15 @@ const VIZ: Record<ScenarioKey, string> = {

 // Single-line fallback colour (ui-tokens: одиночная линия — #374151).
 const SINGLE_LINE = "#374151";
-// Prediction / forecast (dashed) — --prediction-line.
-const PREDICTION_LINE = "#0EA5E9";
-// Axis chrome.
-const FG_SECONDARY = "#5B6066";
-const BORDER_STRONG = "#D1D5DB";
+// Chrome colours below are intentionally raw hex, NOT var(--token), for the same
+// reason as VIZ above: ChartShell renders via echarts-for-react with the default
+// CANVAS renderer (no opts.renderer:"svg"), and the canvas 2D context does not
+// resolve CSS custom properties — `var(--x)` would paint as transparent/black.
+// Values mirror ui-tokens.md exactly: --prediction-line, --fg-secondary,
+// --border-strong. Keep in sync with ui-tokens.md by hand.
+const PREDICTION_LINE = "#0EA5E9"; // --prediction-line
+const FG_SECONDARY = "#5B6066"; // --fg-secondary
+const BORDER_STRONG = "#D1D5DB"; // --border-strong

 // ── Tooltip row type (echarts-for-react gives loose params; narrow ourselves) ──
 interface TooltipParam {
--- a/frontend/src/components/site-finder/analysis/Section2NetworksUtilities.tsx
+++ b/frontend/src/components/site-finder/analysis/Section2NetworksUtilities.tsx
@ -804,7 +804,8 @@ export function Section2NetworksUtilities({ cad }: Props) {
          />
          <span>
            Участок находится в охранной зоне ЛЭП ≥35 кВ. Капитальное
-            строительство в ОЗ запрещено (СП 36.13330, ЗОУИТ тип 5).
+            строительство в охранной зоне (ОЗ) запрещено (СП 36.13330). Участок
+            в зоне с особыми условиями использования территорий (ЗОУИТ), тип 5.
          </span>
        </div>
      )}
--- a/frontend/src/components/site-finder/analysis/Section4Estimate.tsx
+++ b/frontend/src/components/site-finder/analysis/Section4Estimate.tsx
@ -219,6 +219,7 @@ export function Section4Estimate({ cad }: Props) {
          }}
        >
          <div
+            title="Зоны с особыми условиями использования территорий — охранные зоны инженерной инфраструктуры (ЛЭП, газопровод и т.д.)"
            style={{
              fontSize: 12,
              fontWeight: 600,