2026-05-14 20:55:38 +00:00
14 changed files with 162 additions and 302 deletions
--- a/frontend/src/app/admin/leads/page.tsx
+++ b/frontend/src/app/admin/leads/page.tsx
@ -6,6 +6,9 @@ import { useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";

 import { apiFetch } from "@/lib/api";
+import { cardStyle as cardStyleBase } from "@/lib/adminStyles";
+
+const cardStyle = { ...cardStyleBase, marginTop: 16 };

 const ReactECharts = dynamic(() => import("echarts-for-react"), { ssr: false });

@ -717,13 +720,6 @@ function StatusBadge({ status }: { status: string | null }) {
  );
 }

-const cardStyle = {
-  background: "#fff",
-  border: "1px solid #e6e8ec",
-  borderRadius: 12,
-  padding: 20,
-  marginTop: 16,
-};
 const inputStyle = {
  padding: "8px 10px",
  border: "1px solid #d1d5db",
--- a/frontend/src/app/admin/scrape/all/page.tsx
+++ b/frontend/src/app/admin/scrape/all/page.tsx
@ -4,6 +4,7 @@ import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";

 import { apiFetch } from "@/lib/api";
+import { cardStyle, inputStyle, labelStyle, td, th } from "@/lib/adminStyles";
 import { BulkGeoPanel } from "@/components/admin/BulkGeoPanel";
 import { JobSettingsPanel } from "@/components/admin/JobSettingsPanel";

@ -498,33 +499,11 @@ function Stat({
  );
 }

-const cardStyle = {
-  background: "#fff",
-  border: "1px solid #e6e8ec",
-  borderRadius: 12,
-  padding: 20,
-};
 const sectionTitle = {
  margin: "0 0 12px",
  fontSize: 16,
  fontWeight: 600 as const,
 };
-const labelStyle = {
-  display: "block",
-  fontSize: 12,
-  color: "#5b6066",
-  marginBottom: 4,
-  textTransform: "uppercase" as const,
-  letterSpacing: 0.4,
-};
-const inputStyle = {
-  padding: "8px 10px",
-  border: "1px solid #d1d5db",
-  borderRadius: 6,
-  fontSize: 14,
-  width: "100%",
-  boxSizing: "border-box" as const,
-};
 const filterTab = {
  padding: "6px 14px",
  border: "none",
@ -547,10 +526,3 @@ const tableStyle = {
  borderCollapse: "collapse" as const,
  fontSize: 12,
 };
-const th = {
-  padding: "8px 10px",
-  textAlign: "left" as const,
-  fontWeight: 600 as const,
-  borderBottom: "1px solid #e6e8ec",
-};
-const td = { padding: "8px 10px" };
--- a/frontend/src/app/admin/scrape/geo/page.tsx
+++ b/frontend/src/app/admin/scrape/geo/page.tsx
@ -5,6 +5,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";

 import ScrapeLogsPanel from "@/components/admin/ScrapeLogsPanel";
 import { apiFetch } from "@/lib/api";
+import { cardStyle, inputStyle, labelStyle, td, th } from "@/lib/adminStyles";

 interface GeoJob {
  job_id: number;
@ -551,33 +552,11 @@ export default function GeoScrapeAdminPage() {
  );
 }

-const cardStyle = {
-  background: "#fff",
-  border: "1px solid #e6e8ec",
-  borderRadius: 12,
-  padding: 20,
-};
 const sectionTitle = {
  margin: "0 0 12px",
  fontSize: 16,
  fontWeight: 600 as const,
 };
-const labelStyle = {
-  display: "block",
-  fontSize: 12,
-  color: "#5b6066",
-  marginBottom: 4,
-  textTransform: "uppercase" as const,
-  letterSpacing: 0.4,
-};
-const inputStyle = {
-  padding: "8px 10px",
-  border: "1px solid #d1d5db",
-  borderRadius: 6,
-  fontSize: 14,
-  width: "100%",
-  boxSizing: "border-box" as const,
-};
 const primaryBtn = {
  padding: "10px 18px",
  background: "#1d4ed8",
@ -602,10 +581,3 @@ const tableStyle = {
  borderCollapse: "collapse" as const,
  fontSize: 12,
 };
-const th = {
-  padding: "8px 10px",
-  textAlign: "left" as const,
-  fontWeight: 600 as const,
-  borderBottom: "1px solid #e6e8ec",
-};
-const td = { padding: "8px 10px" };
--- a/frontend/src/app/admin/scrape/objective/page.tsx
+++ b/frontend/src/app/admin/scrape/objective/page.tsx
@ -5,6 +5,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";

 import ScrapeLogsPanel from "@/components/admin/ScrapeLogsPanel";
 import { apiFetch } from "@/lib/api";
+import { cardStyle, inputStyle, labelStyle, td, th } from "@/lib/adminStyles";

 interface ObjectiveRunRow {
  run_id: number;
@ -825,33 +826,11 @@ function Stat({ label, value }: { label: string; value: number }) {

 // ── Styles ──────────────────────────────────────────────────────────────────

-const cardStyle = {
-  background: "#fff",
-  border: "1px solid #e6e8ec",
-  borderRadius: 12,
-  padding: 20,
-};
 const sectionTitle = {
  margin: "0 0 12px",
  fontSize: 16,
  fontWeight: 600 as const,
 };
-const labelStyle = {
-  display: "block",
-  fontSize: 12,
-  color: "#5b6066",
-  marginBottom: 4,
-  textTransform: "uppercase" as const,
-  letterSpacing: 0.4,
-};
-const inputStyle = {
-  padding: "8px 10px",
-  border: "1px solid #d1d5db",
-  borderRadius: 6,
-  fontSize: 14,
-  width: "100%",
-  boxSizing: "border-box" as const,
-};
 const primaryBtn = {
  padding: "10px 18px",
  background: "#1d4ed8",
@ -871,10 +850,3 @@ const secondaryBtn = {
  fontSize: 13,
  cursor: "pointer",
 };
-const th = {
-  padding: "8px 10px",
-  textAlign: "left" as const,
-  fontWeight: 600 as const,
-  borderBottom: "1px solid #e6e8ec",
-};
-const td = { padding: "8px 10px" };
--- a/frontend/src/app/admin/scrape/page.tsx
+++ b/frontend/src/app/admin/scrape/page.tsx
@ -4,6 +4,7 @@ import { useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";

 import { apiFetch } from "@/lib/api";
+import { cardStyle, inputStyle, labelStyle, td, th } from "@/lib/adminStyles";

 interface RunRow {
  run_id: number;
@ -975,28 +976,6 @@ export default function ScrapeAdminPage() {
  );
 }

-const cardStyle = {
-  background: "#fff",
-  border: "1px solid #e6e8ec",
-  borderRadius: 12,
-  padding: 20,
-};
-const labelStyle = {
-  display: "block",
-  fontSize: 12,
-  color: "#5b6066",
-  marginBottom: 4,
-  textTransform: "uppercase" as const,
-  letterSpacing: 0.4,
-};
-const inputStyle = {
-  padding: "8px 10px",
-  border: "1px solid #d1d5db",
-  borderRadius: 6,
-  fontSize: 14,
-  width: "100%",
-  boxSizing: "border-box" as const,
-};
 const primaryBtn = {
  padding: "10px 18px",
  background: "#1d4ed8",
@ -1031,10 +1010,3 @@ const queueTable = {
  fontSize: 13,
  marginBottom: 4,
 };
-const th = {
-  padding: "8px 10px",
-  textAlign: "left" as const,
-  fontWeight: 600,
-  borderBottom: "1px solid #e6e8ec",
-};
-const td = { padding: "8px 10px" };
--- a/frontend/src/app/docs/b2b-channels/renderMarkdown.ts
+++ b/frontend/src/app/docs/b2b-channels/renderMarkdown.ts
@ -13,6 +13,24 @@ function escapeHtml(s: string): string {
    .replace(/'/g, "&#39;");
 }

+/**
+ * Allow only safe URL schemes in rendered links.
+ * Blocks javascript:, data:, vbscript:, file:, etc.
+ */
+function safeUrl(url: string): string {
+  const trimmed = url.trim();
+  if (
+    trimmed.startsWith("https://") ||
+    trimmed.startsWith("http://") ||
+    trimmed.startsWith("/") ||
+    trimmed.startsWith("#") ||
+    trimmed.startsWith("mailto:")
+  ) {
+    return trimmed;
+  }
+  return "#";
+}
+
 function inlineMd(line: string): string {
  // escape first, then re-introduce safe markup
  let html = escapeHtml(line);
@ -20,10 +38,21 @@ function inlineMd(line: string): string {
  html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
  // bold **...**
  html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
-  // links [text](url)
+  // links [text](url) — URL is validated before being placed in href.
+  // Note: at this point `html` is already HTML-escaped, so we must unescape
+  // the captured URL before passing through safeUrl, then re-escape for href.
  html = html.replace(
    /\[([^\]]+)\]\(([^)]+)\)/g,
-    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
+    (_, text: string, escapedUrl: string) => {
+      const rawUrl = escapedUrl
+        .replace(/&amp;/g, "&")
+        .replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">")
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'");
+      const href = escapeHtml(safeUrl(rawUrl));
+      return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+    },
  );
  // checkboxes
  html = html.replace(
--- a/frontend/src/components/admin/BulkGeoPanel.tsx
+++ b/frontend/src/components/admin/BulkGeoPanel.tsx
@ -4,6 +4,7 @@ import { useState } from "react";
 import { useMutation } from "@tanstack/react-query";

 import { apiFetch } from "@/lib/api";
+import { cardStyle } from "@/lib/adminStyles";

 // ── Types ────────────────────────────────────────────────────────────────────

@ -261,13 +262,6 @@ export function BulkGeoPanel({ token }: { token: string }) {

 // ── Styles ──────────────────────────────────────────────────────────────────

-const cardStyle = {
-  background: "#fff",
-  border: "1px solid #e6e8ec",
-  borderRadius: 12,
-  padding: 20,
-};
-
 const sectionTitle = {
  margin: "0 0 8px",
  fontSize: 16,
--- a/frontend/src/components/site-finder/EnvironmentTab.tsx
+++ b/frontend/src/components/site-finder/EnvironmentTab.tsx
@ -7,6 +7,8 @@ import type {
  ParcelAnalysisWind,
  ParcelAnalysisWeather,
 } from "@/types/site-finder";
+import { SectionLabel } from "@/components/ui/SectionLabel";
+import { EmptyState } from "@/components/ui/EmptyState";
 import { SeasonalWeatherBlock } from "./SeasonalWeatherBlock";
 import { HydrologyBlock } from "./HydrologyBlock";

@ -424,18 +426,9 @@ export function EnvironmentTab({ data }: Props) {
      {/* Primary env grid */}
      {hasEnv && (
        <div>
-          <div
-            style={{
-              fontSize: 12,
-              fontWeight: 600,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 12,
-            }}
-          >
+          <SectionLabel style={{ marginBottom: 12 }}>
            Внешние факторы
-          </div>
+          </SectionLabel>
          <div
            style={{
              display: "grid",
@ -480,18 +473,9 @@ export function EnvironmentTab({ data }: Props) {
      {/* Seasonal weather */}
      {"seasonal_weather" in data && (
        <div>
-          <div
-            style={{
-              fontSize: 12,
-              fontWeight: 600,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 12,
-            }}
-          >
+          <SectionLabel style={{ marginBottom: 12 }}>
            Климат (нормали 30 лет)
-          </div>
+          </SectionLabel>
          <SeasonalWeatherBlock seasonal={data.seasonal_weather} />
        </div>
      )}
@ -499,18 +483,7 @@ export function EnvironmentTab({ data }: Props) {
      {/* Hydrology */}
      {data.hydrology !== undefined && (
        <div>
-          <div
-            style={{
-              fontSize: 12,
-              fontWeight: 600,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 12,
-            }}
-          >
-            Гидрология
-          </div>
+          <SectionLabel style={{ marginBottom: 12 }}>Гидрология</SectionLabel>
          <HydrologyBlock hydrology={data.hydrology} />
        </div>
      )}
@ -518,16 +491,7 @@ export function EnvironmentTab({ data }: Props) {
      {!hasEnv &&
        !("seasonal_weather" in data) &&
        data.hydrology === undefined && (
-          <div
-            style={{
-              fontSize: 13,
-              color: "#9ca3af",
-              padding: "24px 0",
-              textAlign: "center",
-            }}
-          >
-            Данные об окружающей среде недоступны
-          </div>
+          <EmptyState message="Данные об окружающей среде недоступны" />
        )}
    </div>
  );
--- a/frontend/src/components/site-finder/LandTab.tsx
+++ b/frontend/src/components/site-finder/LandTab.tsx
@ -1,6 +1,8 @@
 "use client";

 import type { ParcelAnalysis } from "@/types/site-finder";
+import { SectionLabel } from "@/components/ui/SectionLabel";
+import { EmptyState } from "@/components/ui/EmptyState";
 import { GeologyBlock } from "./GeologyBlock";
 import { GeometrySuitabilityBlock } from "./GeometrySuitabilityBlock";
 import { GeotechRiskBlock } from "./GeotechRiskBlock";
@ -38,18 +40,9 @@ export function LandTab({ data }: Props) {
          padding: "14px 18px",
        }}
      >
-        <div
-          style={{
-            fontSize: 12,
-            fontWeight: 600,
-            color: "#6b7280",
-            textTransform: "uppercase",
-            letterSpacing: "0.05em",
-            marginBottom: 8,
-          }}
-        >
+        <SectionLabel style={{ marginBottom: 8 }}>
          Зонирование (ПЗЗ)
-        </div>
+        </SectionLabel>
        <div style={{ fontSize: 13, color: "#6b7280" }}>
          Данные ПЗЗ доступны через{" "}
          <a
@ -86,18 +79,9 @@ export function LandTab({ data }: Props) {
      {/* Geotech risk */}
      {data.geotech_risk !== undefined && (
        <div>
-          <div
-            style={{
-              fontSize: 12,
-              fontWeight: 600,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 12,
-            }}
-          >
+          <SectionLabel style={{ marginBottom: 12 }}>
            Геотехнический риск
-          </div>
+          </SectionLabel>
          <GeotechRiskBlock risk={data.geotech_risk} />
        </div>
      )}
@ -105,34 +89,12 @@ export function LandTab({ data }: Props) {
      {/* Geology */}
      {data.geology !== undefined && (
        <div>
-          <div
-            style={{
-              fontSize: 12,
-              fontWeight: 600,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 12,
-            }}
-          >
-            Геология
-          </div>
+          <SectionLabel style={{ marginBottom: 12 }}>Геология</SectionLabel>
          <GeologyBlock geology={data.geology} />
        </div>
      )}

-      {!hasAny && (
-        <div
-          style={{
-            fontSize: 13,
-            color: "#9ca3af",
-            padding: "24px 0",
-            textAlign: "center",
-          }}
-        >
-          Данные о земле и геологии недоступны
-        </div>
-      )}
+      {!hasAny && <EmptyState message="Данные о земле и геологии недоступны" />}
    </div>
  );
 }
--- a/frontend/src/components/site-finder/MarketTab.tsx
+++ b/frontend/src/components/site-finder/MarketTab.tsx
@ -1,6 +1,8 @@
 "use client";

 import type { ParcelAnalysis } from "@/types/site-finder";
+import { SectionLabel } from "@/components/ui/SectionLabel";
+import { EmptyState } from "@/components/ui/EmptyState";
 import { MarketTrendBlock } from "./MarketTrendBlock";
 import { CompetitorTable } from "./CompetitorTable";
 import { Pipeline24moBlock } from "./Pipeline24moBlock";
@ -39,18 +41,7 @@ export function MarketTab({ data }: Props) {
      {/* Competitors */}
      {data.competitors.length > 0 && (
        <div>
-          <div
-            style={{
-              fontSize: 12,
-              fontWeight: 600,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 12,
-            }}
-          >
-            Конкуренты
-          </div>
+          <SectionLabel style={{ marginBottom: 12 }}>Конкуренты</SectionLabel>
          <CompetitorTable
            competitors={data.competitors}
            districtName={data.district?.district_name}
@ -61,36 +52,16 @@ export function MarketTab({ data }: Props) {
      {/* Success recommendation */}
      {hasRecommendation && (
        <div>
-          <div
-            style={{
-              fontSize: 12,
-              fontWeight: 600,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 12,
-            }}
-          >
+          <SectionLabel style={{ marginBottom: 12 }}>
            Что хорошо продаётся
-          </div>
+          </SectionLabel>
          <SuccessRecommendationBlock
            recommendation={data.success_recommendation}
          />
        </div>
      )}

-      {!hasAny && (
-        <div
-          style={{
-            fontSize: 13,
-            color: "#9ca3af",
-            padding: "24px 0",
-            textAlign: "center",
-          }}
-        >
-          Рыночные данные недоступны
-        </div>
-      )}
+      {!hasAny && <EmptyState message="Рыночные данные недоступны" />}
    </div>
  );
 }
--- a/frontend/src/components/site-finder/OverviewTab.tsx
+++ b/frontend/src/components/site-finder/OverviewTab.tsx
@ -2,6 +2,7 @@

 import type { FeatureCollection } from "geojson";
 import type { ParcelAnalysis } from "@/types/site-finder";
+import { SectionLabel } from "@/components/ui/SectionLabel";
 import { ConfidenceBadge } from "./ConfidenceBadge";
 import { IsochronesPanel } from "./IsochronesPanel";
 import { ScoreBreakdownPanel } from "./ScoreBreakdownPanel";
@ -62,17 +63,7 @@ export function OverviewTab({ data, onIsochronesResult }: Props) {
            gap: 6,
          }}
        >
-          <div
-            style={{
-              fontSize: 12,
-              fontWeight: 600,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-            }}
-          >
-            Район
-          </div>
+          <SectionLabel>Район</SectionLabel>
          <div style={{ fontSize: 16, fontWeight: 700, color: "#111827" }}>
            {data.district.district_name}
          </div>
@ -138,18 +129,7 @@ export function OverviewTab({ data, onIsochronesResult }: Props) {
          gap: 4,
        }}
      >
-        <div
-          style={{
-            fontSize: 12,
-            fontWeight: 600,
-            color: "#6b7280",
-            textTransform: "uppercase",
-            letterSpacing: "0.05em",
-            marginBottom: 6,
-          }}
-        >
-          Балл
-        </div>
+        <SectionLabel style={{ marginBottom: 6 }}>Балл</SectionLabel>
        <div style={{ fontSize: 13, color: "#6b7280" }}>
          {data.poi_count} POI ·{" "}
          {data.source === "cad_quarter" ? "квартал" : "участок"}
@ -186,18 +166,9 @@ export function OverviewTab({ data, onIsochronesResult }: Props) {
          background: "#fff",
        }}
      >
-        <div
-          style={{
-            fontSize: 12,
-            fontWeight: 600,
-            color: "#6b7280",
-            textTransform: "uppercase",
-            letterSpacing: "0.05em",
-            marginBottom: 12,
-          }}
-        >
+        <SectionLabel style={{ marginBottom: 12 }}>
          POI по категориям
-        </div>
+        </SectionLabel>
        {Object.entries(data.score_breakdown).length === 0 ? (
          <p style={{ fontSize: 13, color: "#9ca3af" }}>Нет данных</p>
        ) : (
@ -236,18 +207,9 @@ export function OverviewTab({ data, onIsochronesResult }: Props) {
            background: "#f9fafb",
          }}
        >
-          <div
-            style={{
-              fontSize: 12,
-              fontWeight: 600,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 6,
-            }}
-          >
+          <SectionLabel style={{ marginBottom: 6 }}>
            Изохроны доступности
-          </div>
+          </SectionLabel>
          <div style={{ fontSize: 12, color: "#9ca3af" }}>
            Недоступны — нужен OpenRouteService API key (см.{" "}
            <code style={{ fontFamily: "monospace" }}>
--- a/frontend/src/components/ui/EmptyState.tsx
+++ b/frontend/src/components/ui/EmptyState.tsx
@ -0,0 +1,22 @@
+import type { CSSProperties } from "react";
+
+interface EmptyStateProps {
+  message: string;
+  style?: CSSProperties;
+}
+
+export function EmptyState({ message, style }: EmptyStateProps) {
+  return (
+    <div
+      style={{
+        fontSize: 13,
+        color: "#9ca3af",
+        padding: "24px 0",
+        textAlign: "center",
+        ...style,
+      }}
+    >
+      {message}
+    </div>
+  );
+}
--- a/frontend/src/components/ui/SectionLabel.tsx
+++ b/frontend/src/components/ui/SectionLabel.tsx
@ -0,0 +1,23 @@
+import type { CSSProperties, ReactNode } from "react";
+
+interface SectionLabelProps {
+  children: ReactNode;
+  style?: CSSProperties;
+}
+
+export function SectionLabel({ children, style }: SectionLabelProps) {
+  return (
+    <div
+      style={{
+        fontSize: 12,
+        fontWeight: 600,
+        color: "#6b7280",
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
--- a/frontend/src/lib/adminStyles.ts
+++ b/frontend/src/lib/adminStyles.ts
@ -0,0 +1,49 @@
+/**
+ * Shared inline styles для admin pages.
+ *
+ * **Divergent local overrides — НЕ унифицировать:**
+ * - `frontend/src/app/admin/leads/page.tsx` — local `th` (padding "10px 12px",
+ *   color "#374151"), local `td` (verticalAlign "top"), local `inputStyle`
+ *   (fontSize 13, minWidth 160). Cause: разная плотность UI на leads dashboard.
+ * - `frontend/src/components/admin/BulkGeoPanel.tsx` — local `labelStyle` без
+ *   `display: block` и `marginBottom`. Cause: labels на <span> внутри строки,
+ *   block-display и margin сломали бы inline layout.
+ *
+ * При добавлении новой admin page — сначала проверь что shared values fit
+ * перед introducing local override.
+ */
+import type { CSSProperties } from "react";
+
+export const cardStyle: CSSProperties = {
+  background: "#fff",
+  border: "1px solid #e6e8ec",
+  borderRadius: 12,
+  padding: 20,
+};
+
+export const labelStyle: CSSProperties = {
+  display: "block",
+  fontSize: 12,
+  color: "#5b6066",
+  marginBottom: 4,
+  textTransform: "uppercase",
+  letterSpacing: 0.4,
+};
+
+export const inputStyle: CSSProperties = {
+  padding: "8px 10px",
+  border: "1px solid #d1d5db",
+  borderRadius: 6,
+  fontSize: 14,
+  width: "100%",
+  boxSizing: "border-box",
+};
+
+export const th: CSSProperties = {
+  padding: "8px 10px",
+  textAlign: "left",
+  fontWeight: 600,
+  borderBottom: "1px solid #e6e8ec",
+};
+
+export const td: CSSProperties = { padding: "8px 10px" };