New Vite + TypeScript UI for transaction analysis (rules editor, categories, subscriptions)

[ssubbotin]

Summary

A from-scratch Vite + React 18 + TypeScript single-page app under app/ for navigating and analyzing the data, intended to replace the current Create-React-App UI. It keeps the project's privacy-first model — all data stays in the browser localStorage, nothing leaves the device — and reuses the existing patterns.json classifier.

The focus is family financial oversight: separating real spending from money movement (FX, cash withdrawals, transfers, crypto), fast categorization with editable rules, subscription detection, and per-category trends.

What's included

New app at app/, with tabs:

• Обзор — monthly cash-flow KPIs (доход / расход / баланс / норма сбережений, with vs-prior-month deltas), a 12-month income/outflow/net chart, and biggest movers. Opens on the latest complete month so a mid-month export doesn't show a scary half-finished month.
• Транзакции — virtualized ledger (TanStack Table/Virtual), a faceted filter rail, a real-spending ⟷ all-movements toggle, inline + bulk categorization, a coverage bar, and a "по получателям" grouping sortable by operation count.
• По категориям — pick a category → monthly spend trend with an average line + subcategory breakdown.
• Правила — a rules editor: every categorization rule with its match count + total, editable mask (substring or /regex/), inspect-matched-transactions, and delete. Sortable, with state in the URL.
• Оптимизация — recurring-subscription detector with a monthly-commitment headline.

Also:

• New top-level categories Авто (fuel/vehicle, with Serbian station seeds) and Бизнес (preduzetnik / tax-authority seeds) in patterns.json.
• The URL hash encodes page state (active tab, sort, filters) so views are shareable/bookmarkable.
• A file-import button (no console snippet needed).

⚠️ Deployment

.github/workflows/deploy.yml is switched to build app/ and publish app/dist/ (Node 20, npm ci). Merging this deploys the new app to rtxdata.github.io. The legacy CRA app stays in the repo (root src/) but is no longer the deploy target. Happy to instead keep the current deploy and land the app side-by-side, so you can flip it whenever you're ready — just say the word.

Stack & testing

Vite 5, React 18, TypeScript (strict), Tailwind v4, shadcn/ui (@base-ui), TanStack Table/Virtual, Recharts. No runtime network calls; a build-time CSP <meta> enforces the privacy posture.

cd app
npm ci
npm run test:run   # 64 tests
npm run build

Validated end-to-end against a real 12-month export.

Notes

• The data-parsing/classification logic now exists as a third TypeScript mirror in app/src/lib/* alongside src/db.js and utils.py; CLAUDE.md documents keeping the FX rates and positional field indices in sync.
• The branch also carries CLAUDE.md and an implementation-plan doc under docs/ — easy to drop if you'd rather not keep them.