SortMe Prototype — prd-118-money-flow

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.

Enter prototype

Variants: Money Flow · My Budget — buckets · Spend Overview — by bucket · My Overview

Money Flow

primary

Reach: Spend → Money Flow

Default. Income, the hub, three sibling buckets with amount and share, the leftover. Everything collapsed.

Desktop
Mobile

No framework yet — blank template

state

Reach: First visit, after the buckets are seeded

The default for a household that hasn't set up a framework: the full four-bucket system shown as a blank template. Same buckets, default descriptions, no accounts connected, no amounts, no targets, dashed connectors because no money moves yet. Income still shows — it comes from the bank feed. Setup happens here (register rows 1, 52, 61).

Desktop
Mobile

Setup part-way — 2 of 4 buckets

state

Reach: Set up Household Essentials and Lifestyle Spend from the blank template

Stage 1. Set buckets turn solid with their amount and account; the other two stay dashed. The intro card counts progress and the leftover card appears with the running total.

Desktop
Mobile

Picking an account

state

Reach: Set this up on Short-term savings → + Add an account

Stage 1. The live account list (components/goals/BankList.tsx). Accounts already used by another bucket show which one and can't be picked.

Desktop
Mobile

Can't save — entry missing

state

Reach: Set this up on a bucket → Save with nothing filled in

The footer names what's still missing, in the live income editor's error style (EditIncomesModal.tsx), and the field messages repeat it where the fix is. Focus moves to the first field that needs attention.

Desktop
Mobile

Income sources

secondary

Reach: More on the income box

Desktop
Mobile

Editing income

state

Reach: More on income → Edit

The live EditIncomesPopover from the budget page (components/new-budget/EditIncomesModal.tsx), transcribed. A popover, not a modal.

Desktop
Mobile

Household Essentials open

secondary

Reach: More on the hub

Desktop
Mobile

Lifestyle Spend open

secondary

Reach: More on Lifestyle Spend

Desktop
Mobile

Transfer unconfirmed

state

Reach: More on Short-term savings

SortMe could not match the transfer, so it asks. Sub-bucket allocations totalling the $520.00 on the branch.

Desktop
Mobile

No automatic payment + estimated bucket

state

Reach: More on Long-term savings

Desktop
Mobile

Adding a spend target

state

Reach: Edit a bucket → + Add a spend target

Searchable picker over the real 178 NZFCC expense categories. A category already capped in this bucket is disabled; one capped in another bucket is allowed and labelled.

Desktop
Mobile

Transfer confirmed

state

Reach: Answer Yes on the unconfirmed transfer

Desktop
Mobile

Renaming a bucket

state

Reach: Pencil beside a bucket name

Desktop
Mobile

Save failed

state

Reach: Rename a bucket, connection drops

Desktop
Mobile

My Budget — buckets

primary

Reach: Spend → My Budget

The BudgetGroupTable shape with its category groups restructured as the four buckets.

Desktop
Mobile

Spend targets in a bucket

secondary

Reach: Open a bucket's categories

Category targets each carry their own timeline, normalised to the household's cycle.

Desktop
Mobile

A category in two buckets

state

Reach: Lifestyle Spend categories

Eating Out tracked separately inside Household Essentials and Lifestyle Spend.

Desktop
Mobile

Spend Overview — by bucket

primary

Reach: Spend → Spend Overview

Desktop
Mobile

Pre-allocated bill is not an overspend

state

Reach: Household Essentials detail

Spent $1,686.40 of $1,460.00 allocated and explicitly NOT flagged — the rule the whole reporting change exists for.

Desktop
Mobile

Bucket detail

secondary

Reach: See what it went on

Desktop
Mobile

My Overview

primary

Reach: Overview

Scaffolded from the kit's financial-overview screen template, with the Money Journey and Money Flow cards added.

Desktop
Mobile

Action Needed present

state

Reach: Overview when the household has pending actions

The conditional ActionNeededSection. default_visible:false in the region manifest, so it is its own state rather than part of the default page.

Desktop
Mobile

Bucket amount save failed

state

Reach: Edit a bucket amount, connection drops

This page owns the four numbers that are the budget, so it needs the same save / saved / failed affordances as the rename on Money Flow.

Desktop
Mobile