Report · 4 September 2026

Referrals Redesign

A referral is a client handed to another licensed agent for a share of their commission, settled months later out of a deal that does not exist yet. It is the largest money in the app and the longest wait: one referral here is worth $5,375 against a $95 showing. The page split four of them across three tabs, so an agent could never see their own book, and carried no dates at all on the one surface where the only real question is whether anything is still moving. Same sample data, same tokens, nothing renamed.

Scope The Referrals page and the row that carries a referral Status Committed as 3b0256e on 2026-09-04; deployed

What was wrong with it

The previous Referrals page: three tabs reading Sent to me (1), I sent (2), Open board (1), with a single narrow card under them in a three-column grid and a large empty area filling the rest of the page. — Before. The default tab held one referral in a grid built for three, and the other three were behind tabs.

The book was never visible. Four referrals across "Sent to me", "I sent" and "Open board". An agent could see a quarter of their referral position at a time, on the page where the money is largest.
One card in a three-column grid. The page opened on a single narrow card with about seventeen hundred pixels of empty background under it.
No time anywhere. The component's own comment said "the question everyone actually has is is this still moving" — and then showed no dates. Every referral carries postedAt and the card used none of it, so one sent yesterday looked exactly like one sent four months ago.
The referral you were owed on had no action. The invoice button was conditioned on the referral having been sent to you. The sample referral that had closed months earlier — your client, your fee, your $3,200 — rendered with nothing to do about it at all.
An unclaimed referral claimed your signature. A referral sitting on the open board, which nobody had taken, was badged "Awaiting signature" as though the agent were already on the hook for it.
Four bars of chartreuse. The stage track filled every reached segment with the accent, so a page of referrals was mostly accent — on a colour the system reserves for the single primary action.
No totals. Nothing summed what was coming in or going out.

What it is now

Grouped by what each referral needs, the same spine as the listings board, with the whole book on one screen and a rail that totals it in both directions.

The redesigned page: sections headed Needs you, In flight and On the board. Each referral is a full-width row showing the city and price band, who it is with and how long ago it was sent, the money direction and amount, badges, the motivation, and a five-segment stage track. A rail on the right reads Coming to you $5,300, Going out $5,375, Needs you 1, Oldest unsettled 16 weeks. — After. All four referrals at once, each carrying its age, and the book totalled.

Three sections instead of three tabs. Needs you holds anything closed and unsettled or waiting on a signature. In flight is signed and moving. On the board is unclaimed. Oldest first everywhere, because on a page measured in months the thing that has sat longest is the thing to look at.
Every row says its age. "Sent 16 weeks ago" beside a closed deal is the page telling you a fee has been owed to you for four months. That one line is the answer to the question the page was already asking.
Both directions can invoice. Worded from the viewer's side: you raise the invoice on a referral you handed out, and generate one on a referral you took.
An unclaimed referral says "Unclaimed". No signature obligation on something the agent has not accepted.
The accent is one mark. The stage track is foreground weights now — even keeping the accent for just the current segment left five accent marks competing with the one button that settles money.
No empty action bars. A bordered strip used to render under any referral whose stage had a successor, whether or not the viewer's side had a button to put in it.
The rail totals the book. Coming to you, going out, how much needs you, and how long the oldest unsettled one has been waiting.

The redesigned page in the light theme, with the same sections and rail on a warm off-white ground. — Light. The stage track reads on both grounds without a second definition.

The page at 390px: the rail two by two at the top, then the sections stacked with each referral as a full-width row. — Phone. The rail goes two by two above the book.

Still a preview

This page runs on sample data and says so at the top. There is no "pay now" on it and that is the design rather than an omission: a referral settles out of a commission that does not exist yet, months out, and a card cannot be authorised that long. The app holds the agreement, the stage and the invoice; the money moves broker to broker when the deal actually closes. Nothing in this pass changed that, and none of the buttons here move money.

Files

File	What changed
src/components/ReferralRow.tsx	New. The full-width referral row: counterparty and age, money direction, badges, the stage track, and whatever action the viewer's side actually has.
src/pages/MyReferrals.tsx	Rewritten. Grouping by what each referral needs, the two-direction rail, and the tabs removed.

Verified in both themes at 1440px and 390px. Typecheck and production build clean from a detached checkout, no console errors on the deployed page.