Initial commit: KHY Admin project

README.md

@@ -0,0 +1,146 @@
+# 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