import React, { useState, useEffect, useMemo } from "react"; import { BrowserRouter, Routes, Route, Link, NavLink, useNavigate, useLocation, Navigate } from "react-router-dom"; import { Users, TrendingUp, Calendar, MessageSquare, Sparkles, CreditCard, Plus, Check, Search, Filter, ChevronRight, Send, Dumbbell, Apple, Activity, CheckCircle2, DollarSign, ArrowUpRight, UserPlus, Menu, X, Clock, Award } from "lucide-react"; import { Toaster, toast } from "sonner"; import { motion, AnimatePresence } from "framer-motion"; // --- MEDIA CONSTANTS --- const MEDIA = { hero: "https://images.unsplash.com/photo-1517838277536-f5f99be501cd?auto=format&fit=crop&w=1200&q=80", coach: "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=150&q=80", client1: "https://images.unsplash.com/photo-1548690312-e3b507d8c110?auto=format&fit=crop&w=150&q=80", client2: "https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=150&q=80", client3: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&q=80", progressBefore: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=300&q=80", progressAfter: "https://images.unsplash.com/photo-1517838277536-f5f99be501cd?auto=format&fit=crop&w=300&q=80" }; // Image Component with Fallback function SafeImage({ src, alt, className }: { src: string; alt: string; className?: string }) { const [error, setError] = useState(false); if (error) { return (

[No Image]

); } return ( {alt}

setError(true)} /> ); } // --- DATA TYPES & SEED DATA --- interface Client { id: string; name: string; email: string; status: "Active" | "Onboarding" | "Pending Check-in"; avatar: string; goal: string; weight: string; targetWeight: string; compliance: number; // percentage joinedDate: string; } const initialClients: Client[] = [ { id: "1", name: "Sarah Jenkins", email: "sarah.j@gmail.com", status: "Pending Check-in", avatar: MEDIA.client1, goal: "Fat Loss & Strength", weight: "68 kg", targetWeight: "62 kg", compliance: 92, joinedDate: "Oct 12, 2023" }, { id: "2", name: "Marcus Vance", email: "marcus.vance@outlook.com", status: "Active", avatar: MEDIA.client2, goal: "Hypertrophy / Muscle Gain", weight: "82 kg", targetWeight: "88 kg", compliance: 85, joinedDate: "Nov 02, 2023" }, { id: "3", name: "Elena Rostova", email: "elena.r@icloud.com", status: "Onboarding", avatar: MEDIA.client3, goal: "Athletic Endurance", weight: "59 kg", targetWeight: "58 kg", compliance: 40, joinedDate: "Dec 18, 2023" } ]; interface Message { id: string; sender: "coach" | "client"; text: string; timestamp: string; } const initialMessages: Record = { "1": [ { id: "m1", sender: "client", text: "Hey coach! Finished today's leg workout. Felt a bit of tightness in my left knee during squats.", timestamp: "09:30 AM" }, { id: "m2", sender: "coach", text: "Great job pushing through, Sarah. Let's swap back squats for goblet squats next session to reduce the load on your knee. Keep hydrating!", timestamp: "10:15 AM" }, { id: "m3", sender: "client", text: "Perfect, thank you! Will do.", timestamp: "10:22 AM" } ], "2": [ { id: "m4", sender: "coach", text: "Hey Marcus, how is the meal prep going this week?", timestamp: "Yesterday" }, { id: "m5", sender: "client", text: "Going great, hit my protein targets every day so far!", timestamp: "Yesterday" } ], "3": [ { id: "m6", sender: "coach", text: "Welcome to CoachFlow, Elena! Please complete your onboarding questionnaire so we can build your plan.", timestamp: "2 days ago" } ] }; // --- APP LAYOUT SHELL --- function AppShell({ children }: { children: React.ReactNode }) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const location = useLocation(); const navigation = [ { name: "Cockpit", href: "/dashboard", icon: TrendingUp }, { name: "Clients", href: "/clients", icon: Users }, { name: "AI Planner", href: "/ai-planner", icon: Sparkles }, { name: "In-App Chat", href: "/chat", icon: MessageSquare }, { name: "Billing & Plans", href: "/billing", icon: CreditCard }, ]; return (

{/* Desktop Sidebar */} {/* Mobile Header / Bottom Nav */}

CoachFlow

{/* Mobile Dropdown Menu */} {mobileMenuOpen && ( {navigation.map((item) => { const Icon = item.icon; const isActive = location.pathname === item.href; return ( setMobileMenuOpen(false)} className={`flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium ${ isActive ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20" : "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900" }`} > {item.name} ); })} )} {/* Main Content Area */}

{children}

); } // --- PAGES --- // 1. LANDING / CONVERSION PAGE function LandingPage() { const navigate = useNavigate(); return (

{/* Header */}

CoachFlow

{/* Hero Section */}

The Premium OS for Elite Fitness Coaches

Scale your coaching.
Deliver elite results.

CoachFlow combines custom workout builders, nutrition planning, real-time progress tracking, client check-ins, and automated Stripe billing into one high-performance, Apple-inspired dashboard.

Explore Features

{/* Social Proof / Stats */}

4.9/5

Coach satisfaction

12k+

Active clients managed

$2.4M

Processed via Stripe

{/* Hero Visual Anchor */}

coachflow.co/dashboard

{/* Feature Quick Grid */}

Everything you need to run your business

Ditch the messy spreadsheets, WhatsApp groups, and PDF plans. Welcome to the professional standard.

{[ { icon: Dumbbell, title: "Workout Builder", desc: "Build highly custom training blocks with video references." }, { icon: Apple, title: "Nutrition & Macros", desc: "Generate meal plans tailored perfectly to client caloric targets." }, { icon: Sparkles, title: "AI-Powered Flow", desc: "Leverage AI to generate draft plans in seconds, then fine-tune." }, { icon: CreditCard, title: "Stripe Subscriptions", desc: "Collect payments seamlessly with auto-renewing client plans." } ].map((feat, idx) => { const Icon = feat.icon; return (

{feat.title}

{feat.desc}

); })}

{/* Footer */}

); } // 2. DASHBOARD (COCKPIT) function Dashboard() { const navigate = useNavigate(); const [clients] = useState(initialClients); return (

{/* Welcome Header */}

Coach Cockpit

Here's an overview of your active coaching roster today.

{/* Quick Metrics Grid */}

{[ { label: "Active Clients", value: "24", sub: "+3 this month", trend: "up" }, { label: "Monthly Revenue", value: "$4,850", sub: "92% retention rate", trend: "up" }, { label: "Pending Check-ins", value: "1", sub: "Requires review today", trend: "neutral" }, { label: "Avg. Compliance", value: "81%", sub: "Across all active clients", trend: "up" } ].map((metric, idx) => (

{metric.label}

{metric.value} {metric.trend === "up" ? "↑" : ""}

{metric.sub}

))}

{/* Main Grid: Client List & Daily Schedule */}

{/* Client Roster Panel */}

Active Roster

{clients.map((client) => (

{client.name} {client.goal}

Compliance = 80 ? "text-emerald-400" : "text-yellow-500"}`}> {client.compliance}%

{client.status}

))}

{/* Daily Schedule & Check-ins */}

Today's Schedule

{[ { time: "09:00 AM", type: "Check-in Review", client: "Sarah Jenkins" }, { time: "11:30 AM", type: "Consultation Call", client: "Elena Rostova" }, { time: "03:00 PM", type: "Program Adjustment", client: "Marcus Vance" } ].map((slot, idx) => (

{slot.time} {slot.type}

{slot.client}

))}

{/* Quick Action Card */}

Generate AI Training Block

Need quick workout ideas? Use our premium AI engine to draft a customized training cycle instantly.

); } interface WorkoutBlock { day: string; exercises: string[]; } // 3. CLIENTS MANAGEMENT & PLANS function ClientsPage() { const location = useLocation(); const queryParams = useMemo(() => new URLSearchParams(location.search), [location.search]); const initialSelectedId = queryParams.get("id") || "1"; const [selectedClientId, setSelectedClientId] = useState(initialSelectedId); const [activeTab, setActiveTab] = useState<"overview" | "workout" | "nutrition" | "progress">("overview"); const clients = initialClients; const currentClient = clients.find(c => c.id === selectedClientId) || clients[0]; // Mock states for plan builders const [workouts, setWorkouts] = useState([ { day: "Day 1 - Push Focus", exercises: ["Flat DB Press: 4x8", "Incline DB Flyes: 3x12", "Tricep Pushdowns: 4x10"] }, { day: "Day 2 - Pull Focus", exercises: ["Weighted Pull-ups: 4x6", "Chest Supported Row: 3x10", "Hammer Curls: 3x12"] } ]); const [newExercise, setNewExercise] = useState(""); const handleAddExercise = (dayIndex: number) => { if (!newExercise.trim()) return; const updated = [...workouts]; updated[dayIndex].exercises.push(newExercise); setWorkouts(updated); setNewExercise(""); toast.success("Exercise added to draft plan!"); }; const tabs: ("overview" | "workout" | "nutrition" | "progress")[] = ["overview", "workout", "nutrition", "progress"]; return (

{/* Sidebar: Client List */}

Clients

{clients.length} Total

{clients.map((client) => ( ))}

{/* Main Area: Client Workspace */}

{/* Client Identity Header */}

{currentClient.name}

{currentClient.email} • Joined {currentClient.joinedDate}

{/* Tab Navigation */}

{tabs.map((tab) => ( ))}

{/* Tab Contents */}

{activeTab === "overview" && (

{/* Stats Card */}

Metrics & Goals

Current Weight {currentClient.weight}

Target Weight {currentClient.targetWeight}

Compliance Rate {currentClient.compliance}%

Primary Focus {currentClient.goal}

{/* Habits Tracker */}

Daily Habits

{[ { habit: "1 Gallon Water", completed: true }, { habit: "10,000 Steps", completed: true }, { habit: "8 Hours Sleep", completed: false }, { habit: "Hit Protein Target", completed: true } ].map((h, idx) => (

{h.habit} {h.completed ? ( ) : ( )}

))}

)} {activeTab === "workout" && (

Custom Workout Plan

{workouts.map((block, dayIdx) => (

{block.day}

{ex}

{/* Add Exercise Input */}

setNewExercise(e.target.value)} />

))}

)} {activeTab === "nutrition" && (

Nutrition & Macros

| Daily Target: 2,400 kcal

{/* Macro Bars */}

Protein 180g 720 kcal

Carbs 240g 960 kcal

Fats 80g 720 kcal

{/* Meal Plan List */}

{[ { meal: "Meal 1: Breakfast", items: "4 Egg Whites, 2 Whole Eggs, 80g Oats, Blueberries" }, { meal: "Meal 2: Post-Workout", items: "50g Whey Protein, 1 Large Banana, Rice Cakes" }, { meal: "Meal 3: Dinner", items: "200g Grilled Chicken Breast, 150g Jasmine Rice, Asparagus" } ].map((m, idx) => (

{m.meal} {m.items}

))}

)} {activeTab === "progress" && (

Progress Photos (Before & After)

Week 1 (Baseline)

Week 8 (Current)

)}

); } interface GeneratedPlan { workout: { title: string; split: string; focus: string; days: { name: string; exercises: string[]; }[]; }; nutrition: { title: string; calories: string; macros: string; guideline: string; }; } // 4. AI PLAN GENERATOR (INTERACTIVE SIMULATOR) function AIPlanner() { const [goal, setGoal] = useState("Hypertrophy"); const [diet, setDiet] = useState("High Protein"); const [experience, setExperience] = useState("Intermediate"); const [isGenerating, setIsGenerating] = useState(false); const [generatedPlan, setGeneratedPlan] = useState(null); const handleGenerate = () => { setIsGenerating(true); setGeneratedPlan(null); setTimeout(() => { setIsGenerating(false); setGeneratedPlan({ workout: { title: `AI Custom ${goal} Protocol`, split: "4-Day Upper/Lower Split", focus: "Mechanical tension & progressive overload", days: [ { name: "Day 1: Upper Power", exercises: ["Incline Bench Press: 4 sets x 6 reps", "Barbell Rows: 4 sets x 8 reps", "Lateral Raises: 3 sets x 12 reps"] }, { name: "Day 2: Lower Hypertrophy", exercises: ["Barbell Back Squats: 3 sets x 8 reps", "Romanian Deadlifts: 3 sets x 10 reps", "Calf Raises: 4 sets x 15 reps"] } ] }, nutrition: { title: `AI ${diet} Meal Strategy`, calories: "2,650 kcal", macros: "185g Protein / 280g Carbs / 85g Fats", guideline: "Consume 1g of protein per lb of lean body mass. Distribute evenly across 4 meals." } }); toast.success("AI Plan generated successfully!"); }, 2000); }; return (

AI Workout & Nutrition Generator

Generate high-performance bespoke plans leveraging our trained fitness AI models.

{/* Form Inputs */}

Parameters

{/* Goal */}

Primary Goal

{/* Diet */}

Dietary Preference

{/* Experience */}

Training Experience

{/* Output Screen */}

{isGenerating && (

Synthesizing Workout & Macro Targets...

Our fitness engine is matching training volume to your experience tier.

)} {!isGenerating && !generatedPlan && (

No Plan Generated Yet

Select your parameters on the left and click generate to build a tailored blueprint.

)} {!isGenerating && generatedPlan && (

AI Generated Result

{generatedPlan.workout.title}

{/* Workout Block */}

Training Split: {generatedPlan.workout.split} {generatedPlan.workout.focus}

{generatedPlan.workout.days.map((day, idx) => (

{day.name}

• {ex}

))}

{/* Nutrition Block */}

{generatedPlan.nutrition.title}

Calories {generatedPlan.nutrition.calories}

Macros {generatedPlan.nutrition.macros}

{generatedPlan.nutrition.guideline}

)}

); } // 5. IN-APP CLIENT CHAT function ChatPage() { const [selectedClientId, setSelectedClientId] = useState("1"); const [messages, setMessages] = useState>(initialMessages); const [inputText, setInputText] = useState(""); const currentClient = initialClients.find(c => c.id === selectedClientId) || initialClients[0]; const chatHistory = messages[selectedClientId] || []; const handleSendMessage = (e: React.FormEvent) => { e.preventDefault(); if (!inputText.trim()) return; const newMessage: Message = { id: Math.random().toString(), sender: "coach", text: inputText, timestamp: "Just now" }; setMessages(prev => ({ ...prev, [selectedClientId]: [...(prev[selectedClientId] || []), newMessage] })); setInputText(""); // Simulate auto client reply setTimeout(() => { const clientReply: Message = { id: Math.random().toString(), sender: "client", text: "Got it! Thanks for the quick update, coach.", timestamp: "Just now" }; setMessages(prev => ({ ...prev, [selectedClientId]: [...(prev[selectedClientId] || []), clientReply] })); }, 1500); }; return (

{/* Client List */}

Conversations

{initialClients.map((client) => ( ))}

{/* Chat Window */}

{/* Chat Header */}

{currentClient.name} Active Now

{/* Messages Body */}

{chatHistory.map((msg) => { const isCoach = msg.sender === "coach"; return (

{msg.text}

{msg.timestamp}

); })}

{/* Input Footer */}

); } // 6. BILLING & SUBSCRIPTIONS function BillingPage() { const [selectedTier, setSelectedTier] = useState<"starter" | "pro" | "elite">("pro"); return (

Billing & Plans

Manage your subscription and Stripe payment processing settings.

{/* Stripe Connect Banner */}

Stripe Integration

Accept Client Payments Instantly

Connect your Stripe account to start charging clients directly for recurring subscriptions and custom coaching packages.

{/* Pricing / Coach Tiers */}

Select Your CoachFlow Tier

{[ { id: "starter", name: "Starter", price: "$29", limit: "Up to 5 clients", features: ["Basic Workout Builder", "Manual Check-ins", "Email Support"] }, { id: "pro", name: "Pro Elite", price: "$79", limit: "Up to 30 clients", features: ["Advanced Workout & Nutrition", "AI Plan Generator", "Unlimited In-App Chat", "Stripe Connect Integration"] }, { id: "elite", name: "Studio", price: "$199", limit: "Unlimited clients", features: ["White-label Branding", "Custom Domain", "Dedicated Account Manager", "Priority Support"] } ].map((tier) => (

setSelectedTier(tier.id as any)} className={`bg-zinc-900/20 border rounded-2xl p-5 space-y-4 cursor-pointer transition-all relative ${ selectedTier === tier.id ? "border-emerald-500 ring-1 ring-emerald-500/20 bg-zinc-900/40" : "border-zinc-800/80 hover:border-zinc-700" }`} > {tier.id === "pro" && ( Popular )}

{tier.name}

{tier.price} /mo

{tier.limit}

))}

); } // --- MAIN ROUTER --- export default function App() { return ( {/* Landing Page */} } /> {/* Authenticated Layout */} } /> } /> } /> } /> } /> {/* Catch-all Redirect */} } /> ); }