From d19ce5e8fa6de1484addd655be3f676b92f047be Mon Sep 17 00:00:00 2001
From: James <james@jongsma.me>
Date: Thu, 12 Mar 2026 03:04:48 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20org=20cards=20clickable=20=E2=80=94=20st?=
 =?UTF-8?q?ore=20orgs=20in=20JS=20map,=20pass=20entry=5Fid=20to=20edit=20m?=
 =?UTF-8?q?odal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 portal/templates/app/orgs.html | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/portal/templates/app/orgs.html b/portal/templates/app/orgs.html
index 7a73103..8757119 100644
--- a/portal/templates/app/orgs.html
+++ b/portal/templates/app/orgs.html
@@ -7,7 +7,7 @@
         </div>
         <button id="newOrgBtn" class="hidden px-4 py-2 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">+ New Organization</button>
       </div>
-      <div id="orgGrid" class="flex flex-col divide-y" style="border:1px solid var(--ds-bd);border-radius:6px;overflow:hidden">
+      <div id="orgGrid" class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div class="text-[#94a3b8] text-sm col-span-2">Loading...</div>
       </div>
       <div id="emptyState" class="hidden text-center py-20">
@@ -93,21 +93,23 @@
           document.getElementById('emptyState').classList.remove('hidden');
           return;
         }
+        // Store orgs in map for safe click lookup
+        window._orgsMap = {};
+        orgs.forEach(o => { window._orgsMap[o.entry_id] = o; });
+
         grid.innerHTML = orgs.map(o => {
           const name = o.name || 'Untitled';
           const role = o.role || '';
           const rc = roleColors[role] || 'bg-gray-500/20 text-gray-300';
           const domains = Array.isArray(o.domains) ? o.domains : (o.domains ? [o.domains] : []);
-          return `<div onclick="openEditModal(${JSON.stringify(JSON.stringify(o))})"
-            class="flex items-center gap-4 px-5 py-3.5 cursor-pointer transition"
-            style="background:var(--ds-sf)" onmouseover="this.style.background='var(--ds-hv)'" onmouseout="this.style.background='var(--ds-sf)'">
-            <div class="w-8 h-8 rounded flex items-center justify-center text-sm font-bold shrink-0"
-              style="background:var(--ds-ac);color:#fff">${escHtml(name[0]||'?').toUpperCase()}</div>
-            <div class="flex-1 min-w-0">
-              <div class="font-semibold text-white">${escHtml(name)}</div>
-              <div class="text-xs mt-0.5" style="color:var(--ds-tx3)">${domains.map(d=>'@'+escHtml(d)).join(' · ') || (o.website||'')}</div>
+          return `<div onclick="openEditModal('${o.entry_id}')"
+            class="card bg-[#0d1f3c] border border-white/[0.08] rounded-xl p-6 cursor-pointer hover:border-white/[0.2] transition">
+            <div class="flex items-start justify-between mb-3">
+              <h3 class="text-white font-semibold leading-tight">${escHtml(name)}</h3>
+              <span class="ml-2 shrink-0 px-2 py-0.5 rounded-full text-xs font-medium capitalize ${rc}">${role || '—'}</span>
             </div>
-            <span class="shrink-0 px-2.5 py-0.5 text-xs font-medium capitalize ${rc}" style="border-radius:3px">${role || '—'}</span>
+            <div class="flex gap-1.5 flex-wrap">${domains.map(dm => `<span class="text-xs font-mono text-[#94a3b8] bg-white/[0.05] px-2 py-0.5 rounded">@${escHtml(dm)}</span>`).join('')}</div>
+            ${o.website ? `<div class="mt-2 text-xs" style="color:var(--ds-tx3)">${escHtml(o.website)}</div>` : ''}
           </div>`;
         }).join('');
       } catch(e) {
@@ -144,8 +146,9 @@
     // ---- Edit Org ----
     let editingOrgId = null;
 
-    function openEditModal(oJson) {
-      const o = JSON.parse(oJson);
+    function openEditModal(entryId) {
+      const o = (window._orgsMap || {})[entryId];
+      if (!o) return;
       editingOrgId = o.entry_id;
       document.getElementById('eName').value = o.name || '';
       document.getElementById('eRole').value = o.role || 'seller';