How I Replaced Excel and Notion with a Finance Tracker I Built in Claude

Create an interactive artifact: a personal finance tracker app I can
use right here in Claude. Build it as a single React artifact, ready
to use with no setup.
SAVING MY DATA
- Use the artifact's persistent storage so my data is still there
  when I come back. If persistent storage isn't available, keep data
  in memory and make "Export backup" (copyable JSON) and
  "Import backup" (paste JSON) very visible so I never lose anything.
CURRENCIES
- Main currency PHP, second currency USD (editable in Settings).
- Never convert or combine them. Show every total per currency.
ACCOUNTS
- Add bank accounts (assets) and credit cards (liabilities):
  name, currency, current balance.
- Credit cards also have credit limit and due day of the month.
- I can update a balance anytime; keep a dated history of updates.
- Tapping an account opens its detail page showing ALL its history,
  newest first: imported statement transactions, expenses charged to
  it, manual balance updates, and statement imports (with statement
  date and balance). Filter by month and type, show a running
  balance, and let me edit or delete any record.
- Every record is saved against its account, not only in the
  expenses list.
EXPENSES
- Quick-add box at the top: I type "2000 dinner" or "15 usd netflix"
  and it saves an expense for today (PHP unless I say usd).
- Auto-guess a category (food, transport, bills, shopping,
  subscriptions, other). I can change it.
- List with filters by month, category, and account (cash or a card).
STATEMENT IMPORT
- The import form has, in this order: the PDF file picker, an
  optional "PDF password" field (masked, with a show/hide toggle),
  the account dropdown, then the "Import" button.
- Read the PDF in the browser with pdf.js (from cdnjs.cloudflare.com)
  and extract the text from every page, using the password if one
  was entered.
- If the file is locked and the password is blank or wrong, show an
  error right under the password field and keep the file selected
  so I can retry. Use the password only to open the file, then clear
  the field. Never save or send the password.
- If a page has no readable text (scanned image), render it with
  pdf.js and read it with Tesseract.js (from cdnjs.cloudflare.com),
  showing a progress bar.
- Send the extracted text to Claude to pull out each transaction
  (date, description, amount, currency), plus the statement date,
  ending balance and due date if they appear. Process long
  statements in chunks so nothing gets cut off.
- Show a review list so I can fix, skip, or delete rows, with likely
  duplicates flagged, before saving. Save every confirmed row to the
  selected account's history.
- On the review screen, add a checkbox "Update account balance to
  match this statement" (checked by default). When checked, set the
  account's balance to the statement's ending balance, log it as a
  balance correction in the account history (old balance, new
  balance, statement date), and update the due date. Only apply this
  if the statement is newer than the latest one already imported for
  that account; otherwise warn me and leave it unchecked.
- Also keep a "Paste statement" box for statements I copy as text,
  which goes through the same Claude extraction and review.
DASHBOARD
- Net worth per currency = bank balances minus card balances.
- Cards: assets, liabilities, net worth, spending this month.
- Charts: net worth over time, spending by category this month,
  monthly spending for the last 12 months.
- "Due soon" panel: cards due in the next 7 days, highlighted.
DESIGN
- Clean and modern, made for a phone screen first, big tap targets,
  numbers with thousands separators, dark mode support.
- Start empty with a short friendly "Add your first account" guide.
Build the complete, working app. No placeholders.