`views/index.ejs`

74 lines
<%- include('partials/head') %>
<main class="container">
  <h1>Market-Ops Console</h1>
  <p class="muted">v0 stub — internal only. Sample data is the blueprint's Birkin 30 Togo dataset; everything below is shaped per the future enterprise valuation API contract.</p>

  <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="5" aria-label="Grid density">
      <output id="densityOut">5</output>
    </label>
    <label class="grow">Search
      <input type="search" id="search" name="q" value="<%= typeof q !== 'undefined' && q ? q : '' %>" placeholder="brand, family, material, color…" aria-label="Filter assets">
    </label>
    <% if (typeof q !== 'undefined' && q) { %>
      <a class="clear-q" href="/" title="Clear server-side filter">Clear &times;</a>
    <% } %>
  </div>

  <section class="grid" id="grid">
    <% assets.forEach(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">$<%= fmt(a.q10) %></span>
            <span class="q50">$<%= fmt(a.q50) %></span>
            <span class="q90">$<%= fmt(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>
    <% }) %>
    <% if (!assets.length) { %>
      <div class="empty">No canonical assets seeded yet — run <code>npm run seed</code>.</div>
    <% } %>
  </section>
</main>

<%
function fmt(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') %>