khy_admin/admin-dashboard

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

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

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

Data Structure

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

{
  "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.