Add remaining admin dashboard files (final chunk)

admin-dashboard/.gitignore

@@ -0,0 +1,104 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+logs/
+*.log
+sync-log.json
+
+# Temporary files
+temp-main/
+.tmp/
+.temp/
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# Build outputs
+dist/
+build/
+
+# Cache
+.cache/
+.parcel-cache/
+
+# Runtime data
+pids/
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# nyc test coverage
+.nyc_output/
+
+# Dependency directories
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# Nuxt.js build output
+.nuxt
+
+# Gatsby files
+.cache/
+public
+
+# Storybook build outputs
+.out
+.storybook-out
+
+# Temporary folders
+tmp/
+temp/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

admin-dashboard/README.md

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