# KHY Admin Workflow Guide

## Overview

This admin dashboard provides a **preview/staging environment** where you can make changes, see exactly how they'll look on the website, and then deploy to production with confidence.

## Complete Workflow

### 1. 🎯 **Make Changes**

- Open `admin.html` in your browser
- Add, edit, or delete products using the form interface
- Use "Preview Product" to see how individual products will look

### 2. 👀 **Preview Changes**

#### Option A: Auto-Start Preview (Recommended)

```bash
# One command to start server and open all preview pages
npm run preview

# Server will automatically stop when:
# - All preview tabs are closed
# - Deploy command is run
# - Manual stop: npm run preview:kill
```

#### Option B: Manual Preview

- Click "👀 Preview Website" button in admin dashboard
- Or manually open `index.html`, `product-catalog.html`, `product-detail.html`
- Navigate through the site to ensure everything looks correct

### 3. ✅ **Confirm Changes**

- Review all changes thoroughly
- Test product links and functionality
- Ensure images load correctly

### 4. 🚀 **Deploy to Production**

The deploy process copies updated files from the **admin directory** to the **main KHY website directory**.

#### Option A: Automated Deploy (Recommended)

```bash
# Navigate to admin directory
cd admin

# Copy updated files to main website
npm run deploy
```

**What this does:**

- Copies `admin/data/products.json` → `../data/products.json` (main website)
- Copies `admin/assets/images/` → `../assets/images/` (main website)
- Creates backup of current main website files
- Updates the live KHY website immediately

#### Option B: Manual Deploy

1. Click "Download products.json" in the admin dashboard
2. Manually copy the downloaded file to `../data/products.json`
3. Manually copy any new images from `admin/assets/images/` to `../assets/images/`

## File Structure

```
admin/                          # Admin/Staging Environment
├── admin.html                  # Admin dashboard
├── index.html                  # Homepage preview
├── product-catalog.html        # Catalog preview
├── product-detail.html         # Product detail preview
├── data/products.json          # Staging product data
├── assets/images/              # Staging images
├── deploy.js                   # Deploy script
└── package.json               # NPM scripts

../                             # Main Website (Production)
├── index.html                  # Live homepage
├── product-catalog.html        # Live catalog
├── product-detail.html         # Live product details
├── data/products.json          # Live product data
└── assets/images/              # Live images
```

## Key Benefits

✅ **Safe Testing**: Make changes without affecting the live site
✅ **Visual Preview**: See exactly how changes will look
✅ **Easy Deployment**: One-click deploy to production
✅ **Backup System**: Automatic backups before deployment
✅ **No Technical Knowledge**: Simple interface for non-technical users

## Deployment Process

### What Happens During Deploy:

1. **Stop Preview Server**: Automatically stops the preview server (if running)
2. **Validation**: Checks that main KHY website directory exists and has required files
3. **Backup**: Creates timestamped backup of current main website data
4. **Copy Files**:
   - Copies `admin/data/products.json` → `../data/products.json` (main website)
   - Copies `admin/assets/images/` → `../assets/images/` (main website)
5. **Verification**: Confirms all files were copied successfully
6. **Completion**: Main KHY website is updated immediately with new product data

### Backup System:

- All deployments create automatic backups in `admin/backups/`
- Backups are timestamped for easy identification
- Can restore from backup if needed

## Troubleshooting

### Deploy Fails?

- Check that you're in the admin directory
- Verify the main website directory exists
- Ensure you have write permissions

### Changes Not Showing?

- Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
- Check that the correct `products.json` file was updated
- Verify image paths are correct

### Need to Restore?

- Find the backup in `admin/backups/`
- Copy the backup `products.json` to the main website
- Or run the deploy script again

## Best Practices

1. **Always Preview**: Use the preview pages before deploying
2. **Test Everything**: Check all product links and images
3. **Deploy Regularly**: Don't let changes pile up
4. **Keep Backups**: The system creates them automatically
5. **Document Changes**: Keep notes of what you changed and why

## Quick Commands

```bash
# Start preview server
npm start

# Deploy to production
npm run deploy

# View help
npm run preview
```

## Support

If you encounter any issues:

1. Check the browser console for errors
2. Verify file permissions
3. Ensure all required files exist
4. Contact your development team for assistance