diff --git a/README.md b/README.md
index 68f54d0..446e85f 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
deleted file mode 100644
index 28e21f5..0000000
Binary files a/admin-dashboard/assets/icons/address.png and /dev/null differ
diff --git a/admin-dashboard/assets/icons/mail.png b/admin-dashboard/assets/icons/mail.png
deleted file mode 100644
index 97d2e58..0000000
Binary files a/admin-dashboard/assets/icons/mail.png and /dev/null differ
diff --git a/admin-dashboard/assets/icons/phone.png b/admin-dashboard/assets/icons/phone.png
deleted file mode 100644
index 1e83e1a..0000000
Binary files a/admin-dashboard/assets/icons/phone.png and /dev/null differ
diff --git a/admin-dashboard/assets/icons/phone2.png b/admin-dashboard/assets/icons/phone2.png
deleted file mode 100644
index 5ba105b..0000000
Binary files a/admin-dashboard/assets/icons/phone2.png and /dev/null differ
diff --git a/admin-dashboard/assets/icons/shipping.png b/admin-dashboard/assets/icons/shipping.png
deleted file mode 100644
index 9fb9a8f..0000000
Binary files a/admin-dashboard/assets/icons/shipping.png and /dev/null differ
diff --git a/admin-dashboard/assets/icons/star.png b/admin-dashboard/assets/icons/star.png
deleted file mode 100644
index 4f7a231..0000000
Binary files a/admin-dashboard/assets/icons/star.png and /dev/null differ
diff --git a/admin-dashboard/assets/icons/support.png b/admin-dashboard/assets/icons/support.png
deleted file mode 100644
index ebb5cd6..0000000
Binary files a/admin-dashboard/assets/icons/support.png and /dev/null differ
diff --git a/admin-dashboard/assets/icons/time.png b/admin-dashboard/assets/icons/time.png
deleted file mode 100644
index d45e13b..0000000
Binary files a/admin-dashboard/assets/icons/time.png and /dev/null differ
diff --git a/admin-dashboard/assets/icons/trophy.png b/admin-dashboard/assets/icons/trophy.png
deleted file mode 100644
index c1820f9..0000000
Binary files a/admin-dashboard/assets/icons/trophy.png and /dev/null differ
diff --git a/admin-dashboard/assets/icons/warranty.png b/admin-dashboard/assets/icons/warranty.png
deleted file mode 100644
index 6448c7c..0000000
Binary files a/admin-dashboard/assets/icons/warranty.png and /dev/null differ
diff --git a/admin-dashboard/product-detail.html b/admin-dashboard/product-detail.html
deleted file mode 100644
index d6c091a..0000000
--- a/admin-dashboard/product-detail.html
+++ /dev/null
@@ -1,272 +0,0 @@
-
-
-
-
-
- Product Detail - KHY
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Product Details
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
![]()
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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!
-
-
${
- category.description || "No description"
- }
-
- ${productCount} product${
- productCount !== 1 ? "s" : ""
- }
-
-
-
-
- `;
- 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"
- }
-
-
-
-
-
-
No images found
-
Upload images to get started!
-
-
-
Image Not Found'">
-
-
${image.name}
-
- Product: ${image.productName}
- Size: ${image.size}
-
-
-
-
-
-
- `;
- 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
-
-
-
-
-
-
-
-
-
-
-
- ${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 = `
-
-
-
-
-
-
-
Product Management
-
Use the "Add Product" button above to create new products.
-
-
No Image'
- }"
- alt="${product.name}"
- onerror="this.src='data:image/svg+xml,
'">
-
-
${product.name}
-
${categoryName}
-
${
- product.description
- ? product.description.substring(0, 100) + "..."
- : "No description"
- }
-
- ID: ${product.id}
- ${
- product.additionalInformation?.Warranty ||
- "No warranty info"
- }
-
-
-
-
-
-
- `;
- 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 = `
-
-
- `;
- } else {
- fieldElement.innerHTML = `
-
-
- `;
- }
-
- additionalInfoGrid.appendChild(fieldElement);
- }
- });
-
- // If no additional fields to show, display a message
- if (additionalInfoGrid.children.length === 0) {
- additionalInfoGrid.innerHTML =
- "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
-
-
-
-
-
-
- `;
-
- // 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 = `
-
-
- `;
- } else {
- fieldElement.innerHTML = `
-
-
- `;
- }
-
- // Insert after the new field form
- const newFieldForm = document.querySelector(".new-field-form");
- additionalInfoGrid.insertBefore(fieldElement, newFieldForm.nextSibling);
-
- // Hide the form and clear inputs
- this.hideNewFieldForm();
- }
-
- removeField(button) {
- const fieldName = button.getAttribute("data-field-name");
- if (confirm(`Are you sure you want to remove the "${fieldName}" field?`)) {
- const fieldElement = button.closest(".additional-info-item");
- fieldElement.remove();
- }
- }
-
- async showExistingImages(product) {
- const preview = document.getElementById("image-preview");
- preview.innerHTML = "";
-
- console.log(
- `🖼️ showExistingImages called with ${
- product.images ? product.images.length : 0
- } images`
- );
-
- if (product.images && product.images.length > 0) {
- // Clean up any existing blob URLs
- this.cleanupBlobUrls();
-
- console.log(
- `🖼️ Processing ${product.images.length} images:`,
- product.images
- );
-
- for (let index = 0; index < product.images.length; index++) {
- const imagePath = product.images[index];
- const imageDiv = document.createElement("div");
- imageDiv.className = "image-preview-item";
-
- // Handle different types of image paths
- let imageSrc;
- if (imagePath.startsWith("blob:")) {
- // This is an expired blob URL - try to find the image in IndexedDB
- console.log(`⚠️ Found expired blob URL: ${imagePath}`);
- try {
- const imageData = await this.findImageDataInIndexedDB(
- imagePath,
- product.id
- );
- if (imageData && imageData.file) {
- // Create new blob URL from stored file
- const newBlobUrl = URL.createObjectURL(imageData.file);
- imageSrc = newBlobUrl;
-
- // Store the new blob URL for cleanup later
- if (!this.currentBlobUrls) this.currentBlobUrls = [];
- this.currentBlobUrls.push(newBlobUrl);
-
- console.log(
- `📁 Recreated blob URL from IndexedDB: ${imageData.name}`
- );
- } else {
- // Show error placeholder
- imageSrc =
- "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHg9IjUwIiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSIjOTk5IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+SW1hZ2UgRXJyb3I8L3RleHQ+PC9zdmc+";
- console.log(`❌ No IndexedDB data found for expired blob URL`);
- }
- } catch (error) {
- console.error("❌ Error loading IndexedDB image:", error);
- imageSrc =
- "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHg9IjUwIiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSIjOTk5IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+SW1hZ2UgRXJyb3I8L3RleHQ+PC9zdmc+";
- }
- } else if (
- imagePath.includes("product_") &&
- imagePath.includes("_cover.jpg")
- ) {
- // This is a newly uploaded image that should be in IndexedDB
- try {
- const imageData = await this.findImageDataInIndexedDB(
- imagePath,
- product.id
- );
- if (imageData && imageData.file) {
- // Create new blob URL from stored file
- const newBlobUrl = URL.createObjectURL(imageData.file);
- imageSrc = newBlobUrl;
-
- // Store the new blob URL for cleanup later
- if (!this.currentBlobUrls) this.currentBlobUrls = [];
- this.currentBlobUrls.push(newBlobUrl);
-
- console.log(`📁 Displaying IndexedDB image: ${imageData.name}`);
- } else {
- // Fallback to original path
- imageSrc = this.fixImagePath(imagePath);
- console.log(`📷 Fallback to original path: ${imagePath}`);
- }
- } catch (error) {
- console.error("❌ Error loading IndexedDB image:", error);
- imageSrc = this.fixImagePath(imagePath);
- }
- } else {
- // This is an existing image path - fix it for admin dashboard
- imageSrc = this.fixImagePath(imagePath);
- console.log(`📷 Displaying original image: ${imagePath}`);
- }
-
- console.log(
- `🖼️ Creating image ${index + 1} with src: ${imageSrc.substring(
- 0,
- 50
- )}...`
- );
-
- imageDiv.innerHTML = `
- 
-
- `;
- 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.
-
-
-
-
-