146 lines
4.6 KiB
Markdown
146 lines
4.6 KiB
Markdown
# 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
|