# KHY Admin Dashboard

A **preview/staging environment** for managing KHY Furniture's product catalog with safe testing and one-click deployment to production.

## Features

- **Add Products**: Create new products with full details
- **Edit Products**: Modify existing product information
- **Delete Products**: Remove products with confirmation
- **Preview Products**: See how products will look before saving
- **Export JSON**: Download updated products.json file
- **Live Preview**: See exactly how changes will look on the website
- **One-Click Deploy**: Deploy changes to production with a single command
- **Automatic Backups**: Safe deployment with backup system
- **No Technical Knowledge Required**: Simple form-based interface

## Quick Start

1. **Setup deploy paths** (first time only):

   ```bash
   npm run setup
   # Follow the prompts to configure where your main KHY website is located
   ```

2. **Open the dashboard**:

   ```bash
   # Option 1: Double-click admin.html in your file explorer
   # Option 2: Run a local server
   npm start
   # Then open http://localhost:8080/admin.html
   ```

3. **Preview the website** (optional):

   ```bash
   # Option A: Auto-start server and open all preview pages
   npm run preview

   # Option B: Start server manually
   npm start
   # Then open http://localhost:8080/index.html (homepage)
   # Open http://localhost:8080/product-catalog.html (catalog)
   # Open http://localhost:8080/product-detail.html (product details)
   ```

4. **Manage products**:

   - Add new products using the form
   - Edit existing products by clicking "Edit"
   - Delete products by clicking "Delete"
   - Preview changes before saving

5. **Deploy to production**:

   ```bash
   # Option A: Automated deploy (recommended)
   npm run deploy
   # This copies admin/data/products.json → main website data/products.json
   # And copies admin/assets/images/ → main website assets/images/

   # Option B: Manual deploy
   # Click "Download products.json" and replace in main website
   ```

## Complete Workflow

1. **Make Changes** → Use admin dashboard to add/edit/delete products
2. **Preview Changes** → Open `index.html`, `product-catalog.html`, `product-detail.html` to see how changes look
3. **Confirm Changes** → Review everything thoroughly
4. **Deploy to Production** → Run `npm run deploy` to copy updated files to the main KHY website

> **Detailed Workflow**: See [WORKFLOW.md](WORKFLOW.md) for complete instructions

## File Structure

```
admin/
├── admin.html              # Main admin dashboard
├── index.html              # Homepage (reference)
├── product-catalog.html    # Product catalog page (reference)
├── product-detail.html     # Product detail page (reference)
├── data/
│   └── products.json       # Product data file
├── assets/                 # Images and resources
├── scripts/                # JavaScript files
├── styles/                 # CSS files
├── src/                    # Source files
├── tailwind.config.js      # Tailwind configuration
├── deploy.js               # Deploy script
├── start-server.js         # Auto-start server script
├── package.json            # Project configuration
├── README.md              # This file
└── WORKFLOW.md            # Detailed workflow guide
```

## Usage Instructions

### Adding a New Product

1. Fill out the product form with:
   - Product name and description
   - Category selection
   - Price and model number
   - Available sizes and colors
   - Stock status and rating
2. Click "Preview Product" to see how it looks
3. Click "Add Product" to save

### Editing a Product

1. Click "Edit" on any product in the list
2. The form will auto-fill with existing data
3. Make your changes
4. Click "Preview Product" to see changes
5. Click "Update Product" to save or "Cancel Edit" to abort

### Deleting a Product

1. Click "Delete" on any product
2. Confirm the deletion in the popup
3. Product is removed immediately

### Exporting Changes

1. After making all your changes
2. Click "Download products.json"
3. Replace the existing `data/products.json` file in your main website
4. Your website will show the updated products

## Technical Notes

- **No server required**: Works entirely in the browser
- **No database needed**: Uses JSON file storage
- **Cross-platform**: Works on Windows, Mac, Linux
- **Offline capable**: Works without internet connection
- **Simple deployment**: Just copy files to any web server

## Support

For technical support or questions about the admin dashboard, contact your development team.

## Version History

- **v1.0.0**: Initial release with full CRUD functionality