[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68b961b000088191aa1ea6c0f0f59f9c","versionInt","title","Мокап Дашборда «кредитный Портфель»","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { CalendarClock, Banknote, Plus } from \"lucide-react\";\nimport { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, Legend, CartesianGrid, PieChart, Pie, Cell } from \"recharts\";\n\n// ---------- MOCK DATA ----------\nconst maturities = [\n { period: \"Сен 25\", principal: 45, interest: 7 },\n { period: \"Окт 25\", principal: 20, interest: 5 },\n { period: \"Ноя 25\", principal: 35, interest: 6 },\n { period: \"Дек 25\", principal: 18, interest: 4 },\n { period: \"Янв 26\", principal: 30, interest: 6 },\n { period: \"Фев 26\", principal: 15, interest: 3 },\n { period: \"Мар 26\", principal: 28, interest: 5 },\n];\n\nconst coverage = [\n { period: \"Сен 25\", obligations: 52, freeCash: 60 },\n { period: \"Окт 25\", obligations: 25, freeCash: 40 },\n { period: \"Ноя 25\", obligations: 41, freeCash: 38 },\n { period: \"Дек 25\", obligations: 22, freeCash: 28 },\n { period: \"Янв 26\", obligations: 36, freeCash: 45 },\n { period: \"Фев 26\", obligations: 18, freeCash: 26 },\n { period: \"Мар 26\", obligations: 33, freeCash: 35 },\n];\n\nconst covenants = [\n // name, metric, actual, limit, type (\"min\" needs to be >= limit, \"max\" needs to be <= limit)\n { line: \"Револьвер Банк А\", metric: \"DSCR\", actual: 1.35, limit: 1.2, type: \"min\" },\n { line: \"Терм-кредит Банк B\", metric: \"Net Debt / EBITDA\", actual: 3.4, limit: 3.5, type: \"max\" },\n { line: \"Линия Банк C\", metric: \"ICR (EBITDA/Interest)\", actual: 2.1, limit: 2.0, type: \"min\" },\n { line: \"Линия Банк D\", metric: \"Equity Ratio\", actual: 0.27, limit: 0.30, type: \"min\" },\n { line: \"Линия Банк E\", metric: \"LTV\", actual: 62, limit: 60, type: \"max\", unit: \"%\" },\n];\n\nconst lines = [\n {\n org: \"ООО СтройИнвест\",\n bank: \"Банк А\",\n name: \"Револьвер 2025\",\n limit: 500,\n drawn: 360,\n type: \"револьвер\",\n currency: \"₽\",\n base: \"RUONIA\",\n margin: 3.0,\n fixed: false,\n nextPayment: \"15.09.2025\",\n daysLeft: 12,\n collateral: \"Запасы/ДЗ\",\n },\n {\n org: \"ООО Девелопмент\",\n bank: \"Банк B\",\n name: \"Терм 2026\",\n limit: 800,\n drawn: 640,\n type: \"терм\",\n currency: \"₽\",\n base: \"Фикс\",\n margin: 11.5,\n fixed: true,\n nextPayment: \"01.10.2025\",\n daysLeft: 28,\n collateral: \"Ипотека на участок\",\n },\n {\n org: \"АО Монтаж\",\n bank: \"Банк C\",\n name: \"Инвест 2027\",\n limit: 1200,\n drawn: 900,\n type: \"терм\",\n currency: \"$\",\n base: \"SOFR\",\n margin: 2.2,\n fixed: false,\n nextPayment: \"05.11.2025\",\n daysLeft: 63,\n collateral: \"Оборудование\",\n },\n];\n\nconst upcoming = [\n { date: \"12.09\", bank: \"Банк А\", line: \"Револьвер 2025\", amount: 7.2, type: \"Проценты\", days: 9 },\n { date: \"15.09\", bank: \"Банк А\", line: \"Револьвер 2025\", amount: 30, type: \"Тело\", days: 12 },\n { date: \"01.10\", bank: \"Банк B\", line: \"Терм 2026\", amount: 22, type: \"Проценты\", days: 28 },\n { date: \"05.11\", bank: \"Банк C\", line: \"Инвест 2027\", amount: 40, type: \"Тело\", days: 63 },\n];\n\n// ---------- HELPERS ----------\nfunction fmtM(v: number) {\n return `${v.toLocaleString(\"ru-RU\")} млн`;\n}\n\nfunction badgeClass(deltaPct: number) {\n if (deltaPct >= 0.3) return \"bg-emerald-100 text-emerald-900\";\n if (deltaPct >= 0.1) return \"bg-lime-100 text-lime-900\";\n if (deltaPct >= 0) return \"bg-amber-100 text-amber-900\";\n if (deltaPct >= -0.2) return \"bg-orange-100 text-orange-900\";\n return \"bg-red-100 text-red-900\";\n}\n\n// pure util for tests and chart\nfunction enrichCoverage(data: Array<{ period: string; obligations: number; freeCash: number }>) {\n return data.map((d) => ({ ...d, coverage: d.obligations === 0 ? 0 : d.freeCash / d.obligations }));\n}\n\n// lightweight smoke tests (dev console)\nif (typeof window !== \"undefined\") {\n const t = enrichCoverage([{ period: \"T\", obligations: 50, freeCash: 75 }])[0];\n console.assert(Math.abs(t.coverage - 1.5) < 1e-9, \"coverage should be 1.5\");\n console.assert(fmtM(1000).includes(\"1 000 млн\"), \"fmtM should format with thin space and 'млн'\");\n}\n\nexport default function CreditPortfolioDashboard() {\n const [org, setOrg] = useState(\"Все организации\");\n const [horizon, setHorizon] = useState(\"90\");\n\n const totals = useMemo(() => {\n const totalLimit = lines.reduce((s, x) => s + x.limit, 0);\n const totalDrawn = lines.reduce((s, x) => s + x.drawn, 0);\n const undrawn = totalLimit - totalDrawn;\n const utilization = (totalDrawn / totalLimit) * 100;\n const debtService30 = maturities.slice(0, 1).reduce((s, x) => s + x.principal + x.interest, 0);\n const debtService90 = maturities.slice(0, 3).reduce((s, x) => s + x.principal + x.interest, 0);\n const wacd = 12.4; // mock %\n return { totalLimit, totalDrawn, undrawn, utilization, debtService30, debtService90, wacd };\n }, []);\n\n return (\n

\n {/* Header */}\n

💼 Кредитный портфель

Единый обзор долга и ближайших платежей; ковенанты — таблично

\n \n \n \n

\n\n {/* KPI tiles — 4 ключевых */}\n

\n }/>\n \n \n \n

\n\n {/* Charts row — Покрытие справа, чувствительность убрана */}\n

\n \n \n 🧱 Лестница погашений\n \n \n \n \n \n \n \n \n \n {/* Разные цвета по сериям */}\n \n \n \n \n \n \n\n \n \n 🛡️ Покрытие сервиса долга\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n 🍩 Структура долга по банкам\n \n \n \n \n \n {aggregateByBank(lines).map((entry, index) => (\n \n ))}\n \n `${v} млн`} />\n \n \n \n \n \n

\n\n {/* Covenants table + Upcoming payments */}\n

\n \n \n 📜 Ковенанты (таблица)\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {covenants.map((c, idx) => {\n const diff = c.type === \"min\" ? c.actual - c.limit : c.limit - c.actual;\n const pct = c.type === \"min\" ? c.actual / c.limit - 1 : 1 - c.actual / c.limit;\n const ok = diff >= 0;\n return (\n \n \n \n \n \n \n \n \n );\n })}\n \n

Линия/Банк	Показатель	Порог	Факт	Люфт	Статус
{c.line}	{c.metric}	{c.limit}	{c.actual}	{(pct * 100).toFixed(0)}%	{ok ? \"OK\" : \"Risk\"}

\n \n \n\n \n \n ⏰ Платежи 7/30 дней\n \n \n {upcoming.map((u, i) => (\n

{u.date} · {u.line}

{u.bank} · {u.type} · через {u.days} дн.

{fmtM(u.amount)}

\n \n

\n ))}\n \n \n

\n\n {/* Lines table */}\n \n \n 📋 Линии и договоры\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {lines.map((l, i) => {\n const undrawn = l.limit - l.drawn;\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n })}\n \n

Организация	Банк	Договор	Лимит	Выбрано	Невыбрано	Тип	Ставка	След. платёж	Дней	Обеспечение
{l.org}	{l.bank}	{l.name}	{fmtM(l.limit)}	{fmtM(l.drawn)}	{fmtM(undrawn)}	{l.type}	{l.fixed ? `${l.margin}% фикс.` : `${l.base} + ${l.margin}%`}	{l.nextPayment}	{l.daysLeft}	{l.collateral}

\n \n \n\n

\n *Данные демонстрационные. Покрытие = Свободный cash / Платежи по долгу горизонта. Цвета: Тело — синий, Проценты — зелёный.\n

\n );\n}\n\nfunction KpiCard({ title, value, sub, icon }: { title: string; value: string; sub?: string; icon?: React.ReactNode }) {\n return (\n \n \n

{title}

{icon}{value}

\n {sub &&

{sub}

}\n \n \n );\n}\n\n// Донат: палитра и агрегация по банкам\nconst DONUT_COLORS = [\"#6366F1\", \"#22C55E\", \"#F59E0B\", \"#EF4444\", \"#06B6D4\", \"#8B5CF6\"];\nfunction aggregateByBank(ls: typeof lines) {\n const by: Record = {};\n ls.forEach((l) => {\n by[l.bank] = (by[l.bank] ?? 0) + l.drawn;\n });\n return Object.entries(by).map(([bank, value]) => ({ bank, value }));\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","4320791036883911723","traceTime",1776428367267]