Screens in this prototype

Every screen and state, on desktop and mobile, at a glance. Click any frame — or Enter the prototype — to open it live.

Variants: Pro user · Non-Pro user (upsell)

Transactions list (default)

primary

Reach: Transactions page, default view

Populated NZ data in two columns (Income / Expenses). The row source is shown by the avatar: one manual row (outline-pencil avatar) and one CSV-imported row (outline-document avatar) sit among the feed rows (letter avatars) in the Expenses column. No text pills.

Desktop

Mobile

Add transaction form (empty)

primary

Reach: Transactions → + Add transaction

Default sheet: Expense active, date = today, amount / description empty, category 'Choose a category…'. Modal on desktop, bottom sheet on mobile.

Desktop

Mobile

Form — validation errors

state

Reach: Add transaction → Save with empty required fields

Per-field errors visible (amount, category, description); submit blocked, no API call.

Desktop

Mobile

Form — saving (in-flight)

state

Reach: Add transaction → Save

Fields + buttons disabled, primary shows a spinner + 'Saving…' — double-submit guard visible.

Desktop

Mobile

Form — API error

state

Reach: Add transaction → Save fails

Friendly error banner; fields preserved and re-enabled for retry.

Desktop

Mobile

Saved (list after create)

state

Reach: Add transaction → Save succeeds

Success toast; the new manual row at the top of Today's group with the pencil source avatar and a subtle highlight.

Desktop

Mobile

Row sources — manual vs CSV vs feed

primary

Reach: Transactions → click a row

One deep-link expands all three source treatments at once: the manual row (pencil avatar) and the CSV row (document avatar) each show full detail (category control, Ignore, Add Tag, Add Note, Link to Entity) PLUS Delete only (delete-only, no edit); a feed row (letter avatar) expanded nearby is locked and has no Delete.

Desktop

Mobile

Delete confirmation

state

Reach: Manual or CSV row → expand → Delete

Destructive confirm dialog over the list — Delete (red) / Cancel. Opens from a manual row or a CSV row (both are delete-only); the copy adapts (re-add via + Add transaction for manual, re-import for CSV).

Desktop

Mobile

CSV row — non-Pro can delete

state

Reach: non-Pro user → expand the CSV-imported row

CSV-row delete is NOT Pro-gated: Delete + confirm work for non-Pro, while + Add transaction still opens the upsell (AC6b)

Desktop

Mobile

Pro upsell (non-Pro)

primary

Reach: Non-Pro user → + Add transaction

Pro upgrade prompt in the same container the form would use: hero, feature checklist, billing toggle, 'Upgrade to Pro' CTA, dismiss. The list has no manual rows.

Desktop

Mobile

Pro upsell — Boost subscriber (plan swap)

state

Reach: Boost-tier user taps + Add transaction

No trial framing; in-place swap; proration confirm before charge

Desktop

Mobile

Proration confirm (Boost→Pro)

state

Reach: Boost upsell → Upgrade to Pro

Yes/No before prorated charge; card on file, no re-entry

Desktop

Mobile