Add dashboard summary tiles

Shows rider count, activities imported in the last 7 days, 7-day
sync success rate, and how many riders currently need attention,
right above the rider list where an admin looks first.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/web/routes.py

@@ -1,3 +1,4 @@
+from datetime import timedelta
 from pathlib import Path
 
 from fastapi import APIRouter, Form, HTTPException, Request, status
@@ -6,11 +7,13 @@ from fastapi.templating import Jinja2Templates
 
 from app.auth.admin import password_matches, require_admin
 from app.auth.csrf import ensure_csrf_token, validate_csrf
-from app.db.models import SyncUser
+from app.db.models import SyncUser, utcnow
 from app.db.repositories import ActivityRepository, SyncRunRepository, UserRepository
 from app.security.credentials import CredentialCipher
 from app.web.forms import UserFormData
 
+DASHBOARD_SUMMARY_WINDOW = timedelta(days=7)
+
 router = APIRouter()
 templates = Jinja2Templates(directory=str(Path(__file__).resolve().parent / "templates"))
 
@@ -70,11 +73,13 @@ def login(
 def dashboard(request: Request):
     require_admin(request)
     with request.app.state.session_factory() as session:
-        rows = UserRepository(session).dashboard_rows()
+        repository = UserRepository(session)
+        rows = repository.dashboard_rows()
+        summary = repository.dashboard_summary(since=utcnow() - DASHBOARD_SUMMARY_WINDOW)
         return templates.TemplateResponse(
             request,
             "dashboard.html",
-            {"rows": rows, "csrf_token": ensure_csrf_token(request)},
+            {"rows": rows, "summary": summary, "csrf_token": ensure_csrf_token(request)},
         )
 
 

app/web/static/style.css

@@ -116,6 +116,44 @@ h2 {
     flex-wrap: wrap;
 }
 
+.stat-tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+}
+
+.stat-tile {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 0.9rem 1.1rem;
+}
+
+.stat-tile-label {
+    color: var(--text-muted);
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.stat-tile-value {
+    font-family: var(--mono);
+    font-variant-numeric: tabular-nums;
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: var(--accent);
+}
+
+.stat-tile-sub {
+    color: var(--text-muted);
+    font-size: 0.78rem;
+}
+
 .card {
     background: var(--surface);
     border: 1px solid var(--border);

app/web/templates/dashboard.html

@@ -5,6 +5,26 @@
 {% block content %}
 <h1>Dashboard</h1>
 
+<div class="stat-tiles">
+    <div class="stat-tile">
+        <span class="stat-tile-label">Riders</span>
+        <span class="stat-tile-value">{{ summary.rider_total }}</span>
+        <span class="stat-tile-sub">{{ summary.rider_enabled }} enabled</span>
+    </div>
+    <div class="stat-tile">
+        <span class="stat-tile-label">Imported &middot; 7d</span>
+        <span class="stat-tile-value">{{ summary.imported_recent }}</span>
+    </div>
+    <div class="stat-tile">
+        <span class="stat-tile-label">Success rate &middot; 7d</span>
+        <span class="stat-tile-value">{% if summary.success_rate_recent is not none %}{{ "%.0f"|format(summary.success_rate_recent) }}%{% else %}&ndash;{% endif %}</span>
+    </div>
+    <div class="stat-tile">
+        <span class="stat-tile-label">Action required</span>
+        <span class="stat-tile-value">{{ summary.action_required_count }}</span>
+    </div>
+</div>
+
 <div class="page-actions">
     <a class="btn secondary" href="/users/new">Add user</a>
     <form method="post" action="/sync-all" class="inline-form">