mailova/app/templates/dashboard.html

{% extends "base.html" %}
{% block title %}{{ {'zh':'总览','en':'Dashboard'}[user.language] }} - {{ 'brand'|t(user.language) }}{% endblock %}
{% block content %}
<div class="section-header">
    <h1>{{ 'dash.welcome'|t(user.language) }}{{ user.username }}</h1>
</div>

{% if profiles %}
<div class="dash-stats">
    <div class="dash-stat-card">
        <div class="dash-stat-icon">📮</div>
        <div class="dash-stat-body">
            <span class="dash-stat-value">{{ total }}</span>
            <span class="dash-stat-label">{{ 'dash.total_cards'|t(user.language) }}</span>
        </div>
    </div>
    <div class="dash-stat-card">
        <div class="dash-stat-icon">📤</div>
        <div class="dash-stat-body">
            <span class="dash-stat-value dash-sent">{{ sent }}</span>
            <span class="dash-stat-label">{{ 'dash.sent'|t(user.language) }}</span>
        </div>
    </div>
    <div class="dash-stat-card">
        <div class="dash-stat-icon">📬</div>
        <div class="dash-stat-body">
            <span class="dash-stat-value dash-delivered">{{ delivered }}</span>
            <span class="dash-stat-label">{{ 'dash.delivered'|t(user.language) }}</span>
        </div>
    </div>
    <div class="dash-stat-card">
        <div class="dash-stat-icon">💌</div>
        <div class="dash-stat-body">
            <span class="dash-stat-value dash-received">{{ received }}</span>
            <span class="dash-stat-label">{{ 'dash.received'|t(user.language) }}</span>
        </div>
    </div>
    <div class="dash-stat-card">
        <div class="dash-stat-icon">🌍</div>
        <div class="dash-stat-body">
            <span class="dash-stat-value">{{ countries }}</span>
            <span class="dash-stat-label">{{ 'dash.countries'|t(user.language) }}</span>
        </div>
    </div>
</div>

{% if total > 0 %}
<div class="dash-progress">
    <div class="progress-bar">
        <div class="progress-seg progress-sent" style="width:{{ sent_pct }}%"></div>
        <div class="progress-seg progress-delivered" style="width:{{ delivered_pct }}%"></div>
        <div class="progress-seg progress-received" style="width:{{ received_pct }}%"></div>
    </div>
    <div class="progress-legend">
        <span><i class="dot dot-sent"></i>{{ 'dash.sent'|t(user.language) }} {{ sent_pct }}%</span>
        <span><i class="dot dot-delivered"></i>{{ 'dash.delivered'|t(user.language) }} {{ delivered_pct }}%</span>
        <span><i class="dot dot-received"></i>{{ 'dash.received'|t(user.language) }} {{ received_pct }}%</span>
    </div>
</div>
{% endif %}

{% if sent_country_stats or received_country_stats %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem">
    {% if sent_country_stats %}
    <div style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1.25rem">
        <h2 style="margin-bottom:.75rem">{{ 'dash.chart_sent'|t(user.language) }}</h2>
        <canvas id="chart-sent"></canvas>
    </div>
    {% endif %}
    {% if received_country_stats %}
    <div style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1.25rem">
        <h2 style="margin-bottom:.75rem">{{ 'dash.chart_received'|t(user.language) }}</h2>
        <canvas id="chart-received"></canvas>
    </div>
    {% endif %}
</div>
<script>
(function() {
    var labels, data, colors, elId;
    {% for stat in sent_country_stats %}
    labels = {{ stat.labels|tojson }};
    data = {{ stat.data|tojson }};
    colors = labels.map(function(l) { return '#f59e0b'; });
    elId = 'chart-sent';
    new Chart(document.getElementById(elId), {
        type: 'bar',
        data: { labels: labels, datasets: [{ data: data, backgroundColor: colors, borderRadius: 4 }] },
        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
    });
    {% endfor %}
    {% for stat in received_country_stats %}
    labels = {{ stat.labels|tojson }};
    data = {{ stat.data|tojson }};
    colors = labels.map(function(l) { return '#8b5cf6'; });
    elId = 'chart-received';
    new Chart(document.getElementById(elId), {
        type: 'bar',
        data: { labels: labels, datasets: [{ data: data, backgroundColor: colors, borderRadius: 4 }] },
        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
    });
    {% endfor %}
})();
</script>
{% endif %}

{% if profiles %}
<div class="dash-sections">
    {% for p in profiles %}
    <a href="/profiles/{{ p.id }}/postcards" class="card dashboard-card">
        <h3>{{ p.nickname }}</h3>
        <div class="stats">
            <span class="stat">{{ p.postcards|length }} {{ 'profiles.total'|t(user.language) }}</span>
        </div>
    </a>
    {% endfor %}
</div>
{% endif %}

{% else %}
<div class="empty-state">
    <p>{{ 'dash.welcome'|t(user.language) }}{{ user.username }} 👋</p>
</div>
{% endif %}
{% endblock %}