khy_admin/WORKFLOW.md

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)

# 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)

# 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

# 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