Vitral 0.2

Harborline Bank

A personal banking app. The overview shows every account, net worth and cash flow, budgets and the latest payments; transactions filter by payee, category, account and date; a transfer goes through details, review and a one-time code, and lands in the table.

BankingChartsForms
Live demoSource on GitHub

Screens

  1. 1

    Accounts

    Balances, net worth, cash flow, budgets and recent activity

    Open live
    Harborline Bank: the Accounts screen
  2. 2

    Transactions

    A filterable, sortable table of every payment

    Open live
    Harborline Bank: the Transactions screen
  3. 3

    Transfer

    A three-step transfer with a one-time code

    Open live
    Harborline Bank: the Transfer screen

What's inside

3 screens and 19 components, wired together with shared state and local navigation.

Features

  • Account cards with a one-click “hide balances” for screen sharing
  • Net worth and cash-flow charts, and budgets that turn red when exceeded
  • A transaction table filtered by payee, categories, account and date
  • A linear transfer: payee list, currency input, schedule, review, one-time code
  • The transfer updates the balance and appears as a pending transaction
  • One header across the top: the collapse button, a breadcrumb, and the sidebar under it

Screens

Questions

About Harborline Bank, and about templates in general.

InputNumber and the formatters take a currency and a locale; change USD and en-US in data.ts and the transfer step.