Dashboard

The main hub after login. Role-specific stats, social feed, and quick actions. Clients see programs, sessions, and streak data; trainers see leads, clients, and revenue data.

Route Information

Route

/dashboard

Source File

src/routes/_authed/_onboarded/dashboard.tsx

Layout

_authed/_onboarded (sidebar + header)

Max Width

max-w-6xl for stats, max-w-2xl for feed

Access

All authenticated, onboarded users

Breadcrumb

Dashboard

Client Dashboard

Full UI mockup of the client dashboard experience. Includes welcome header, stats grid, recommended trainers stories, and social feed.

Client Dashboard — Full Page

Dashboard

Welcome back, Alex

Active Programs

3 +1

Currently enrolled

Upcoming Sessions

2

This week

Messages

5 unread

New messages

Streak

12 days

Keep it up!

Recommended Trainers

SC
Sarah C. HIIT
MJ
Marcus J. Strength
PP
Priya P. Yoga
DK
David K. Bodybuilding
ER
Elena R. Cardio
AT
Alex T. CrossFit

Your Feed

SC
Sarah Chen Trainer
2h ago

Just launched my new 12-week HIIT program! Perfect for anyone looking to burn fat and build endurance. Early bird discount available this week

Program Preview Image
MJ
Marcus Johnson Pro Tip
4h ago

Quick tip: Don't skip the eccentric phase of your bench press. Slow 3-second negatives build more strength than fast reps. Your chest will thank you

MTC
My Trainer Connect Challenge
8h ago

30-Day Consistency Challenge starts Monday! Log at least 3 workouts per week for 30 days. Top finishers win a free month of premium coaching.

234 participants
18 days left
Recommended for you

Shred 90

by Sarah Chen

4.9 234 enrolled $49

Trainer Dashboard

Full UI mockup of the trainer dashboard experience. Includes stats grid, quick actions, new leads with match percentages, social feed, and revenue summary.

Trainer Dashboard — Full Page

Dashboard

Welcome back, Marcus

New Leads

8 +3 from last week

This week

Response Rate

94% +2%

Last 30 days

Active Clients

24

Currently training

Rating

4.9

142 reviews

New Leads

Potential clients matched to your profile

SM
Sarah M. 96% match
Weight Loss Beginner Online
JT
James T. 91% match
Muscle Building Intermediate In-Person
LK
Lisa K. 87% match
Marathon Prep Advanced Hybrid
RP
Ryan P. 78% match
General Fitness Beginner Online

Activity Feed

Client Milestone Achievement
1h ago

Alex Kim completed Week 8 of Shred 90!

Progress 8 / 12 weeks (67%)
AK
Alex Kim Check-in
3h ago
Mood: Great
Energy: High

Feeling strong after yesterday's session. Ready for the next challenge!

Session Reminder Upcoming
Starts in 2 hours

Training session with Jamie L.

Online
60 min
Upper Body

This Month

$4,280 +18% from last month
Oct Nov Dec Jan Feb Mar

Component Inventory

Component Source Usage
Card / CardHeader / CardContent @/components/ui/card Stats cards, feed post containers, leads cards, revenue card
Avatar / AvatarFallback @/components/ui/avatar Post author avatars, trainer story circles, lead avatars
Badge @/components/ui/badge Post type labels, match % badges, specialty tags
Button @/components/ui/button Quick actions, lead accept/view/pass, join/reply CTAs
ScrollArea / ScrollBar @/components/ui/scroll-area Recommended trainers horizontal scroll, feed vertical scroll
Progress @/components/ui/progress Client milestone progress bar
Icons (Lucide) lucide-react Dumbbell, CalendarDays, MessageCircle, Flame, Heart, Share, Bookmark, Users, Star, TrendingUp, Trophy, Clock, Plus, BarChart3, DollarSign, ShoppingCart
motion motion/react Heart like animation, card enter transitions, counter animations

Data Requirements

Query / Hook Role Purpose
userQueryOptions Both User name for welcome header
useActiveRole() Both Determine whether to render client or trainer dashboard
clientStatsQueryOptions Client Active programs, upcoming sessions, messages, streak
trainerStatsQueryOptions Trainer New leads, response rate, active clients, rating
feedQueryOptions Both Social feed posts (role-specific post types)
recommendedTrainersQueryOptions Client Trainer story carousel data
newLeadsQueryOptions Trainer New leads with match percentage
revenueQueryOptions Trainer Monthly revenue and trend data

Cache Strategy

staleTime: Infinity — data stays fresh until explicitly invalidated by mutations. Route loader primes cache via ensureQueryData, components read via useQuery hooks.

Responsive Behavior

Desktop (1024px+)

  • 4-column stats grid (lg:grid-cols-4)
  • Feed centered at max-w-2xl
  • Sidebar permanently visible
  • Lead cards show full action buttons inline
  • Revenue card positioned left-aligned
  • Trainer stories show 6+ items without scroll

Tablet (768px)

  • 2-column stats grid (sm:grid-cols-2)
  • Feed fills available width
  • Quick actions wrap to 2 rows
  • Lead action buttons stack or wrap
  • Trainer stories scroll horizontally

Mobile (<640px)

  • Stats stack single column
  • Sidebar collapses to hamburger menu
  • Feed cards full-width with reduced padding
  • Quick actions stack vertically
  • Lead cards: actions move below info
  • Revenue card full-width

States

Loading

  • Stats cards show skeleton rectangles for values
  • Feed shows 3 skeleton post cards (avatar circle, text lines, action bar)
  • Trainer stories show pulsing circles
  • Leads section shows skeleton lead rows
  • Revenue card shows skeleton bar chart

Empty

  • Client: No active programs → "Explore programs to get started" CTA
  • Client: No sessions → "Book your first session" CTA
  • Trainer: No leads → "Complete your profile to attract leads" CTA
  • Trainer: No clients → "Share your profile link" CTA
  • Both: Empty feed → "Follow trainers to see posts" message

Error

  • Stats fetch failure → card shows "Unable to load" with retry button
  • Feed error → "Could not load your feed" with retry action
  • Leads error → inline error with retry
  • Global error boundary catches unrecoverable failures
  • Toast notification on mutation errors (global MutationCache handler)