`public/index.html`

229 lines
<!doctype html>
<html lang="en"><head>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Analytics · Steve fleet</title>
<style>
  :root {
    --bg: #0d0d0e; --bg-2: #161618; --bg-3: #1f1f22;
    --ink: #e9e9eb; --ink-mute: #8a8a92; --ink-faint: #5a5a62;
    --rule: #2a2a2e; --gold: #d4a04a; --good: #8fb89a; --warn: #d8b04a; --bad: #c87a6e;
    --serif: ui-serif, Georgia, "Times New Roman", serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --card-min: 240px;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; min-height: 100vh; }
  a { color: var(--gold); text-decoration: none; }
  a:hover { text-decoration: underline; }

  header {
    display: flex; align-items: baseline; gap: 14px; padding: 18px 26px;
    border-bottom: 1px solid var(--rule); background: var(--bg-2); position: sticky; top: 0; z-index: 5;
  }
  header h1 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 500; }
  header h1 em { font-style: italic; color: var(--gold); }
  header .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.10em; text-transform: uppercase; margin-left: auto; }
  header .meta strong { color: var(--gold); font-weight: 600; }
  header .controls { display: flex; gap: 8px; align-items: center; margin-left: 22px; }
  header .controls input { background: var(--bg-3); color: var(--ink); border: 1px solid var(--rule); padding: 7px 12px; border-radius: 2px; font-family: var(--mono); font-size: 12px; width: 240px; outline: none; }
  header .controls input:focus { border-color: var(--gold); }
  header .controls select { background: var(--bg-3); color: var(--ink); border: 1px solid var(--rule); padding: 7px 12px; border-radius: 2px; font-family: var(--mono); font-size: 11px; cursor: pointer; }
  header .controls button { background: transparent; border: 1px solid var(--gold); color: var(--gold); padding: 7px 12px; border-radius: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; }
  header .controls button:hover { background: rgba(212,160,74,0.10); }

  main { padding: 22px 26px 60px; max-width: 1600px; margin: 0 auto; }

  .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: 10px; }
  header .controls .density { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.10em; text-transform: uppercase; }
  header .controls input[type=range] { width: 110px; cursor: pointer; }
  .chip {
    background: var(--bg-2); border: 1px solid var(--rule); border-radius: 4px;
    padding: 12px 14px 14px; transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-height: 110px;
  }
  .chip:hover { transform: translateY(-1px); border-color: var(--gold); background: var(--bg-3); }
  .chip .accent-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
  .chip .row1 { display: flex; align-items: baseline; gap: 8px; }
  .chip .brand { font-family: var(--serif); font-size: 15px; font-weight: 500; line-height: 1.2; flex: 1; }
  .chip .domain { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.04em; }
  .chip .gid { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: 0.06em; padding: 2px 6px; background: var(--bg-3); border-radius: 2px; }
  .chip .template-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
  .chip .metrics { display: flex; gap: 12px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--rule); }
  .chip .metric { display: flex; flex-direction: column; }
  .chip .metric .num { font-family: var(--mono); font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1; }
  .chip .metric .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
  .chip .empty-msg { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); font-style: italic; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--rule); }
  .chip .err { font-family: var(--mono); font-size: 10px; color: var(--bad); margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--bad); }

  .empty { padding: 60px 0; text-align: center; color: var(--ink-faint); font-style: italic; }
  .footer { text-align: center; padding: 24px 0; color: var(--ink-faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
  .badge-loading { display: inline-block; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; animation: pulse 1s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
</style>
</head><body>

<header>
  <h1>Fleet <em>Analytics</em></h1>
  <div class="controls">
    <input id="filter" placeholder="filter by domain or brand…" autocomplete="off">
    <select id="sort">
      <option value="alpha">A→Z</option>
      <option value="users">Users (7d)</option>
      <option value="sessions">Sessions (7d)</option>
      <option value="template">Template</option>
    </select>
    <span class="density">density <input id="density" type="range" min="160" max="380" step="20"></span>
    <button id="refresh">Refresh</button>
  </div>
  <div class="meta">
    <strong id="ct">…</strong> properties ·
    <strong id="users-total">…</strong> users · <strong id="sessions-total">…</strong> sessions ·
    <span id="status">loading</span>
  </div>
</header>

<main>
  <div id="chips" class="chips"><div class="empty">Loading properties…</div></div>
</main>

<div class="footer">analytics-chips · :9786</div>

<script>
const $ = (s) => document.querySelector(s);
const esc = (s) => String(s == null ? '' : s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');

let PROPERTIES = [];
let METRICS = {};
// Hydrate persisted controls BEFORE first render so the grid doesn't flash defaults.
let SORT = localStorage.getItem('chips.sort') || 'alpha';
let FILTER = localStorage.getItem('chips.filter') || '';

function applyDensity(px) {
  document.documentElement.style.setProperty('--card-min', px + 'px');
  const el = document.getElementById('density');
  if (el) el.value = px;
  localStorage.setItem('chips.density', px);
}

function fmtNum(n) {
  if (n == null) return '—';
  if (n >= 1000) return (n / 1000).toFixed(1) + 'k';
  return String(n);
}

function chipHtml(p) {
  const m = METRICS[p.domain] || {};
  const accent = (p.palette && (p.palette.accent || p.palette.primary)) || 'var(--gold)';
  const right = m.error
    ? `<div class="err">err: ${esc(m.error)}</div>`
    : (m.no_property_id || (!m.users && m.users !== 0))
      ? `<div class="empty-msg">no metrics yet</div>`
      : `<div class="metrics">
          <div class="metric"><div class="num">${fmtNum(m.users)}</div><div class="lbl">users</div></div>
          <div class="metric"><div class="num">${fmtNum(m.sessions)}</div><div class="lbl">sessions</div></div>
          <div class="metric"><div class="num">${fmtNum(m.pageviews)}</div><div class="lbl">views</div></div>
        </div>`;
  return `<div class="chip" data-domain="${esc(p.domain)}" onclick="openProperty('${esc(p.gid)}', '${esc(p.domain)}')">
    <div class="accent-bar" style="background:${esc(accent)}"></div>
    <div class="row1">
      <div class="brand">${esc(p.brand_name || p.domain.replace(/\..*$/, ''))}</div>
      <div class="gid">${esc(p.gid)}</div>
    </div>
    <div class="domain">${esc(p.domain)}</div>
    ${p.template ? `<div class="template-tag">${esc(p.template.replace(/_/g,' '))}</div>` : ''}
    ${right}
  </div>`;
}

function openProperty(gid, domain) {
  // Open both: GA4 property in a new tab + the live site
  window.open(`https://analytics.google.com/analytics/web/#/p${gid}/reports/dashboard`, '_blank');
  window.open(`https://${domain}/`, '_blank');
}

function applyFilterSort() {
  const f = FILTER.toLowerCase();
  let list = PROPERTIES.filter(p =>
    !f || p.domain.toLowerCase().includes(f) ||
         (p.brand_name || '').toLowerCase().includes(f) ||
         (p.template || '').toLowerCase().includes(f)
  );
  list.sort((a, b) => {
    if (SORT === 'alpha') return a.domain.localeCompare(b.domain);
    if (SORT === 'template') {
      const ta = a.template || 'zzz', tb = b.template || 'zzz';
      return ta.localeCompare(tb) || a.domain.localeCompare(b.domain);
    }
    if (SORT === 'users') {
      return ((METRICS[b.domain] || {}).users || 0) - ((METRICS[a.domain] || {}).users || 0);
    }
    if (SORT === 'sessions') {
      return ((METRICS[b.domain] || {}).sessions || 0) - ((METRICS[a.domain] || {}).sessions || 0);
    }
    return 0;
  });

  const wrap = $('#chips');
  if (!list.length) { wrap.innerHTML = '<div class="empty">No matches.</div>'; return; }
  wrap.innerHTML = list.map(chipHtml).join('');

  $('#ct').textContent = list.length;
  let users = 0, sessions = 0, hasMetrics = 0;
  for (const p of list) {
    const m = METRICS[p.domain] || {};
    if (m.users != null) hasMetrics++;
    users += m.users || 0;
    sessions += m.sessions || 0;
  }
  $('#users-total').textContent = fmtNum(users);
  $('#sessions-total').textContent = fmtNum(sessions);
  $('#status').textContent = hasMetrics ? `${hasMetrics} with metrics` : 'metrics pending';
}

async function loadProperties() {
  const r = await fetch('/api/properties');
  const d = await r.json();
  PROPERTIES = d.properties;
  applyFilterSort();
  loadMetrics();
}

async function loadMetrics() {
  $('#status').innerHTML = '<span class="badge-loading"></span> fetching metrics…';
  try {
    const r = await fetch('/api/metrics');
    const d = await r.json();
    METRICS = {};
    for (const m of (d.metrics || [])) METRICS[m.domain] = m;
    applyFilterSort();
  } catch (e) {
    $('#status').textContent = 'metric error: ' + e.message;
  }
}

$('#filter').addEventListener('input', e => {
  FILTER = e.target.value;
  localStorage.setItem('chips.filter', FILTER);
  applyFilterSort();
});
$('#sort').addEventListener('change', e => {
  SORT = e.target.value;
  localStorage.setItem('chips.sort', SORT);
  applyFilterSort();
});
$('#density').addEventListener('input', e => applyDensity(parseInt(e.target.value, 10)));
$('#refresh').addEventListener('click', loadMetrics);

// Reflect hydrated values in the controls before kicking off the first load.
$('#filter').value = FILTER;
$('#sort').value = SORT;
applyDensity(parseInt(localStorage.getItem('chips.density') || '240', 10));

loadProperties();
</script>
</body></html>