k

app.js

@@ -24,6 +24,7 @@ const CREDITS_URL = `${API_BASE}/payment/credits`; // hidden form POST → 302 S
 const INVOICES_URL = `${API_BASE}/invoices`; // GET ?email=
 const INVOICE_EMAIL_URL = `${API_BASE}/user`; // POST {email, invoice_email}
 const PORTAL_URL = `${API_BASE}/account/portal`; // GET ?email= → { url }
+const AFFILIATE_LINKS_URL = `${API_BASE}/affiliate/link`; // GET → [{areas:[{area,text,link}]}]
 const CONTRACT_EXTEND_URL = "https://derez.ai"; // ← replace with Stripe payment link
 const CONTRACT_CANCEL_URL = "https://derez.ai"; // ← replace with Stripe cancellation link
 
@@ -1116,6 +1117,17 @@ function closeUserPanel() {
   if (codeEl) codeEl.textContent = "—";
   const copyBtn = document.getElementById("acct-affiliate-copy-btn");
   if (copyBtn) copyBtn.style.display = "none";
+  // reset tab to settings
+  const settingsTab = document.getElementById("acct-tab-settings");
+  const affiliateTab = document.getElementById("acct-tab-affiliate");
+  const settingsPane = document.getElementById("acct-pane-settings");
+  const affiliatePane = document.getElementById("acct-pane-affiliate");
+  if (settingsTab && affiliateTab && settingsPane && affiliatePane) {
+    affiliateTab.classList.remove("active");
+    settingsTab.classList.add("active");
+    affiliatePane.style.display = "none";
+    settingsPane.style.display = "flex";
+  }
 }
 
 function toggleAccountPwSave(value) {
@@ -1348,6 +1360,77 @@ function exportInvoicesCSV() {
   URL.revokeObjectURL(url);
 }
 
+/* ─── Account Panel Tab Switching ─────────────────────────────── */
+function switchAccountTab(tab) {
+  const settingsTab = document.getElementById("acct-tab-settings");
+  const affiliateTab = document.getElementById("acct-tab-affiliate");
+  const settingsPane = document.getElementById("acct-pane-settings");
+  const affiliatePane = document.getElementById("acct-pane-affiliate");
+  if (!settingsTab || !affiliateTab || !settingsPane || !affiliatePane) return;
+
+  if (tab === "affiliate") {
+    settingsTab.classList.remove("active");
+    affiliateTab.classList.add("active");
+    settingsPane.style.display = "none";
+    affiliatePane.style.display = "flex";
+    loadAffiliateLinks();
+  } else {
+    affiliateTab.classList.remove("active");
+    settingsTab.classList.add("active");
+    affiliatePane.style.display = "none";
+    settingsPane.style.display = "flex";
+  }
+}
+
+async function loadAffiliateLinks() {
+  const body = document.getElementById("affiliate-links-body");
+  if (!body) return;
+  body.innerHTML = '<div class="loading-row"><div class="spinner"></div></div>';
+  try {
+    const res = await fetch(AFFILIATE_LINKS_URL);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+    dbg("\u2190 Affiliate links", data);
+    renderAffiliateLinks(data);
+  } catch (err) {
+    dbg("\u2190 Affiliate links error", err.message);
+    body.innerHTML =
+      '<p class="text-muted" style="font-size:13px;padding:4px 0;">Could not load affiliate links.</p>';
+  }
+}
+
+function renderAffiliateLinks(data) {
+  const body = document.getElementById("affiliate-links-body");
+  if (!body) return;
+  const rows = Array.isArray(data) ? data : data && data.data ? data.data : [];
+  const areas =
+    rows.length && Array.isArray(rows[0].areas) ? rows[0].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
+        .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>`,
+        )
+        .join("")}
+    </div>`;
+}
+
 /* ═══════════════════════════════════════════════════════════════
    RESTART
 ═══════════════════════════════════════════════════════════════ */

index.html

@@ -812,7 +812,27 @@
         >
             <div class="modal account-modal">
                 <div class="modal-header">
-                    <span class="modal-title">Account Settings</span>
+                    <div
+                        class="auth-switch"
+                        style="position: static; margin: 0"
+                    >
+                        <button
+                            type="button"
+                            id="acct-tab-settings"
+                            class="auth-switch-btn active"
+                            onclick="switchAccountTab('settings')"
+                        >
+                            Account Settings
+                        </button>
+                        <button
+                            type="button"
+                            id="acct-tab-affiliate"
+                            class="auth-switch-btn"
+                            onclick="switchAccountTab('affiliate')"
+                        >
+                            Affiliate Settings
+                        </button>
+                    </div>
                     <button
                         type="button"
                         class="modal-close-btn"
@@ -822,11 +842,19 @@
                     </button>
                 </div>
                 <div class="account-modal-body">
-                    <!-- ── Left: settings ───────────────────────── -->
+                    <!-- ── Pane: Settings ──────────────────────── -->
+                    <div
+                        id="acct-pane-settings"
+                        class="account-pane"
+                        style="display: flex"
+                    >
                         <div class="account-col account-col--settings">
                             <div class="acct-section">
                                 <div class="acct-field-label">Email</div>
-                            <div class="acct-field-val" id="acct-email-display">
+                                <div
+                                    class="acct-field-val"
+                                    id="acct-email-display"
+                                >
                                     —
                                 </div>
                             </div>
@@ -866,11 +894,16 @@
                                                 stroke-linecap="round"
                                                 stroke-linejoin="round"
                                             >
-                                            <polyline points="20 6 9 17 4 12" />
+                                                <polyline
+                                                    points="20 6 9 17 4 12"
+                                                />
                                             </svg>
                                         </button>
                                     </div>
-                                <p class="ssh-hint" style="margin-bottom: 0">
+                                    <p
+                                        class="ssh-hint"
+                                        style="margin-bottom: 0"
+                                    >
                                         Min. 8 characters.
                                     </p>
                                 </div>
@@ -886,7 +919,9 @@
                                             placeholder="invoices@example.com"
                                             autocomplete="email"
                                             oninput="
-                                            toggleInvoiceEmailSave(this.value)
+                                                toggleInvoiceEmailSave(
+                                                    this.value,
+                                                )
                                             "
                                             onkeydown="
                                                 if (event.key === 'Enter')
@@ -911,7 +946,9 @@
                                                 stroke-linecap="round"
                                                 stroke-linejoin="round"
                                             >
-                                            <polyline points="20 6 9 17 4 12" />
+                                                <polyline
+                                                    points="20 6 9 17 4 12"
+                                                />
                                             </svg>
                                         </button>
                                     </div>
@@ -938,7 +975,9 @@
                             </div>
                             <div class="acct-divider"></div>
                             <div class="acct-section">
-                            <div class="acct-field-label">Affiliate Code</div>
+                                <div class="acct-field-label">
+                                    Affiliate Code
+                                </div>
                                 <div class="acct-affiliate-row">
                                     <span
                                         class="acct-affiliate-code"
@@ -983,6 +1022,33 @@
                             <div id="invoices-body"></div>
                         </div>
                     </div>
+                    <!-- ── Pane: Affiliate ─────────────────────── -->
+                    <div
+                        id="acct-pane-affiliate"
+                        class="account-pane"
+                        style="display: none"
+                    >
+                        <div
+                            class="account-col account-col--invoices"
+                            style="flex: 1"
+                        >
+                            <div class="acct-invoices-toolbar">
+                                <div class="acct-invoices-title">
+                                    Affiliate Links
+                                </div>
+                            </div>
+                            <div id="affiliate-links-body">
+                                <p
+                                    class="text-muted"
+                                    style="font-size: 13px; padding: 4px 0"
+                                >
+                                    Switch to this tab to see available
+                                    affiliate links.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
 

styles.css

@@ -1475,6 +1475,11 @@ body::after {
     min-height: 320px;
 }
 
+.account-pane {
+    display: flex;
+    width: 100%;
+}
+
 .account-col {
     display: flex;
     flex-direction: column;