diff --git a/README.md b/README.md
index 446e85f..68f54d0 100644
--- a/README.md
+++ b/README.md
@@ -4,15 +4,15 @@ A **preview/staging environment** for managing KHY Furniture's product catalog w
## 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
+- **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
@@ -71,7 +71,7 @@ A **preview/staging environment** for managing KHY Furniture's product catalog w
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
+> **Detailed Workflow**: See [WORKFLOW.md](WORKFLOW.md) for complete instructions
## File Structure
diff --git a/admin-dashboard/assets/icons/address.png b/admin-dashboard/assets/icons/address.png
new file mode 100644
index 0000000..28e21f5
Binary files /dev/null and b/admin-dashboard/assets/icons/address.png differ
diff --git a/admin-dashboard/assets/icons/mail.png b/admin-dashboard/assets/icons/mail.png
new file mode 100644
index 0000000..97d2e58
Binary files /dev/null and b/admin-dashboard/assets/icons/mail.png differ
diff --git a/admin-dashboard/assets/icons/phone.png b/admin-dashboard/assets/icons/phone.png
new file mode 100644
index 0000000..1e83e1a
Binary files /dev/null and b/admin-dashboard/assets/icons/phone.png differ
diff --git a/admin-dashboard/assets/icons/phone2.png b/admin-dashboard/assets/icons/phone2.png
new file mode 100644
index 0000000..5ba105b
Binary files /dev/null and b/admin-dashboard/assets/icons/phone2.png differ
diff --git a/admin-dashboard/assets/icons/shipping.png b/admin-dashboard/assets/icons/shipping.png
new file mode 100644
index 0000000..9fb9a8f
Binary files /dev/null and b/admin-dashboard/assets/icons/shipping.png differ
diff --git a/admin-dashboard/assets/icons/star.png b/admin-dashboard/assets/icons/star.png
new file mode 100644
index 0000000..4f7a231
Binary files /dev/null and b/admin-dashboard/assets/icons/star.png differ
diff --git a/admin-dashboard/assets/icons/support.png b/admin-dashboard/assets/icons/support.png
new file mode 100644
index 0000000..ebb5cd6
Binary files /dev/null and b/admin-dashboard/assets/icons/support.png differ
diff --git a/admin-dashboard/assets/icons/time.png b/admin-dashboard/assets/icons/time.png
new file mode 100644
index 0000000..d45e13b
Binary files /dev/null and b/admin-dashboard/assets/icons/time.png differ
diff --git a/admin-dashboard/assets/icons/trophy.png b/admin-dashboard/assets/icons/trophy.png
new file mode 100644
index 0000000..c1820f9
Binary files /dev/null and b/admin-dashboard/assets/icons/trophy.png differ
diff --git a/admin-dashboard/assets/icons/warranty.png b/admin-dashboard/assets/icons/warranty.png
new file mode 100644
index 0000000..6448c7c
Binary files /dev/null and b/admin-dashboard/assets/icons/warranty.png differ
diff --git a/admin-dashboard/product-detail.html b/admin-dashboard/product-detail.html
new file mode 100644
index 0000000..d6c091a
--- /dev/null
+++ b/admin-dashboard/product-detail.html
@@ -0,0 +1,272 @@
+
+
+
+ Product Detail - KHY
+
+
+
+
+
+
+ Product Details
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Description
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
KHY Admin Dashboard
+
+
+
+
+
+
+
+
+ 🏠
+ Home
+
+
+ 📦
+ Products
+
+
+ 👁️
+ Preview
+
+
+
+
+ ↶
+ Undo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0 products in this category
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ⏳
+ Preparing sync...
+
+
+ ⏳
+ Cloning main repository...
+
+
+ ⏳
+ Syncing products...
+
+
+ ⏳
+ Syncing images...
+
+
+ ⏳
+ Committing changes...
+
+
+ ⏳
+ Pushing to main site...
+
+
+
+
+
+
No categories found
+
Add your first category to get started!
+
Add Category
+
${
+ category.description || "No description"
+ }
+
+ ${productCount} product${
+ productCount !== 1 ? "s" : ""
+ }
+
+
+
+ View Products
+
+
+ `;
+ return card;
+ }
+
+ showCategoryModal(category = null) {
+ const modal = document.getElementById("category-modal");
+ const title = document.getElementById("category-modal-title");
+ const form = document.getElementById("category-form");
+
+ this.currentCategory = category;
+
+ if (category) {
+ title.textContent = "Edit Category";
+ this.populateForm(category);
+ } else {
+ title.textContent = "Add Category";
+ form.reset();
+ }
+
+ modal.style.display = "block";
+ }
+
+ hideCategoryModal() {
+ document.getElementById("category-modal").style.display = "none";
+ this.currentCategory = null;
+ }
+
+ populateForm(category) {
+ document.getElementById("category-id").value = category.id;
+ document.getElementById("category-name").value = category.name;
+ document.getElementById("category-description").value =
+ category.description || "";
+ }
+
+ async saveCategory() {
+ const formData = new FormData(document.getElementById("category-form"));
+ const categoryData = {
+ id: formData.get("id"),
+ name: formData.get("name"),
+ description: formData.get("description"),
+ };
+
+ try {
+ // Validate required fields
+ if (!categoryData.id || !categoryData.name) {
+ throw new Error("Category ID and name are required");
+ }
+
+ // Check for duplicate ID (only for new categories)
+ if (!this.currentCategory) {
+ const existingCategory = this.categories.find(
+ (cat) => cat.id === categoryData.id
+ );
+ if (existingCategory) {
+ throw new Error("A category with this ID already exists");
+ }
+ }
+
+ // Update or add category
+ const existingIndex = this.categories.findIndex(
+ (cat) => cat.id === categoryData.id
+ );
+ if (existingIndex >= 0) {
+ this.categories[existingIndex] = {
+ ...this.categories[existingIndex],
+ ...categoryData,
+ };
+ } else {
+ this.categories.push(categoryData);
+ }
+
+ await this.saveData();
+ this.renderCategories();
+ this.hideCategoryModal();
+ this.dashboard.showMessage("Category saved successfully!", "success");
+
+ // Update product manager's category select
+ if (this.dashboard.productManager) {
+ this.dashboard.productManager.populateCategorySelect();
+ }
+ } catch (error) {
+ this.dashboard.showMessage(
+ "Error saving category: " + error.message,
+ "error"
+ );
+ }
+ }
+
+ editCategory(id) {
+ const category = this.categories.find((cat) => cat.id === id);
+ if (category) {
+ this.showCategoryModal(category);
+ }
+ }
+
+ viewCategoryProducts(categoryId) {
+ const category = this.categories.find((cat) => cat.id === categoryId);
+ if (!category) return;
+
+ // Get products in this category
+ const productsInCategory = this.dashboard.productManager.products.filter(
+ (p) => p.category === categoryId
+ );
+
+ // Switch to the dedicated category products section
+ this.dashboard.switchSection("category-products");
+
+ // Render the category products
+ this.showCategoryProductsScreen(category, productsInCategory);
+ }
+
+ showCategoryProductsScreen(category, products) {
+ console.log("showCategoryProductsScreen called with category:", category);
+ console.log("Products in category:", products);
+
+ // Update the section title
+ const title = document.getElementById("category-products-title");
+ if (title) {
+ title.textContent = `${category.name} Products`;
+ }
+
+ // Update the product count
+ const productCount = document.getElementById("category-product-count");
+ if (productCount) {
+ productCount.textContent = `${products.length} product${
+ products.length !== 1 ? "s" : ""
+ } in this category`;
+ }
+
+ // Update the add product button
+ const addButton = document.getElementById("add-product-to-category-btn");
+ if (addButton) {
+ addButton.setAttribute("data-category-id", category.id);
+ }
+
+ // Update the products list
+ const productsList = document.getElementById("category-products-list");
+ if (productsList) {
+ productsList.innerHTML =
+ products.length === 0
+ ? 'No products in this category yet. Click "Add Product to this Category" to get started!
'
+ : products
+ .map((product) => {
+ console.log(
+ "Rendering product:",
+ product.name,
+ "with ID:",
+ product.id
+ );
+ return `
+
+
+
${product.name}
+
${
+ product.description || "No description"
+ }
+
+
+
+ ✏️ Edit
+
+
+
+
No images found
+
Upload images to get started!
+
Upload Images
+
+
Image Not Found '">
+
+
${image.name}
+
+ Product: ${image.productName}
+ Size: ${image.size}
+
+
+
+ 👁️ View
+
+
+ ✏️ Rename
+
+
+ 🗑️ Delete
+
+
+ `;
+ return item;
+ }
+
+ showUploadModal() {
+ // Create upload modal if it doesn't exist
+ let uploadModal = document.getElementById("upload-modal");
+ if (!uploadModal) {
+ uploadModal = this.createUploadModal();
+ document.body.appendChild(uploadModal);
+ }
+
+ uploadModal.style.display = "block";
+ }
+
+ createUploadModal() {
+ const modal = document.createElement("div");
+ modal.id = "upload-modal";
+ modal.className = "modal";
+
+ modal.innerHTML = `
+
+
+
+
+
+
📤
+
Drag & Drop images here
+
or click to select files
+
+
+
+
+
+ Cancel
+ Upload Images
+
+
+
+ ${file.name}
+ ${this.formatFileSize(
+ file.size
+ )}
+
+ ×
+ `;
+ preview.appendChild(imageDiv);
+ };
+ reader.readAsDataURL(file);
+ }
+ });
+ }
+
+ formatFileSize(bytes) {
+ if (bytes === 0) return "0 Bytes";
+ const k = 1024;
+ const sizes = ["Bytes", "KB", "MB", "GB"];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+ }
+
+ async processUpload() {
+ const fileInput = document.getElementById("file-input");
+ const files = fileInput.files;
+
+ if (files.length === 0) {
+ this.dashboard.showMessage("Please select files to upload", "error");
+ return;
+ }
+
+ try {
+ this.dashboard.showMessage("Uploading images...", "info");
+
+ const uploadedImages = await this.uploadImages(files);
+
+ // Add to images list
+ uploadedImages.forEach((imagePath) => {
+ const fileName = this.extractFileName(imagePath);
+ this.images.push({
+ path: imagePath,
+ name: fileName,
+ productId: null,
+ productName: "Unassigned",
+ size: "Unknown",
+ uploadDate: new Date().toISOString(),
+ });
+ });
+
+ this.renderImages();
+ document.getElementById("upload-modal").style.display = "none";
+ this.dashboard.showMessage(
+ `Successfully uploaded ${uploadedImages.length} image(s)!`,
+ "success"
+ );
+ } catch (error) {
+ this.dashboard.showMessage(
+ "Error uploading images: " + error.message,
+ "error"
+ );
+ }
+ }
+
+ async uploadImages(files) {
+ const uploadedImages = [];
+
+ for (const file of files) {
+ if (file.type.startsWith("image/")) {
+ // In a real implementation, you'd upload to a server
+ const filename = `uploaded_${Date.now()}_${file.name}`;
+ const imagePath = `assets/images/products/${filename}`;
+ uploadedImages.push(imagePath);
+
+ console.log(`Would upload: ${file.name} to ${imagePath}`);
+ }
+ }
+
+ return uploadedImages;
+ }
+
+ viewImage(imagePath) {
+ // Create image viewer modal
+ const viewer = document.createElement("div");
+ viewer.className = "modal image-viewer";
+ viewer.innerHTML = `
+
+
+
+
+
+
Select Category ';
+
+ this.categories.forEach((category) => {
+ const option = document.createElement("option");
+ option.value = category.id;
+ option.textContent = category.name;
+ categorySelect.appendChild(option);
+ });
+ }
+
+ renderProducts(productsToRender = null) {
+ const grid = document.getElementById("products-grid");
+
+ // Don't display any products, just show empty state
+ grid.innerHTML = `
+
+
Product Management
+
Use the "Add Product" button above to create new products.
+
+
No Image '
+ }"
+ alt="${product.name}"
+ onerror="this.src='data:image/svg+xml,
No Image '">
+
+
${product.name}
+
${categoryName}
+
${
+ product.description
+ ? product.description.substring(0, 100) + "..."
+ : "No description"
+ }
+
+ ID: ${product.id}
+ ${
+ product.additionalInformation?.Warranty ||
+ "No warranty info"
+ }
+
+
+
+ ✏️ Edit
+
+
+ 📋 Duplicate
+
+
+ 🗑️ Delete
+
+
+ `;
+ return card;
+ }
+
+ async showProductModal(product = null) {
+ console.log("showProductModal called with product:", product);
+ const modal = document.getElementById("product-modal");
+ console.log("Modal element:", modal);
+ const title = document.getElementById("modal-title");
+ const form = document.getElementById("product-form");
+ const additionalInfoSection = document.getElementById(
+ "additional-info-section"
+ );
+
+ this.currentProduct = product;
+
+ if (product) {
+ title.textContent = "Edit Product";
+ await this.populateForm(product);
+ this.populateAdditionalInfo(product);
+ additionalInfoSection.style.display = "block";
+ } else {
+ title.textContent = "Add Product";
+ form.reset();
+ document.getElementById("product-warranty").value = "5 years";
+ document.getElementById("image-preview").innerHTML = "";
+ additionalInfoSection.style.display = "none";
+ }
+
+ console.log("Setting modal display to block");
+ modal.style.display = "block";
+ }
+
+ hideProductModal() {
+ // Clean up blob URLs to prevent memory leaks
+ this.cleanupBlobUrls();
+
+ if (this.currentProduct && this.currentProduct.images) {
+ this.currentProduct.images.forEach((img) => {
+ if (img.startsWith("blob:")) {
+ URL.revokeObjectURL(img);
+ }
+ });
+ }
+
+ document.getElementById("product-modal").style.display = "none";
+ this.currentProduct = null;
+ }
+
+ async populateForm(product) {
+ document.getElementById("product-name").value = product.name || "";
+ document.getElementById("product-category").value = product.category || "";
+ document.getElementById("product-description").value =
+ product.description || "";
+
+ // Handle descriptionLong array
+ if (product.descriptionLong && Array.isArray(product.descriptionLong)) {
+ document.getElementById("product-description-long").value =
+ product.descriptionLong.join("\n");
+ } else {
+ document.getElementById("product-description-long").value =
+ product.descriptionLong || "";
+ }
+
+ // Populate additional information
+ if (product.additionalInformation) {
+ document.getElementById("product-material").value =
+ product.additionalInformation.Material || "";
+ document.getElementById("product-design").value =
+ product.additionalInformation.Design || "";
+ document.getElementById("product-use-cases").value =
+ product.additionalInformation["Use Cases"] || "";
+ }
+
+ document.getElementById("product-warranty").value =
+ product.additionalInformation?.Warranty || "5 years";
+
+ // Clean up any expired blob URLs in the product data
+ // BUT preserve newly uploaded images that should be in IndexedDB
+ if (product.images) {
+ const originalCount = product.images.length;
+ const validImages = [];
+
+ for (const img of product.images) {
+ if (img.startsWith("blob:")) {
+ // Check if this blob URL corresponds to a newly uploaded image in IndexedDB
+ try {
+ const imageData = await this.findImageDataInIndexedDB(
+ img,
+ product.id
+ );
+ if (imageData && imageData.file) {
+ // This is a newly uploaded image - keep it and recreate blob URL
+ const newBlobUrl = URL.createObjectURL(imageData.file);
+ validImages.push(newBlobUrl);
+
+ // Store for cleanup
+ if (!this.currentBlobUrls) this.currentBlobUrls = [];
+ this.currentBlobUrls.push(newBlobUrl);
+
+ console.log(
+ `📁 Preserved newly uploaded image: ${imageData.name}`
+ );
+ } else {
+ console.log(`🧹 Removed expired blob URL: ${img}`);
+ }
+ } catch (error) {
+ console.log(`🧹 Removed invalid blob URL: ${img}`);
+ }
+ } else {
+ // Regular image path - keep it
+ validImages.push(img);
+ }
+ }
+
+ product.images = validImages;
+ const cleanedCount = product.images.length;
+ if (originalCount !== cleanedCount) {
+ console.log(
+ `🧹 Cleaned ${
+ originalCount - cleanedCount
+ } expired blob URLs from product data`
+ );
+ }
+ }
+
+ // Show existing images
+ await this.showExistingImages(product);
+ }
+
+ populateAdditionalInfo(product) {
+ const additionalInfoGrid = document.getElementById("additional-info-grid");
+
+ if (!product.additionalInformation) {
+ additionalInfoGrid.innerHTML =
+ "No additional information available.
";
+ return;
+ }
+
+ // Clear existing content
+ additionalInfoGrid.innerHTML = "";
+
+ // Get all additional information fields
+ const additionalFields = product.additionalInformation;
+
+ // Fields that are already shown in the main form (exclude these)
+ const excludedFields = ["Material", "Design", "Use Cases", "Warranty"];
+
+ // Create form fields for each additional information field
+ Object.keys(additionalFields).forEach((key) => {
+ if (!excludedFields.includes(key)) {
+ const value = additionalFields[key];
+ const fieldId = `additional-${key
+ .toLowerCase()
+ .replace(/[^a-z0-9]/g, "-")}`;
+
+ // Determine if it should be a textarea (for longer content)
+ const isLongContent = value && value.length > 50;
+
+ const fieldElement = document.createElement("div");
+ fieldElement.className = "additional-info-item";
+
+ if (isLongContent) {
+ fieldElement.innerHTML = `
+ ${key} ×
+
+ `;
+ } else {
+ fieldElement.innerHTML = `
+ ${key} ×
+ No additional information fields to display.
";
+ }
+ }
+
+ showNewFieldForm() {
+ const additionalInfoGrid = document.getElementById("additional-info-grid");
+
+ // Remove any existing new field form
+ this.hideNewFieldForm();
+
+ // Create new field form
+ const newFieldForm = document.createElement("div");
+ newFieldForm.className = "new-field-form";
+ newFieldForm.innerHTML = `
+ Add New Field
+
+ Add
+ Cancel
+
+ `;
+
+ // Insert at the beginning of the grid
+ additionalInfoGrid.insertBefore(
+ newFieldForm,
+ additionalInfoGrid.firstChild
+ );
+
+ // Focus on the title input
+ document.getElementById("new-field-title").focus();
+ }
+
+ hideNewFieldForm() {
+ const existingForm = document.querySelector(".new-field-form");
+ if (existingForm) {
+ existingForm.remove();
+ }
+ }
+
+ addNewField() {
+ const titleInput = document.getElementById("new-field-title");
+ const valueInput = document.getElementById("new-field-value");
+
+ const title = titleInput.value.trim();
+ const value = valueInput.value.trim();
+
+ if (!title || !value) {
+ alert("Both title and value are required!");
+ return;
+ }
+
+ // Check if field already exists
+ const existingField = document.querySelector(
+ `[name="additionalInfo.${title}"]`
+ );
+ if (existingField) {
+ alert("A field with this title already exists!");
+ return;
+ }
+
+ // Create new field element
+ const additionalInfoGrid = document.getElementById("additional-info-grid");
+ const fieldId = `additional-${title
+ .toLowerCase()
+ .replace(/[^a-z0-9]/g, "-")}`;
+ const isLongContent = value.length > 50;
+
+ const fieldElement = document.createElement("div");
+ fieldElement.className = "additional-info-item";
+
+ if (isLongContent) {
+ fieldElement.innerHTML = `
+ ${title} ×
+
+ `;
+ } else {
+ fieldElement.innerHTML = `
+ ${title} ×
+ ×
+ `;
+ preview.appendChild(imageDiv);
+ console.log(`✅ Image ${index + 1} added to DOM`);
+ }
+ }
+ }
+
+ async findImageDataInIndexedDB(imagePath, productId) {
+ try {
+ // Get all image files from IndexedDB
+ const allImageFiles = await window.storageManager.getAllImageFiles();
+ console.log(
+ `🔍 Searching IndexedDB for image. Total files: ${allImageFiles.length}`
+ );
+
+ // Extract filename from the image path
+ const filename = imagePath.split("/").pop();
+ console.log(
+ `🔍 Looking for filename: ${filename}, Product ID: ${productId}`
+ );
+
+ // Find the matching image data with multiple strategies
+ let matchingImage = null;
+
+ // Strategy 1: Direct filename match
+ matchingImage = allImageFiles.find((img) => img.name === filename);
+ if (matchingImage) {
+ console.log(`✅ Found by filename match: ${matchingImage.name}`);
+ return matchingImage;
+ }
+
+ // Strategy 2: Match by product ID (for newly uploaded images)
+ matchingImage = allImageFiles.find(
+ (img) =>
+ img.id.includes(productId.toString()) &&
+ (img.name.includes("cover") ||
+ img.name.includes("jpg") ||
+ img.name.includes("jpeg") ||
+ img.name.includes("png"))
+ );
+ if (matchingImage) {
+ console.log(`✅ Found by product ID match: ${matchingImage.name}`);
+ return matchingImage;
+ }
+
+ // Strategy 3: Match by partial filename (for generated paths)
+ if (filename.includes("product_") || filename.includes("cover")) {
+ matchingImage = allImageFiles.find((img) =>
+ img.id.includes(productId.toString())
+ );
+ if (matchingImage) {
+ console.log(`✅ Found by partial match: ${matchingImage.name}`);
+ return matchingImage;
+ }
+ }
+
+ // Strategy 4: If it's a blob URL, try to find any image for this product
+ if (imagePath.startsWith("blob:")) {
+ matchingImage = allImageFiles.find((img) =>
+ img.id.includes(productId.toString())
+ );
+ if (matchingImage) {
+ console.log(`✅ Found blob URL replacement: ${matchingImage.name}`);
+ return matchingImage;
+ }
+ }
+
+ console.log(`❌ No matching image found in IndexedDB for: ${filename}`);
+ console.log(
+ `Available images:`,
+ allImageFiles.map((img) => ({ id: img.id, name: img.name }))
+ );
+ return null;
+ } catch (error) {
+ console.error("❌ Error searching IndexedDB for image:", error);
+ return null;
+ }
+ }
+
+ cleanupBlobUrls() {
+ if (this.currentBlobUrls) {
+ this.currentBlobUrls.forEach((url) => {
+ URL.revokeObjectURL(url);
+ });
+ this.currentBlobUrls = [];
+ }
+ }
+
+ fixImagePath(imagePath) {
+ // Fix image path for admin dashboard
+ if (imagePath && !imagePath.startsWith("http")) {
+ // Remove any leading slashes and ensure we have the correct path
+ let cleanPath = imagePath.replace(/^\/+/, "");
+
+ // If it starts with 'assets/', use it as is
+ if (cleanPath.startsWith("assets/")) {
+ return "/" + cleanPath;
+ }
+
+ // If it starts with 'src/assets/', remove the 'src/' part
+ if (cleanPath.startsWith("src/assets/")) {
+ return "/" + cleanPath.replace("src/", "");
+ }
+
+ // For other paths, assume they need to be prefixed with 'assets/'
+ return "/" + cleanPath;
+ }
+ return imagePath;
+ }
+
+ async saveProduct() {
+ console.log("🚀 SAVE PRODUCT STARTED - DIRECT SAVE MODE");
+ console.log(
+ "Current product (editing):",
+ this.currentProduct ? "YES" : "NO"
+ );
+
+ const formData = new FormData(document.getElementById("product-form"));
+ const productData = this.extractFormData(formData);
+
+ try {
+ // Track changes for undo before making any modifications
+ await this.trackChangesForUndo(productData);
+
+ // Handle images - separate existing paths from blob URLs
+ const existingImages = (productData.images || []).filter(
+ (img) => !img.startsWith("blob:")
+ );
+
+ console.log("🖼️ IMAGE PROCESSING:");
+ console.log("Existing images (non-blob):", existingImages);
+
+ // Handle new file uploads
+ const imageInput = document.getElementById("product-images");
+ if (imageInput.files.length > 0) {
+ console.log("📁 New files to upload:", imageInput.files.length);
+ const newImages = await this.uploadImages(imageInput.files);
+ productData.images = [...existingImages, ...newImages];
+ console.log("🆕 New image paths:", newImages);
+ } else {
+ // Only keep existing non-blob images
+ productData.images = existingImages;
+ console.log("📷 No new files, keeping existing images");
+ }
+
+ console.log("🖼️ Final images array:", productData.images);
+
+ // Generate new ID if adding new product
+ if (!this.currentProduct) {
+ productData.id = this.getNextProductId();
+ console.log("🆔 NEW PRODUCT - Generated ID:", productData.id);
+ } else {
+ productData.id = this.currentProduct.id;
+ console.log("✏️ EDITING PRODUCT - Using existing ID:", productData.id);
+ }
+
+ console.log("📦 FINAL PRODUCT DATA BEFORE DIRECT SAVE:", productData);
+
+ // Save directly to actual data
+ await this.saveDirectlyToData(productData);
+
+ // Close modal and show success message
+ this.hideProductModal();
+ this.dashboard.showMessage("Product saved successfully!", "success");
+
+ // Refresh the current view to show changes
+ this.refreshCurrentView();
+ } catch (error) {
+ console.error("❌ ERROR SAVING PRODUCT:", error);
+ this.dashboard.showMessage(
+ "Error saving product: " + error.message,
+ "error"
+ );
+ }
+ }
+
+ // Track changes for undo functionality
+ async trackChangesForUndo(productData) {
+ console.log("📝 TRACKING CHANGES FOR UNDO");
+
+ // Get current undo stack from localStorage
+ let undoStack = JSON.parse(localStorage.getItem("khy_undo_stack") || "[]");
+
+ if (this.currentProduct) {
+ // Editing existing product - store the original state
+ const originalProduct = { ...this.currentProduct };
+ const changeEntry = {
+ id: Date.now(),
+ timestamp: new Date().toISOString(),
+ action: "edit",
+ productId: productData.id,
+ originalData: originalProduct,
+ newData: { ...productData },
+ };
+
+ undoStack.push(changeEntry);
+ console.log("📌 Tracked EDIT change:", changeEntry);
+ } else {
+ // Adding new product - just track the addition
+ const changeEntry = {
+ id: Date.now(),
+ timestamp: new Date().toISOString(),
+ action: "add",
+ productId: productData.id,
+ newData: { ...productData },
+ };
+
+ undoStack.push(changeEntry);
+ console.log("📌 Tracked ADD change:", changeEntry);
+ }
+
+ // Keep only last 10 changes to prevent excessive memory usage
+ if (undoStack.length > 10) {
+ undoStack = undoStack.slice(-10);
+ }
+
+ localStorage.setItem("khy_undo_stack", JSON.stringify(undoStack));
+ console.log("💾 Undo stack updated. Total changes:", undoStack.length);
+ }
+
+ // Save directly to the actual products.json
+ async saveDirectlyToData(productData) {
+ console.log("💾 SAVING DIRECTLY TO DATA");
+
+ if (this.currentProduct) {
+ // Editing existing product
+ const index = this.products.findIndex((p) => p.id === productData.id);
+ if (index !== -1) {
+ this.products[index] = productData;
+ console.log("✏️ Updated existing product at index:", index);
+ }
+ } else {
+ // Adding new product
+ this.products.push(productData);
+ console.log(
+ "➕ Added new product. Total products:",
+ this.products.length
+ );
+ }
+
+ // Save to file
+ await this.saveData();
+ console.log("💾 Data saved to products.json");
+ }
+
+ // Save data to the products.json file
+ async saveData() {
+ try {
+ const dataToSave = {
+ products: this.products,
+ categories: this.categories,
+ };
+
+ console.log("💾 SAVING DATA TO FILE:");
+ console.log("📦 Products to save:", this.products.length);
+ console.log("📂 Categories to save:", this.categories.length);
+
+ // Store in localStorage for backup
+ localStorage.setItem("khy_products_backup", JSON.stringify(dataToSave));
+
+ // Write to admin dashboard's local copy for sync
+ await this.writeToAdminLocal(dataToSave);
+
+ // Create a downloadable file for manual sync
+ this.createDownloadableFile(dataToSave);
+
+ // Show instructions for manual sync
+ console.log("📋 TO SYNC TO MAIN WEBSITE:");
+ console.log("1. Two files have been downloaded:");
+ console.log(" - 'products_updated.json' (for main website)");
+ console.log(" - 'admin_local_products.json' (for admin dashboard)");
+ console.log("2. QUICK SYNC - Copy this command and run it in terminal:");
+ console.log(
+ " cp ~/Downloads/products_updated.json ../data/products.json"
+ );
+ console.log(" (from the admin-dashboard directory)");
+ console.log("3. Refresh the preview to see changes");
+ console.log(
+ "💡 The admin dashboard will now show your changes immediately!"
+ );
+ } catch (error) {
+ console.error("❌ Error saving data:", error);
+ throw error;
+ }
+ }
+
+ // Write to admin dashboard's local copy using a simple approach
+ async writeToAdminLocal(data) {
+ try {
+ // Since we can't write files directly from browser, we'll use a different approach
+ // Store the data in a special localStorage key that can be accessed by a sync script
+ localStorage.setItem("khy_admin_local_copy", JSON.stringify(data));
+ console.log("✅ Data stored for admin local copy");
+
+ // Also create a downloadable file specifically for admin local copy
+ const dataStr = JSON.stringify(data, null, 2);
+ const dataBlob = new Blob([dataStr], { type: "application/json" });
+ const url = URL.createObjectURL(dataBlob);
+
+ const downloadLink = document.createElement("a");
+ downloadLink.href = url;
+ downloadLink.download = "admin_local_products.json";
+ downloadLink.style.display = "none";
+ document.body.appendChild(downloadLink);
+ downloadLink.click();
+ document.body.removeChild(downloadLink);
+ URL.revokeObjectURL(url);
+
+ console.log(
+ "✅ Admin local copy downloaded as 'admin_local_products.json'"
+ );
+ } catch (error) {
+ console.log("⚠️ Could not create admin local copy:", error);
+ }
+ }
+
+ // Create a downloadable file for manual sync
+ createDownloadableFile(data) {
+ try {
+ const dataStr = JSON.stringify(data, null, 2);
+ const dataBlob = new Blob([dataStr], { type: "application/json" });
+ const url = URL.createObjectURL(dataBlob);
+
+ // Create a temporary download link
+ const downloadLink = document.createElement("a");
+ downloadLink.href = url;
+ downloadLink.download = "products_updated.json";
+ downloadLink.style.display = "none";
+ document.body.appendChild(downloadLink);
+ downloadLink.click();
+ document.body.removeChild(downloadLink);
+ URL.revokeObjectURL(url);
+
+ console.log("✅ Updated products.json downloaded for manual sync");
+ } catch (error) {
+ console.log("⚠️ Could not create download file:", error);
+ }
+ }
+
+ // Refresh current view to show changes immediately
+ refreshCurrentView() {
+ console.log("🔄 REFRESHING CURRENT VIEW");
+
+ // If we're in category view, refresh that
+ if (this.dashboard.currentSection === "category-products") {
+ // Get the current category from the URL or state
+ const categoryButton = document.querySelector("[data-category-id]");
+ if (categoryButton) {
+ const categoryId = categoryButton.getAttribute("data-category-id");
+ // Refresh the category products view
+ if (this.dashboard.categoryManager) {
+ this.dashboard.categoryManager.viewCategoryProducts(categoryId);
+ }
+ }
+ }
+
+ // Always refresh the preview if it exists
+ this.refreshPreview();
+ }
+
+ // Refresh the preview iframe
+ refreshPreview() {
+ console.log("🖼️ REFRESHING PREVIEW");
+ const iframe = document.getElementById("preview-iframe");
+ if (iframe && iframe.src) {
+ // Add a timestamp to force refresh
+ const url = new URL(iframe.src);
+ url.searchParams.set("_refresh", Date.now());
+ iframe.src = url.toString();
+ console.log("🔄 Preview refreshed with timestamp");
+ }
+ }
+
+ extractFormData(formData) {
+ console.log("🔍 EXTRACTING FORM DATA:");
+ console.log("FormData entries:", Array.from(formData.entries()));
+
+ const productData = {
+ name: formData.get("name"),
+ category: formData.get("category"),
+ description: formData.get("description"),
+ warranty: formData.get("warranty"),
+ };
+
+ console.log("📝 Basic product data:", productData);
+
+ // Handle descriptionLong
+ const descriptionLong = formData.get("descriptionLong");
+ if (descriptionLong) {
+ productData.descriptionLong = descriptionLong
+ .split("\n")
+ .filter((line) => line.trim());
+ console.log("📄 DescriptionLong array:", productData.descriptionLong);
+ }
+
+ // Handle additional information
+ const material = formData.get("material");
+ const design = formData.get("design");
+ const useCases = formData.get("useCases");
+ const warranty = formData.get("warranty");
+
+ console.log("🔧 Additional info fields:", {
+ material,
+ design,
+ useCases,
+ warranty,
+ });
+
+ // Start with existing additional information or create new object
+ productData.additionalInformation =
+ this.currentProduct?.additionalInformation || {};
+
+ // Update main fields
+ if (material) productData.additionalInformation.Material = material;
+ if (design) productData.additionalInformation.Design = design;
+ if (useCases) productData.additionalInformation["Use Cases"] = useCases;
+ if (warranty) productData.additionalInformation.Warranty = warranty;
+
+ // Handle all additional information fields from the form
+ for (const [key, value] of formData.entries()) {
+ if (key.startsWith("additionalInfo.")) {
+ const fieldName = key.replace("additionalInfo.", "");
+ if (value && value.trim()) {
+ productData.additionalInformation[fieldName] = value.trim();
+ }
+ }
+ }
+
+ console.log(
+ "📋 Additional Information object:",
+ productData.additionalInformation
+ );
+
+ // Preserve existing images
+ if (this.currentProduct && this.currentProduct.images) {
+ productData.images = [...this.currentProduct.images];
+ console.log("🖼️ Existing images:", productData.images);
+ }
+
+ console.log("✅ FINAL EXTRACTED PRODUCT DATA:", productData);
+ return productData;
+ }
+
+ getNextProductId() {
+ const maxId = Math.max(...this.products.map((p) => p.id), 0);
+ return maxId + 1;
+ }
+
+ async editProduct(id) {
+ console.log(
+ "ProductManager.editProduct called with ID:",
+ id,
+ "Type:",
+ typeof id
+ );
+ console.log("Available products:", this.products.length);
+ // Convert string ID to number for comparison
+ const numericId = typeof id === "string" ? parseInt(id, 10) : id;
+ console.log("Looking for numeric ID:", numericId);
+ const product = this.products.find((p) => p.id === numericId);
+ console.log("Found product:", product);
+ if (product) {
+ console.log("Showing product modal for:", product.name);
+ await this.showProductModal(product);
+ } else {
+ console.log("Product not found with ID:", numericId);
+ // Debug: show first few product IDs for comparison
+ console.log(
+ "First 5 product IDs:",
+ this.products
+ .slice(0, 5)
+ .map((p) => ({ id: p.id, name: p.name, type: typeof p.id }))
+ );
+ }
+ }
+
+ async duplicateProduct(id) {
+ const numericId = typeof id === "string" ? parseInt(id, 10) : id;
+ const product = this.products.find((p) => p.id === numericId);
+ if (product) {
+ const duplicatedProduct = {
+ ...product,
+ id: this.getNextProductId(),
+ name: product.name + " (Copy)",
+ };
+ await this.showProductModal(duplicatedProduct);
+ }
+ }
+
+ async deleteProduct(id) {
+ const numericId = typeof id === "string" ? parseInt(id, 10) : id;
+ const product = this.products.find((p) => p.id === numericId);
+ if (!product) return;
+
+ if (
+ confirm(
+ `Are you sure you want to delete "${product.name}"? This action cannot be undone.`
+ )
+ ) {
+ try {
+ // Remove product images if any
+ if (product.images) {
+ await this.deleteProductImages(product.images);
+ }
+
+ // Remove from products array
+ this.products = this.products.filter((p) => p.id !== numericId);
+ await this.saveData();
+ this.renderProducts();
+ this.dashboard.showMessage("Product deleted successfully!", "success");
+ } catch (error) {
+ this.dashboard.showMessage(
+ "Error deleting product: " + error.message,
+ "error"
+ );
+ }
+ }
+ }
+
+ removeExistingImage(index) {
+ console.log("removeExistingImage called with index:", index);
+ if (this.currentProduct && this.currentProduct.images) {
+ const imagePath = this.currentProduct.images[index];
+ const imageName = imagePath ? imagePath.split("/").pop() : "this image";
+
+ console.log("Showing confirmation dialog for:", imageName);
+ this.showImageDeleteConfirmation(imageName, index, imagePath);
+ }
+ }
+
+ showImageDeleteConfirmation(imageName, index, imagePath) {
+ // Create custom confirmation dialog
+ const confirmationDiv = document.createElement("div");
+ confirmationDiv.className = "image-delete-confirmation";
+ confirmationDiv.innerHTML = `
+
+
Delete Image
+
Do you really want to delete ${imageName} ?
+
This action is irreversible and will permanently remove the image from this product.
+
+ Cancel
+ Delete
+
+
