`mockups/admin/A10.html`

56 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>A10 · Triage Inbox — 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}
  .three{display:grid;grid-template-columns:190px 360px 1fr;height:calc(100vh - 52px)}
  .folders{border-right:1px solid #232a32;padding:14px 8px}
  .folders button{display:flex;justify-content:space-between;width:100%;background:none;border:0;color:#c3cbd3;font:700 13px system-ui;padding:10px 12px;border-radius:8px;cursor:pointer;text-align:left}
  .folders button.on{background:#11161c;color:#fff}.folders button .c{color:#8b939b;font-size:11px}
  .msglist{border-right:1px solid #232a32;overflow-y:auto}
  .msg{padding:12px 14px;border-bottom:1px solid #171d24;cursor:pointer}
  .msg:hover{background:#141b22}.msg.sel{background:#11161c;border-left:3px solid #c8102e}
  .msg .top{display:flex;justify-content:space-between}.msg .nm{font-weight:700;font-size:14px}.msg .tag{font-size:10px;color:#8b939b}
  .msg .f{font-size:12px;color:#9aa4ad;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .preview{overflow-y:auto;padding:30px 36px}
  .preview .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#c8102e;font-weight:800}
  .preview h2{font-size:28px;font-weight:800;margin:5px 0}.preview .meta{color:#9aa4ad;font-size:14px}
  .preview .toolbar{margin:18px 0;padding-bottom:18px;border-bottom:1px solid #232a32}
  .preview .kv{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
  .preview .cell{background:#11161c;border:1px solid #232a32;border-radius:10px;padding:13px}.preview .cell .kk{font-size:11px;color:#8b939b;text-transform:uppercase}.preview .cell .vv{font-size:17px;font-weight:700;margin-top:3px}
  @media(max-width:900px){.three{grid-template-columns:1fr;height:auto}.msglist{max-height:44vh}}
</style></head>
<body>
<div class="three">
  <div class="folders" data-eln id="folders"></div>
  <div class="msglist" data-eln id="msglist"></div>
  <div class="preview" data-eln id="preview"></div>
</div>
<script src="../assets/chrome.js"></script><script src="admin-core.js"></script>
<script>
let S={tab:'brokers',sel:0};
ADM.mount('A10', d=>{
  S.d=d;const esc=ADM.esc;
  const folders=[['brokers','Brokers',d.brokers.length],['firms','Firms',d.firms.length],['owners','Owners & Assets',d.owners.length]];
  document.getElementById('folders').innerHTML=folders.map(([t,l,n])=>`<button data-t="${t}" class="${t===S.tab?'on':''}">${l}<span class="c">${n}</span></button>`).join('');
  function list(){return S.tab==='brokers'?d.brokers:S.tab==='firms'?d.firms:d.owners;}
  function preview(x){
    if(!x){document.getElementById('preview').innerHTML='';return;}
    const kv=S.tab==='owners'?[['Assessed',RENTV.shortUsd(x.assessed_total)],['SqFt',(x.sqft||0).toLocaleString()],['Built',x.year_built||'—'],['AIN',x.ain]]
      :S.tab==='firms'?[['Agents',(x.agent_count||0).toLocaleString()],['HQ',ADM.loc(x)||'—'],['License',x.license_no||'—'],['Source',x.source||'—']]
      :[['License',x.license_no||'—'],['Type',x.license_type||'—'],['Firm',x.firm_name||'—'],['City',x.city||'—']];
    document.getElementById('preview').innerHTML=`<div class="k">${esc(S.tab==='owners'?(x.type_label||'Asset'):S.tab==='firms'?'Brokerage':(x.license_type||'Licensee'))}</div><h2>${esc(ADM.nm(x))}</h2><div class="meta">${esc(ADM.sub(S.tab,x))}${ADM.loc(x)?' · '+esc(ADM.loc(x)):''}</div><div class="toolbar"><div class="acts">${ADM.actions(S.tab,x)}</div></div><div class="kv">${kv.map(([k,v])=>`<div class="cell"><div class="kk">${k}</div><div class="vv">${esc(v)}</div></div>`).join('')}</div>`;
  }
  function render(){
    const r=list();
    document.getElementById('msglist').innerHTML=r.map((x,i)=>`<div class="msg${i===S.sel?' sel':''}" data-i="${i}"><div class="top"><span class="nm">${esc(ADM.nm(x))}</span><span class="tag">${esc(S.tab==='owners'?RENTV.dstr(x.recording_date):(x.license_no||''))}</span></div><div class="f">${esc(ADM.sub(S.tab,x))}${ADM.loc(x)?' · '+esc(ADM.loc(x)):''}</div></div>`).join('');
    document.querySelectorAll('.msg').forEach(m=>m.onclick=()=>{S.sel=+m.dataset.i;document.querySelectorAll('.msg').forEach(x=>x.classList.remove('sel'));m.classList.add('sel');preview(r[S.sel]);});
    preview(r[S.sel]||r[0]);
  }
  document.getElementById('folders').onclick=e=>{const b=e.target.closest('button');if(!b)return;document.querySelectorAll('#folders button').forEach(x=>x.classList.remove('on'));b.classList.add('on');S.tab=b.dataset.t;S.sel=0;render();};
  render();
});
</script></body></html>