`mockups/admin/A09.html`

52 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>A09 · Analytics — 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:1240px;margin:0 auto;padding:16px 20px}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
  .kpi{background:#11161c;border:1px solid #232a32;border-radius:12px;padding:16px}
  .kpi .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8b939b}.kpi .v{font-size:30px;font-weight:800;margin-top:4px;letter-spacing:-1px}.kpi .v.red{color:#ff6b6b}
  .cols{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
  .panel{background:#11161c;border:1px solid #232a32;border-radius:12px;padding:16px}
  .panel h3{margin:0 0 14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8b939b}
  .bar{display:flex;align-items:center;gap:10px;margin-bottom:9px;cursor:pointer}
  .bar .lab{width:150px;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bar .track{flex:1;height:22px;background:#0e141a;border-radius:5px;overflow:hidden}
  .bar .fill{height:100%;background:linear-gradient(90deg,#c8102e,#e0455f);border-radius:5px}
  .bar .val{width:64px;text-align:right;font-weight:800;font-size:13px}
  .bar.open .acts{display:flex}.acts{display:none}
  .barwrap.open .acts{display:flex;margin:2px 0 12px 160px}
  .donut{display:flex;flex-direction:column;gap:8px}
  .drow{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:8px 0;border-bottom:1px solid #171d24}
  .dbadge{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:8px}
  @media(max-width:820px){.kpis{grid-template-columns:1fr 1fr}.cols{grid-template-columns:1fr}}
</style></head>
<body>
<div class="admhead" data-eln><h1>RENTV Admin · <span>Market Analytics</span></h1><div class="fresh" id="fresh"></div></div>
<div class="wrap">
  <div class="kpis" data-eln id="kpis"></div>
  <div class="cols">
    <div class="panel" data-eln><h3>Top brokerages by licensed agents</h3><div id="bars"></div></div>
    <div class="panel" data-eln><h3>Broker mix by license type</h3><div class="donut" id="mix"></div></div>
  </div>
</div>
<script src="../assets/chrome.js"></script><script src="admin-core.js"></script>
<script>
ADM.mount('A09', d=>{
  const esc=ADM.esc;
  document.getElementById('fresh').textContent='Live from the CA DRE registry + LA assessor';
  const totAgents=d.firms.reduce((s,f)=>s+(f.agent_count||0),0);
  const kpis=[['CA Brokers',d.totalB.toLocaleString()],['CA Firms',d.totalF.toLocaleString()],['Top firm',(d.firms[0]?.agent_count||0).toLocaleString()+' agents'],['Marquee assets',d.owners.length]];
  document.getElementById('kpis').innerHTML=kpis.map(([k,v])=>`<div class="kpi"><div class="k">${k}</div><div class="v">${v}</div></div>`).join('');
  const top=d.firms.slice().sort((a,b)=>(b.agent_count||0)-(a.agent_count||0)).slice(0,9);const max=top[0]?.agent_count||1;
  document.getElementById('bars').innerHTML=top.map(f=>`<div class="barwrap"><div class="bar"><span class="lab" title="${esc(f.name)}">${esc(f.name)}</span><span class="track"><span class="fill" style="width:${Math.round((f.agent_count||0)/max*100)}%"></span></span><span class="val">${(f.agent_count||0).toLocaleString()}</span></div><div class="acts">${ADM.actions('firms',f)}</div></div>`).join('');
  document.querySelectorAll('.barwrap').forEach(w=>w.querySelector('.bar').onclick=e=>{if(e.target.closest('a'))return;w.classList.toggle('open');});
  const types={};d.brokers.forEach(b=>{const t=b.license_type||'Other';types[t]=(types[t]||0)+1;});
  const pal=['#c8102e','#37d67a','#7cc0ff','#f59e0b','#a78bfa'];const ents=Object.entries(types).sort((a,b)=>b[1]-a[1]);
  document.getElementById('mix').innerHTML=ents.map(([t,n],i)=>`<div class="drow"><span><span class="dbadge" style="background:${pal[i%pal.length]}"></span>${esc(t)}</span><b>${n}</b></div>`).join('');
});
</script></body></html>