Skip to content

Finance Parity Rebuild Spec (Suite standalone /finances, match finances.justin exactly)

URL: https://mkdocs.justinsforge.com/memory/plans/finance-parity-rebuild-spec-2026-06-17/

CANON UPDATE (2026-06-18) , renamed to CreatorTrack. The product formerly called "The Suite" / "Workspace" is now CreatorTrack, built and previewed at dev.creatortrack.ai. Finance is one app that plugs into the CreatorTrack page framework, not a standalone product. Build order: reusable UI components first (one shared kit), then the Notion-class page framework as the foundation, then apps (finance, clips, CRM, etc.) on top; we iterate back-and-forth across kit, framework, and apps until each aspect's features fully work. The data layer formerly "lifeos" is now the core database (core). Full canon (with tech-stack overview): creator-suite-vision-strategy.

Date: 2026-06-17. Author: [Claude Code]. Goal: rebuild the finance module in forge-suite to FULL parity with the live Flask app finances.justinsforge.com, matching look AND logic exactly, then surface it in the workspace. Verify numbers against the live old app at each step.

Architecture

  • Build as a standalone site: a /finances route group in forge-suite with its OWN layout (the finance sidebar + design system below), developed to parity independently. The workspace finance node (id 169) then renders the same components. One codebase, two doors. finances. justinsforge.com can later point at this route.
  • Data: the lifeos finance.* schema (already migrated). All reads under RLS via asUser.
  • Reference, do not copy architecture: the old code is the source of truth for layout + logic; rebuild cleanly in React/TS. ([[feedback_suite_clean_slate_rebuild]])

EXACT design system (from forge_finances_ui_base.py) - port verbatim

  • Font: Outfit (Google Fonts, 300-700), font-feature-settings:"tnum" 1,"lnum" 1.
  • :root palette: bg #131314, panel #1b1c1d, card #1e1f20, card2 #282a2c, line #303134, txt #e3e3e3, mut #9aa0a6, pos #81c995, neg #f28b82, accent #a8c7fa, accent2 #8ab4f8, grad linear-gradient(120deg,#4285f4,#9b72cb 48%,#d96570).
  • Body has a fixed radial glow radial-gradient(72% 56% at 60% 36%, rgba(74,120,255,.13), transparent 60%).
  • Sidebar .side 216px, panel bg, brand with gradient .mark, pill nav .nav (999px radius, active = rgba(138,180,248,.15) + accent icon), .home pill pinned bottom.
  • Cards .card radius 20px, bg card, subtle shadow; .card-head flex; .big 34px 750 weight for hero numbers; .hero/.gcard = linear-gradient(160deg,#1a2336,#282a2c).
  • Pills .pill (category), .pill.warn (amber=Uncategorized), .pill.biz/.blue accent, .pill.ok pos, .pill.cancel neg.
  • Charts: net-worth sparkline (this vs prev, .spark 150px, accent2 line + gradient fill, hover readout), spending donut (.donut, segments use CAT_COLORS 17-color palette), monthly bar chart (.barchart, selected month dark pill). These are real SVG components to port from forge_finances_ui_base.py (_sparkline/_donut/_barchart helpers).
  • Account rows .acct-line (34px icon tile, label, bold amount, neg=red), expandable .nw-exp groups, recurring rows .rec, transaction rows a.tx with .tx-pills.

Area inventory (14 blueprints) - port each faithfully + verify vs live app

dashboard, transactions, accounts, budget, spending, cashflow, investments, networth, recurring, categorize, alerts, business, receipts, icons. Read each forge_finances_ui_<area>.py for its exact layout + the underlying forge_finance_*.py logic before porting.

Known gotchas (carry over, do NOT re-derive wrong)

  • Net worth/assets must use latest balance ELSE latest manual_value per account; manual assets (house/vehicles/inventories) + manual liabilities (loans) live in manual_values, not balances. Liabilities normalized negative (SimpleFIN stores neg, manual stores positive magnitude). Active
  • include_in_nw only. (Already fixed in lib/finance.ts; mirror everywhere.)
  • Budgets: primary = scope='all'; scope-specific budgets are sub-budgets (later).
  • Recurring: monthly-normalize across cadences for totals.
  • Icons stored as url:/finance-icon/... (old Flask static). Either serve those assets in the Suite or migrate them; until then placeholder.

Build order (each = lib/finance fn + view, verified vs live app)

  1. Port the design system into a /finances layout (Outfit + palette + sidebar + cards + pills).
  2. Dashboard faithfully (net-worth hero + sparkline, accounts with NW groups, spending donut, month bar, recent tx) - match the real layout, verify net worth = live app.
  3. Transactions, Accounts, Budget (upgrade the existing first-pass versions to the real look/logic).
  4. Spending, Cashflow, Investments, Net worth (sectioned), Recurring (full), Categorize, Alerts, Business, Receipts. One at a time, verify numbers.
  5. Serve finance-icon assets; FIN Bridge repoint (C2) so it's live; retire old Flask app at parity.

To enable visual study

The Claude-in-Chrome extension was NOT connected this session. Reconnect it (Chrome logged into the same claude.ai account) to let me screenshot + click through finances.justinsforge.com. The code is the exact source regardless.

[Claude Code]