Scheduling & Calendar

Session management for training appointments between trainers and clients, including scheduling, joining online sessions, tracking past sessions, and leaving reviews.

Overview

The Sessions feature provides a centralized hub for clients to view, manage, and join their training sessions. Sessions are organized into two tabs: upcoming sessions that are either confirmed or pending, and past sessions that are completed. Each session card displays the trainer name, date/time, duration, session type (online or in-person), focus area, and current status.

Online sessions feature a "Join Session" CTA button that connects clients to their trainer via video. In-person sessions display a "View Details" button with location information. Past sessions support a 5-star rating system, allowing clients to leave reviews after completion. Sessions with existing ratings display filled stars, while unrated sessions prompt the client with a "Leave Review" button.

The current implementation uses mock data to prototype the UI. The backend infrastructure for session creation, scheduling, calendar integration, and real-time status updates has not yet been built. Future work includes trainer-side session management, availability calendars, recurring sessions, cancellation policies, and video call integration.

User Stories

Client

As a client, I want to view my upcoming sessions so that I know when and where my next training appointment is.

As a client, I want to join an online session with one click so that I can seamlessly connect with my trainer for virtual training.

As a client, I want to see the status of each session (confirmed/pending) so that I know which sessions are finalized.

As a client, I want to review my past sessions and leave star ratings so that I can provide feedback and help other clients find great trainers.

As a client, I want to see the focus area for each session so that I can prepare appropriately for the workout.

As a client, I want to distinguish between online and in-person sessions so that I know whether to prepare my home setup or travel to a gym.

Trainer (Future)

As a trainer, I want to set my availability calendar so that clients can only book sessions during my open hours.

As a trainer, I want to confirm or reschedule pending sessions so that I can manage my schedule efficiently.

Data Model

Table Column Type Description
sessions id uuid Primary key
trainer_id uuid (FK) References users.id
client_id uuid (FK) References users.id
scheduled_at timestamptz Session start date and time
duration_minutes integer Session length (45, 60, 90 min)
type enum online | in_person
focus_area text e.g. "Upper Body Strength"
status enum confirmed | pending | completed | cancelled
meeting_url text Video call URL for online sessions
location text Physical address for in-person sessions
session_reviews id uuid Primary key
session_id uuid (FK) References sessions.id
reviewer_id uuid (FK) Client who left the review
rating integer 1-5 star rating
comment text Optional review text

Screens & Routes

/_authed/_onboarded/_client/sessions Client sessions page — tabs for upcoming and past sessions
/_authed/_onboarded/_trainer/sessions (Planned) Trainer sessions management view
/_authed/_onboarded/_trainer/availability (Planned) Trainer availability calendar setup

Session Card Anatomy

Upcoming Session Card

Header: Trainer name + type badge (Online/In-Person) + status badge (Confirmed/Pending)
Content: Calendar date + clock time · duration + focus area
Footer: "Join Session" button (online) or "View Details" button (in-person)

Past Session Card

Header: Trainer name + type badge + "Completed" badge
Content: Calendar date + clock time · duration + focus area + star rating
Footer: "Leave Review" button (unrated) or "Reviewed" disabled button (rated)

Acceptance Criteria

  • Client can view upcoming sessions in a tabbed interface with session count badges
  • Each session card displays trainer, date, time, duration, type, focus area, and status
  • Online sessions show a "Join Session" button; in-person sessions show "View Details"
  • Past sessions display star ratings for previously reviewed sessions
  • Unrated past sessions show a "Leave Review" CTA button
  • Session creation and booking flow from the trainer side is not yet built
  • Calendar integration and recurring sessions are not yet implemented
  • Video call integration for the "Join Session" button is not yet connected
  • Data is currently mocked — backend session tables and API not yet built

API Surface

Server Functions (Planned)

TODO getUpcomingSessions Fetch client's upcoming sessions
TODO getPastSessions Fetch client's completed sessions
TODO createSession Trainer creates a new session booking
TODO updateSessionStatus Confirm, cancel, or reschedule a session
TODO reviewSession Client leaves a star rating and comment

React Query Hooks (Planned)

TODO useUpcomingSessions() src/api/sessions/hooks.ts
TODO usePastSessions() src/api/sessions/hooks.ts
TODO useReviewSession() src/api/sessions/hooks.ts

Current Status

Built

Client Sessions UI

Sessions page with upcoming/past tabs, session cards with all data fields, status badges, and type badges.

Built

Review UI

Star rating display on past sessions, "Leave Review" and "Reviewed" button states.

In Progress

Mock Data

Using mock data from src/mocks/sessions.ts. Needs migration to real Supabase backend.

Not Started

Database Tables

Sessions and session_reviews tables need to be created with RLS policies.

Not Started

Trainer Side

Trainer session creation, availability calendar, and management interface.

Not Started

Video Integration

Video call provider integration for "Join Session" functionality.