SortMe Prototype — prd-108-split-transactions

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

Transactions list

primary

Reach: Transactions

Default load for the typical prod user (free tier, no filters). One transaction is already split from earlier use — its "Split · N ways" marker sits under the amount and the meta line shows no category. Change Category is a searchable combobox with Close and Save; Save is disabled until the category changes.

Desktop
Mobile

Split editor — just opened

primary

Reach: Expand an expense → Split (under the amount)

Reached from the Split action that sits under the amount on the expanded row (concept placement). The editor opens with every dollar input empty (Aidan 26 Aug 2026): the first part keeps the transaction's current category but its amount is blank, and the second part is fully blank. Empty counts as 0, so the editor opens showing the full amount as Remaining and Save disabled until the remainder reaches zero.

Desktop
Mobile

Split editor — part-allocated

state

Reach: Split → enter less than the total

Live remainder with Save blocked. HANDOFF AC2.

Desktop
Mobile

Validation — over-allocated

state

Reach: Split → enter more than the total

Parts total more than the transaction.

Desktop
Mobile

Validation — duplicate category

state

Reach: Split → pick the same category twice

HANDOFF FR4 / AC6.

Desktop
Mobile

Save as a rule

state

Reach: Split → tick "Always split … like this"

Opt-in with the explainer of what the rule will do. Live: ticking the box and saving creates an in-session rule keyed on the merchant and applies it at once to every other matching expense (parts scaled by amount). HANDOFF FR10.

Desktop
Mobile

Saving

state

Reach: Split → Save split

In-flight state, controls disabled.

Desktop
Mobile

Save failed

state

Reach: Split → Save split → request fails

Error message with the values kept so the user can retry.

Desktop
Mobile

Split transaction, expanded

primary

Reach: Split any expense and save, then re-expand it

The split parts card, with the "Split · N ways" marker under the amount. Each part shows a subline with its OWN tags and its OWN entity link (Aidan 26 Aug 2026, HANDOFF FR36/FR37): tag chips with add/remove and a "+ Tag" control, then the entity link ("Link to Entity" when empty, the entity name when set). The entity control is Pro-gated like the row-level one; notes and attachments stay transaction-level. One seeded part carries a "Reimbursable" tag and a "Rental — Matai St" entity. Live: any expense can be split and saved repeatedly, and Remove Split returns it to its ORIGINAL pre-split category (else the largest part). v1 has no split editing: the action row shows Remove Split (Pro-gated, like creating one) in place of the old Edit Split, so the user removes the split and creates a new one. The single-category control is hidden here, so the only other button is Close, which sits on the options row.

Desktop
Mobile

Split — upgrade modal (free tier)

primary

Reach: Expanded expense → Split (under the amount) as a free user

Splitting is Pro-only. A free user still sees the Split link, but tapping it opens the standard Pro-gate upgrade modal (ProUpgradeModal.tsx, the same modal Entities opens) with copy adapted for splitting, not the editor. Dismissing returns to the list. A Pro user goes straight to the editor.

Desktop
Mobile

Split applied by a rule

state

Reach: Save a split as a rule, then watch it apply to the other COUNTDOWN rows

Shows the standard split marker — v1 does not show rule provenance ("by a rule" cut 26 Aug 2026; future improvement). Live: saving any split with the rule box ticked cascades to sibling expenses from the same merchant; removing one rule-made split reverts only that row. HANDOFF FR11 / AC16.

Desktop
Mobile

Income row — Split available

state

Reach: Expand an income transaction

Income is splittable now (Aidan 26 Aug 2026). Expanding an income row offers the same Split action as an expense, the editor works the same way (amounts positive, "Split · N ways" marker under the income amount), and rules apply to matching income merchants. Transfers and mortgage transactions stay un-splittable. HANDOFF FR14 / FR21 / AC19.

Desktop
Mobile

My Rules — split rules listed

primary

Reach: Sidebar → Build My Life → My Rules, or ?screen=my-rules

The real Build My Life › My Rules page (MyRulesTable.tsx desktop table, RuleCard.tsx mobile cards). Lists existing rule types (a categorization and an ignore rule, both the real 'Transaction' badge) plus split rules under a new lavender 'Split' badge. A split row shows the match (merchant or 'Description contains ...') and the action as PERCENTAGES, e.g. 'Split: Groceries 80% / Household 20%' (FR10 — rules are proportional, not dollar-fixed). Split rules are view + delete only in v1: no pencil, delete opens DeleteRuleModal. Live: a rule created in the split editor this session appears here at once; deleting a split rule removes it but leaves already-split transactions split. Not Pro-gated.

Desktop
Mobile

Loading

state

Reach: First load / refetch

Real page skeleton, from the screen template.

Desktop
Mobile

Empty

state

Reach: Search returns nothing

Real page empty state, from the screen template.

Desktop
Mobile