Components · coach-admin
Program and workout cards
PlannedSummary cards for programs and workouts.
- Source
components/ui/card.tsx - Figma: not linked yet (Q13)
What it is for
Summary cards for programs (name, length, how many clients follow it) and for single workouts (exercises, sets, duration, done or not). They appear in the program library, a client's schedule and the program builder.
Built from
- Card, including the clickable-card pattern with a stretched title link.
- Badge for status (Done, Missed, Draft).
- Dropdown menu for card actions (Duplicate, Assign, Archive).
- Progress for program completion.
Guidelines so far
- One card type per item kind; don't mix program and workout cards in one grid.
- Cards in a grid are a list for screen readers.
Replaces in coach-admin
Workout and program summaries are styled separately across the program builder, the workout schedule tab and the smart nutrition preview.
From the read-only audit of coach-admin: 96 style values, 108 uses.
Classes and selectors
.workout-angel .field-string:last-child .btn-primary8.workout-angel .field-string:last-child .remove-pic6.workout-gran3.workoutItemListContainer3.workoutThumContainer3.workout-listing p2.workoutDate2.program-s-divider2.program-header-alert2.workout-type2.workoutItem-rest2.programFlowStepsContainer2
Files
src/views/Program/WorkoutSchduleTab/workoutStyles.css21src/views/Program/ProgramNewFlow/BuilderStep/WeekForm/SingleDayCard.js2src/views/Program/SmartNutritionPreview/components/BasicInfoCard/BasicInfoCard.scss2src/views/Program/SmartNutritionPreview/components/ClassificationsCard/ClassificationsCard.scss2src/reusableComponents/helpers/WorkoutSectionCard.tsx1src/views/Program/WorkoutSchduleTab/WorkoutInfoView.js1
The inventory lists the first 12 locations of each value, so file counts are a lower bound.
SCSS variables in these styles
$grey-text-color→--foreground-secondary$border-color→--border$primary-color→--primary