From d1267a1b714b09a49d610f839ccdbae3de0523d2 Mon Sep 17 00:00:00 2001
From: Brian O'Kelley <bokelley@scope3.com>
Date: Sat, 10 Jan 2026 08:12:26 -0500
Subject: [PATCH] feat: add full org page capabilities to account detail page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Port all missing features from admin-org-detail.html to admin-account-detail.html:

- Payment Link modal with product selection and discount support
- Invoice modal with product selection and billing address form
- Revenue Tier selector in Edit Account modal
- Parent Organization selector in Edit Account modal
- Addie Research section (loaded asynchronously)
- Member Insights section (loaded asynchronously)
- Domain actions: verify, set primary, remove

Security improvements:
- Use event delegation with data attributes instead of inline onclick
  handlers to prevent XSS vulnerabilities
- Add 401 authentication handling to domain action functions
- Escape user-provided values in confirmation dialogs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .changeset/forty-symbols-kick.md        |   2 +
 server/public/admin-account-detail.html | 879 +++++++++++++++++++++++-
 2 files changed, 850 insertions(+), 31 deletions(-)
 create mode 100644 .changeset/forty-symbols-kick.md

diff --git a/.changeset/forty-symbols-kick.md b/.changeset/forty-symbols-kick.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/forty-symbols-kick.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/server/public/admin-account-detail.html b/server/public/admin-account-detail.html
index d11e36998a..212a8a1d86 100644
--- a/server/public/admin-account-detail.html
+++ b/server/public/admin-account-detail.html
@@ -788,6 +788,26 @@ <h2 class="collapsible" onclick="toggleSection(this)" style="margin-bottom: 0;">
             </div>
           </div>
 
+          <!-- Addie Research -->
+          <div class="card" id="addieResearchCard" style="display: none;">
+            <h2 class="collapsible" onclick="toggleSection(this)">Addie Research</h2>
+            <div class="collapsible-content" id="addieResearchContent">
+              <div id="addieResearchList" class="empty-state">
+                No research available
+              </div>
+            </div>
+          </div>
+
+          <!-- Member Insights -->
+          <div class="card" id="memberInsightsCard" style="display: none;">
+            <h2 class="collapsible" onclick="toggleSection(this)">Member Insights</h2>
+            <div class="collapsible-content" id="memberInsightsContent">
+              <div id="memberInsightsList" class="empty-state">
+                No insights yet
+              </div>
+            </div>
+          </div>
+
           <!-- Members -->
           <div class="card">
             <div style="display: flex; justify-content: space-between; align-items: center;">
@@ -948,9 +968,17 @@ <h2>Edit Account</h2>
       <form id="editForm" onsubmit="saveAccountChanges(event)">
         <div class="form-group">
           <label>Organization Name</label>
-          <input type="text" id="editName" disabled>
-          <div class="form-hint">Name cannot be changed here</div>
+          <input type="text" id="editName">
+        </div>
+
+        <div class="form-group">
+          <label>Parent Organization</label>
+          <select id="editParentOrg">
+            <option value="">None (independent)</option>
+          </select>
+          <div class="form-hint">If this is a subsidiary or division, select the parent company.</div>
         </div>
+
         <div class="form-row">
           <div class="form-group">
             <label>Company Type</label>
@@ -977,6 +1005,20 @@ <h2>Edit Account</h2>
             </select>
           </div>
         </div>
+
+        <div class="form-group">
+          <label>Revenue Tier</label>
+          <select id="editRevenueTier">
+            <option value="">Unknown</option>
+            <option value="under_1m">Under $1M (Startup)</option>
+            <option value="1m_5m">$1M - $5M</option>
+            <option value="5m_50m">$5M - $50M</option>
+            <option value="50m_250m">$50M - $250M</option>
+            <option value="250m_1b">$250M - $1B</option>
+            <option value="1b_plus">Over $1B (Enterprise)</option>
+          </select>
+          <div class="form-hint">Used to determine membership pricing tier.</div>
+        </div>
         <h3 style="margin-top: var(--space-5); margin-bottom: var(--space-4); font-size: var(--text-base);">Contact</h3>
         <div class="form-row">
           <div class="form-group">
@@ -1089,29 +1131,151 @@ <h2 id="convertAccountTitle">Convert Account Type</h2>
     </div>
   </div>
 
-  <!-- Payment Link Modal (placeholder) -->
+  <!-- Payment Link Modal -->
   <div id="paymentLinkModal" class="modal">
-    <div class="modal-content">
+    <div class="modal-content" style="max-width: 500px;">
       <div class="modal-header">
         <h2>Generate Payment Link</h2>
         <button class="modal-close" onclick="closeModal('paymentLinkModal')">&times;</button>
       </div>
-      <div id="paymentLinkContent">
-        <!-- Will be populated by JS -->
+
+      <p id="paymentLinkOrgName" style="margin-bottom: var(--space-4); color: var(--color-text-secondary);"></p>
+
+      <!-- Discount notice -->
+      <div id="paymentLinkDiscountNotice" style="display: none; margin-bottom: var(--space-4); padding: var(--space-3); background: var(--color-success-50); border-radius: var(--radius-sm);">
+        <div style="font-size: var(--text-sm);">
+          <strong style="color: var(--color-success-700);">Discount will be applied:</strong>
+          <span id="paymentLinkDiscountText"></span>
+        </div>
+        <div style="margin-top: var(--space-2);">
+          <label style="font-size: var(--text-sm);">
+            <input type="checkbox" id="applyDiscountToPaymentLink" checked>
+            Include discount in payment link
+          </label>
+        </div>
+      </div>
+
+      <div id="paymentLinkProducts" style="margin-bottom: var(--space-4);">
+        Loading products...
+      </div>
+
+      <div id="paymentLinkResult" style="display: none;">
+        <div style="background: var(--color-success-50); border: 1px solid var(--color-success-200); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4);">
+          <strong style="color: var(--color-success-700);">Payment Link Generated!</strong>
+          <p style="margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary);">
+            Copy this link and send it to the prospect:
+          </p>
+        </div>
+        <div style="display: flex; gap: var(--space-2);">
+          <input type="text" id="paymentLinkUrl" readonly style="flex: 1; padding: var(--space-2); font-size: var(--text-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md);">
+          <button class="btn btn-primary btn-sm" onclick="copyPaymentLink()">Copy</button>
+        </div>
+      </div>
+
+      <div class="modal-actions">
+        <button type="button" class="btn btn-secondary" onclick="closeModal('paymentLinkModal')">Close</button>
       </div>
     </div>
   </div>
 
-  <!-- Invoice Modal (placeholder) -->
+  <!-- Invoice Modal -->
   <div id="invoiceModal" class="modal">
-    <div class="modal-content">
+    <div class="modal-content" style="max-width: 600px;">
       <div class="modal-header">
-        <h2>Send Invoice</h2>
+        <h2>Generate Invoice</h2>
         <button class="modal-close" onclick="closeModal('invoiceModal')">&times;</button>
       </div>
-      <div id="invoiceContent">
-        <!-- Will be populated by JS -->
-      </div>
+
+      <p id="invoiceOrgName" style="margin-bottom: var(--space-4); color: var(--color-text-secondary);"></p>
+
+      <form id="invoiceForm" onsubmit="submitInvoice(event)">
+        <!-- Product Selection -->
+        <div id="invoiceProductSection">
+          <div class="form-group">
+            <label>Select Product</label>
+            <div id="invoiceProducts" style="margin-bottom: var(--space-4);">
+              Loading products...
+            </div>
+          </div>
+        </div>
+
+        <!-- Billing Details (shown after product selection) -->
+        <div id="invoiceBillingSection" style="display: none;">
+          <div class="form-group">
+            <label>Selected Product</label>
+            <div id="selectedProductDisplay" style="padding: var(--space-2); background: var(--color-gray-50); border-radius: var(--radius-md); margin-bottom: var(--space-3);"></div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>Contact Name *</label>
+              <input type="text" id="invoiceContactName" required>
+            </div>
+            <div class="form-group">
+              <label>Contact Email *</label>
+              <input type="email" id="invoiceContactEmail" required>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>Company Name *</label>
+            <input type="text" id="invoiceCompanyName" required>
+          </div>
+
+          <h4 style="margin-top: var(--space-4); margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--color-text-heading);">Billing Address</h4>
+
+          <div class="form-group">
+            <label>Street Address *</label>
+            <input type="text" id="invoiceAddressLine1" required>
+          </div>
+
+          <div class="form-group">
+            <label>Address Line 2</label>
+            <input type="text" id="invoiceAddressLine2">
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>City *</label>
+              <input type="text" id="invoiceCity" required>
+            </div>
+            <div class="form-group">
+              <label>State/Province *</label>
+              <input type="text" id="invoiceState" required>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>Postal Code *</label>
+              <input type="text" id="invoicePostalCode" required>
+            </div>
+            <div class="form-group">
+              <label>Country *</label>
+              <input type="text" id="invoiceCountry" value="US" required>
+            </div>
+          </div>
+        </div>
+
+        <!-- Success Message -->
+        <div id="invoiceResult" style="display: none;">
+          <div style="background: var(--color-success-50); border: 1px solid var(--color-success-200); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4);">
+            <strong style="color: var(--color-success-700);">Invoice Sent!</strong>
+            <p style="margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary);">
+              The invoice has been emailed to the contact. You can also share this link:
+            </p>
+          </div>
+          <div style="display: flex; gap: var(--space-2);">
+            <input type="text" id="invoiceUrl" readonly style="flex: 1; padding: var(--space-2); font-size: var(--text-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md);">
+            <button type="button" class="btn btn-primary btn-sm" onclick="copyInvoiceLink()">Copy</button>
+          </div>
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="btn btn-secondary" onclick="closeModal('invoiceModal')">Close</button>
+          <button type="submit" class="btn btn-primary" id="sendInvoiceBtn" style="display: none;">Send Invoice</button>
+        </div>
+      </form>
     </div>
   </div>
 
@@ -1214,6 +1378,10 @@ <h2 id="userContextModalTitle">Member Context</h2>
         renderAccount();
         document.getElementById('loading').style.display = 'none';
         document.getElementById('content').style.display = 'block';
+
+        // Load additional data asynchronously
+        loadAddieResearch();
+        loadMemberInsights();
       } catch (error) {
         console.error('Error loading account:', error);
         document.getElementById('loading').textContent = 'Error loading account';
@@ -1376,17 +1544,7 @@ <h2 id="userContextModalTitle">Member Context</h2>
 
       // Domains
       if (a.domains && a.domains.length > 0) {
-        let domainsHtml = '';
-        for (const d of a.domains) {
-          domainsHtml += `<div class="domain-item">
-            <span>${escapeHtml(d.domain)}</span>
-            <div class="domain-badges">
-              ${d.is_primary ? '<span class="domain-badge primary">Primary</span>' : ''}
-              ${d.verified ? '<span class="domain-badge verified">Verified</span>' : ''}
-            </div>
-          </div>`;
-        }
-        document.getElementById('domainsList').innerHTML = domainsHtml;
+        renderDomains(a.domains);
       }
 
       // Domain Health
@@ -1950,7 +2108,7 @@ <h3 style="font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--spa
     }
 
     // Edit account
-    function openEditModal() {
+    async function openEditModal() {
       document.getElementById('editName').value = accountData.name;
       document.getElementById('editCompanyType').value = accountData.company_type || '';
       document.getElementById('editSource').value = accountData.source || '';
@@ -1959,10 +2117,45 @@ <h3 style="font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--spa
       document.getElementById('editContactTitle').value = accountData.contact_title || '';
       document.getElementById('editDisqualified').checked = accountData.is_disqualified;
       document.getElementById('editDisqualifyReason').value = accountData.disqualification_reason || '';
+      document.getElementById('editRevenueTier').value = accountData.revenue_tier || '';
       toggleDisqualifyReason();
+
+      // Load and populate parent org options
+      await loadParentOrgOptions();
+
       openModal('editModal');
     }
 
+    async function loadParentOrgOptions() {
+      const select = document.getElementById('editParentOrg');
+      // Keep the "None" option
+      select.innerHTML = '<option value="">None (independent)</option>';
+
+      try {
+        const response = await fetch('/api/admin/prospects?limit=500');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        const orgs = data.prospects || [];
+
+        // Filter out current org and sort by name
+        orgs
+          .filter(org => org.workos_organization_id !== accountId)
+          .sort((a, b) => (a.name || '').localeCompare(b.name || ''))
+          .forEach(org => {
+            const option = document.createElement('option');
+            option.value = org.workos_organization_id;
+            option.textContent = org.name;
+            if (org.workos_organization_id === accountData.parent_organization_id) {
+              option.selected = true;
+            }
+            select.appendChild(option);
+          });
+      } catch (error) {
+        console.error('Error loading parent org options:', error);
+      }
+    }
+
     function toggleDisqualifyReason() {
       document.getElementById('disqualifyReasonGroup').style.display =
         document.getElementById('editDisqualified').checked ? 'block' : 'none';
@@ -1972,6 +2165,7 @@ <h3 style="font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--spa
       event.preventDefault();
 
       const body = {
+        name: document.getElementById('editName').value || null,
         company_type: document.getElementById('editCompanyType').value || null,
         prospect_source: document.getElementById('editSource').value || null,
         prospect_contact_name: document.getElementById('editContactName').value || null,
@@ -1979,7 +2173,9 @@ <h3 style="font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--spa
         prospect_contact_title: document.getElementById('editContactTitle').value || null,
         prospect_status: document.getElementById('editDisqualified').checked ? 'disqualified' : null,
         disqualification_reason: document.getElementById('editDisqualified').checked ?
-          document.getElementById('editDisqualifyReason').value : null
+          document.getElementById('editDisqualifyReason').value : null,
+        revenue_tier: document.getElementById('editRevenueTier').value || null,
+        parent_organization_id: document.getElementById('editParentOrg').value || null
       };
 
       try {
@@ -2021,6 +2217,164 @@ <h3 style="font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--spa
       }
     }
 
+    function renderDomains(domains) {
+      const container = document.getElementById('domainsList');
+
+      if (!domains || domains.length === 0) {
+        container.innerHTML = '<div class="empty-state">No domains linked</div>';
+        return;
+      }
+
+      container.innerHTML = `<ul class="domains-list" style="list-style: none; padding: 0; margin: 0;">
+        ${domains.map(d => {
+          const escapedDomain = escapeHtml(d.domain);
+          const badges = [];
+          if (d.is_primary) badges.push('<span class="domain-badge primary">Primary</span>');
+          if (d.verified) badges.push('<span class="domain-badge verified">Verified</span>');
+          badges.push(`<span class="domain-badge ${escapeHtml(d.source || 'manual')}">${d.source === 'workos' ? 'WorkOS' : 'Manual'}</span>`);
+
+          return `
+            <li class="domain-item" data-domain="${escapedDomain}" style="display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-gray-100);">
+              <div class="domain-info">
+                <span class="domain-name" style="font-weight: var(--font-medium);">${escapedDomain}</span>
+                <span style="margin-left: var(--space-2);">${badges.join(' ')}</span>
+              </div>
+              <div class="domain-actions" style="display: flex; gap: var(--space-2);">
+                ${!d.verified ? `<button class="btn btn-sm btn-primary" data-action="verify">Verify</button>` : ''}
+                ${!d.is_primary ? `<button class="btn btn-sm btn-secondary" data-action="set-primary">Set Primary</button>` : ''}
+                <button class="btn btn-sm btn-secondary" data-action="remove" style="color: var(--color-error-600);" title="Remove domain">&times;</button>
+              </div>
+            </li>
+          `;
+        }).join('')}
+      </ul>`;
+
+      // Remove last border
+      const lastItem = container.querySelector('li:last-child');
+      if (lastItem) {
+        lastItem.style.borderBottom = 'none';
+      }
+
+      // Event delegation for domain actions
+      container.onclick = handleDomainAction;
+    }
+
+    function handleDomainAction(e) {
+      const btn = e.target.closest('[data-action]');
+      if (!btn) return;
+
+      const domainItem = btn.closest('[data-domain]');
+      if (!domainItem) return;
+
+      const domain = domainItem.dataset.domain;
+      const action = btn.dataset.action;
+
+      if (action === 'verify') {
+        verifyDomain(domain, btn);
+      } else if (action === 'set-primary') {
+        setDomainPrimary(domain, btn);
+      } else if (action === 'remove') {
+        removeDomain(domain, btn);
+      }
+    }
+
+    async function verifyDomain(domain, btn) {
+      const originalText = btn ? btn.textContent : '';
+      if (btn) {
+        btn.disabled = true;
+        btn.textContent = 'Verifying...';
+      }
+
+      try {
+        const response = await fetch(`/api/admin/organizations/${accountId}/domains`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ domain: domain.toLowerCase() })
+        });
+
+        if (!response.ok) {
+          if (response.status === 401) {
+            window.AdminNav?.redirectToLogin?.();
+            return;
+          }
+          const data = await response.json().catch(() => ({}));
+          throw new Error(data.error || 'Failed to verify domain');
+        }
+
+        location.reload();
+      } catch (error) {
+        console.error('Error verifying domain:', error);
+        alert('Error: ' + error.message);
+        if (btn) {
+          btn.disabled = false;
+          btn.textContent = originalText;
+        }
+      }
+    }
+
+    async function setDomainPrimary(domain, btn) {
+      const originalText = btn ? btn.textContent : '';
+      if (btn) {
+        btn.disabled = true;
+        btn.textContent = 'Setting...';
+      }
+
+      try {
+        const response = await fetch(`/api/admin/organizations/${accountId}/domains/${encodeURIComponent(domain)}/primary`, {
+          method: 'PUT'
+        });
+
+        if (!response.ok) {
+          if (response.status === 401) {
+            window.AdminNav?.redirectToLogin?.();
+            return;
+          }
+          const data = await response.json().catch(() => ({}));
+          throw new Error(data.error || 'Failed to set primary domain');
+        }
+
+        location.reload();
+      } catch (error) {
+        console.error('Error setting primary domain:', error);
+        alert('Error: ' + error.message);
+        if (btn) {
+          btn.disabled = false;
+          btn.textContent = originalText;
+        }
+      }
+    }
+
+    async function removeDomain(domain, btn) {
+      if (!confirm(`Remove domain "${escapeHtml(domain)}" from this organization?`)) return;
+
+      if (btn) {
+        btn.disabled = true;
+      }
+
+      try {
+        const response = await fetch(`/api/admin/organizations/${accountId}/domains/${encodeURIComponent(domain)}`, {
+          method: 'DELETE'
+        });
+
+        if (!response.ok) {
+          if (response.status === 401) {
+            window.AdminNav?.redirectToLogin?.();
+            return;
+          }
+          const data = await response.json().catch(() => ({}));
+          throw new Error(data.error || 'Failed to remove domain');
+        }
+
+        location.reload();
+      } catch (error) {
+        console.error('Error removing domain:', error);
+        alert('Error: ' + error.message);
+        if (btn) {
+          btn.disabled = false;
+        }
+      }
+    }
+
     // Enrichment refresh
     async function refreshEnrichment() {
       try {
@@ -2032,16 +2386,479 @@ <h3 style="font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--spa
       }
     }
 
-    // Payment link (placeholder)
+    // =========================================================================
+    // Addie Research
+    // =========================================================================
+
+    async function loadAddieResearch() {
+      const card = document.getElementById('addieResearchCard');
+      const container = document.getElementById('addieResearchList');
+
+      try {
+        const response = await fetch(`/api/admin/organizations/${accountId}/addie-research`);
+
+        if (!response.ok) {
+          if (response.status === 404) {
+            card.style.display = 'none';
+            return;
+          }
+          throw new Error('Failed to load Addie research');
+        }
+
+        const data = await response.json();
+
+        if (!data.interactions || data.interactions.length === 0) {
+          card.style.display = 'none';
+          return;
+        }
+
+        card.style.display = 'block';
+        container.innerHTML = data.interactions.map(interaction => {
+          const date = new Date(interaction.created_at);
+          return `
+            <div class="research-item" style="padding: var(--space-3) 0; border-bottom: var(--border-1) solid var(--color-gray-100);">
+              <div style="font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-1);">
+                ${date.toLocaleDateString()} ${date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
+                ${interaction.user_name ? ` • Conversation with ${escapeHtml(interaction.user_name)}` : ''}
+              </div>
+              <div style="font-size: var(--text-sm);">
+                ${escapeHtml(interaction.summary || interaction.output_text?.substring(0, 200) || 'No summary')}
+                ${interaction.output_text?.length > 200 ? '...' : ''}
+              </div>
+              ${interaction.tools_used?.length > 0 ? `
+                <div style="font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1);">
+                  Tools: ${interaction.tools_used.join(', ')}
+                </div>
+              ` : ''}
+            </div>
+          `;
+        }).join('');
+
+        // Remove last border
+        const lastItem = container.querySelector('.research-item:last-child');
+        if (lastItem) {
+          lastItem.style.borderBottom = 'none';
+        }
+
+      } catch (error) {
+        console.error('Error loading Addie research:', error);
+        card.style.display = 'none';
+      }
+    }
+
+    // =========================================================================
+    // Member Insights
+    // =========================================================================
+
+    async function loadMemberInsights() {
+      const card = document.getElementById('memberInsightsCard');
+      const container = document.getElementById('memberInsightsList');
+
+      try {
+        const response = await fetch(`/api/admin/organizations/${accountId}/member-insights`);
+
+        if (!response.ok) {
+          if (response.status === 404) {
+            card.style.display = 'none';
+            return;
+          }
+          throw new Error('Failed to load member insights');
+        }
+
+        const data = await response.json();
+
+        if (!data.insights || data.insights.length === 0) {
+          card.style.display = 'none';
+          return;
+        }
+
+        card.style.display = 'block';
+
+        // Group insights by member
+        const byMember = {};
+        data.insights.forEach(insight => {
+          const key = insight.member_name || insight.slack_user_id || 'Unknown';
+          if (!byMember[key]) {
+            byMember[key] = [];
+          }
+          byMember[key].push(insight);
+        });
+
+        container.innerHTML = Object.entries(byMember).map(([member, insights]) => `
+          <div style="margin-bottom: var(--space-4);">
+            <div style="font-weight: var(--font-semibold); margin-bottom: var(--space-2);">${escapeHtml(member)}</div>
+            ${insights.map(insight => `
+              <div style="display: flex; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm);">
+                <span style="background: var(--color-primary-100); color: var(--color-primary-700); padding: var(--space-0.5) var(--space-1.5); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-medium);">
+                  ${escapeHtml(insight.insight_type)}
+                </span>
+                <span>${escapeHtml(insight.value)}</span>
+                ${insight.confidence ? `
+                  <span style="font-size: var(--text-xs); color: var(--color-text-muted);">
+                    (${insight.confidence})
+                  </span>
+                ` : ''}
+              </div>
+            `).join('')}
+          </div>
+        `).join('');
+
+      } catch (error) {
+        console.error('Error loading member insights:', error);
+        card.style.display = 'none';
+      }
+    }
+
+    // =========================================================================
+    // Payment Link Functions
+    // =========================================================================
+
     function openPaymentLinkModal() {
-      // Redirect to old page for now
-      window.location.href = `/admin/organizations/${accountId}`;
+      document.getElementById('paymentLinkOrgName').textContent = `For: ${accountData?.name || 'Unknown'}`;
+      document.getElementById('paymentLinkProducts').innerHTML = 'Loading products...';
+      document.getElementById('paymentLinkProducts').style.display = 'block';
+      document.getElementById('paymentLinkResult').style.display = 'none';
+
+      // Show discount notice if org has a discount
+      const discountNotice = document.getElementById('paymentLinkDiscountNotice');
+      if (accountData.discount_percent || accountData.discount_amount_cents) {
+        discountNotice.style.display = 'block';
+        let discountText = '';
+        if (accountData.discount_percent) {
+          discountText = `${accountData.discount_percent}% off`;
+        } else {
+          discountText = `$${(accountData.discount_amount_cents / 100).toFixed(0)} off`;
+        }
+        if (accountData.stripe_promotion_code) {
+          discountText += ` (code: ${accountData.stripe_promotion_code})`;
+        }
+        document.getElementById('paymentLinkDiscountText').textContent = discountText;
+        document.getElementById('applyDiscountToPaymentLink').checked = true;
+      } else {
+        discountNotice.style.display = 'none';
+      }
+
+      openModal('paymentLinkModal');
+      loadPaymentLinkProducts();
     }
 
-    // Invoice (placeholder)
+    async function loadPaymentLinkProducts() {
+      try {
+        const response = await fetch(`/api/admin/prospects/${accountId}/payment-link`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({})
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to load products');
+        }
+
+        const data = await response.json();
+
+        if (data.needs_selection && data.products) {
+          paymentLinkProductsData = data.products;
+          renderPaymentLinkProducts(data.products);
+        }
+      } catch (error) {
+        console.error('Error loading products:', error);
+        document.getElementById('paymentLinkProducts').innerHTML =
+          '<p style="color: var(--color-error-600);">Failed to load products. Please try again.</p>';
+      }
+    }
+
+    let paymentLinkProductsData = [];
+
+    function renderPaymentLinkProducts(products) {
+      const container = document.getElementById('paymentLinkProducts');
+
+      if (products.length === 0) {
+        container.innerHTML = '<p style="color: var(--color-text-secondary);">No products available for this account type.</p>';
+        return;
+      }
+
+      container.innerHTML = products.map((product, index) => {
+        const price = new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: 'USD'
+        }).format(product.amount_cents / 100);
+
+        const displayName = escapeHtml(product.display_name);
+        const tiers = product.revenue_tiers?.length > 0
+          ? `<span style="font-size: var(--text-xs); color: var(--color-text-muted);">(${product.revenue_tiers.map(t => escapeHtml(t)).join(', ')})</span>`
+          : '';
+
+        return `
+          <button class="product-select-btn" data-product-index="${index}" style="
+            display: block;
+            width: 100%;
+            text-align: left;
+            padding: var(--space-3);
+            margin-bottom: var(--space-2);
+            border: 1px solid var(--color-border);
+            border-radius: var(--radius-md);
+            background: var(--color-bg-card);
+            cursor: pointer;
+            transition: var(--transition-all);
+          " onmouseover="this.style.borderColor='var(--color-brand)'" onmouseout="this.style.borderColor='var(--color-border)'">
+            <strong>${displayName}</strong> ${tiers}
+            <br>
+            <span style="color: var(--color-brand); font-weight: var(--font-semibold);">${price}/year</span>
+          </button>
+        `;
+      }).join('');
+
+      // Event delegation for product selection
+      container.onclick = function(e) {
+        const btn = e.target.closest('[data-product-index]');
+        if (!btn) return;
+        const index = parseInt(btn.dataset.productIndex, 10);
+        const product = paymentLinkProductsData[index];
+        if (product) {
+          generatePaymentLink(product.lookup_key);
+        }
+      };
+    }
+
+    async function generatePaymentLink(lookupKey) {
+      const container = document.getElementById('paymentLinkProducts');
+      container.innerHTML = '<p>Generating payment link...</p>';
+
+      try {
+        const applyDiscount = document.getElementById('applyDiscountToPaymentLink')?.checked;
+        const body = { lookup_key: lookupKey };
+
+        if (applyDiscount && accountData.stripe_coupon_id) {
+          body.coupon_id = accountData.stripe_coupon_id;
+        } else if (applyDiscount && accountData.stripe_promotion_code) {
+          body.promotion_code = accountData.stripe_promotion_code;
+        }
+
+        const response = await fetch(`/api/admin/prospects/${accountId}/payment-link`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+          throw new Error(data.message || data.error || 'Failed to generate payment link');
+        }
+
+        if (data.success && data.payment_url) {
+          container.style.display = 'none';
+          document.getElementById('paymentLinkDiscountNotice').style.display = 'none';
+          document.getElementById('paymentLinkUrl').value = data.payment_url;
+          document.getElementById('paymentLinkResult').style.display = 'block';
+        } else {
+          throw new Error(data.message || 'Unknown error');
+        }
+      } catch (error) {
+        console.error('Error generating payment link:', error);
+        container.innerHTML = `<p style="color: var(--color-error-600);">Error: ${escapeHtml(error.message)}</p>`;
+      }
+    }
+
+    function copyPaymentLink() {
+      const input = document.getElementById('paymentLinkUrl');
+      input.select();
+      navigator.clipboard.writeText(input.value).then(() => {
+        showToast('Payment link copied to clipboard!');
+      }).catch(() => {
+        document.execCommand('copy');
+        showToast('Payment link copied to clipboard!');
+      });
+    }
+
+    // =========================================================================
+    // Invoice Functions
+    // =========================================================================
+
+    let selectedInvoiceProduct = null;
+    let invoiceProductsData = [];
+
     function openInvoiceModal() {
-      // Redirect to old page for now
-      window.location.href = `/admin/organizations/${accountId}`;
+      selectedInvoiceProduct = null;
+
+      document.getElementById('invoiceOrgName').textContent = `For: ${accountData?.name || 'Unknown'}`;
+      document.getElementById('invoiceProducts').innerHTML = 'Loading products...';
+      document.getElementById('invoiceProductSection').style.display = 'block';
+      document.getElementById('invoiceBillingSection').style.display = 'none';
+      document.getElementById('invoiceResult').style.display = 'none';
+      document.getElementById('sendInvoiceBtn').style.display = 'none';
+      document.getElementById('invoiceForm').reset();
+
+      // Pre-fill from account data
+      if (accountData) {
+        document.getElementById('invoiceContactName').value = accountData.prospect_contact_name || '';
+        document.getElementById('invoiceContactEmail').value = accountData.prospect_contact_email || '';
+        document.getElementById('invoiceCompanyName').value = accountData.name || '';
+      }
+
+      openModal('invoiceModal');
+      loadInvoiceProducts();
+    }
+
+    async function loadInvoiceProducts() {
+      try {
+        const response = await fetch('/api/admin/products');
+        if (!response.ok) throw new Error('Failed to load products');
+
+        const data = await response.json();
+        invoiceProductsData = data.products.filter(p => p.is_invoiceable);
+
+        renderInvoiceProducts(invoiceProductsData);
+      } catch (error) {
+        console.error('Error loading products:', error);
+        document.getElementById('invoiceProducts').innerHTML =
+          '<p style="color: var(--color-error-600);">Failed to load products. Please try again.</p>';
+      }
+    }
+
+    function renderInvoiceProducts(products) {
+      const container = document.getElementById('invoiceProducts');
+
+      if (products.length === 0) {
+        container.innerHTML = '<p style="color: var(--color-text-secondary);">No invoiceable products available.</p>';
+        return;
+      }
+
+      container.innerHTML = products.map((product, index) => {
+        const price = new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: 'USD'
+        }).format(product.amount_cents / 100);
+
+        const interval = product.billing_interval ? `/${product.billing_interval}` : '';
+        const displayName = escapeHtml(product.display_name || product.product_name);
+        const description = product.description ? escapeHtml(product.description) : '';
+
+        return `
+          <button type="button" class="product-select-btn" data-product-index="${index}" style="
+            display: block;
+            width: 100%;
+            text-align: left;
+            padding: var(--space-3);
+            margin-bottom: var(--space-2);
+            border: 1px solid var(--color-border);
+            border-radius: var(--radius-md);
+            background: var(--color-bg-card);
+            cursor: pointer;
+            transition: var(--transition-all);
+          " onmouseover="this.style.borderColor='var(--color-brand)'" onmouseout="this.style.borderColor='var(--color-border)'">
+            <strong>${displayName}</strong>
+            <br>
+            <span style="color: var(--color-brand); font-weight: var(--font-semibold);">${price}${interval}</span>
+            ${description ? `<br><span style="font-size: var(--text-xs); color: var(--color-text-muted);">${description}</span>` : ''}
+          </button>
+        `;
+      }).join('');
+
+      // Event delegation for product selection
+      container.onclick = function(e) {
+        const btn = e.target.closest('[data-product-index]');
+        if (!btn) return;
+        const index = parseInt(btn.dataset.productIndex, 10);
+        const product = invoiceProductsData[index];
+        if (product) {
+          selectInvoiceProduct(product);
+        }
+      };
+    }
+
+    function selectInvoiceProduct(product) {
+      const displayName = product.display_name || product.product_name;
+      selectedInvoiceProduct = {
+        lookupKey: product.lookup_key,
+        productName: displayName,
+        amountCents: product.amount_cents
+      };
+
+      const price = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD'
+      }).format(product.amount_cents / 100);
+
+      document.getElementById('selectedProductDisplay').innerHTML = `
+        <strong>${escapeHtml(displayName)}</strong> - <span style="color: var(--color-brand);">${price}</span>
+      `;
+
+      document.getElementById('invoiceProductSection').style.display = 'none';
+      document.getElementById('invoiceBillingSection').style.display = 'block';
+      document.getElementById('sendInvoiceBtn').style.display = 'inline-block';
+    }
+
+    async function submitInvoice(event) {
+      event.preventDefault();
+
+      if (!selectedInvoiceProduct) {
+        alert('Please select a product first');
+        return;
+      }
+
+      const btn = document.getElementById('sendInvoiceBtn');
+      btn.disabled = true;
+      btn.textContent = 'Sending...';
+
+      const data = {
+        lookup_key: selectedInvoiceProduct.lookupKey,
+        company_name: document.getElementById('invoiceCompanyName').value,
+        contact_name: document.getElementById('invoiceContactName').value,
+        contact_email: document.getElementById('invoiceContactEmail').value,
+        billing_address: {
+          line1: document.getElementById('invoiceAddressLine1').value,
+          line2: document.getElementById('invoiceAddressLine2').value || undefined,
+          city: document.getElementById('invoiceCity').value,
+          state: document.getElementById('invoiceState').value,
+          postal_code: document.getElementById('invoicePostalCode').value,
+          country: document.getElementById('invoiceCountry').value,
+        }
+      };
+
+      try {
+        const response = await fetch(`/api/admin/prospects/${accountId}/invoice`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data)
+        });
+
+        if (!response.ok) {
+          const error = await response.json();
+          throw new Error(error.error || error.message || 'Failed to send invoice');
+        }
+
+        const result = await response.json();
+
+        if (result.success && result.invoice_url) {
+          document.getElementById('invoiceBillingSection').style.display = 'none';
+          document.getElementById('sendInvoiceBtn').style.display = 'none';
+          document.getElementById('invoiceUrl').value = result.invoice_url;
+          document.getElementById('invoiceResult').style.display = 'block';
+
+          // Refresh page to show the new pending invoice
+          setTimeout(() => location.reload(), 2000);
+        } else {
+          throw new Error(result.message || 'Unknown error');
+        }
+      } catch (error) {
+        console.error('Error sending invoice:', error);
+        alert('Error: ' + error.message);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = 'Send Invoice';
+      }
+    }
+
+    function copyInvoiceLink() {
+      const input = document.getElementById('invoiceUrl');
+      input.select();
+      navigator.clipboard.writeText(input.value).then(() => {
+        showToast('Invoice link copied to clipboard!');
+      }).catch(() => {
+        document.execCommand('copy');
+        showToast('Invoice link copied to clipboard!');
+      });
     }
 
     // AI Enrichment