[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import "./globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "FIT LIFE - Your Fitness Journey Starts Here", description: "Track your workouts and nutrition with FIT LIFE", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true" import { Header } from "@/components/header" import { WelcomeSection } from "@/components/dashboard/welcome-section" import { WorkoutSummary } from "@/components/dashboard/workout-summary" import { NutritionOverview } from "@/components/dashboard/nutrition-overview" import { TodaysWorkout } from "@/components/dashboard/todays-workout" import { ProgressInsights } from "@/components/dashboard/progress-insights" import { SyncedApps } from "@/components/dashboard/synced-apps" import { QuickActions } from "@/components/dashboard/quick-actions" import { Gamification } from "@/components/dashboard/gamification" import { UpcomingBookings } from "@/components/dashboard/upcoming-bookings" export default function DashboardPage() { return (

) } [V0_FILE]typescriptreact:file="components/user-nav.tsx" isMerged="true" "use client" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useRouter } from "next/navigation" export function UserNav() { const router = useRouter() return (

username

user@example.com

router.push("/profile")}> Profile ⇧⌘P router.push("/settings")}> Settings ⌘S router.push("/")}> Log out ⇧⌘Q ) } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true" "use client" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescriptreact:file="app/nutrition/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Header } from "@/components/header" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" export default function NutritionPage() { const [foods, setFoods] = useState([ { id: 1, name: "Chicken Breast", calories: 165, protein: 31, carbs: 0, fat: 3.6 }, { id: 2, name: "Brown Rice", calories: 216, protein: 5, carbs: 45, fat: 1.6 }, ]) const [newFood, setNewFood] = useState({ name: "", calories: "", protein: "", carbs: "", fat: "" }) const addFood = () => { if (newFood.name && newFood.calories) { setFoods([ ...foods, { id: Date.now(), ...newFood, calories: Number.parseInt(newFood.calories), protein: Number.parseFloat(newFood.protein), carbs: Number.parseFloat(newFood.carbs), fat: Number.parseFloat(newFood.fat), }, ]) setNewFood({ name: "", calories: "", protein: "", carbs: "", fat: "" }) } } return (

Nutrition Tracking

Upload Meal Photo Food Log Food Calories Protein (g) Carbs (g) Fat (g) {foods.map((food) => ( {food.name} {food.calories} {food.protein} {food.carbs} {food.fat} ))}

Add Food

Food Name setNewFood({ ...newFood, name: e.target.value })} />

Calories setNewFood({ ...newFood, calories: e.target.value })} />

Protein (g) setNewFood({ ...newFood, protein: e.target.value })} />

Carbs (g) setNewFood({ ...newFood, carbs: e.target.value })} />

Fat (g) setNewFood({ ...newFood, fat: e.target.value })} />

) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Header } from "@/components/header" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { useTheme } from "next-themes" export default function SettingsPage() { const { setTheme } = useTheme() const [weight, setWeight] = useState("") const [goal, setGoal] = useState("") const [notifications, setNotifications] = useState(true) return (

Settings

Theme

Profile Management

Weight (kg) setWeight(e.target.value)} />

Goal setGoal(e.target.value)} />

Notifications

Enable notifications

) } [V0_FILE]typescriptreact:file="components/dashboard/welcome-section.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" interface UserData { name: string age: number height: number weight: number fitnessGoal: string } export function WelcomeSection() { const [userData, setUserData] = useState(null) useEffect(() => { async function fetchUserData() { const response = await fetch("/api/user-data") const data = await response.json() setUserData(data) } fetchUserData() }, []) if (!userData) { return

} return ( Welcome back, {userData.name}!

{userData.name[0]}

Age: {userData.age} | Height: {userData.height}cm | Weight: {userData.weight}kg

Fitness Goal: {userData.fitnessGoal}

"The only bad workout is the one that didn't happen."

) } [V0_FILE]typescriptreact:file="components/dashboard/workout-summary.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Button } from "@/components/ui/button" import { Dumbbell, Flame } from "lucide-react" export function WorkoutSummary() { return ( Previous Workout Summary

Workout Type: Strength Training

Duration: 45 minutes

Calories Burned: 320 kcal

Progress vs Last Session +5%

5 Day Streak

) } [V0_FILE]typescriptreact:file="components/dashboard/nutrition-overview.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" import { Progress } from "@/components/ui/progress" const data = [ { name: "Mon", consumed: 2000, burned: 2200 }, { name: "Tue", consumed: 2100, burned: 2300 }, { name: "Wed", consumed: 1900, burned: 2400 }, { name: "Thu", consumed: 2300, burned: 2100 }, { name: "Fri", consumed: 2200, burned: 2500 }, { name: "Sat", consumed: 2400, burned: 2300 }, { name: "Sun", consumed: 1800, burned: 2200 }, ] export function NutritionOverview() { return ( Nutrition & Food Intake Overview

Last Meal Logged

Grilled Chicken Salad

450 kcal

P: 30g C: 15g F: 25g

Daily Water Intake

1.5L / 2.5L

) } [V0_FILE]typescriptreact:file="components/dashboard/todays-workout.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { CheckCircle, RefreshCcw } from "lucide-react" export function TodaysWorkout() { const exercises = [ { name: "Squats", reps: 12, sets: 3, rest: "60s" }, { name: "Bench Press", reps: 10, sets: 3, rest: "90s" }, { name: "Deadlifts", reps: 8, sets: 3, rest: "120s" }, { name: "Pull-ups", reps: "Max", sets: 3, rest: "60s" }, ] return ( Today's Assigned Workout

{exercise.name}

{exercise.sets} sets x {exercise.reps} reps ({exercise.rest} rest)

) } [V0_FILE]typescriptreact:file="components/dashboard/progress-insights.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, } from "recharts" const weightData = [ { date: "1/1", weight: 75 }, { date: "1/8", weight: 74.5 }, { date: "1/15", weight: 74.2 }, { date: "1/22", weight: 73.8 }, { date: "1/29", weight: 73.5 }, ] const muscleGroups = [ { name: "Chest", value: 25 }, { name: "Back", value: 20 }, { name: "Legs", value: 30 }, { name: "Arms", value: 15 }, { name: "Core", value: 10 }, ] const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8"] export function ProgressInsights() { return ( Progress & Insights

Workout Consistency

85%

This month

{muscleGroups.map((entry, index) => ( ))}

Step Count

8,547 steps today

) } [V0_FILE]typescriptreact:file="components/dashboard/synced-apps.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Heart, Watch, Activity } from "lucide-react" export function SyncedApps() { return ( Synced Apps Data

Heart Rate

72 bpm

Sleep

7h 23m

Active Minutes

45 mins

) } [V0_FILE]typescriptreact:file="components/dashboard/quick-actions.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { PlusCircle, Utensils, Weight, Trophy } from "lucide-react" export function QuickActions() { return ( Quick Actions

) } [V0_FILE]typescriptreact:file="components/dashboard/gamification.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export function Gamification() { const achievements = [ { name: "10-Day Streak", icon: "🔥" }, { name: "Weight Loss Champion", icon: "🏆" }, { name: "Early Bird", icon: "🐦" }, ] const leaderboard = [ { name: "John Doe", score: 1250, avatar: "/avatars/01.png" }, { name: "Jane Smith", score: 1100, avatar: "/avatars/02.png" }, { name: "Bob Johnson", score: 950, avatar: "/avatars/03.png" }, ] return ( Gamification & Motivation

Achievements

{achievements.map((achievement, index) => ( {achievement.icon} {achievement.name} ))}

Leaderboard

{user.name[0]} {user.name}
{user.score} pts

Trainer's Feedback

"Great progress this week! Keep pushing yourself and don't forget to stay hydrated."

) } [V0_FILE]typescriptreact:file="components/dashboard/upcoming-bookings.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { CalendarDays, Clock } from "lucide-react" export function UpcomingBookings() { const bookings = [ { type: "Yoga Class", date: "Mon, May 15", time: "18:00" }, { type: "Personal Training", date: "Wed, May 17", time: "14:30" }, ] return ( Upcoming Bookings & Reminders

{booking.type}

{booking.date}

{booking.time}

Next Planned Workout

Tomorrow at 07:00

) } [V0_FILE]typescript:file="app/api/user-data/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET() { // In a real application, you would fetch this data from your database const userData = { name: "Sudarson", age: 40, height: 180, weight: 98, fitnessGoal: "Build muscle and improve endurance", } return NextResponse.json(userData) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import Image from "next/image" import { useRouter } from "next/navigation" import Link from "next/link" import type React from "react" // Added import for React export default function SignUpPage() { const router = useRouter() const handleSignUp = (e: React.FormEvent) => { e.preventDefault() // Here you would typically handle the sign-up logic // For now, we'll just navigate to the user type determination page router.push("/determine-user-type") } return (

Already have an account?{" "} Sign In

) } [V0_FILE]typescriptreact:file="app/signin/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import Image from "next/image" import { useRouter } from "next/navigation" import Link from "next/link" import type React from "react" // Added import for React export default function SignInPage() { const router = useRouter() const handleSignIn = (e: React.FormEvent) => { e.preventDefault() // Here you would typically handle the sign-in logic // For now, we'll just navigate to the user type determination page router.push("/determine-user-type") } return (

Don't have an account?{" "} Sign Up

) } [V0_FILE]typescriptreact:file="app/determine-user-type/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { useRouter } from "next/navigation" export default function DetermineUserTypePage() { const [userType, setUserType] = useState(null) const router = useRouter() const handleContinue = () => { if (userType) { switch (userType) { case "gym_officer": router.push("/onboarding/gym-officer") break case "trainer": router.push("/onboarding/trainer") break case "gym_user": router.push("/onboarding/gym-user") break default: console.error("Invalid user type") } } } return (

Select Your Role Choose your role in FIT LIFE

Gym Officer (Admin/Manager)

Trainer

Gym User (Member)

) } [V0_FILE]typescriptreact:file="app/admin-dashboard/page.tsx" isMerged="true" import { Header } from "@/components/header" export default function AdminDashboardPage() { return (

Admin Dashboard

Welcome to the admin dashboard. Here you can manage gym operations, users, and more.

) } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import Image from "next/image" import { UserNav } from "./user-nav" import { MoonIcon, SunIcon } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { useRouter } from "next/navigation" export function Header() { const { setTheme, theme } = useTheme() const router = useRouter() const handleSignOut = () => { // Here you would typically handle the sign-out logic // For now, we'll just navigate to the sign-in page router.push("/signin") } return (

FIT LIFE

) } [V0_FILE]typescriptreact:file="app/onboarding/gym-officer/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function GymOfficerOnboarding() { const router = useRouter() const [step, setStep] = useState(1) const [formData, setFormData] = useState({ gymName: "", location: "", gymType: "", gymSize: "", businessRegistration: null, taxId: "", }) const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })) } const handleFileUpload = (e: React.ChangeEvent) => { if (e.target.files) { setFormData((prev) => ({ ...prev, businessRegistration: e.target.files?.[0] || null })) } } const handleNextStep = () => { if (step < 3) { setStep((prev) => prev + 1) } else { // Here you would typically submit the form data to your backend console.log("Form submitted:", formData) router.push("/admin-dashboard") } } return (

Gym Officer Onboarding Step {step} of 3 {step === 1 && (

Gym Name

Location

Gym Type

Gym Size (Number of members)

)} {step === 2 && (

Business Registration Document (Optional)

GST / Tax ID (if applicable)

)} {step === 3 && (

Great! You've completed the initial setup. In the next steps, you'll be able to:

Set up membership plans and pricing
Define trainer roles and permissions
Configure business hours and access control
Connect with wearables and smart gym equipment
Sync payment gateways for membership billing

You'll be guided through these steps in your admin dashboard.

)}

) } [V0_FILE]typescriptreact:file="app/onboarding/trainer/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function TrainerOnboarding() { const router = useRouter() const [step, setStep] = useState(1) const [formData, setFormData] = useState({ fullName: "", certifications: "", specialization: "", experience: "", hourlyRate: "", certification: null, }) const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })) } const handleFileUpload = (e: React.ChangeEvent) => { if (e.target.files) { setFormData((prev) => ({ ...prev, certification: e.target.files?.[0] || null })) } } const handleNextStep = () => { if (step < 3) { setStep((prev) => prev + 1) } else { // Here you would typically submit the form data to your backend console.log("Form submitted:", formData) router.push("/trainer-dashboard") } } return (

Trainer Onboarding Step {step} of 3 {step === 1 && (

Full Name

Certifications

Specialization

)} {step === 2 && (

Years of Experience

Hourly Rate (if applicable)

Upload Certification (Optional)

)} {step === 3 && (

Great! You've completed the initial setup. In the next steps, you'll be able to:

Define your availability and schedule
Select preferred payment methods
Create custom training programs and templates
Connect with clients and set up communication channels
Record an introduction video or set up a trial session

You'll be guided through these steps in your trainer dashboard.

)}

) } [V0_FILE]typescriptreact:file="app/onboarding/gym-user/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function GymUserOnboarding() { const router = useRouter() const [step, setStep] = useState(1) const [formData, setFormData] = useState({ name: "", age: "", gender: "", fitnessLevel: "", fitnessGoal: "", weight: "", height: "", workoutPreference: "", }) const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })) } const handleNextStep = () => { if (step < 3) { setStep((prev) => prev + 1) } else { // Here you would typically submit the form data to your backend console.log("Form submitted:", formData) router.push("/dashboard") } } return (

Gym User Onboarding Step {step} of 3 {step === 1 && (

Full Name

Age

Gender

)} {step === 2 && (

Fitness Level

Fitness Goal

)} {step === 3 && (

Weight (kg)

Height (cm)

Workout Preference

)}

) } [V0_FILE]typescriptreact:file="app/workout-log/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Header } from "@/components/header" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { InfoIcon } from "lucide-react" export default function WorkoutLogPage() { const [exercises, setExercises] = useState([ { id: 1, name: "Push-ups", completed: false, aiRecommended: true }, { id: 2, name: "Squats", completed: false, aiRecommended: false }, { id: 3, name: "Lunges", completed: false, aiRecommended: true }, ]) const [newExercise, setNewExercise] = useState("") const [timer, setTimer] = useState(0) const [isTimerRunning, setIsTimerRunning] = useState(false) const [injuryPreventionTips, setInjuryPreventionTips] = useState([]) useEffect(() => { // Simulating AI-generated injury prevention tips setInjuryPreventionTips([ "Remember to warm up properly before your workout.", "Maintain proper form during exercises to prevent strain.", "Stay hydrated throughout your workout session.", ]) }, []) const toggleExercise = (id: number) => { setExercises(exercises.map((ex) => (ex.id === id ? { ...ex, completed: !ex.completed } : ex))) } const addExercise = () => { if (newExercise.trim()) { setExercises([...exercises, { id: Date.now(), name: newExercise, completed: false, aiRecommended: false }]) setNewExercise("") } } const toggleTimer = () => { if (isTimerRunning) { setIsTimerRunning(false) } else { setIsTimerRunning(true) const interval = setInterval(() => { setTimer((prevTimer) => prevTimer + 1) }, 1000) return () => clearInterval(interval) } } return (

Workout Log

AI-Recommended Exercises {exercises.map((exercise) => (

toggleExercise(exercise.id)} /> {exercise.name} {exercise.aiRecommended && (AI Recommended)}

))} Add Custom Workout setNewExercise(e.target.value)} /> Workout Timer

{Math.floor(timer / 60)}:{(timer % 60).toString().padStart(2, "0")}

Injury Prevention Tips {injuryPreventionTips.map((tip, index) => ( Tip {index + 1} {tip} ))}

) } [V0_FILE]typescriptreact:file="app/trainer-dashboard/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Header } from "@/components/header" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" export default function TrainerDashboardPage() { const [clientProgress, setClientProgress] = useState([]) const [adaptiveWorkoutPlans, setAdaptiveWorkoutPlans] = useState([]) useEffect(() => { // Simulating API calls to fetch client progress and adaptive workout plans const fetchClientProgress = async () => { // Replace with actual API call const data = [ { name: "Week 1", weight: 80, strength: 100, endurance: 60 }, { name: "Week 2", weight: 79, strength: 105, endurance: 65 }, { name: "Week 3", weight: 78, strength: 110, endurance: 70 }, { name: "Week 4", weight: 77, strength: 115, endurance: 75 }, ] setClientProgress(data) } const fetchAdaptiveWorkoutPlans = async () => { // Replace with actual API call const data = [ { id: 1, clientName: "John Doe", plan: "Strength Training", adaptations: "Increased rest periods" }, { id: 2, clientName: "Jane Smith", plan: "Weight Loss", adaptations: "Added cardio intervals" }, { id: 3, clientName: "Mike Johnson", plan: "Muscle Gain", adaptations: "Adjusted protein intake" }, ] setAdaptiveWorkoutPlans(data) } fetchClientProgress() fetchAdaptiveWorkoutPlans() }, []) return (

Trainer Dashboard

Client Progress Trends

AI Insight: Client shows consistent improvement in strength and endurance. Consider increasing workout intensity.

Customized Adaptive Workout Plans Client Name Workout Plan AI-Suggested Adaptations Actions {adaptiveWorkoutPlans.map((plan) => ( {plan.clientName} {plan.plan} {plan.adaptations} ))}

) } [V0_FILE]typescriptreact:file="app/community/page.tsx" "use client" import { useState, useEffect } from "react" import { Header } from "@/components/header" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function CommunityPage() { const [leaderboard, setLeaderboard] = useState([]) const [challenges, setChallenges] = useState([]) const [discussionThreads, setDiscussionThreads] = useState([]) useEffect(() => { // Simulating API calls to fetch community data const fetchLeaderboard = async () => { // Replace with actual API call const data = [ { id: 1, name: "John Doe", points: 1200, badge: "🏆 Fitness Champion" }, { id: 2, name: "Jane Smith", points: 1150, badge: "💪 Strength Master" }, { id: 3, name: "Mike Johnson", points: 1100, badge: "🏃‍♂️ Cardio King" }, { id: 4, name: "Emily Brown", points: 1050, badge: "🧘‍♀️ Yoga Guru" }, { id: 5, name: "David Lee", points: 1000, badge: "🏋️ Weightlifting Pro" }, ] setLeaderboard(data) } const fetchChallenges = async () => { // Replace with actual API call const data = [ { id: 1, name: "30-Day Push-up Challenge", participants: 156, daysLeft: 12 }, { id: 2, name: "Summer Body Challenge", participants: 89, daysLeft: 30 }, { id: 3, name: "Marathon Training", participants: 42, daysLeft: 60 }, ] setChallenges(data) } const fetchDiscussionThreads = async () => { // Replace with actual API call const data = [ { id: 1, title: "Best protein supplements?", replies: 23, lastActivity: "2h ago" }, { id: 2, title: "Tips for improving deadlift form", replies: 15, lastActivity: "5h ago" }, { id: 3, title: "How to stay motivated during winter?", replies: 31, lastActivity: "1d ago" }, ] setDiscussionThreads(data) } fetchLeaderboard() fetchChallenges() fetchDiscussionThreads() }, []) return (

Community

Leaderboard Challenges Discussions Leaderboard Rank User Points Badge {leaderboard.map((user, index) => ( {index + 1}

{user.name[0]} {user.name}

{user.points} {user.badge} ))}

Active Challenges

{challenges.map((challenge) => ( {challenge.name}

Participants: {challenge.participants}

Days Left: {challenge.daysLeft}

))}

Discussion Threads

{discussionThreads.map((thread) => ( {thread.title}

Replies: {thread.replies}

Last activity: {thread.lastActivity}

))}

) } [V0_FILE]typescriptreact:file="app/admin-dashboard/analytics/page.tsx" "use client" import { useState, useEffect } from "react" import { Header } from "@/components/header" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" export default function GymAnalyticsPage() { const [trainerPerformance, setTrainerPerformance] = useState([]) const [memberRetention, setMemberRetention] = useState([]) useEffect(() => { // Simulating API calls to fetch analytics data const fetchTrainerPerformance = async () => { // Replace with actual API call const data = [ { name: "John", clientSatisfaction: 4.8, clientRetention: 90, revenue: 5000 }, { name: "Sarah", clientSatisfaction: 4.6, clientRetention: 85, revenue: 4500 }, { name: "Mike", clientSatisfaction: 4.9, clientRetention: 95, revenue: 5500 }, { name: "Emily", clientSatisfaction: 4.7, clientRetention: 88, revenue: 4800 }, ] setTrainerPerformance(data) } const fetchMemberRetention = async () => { // Replace with actual API call const data = [ { month: "Jan", newMembers: 50, churnedMembers: 10, retentionRate: 80 }, { month: "Feb", newMembers: 45, churnedMembers: 8, retentionRate: 82 }, { month: "Mar", newMembers: 60, churnedMembers: 12, retentionRate: 80 }, { month: "Apr", newMembers: 55, churnedMembers: 9, retentionRate: 84 }, { month: "May", newMembers: 65, churnedMembers: 11, retentionRate: 83 }, { month: "Jun", newMembers: 70, churnedMembers: 13, retentionRate: 81 }, ] setMemberRetention(data) } fetchTrainerPerformance() fetchMemberRetention() }, []) return (

Gym Analytics

Trainer Performance Trainer Client Satisfaction Client Retention (%) Revenue ($) {trainerPerformance.map((trainer) => ( {trainer.name} {trainer.clientSatisfaction.toFixed(1)} {trainer.clientRetention}% ${trainer.revenue} ))}

AI Analysis: Mike shows the highest performance across all metrics. Consider learning from his strategies to improve overall gym performance.

Member Retention Trends

AI Insight: There's a slight increase in member retention rate over the past few months. The gym's initiatives to improve member experience seem to be working.

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This