Workout logger

A React block (a whole screen) in Beamline's Salon & fitness app.

A live training session: every exercise's sets as target-table rows with a done column; marking a set done fills its shape and starts the rest by itself (a timer bar dragged for more or less, or skipped); a timed set's own inline timer marks it done; the elapsed time, the counts and the set up next beside them. Finish opens the review (name, date and start time, duration, how it went, a photo, who sees it, where it goes); Save says saved and each destination's result apart; a session that changed its routine then asks to update it, and a routine changed meanwhile is said.

Use it for

Logging a training session as it happens: sets marked done, a rest between them, a timed set, then saving it with where it goes.
Any session of repeated rounds done live, with a rest between rounds and a review at the end (rehab, drills, intervals).

Not for

Planning routines or a program (workout-planner).
Looking back at history and records (training-progress).

Anatomy

head: the session's title (on a phone the elapsed time beside it)
exercises: each a card with its name ('Added this session' when it isn't in the routine) and its sets as target-table rows with done; the set up next ringed; a timed exercise's next set with its inline timer
side (wide; a docked foot on a phone): the elapsed time large with its start, sets done of all and volume, the rest while it runs (the timer's large form with Skip rest), the rest's end said once, the set up next in words and drawn as its shape (stays in view through the rest) with Last time and Go to the set, the session outline (a tick per set), Finish after it
review: name, date, start time, duration (minutes, scrubbed or typed), how it went, a photo; beside it the duration, sets and volume large, sets not done said, who sees it, where it goes, Save
after the save: Saved to your history and one line per destination (sent, or not sent with the reason and Try again); then, if the session changed its routine, the changes in words with Update the routine or Keep the original

States

nothing done yet; some done; every set done
rest running (bar drag or ←/→ give more or less; Skip rest), rest ended ('Rest's over: Bench press, set 3 is next.' once), no rest (after the last set, before a drop set, rest off)
a done set undone (its rest stops)
a timed set running its own timer, which marks it done at the end
an exercise added this session
review: sets not done said; saving; save refused (the reason with Try again, nothing lost); saved with a destination that failed (its own line, Try again), a destination sending
routine decision: asking, updating, changed elsewhere (said; Update becomes Replace with this session), updated, kept
narrow room: one column, the rest and Finish docked at the foot, the elapsed time in the head

Keyboard

every set's fields, bar and done mark as target-table's (Tab, arrows on the bar, Enter or Space on done)
the rest's bar: ←/→ five seconds (Shift: thirty), as the timer's
Go to the set moves focus to the next set's done mark
the review's fields in order; Save; Try again on a failed destination

Motion

Done fills the set's segments one after another from the row's start (a short ink sweep, once); the rest's bar drains with the clock. Nothing else moves; reduced motion fills at once.

Props

Prop	Type	Default	Description
`title / startedAt` (required)	`string / number`	—	title: The session's name ("Push"); editable in the review. startedAt: When the session started (ms since the epoch, your clock).
`exercises` (required)	`Exercise[]`	—	The exercise library (names and measures).
`items / defaultItems / onItemsChange`	`PlanItem[]`	—	The session's exercises and sets (what Start handed you), edited live.
`done / defaultDone / onDoneChange`	`string[]`	—	Ids of the sets marked done.
`routine`	`Routine \| null`	—	The routine the session started from: after a save, a changed session offers to update it.
`destinations`	`{ id, name }[]`	—	Where a saved workout can also go; all are chosen by default.
`onSave` (required)	`(workout: FinishedWorkout) => Promise<DestinationResult[]>`	—	Saves the workout. Resolve with each destination's result (a failed destination is not a failed save); reject when the workout itself wasn't saved (its message is shown with Try again).
`onRetryDestination`	`(id: string) => Promise<DestinationResult>`	—	Sends a saved workout to one destination again.
`onUpdateRoutine`	`(items, { replace }) => Promise<"updated" \| "conflict">`	—	Writes the session's exercises and sets into the routine. Resolve "conflict" when the routine changed since the session started (its revision moved); `replace` then asks to overwrite it anyway.
`onDone`	`() => void`	—	After the save (and the routine decision, when there is one): your app leaves the session.
`view / defaultView / onViewChange`	`"log" \| "review"`	—	The session or its review.
`clock`	`() => number`	—	Your clock (ms since the epoch). Default Date.now. Elapsed time and rest are read from it.
`title` (required)	`string`	—	The session's name ("Push"); editable in the review.
`startedAt` (required)	`number`	—	When the session started (ms since the epoch, your clock).
`items`	`PlanItem[]`	—	The session's exercises and sets: what Start handed you (workout-planner's PlanStart.items), edited live.
`defaultItems`	`PlanItem[]`	—
`onItemsChange`	`((items: PlanItem[]) => void)`	—
`done`	`string[]`	—	Ids of the sets marked done. Store them with the items to survive a reload.
`defaultDone`	`string[]`	—
`onDoneChange`	`((done: string[]) => void)`	—
`view`	`LoggerView`	—
`defaultView`	`LoggerView`	—
`onViewChange`	`((view: LoggerView) => void)`	—
`labels`	`Partial<{ elapsed: Message; startedAt: Message; setsDone: Message; setsDoneLabel: Messa…`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`defaultPhoto`	`{ src: string; alt: string; } \| null`	—	A photo the session already has (taken on the phone during it): the review opens with it as the post's picture.

Built from

target-table
timer
button
input
date-picker
time-picker
number-field
textarea
file-dropzone
radio-group
checkbox
alert

Dependencies

lucide-react

Import

import { WorkoutLogger } from "@beamline/workout-logger";

Get it

Workout logger is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Workout loggerComplete system · $49

A live training session.

A session under way

Push, 24 minutes in: the bench's warm-up and first two sets done. Press a set's done mark: its shape fills and the rest starts by itself; drag the rest's bar for more or less, or skip it.

0 × 0full

A timed set

Everything but the plank is done. The plank's own timer runs its 45 seconds and marks the set done when it ends.

0 × 0full

Saving: one destination doesn't answer

The review. Save: the workout is saved, the health app gets it, the watch doesn't (its own line, with Try again). The plank was added this session, so the routine question follows: Push was changed elsewhere meanwhile, and that is said.

0 × 0full

The save is refused

Ironwood can't reach its server: the reason with Try again; nothing in the review is lost.

0 × 0full

About Workout logger

← Workout planner Training progress →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Workout logger

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in Salon & fitness