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

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

2. Open the dashboard:

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

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

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