feat: add KPI summary tiles above players table (#5)

This commit is contained in:
Samuel Enocsson
2026-05-21 13:58:48 +02:00
parent b51ae19ae1
commit 83ceaf0ea3
2 changed files with 108 additions and 0 deletions
+37
View File
@@ -16,6 +16,43 @@
</button>
</div>
</div>
<!-- KPI Summary Tiles -->
<section class="kpi-strip" aria-label="Tracker overview">
<article class="kpi-tile">
<span class="kpi-rail"></span>
<div class="kpi-body">
<div class="kpi-value"><%= kpis.tracked %></div>
<div class="kpi-label">Tracked</div>
<div class="kpi-sub"><%= kpis.active %> active</div>
</div>
</article>
<article class="kpi-tile">
<span class="kpi-rail"></span>
<div class="kpi-body">
<div class="kpi-value"><%= kpis.avg ?? '—' %></div>
<div class="kpi-label">Avg rating</div>
<div class="kpi-sub">across active players</div>
</div>
</article>
<article class="kpi-tile">
<span class="kpi-rail up"></span>
<div class="kpi-body">
<div class="kpi-value"><%= kpis.climbing %></div>
<div class="kpi-label">Climbing</div>
<div class="kpi-sub">this month</div>
</div>
</article>
<article class="kpi-tile">
<span class="kpi-rail down"></span>
<div class="kpi-body">
<div class="kpi-value"><%= kpis.slipping %></div>
<div class="kpi-label">Slipping</div>
<div class="kpi-sub">this month</div>
</div>
</article>
</section>
<div style="display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 16px;">
<a href="#" onclick="clearCache(); return false;" style="color: var(--text-muted); font-size: 12px; text-decoration: none; opacity: 0.4;" title="Clear cache"><i class="fas fa-cog"></i></a>
</div>