Components
Milestones
Milestones
The case-progress bar shown on transaction detail pages and list rows. One segmented track: completed stages read green, the current stage is an amber track filled to its real Hoowla sub-task progress, upcoming stages are muted, and the completion "goal" is a primary segment with a flag once a completion date is set. Conveyancers also see the x-of-y task count beneath the current step.
This documents the milestone-bar pattern rendered by
_MilestoneBar from a
MilestoneBar model (built by MilestoneBarBuilder
from synced Hoowla milestones). There is no tag helper — pages render the partial. Bars below are static illustrations
(the live component animates the current stage with a shimmer).
Canonical
Now
Searches
Next
Enquiries
2 of 5 tasks
26th June
Green = done, amber = in progress (filled to the real sub-task %), grey = upcoming, primary + flag = the completion goal.
States
4 statesCurrent — amber, filled to sub-task %
Blocked — danger track
Complete — all green
Goal — primary + flag (completion date set)
Model
MilestoneBar| Field | Notes |
|---|---|
| Steps | Ordered stages with state (Completed / Current / Blocked / Upcoming), label, and sub-task counts. |
| ShowTaskCounts | Conveyancer audience only — renders the "x of y tasks" line under the current step. |
| CompletionText / Short | The completion date beneath the goal segment; when null the completion stage isn't differentiated (no flag / primary track). |
| Compact | Tightens vertical margin for list rows; the detail page uses the roomier default. |
| IsBlocked / IsComplete | Drive the headline colour (danger / neutral) and whether a current step is named. |
Do & don't
Do
Build the bar via
MilestoneBarBuilder for the right audience, and render the shared _MilestoneBar partial.
A second, differently-styled progress bar hand-rolled on one page
Don't
Don't hand-roll a bespoke progress bar — reuse the partial so every surface reads the same and audience rules (task counts) stay consistent.