# 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

```bash
cd admin-web
npm install
```

### 2. Configure Environment Variables

Create a `.env.local` file:

```bash
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
```

### 3. Run Development Server

```bash
npm run dev
```

Open [http://localhost:3000](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

```bash
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

```bash
npx shadcn add component-name
```

## License

Same as TabataFit project