`mockups/admin/A02.html`

40 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>A02 · Kanban — RENTV Admin</title>
<link rel="stylesheet" href="../assets/base.css"><link rel="stylesheet" href="admin.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  body{background:#0d1014;color:#e7ecf1;font-family:'Inter',system-ui,sans-serif}
  .wrap{max-width:1360px;margin:0 auto;padding:14px 18px}
  .board{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:14px;overflow-x:auto;padding-bottom:10px}
  .col{background:#0f141a;border:1px solid #232a32;border-radius:12px;display:flex;flex-direction:column;max-height:calc(100vh - 130px)}
  .col h3{margin:0;padding:13px 14px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#cfd6dd;border-bottom:1px solid #232a32;display:flex;justify-content:space-between}
  .col h3 .n{color:#8b939b;background:#161d25;border-radius:20px;padding:1px 8px;font-size:11px}
  .col .body{overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px}
  .card{background:#141b22;border:1px solid #232a32;border-radius:10px;padding:11px 12px;cursor:pointer}
  .card:hover{border-color:#3a4652}
  .card .nm{font-weight:700;font-size:14px}
  .card .f{font-size:12px;color:#9aa4ad;margin-top:2px}
  .card .lic{font-size:11px;color:#37d67a;font-family:ui-monospace,monospace;margin-top:5px}
  .card .exp{display:none;margin-top:9px;padding-top:9px;border-top:1px solid #232a32}
  .card.open .exp{display:block}
</style></head>
<body>
<div class="admhead" data-eln><h1>RENTV Admin · <span>Pipeline Board</span></h1><div class="fresh" id="fresh"></div></div>
<div class="wrap"><div class="board" data-eln id="board"></div></div>
<script src="../assets/chrome.js"></script><script src="admin-core.js"></script>
<script>
ADM.mount('A02', d=>{
  const esc=ADM.esc;
  document.getElementById('fresh').textContent='Brokers grouped by license type · '+d.brokers.length+' of '+d.totalB.toLocaleString()+' CA licensees';
  // columns = license type (a natural "pipeline" grouping)
  const groups={};
  d.brokers.forEach(b=>{const g=b.license_type||'Other';(groups[g]=groups[g]||[]).push(b);});
  const order=Object.keys(groups).sort((a,b)=>groups[b].length-groups[a].length);
  document.getElementById('board').innerHTML=order.map(g=>`<div class="col"><h3>${esc(g)}<span class="n">${groups[g].length}</span></h3><div class="body">${
    groups[g].slice(0,40).map(b=>`<div class="card"><div class="nm">${esc(b.name)}</div><div class="f">${esc(b.firm_name||'—')} · ${esc(b.city||'')}</div><div class="lic">DRE ${esc(b.license_no||'')}</div><div class="exp"><div class="acts">${ADM.actions('brokers',b)}</div></div></div>`).join('')
  }</div></div>`).join('');
  document.querySelectorAll('.card').forEach(c=>c.onclick=e=>{if(e.target.closest('a'))return;c.classList.toggle('open');});
});
</script></body></html>