# Hi-School Slide Manager Frontend Dashboard Setup

## Quick Setup Guide

### 1. Create the Dashboard Page

1. Go to WordPress Admin → Pages → Add New
2. Set the page title to: **Slide Dashboard**
3. Set the page slug to: **slide-dashboard**
4. In the Page Attributes section, select the template: **Slide Dashboard**
5. Publish the page

### 2. Full-Width Dashboard Features

The dashboard now includes:

- **🎯 Custom Header Bar**: Professional navigation with Home, Admin, and Logout buttons
- **📊 Status Bar**: Real-time statistics for active slides, connected sites, and last update
- **📝 Enhanced Tabs**: Create Slides, Manage Slides, Preview Banner, and Analytics
- **🔄 Bulk Actions**: Save all slides, save as drafts, import/export functionality
- **📱 Responsive Design**: Works perfectly on all devices

### 3. Navigation Features

**Header Navigation:**
- 🏠 **Home Button**: Quick return to site homepage
- ⚙️ **Admin Button**: Access WordPress admin dashboard
- 👤 **User Menu**: Shows current user and logout option

**Tab Navigation:**
- ➕ **Create Slides**: Add up to 5 slide forms simultaneously
- 📋 **Manage Slides**: View, edit, and delete existing slides
- 👁️ **Preview Banner**: See how slides appear on companion sites
- 📈 **Analytics**: View slide performance and statistics

### 4. Set Up Members Plugin (if not already configured)

1. Install and activate the Members plugin
2. Go to Users → Roles → Add New Role
3. Create a role called "Slide Manager" with these capabilities:
   - `read`
   - `edit_posts`
   - `upload_files`
   - `hssm_manage_slides` (custom capability)

### 5. Test the Dashboard

1. Create a test user with the "Slide Manager" role
2. Navigate to `/slide-dashboard/` on your site
3. You should see the full-width slide management interface

### 6. Dashboard Workflow

**Creating Slides:**
1. Click "Add New Slide Form" (up to 5 forms at once)
2. Fill in slide details: title, subtitle, content, client
3. Upload background image with live preview
4. Add up to 5 CTA buttons per slide
5. Select target sites (Hi-School, One Stop, Ace)
6. Set scheduling dates and auto-publish options
7. Save individual slides or use "Save All Slides"

**Managing Slides:**
1. Filter by site, client, or status
2. Edit existing slides inline
3. Delete slides with confirmation
4. Export slide data for backup

**Preview System:**
1. Select target site and preview date
2. See real-time banner preview
3. Email preview to stakeholders
4. Download screenshots for approval

### 5. Template Override (Optional)

If you want to customize the dashboard template:

1. Copy `templates/page-slide-dashboard.php` to your active theme
2. Customize as needed - the plugin will use the theme version

### 6. API Key Management

- Go to WordPress Admin → Slides → Settings
- Manage API keys for companion sites
- Test REST API endpoints

### 7. Companion Site Integration

Use these REST API endpoints on companion sites:

- `GET /wp-json/hssm/v1/slides/{site}` - Get slides for a specific site
- `GET /wp-json/hssm/v1/sites` - Get available sites
- `GET /wp-json/hssm/v1/slide/{id}` - Get specific slide
- `GET /wp-json/hssm/v1/health` - Check API health

### 8. Divi 5 Group Carousel Integration

The slides are designed to work with Divi 5's Group Carousel module:

1. Add a Group Carousel module to your header
2. Use the REST API to fetch slide data
3. Populate carousel items with slide content
4. Apply background images and CTA buttons

### 9. Troubleshooting

**Dashboard not loading?**
- Check if user has proper permissions
- Verify Members plugin is active
- Check error logs for PHP errors

**AJAX not working?**
- Verify nonce generation
- Check user permissions
- Enable WordPress debug mode

**Template not found?**
- Ensure template file exists in plugin directory
- Check file permissions
- Verify page template is set correctly