Files

File: src/main/resources/static/js/admin.js

Back to file list | View History | Compare Versions
      
      const API_BASE = '/api';
    
      let currentTab = 'products';
    
      let editingProductId = null;
    
      // Tab switching
    
      function switchTab(tab) {
    
          currentTab = tab;
    
          // Update tab buttons
    
          document.querySelectorAll('.admin-tab').forEach(btn => {
    
              btn.classList.remove('active');
    
          });
    
          event.target.classList.add('active');
    
          // Update content
    
          document.querySelectorAll('.admin-content').forEach(content => {
    
              content.classList.remove('active');
    
          });
    
          document.getElementById(tab + 'Tab').classList.add('active');
    
          // Load data for the tab
    
          if (tab === 'products') {
    
              loadProducts();
    
          } else if (tab === 'orders') {
    
              loadOrders();
    
          } else if (tab === 'regions') {
    
              loadRegions();
    
          } else if (tab === 'translations') {
    
              loadTranslations();
    
          } else if (tab === 'currency') {
    
              loadCurrencyRates();
    
          }
    
      }
    
      // Product Management
    
      async function loadProducts() {
    
          const container = document.getElementById('productsList');
    
          try {
    
              const response = await fetch(`${API_BASE}/products`);
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Failed to load products');
    
              }
    
              if (data.products.length === 0) {
    
                  container.innerHTML = '<div style="padding: 2rem; text-align: center; color: #666;">No products found. Add your first product!</div>';
    
                  return;
    
              }
    
              container.innerHTML = `
    
                  <table>
    
                      <thead>
    
                          <tr>
    
                              <th>Image</th>
    
                              <th>Name</th>
    
                              <th>Category</th>
    
                              <th>Price</th>
    
                              <th>Stock</th>
    
                              <th>Actions</th>
    
                          </tr>
    
                      </thead>
    
                      <tbody>
    
                          ${data.products.map(product => `
    
                              <tr>
    
                                  <td>
    
                                      ${product.image && product.image.trim() && (product.image.startsWith('http') || product.image.startsWith('/'))
    
                                          ? `<img src="${escapeHtml(product.image)}" alt="${escapeHtml(product.name)}" style="width: 60px; height: 60px; object-fit: cover; border-radius: 4px;" onerror="this.style.display='none'">`
    
                                          : '<div style="width: 60px; height: 60px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #999;">No Image</div>'}
    
                                  </td>
    
                                  <td><strong>${escapeHtml(product.name)}</strong></td>
    
                                  <td>${escapeHtml(product.category || 'general')}</td>
    
                                  <td>
    
                                      ${product.currency} ${(product.price / 100).toFixed(2)}
    
                                      <br><small style="color: #666;">${product.taxIncluded ? '(tax included)' : '(tax excluded)'}</small>
    
                                  </td>
    
                                  <td>${product.stock === null ? 'Unlimited' : product.stock}</td>
    
                                  <td>
    
                                      <button class="btn btn-small" onclick="editProduct('${product.id}')">Edit</button>
    
                                      <button class="btn btn-small btn-danger" onclick="deleteProduct('${product.id}')">Delete</button>
    
                                  </td>
    
                              </tr>
    
                          `).join('')}
    
                      </tbody>
    
                  </table>
    
              `;
    
          } catch (error) {
    
              container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
    
          }
    
      }
    
      function openProductForm(productId = null) {
    
          editingProductId = productId;
    
          const form = document.getElementById('productForm');
    
          const title = document.getElementById('formTitle');
    
          if (productId) {
    
              title.textContent = 'Edit Product';
    
              loadProductForEdit(productId);
    
          } else {
    
              title.textContent = 'Add New Product';
    
              document.getElementById('productFormElement').reset();
    
              document.getElementById('imagePreviewContainer').style.display = 'none';
    
          }
    
          form.style.display = 'block';
    
          form.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    
      }
    
      function closeProductForm() {
    
          document.getElementById('productForm').style.display = 'none';
    
          editingProductId = null;
    
          document.getElementById('productFormElement').reset();
    
          document.getElementById('imagePreviewContainer').style.display = 'none';
    
      }
    
      async function loadProductForEdit(productId) {
    
          try {
    
              const response = await fetch(`${API_BASE}/products/${productId}`);
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Product not found');
    
              }
    
              const product = data.product;
    
              document.getElementById('productId').value = product.id;
    
              document.getElementById('productName').value = product.name;
    
              document.getElementById('productDescription').value = product.description || '';
    
              document.getElementById('productPrice').value = (product.price / 100).toFixed(2);
    
              document.getElementById('productCurrency').value = product.currency;
    
              document.getElementById('productStock').value = product.stock || '';
    
              document.getElementById('productCategory').value = product.category || 'general';
    
              document.getElementById('productImage').value = product.image || '';
    
              document.getElementById('productTaxIncluded').value = product.taxIncluded ? 'true' : 'false';
    
              // Show image preview if URL is provided
    
              if (product.image && product.image.trim()) {
    
                  const preview = document.getElementById('imagePreview');
    
                  preview.src = product.image;
    
                  document.getElementById('imagePreviewContainer').style.display = 'block';
    
              }
    
          } catch (error) {
    
              showNotification(`Error loading product: ${error.message}`, 'error');
    
          }
    
      }
    
      async function handleProductSubmit(event) {
    
          event.preventDefault();
    
          const form = event.target;
    
          const formData = new FormData(form);
    
          const productData = {
    
              name: formData.get('name'),
    
              description: formData.get('description') || '',
    
              price: parseFloat(formData.get('price')),
    
              currency: formData.get('currency'),
    
              stock: formData.get('stock') ? parseInt(formData.get('stock')) : null,
    
              category: formData.get('category') || 'general',
    
              image: formData.get('image') || '',
    
              taxIncluded: formData.get('taxIncluded') === 'true'
    
          };
    
          const submitBtn = form.querySelector('button[type="submit"]');
    
          submitBtn.disabled = true;
    
          submitBtn.textContent = 'Saving...';
    
          try {
    
              const url = editingProductId 
    
                  ? `${API_BASE}/products/${editingProductId}`
    
                  : `${API_BASE}/products`;
    
              const method = editingProductId ? 'PUT' : 'POST';
    
              const response = await fetchWithCsrf(url, {
    
                  method,
    
                  headers: {
    
                      'Content-Type': 'application/json'
    
                  },
    
                  body: JSON.stringify(productData)
    
              });
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Failed to save product');
    
              }
    
              // Token is already refreshed by fetchWithCsrf, but ensure button is re-enabled
    
              submitBtn.disabled = false;
    
              submitBtn.textContent = 'Save Product';
    
              showNotification(`Product ${editingProductId ? 'updated' : 'created'} successfully!`, 'success');
    
              closeProductForm();
    
              loadProducts();
    
          } catch (error) {
    
              showNotification(`Error: ${error.message}`, 'error');
    
              submitBtn.disabled = false;
    
              submitBtn.textContent = 'Save Product';
    
              // Refresh CSRF token even on error (token might have been invalidated)
    
              if (window.refreshCsrfToken) {
    
                  await window.refreshCsrfToken();
    
              }
    
          }
    
      }
    
      async function deleteProduct(productId) {
    
          const confirmed = await showConfirm(
    
              'Are you sure you want to delete this product? This action cannot be undone.',
    
              'Delete Product'
    
          );
    
          if (!confirmed) {
    
              return;
    
          }
    
          try {
    
              const response = await fetchWithCsrf(`${API_BASE}/products/${productId}`, {
    
                  method: 'DELETE'
    
              });
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Failed to delete product');
    
              }
    
              showNotification('Product deleted successfully!', 'success');
    
              loadProducts();
    
          } catch (error) {
    
              showNotification(`Error: ${error.message}`, 'error');
    
          }
    
      }
    
      function editProduct(productId) {
    
          openProductForm(productId);
    
      }
    
      // Image preview
    
      document.getElementById('productImage')?.addEventListener('input', function(e) {
    
          const url = e.target.value.trim();
    
          const previewContainer = document.getElementById('imagePreviewContainer');
    
          const preview = document.getElementById('imagePreview');
    
          if (url && (url.startsWith('http') || url.startsWith('/'))) {
    
              preview.src = url;
    
              preview.onerror = function() {
    
                  previewContainer.style.display = 'none';
    
              };
    
              preview.onload = function() {
    
                  previewContainer.style.display = 'block';
    
              };
    
          } else {
    
              previewContainer.style.display = 'none';
    
          }
    
      });
    
      // Order Management
    
      async function loadOrders() {
    
          const container = document.getElementById('ordersList');
    
          try {
    
              // Get all orders - we'll need to modify the orders route to support this
    
              // For now, we'll fetch from a new endpoint or modify existing one
    
              const response = await fetch(`${API_BASE}/orders`);
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Failed to load orders');
    
              }
    
              if (data.orders.length === 0) {
    
                  container.innerHTML = '<div style="padding: 2rem; text-align: center; color: #666;">No orders found.</div>';
    
                  return;
    
              }
    
              container.innerHTML = `
    
                  <table>
    
                      <thead>
    
                          <tr>
    
                              <th>Order ID</th>
    
                              <th>Customer</th>
    
                              <th>Items</th>
    
                              <th>Total</th>
    
                              <th>Status</th>
    
                              <th>Tracking</th>
    
                              <th>Date</th>
    
                              <th>Actions</th>
    
                          </tr>
    
                      </thead>
    
                      <tbody>
    
                          ${data.orders.map(order => `
    
                              <tr>
    
                                  <td><strong>${order.orderId}</strong></td>
    
                                  <td>
    
                                      ${order.customerInfo?.email || 'N/A'}<br>
    
                                      <small style="color: #666;">${order.customerInfo?.firstName || ''} ${order.customerInfo?.lastName || ''}</small>
    
                                  </td>
    
                                  <td>
    
                                      ${order.items.map(item => `${item.productName} x${item.quantity}`).join('<br>')}
    
                                  </td>
    
                                  <td><strong>${order.currency} ${(order.total / 100).toFixed(2)}</strong></td>
    
                                  <td>
    
                                      <span class="status-badge status-${order.status}">${order.status}</span>
    
                                  </td>
    
                                  <td>
    
                                      ${order.trackingId ? `<strong>${escapeHtml(order.trackingId)}</strong><br><small style="color: #666;">${order.carrier || ''}</small>` : '<span style="color: #999;">—</span>'}
    
                                  </td>
    
                                  <td>${new Date(order.createdAt).toLocaleString()}</td>
    
                                  <td>
    
                                      <button class="btn btn-small" onclick="viewOrder('${order.orderId}')">View</button>
    
                                      <button class="btn btn-small" onclick="updateOrderStatus('${order.orderId}')">Update</button>
    
                                  </td>
    
                              </tr>
    
                          `).join('')}
    
                      </tbody>
    
                  </table>
    
              `;
    
          } catch (error) {
    
              container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
    
          }
    
      }
    
      async function viewOrder(orderId) {
    
          try {
    
              const response = await fetch(`${API_BASE}/orders/${orderId}`);
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Order not found');
    
              }
    
              const order = data.order;
    
              const itemsHtml = order.items.map(item => `
    
                  <tr>
    
                      <td>${escapeHtml(item.productName)}</td>
    
                      <td>${item.quantity}</td>
    
                      <td>${order.currency} ${(item.price / 100).toFixed(2)}</td>
    
                      <td>${order.currency} ${(item.total / 100).toFixed(2)}</td>
    
                  </tr>
    
              `).join('');
    
              const modal = `
    
                  <div class="order-modal-overlay" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 2rem;">
    
                      <div style="background: white; border-radius: 12px; padding: 2rem; max-width: 800px; max-height: 90vh; overflow-y: auto; width: 100%;">
    
                          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
    
                              <h3>Order Details: ${order.orderId}</h3>
    
                              <button onclick="this.closest('.order-modal-overlay').remove()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer;">&times;</button>
    
                          </div>
    
                          <div style="margin-bottom: 1.5rem;">
    
                              <h4>Customer Information</h4>
    
                              <p><strong>Email:</strong> ${order.customerInfo?.email || 'N/A'}</p>
    
                              <p><strong>Name:</strong> ${order.customerInfo?.firstName || ''} ${order.customerInfo?.lastName || ''}</p>
    
                              <p><strong>Phone:</strong> ${order.customerInfo?.phone || 'N/A'}</p>
    
                          </div>
    
                          <div style="margin-bottom: 1.5rem;">
    
                              <h4>Shipping Address</h4>
    
                              <p>${order.shippingInfo?.name || 'N/A'}<br>
    
                              ${order.shippingInfo?.address || ''}<br>
    
                              ${order.shippingInfo?.city || ''}, ${order.shippingInfo?.state || ''} ${order.shippingInfo?.zip || ''}<br>
    
                              ${order.shippingInfo?.country || ''}</p>
    
                          </div>
    
                          <div style="margin-bottom: 1.5rem;">
    
                              <h4>Order Items</h4>
    
                              <table style="width: 100%; border-collapse: collapse;">
    
                                  <thead>
    
                                      <tr style="background: #f8f9fa;">
    
                                          <th style="padding: 0.5rem; text-align: left;">Product</th>
    
                                          <th style="padding: 0.5rem; text-align: left;">Quantity</th>
    
                                          <th style="padding: 0.5rem; text-align: left;">Price</th>
    
                                          <th style="padding: 0.5rem; text-align: left;">Total</th>
    
                                      </tr>
    
                                  </thead>
    
                                  <tbody>
    
                                      ${itemsHtml}
    
                                  </tbody>
    
                              </table>
    
                          </div>
    
                          <div>
    
                              <p><strong>Subtotal:</strong> ${order.currency} ${(order.subtotal / 100).toFixed(2)}</p>
    
                              ${order.shippingInfo?.cost > 0 ? `<p><strong>Shipping:</strong> ${order.currency} ${(order.shippingInfo.cost / 100).toFixed(2)}</p>` : ''}
    
                              ${order.shippingInfo?.tax > 0 ? `<p><strong>Tax:</strong> ${order.currency} ${(order.shippingInfo.tax / 100).toFixed(2)}</p>` : ''}
    
                              <p><strong>Total:</strong> ${order.currency} ${(order.total / 100).toFixed(2)}</p>
    
                              <p><strong>Status:</strong> <span class="status-badge status-${order.status}">${order.status}</span></p>
    
                              ${order.trackingId ? `<p><strong>Tracking ID:</strong> ${escapeHtml(order.trackingId)}</p>` : ''}
    
                              ${order.carrier ? `<p><strong>Carrier:</strong> ${escapeHtml(order.carrier)}</p>` : ''}
    
                              ${order.notes ? `<p><strong>Notes:</strong> ${escapeHtml(order.notes)}</p>` : ''}
    
                              <p><strong>Date:</strong> ${new Date(order.createdAt).toLocaleString()}</p>
    
                          </div>
    
                      </div>
    
                  </div>
    
              `;
    
              document.body.insertAdjacentHTML('beforeend', modal);
    
          } catch (error) {
    
              showNotification(`Error: ${error.message}`, 'error');
    
          }
    
      }
    
      async function updateOrderStatus(orderId) {
    
          // Fetch current order to get existing values
    
          let currentOrder = null;
    
          try {
    
              const response = await fetch(`${API_BASE}/orders/${orderId}`);
    
              const data = await response.json();
    
              if (data.success) {
    
                  currentOrder = data.order;
    
              }
    
          } catch (error) {
    
              console.error('Error fetching order:', error);
    
          }
    
          // Create modal with dropdown and tracking fields
    
          const overlay = document.createElement('div');
    
          overlay.className = 'confirm-dialog-overlay';
    
          overlay.innerHTML = `
    
              <div class="confirm-dialog" style="max-width: 600px;">
    
                  <div class="confirm-dialog-title">Update Order</div>
    
                  <form id="updateOrderForm" onsubmit="handleOrderUpdate(event, '${orderId}')">
    
                      <div class="form-group" style="margin-bottom: 1.5rem;">
    
                          <label>Status *</label>
    
                          <select id="orderStatus" name="status" required style="width: 100%; padding: 0.875rem; border: 2px solid var(--border-color); border-radius: 10px; font-size: 1rem;">
    
                              <option value="pending" ${currentOrder?.status === 'pending' ? 'selected' : ''}>Pending</option>
    
                              <option value="processing" ${currentOrder?.status === 'processing' ? 'selected' : ''}>Processing</option>
    
                              <option value="completed" ${currentOrder?.status === 'completed' ? 'selected' : ''}>Completed</option>
    
                              <option value="cancelled" ${currentOrder?.status === 'cancelled' ? 'selected' : ''}>Cancelled</option>
    
                          </select>
    
                      </div>
    
                      <div class="form-group" style="margin-bottom: 1.5rem;">
    
                          <label>Tracking ID</label>
    
                          <input type="text" id="trackingId" name="trackingId" placeholder="e.g., 1Z999AA10123456784" value="${currentOrder?.trackingId || ''}" style="width: 100%; padding: 0.875rem; border: 2px solid var(--border-color); border-radius: 10px; font-size: 1rem;">
    
                          <small style="color: #666; font-size: 0.85rem;">Enter shipping tracking number</small>
    
                      </div>
    
                      <div class="form-group" style="margin-bottom: 1.5rem;">
    
                          <label>Carrier</label>
    
                          <input type="text" id="carrier" name="carrier" placeholder="e.g., UPS, FedEx, DHL" value="${currentOrder?.carrier || ''}" style="width: 100%; padding: 0.875rem; border: 2px solid var(--border-color); border-radius: 10px; font-size: 1rem;">
    
                          <small style="color: #666; font-size: 0.85rem;">Shipping carrier name</small>
    
                      </div>
    
                      <div class="form-group" style="margin-bottom: 1.5rem;">
    
                          <label>Notes</label>
    
                          <textarea id="notes" name="notes" placeholder="Internal notes about this order" rows="3" style="width: 100%; padding: 0.875rem; border: 2px solid var(--border-color); border-radius: 10px; font-size: 1rem; font-family: inherit; resize: vertical;">${currentOrder?.notes || ''}</textarea>
    
                          <small style="color: #666; font-size: 0.85rem;">Internal notes (not visible to customer)</small>
    
                      </div>
    
                      <div class="confirm-dialog-actions">
    
                          <button type="button" class="btn-cancel" onclick="this.closest('.confirm-dialog-overlay').remove()">Cancel</button>
    
                          <button type="submit" class="btn-confirm">Update Order</button>
    
                      </div>
    
                  </form>
    
              </div>
    
          `;
    
          document.body.appendChild(overlay);
    
          // Close on overlay click
    
          overlay.addEventListener('click', (e) => {
    
              if (e.target === overlay) {
    
                  overlay.remove();
    
              }
    
          });
    
      }
    
      async function handleOrderUpdate(event, orderId) {
    
          event.preventDefault();
    
          const form = event.target;
    
          const formData = new FormData(form);
    
          const updateData = {
    
              status: formData.get('status'),
    
              trackingId: formData.get('trackingId') || null,
    
              carrier: formData.get('carrier') || null,
    
              notes: formData.get('notes') || null
    
          };
    
          // Remove null/empty values
    
          Object.keys(updateData).forEach(key => {
    
              if (updateData[key] === null || updateData[key] === '') {
    
                  delete updateData[key];
    
              }
    
          });
    
          try {
    
              const response = await fetchWithCsrf(`${API_BASE}/orders/${orderId}/status`, {
    
                  method: 'PATCH',
    
                  headers: {
    
                      'Content-Type': 'application/json'
    
                  },
    
                  body: JSON.stringify(updateData)
    
              });
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Failed to update order');
    
              }
    
              // Close modal
    
              event.target.closest('.confirm-dialog-overlay').remove();
    
              showNotification('Order updated successfully!', 'success');
    
              loadOrders();
    
          } catch (error) {
    
              showNotification(`Error: ${error.message}`, 'error');
    
          }
    
      }
    
      function escapeHtml(text) {
    
          const div = document.createElement('div');
    
          div.textContent = text;
    
          return div.innerHTML;
    
      }
    
      // ========================================
    
      // REGION MANAGEMENT
    
      // ========================================
    
      let currentRegionFilter = 'all';
    
      async function loadRegions() {
    
          const container = document.getElementById('regionsList');
    
          try {
    
              const response = await fetch(`${API_BASE}/admin/regions`);
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Failed to load regions');
    
              }
    
              // Load stats
    
              const statsResponse = await fetch(`${API_BASE}/admin/regions/stats`);
    
              const statsData = await statsResponse.json();
    
              if (statsData.success) {
    
                  document.getElementById('regionStats').innerHTML = `
    
                      <strong>Total:</strong> ${statsData.total} | 
    
                      <strong>Enabled:</strong> <span style="color: #28a745;">${statsData.enabled}</span> | 
    
                      <strong>Disabled:</strong> <span style="color: #dc3545;">${statsData.disabled}</span>
    
                  `;
    
              }
    
              const regions = data.regions.filter(region => {
    
                  if (currentRegionFilter === 'enabled') return region.enabled;
    
                  if (currentRegionFilter === 'disabled') return !region.enabled;
    
                  return true;
    
              });
    
              if (regions.length === 0) {
    
                  container.innerHTML = '<div style="padding: 2rem; text-align: center; color: #666;">No regions found.</div>';
    
                  return;
    
              }
    
              container.innerHTML = `
    
                  <table>
    
                      <thead>
    
                          <tr>
    
                              <th>Country Code</th>
    
                              <th>Country Name</th>
    
                              <th>Language</th>
    
                              <th>Currency</th>
    
                              <th>Status</th>
    
                              <th>Actions</th>
    
                          </tr>
    
                      </thead>
    
                      <tbody>
    
                          ${regions.map(region => `
    
                              <tr>
    
                                  <td><strong>${escapeHtml(region.countryCode)}</strong></td>
    
                                  <td>${escapeHtml(region.countryName)}</td>
    
                                  <td>${escapeHtml(region.languageCode)}</td>
    
                                  <td>${escapeHtml(region.currencyCode)}</td>
    
                                  <td>
    
                                      <span class="status-badge ${region.enabled ? 'status-completed' : 'status-cancelled'}">
    
                                          ${region.enabled ? 'Enabled' : 'Disabled'}
    
                                      </span>
    
                                  </td>
    
                                  <td>
    
                                      ${region.enabled 
    
                                          ? `<button class="btn btn-small btn-danger" onclick="toggleRegion('${region.countryCode}', false)">Disable</button>`
    
                                          : `<button class="btn btn-small btn-success" onclick="toggleRegion('${region.countryCode}', true)">Enable</button>`
    
                                      }
    
                                  </td>
    
                              </tr>
    
                          `).join('')}
    
                      </tbody>
    
                  </table>
    
              `;
    
          } catch (error) {
    
              container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
    
          }
    
      }
    
      async function toggleRegion(countryCode, enable) {
    
          const action = enable ? 'enable' : 'disable';
    
          try {
    
              const response = await fetchWithCsrf(`${API_BASE}/admin/regions/${countryCode}/${action}`, {
    
                  method: 'POST'
    
              });
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || `Failed to ${action} region`);
    
              }
    
              showNotification(`Region ${countryCode} ${enable ? 'enabled' : 'disabled'} successfully!`, 'success');
    
              loadRegions();
    
          } catch (error) {
    
              showNotification(`Error: ${error.message}`, 'error');
    
          }
    
      }
    
      function filterRegions(filter) {
    
          currentRegionFilter = filter;
    
          loadRegions();
    
      }
    
      // ========================================
    
      // TRANSLATION MANAGEMENT
    
      // ========================================
    
      async function loadTranslations() {
    
          const container = document.getElementById('translationsList');
    
          container.innerHTML = `
    
              <div style="padding: 2rem; text-align: center;">
    
                  <p style="color: #666; margin-bottom: 1rem;">Select a product to view/manage translations</p>
    
                  <select id="translationProductSelect" onchange="loadProductTranslations(this.value)" style="padding: 0.5rem 1rem; border: 2px solid var(--border-color); border-radius: 8px; font-size: 1rem;">
    
                      <option value="">Select a product...</option>
    
                  </select>
    
              </div>
    
          `;
    
          // Load products for dropdown
    
          try {
    
              const response = await fetch(`${API_BASE}/products`);
    
              const data = await response.json();
    
              if (data.success && data.products.length > 0) {
    
                  const select = document.getElementById('translationProductSelect');
    
                  data.products.forEach(product => {
    
                      const option = document.createElement('option');
    
                      option.value = product.id;
    
                      option.textContent = `${product.name} (ID: ${product.id})`;
    
                      select.appendChild(option);
    
                  });
    
              }
    
          } catch (error) {
    
              console.error('Failed to load products:', error);
    
          }
    
      }
    
      async function loadProductTranslations(productId) {
    
          if (!productId) return;
    
          const container = document.getElementById('translationsList');
    
          try {
    
              const response = await fetch(`${API_BASE}/admin/translations/product/${productId}`);
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Failed to load translations');
    
              }
    
              if (data.translations.length === 0) {
    
                  container.innerHTML = '<div style="padding: 2rem; text-align: center; color: #666;">No translations found for this product. Add your first translation!</div>';
    
                  return;
    
              }
    
              container.innerHTML = `
    
                  <table>
    
                      <thead>
    
                          <tr>
    
                              <th>Field</th>
    
                              <th>Language</th>
    
                              <th>Translation</th>
    
                              <th>Actions</th>
    
                          </tr>
    
                      </thead>
    
                      <tbody>
    
                          ${data.translations.map(trans => `
    
                              <tr>
    
                                  <td><strong>${escapeHtml(trans.fieldName)}</strong></td>
    
                                  <td>
    
                                      <span class="status-badge status-processing">${escapeHtml(trans.languageCode).toUpperCase()}</span>
    
                                  </td>
    
                                  <td style="max-width: 400px;">${escapeHtml(trans.translatedText)}</td>
    
                                  <td>
    
                                      <button class="btn btn-small btn-danger" onclick="deleteTranslation('${trans.id}')">Delete</button>
    
                                  </td>
    
                              </tr>
    
                          `).join('')}
    
                      </tbody>
    
                  </table>
    
              `;
    
          } catch (error) {
    
              container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
    
          }
    
      }
    
      function openTranslationForm() {
    
          document.getElementById('translationForm').style.display = 'block';
    
          document.getElementById('translationFormElement').reset();
    
      }
    
      function closeTranslationForm() {
    
          document.getElementById('translationForm').style.display = 'none';
    
      }
    
      async function handleTranslationSubmit(event) {
    
          event.preventDefault();
    
          const form = event.target;
    
          const formData = new FormData(form);
    
          const translationData = {
    
              entityType: formData.get('entityType'),
    
              entityId: formData.get('entityId'),
    
              fieldName: formData.get('fieldName'),
    
              languageCode: formData.get('languageCode'),
    
              translatedText: formData.get('translatedText')
    
          };
    
          try {
    
              const response = await fetchWithCsrf(`${API_BASE}/admin/translations`, {
    
                  method: 'POST',
    
                  headers: {
    
                      'Content-Type': 'application/json'
    
                  },
    
                  body: JSON.stringify(translationData)
    
              });
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Failed to save translation');
    
              }
    
              closeTranslationForm();
    
              showNotification('Translation saved successfully!', 'success');
    
              // Reload if a product was selected
    
              const selectedProduct = document.getElementById('translationProductSelect')?.value;
    
              if (selectedProduct && selectedProduct === translationData.entityId) {
    
                  loadProductTranslations(selectedProduct);
    
              }
    
          } catch (error) {
    
              showNotification(`Error: ${error.message}`, 'error');
    
          }
    
      }
    
      async function deleteTranslation(translationId) {
    
          if (!confirm('Are you sure you want to delete this translation?')) {
    
              return;
    
          }
    
          try {
    
              const response = await fetchWithCsrf(`${API_BASE}/admin/translations/${translationId}`, {
    
                  method: 'DELETE'
    
              });
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Failed to delete translation');
    
              }
    
              showNotification('Translation deleted successfully!', 'success');
    
              // Reload current product translations
    
              const selectedProduct = document.getElementById('translationProductSelect')?.value;
    
              if (selectedProduct) {
    
                  loadProductTranslations(selectedProduct);
    
              }
    
          } catch (error) {
    
              showNotification(`Error: ${error.message}`, 'error');
    
          }
    
      }
    
      // ========================================
    
      // CURRENCY MANAGEMENT
    
      // ========================================
    
      async function loadCurrencyRates() {
    
          const container = document.getElementById('currencyRatesList');
    
          try {
    
              const response = await fetch(`${API_BASE}/currency/rates`);
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Failed to load exchange rates');
    
              }
    
              // Update info panel
    
              if (data.rates && data.rates.length > 0) {
    
                  const latestRate = data.rates[0];
    
                  const fetchedDate = new Date(latestRate.fetchedAt);
    
                  const expiresDate = new Date(latestRate.expiresAt);
    
                  const now = new Date();
    
                  const isExpired = now > expiresDate;
    
                  document.getElementById('lastUpdated').innerHTML = `
    
                      ${fetchedDate.toLocaleString()}
    
                      ${isExpired ? '<br><span style="color: #e74c3c; font-weight: bold;">⚠️ EXPIRED</span>' : ''}
    
                  `;
    
                  document.getElementById('totalRates').textContent = data.rates.length;
    
              }
    
              if (data.rates.length === 0) {
    
                  container.innerHTML = '<div style="padding: 2rem; text-align: center; color: #666;">No exchange rates found. Click "Refresh Rates Now" to fetch rates.</div>';
    
                  return;
    
              }
    
              container.innerHTML = `
    
                  <table>
    
                      <thead>
    
                          <tr>
    
                              <th>From</th>
    
                              <th>To</th>
    
                              <th>Rate</th>
    
                              <th>Example</th>
    
                              <th>Updated</th>
    
                              <th>Expires</th>
    
                          </tr>
    
                      </thead>
    
                      <tbody>
    
                          ${data.rates.map(rate => {
    
                              const expiresDate = new Date(rate.expiresAt);
    
                              const now = new Date();
    
                              const isExpired = now > expiresDate;
    
                              return `
    
                              <tr style="${isExpired ? 'opacity: 0.6;' : ''}">
    
                                  <td><strong>${escapeHtml(rate.fromCurrency)}</strong></td>
    
                                  <td><strong>${escapeHtml(rate.toCurrency)}</strong></td>
    
                                  <td style="font-family: monospace; font-size: 1.1rem;">${rate.rate.toFixed(4)}</td>
    
                                  <td style="color: #666; font-size: 0.9rem;">
    
                                      1 ${rate.fromCurrency} = ${rate.rate.toFixed(2)} ${rate.toCurrency}
    
                                  </td>
    
                                  <td>${new Date(rate.fetchedAt).toLocaleString()}</td>
    
                                  <td>
    
                                      <span class="status-badge ${isExpired ? 'status-cancelled' : 'status-completed'}">
    
                                          ${isExpired ? 'Expired' : new Date(rate.expiresAt).toLocaleTimeString()}
    
                                      </span>
    
                                  </td>
    
                              </tr>
    
                          `}).join('')}
    
                      </tbody>
    
                  </table>
    
              `;
    
          } catch (error) {
    
              container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
    
          }
    
      }
    
      async function refreshExchangeRates() {
    
          const btn = event.target;
    
          btn.disabled = true;
    
          btn.textContent = 'Refreshing...';
    
          try {
    
              const response = await fetchWithCsrf(`${API_BASE}/currency/admin/refresh`, {
    
                  method: 'POST'
    
              });
    
              const data = await response.json();
    
              if (!data.success) {
    
                  throw new Error(data.error || 'Failed to refresh rates');
    
              }
    
              showNotification('Exchange rates refreshed successfully!', 'success');
    
              // Wait a moment for the rates to be saved
    
              setTimeout(() => {
    
                  loadCurrencyRates();
    
              }, 1000);
    
          } catch (error) {
    
              showNotification(`Error: ${error.message}`, 'error');
    
          } finally {
    
              btn.disabled = false;
    
              btn.textContent = 'Refresh Rates Now';
    
          }
    
      }
    
      // Initialize
    
      document.addEventListener('DOMContentLoaded', () => {
    
          loadProducts();
    
          // Make functions global
    
          window.switchTab = switchTab;
    
          window.openProductForm = openProductForm;
    
          window.closeProductForm = closeProductForm;
    
          window.handleProductSubmit = handleProductSubmit;
    
          window.deleteProduct = deleteProduct;
    
          window.editProduct = editProduct;
    
          window.viewOrder = viewOrder;
    
          window.updateOrderStatus = updateOrderStatus;
    
          window.handleOrderUpdate = handleOrderUpdate;
    
          // Region management
    
          window.loadRegions = loadRegions;
    
          window.toggleRegion = toggleRegion;
    
          window.filterRegions = filterRegions;
    
          // Translation management
    
          window.loadTranslations = loadTranslations;
    
          window.loadProductTranslations = loadProductTranslations;
    
          window.openTranslationForm = openTranslationForm;
    
          window.closeTranslationForm = closeTranslationForm;
    
          window.handleTranslationSubmit = handleTranslationSubmit;
    
          window.deleteTranslation = deleteTranslation;
    
          // Currency management
    
          window.loadCurrencyRates = loadCurrencyRates;
    
          window.refreshExchangeRates = refreshExchangeRates;
    
      });
backend

Files

File: src/main/resources/static/js/admin.js
