Programs

Program list, detail view, and workout builder. Trainers create and manage programs; clients view assigned/enrolled programs. The builder supports drag-and-drop workout organization with real-time auto-save.

Route Information

Program List

Route: /programs

File: programs/index.tsx

Max Width: max-w-6xl

Program Detail

Route: /programs/$programId

File: programs/$programId/index.tsx

Max Width: max-w-4xl

Program Builder

Route: /programs/$programId/edit

File: programs/$programId/edit.tsx

Max Width: max-w-6xl

Program List (Trainer View)

Grid of program cards with status tabs (All, Draft, Published, Archived). Header includes page title and "Create Program" CTA button.

Programs List — Populated

Programs

Create and manage your fitness programs.

Shred 90

Published

12 weeks · Intermediate

4.9 $49

Home HIIT

Draft

6 weeks · Intermediate

No reviews yet Free

Strength Foundations

Published

8 weeks · Beginner

4.8 $29

Empty State

Programs List — Empty

No programs yet

Create your first program to get started.

Workout Builder

The builder uses a tree structure with drag-and-drop via @dnd-kit. Workouts contain exercises with sets/reps/tempo/notes. Auto-saves via concurrent-safe mutations with shared mutationKey.

Workout Builder — Active

Shred 90 — Workouts

Saved

Day 1 — Upper Body Push

5 exercises

1

Bench Press

4 sets × 8-10 reps · 3010 tempo

2

Overhead Press

3 sets × 10-12 reps · 2010 tempo

3

Incline Dumbbell Fly

3 sets × 12-15 reps · 2011 tempo

Component Inventory

Component Source Usage
ProgramCardprograms/-components/program-cardGrid card with status, rating, price
WorkoutBuilderprograms/-components/workout-builderDrag-and-drop workout tree
ProgramMetadataFormprograms/-components/program-metadata-formTitle, description, duration, difficulty
ExercisePickerDialogprograms/-components/exercise-picker-dialogSearch and add exercises
SaveStatusprograms/-components/save-statusAuto-save indicator (Saving.../Saved)
Tabs / TabsList / TabsTrigger@/components/ui/tabsStatus filter tabs on list page
SortableItemprograms/-components/sortable-itemdnd-kit sortable wrapper

Data Requirements

Queries

  • myProgramsQueryOptions — list of trainer's programs
  • builderKeys.builder(programId) — full builder tree

Mutations

  • useDeleteProgram()
  • useUpdateProgramStatus()
  • useAddWeek(), useAddWorkout(), etc. (concurrent-safe via shared mutationKey)

Responsive Behavior

Desktop

3-column program grid. Builder shows full workout tree. Tabs inline.

Tablet

2-column program grid. Builder full-width.

Mobile

Single column cards. Create button stacks below title. Tabs scroll horizontally.