[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_111":112,"_113":114},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22},"handle","tambovtsev007","name","ufin","path","frontend/src/lib.tsx","project",{"_23":49,"_11":12,"_36":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":35,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_23":24,"_11":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":17,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/tambovtsev007/ufin/code/frontend/src/lib.tsx","extension","tsx","id","e3025870-a7bb-46b8-8f94-c51a40822feb","lib.tsx","fileId","15f35440-9d40-11f1-83f2-1607ee4eb77e","parentId","2ba02cd3-9593-4dc3-a930-7ca2c0361271","branchId","4e7c594c-7131-44af-85f7-c363fcbc85c7","branchVersion",55,"latest",true,"createdAt",["D",1787312380350],"version",3,"fileType","content","// U.fin — общие утилиты и UI-примитивы\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport { React, useEffect, useMemo, useState };\n\n// ---------- api ----------\nconst LS_KEY = \"ufin_pin\";\nexport const getPin = () => { try { return localStorage.getItem(LS_KEY) || \"\"; } catch { return \"\"; } };\nexport const setPinLS = (p) => { try { p ? localStorage.setItem(LS_KEY, p) : localStorage.removeItem(LS_KEY); } catch {} };\n\nexport let onUnauthorized = () => {};\nexport const setOnUnauthorized = (fn) => { onUnauthorized = fn; };\n\nexport async function api(path, method = \"GET\", body) {\n const res = await fetch(\"/api\" + path, {\n method,\n headers: { \"content-type\": \"application/json\", \"x-pin\": getPin() },\n body: body === undefined ? undefined : JSON.stringify(body),\n });\n if (res.status === 401 && path !== \"/login\") { onUnauthorized(); throw new Error(\"unauthorized\"); }\n return res.json();\n}\n\n// ---------- формат ----------\nexport const fmt = (n) => new Intl.NumberFormat(\"ru-RU\", { maximumFractionDigits: 2 }).format(n || 0) + \" ₽\";\nexport const fmt0 = (n) => new Intl.NumberFormat(\"ru-RU\", { maximumFractionDigits: 0 }).format(n || 0) + \" ₽\";\nexport const fmtN = (n) => new Intl.NumberFormat(\"ru-RU\", { maximumFractionDigits: 0 }).format(n || 0);\nexport const fmtShort = (n) => {\n n = n || 0;\n if (Math.abs(n) >= 1_000_000) return (n / 1_000_000).toLocaleString(\"ru-RU\", { maximumFractionDigits: 1 }) + \" млн\";\n if (Math.abs(n) >= 1_000) return (n / 1_000).toLocaleString(\"ru-RU\", { maximumFractionDigits: 0 }) + \" тыс\";\n return String(Math.round(n));\n};\nexport const todayStr = () => new Date().toISOString().slice(0, 10);\nexport const thisYear = () => todayStr().slice(0, 4);\nexport const fmtDate = (s) => (s ? s.slice(0, 10).split(\"-\").reverse().join(\".\") : \"—\");\nexport const MONTHS = [\"Январь\",\"Февраль\",\"Март\",\"Апрель\",\"Май\",\"Июнь\",\"Июль\",\"Август\",\"Сентябрь\",\"Октябрь\",\"Ноябрь\",\"Декабрь\"];\nexport const monLabel = (m) => { const [y, mm] = m.split(\"-\"); return MONTHS[Number(mm) - 1].slice(0, 3).toLowerCase() + \" '\" + y.slice(2); };\nexport const yearMonths = (year) => Array.from({ length: 12 }, (_, i) => `${year}-${String(i + 1).padStart(2, \"0\")}`);\n\nexport const DEAL_STATUS = {\n work: { label: \"В работе\", cls: \"bg-sky-100 text-sky-700\" },\n nuance: { label: \"Нюансы\", cls: \"bg-amber-100 text-amber-700\" },\n done: { label: \"Сделка завершена\", cls: \"bg-emerald-100 text-emerald-700\" },\n fail: { label: \"Сорвалась\", cls: \"bg-rose-100 text-rose-700\" },\n};\n\n// цвета в духе финансовых сервисов\nexport const C = {\n dark: \"#22313f\", // шапка/сайдбар\n darker: \"#1b2735\",\n teal: \"#2aa3af\", // акцент\n tealD: \"#238e99\",\n green: \"#27ae60\",\n red: \"#e74c3c\",\n amber: \"#f2c94c\",\n};\n\n// дерево статей → плоский список с отступами\nexport function flatCats(categories, kind) {\n const byParent = {};\n for (const c of categories.filter((x) => x.kind === kind)) {\n const p = c.parent_id || 0;\n (byParent[p] = byParent[p] || []).push(c);\n }\n const out = [];\n const walk = (pid, depth) => {\n for (const c of byParent[pid] || []) { out.push({ ...c, depth }); walk(c.id, depth + 1); }\n };\n walk(0, 0);\n return out;\n}\nexport function rootOfCat(categories, id) {\n const byId = {};\n for (const c of categories) byId[c.id] = c;\n let c = byId[id];\n while (c && c.parent_id) c = byId[c.parent_id];\n return c || null;\n}\n\n// ---------- иконки (свои, inline SVG) ----------\nconst I = (d, extra = null) => (props) => (\n \n);\nexport const Icons = {\n chart: I(\"M4 20V10 M10 20V4 M16 20v-7 M22 20H2\"),\n ops: I(\"M4 7h13l-3-3 M20 17H7l3 3\"),\n deals: I(\"M3 8h18v12H3z M8 8V5a2 2 0 012-2h4a2 2 0 012 2v3 M3 13h18\"),\n plan: I(\"M5 4h14a1 1 0 011 1v15a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1z M4 9h16 M9 2v4 M15 2v4 M8 14l2.5 2.5L16 11\"),\n projects: I(\"M3 6a1 1 0 011-1h5l2 2h9a1 1 0 011 1v11a1 1 0 01-1 1H4a1 1 0 01-1-1V6z\"),\n reports: I(\"M7 3h10a1 1 0 011 1v16a1 1 0 01-1 1H7a1 1 0 01-1-1V4a1 1 0 011-1z M9 8h6 M9 12h6 M9 16h4\"),\n refs: I(\"M4 4h5a2 2 0 012 2v14H6a2 2 0 01-2-2V4z M20 4h-5a2 2 0 00-2 2v14h5a2 2 0 002-2V4z\"),\n settings: I(\"M12 9a3 3 0 100 6 3 3 0 000-6z M19 12a7 7 0 00-.1-1.2l2-1.5-2-3.5-2.4 1a7 7 0 00-2-1.2L14 3h-4l-.4 2.6a7 7 0 00-2 1.2l-2.5-1-2 3.5 2 1.5A7 7 0 005 12a7 7 0 00.1 1.2l-2 1.5 2 3.5 2.4-1a7 7 0 002 1.2L10 21h4l.4-2.6a7 7 0 002-1.2l2.5 1 2-3.5-2-1.5A7 7 0 0019 12z\"),\n arrowIn: I(\"M20 12H4 M10 6l-6 6 6 6\"),\n arrowOut: I(\"M4 12h16 M14 6l6 6-6 6\"),\n swap: I(\"M4 7h13l-3-3 M20 17H7l3 3\"),\n x: I(\"M6 6l12 12 M18 6L6 18\"),\n edit: I(\"M4 20h4L19 9l-4-4L4 16v4z\"),\n trash: I(\"M4 7h16 M9 7V5a1 1 0 011-1h4a1 1 0 011 1v2 M6 7l1 13h10l1-13 M10 11v5 M14 11v5\"),\n plus: I(\"M12 5v14 M5 12h14\"),\n};\n\n// ---------- UI ----------\nexport function Modal({ title, onClose, children, wide }) {\n return (\n

e.stopPropagation()}>\n

{title}

\n \n

{children}

\n );\n}\nexport function Field({ label, children }) {\n return (\n \n

{label}

\n {children}\n \n );\n}\nconst inputCls = \"w-full border border-gray-200 rounded px-3 py-2 text-sm focus:border-[#2aa3af]\";\nexport function TInput(props) { return ; }\nexport function TSelect(props) { return onChange(e.target.checked)} className=\"accent-[#2aa3af]\" />\n {label}\n \n );\n}\nexport function Btn({ children, onClick, kind = \"primary\", small, type }) {\n const base = (small ? \"px-3 py-1.5 text-xs\" : \"px-4 py-2 text-sm\") + \" rounded font-medium transition-colors \";\n const cls = kind === \"primary\"\n ? \"text-white bg-[#2aa3af] hover:bg-[#238e99]\"\n : kind === \"dark\"\n ? \"text-white bg-[#22313f] hover:bg-[#1b2735]\"\n : kind === \"danger\"\n ? \"bg-rose-50 text-rose-600 hover:bg-rose-100\"\n : \"bg-white border border-gray-200 text-gray-700 hover:bg-gray-50\";\n return ;\n}\nexport function IconBtn({ icon: Ic, onClick, danger, title }) {\n return (\n \n );\n}\nexport function PageTitle({ children, right }) {\n return (\n

{children}

\n {right}\n

\n );\n}\nexport function Tabs({ tabs, value, onChange }) {\n return (\n

\n {tabs.map(([k, l]) => (\n \n ))}\n

\n );\n}\nexport function YearSelect({ value, onChange }) {\n return (\n onChange(e.target.value)} className=\"!w-28\">\n {[0, 1, 2].map((i) => { const y = String(Number(thisYear()) - i); return ; })}\n \n );\n}\n\n// ---------- цвета графиков (как в референсе) ----------\nexport const CH = {\n blue: \"#4FC3F7\", orange: \"#FFB74D\", green: \"#43A047\", purple: \"#AB47BC\",\n areaFill: \"#C8E6C9\", grid: \"#eceff1\", axis: \"#90a4ae\",\n};\n\n// ---------- графики (свои, SVG) ----------\n// комбинированный: сгруппированные столбики + линии\nexport function ComboChart({ data, bars, lines, height = 260, labelKey = \"label\" }) {\n const W = Math.max(680, data.length * 110), H = height, padL = 56, padB = 34, padT = 12;\n const all = data.flatMap((d) => [...bars.map((b) => Number(d[b.key] || 0)), ...lines.map((l) => Number(d[l.key] || 0))]);\n let max = Math.max(1, ...all), min = Math.min(0, ...all);\n const span = max - min || 1;\n const y = (v) => padT + (H - padB - padT) * (1 - (v - min) / span);\n const bw = Math.min(34, (W - padL) / Math.max(1, data.length) / (bars.length + 1.2));\n const gx = (i) => padL + ((W - padL) / Math.max(1, data.length)) * (i + 0.5);\n const ticks = [];\n for (let t = 0; t <= 4; t++) ticks.push(min + (span * t) / 4);\n return (\n \n );\n}\nexport function ChartLegend({ items }) {\n return (\n

\n {items.map(([label, color, isLine]) => (\n \n {isLine\n ? \n : }\n {label}\n \n ))}\n

\n );\n}\n// зелёная area (остатки)\nexport function AreaChart({ points, height = 240 }) {\n const W = 900, H = height, padL = 64, padB = 26, padT = 8;\n if (!points.length) return

Нет данных

;\n const vals = points.map((p) => p.b);\n const max = Math.max(...vals, 1), min = Math.min(...vals, 0);\n const span = max - min || 1;\n const x = (i) => padL + ((W - padL - 8) * i) / Math.max(1, points.length - 1);\n const y = (v) => padT + (H - padB - padT) * (1 - (v - min) / span);\n const ticks = [];\n for (let t = 0; t <= 4; t++) ticks.push(min + (span * t) / 4);\n const lineP = points.map((p, i) => `${x(i)},${y(p.b)}`).join(\" \");\n const step = Math.max(1, Math.floor(points.length / 8));\n return (\n \n );\n}\n// donut\nconst DONUT_COLORS = [\"#42A5F5\", \"#1E4B8F\", \"#2C6BC9\", \"#7EC8F5\", \"#0D2F63\", \"#5B9BD5\", \"#9AD1F5\", \"#3F7FBF\"];\nexport function Donut({ parts, size = 190 }) {\n const total = parts.reduce((s, p) => s + p.value, 0) || 1;\n const R = size / 2, r = R * 0.55;\n let a0 = -Math.PI / 2;\n const segs = parts.map((p, i) => {\n const a1 = a0 + Math.min(0.99985, p.value / total) * Math.PI * 2;\n const large = a1 - a0 > Math.PI ? 1 : 0;\n const path = `M ${R + R * Math.cos(a0)} ${R + R * Math.sin(a0)} A ${R} ${R} 0 ${large} 1 ${R + R * Math.cos(a1)} ${R + R * Math.sin(a1)} L ${R + r * Math.cos(a1)} ${R + r * Math.sin(a1)} A ${r} ${r} 0 ${large} 0 ${R + r * Math.cos(a0)} ${R + r * Math.sin(a0)} Z`;\n a0 = a1;\n return ;\n });\n return ;\n}\nexport { DONUT_COLORS };\n// парето: столбики + кумулятивная линия %\nexport function Pareto({ rows, height = 300, threshold = 0.8, showLine = true, barColor = null }) {\n const W = Math.max(700, rows.length * 64), H = height, padL = 56, padB = 90, padT = 10, padR = 44;\n if (!rows.length) return

Нет данных

;\n const total = rows.reduce((s, r) => s + r.value, 0) || 1;\n const max = Math.max(...rows.map((r) => r.value), 1);\n const y = (v) => padT + (H - padB - padT) * (1 - v / max);\n const yp = (p) => padT + (H - padB - padT) * (1 - p);\n const gx = (i) => padL + ((W - padL - padR) / rows.length) * (i + 0.5);\n const bw = Math.min(36, (W - padL - padR) / rows.length - 10);\n let cum = 0;\n const cums = rows.map((r) => (cum += r.value) / total);\n return (\n \n );\n}\n","deleted",false,"label",[47,48,25],"frontend","src","6e904ebf-a254-4dd3-b3e8-cca1eea5f4a2",["D",1787239139778],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","U.fin — финансовая система агентства недвижимости","imageUrl","userId","caa5b6a0-dd4e-4cd6-a997-9389a6a43948","pinnedFileId","8193b528-9caa-11f1-a2f1-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019eff71-5749-76b5-abdd-e25a47b3deca","tursoName","6e904ebfa2544dd3b3e8cca1eea5f4a2","tursoHostname","6e904ebfa2544dd3b3e8cca1eea5f4a2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789499469860],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_110":106},"org",{"_9":10,"_103":104,"_105":106,"_59":60,"_107":108,"_109":44},"branch",{"_38":93,"_11":94,"_23":31,"_95":49,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":12,"_102":10},"isOwned",61,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Кирилл Тамбовцев","avatar","https://lh3.googleusercontent.com/a/ACg8ocKCNneTjcn307kcxhB_NS1R7_0SBhSKM-2hy73z0JvhXFipwkhs=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_144":145,"_146":147,"_148":149,"_150":44,"_151":44,"_152":44,"_153":35,"_154":-5,"_155":-7,"_156":-7,"_157":67,"_158":44,"_159":44,"_160":-5,"_161":44,"_162":44,"_163":44,"_164":-5},"ENV",{"_115":116,"_117":118,"_119":94,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141,"_142":143},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]