khy_admin/README.md

# KHY Admin Dashboard

A comprehensive product management dashboard for the KHY website, allowing you to manage products, categories, and images with live preview capabilities.

## Features

- **Product Management**: Add, edit, delete, and duplicate products
- **Category Management**: Organize products into categories
- **Image Management**: Upload, organize, and manage product images
- **Live Preview**: Preview how changes will look on the actual website
- **Sync to Main Site**: Deploy changes to your main website repository
- **Responsive Design**: Works on desktop, tablet, and mobile devices

## Quick Start

### 1. Setup

```bash
# Navigate to the admin dashboard directory
cd admin-dashboard

# Install dependencies (optional - for image processing)
npm install

# Start the development server
npm start
```

### 2. Access the Dashboard

Open your browser and go to: `http://localhost:3000`

### 3. Using the Dashboard

#### Products Section

- **Add Product**: Click "Add Product" to create a new product
- **Edit Product**: Click the "Edit" button on any product card
- **Duplicate Product**: Click "Duplicate" to create a copy of an existing product
- **Delete Product**: Click "Delete" to remove a product (with confirmation)
- **Search**: Use the search bar to find specific products

#### Categories Section

- **Add Category**: Create new product categories
- **Edit Category**: Modify existing categories
- **View Products**: See all products in a specific category
- **Delete Category**: Remove categories (only if no products are using them)

#### Images Section

- **Upload Images**: Drag and drop or click to upload new images
- **View Images**: See all uploaded images with metadata
- **Rename Images**: Change image names
- **Delete Images**: Remove unused images

#### Preview Section

- **Product Catalog**: See how your product catalog looks to customers
- **Product Detail**: Preview individual product pages
- **Interactive**: Click on products in catalog to view details

### 4. Syncing to Main Site

When you're ready to deploy your changes:

1. Click the "Sync to Main Site" button
2. Watch the sync progress in the modal
3. Your changes will be committed and pushed to the main repository

## File Structure

```
admin-dashboard/
├── src/
│   ├── index.html          # Main dashboard interface
│   ├── css/
│   │   └── admin.css       # Dashboard styling
│   └── js/
│       ├── admin.js        # Main dashboard controller
│       ├── productManager.js    # Product management logic
│       ├── categoryManager.js   # Category management logic
│       └── imageManager.js      # Image management logic
├── data/
│   └── products.json       # Product and category data
├── assets/
│   └── images/
│       └── products/       # Product images
├── preview/
│   ├── catalog.html        # Product catalog preview
│   └── detail.html         # Product detail preview
├── scripts/
│   └── sync-to-main.js     # Sync script for deployment
├── package.json            # Node.js dependencies
└── README.md              # This file
```

## Configuration

### Main Repository URL

Before using the sync feature, update the repository URL in `scripts/sync-to-main.js`:

```javascript
this.mainRepoUrl = "https://github.com/your-username/khy-website.git";
```

### Data Structure

The dashboard expects your `products.json` to have this structure:

```json
{
  "products": [
    {
      "id": 1,
      "name": "Product Name",
      "description": "Short description",
      "descriptionLong": ["Paragraph 1", "Paragraph 2"],
      "category": "category-id",
      "image": "assets/images/products/image.jpg",
      "images": [
        "assets/images/products/image1.jpg",
        "assets/images/products/image2.jpg"
      ],
      "galleryPairs": [
        "assets/images/products/image1.jpg",
        "assets/images/products/image2.jpg"
      ],
      "additionalInformation": {
        "Material": "Product material",
        "Design": "Design description",
        "Use Cases": "Use case description"
      },
      "warranty": "5 years"
    }
  ],
  "categories": [
    {
      "id": "category-id",
      "name": "Category Name",
      "description": "Category description"
    }
  ]
}
```

## Development

### Adding New Features

1. **New Product Fields**: Add form fields in `src/index.html` and handle them in `productManager.js`
2. **New Category Fields**: Extend the category form and logic in `categoryManager.js`
3. **New Image Features**: Add functionality in `imageManager.js`

### Styling

The dashboard uses a custom CSS framework with:

- **Colors**: Gradient-based color scheme
- **Typography**: Montserrat + Playfair Display fonts
- **Components**: Card-based layout with hover effects
- **Responsive**: Mobile-first responsive design

### API Integration

Currently, the dashboard works with local JSON files. To integrate with a real API:

1. Replace `fetch('data/products.json')` calls with API endpoints
2. Update the `saveData()` methods to POST to your API
3. Handle authentication and error states

## Deployment

### Option 1: Separate Repository (Recommended)

1. Move this admin dashboard to its own repository
2. Update the sync script with your main repository URL
3. Deploy the admin dashboard to a separate domain/subdomain
4. Use the sync feature to deploy changes to your main site

### Option 2: Subdirectory

1. Keep the admin dashboard in a subdirectory of your main site
2. Add authentication to protect the admin area
3. Use the sync feature to update the main site files

## Security Considerations

- **Authentication**: Add login functionality before deploying
- **File Uploads**: Validate and sanitize uploaded images
- **Data Validation**: Validate all form inputs
- **Access Control**: Restrict access to authorized users only

## Troubleshooting

### Common Issues

1. **Images not loading**: Check file paths and ensure images exist
2. **Sync fails**: Verify repository URL and Git credentials
3. **Preview not working**: Ensure the preview HTML files are accessible
4. **Data not saving**: Check browser console for JavaScript errors

### Getting Help

- Check the browser console for error messages
- Verify all file paths are correct
- Ensure the data structure matches the expected format
- Test with a small dataset first

## License

This admin dashboard is part of the KHY website project.

## Support

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