Status & the Milestone Track

Every matter carries a status that tells you, at a glance, where the file sits in its lifecycle. Athenty renders that status two ways: a compact status pill for density, and the Milestone Track — a visual timeline that shows the macro arc and the current sub-stage in one line.

The Milestone Track is the app-wide standard for status / progress timelines (issue #464, decision DEC-ui-001). Matter status is its first consumer; the same component is intended to power verification steps, e-sign flows, and client-portal milestones so progress reads the same way everywhere in Athenty.

Where you see it

Matter detail page — a compact, horizontal track under the stats strip, mirroring the status pill in the header.
Client portal — the matter page and dashboard show the same track (responsive: horizontal on desktop, vertical on mobile) so clients see exactly the progress your team sees.

The matter status taxonomy

The track is grounded entirely in the real matter taxonomy. There are two independent dimensions: a macro status (with Open sub-stages) and an orthogonal condition flag.

Macro status

Status	Meaning
Draft	Matter is being set up; not yet active work
Open	Active matter (carries a work sub-stage — see below)
Closed	Work complete; matter is read-only by default
Archived	Closed and removed from default views, retained for audit

The Archived node only appears on the track when the matter is actually archived — for everything else the arc ends at Closed.

Open sub-stages

While a matter is Open, it sits at one of four work sub-stages, shown indented under the Open node so the arc reads as a tree:

Sub-stage	Meaning
Backlog	Accepted but not yet started
Up next	Queued to start soon
In progress	Actively being worked
In review	Work done, awaiting review / sign-off

The track anchors the current node on the matter’s real sub-stage — an “In progress” matter shows the current marker on the In progress node, not on the generic Open node.

Condition flags — Delayed vs Cancelled

A condition is an orthogonal flag that overlays the current node while a matter is Open. It is not a position of its own — it rides on the matter’s actual sub-stage (DEC-ui-001 r2), so the real work stage is never lost when a matter is flagged.

Condition	Appearance	Meaning
Delayed	Amber ring + label on the current node	Temporarily on hold — recoverable. The arc ahead is untouched.
Cancelled	Muted-red node with an X + label	Work stopped (the matter is still Open). Nodes after the current one are greyed and struck through to read as terminal-within-stage.

The two are deliberately distinct: Delayed signals a pause you expect to resume, so downstream stages stay live; Cancelled signals the path forward has stopped, so downstream stages are visually voided. State is never communicated by colour alone — shape, an icon, and a text label all carry the meaning.

Responsive behaviour

The Milestone Track adapts to the surface:

Horizontal — nodes laid left-to-right with connectors between them; used on the matter detail header and on desktop.
Vertical — a node rail down the left with labels on the right; used on narrow / mobile widths.
auto — horizontal on sm+ screens, vertical below. Each layout is rendered as its own clean structure rather than one structure contorted to fit both.

The current node carries a subtle pulse; under prefers-reduced-motion it renders as a solid ring instead.

Reusing the component for future flows

The <MilestoneTrack> component (components/ui/milestone-track.tsx, mirrored in the client portal) is generic — matter status is just one consumer via the matterMilestoneModel(...) adapter. To drive a new flow (verification, e-sign, portal milestones), build your own steps array and pass it in.

Props

Prop	Type	Purpose
`steps`	`MilestoneStep[]`	Ordered nodes. Each has a `key`, a `label`, and an optional `group` (steps sharing a `group` are indented one level as sub-steps).
`currentKey`	`string`	Key of the current step. Steps before it render done; after it render future.
`condition`	`{ kind: 'delayed' \| 'cancelled', label }`	Optional flag overlaid on the current node.
`direction`	`'auto' \| 'horizontal' \| 'vertical'`	Layout (default `auto`).
`compact`	`boolean`	Smaller nodes + labels (e.g. the matter header).
`className`	`string`	Extra classes on the track.

Node states are derived from position relative to currentKey:

done — filled dot + check
current — primary-colour ring (with the pulse described above)
future — muted hollow dot

Accessibility

The track is a semantic ordered list; the current node carries aria-current="step"; state is encoded by shape + icon, not colour alone; and condition labels are real text (shown in a tooltip on the node and as a visible flag).

Matters — Detail Page — where the matter track lives.
Matters — Overview — filtering the caseload by status and sub-status.