piomint/app/templates/app/dashboard.html

{% load static %}
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'app/css/bootstrap.css' %}?v={{ STATIC_VERSION }}">
    <title>PioMint – Nutzung</title>
    <style>
        body {
            background-color: #f4f6f5;
            padding: 2rem 1rem 3rem 1rem;
        }
        h1 b {
            color: rgb(120, 170, 86);
        }
        .stat-card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 0 0.5rem gray;
            padding: 1.25rem;
        }
        .stat-card.text-center .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: rgb(120, 170, 86);
        }
        .stat-card .stat-label {
            color: #6c757d;
            font-size: 0.9rem;
        }
        .stat-card table {
            background: white;
        }
    </style>
</head>
<body>
    <div class="container" style="max-width: 960px;">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="m-0">PIO<b>MINT</b> – Nutzung</h1>
            <a href="/app/home/" class="btn btn-sm btn-light">Zur App</a>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-6 col-md-6">
                <div class="stat-card text-center">
                    <div class="stat-value">{{ total_connections }}</div>
                    <div class="stat-label">Verbindungen insgesamt <small class="text-muted">(alle Pings)</small></div>
                </div>
            </div>
            <div class="col-6 col-md-6">
                <div class="stat-card text-center">
                    <div class="stat-value">{{ users_total }}</div>
                    <div class="stat-label">Nutzer insgesamt <small class="text-muted">(als App installiert)</small></div>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-6 col-md-4">
                <div class="stat-card text-center">
                    <div class="stat-value">{{ users_today }}</div>
                    <div class="stat-label">Nutzer heute</div>
                </div>
            </div>
            <div class="col-6 col-md-4">
                <div class="stat-card text-center">
                    <div class="stat-value">{{ users_7d }}</div>
                    <div class="stat-label">Nutzer (7 Tage)</div>
                </div>
            </div>
            <div class="col-6 col-md-4">
                <div class="stat-card text-center">
                    <div class="stat-value">{{ users_30d }}</div>
                    <div class="stat-label">Nutzer (30 Tage)</div>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <div class="stat-card">
                    <h5>Plattform <small class="text-muted">(eindeutige Nutzer)</small></h5>
                    <ul class="list-unstyled mb-0">
                        {% for row in by_platform %}
                        <li class="d-flex justify-content-between border-bottom py-1">
                            <span>{{ row.platform|default:"Unbekannt" }}</span><b>{{ row.count }}</b>
                        </li>
                        {% empty %}
                        <li class="text-muted">Noch keine Daten</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="stat-card">
                    <h5>Browser <small class="text-muted">(eindeutige Nutzer)</small></h5>
                    <ul class="list-unstyled mb-0">
                        {% for row in by_browser %}
                        <li class="d-flex justify-content-between border-bottom py-1">
                            <span>{{ row.browser|default:"Unbekannt" }}</span><b>{{ row.count }}</b>
                        </li>
                        {% empty %}
                        <li class="text-muted">Noch keine Daten</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

        <div class="stat-card mb-3">
            <h5 class="mb-1">Nutzer vs. Aufrufer</h5>
            <p class="mb-0 text-muted">
                <b>{{ users_total }} Nutzer</b> haben PioMint mindestens einmal als installierte PWA
                (Standalone) geöffnet – das ist echte Nutzung. Weitere
                <b>{{ visitors_total }} Aufrufer</b> haben die Seite nur im Browser-Tab geöffnet,
                aber nie installiert; sie fließen oben nicht in die Nutzer-Zahlen ein.
            </p>
        </div>

        <div class="stat-card mb-3">
            <h5 class="mb-2">Geräte-Übersicht <small class="text-muted">(ein Eintrag pro Gerät, nicht pro Ping)</small></h5>
            <div style="overflow-x: auto;">
                <table class="table table-sm table-striped mb-0">
                    <thead>
                        <tr>
                            <th>Gerät</th>
                            <th>Pings</th>
                            <th>Erster Kontakt</th>
                            <th>Letzter Kontakt</th>
                            <th>Nutzer?</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for device in device_summary %}
                        <tr>
                            <td><code>{{ device.device_id|slice:":8" }}…</code></td>
                            <td>{{ device.ping_count }}</td>
                            <td>{{ device.first_seen|date:"d.m.Y H:i" }}</td>
                            <td>{{ device.last_seen|date:"d.m.Y H:i" }}</td>
                            <td>{{ device.standalone_any|yesno:"Ja,Nein" }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="5" class="text-muted">Noch keine Daten</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="stat-card">
            <h5 class="mb-2">Letzte Signale <small class="text-muted">(roher Ping-Log, ein Gerät kann hier mehrfach auftauchen)</small></h5>
            <div style="overflow-x: auto;">
                <table class="table table-sm table-striped mb-0">
                    <thead>
                        <tr>
                            <th>Zeit</th>
                            <th>Gerät</th>
                            <th>Version</th>
                            <th>Plattform</th>
                            <th>Browser</th>
                            <th>Standalone</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for event in recent_events %}
                        <tr>
                            <td>{{ event.created_at|date:"d.m.Y H:i" }}</td>
                            <td><code>{{ event.device_id|slice:":8" }}…</code></td>
                            <td>{{ event.app_version|default:"–" }}</td>
                            <td>{{ event.platform }}</td>
                            <td>{{ event.browser }}</td>
                            <td>{{ event.is_standalone|yesno:"Ja,Nein" }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="6" class="text-muted">Noch keine Daten</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <p class="text-muted mt-4" style="font-size: 0.8rem;">
            Komplett anonym: <code>device_id</code> ist eine zufällige, nur lokal im Browser
            gespeicherte ID ohne Bezug zu einer Person. Ein Signal pro Gerät und Tag.
        </p>
    </div>
</body>
</html>