tabatago/admin-web/README.md

TabataFit Admin Dashboard

A web-based admin dashboard for managing TabataFit content, built with Next.js, Tailwind CSS, and shadcn/ui.

Features

• Dashboard: Overview with stats and quick actions
• Workouts: Manage workout library (view, delete)
• Trainers: Manage trainer profiles
• Collections: Organize workouts into collections
• Media: Upload videos, thumbnails, and avatars

Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS
• Components: shadcn/ui
• Backend: Supabase
• Icons: Lucide React

Getting Started

1. Install Dependencies

cd admin-web
npm install

2. Configure Environment Variables

Create a .env.local file:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

3. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

Project Structure

app/
├── login/          # Login page
├── workouts/       # Workouts management
├── trainers/       # Trainers management
├── collections/    # Collections management
├── media/          # Media upload
├── page.tsx        # Dashboard
├── layout.tsx      # Root layout with sidebar
components/
├── sidebar.tsx     # Navigation sidebar
├── ui/            # shadcn/ui components
lib/
├── supabase.ts    # Supabase client + types
├── utils.ts       # Utility functions

Usage

Login

Navigate to /login and sign in with your admin credentials. The user must exist in both:

• Supabase Auth
• admin_users table

Managing Content

1. Dashboard: View stats and access quick actions
2. Workouts: View all workouts, delete with confirmation
3. Trainers: View trainer cards with color indicators
4. Collections: View collections with gradient previews
5. Media: Upload files to Supabase Storage buckets

Authentication Flow

1. User signs in at /login
2. App checks if user exists in admin_users table
3. If authorized, redirects to dashboard
4. Sidebar provides navigation to all sections
5. Logout clears session and redirects to login

Supabase Schema

The dashboard expects these tables:

• workouts - Workout definitions
• trainers - Trainer profiles
• collections - Workout collections
• collection_workouts - Collection-workout links
• admin_users - Admin access control

And storage buckets:

• videos - Workout videos
• thumbnails - Workout thumbnails
• avatars - Trainer avatars

See the main project SUPABASE_SETUP.md for full schema details.

Building for Production

npm run build

The build output will be in .next/. You can deploy to Vercel, Netlify, or any Next.js-compatible host.

Customization

Theme

The dashboard uses a dark theme with:

• Background: neutral-950 (#0a0a0a)
• Cards: neutral-900 (#171717)
• Accent: Orange (#f97316)

Modify app/globals.css and Tailwind config to change colors.

Adding Pages

1. Create a new directory in app/
2. Add page.tsx with your component
3. Add link to components/sidebar.tsx

Adding shadcn Components

npx shadcn add component-name

License

Same as TabataFit project