Leasing progress — the direction

Settled: NOI-tabs sizing, brand-spectrum color per stage (violet → indigo → blue → cyan), full-column click target, "reached" (the fill) split from "viewing" (whatever you clicked). The glow from the last pass is gone — viewing now reads as a faint tint + bold colored label only.

Built off Gera's 2026-08-27 note: "the highlighted one is my favorite, just no highlight... we should still see that faint color... just need to remove the glow."

Leasing progress rail

Reached fills solid; a thin card marks what you're viewing

final

A stage lights up solid in its own brand color once the lease reaches it. Clicking an earlier or later stage to read its detail tints the bar faintly and wraps just the label in a light card — that's the primary "you're looking at this one" signal now. The status line below still spells out reached vs. viewing, just quieter.

Simulate the lease actually advancing:

When it ends early

The cancelled stage turns red in place; everything after it is struck out

for review

Same rail, same four columns — the cancelled stage recolours rather than a fifth column being inserted, so the axis still means "the four leasing stages" and two prospects' rails still line up. Click any stage to read its detail, including the cancelled one.

reached cancelled here will not happen not reached yet (compare the rail above)
Cancel after:

Cancelled is its OWN step, sitting between the stages

recommended

The marker takes its own position on the rail rather than recolouring a stage — so Tour still reads as reached, and the rail says precisely where the lease died. That is the thing the version above cannot express: a red "Tour" can't tell you whether they toured and then cancelled, or never toured at all. It stays narrow on purpose, so the four stages keep their width and two prospects' rails still line up. Click it.

reached cancelled here will not happen
Cancel after:

Why this one over the red-stage version: position carries meaning that colour can't. Inquiry ✓ · Tour ✓ · ✕ · Application ✗ says they toured and then cancelled; Inquiry ✓ · ✕ · Tour ✗ says they cancelled before ever touring. The red-stage version renders those two stories identically. It also handles more than one cancellation, which recolouring structurally cannot — a stage can only be red once.

The one thing worth deciding here: a foreclosed stage must not look like an un-reached one. Plain grey is already what "not reached yet" means on the rail above, so greying the tail would say nothing new — a reader could not tell never will from hasn't yet. The hatch + strikethrough above is one answer; the point is that it has to differ somehow.

Open question, not settled by this mock: is "cancelled" a property of a stage, or an event in time? This design assumes the former. If a prospect can hold a cancelled tour and a completed one, no single segment is "the cancelled one" and this shape breaks — that needs a look at the data model before it gets built.

Still open, separately: Activity Log's vertical connector line — not touched here, since it's a flat history list with no "reached vs. viewing" split to make.

PropFlow Docs