# 📤 Mutiara Product Editor - VPS Upload Package

**Ready to Upload** | **Total Size:** 63 MB | **600 Product Images**

This folder contains everything your team needs to edit product data online.

---

## 📁 What's Inside

```
vps-upload/
├── index.html                             # 🏠 LANDING PAGE (Start here!)
├── admin/
│   └── product-editor-standalone.html    # Main web interface (1.6 MB)
├── extraction_workspace/
│   └── cropped_products/                 # 600 product images (60 MB)
│       ├── dashu_page_001_product_01.jpg
│       ├── dashu_page_002_product_01.jpg
│       └── ... (598 more images)
├── data/
│   ├── dashu_catalog.json                # 194 products (Source A)
│   ├── hezexing_catalog.json             # 194 products (Source B)
│   ├── hubble_catalog.json               # 122 products (Source C)
│   ├── menzhanhui_catalog.json           # 69 products (Source D)
│   └── zhaoman_catalog.json              # 10 products (Source E)
├── gold_logo.png                          # Mutiara company logo
├── README.md                              # This file
├── UPLOAD_INSTRUCTIONS.txt                # Quick reference
└── upload-to-vps.sh                       # Automated upload script
```

**Total:** 589 products across 5 catalogs

---

## 🚀 Upload to VPS - Simple Method

### Step 1: Upload This Entire Folder

```bash
# From your Mac terminal:
cd /Users/davidfu/Desktop/m2

# Upload everything at once
scp -r vps-upload user@your-vps-ip:/var/www/html/

# Or if using a specific domain folder:
scp -r vps-upload user@your-vps-ip:/var/www/your-domain.com/
```

### Step 2: Set Proper Permissions

```bash
# SSH into your VPS
ssh user@your-vps-ip

# Set permissions
sudo chown -R www-data:www-data /var/www/html/vps-upload
sudo chmod -R 755 /var/www/html/vps-upload
sudo chmod 644 /var/www/html/vps-upload/admin/product-editor-standalone.html
```

### Step 3: Access Online

**Landing Page (Recommended):**
```
https://your-domain.com/vps-upload/
```
Or directly:
```
https://your-domain.com/vps-upload/index.html
```

**Direct to Editor:**
```
https://your-domain.com/vps-upload/admin/product-editor-standalone.html
```

**That's it!** ✅

**💡 Tip:** Share the landing page URL with your team. It provides navigation, instructions, and easy access to all tools.

---

## 🔒 Secure the Editor (IMPORTANT!)

### Quick Password Protection

```bash
# SSH into VPS
ssh user@your-vps-ip

# Install Apache utils (if not installed)
sudo apt-get install apache2-utils

# Create password file
sudo htpasswd -c /etc/apache2/.htpasswd admin
# Enter your password when prompted

# Create .htaccess file
sudo nano /var/www/html/vps-upload/admin/.htaccess
```

**Add this content:**
```apache
AuthType Basic
AuthName "Mutiara Product Editor - Admin Access Only"
AuthUserFile /etc/apache2/.htpasswd
Require valid-user
```

**Save (Ctrl+O, Enter, Ctrl+X)**

Now the editor requires login! 🔐

---

## 🎯 What Your Team Can Do

After uploading to VPS, your team can:

✅ **Access from anywhere** (office, home, mobile)  
✅ **View all 589 products** with images  
✅ **Edit product details:**
   - Chinese names (name_zh)
   - English names (name_en)
   - Descriptions (description_zh, description_en)
   - Categories, colors, features
   - Add custom fields (pricing, availability, lead time)

✅ **Search and filter** products by:
   - Model number
   - Name
   - Category
   - Source (A/B/C/D/E)

✅ **Export changes** as ZIP file  
✅ **No technical knowledge required**

---

## 🔄 Complete Workflow

### 1. Team Updates Data Online

```
Team member → Opens editor URL → Edits products → Exports ZIP
```

### 2. You Receive Updates

Team emails you: `mutiara-catalogs-updated.zip`

### 3. You Apply Updates Locally

```bash
# On your Mac:
cd /Users/davidfu/Desktop/m2/pdf-generator

# Extract the ZIP they sent
unzip mutiara-catalogs-updated.zip -d /tmp/updates

# Import changes back to source catalogs
npm run import /tmp/updates

# This updates the 5 JSON files in extracted-content/
```

### 4. Regenerate PDFs

```bash
# Still in pdf-generator folder
npm run clean
npm run generate

# Check output
ls -lh output/
# You'll see 10 updated PDF catalogs
```

### 5. Optionally Update VPS Data

If you want to sync the updated catalogs back to VPS:

```bash
# Upload updated JSON files
scp /Users/davidfu/Desktop/m2/extracted-content/*.json \
    user@your-vps:/var/www/html/vps-upload/data/
```

Now when team opens the editor again, they'll see their previous changes!

---

## 📊 File Breakdown

| Item | Size | Count | Purpose |
|------|------|-------|---------|
| **product-editor-standalone.html** | 1.6 MB | 1 file | Web interface |
| **cropped_products/** | 60 MB | 600 images | Product photos |
| **catalog JSON files** | 1.4 MB | 5 files | Product data |
| **gold_logo.png** | 100 KB | 1 file | Company logo |
| **TOTAL** | **63 MB** | **607 files** | Complete package |

---

## 🌐 Alternative: Using Dokploy

If you use Dokploy for deployments:

### Method 1: Static Site

1. **Create new project in Dokploy:**
   - Type: Static Site
   - Name: mutiara-editor

2. **Upload this folder via Dokploy interface**

3. **Access:** Dokploy provides HTTPS URL automatically

### Method 2: File Manager

1. Use Dokploy's file manager
2. Upload `vps-upload` folder
3. Set as web root or subdirectory

---

## ✅ Verify Upload Success

After uploading, check:

### 1. Editor Loads
```
https://your-domain.com/vps-upload/admin/product-editor-standalone.html
```
✅ Page loads  
✅ Tabs visible (All Products, Premium Doors, etc.)  
✅ Product table shows

### 2. Images Display
✅ Product photos visible in table  
✅ No broken image icons  
✅ Images load quickly

### 3. Data Loaded
✅ Shows "Total: 589" products  
✅ Can switch between tabs  
✅ Can search products

### 4. Editing Works
✅ Click cell, edit text, press Enter  
✅ Row turns yellow (edited)  
✅ "Last saved" timestamp updates

### 5. Export Works
✅ Click "Export by Catalog (ZIP)"  
✅ Downloads `mutiara-catalogs-updated.zip`  
✅ ZIP contains 5 JSON files

**All working?** ✅ **Your team is ready!**

---

## 🛠️ Troubleshooting

### Images Not Loading

**Problem:** Editor loads but images don't show

**Fix:**
```bash
# Check permissions
ssh user@your-vps
ls -la /var/www/html/vps-upload/extraction_workspace/cropped_products/

# Should show: -rw-r--r-- (644)
# If not:
sudo chmod -R 644 /var/www/html/vps-upload/extraction_workspace/cropped_products/*
sudo chmod 755 /var/www/html/vps-upload/extraction_workspace/cropped_products/
```

### 404 Error

**Problem:** Page not found

**Fix:**
```bash
# Verify path
ssh user@your-vps
ls -la /var/www/html/vps-upload/admin/

# Should show: product-editor-standalone.html
```

### Data Not Loading (Shows 0 Products)

**Problem:** Editor loads but no products

**Fix:**
```bash
# Check JSON files
ssh user@your-vps
ls -la /var/www/html/vps-upload/data/

# Should show 5 JSON files
# Verify they're readable:
sudo chmod 644 /var/www/html/vps-upload/data/*.json
```

### Export Not Working

**Problem:** Export button doesn't download file

**Fix:**
- Try different browser (Chrome/Firefox recommended)
- Disable popup blocker
- Check browser console for errors (F12)

---

## 📱 Share With Team

**Send them:**

**1. URL:**
```
https://your-domain.com/vps-upload/admin/product-editor-standalone.html
```

**2. Login credentials** (if password protected)

**3. Quick Instructions:**
```
1. Open the URL in Chrome or Firefox
2. Login with provided username/password
3. Edit products by clicking cells
4. Press Enter to save changes
5. Click "Export by Catalog (ZIP)" when done
6. Email the ZIP file to [your email]
```

**4. User Guide:**
Send them: `/Users/davidfu/Desktop/m2/pdf-generator/docs/PRODUCT_EDITOR_GUIDE.md`

---

## 🔄 Keeping Data in Sync

### Scenario 1: Team Makes Changes

1. Team exports updated data (ZIP)
2. You import on your Mac
3. You regenerate PDFs
4. *(Optional)* Upload updated JSONs back to VPS

### Scenario 2: You Add New Products

1. You add products to local JSON files
2. You regenerate PDFs
3. Upload updated JSONs to VPS:
   ```bash
   scp /Users/davidfu/Desktop/m2/extracted-content/*.json \
       user@your-vps:/var/www/html/vps-upload/data/
   ```
4. Team refreshes editor, sees new products

---

## 💾 Backup Recommendations

### Before Uploading
```bash
# Create backup of this folder
cd /Users/davidfu/Desktop/m2
tar -czf vps-upload-backup-$(date +%Y%m%d).tar.gz vps-upload/
```

### On VPS (Periodic Backups)
```bash
# Create weekly backups
ssh user@your-vps
cd /var/www/html
tar -czf mutiara-editor-backup-$(date +%Y%m%d).tar.gz vps-upload/

# Save to backup location
mv mutiara-editor-backup-*.tar.gz ~/backups/
```

---

## 📞 Support & Documentation

**Full Guides:**
- `/Users/davidfu/Desktop/m2/VPS_DEPLOYMENT_FOR_TEAM.md` - Detailed deployment guide
- `/Users/davidfu/Desktop/m2/pdf-generator/docs/PRODUCT_EDITOR_GUIDE.md` - User manual
- `/Users/davidfu/Desktop/m2/pdf-generator/README.md` - Technical documentation

**Key Features:**
- Auto-save every 30 seconds
- Change tracking (yellow highlighting)
- Bulk editing capabilities
- Custom field support
- Multi-language editing (Chinese/English)

---

## 🎯 Summary

**This folder contains:**
✅ Complete product editing system (589 products)  
✅ All product images (600 photos)  
✅ Source data for updates (5 catalogs)  
✅ Company branding (logo)  
✅ Everything needed for team to work online  

**Upload size:** 63 MB  
**Upload time:** ~2-5 minutes (depends on connection)  

**Ready to upload?** Just run the SCP command above! 🚀

---

**Questions?**  
Check the detailed guides or contact the technical admin.

**Last Updated:** January 12, 2025  
**Version:** 1.0  
**Status:** Ready for Deployment ✅