Personal Trainer Weekly Programme Profile Block for React

Edit the constants at the top. DAYS lists the seven days: each has an id, a short name, the session's name and its exercises, each with a name and what it asks for as text. A day with no exercises is a rest day. WEEK_START is the Monday of the week on show and AS_OF the day the page treats as today, which labels the day's heading. TICKED_AT_LOAD lists what is ticked when the page opens; in a real app read it from the client's log. The counts, the bar and each tab's line are worked out from the ticks.

A session is done when every one of its exercises is ticked. The count in the week band and the bar are the sessions done out of the five that are not rest days, so ticking the last exercise of Friday moves it from 3 of 5 to 4 of 5 and the tab changes from "2 of 4" to Done with a tick. Unticking an exercise moves it back. Nothing is typed twice.

It ticks every exercise of the day that is open and says so in the status line, with the new count. On a rest day, or a day that is already done, it says there is nothing to mark. The button is marked aria-disabled in those cases rather than disabled, so it keeps its place. Nothing leaves the page: to make it real, save each tick to your own API in the change handlers.

The tabs are a labelled tab list with a panel for each day, and every checkbox is named "Done" followed by the exercise and described by its sets and load. A tick spans the whole row, so the name is a target too. The status line is a polite live region present from the start; each tick is spoken as "Back squat: done. 2 of 4."

The seven tabs scroll sideways inside their band, with the next one showing. A day's panel keeps the same height for every day, so changing the day moves nothing below it, and the foot stays pinned to the bottom of the screen while the panel scrolls. The sets and loads keep their order in a right-to-left layout.