Blend

Overview

Team Training is a fitness workout management system where master instructors create workouts with videos, resources, and instructions. Instructors can view workouts and members can submit results through linked forms.

Key Features

Workout Management

Rich Content Creation:
- Title and SEO-friendly slug
- Cover image for thumbnails and social sharing
- HTML rich text instructions
- Gallery with images and videos (drag-and-drop ordering)
- Downloadable resources (PDFs, spreadsheets)
- Status management (active/archived)
WYSIWYG Gallery:
- Visual preview with 16:9 aspect ratio
- Thumbnail strip for navigation
- Drag-and-drop reordering
- Double-click to edit items
- Support for images and video embeds
Tag System:
- Organize workouts by tags
- Color-coded tags for visual identification
- Multi-select filtering
- Tag management dialog

Form Integration

Linked Forms:
- Each workout links to a results submission form
- Members submit workout results
- Staff can view submissions as leaderboard data
- Export functionality for analysis

Public Workout Pages:
- SEO-optimized URLs with slugs
- No authentication required
- Full workout details with gallery
- "Submit Your Results" button linking to form
- Social media previews with cover images

Instructor Access

Workout Library:
- Card-based list view with thumbnails
- Filter by tags
- Search functionality
- View count tracking
- Quick access to forms and leaderboards

Database Models

Core Models

model TeamTrainingWorkout {
  id                String   @id @default(cuid())
  createdAt         DateTime @default(now())
  updatedAt         DateTime @updatedAt
  appId             String
  tenantId          String
  title             String
  slug              String
  status            String   // "active" | "archived"
  formId            String?
  config            String   // JSON: instructions, coverImage, gallery, resources
  createdByUserId   String
  updatedByUserId   String?
  tags              TeamTrainingWorkoutTag[]
}

model TeamTrainingTag {
  id        String   @id @default(cuid())
  tenantId  String
  name      String
  color     String
  workouts  TeamTrainingWorkoutTag[]

  @@unique([tenantId, name])
}

Workout Configuration (JSON)

{
  instructions: string;        // HTML rich text
  coverImage?: string;         // URL for thumbnails and SEO
  gallery: Array<{
    order: number;
    title: string;
    type: "image" | "video";
    src: string;
  }>;
  resources: Array<{
    title: string;
    src: string;              // URL to downloadable file
  }>;
}

Routes

Admin Routes

/app/{tenant}/apps/team-training - Workouts list with filtering
/app/{tenant}/apps/team-training/new - Create workout (super admin only)
/app/{tenant}/apps/team-training/{id} - Workout overview
/app/{tenant}/apps/team-training/{id}/edit - Edit workout
/app/{tenant}/apps/team-training/{id}/submissions - View form submissions

Public Routes

/__team-training/{tenant}/workout/{slug} - Public workout page
- Accessible by slug or ID
- No authentication required
- SEO optimized with meta tags
- Shows full workout details

User Roles

Master Instructor (Super Admin)

Create, edit, and delete workouts
Manage tags
View all submissions
Access analytics

Instructor (Regular User)

View all active workouts
Access public workout pages
Submit to linked forms
View workout details

Member (Public)

Access public workout pages
Submit results via linked forms
No authentication required

UI Components

InputGallery Component

Reusable WYSIWYG gallery management
Main preview area with 16:9 aspect ratio
Thumbnail strip with selection and reordering
Add/Edit/Delete functionality with dialogs
Support for images and video embeds
Visual feedback with hover states

WorkoutForm Component

Unified form for create/edit operations
Integrated InputGallery for media management
Cover image field for SEO
TableSimple for resources management
Rich text editor for instructions
Tag selection with management dialog

WorkoutPreview Component

Gallery with thumbnail navigation
Formatted instructions display
Resources list with external links
Cover image display

CardsList Component

Card-based list view with thumbnails
Responsive design with action dropdowns
Load more pagination pattern
Quick access to actions

Tag Management

Features

Create, edit, and delete tags
Color selection from predefined palette
Unique tag names per tenant
Multi-select for filtering workouts
Settings button for quick tag management

API Endpoints

POST /api/tags - Create tag
PUT /api/tags - Update tag
DELETE /api/tags - Delete tag

Use Cases

Master Instructor Workflow

Create new workout with title and slug
Add cover image for thumbnails
Write detailed instructions in rich text editor
Add gallery items (images/videos) with drag-and-drop
Upload resources (PDFs, spreadsheets)
Select tags for organization
Link to results submission form
Publish as active
Share public URL with instructors/members

Instructor Workflow

Log in to Team Training app
Browse workouts list
Filter by tags if needed
Click workout to view details
Access public page for sharing
Submit to linked form if participating

Member Workflow (Public)

Receive workout URL from instructor
View workout details (no login required)
Watch videos in gallery
Download resources
Click "Submit Your Results"
Fill out form
View leaderboard (future feature)

Configuration

Installation

Navigate to Apps section
Install "Team Training" app
Grant permissions to instructors

Setup

Create tags for workout organization
Set up result submission forms
Configure any custom fields needed
Train master instructors on workout creation

Best Practices

Content Creation

Use descriptive titles and slugs for SEO
Always add a cover image for better sharing
Keep instructions clear and concise
Order gallery items logically
Provide relevant downloadable resources
Tag workouts consistently

Organization

Use tags to categorize by:
- Difficulty level
- Equipment needed
- Body focus area
- Duration
- Program name
Archive old workouts instead of deleting
Link every workout to a results form