Update app.js

app.js

@@ -1402,7 +1402,6 @@ async function loadAffiliateLinks() {
 function renderAffiliateLinks(data) {
   const body = document.getElementById("affiliate-links-body");
   if (!body) return;
-  // data is either { areas: [...] } or [{ areas: [...] }] or { data: [...] }
   let areas = [];
   if (data && Array.isArray(data.areas)) {
     areas = data.areas;
@@ -1413,32 +1412,73 @@ function renderAffiliateLinks(data) {
     const first = data[0];
     if (first && Array.isArray(first.areas)) areas = first.areas;
   }
-  const filtered = areas.filter((a) => a.text && a.link);
-  if (!filtered.length) {
-    body.innerHTML =
-      '<p class="text-muted" style="font-size:13px;padding:4px 0;">No affiliate links available yet.</p>';
-    return;
-  }
+
   body.innerHTML = `
-    <div class="invoice-list">
-      <div class="invoice-row invoice-row--head" style="grid-template-columns:1fr 2fr 2fr;">
-        <span>Area</span>
-        <span>Text</span>
-        <span>Link</span>
-      </div>
-      ${filtered
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
+      <span class="text-muted" style="font-size:11px;text-transform:uppercase;letter-spacing:0.06em;">${areas.length} areas</span>
+      <button type="button" id="save-affiliate-btn" class="btn btn-primary btn-sm" onclick="saveAffiliateLinks()" style="display:none;">
+        Save Changes
+      </button>
+    </div>
+    <div class="affiliate-areas-list">
+      ${areas
         .map(
           (a) => `
-        <div class="invoice-row" style="grid-template-columns:1fr 2fr 2fr;">
-          <span class="invoice-uuid">${escHtml(a.area || "—")}</span>
-          <span class="invoice-product">${escHtml(a.text || "")}</span>
-          <span class="invoice-dl">${a.link ? `<a href="${escAttr(a.link)}" target="_blank" rel="noopener" class="invoice-dl-link">Open &rarr;</a>` : `<span class="invoice-dl-link invoice-dl-link--disabled">—</span>`}</span>
+        <div class="affiliate-area-card">
+          <div class="affiliate-area-name">${escHtml(a.area)}</div>
+          <div class="form-row" style="margin:0;">
+            <div class="form-group" style="margin:0;">
+              <label>Text</label>
+              <input type="text" class="affiliate-input" data-area="${escAttr(a.area)}" data-field="text" value="${escAttr(a.text || "")}" oninput="affiliateAreaChanged()" placeholder="Affiliate text…" />
+            </div>
+          </div>
+          <div class="form-row" style="margin:0;">
+            <div class="form-group" style="margin:0;">
+              <label>Link</label>
+              <input type="text" class="affiliate-input" data-area="${escAttr(a.area)}" data-field="link" value="${escAttr(a.link || "")}" oninput="affiliateAreaChanged()" placeholder="https://…" />
+            </div>
+          </div>
         </div>`,
         )
         .join("")}
     </div>`;
 }
 
+function affiliateAreaChanged() {
+  const btn = document.getElementById("save-affiliate-btn");
+  if (btn) btn.style.display = "inline-flex";
+}
+
+async function saveAffiliateLinks() {
+  const btn = document.getElementById("save-affiliate-btn");
+  if (!btn) return;
+  btnLoad(btn, "Saving…");
+  try {
+    const inputs = document.querySelectorAll(".affiliate-input");
+    const map = {};
+    for (const inp of inputs) {
+      const area = inp.dataset.area;
+      const field = inp.dataset.field;
+      if (!map[area]) map[area] = { area, text: "", link: "" };
+      map[area][field] = inp.value;
+    }
+    const areas = Object.values(map);
+    const res = await fetch(AFFILIATE_LINKS_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ areas }),
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    toast("Affiliate links saved.", "success");
+    btn.style.display = "none";
+    loadAffiliateLinks();
+  } catch (err) {
+    toast(err.message, "error");
+  } finally {
+    btnReset(btn);
+  }
+}
+
 /* ═══════════════════════════════════════════════════════════════
    RESTART
 ═══════════════════════════════════════════════════════════════ */