Client Portal Layout & Navigation
The five-tab layout (v2.1.0):
The client portal opens on Today by default and is organised into five tabs that mirror the bottom navigation on mobile and a vertical side panel on desktop.
1. Today: the digest landing tab.
• Next session card: the next upcoming booking, plus a "Book another" pill that opens the booking calendar directly. • Today's macros rings: protein, carbs, fats, calories. Logs immediately via "Log food" or "Tell Repley". If no nutrition plan is set yet, the rings still let the client log; targets switch on when the trainer assigns a plan. • Today's workout card: week + day count, "Start workout" / "Continue workout" / "View program" depending on progress.
2. Nutrition: the full food-logging surface.
• Five logging methods: recents tap, text search, barcode scan, photo label, photo meal, plus "Tell Repley" for conversational entry. • Day walker for back-logging meals from yesterday or earlier. • Macros block + Fuel Score ring. • Cold-start state for clients without a plan: same logger, banner explaining targets are not set yet.
3. Workouts: the active program.
• Hero card showing the program name, week number, days complete vs total. • This week's plan, day by day. • Single primary CTA that reads "Start workout" (fresh), "Continue workout" (in progress), or "View program" (week complete).
4. Journey: the 90-day milestone-based progress view.
• Six milestones: Day 0, Day 7, Day 14, Day 30, Day 60, Day 90. • Assessments tucks inside Journey at /client-portal/journey/assessments. • Auto-tracks PRs from the workout logger.
5. More: account, support, and settings.
• Profile (links to Settings). • Plan & Billing: active services, View Credits modal, past purchases. • Recurring classes: only shown if the business offers group classes. • Notes: trainer notes + shared team notes. • Documents: client documents assigned by the trainer. • Help & FAQ. • Sign out.
Tab state is remembered for 12 hours. If the client closes the app and reopens within 12 hours, they land back on the same tab. Past 12 hours they return to Today.
Bookings discoverability. Bookings live on the Today tab via the "Book another" pill (when a session exists) or the prominent "Book a session" button (empty state). The pill opens the booking calendar directly, no intermediate sheet. Recurring class bookings still appear in their dedicated section under More.
Desktop layout. On screens wide enough for a side panel, the same five tabs render as a vertical stacked rail with icon-on-top labels. Repley and Help sit at the bottom of the panel so they're always one click away.
Credits Summary Modal:
Access by clicking "View Credits" in My Plan & Billing. The modal provides:
Total Credits Available:
• Shows combined credits across all active services • Displays "Unlimited" if any service has unlimited credits • Shows total sessions used
Your Services Breakdown:
• Lists each active service with: - Service name and type (membership/pack/pass) - Trainer name - Credits remaining out of total - Visual indicator for low/no credits
Available Services:
• Browse services offered by your trainer • One-click purchase with Stripe checkout • See pricing for each service
Quick Action Buttons:
Each booking card has icon-only action buttons for a clean, responsive design: • Move (↻) - Reschedule the appointment • Calendar (📅) - Add to Google, Apple, or Outlook calendar • Cancel (✕) - Cancel the booking
Hover over any button to see its description. All buttons are accessible via keyboard.
Accessibility Features:
The Client Portal follows WCAG (Web Content Accessibility Guidelines) standards: • Keyboard Navigation - All interactive elements accessible via Tab, Enter, Space, and Arrow keys • Screen Reader Support - Proper ARIA labels and semantic HTML • Focus Indicators - Visible focus states on all buttons and links • Touch Targets - Minimum 44x44px touch targets for mobile users • Reduced Motion - Respects user's "Reduce Motion" system preference • Color Contrast - Meets WCAG contrast requirements in light and dark modes • Modal Focus Trap - Focus stays within modals until closed • Escape to Close - Press Escape to close any modal or dropdown
Cancelling a Service:
Clients can manage their subscriptions through: 1. Stripe Customer Portal - Click "Manage in Stripe" on subscription cards 2. Contact Trainer - For other services, contact trainer directly
When a client wants to cancel, trainers are notified and can discuss options before processing.