[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"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/pages_ops.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":39,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":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/pages_ops.tsx","extension","tsx","id","3c381802-973b-465b-8d98-d340c7b73d62","pages_ops.tsx","fileId","9b41eb6c-9d49-11f1-a5f0-1607ee4eb77e","parentId","2ba02cd3-9593-4dc3-a930-7ca2c0361271","branchId","4e7c594c-7131-44af-85f7-c363fcbc85c7","branchVersion",39,"latest",true,"createdAt",["D",1787307488809],"version",0,"fileType","content","// Страницы: Операции (модалка, импорт, список)\nimport {\n React, useEffect, useState, api, fmt, fmtDate, todayStr,\n flatCats, Modal, Field, TInput, TSelect, Check, Btn, IconBtn, Icons,\n} from \"./lib.tsx\";\n\n// ---------- Операция: модалка ----------\nexport function OpModal({ meta, initial, onClose, onSaved }) {\n const [f, setF] = useState(initial || {\n op_type: \"income\", date: todayStr(), confirmed: true, amount: \"\", account_id: \"\", account2_id: \"\",\n category_id: \"\", contractor_id: \"\", deal_id: \"\", project_id: \"\", purpose: \"\",\n });\n const [deals, setDeals] = useState([]);\n useEffect(() => { api(\"/deals\").then(setDeals); }, []);\n const set = (k, v) => setF((s) => ({ ...s, [k]: v }));\n const cats = flatCats(meta.categories, f.op_type === \"expense\" ? \"expense\" : \"income\");\n const save = async () => {\n if (!f.amount || !f.account_id) return alert(\"Укажите сумму и счёт\");\n const body = { ...f, amount: Number(f.amount), account_id: Number(f.account_id) || null,\n account2_id: Number(f.account2_id) || null, category_id: Number(f.category_id) || null,\n contractor_id: Number(f.contractor_id) || null, deal_id: Number(f.deal_id) || null,\n project_id: Number(f.project_id) || null };\n if (f.id) await api(\"/ops/\" + f.id, \"PUT\", body); else await api(\"/ops\", \"POST\", body);\n onSaved(); onClose();\n };\n return (\n \n

\n {[[\"income\", \"Поступление\"], [\"expense\", \"Выплата\"], [\"transfer\", \"Перемещение\"]].map(([k, l]) => (\n \n ))}\n

\n set(\"date\", e.target.value)} />\n set(\"amount\", e.target.value)} placeholder=\"0\" />\n \n set(\"account_id\", e.target.value)}>\n \n {meta.accounts.filter((a) => a.active).map((a) => )}\n \n \n {f.op_type === \"transfer\" ? (\n \n set(\"account2_id\", e.target.value)}>\n \n {meta.accounts.filter((a) => a.active).map((a) => )}\n \n \n ) : (\n \n set(\"category_id\", e.target.value)}>\n \n {cats.map((c) => )}\n \n \n )}\n {f.op_type !== \"transfer\" && (\n \n set(\"contractor_id\", e.target.value)}>\n \n {meta.contractors.map((x) => )}\n \n \n )}\n {f.op_type !== \"transfer\" && (\n \n set(\"deal_id\", e.target.value)}>\n \n {deals.map((x) => )}\n \n \n )}\n {f.op_type !== \"transfer\" && (\n \n set(\"project_id\", e.target.value)}>\n \n {(meta.projects || []).map((x) => )}\n \n \n )}\n

\n set(\"purpose\", e.target.value)} placeholder=\"Комментарий…\" />\n set(\"confirmed\", v)} />\n

ОтменаСохранить

\n \n );\n}\n\n// ---------- Импорт выписки ----------\nfunction ImportModal({ meta, onClose, onDone }) {\n const [text, setText] = useState(\"\");\n const [accountId, setAccountId] = useState(\"\");\n const [confirmed, setConfirmed] = useState(true);\n const [preview, setPreview] = useState(null);\n const parse = () => {\n const rows = [];\n for (const raw of text.split(/\\r?\\n/)) {\n const line = raw.trim();\n if (!line) continue;\n const parts = line.split(/[;\\t]/).map((s) => s.trim());\n if (parts.length < 2) continue;\n const d = parts[0].includes(\".\") ? parts[0].split(\".\").reverse().join(\"-\") : parts[0];\n if (!/^\\d{4}-\\d{2}-\\d{2}/.test(d)) continue;\n const amt = Number(parts[1].replace(/\\s/g, \"\").replace(\",\", \".\"));\n if (!amt) continue;\n rows.push({\n date: d, amount: Math.abs(amt), op_type: amt < 0 ? \"expense\" : \"income\",\n contractor_name: parts[2] || \"\", purpose: parts.slice(3).join(\"; \") || \"\",\n });\n }\n setPreview(rows);\n };\n const doImport = async () => {\n if (!accountId) return alert(\"Выберите счёт\");\n const r = await api(\"/ops/import\", \"POST\", {\n rows: preview.map((x) => ({ ...x, account_id: Number(accountId), confirmed })),\n });\n alert(\"Импортировано операций: \" + r.n);\n onDone(); onClose();\n };\n return (\n \n

\n Вставьте строки в формате: дата; сумма; контрагент; назначение (разделитель — точка с запятой или табуляция).\n Отрицательная сумма — выплата, положительная — поступление. Дата: 31.12.2026 или 2026-12-31.\n

setText(e.target.value)} />\n      <div className=\"grid grid-cols-2 gap-4 mb-3\">\n        <Field label=\"Зачислить на счёт\">\n          <TSelect value={accountId} onChange={(e) => setAccountId(e.target.value)}>\n            <option value=\"\">Выбрать счёт…</option>\n            {meta.accounts.filter((a) => a.active).map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}\n          </TSelect>\n        </Field>\n        <div className=\"pt-5\"><Check label=\"Оплаты подтверждены (факт)\" checked={confirmed} onChange={setConfirmed} /></div>\n      </div>\n      {preview && (\n        <div className=\"text-sm mb-3\">\n          Распознано строк: <b>{preview.length}</b>\n          {preview.length > 0 && (\n            <span className=\"text-gray-500\"> · поступлений {preview.filter((x) => x.op_type === \"income\").length}, выплат {preview.filter((x) => x.op_type === \"expense\").length}</span>\n          )}\n        </div>\n      )}\n      <div className=\"flex justify-end gap-2\">\n        <Btn kind=\"ghost\" onClick={onClose}>Отмена</Btn>\n        {!preview ? <Btn onClick={parse}>Проверить</Btn> : <Btn onClick={doImport}>Импортировать {preview.length}</Btn>}\n      </div>\n    </Modal>\n  );\n}\n\n// ---------- Операции ----------\nexport function PageOps({ meta, refreshMeta }) {\n  const [data, setData] = useState({ rows: [], totals: {} });\n  const [flt, setFlt] = useState({\n    income: true, expense: true, transfer: true, conf: true, unconf: true,\n    account: \"\", category: \"\", contractor: \"\", project: \"\", q: \"\", from: \"\", to: \"\", uncat: false,\n  });\n  const [modal, setModal] = useState(null);\n  const [imp, setImp] = useState(false);\n  const [sel, setSel] = useState({});\n  const [bulkCat, setBulkCat] = useState(\"\");\n  const load = () => {\n    const p = new URLSearchParams();\n    const types = [flt.income && \"income\", flt.expense && \"expense\", flt.transfer && \"transfer\"].filter(Boolean);\n    if (types.length === 1) p.set(\"type\", types[0]);\n    if (flt.conf !== flt.unconf) p.set(\"confirmed\", flt.conf ? \"1\" : \"0\");\n    for (const k of [\"account\", \"category\", \"contractor\", \"project\", \"q\", \"from\", \"to\"]) if (flt[k]) p.set(k, flt[k]);\n    if (flt.uncat) p.set(\"uncat\", \"1\");\n    api(\"/ops?\" + p.toString()).then((d) => {\n      const types2 = new Set(types.length ? types : [\"income\", \"expense\", \"transfer\"]);\n      d.rows = d.rows.filter((r) => types2.has(r.op_type));\n      setData(d);\n    });\n  };\n  useEffect(() => { load(); }, [JSON.stringify(flt)]);\n  const set = (k, v) => setFlt((s) => ({ ...s, [k]: v }));\n  const confirm = async (id) => { await api(`/ops/${id}/confirm`, \"POST\", {}); load(); refreshMeta(); };\n  const del = async (id) => { if (window.confirm(\"Удалить операцию?\")) { await api(\"/ops/\" + id, \"DELETE\"); load(); refreshMeta(); } };\n  const allCats = [...flatCats(meta.categories, \"income\"), ...flatCats(meta.categories, \"expense\")];\n  const selIds = Object.keys(sel).filter((k) => sel[k]);\n  const applyBulk = async () => {\n    if (!bulkCat) return alert(\"Выберите статью\");\n    await api(\"/ops/bulk\", \"POST\", { ids: selIds.map(Number), category_id: Number(bulkCat) });\n    setSel({}); setBulkCat(\"\"); load();\n  };\n  const groups = [];\n  let cur = null;\n  for (const r of data.rows) {\n    if (!cur || cur.date !== r.date) { cur = { date: r.date, rows: [] }; groups.push(cur); }\n    cur.rows.push(r);\n  }\n  const t = data.totals || {};\n  return (\n    <div className=\"flex h-full\">\n      <div className=\"w-60 shrink-0 bg-white border-r border-gray-100 p-4 text-sm overflow-y-auto\">\n        <div className=\"font-semibold text-[#22313f] mb-2\">Фильтры</div>\n        <div className=\"text-xs text-gray-400 mb-1\">Тип операции</div>\n        <Check label=\"Поступление\" checked={flt.income} onChange={(v) => set(\"income\", v)} />\n        <Check label=\"Выплата\" checked={flt.expense} onChange={(v) => set(\"expense\", v)} />\n        <Check label=\"Перемещение\" checked={flt.transfer} onChange={(v) => set(\"transfer\", v)} />\n        <div className=\"text-xs text-gray-400 mt-3 mb-1\">Дата оплаты</div>\n        <Check label=\"Подтверждена\" checked={flt.conf} onChange={(v) => set(\"conf\", v)} />\n        <Check label=\"Не подтверждена\" checked={flt.unconf} onChange={(v) => set(\"unconf\", v)} />\n        <div className=\"mt-3\" />\n        <Field label=\"Счёт\">\n          <TSelect value={flt.account} onChange={(e) => set(\"account\", e.target.value)}>\n            <option value=\"\">Все</option>\n            {meta.accounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}\n          </TSelect>\n        </Field>\n        <Field label=\"Статья учёта\">\n          <TSelect value={flt.category} onChange={(e) => set(\"category\", e.target.value)}>\n            <option value=\"\">Все</option>\n            {allCats.map((c) => <option key={c.id} value={c.id}>{\" \".repeat(c.depth * 2) + c.name}</option>)}\n          </TSelect>\n        </Field>\n        <Field label=\"Контрагент\">\n          <TSelect value={flt.contractor} onChange={(e) => set(\"contractor\", e.target.value)}>\n            <option value=\"\">Все</option>\n            {meta.contractors.map((x) => <option key={x.id} value={x.id}>{x.name}</option>)}\n          </TSelect>\n        </Field>\n        <Field label=\"Проект\">\n          <TSelect value={flt.project} onChange={(e) => set(\"project\", e.target.value)}>\n            <option value=\"\">Все</option>\n            {(meta.projects || []).map((x) => <option key={x.id} value={x.id}>{x.name}</option>)}\n          </TSelect>\n        </Field>\n        <Field label=\"Период с\"><TInput type=\"date\" value={flt.from} onChange={(e) => set(\"from\", e.target.value)} /></Field>\n        <Field label=\"по\"><TInput type=\"date\" value={flt.to} onChange={(e) => set(\"to\", e.target.value)} /></Field>\n        <Check label=\"Только нераспределённые\" checked={flt.uncat} onChange={(v) => set(\"uncat\", v)} />\n      </div>\n      <div className=\"flex-1 flex flex-col min-w-0\">\n        <div className=\"flex items-center gap-2 p-4 pb-2 flex-wrap\">\n          <h1 className=\"text-[22px] font-bold text-[#22313f] mr-1\">Операции</h1>\n          <Btn onClick={() => setModal({})}>Создать</Btn>\n          <Btn kind=\"ghost\" onClick={() => setImp(true)}>Импортировать</Btn>\n          <input className=\"ml-auto border border-gray-200 rounded px-3 py-1.5 text-sm w-64\" placeholder=\"Поиск по операциям\"\n            value={flt.q} onChange={(e) => set(\"q\", e.target.value)} />\n        </div>\n        {selIds.length > 0 && (\n          <div className=\"mx-4 mb-2 bg-teal-50 border border-teal-100 rounded px-3 py-2 flex items-center gap-3 text-sm\">\n            <b>{selIds.length}</b> выбрано · назначить статью:\n            <TSelect value={bulkCat} onChange={(e) => setBulkCat(e.target.value)} className=\"!w-64\">\n              <option value=\"\">Выбрать…</option>\n              {allCats.map((c) => <option key={c.id} value={c.id}>{\" \".repeat(c.depth * 2) + c.name}</option>)}\n            </TSelect>\n            <Btn small onClick={applyBulk}>Применить</Btn>\n            <button className=\"text-gray-400 text-xs\" onClick={() => setSel({})}>Снять выбор</button>\n          </div>\n        )}\n        <div className=\"flex-1 overflow-y-auto px-4\">\n          <table className=\"w-full text-sm bg-white rounded-lg shadow-sm\">\n            <thead><tr className=\"text-left text-xs text-gray-400\">\n              <th className=\"p-2 pl-3 w-6\"></th>\n              <th className=\"p-2\">Дата</th><th className=\"p-2\">Счёт</th><th className=\"p-2\">Тип</th>\n              <th className=\"p-2\">Контрагент</th><th className=\"p-2\">Статья</th><th className=\"p-2\">Сделка / Проект</th>\n              <th className=\"p-2 text-right\">Сумма</th><th className=\"p-2\"></th>\n            </tr></thead>\n            {groups.map((g) => (\n              <tbody key={g.date}>\n                <tr><td colSpan={9} className=\"px-3 pt-3 pb-1 text-xs font-semibold text-slate-500\">{fmtDate(g.date)}{g.date === todayStr() ? \" · Сегодня\" : \"\"}</td></tr>\n                {g.rows.map((r) => (\n                  <tr key={r.id} className=\"border-t border-gray-50 hover:bg-slate-50\">\n                    <td className=\"p-2 pl-3\">\n                      {r.op_type !== \"transfer\" && (\n                        <input type=\"checkbox\" className=\"accent-[#2aa3af]\" checked={!!sel[r.id]}\n                          onChange={(e) => setSel((s) => ({ ...s, [r.id]: e.target.checked }))} />\n                      )}\n                    </td>\n                    <td className=\"p-2 text-gray-500 whitespace-nowrap\">{fmtDate(r.date)}</td>\n                    <td className=\"p-2 text-gray-700\">{r.account_name}{r.op_type === \"transfer\" && <div className=\"text-gray-400 text-xs\">→ {r.account2_name}</div>}</td>\n                    <td className=\"p-2\">\n                      <span className={r.op_type === \"income\" ? \"text-emerald-600\" : r.op_type === \"expense\" ? \"text-rose-500\" : \"text-gray-400\"}>\n                        {r.op_type === \"income\" ? <Icons.arrowIn size={15} /> : r.op_type === \"expense\" ? <Icons.arrowOut size={15} /> : <Icons.swap size={15} />}\n                      </span>\n                    </td>\n                    <td className=\"p-2 text-gray-700 max-w-[170px] truncate\">{r.contractor_name || \"—\"}</td>\n                    <td className=\"p-2 text-gray-600 max-w-[220px]\">\n                      <div className=\"truncate\">{r.op_type === \"transfer\" ? \"Перевод между счетами\" : (r.category_name || <span className=\"text-amber-600\">Нераспределенный {r.op_type === \"income\" ? \"доход\" : \"расход\"}</span>)}</div>\n                      {r.purpose && <div className=\"text-gray-400 text-xs truncate\">{r.purpose}</div>}\n                    </td>\n                    <td className=\"p-2 text-gray-500 max-w-[130px]\">\n                      <div className=\"truncate\">{r.deal_name || \"\"}</div>\n                      {r.project_name && <div className=\"text-xs text-gray-400 truncate\">{r.project_name}</div>}\n                    </td>\n                    <td className=\"p-2 text-right whitespace-nowrap\">\n                      {r.op_type === \"transfer\"\n                        ? <div className=\"text-gray-600\">−{fmt(r.amount)}<div>+{fmt(r.amount)}</div></div>\n                        : <span className={r.op_type === \"income\" ? \"text-emerald-600 font-medium\" : \"text-rose-500 font-medium\"}>{r.op_type === \"income\" ? \"+\" : \"−\"}{fmt(r.amount)}</span>}\n                      {!r.confirmed && <div><span className=\"text-[10px] bg-slate-100 text-slate-500 rounded px-1\">не подтверждена</span></div>}\n                    </td>\n                    <td className=\"p-2 whitespace-nowrap text-right\">\n                      {!r.confirmed && <Btn small onClick={() => confirm(r.id)}>Подтв.</Btn>}\n                      <IconBtn icon={Icons.edit} onClick={() => setModal({ ...r, confirmed: !!r.confirmed })} />\n                      <IconBtn icon={Icons.trash} danger onClick={() => del(r.id)} />\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            ))}\n          </table>\n          {data.rows.length === 0 && <div className=\"text-center text-gray-400 text-sm py-10\">Операций нет</div>}\n          <div className=\"h-3\" />\n        </div>\n        <div className=\"border-t border-gray-100 bg-white px-4 py-2 text-xs text-gray-500 flex gap-4 flex-wrap\">\n          <span>{t.n || 0} операций</span>\n          <span>Поступления: <b className=\"text-emerald-600\">{fmt(t.income)}</b></span>\n          <span>Выплаты: <b className=\"text-rose-500\">{fmt(t.expense)}</b></span>\n          <span>Перемещения: <b>{fmt(t.transfer)}</b></span>\n          <span>Итого: <b className={(t.income - t.expense) >= 0 ? \"text-emerald-600\" : \"text-rose-500\"}>{(t.income - t.expense) >= 0 ? \"+\" : \"\"}{fmt((t.income || 0) - (t.expense || 0))}</b></span>\n        </div>\n      </div>\n      {modal && <OpModal meta={meta} initial={modal.id ? modal : null} onClose={() => setModal(null)} onSaved={() => { load(); refreshMeta(); }} />}\n      {imp && <ImportModal meta={meta} onClose={() => setImp(false)} onDone={() => { load(); refreshMeta(); }} />}\n    </div>\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","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,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_38":92,"_11":93,"_23":31,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":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",{"_85":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":35,"_153":-5,"_154":-7,"_155":-7,"_156":39,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":93,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]
</article></body></html>