Four-stage progress rail

A quiet hairline rail at the top of every customer page showing Estimate, Your Details, Agreement, Live Project, and which one they are on.

What it is

FunnelProgress renders four numbered steps. Earlier steps show a green check, the current one is filled in the builder's brand colour, later ones are muted. It is deliberately not clickable, customers cannot jump ahead, and an optional hint line under the current step says things like 'Preparing...' while a builder hold is in effect.

Also called: where am I in the process · steps · progress bar for customers

See it
Four-stage progress rail
Prepared for
Marlin Hoover
1140 Ridge Line Rd · Fair Play
Shell package$31,577
Concrete & site$9,167
Doors & windows$6,112
Trim & finish$4,074
Total
$50,930
Signature
The four-step rail with step 2 filled in a builder's brand colour and a pulsing 'Preparing...' hint. src/components/client-portal/FunnelProgress.tsx. Sample data — no customer information appears here.
How it works
  1. 1Each customer surface mounts it with its own currentStage value
  2. 2Completed, current and upcoming states are derived from stage index
  3. 3brandColor is threaded through from the tenant's portal branding
  4. 4Navigation is by completing the stage; the route gates handle redirection
Why we built it

The customer walks four separate surfaces between reading a price and watching their building go up, and buyers who filled in the details form assumed that was the last step. A thin rail across the top shows which of the four they are on and what remains. It is a hairline rather than a card on purpose, because orientation should not compete with the quote sitting directly underneath it.

The problem
  • Customers disoriented across a multi-surface funnel
  • Repeat 'what happens next' phone calls
Sound familiar?
What you get
Every screen answers where you are and what is left
Fewer status calls during the paperwork stretch

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →