Network · route-tracker

Route tracker

The oprec applicant's journey as a route: Online form → Written test → Interview → Results. Horizontal on desktop, vertical on phones, with one “You are here”.

Tracker

Switch the example between in progress, not selected and accepted. Passed and current stations are pressable; they open that stage's panel below.

Preview

Sample status

Submitted · Sep 12
Passed · Sep 16
You are hereChoose an interview slot before Sep 18
ResultsSep 27

The Interview stage panel shows here: test upload, interview booking, or results.

Show code

<RouteTracker
  stages={stages}
  currentStage={applicant.currentStage}       // 0–3, or 4 when rejected
  rejectedAtStage={applicant.rejectedAtStage}
  acceptedLine={applicant.acceptedAs}          // e.g. "humas"
  selectedStage={selected}
  onSelectStage={setSelected}
/>

Station states

State	Shows
Passed	Filled, with a short result line (“Passed · Sep 16”).
Here	The halo, “You are here”, and what to do next (“Choose an interview slot”).
Upcoming	An empty ring, with its date if known. Not interactive.
Ended	currentStage 4 with rejectedAtStage n: the route stops at n with a danger terminus and “Not selected”; later stations gray out. The message is kind and specific, in BPH's voice.
Accepted	The final station shows “Accepted” and the division's line badge, and the route continues a short way in that color: the applicant has transferred onto their new line.

Rules

An <ol> with aria-current="step" on the current station, and each station's state in text.
Nothing loops: the halo is static.

Don’t

Emoji stage icons (📝 ✍️ 🎯 🏆) on gradient cards.

The route tracker, with stations, plain stage names, dates and one “You are here”.