`views/family.ejs`

98 lines
<%- include('partials/head') %>
<main class="container">
  <p class="crumbs"><a href="/">&larr; Console</a></p>

  <h1><%= out.brand.name %> <%= out.family.name %></h1>
  <p class="muted mono"><%= out.brand.slug %> / <%= out.family.slug %></p>

  <section class="family-summary">
    <h2>Cohort summary</h2>
    <ul class="kpis">
      <li><span class="lbl">Assets</span><span class="val"><%= out.summary.asset_count %></span></li>
      <li><span class="lbl">Avg Q50</span><span class="val">$<%= money(out.summary.avg_q50) %></span></li>
      <li><span class="lbl">Total comps (24mo)</span><span class="val"><%= out.summary.total_comps %></span></li>
      <li><span class="lbl">Avg liquidity</span><span class="val"><%= pct(out.summary.avg_liquidity) %></span></li>
    </ul>
  </section>

  <% if (out.indices && out.indices.length) { %>
    <section class="family-indices">
      <h2>Related indices</h2>
      <ul class="related-indices">
        <% out.indices.forEach(function (i) { %>
          <li>
            <a href="/indices/<%= i.slug %>"><%= i.name %></a>
            <span class="muted mono"> · <%= i.slug %> · <%= i.methodology_version %></span>
          </li>
        <% }); %>
      </ul>
    </section>
  <% } %>

  <section class="family-grid">
    <h2>Assets in family (<%= out.assets.length %>)</h2>
    <% if (!out.assets.length) { %>
      <p class="muted">No assets in this family yet.</p>
    <% } else { %>
      <div class="controls" role="region" aria-label="Grid controls">
        <label>Sort
          <select id="sort">
            <option value="newest">Newest snapshot</option>
            <option value="brand">Brand A→Z</option>
            <option value="family">Family A→Z</option>
            <option value="q50_asc">Q50 ascending</option>
            <option value="q50_desc">Q50 descending</option>
            <option value="liquidity_desc">Liquidity ↓</option>
            <option value="confidence_desc">Confidence ↓</option>
            <option value="recency_desc">Recently revalued</option>
          </select>
        </label>
        <label>Density
          <input type="range" id="density" min="3" max="8" step="1" value="4" aria-label="Grid density">
          <output id="densityOut">4</output>
        </label>
        <label class="grow">Search
          <input type="search" id="search" placeholder="material, color, hardware…" aria-label="Filter assets in family">
        </label>
      </div>
      <section class="grid" id="grid">
        <% out.assets.forEach(function (a) { %>
          <a class="card"
             href="/asset/<%= a.slug %>"
             data-brand="<%= a.brand_name %>"
             data-family="<%= a.family_name %>"
             data-material="<%= a.material || '' %>"
             data-color="<%= a.color || '' %>"
             data-q50="<%= a.q50 || 0 %>"
             data-liquidity="<%= a.liquidity_score || 0 %>"
             data-confidence="<%= a.confidence || 0 %>"
             data-asof="<%= a.as_of || '' %>">
            <div class="card-head">
              <span class="brand-tag"><%= a.brand_name %></span>
              <span class="family-tag"><%= a.family_name %> <%= a.size || '' %><% if (a.attrs && a.attrs.exotic) { %> <span class="exotic-badge" title="Exotic skin or special edition">EXOTIC</span><% } %></span>
            </div>
            <div class="card-body">
              <div class="material"><%= a.material || '—' %><% if (a.color) { %> · <%= a.color %><% } %><% if (a.hardware) { %> · <%= a.hardware %><% } %></div>
              <div class="value-band">
                <span class="q10">$<%= money(a.q10) %></span>
                <span class="q50">$<%= money(a.q50) %></span>
                <span class="q90">$<%= money(a.q90) %></span>
              </div>
              <div class="meta">
                <span title="Liquidity score">L <%= pct(a.liquidity_score) %></span>
                <span title="Confidence">C <%= pct(a.confidence) %></span>
                <span title="Comp count">n <%= a.comp_count || 0 %></span>
              </div>
            </div>
          </a>
        <% }); %>
      </section>
    <% } %>
  </section>
</main>
<%
function money(v){ if(v==null||v==='') return '—'; var n=parseFloat(v); return isFinite(n)?n.toLocaleString('en-US',{maximumFractionDigits:0}):'—'; }
function pct(v){ if(v==null||v==='') return '—'; var n=parseFloat(v); return isFinite(n)?Math.round(n*100)+'%':'—'; }
%>
<%- include('partials/foot') %>