{% extends 'base.html' %}{% block content %}<div class="hero-panel mb-4"><div class="d-flex flex-wrap justify-content-between align-items-start gap-3"><div><div class="app-section-title mb-2"><span class="feature-icon"><i class="fa-solid fa-chart-pie"></i></span><div><h1 class="h3 mb-0">{{ t('dashboard.title') }}</h1><div class="text-body-secondary">{{ selected_year }}-{{ '%02d'|format(selected_month) }}</div></div></div><div class="footer-note">{{ t('dashboard.latest') }} • {{ t('dashboard.categories') }}</div></div><div class="text-end"><div class="small text-body-secondary">{{ t('dashboard.total') }}</div><div class="display-6 fw-bold">{{ total }}</div></div></div></div>{% if alerts %}<div class="alert alert-warning border-0 shadow-sm"><i class="fa-solid fa-triangle-exclamation me-2"></i><strong>{{ t('dashboard.alerts') }}:</strong> {% for alert in alerts %}{{ alert.category }} {{ '%.0f'|format(alert.ratio) }}%{% if not loop.last %}, {% endif %}{% endfor %}</div>{% endif %}<div class="quick-stats mb-4"><div class="metric-card"><div class="metric-label">{{ t('dashboard.total') }}</div><div class="metric-value">{{ total }}</div></div><div class="metric-card"><div class="metric-label">{{ t('dashboard.latest') }}</div><div class="metric-value">{{ expenses|length }}</div></div><div class="metric-card"><div class="metric-label">{{ t('dashboard.categories') }}</div><div class="metric-value">{{ category_totals|length }}</div></div></div><div class="row g-3"><div class="col-lg-4"><div class="card h-100"><div class="card-body"><div class="app-section-title"><span class="soft-icon"><i class="fa-solid fa-clock-rotate-left"></i></span><h2 class="h5 mb-0">{{ t('dashboard.latest') }}</h2></div>{% if expenses %}<div class="list-group list-group-flush">{% for expense in expenses[:10] %}<div class="list-group-item px-0 d-flex justify-content-between align-items-center gap-3"><div class="d-flex align-items-center gap-3"><span class="soft-icon"><i class="fa-solid fa-receipt"></i></span><div><div class="fw-semibold">{{ expense.title }}</div><div class="small text-body-secondary">{{ expense.purchase_date }} · {{ expense.vendor }}</div></div></div><div class="text-end fw-semibold">{{ expense.amount }} {{ expense.currency }}</div></div>{% endfor %}</div>{% else %}<div class="empty-state"><i class="fa-solid fa-box-open"></i><div>{{ t('dashboard.empty') }}</div></div>{% endif %}</div></div></div><div class="col-lg-4"><div class="card h-100"><div class="card-body"><div class="app-section-title"><span class="soft-icon"><i class="fa-solid fa-chart-pie"></i></span><h2 class="h5 mb-0">{{ t('dashboard.categories') }}</h2></div><div class="chart-card"><canvas id="dashboard-category-chart"></canvas></div></div></div></div><div class="col-lg-4"><div class="card h-100"><div class="card-body"><div class="app-section-title"><span class="soft-icon"><i class="fa-solid fa-credit-card"></i></span><h2 class="h5 mb-0">{{ t('stats.payment_methods') }}</h2></div><div class="chart-card"><canvas id="dashboard-payment-chart"></canvas></div></div></div></div></div>{% endblock %}{% block scripts %}<script>window.dashboardCategoryData={{ chart_categories|tojson }};window.dashboardPaymentData={{ chart_payments|tojson }};</script>{% endblock %}