`views/families.ejs`

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

  <h1>Model families</h1>
  <p class="muted">Cohort index across every brand + model family in the catalog. Click into a family for its asset roster, related indices, and 24-month comp totals.</p>

  <form class="controls" method="GET" action="/family" role="region" aria-label="Family sort">
    <label>Sort
      <% var s = (typeof sort === 'string' ? sort : '') || ''; %>
      <select name="sort" onchange="this.form.submit()">
        <option value=""           <%= s === ''            ? 'selected' : '' %>>Brand &amp; name (default)</option>
        <option value="name"       <%= s === 'name'        ? 'selected' : '' %>>Family name A→Z</option>
        <option value="slug"       <%= s === 'slug'        ? 'selected' : '' %>>Slug A→Z</option>
        <option value="assets-desc"<%= s === 'assets-desc' ? 'selected' : '' %>>Asset count ↓</option>
        <option value="comps-desc" <%= s === 'comps-desc'  ? 'selected' : '' %>>24-month comps ↓</option>
        <option value="value-desc" <%= s === 'value-desc'  ? 'selected' : '' %>>Avg Q50 ↓</option>
        <option value="value-asc"  <%= s === 'value-asc'   ? 'selected' : '' %>>Avg Q50 ↑</option>
      </select>
    </label>
    <label>Density
      <input type="range" id="density" min="3" max="8" step="1" value="3" aria-label="Grid density">
      <output id="densityOut">3</output>
    </label>
    <noscript><button type="submit">Apply</button></noscript>
  </form>

  <% if (!families.length) { %>
    <p class="muted">No families seeded yet — run <code>npm run seed</code>.</p>
  <% } else { %>
    <section class="grid" id="grid">
      <% families.forEach(function (f) { %>
        <a class="card" href="/family/<%= f.slug %>">
          <div class="card-head">
            <span class="brand-tag"><%= f.brand.name %></span>
            <span class="family-tag"><%= f.name %></span>
          </div>
          <div class="card-body">
            <div class="material muted mono"><%= f.brand.slug %> / <%= f.slug %></div>
            <div class="value-band">
              <span class="q50">$<%= money(f.avg_q50) %></span>
            </div>
            <div class="meta">
              <span title="Canonical assets in this family">A <%= f.asset_count %></span>
              <span title="Total comparable transactions in trailing 24 months">n <%= f.total_comps_24m %></span>
            </div>
          </div>
        </a>
      <% }); %>
    </section>
  <% } %>
</main>
<%
function money(v){ if(v==null||v==='') return '—'; var n=parseFloat(v); return isFinite(n)?n.toLocaleString('en-US',{maximumFractionDigits:0}):'—'; }
%>
<%- include('partials/foot') %>