111 lines
3.4 KiB
HTML
111 lines
3.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="dashboard">
|
|
<h1>Dashboard</h1>
|
|
|
|
<div class="dashboard-summary">
|
|
<div class="summary-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-euro-sign"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Gesamtausgaben</h3>
|
|
<p class="amount">{{ "%.2f"|format(total_expenses) }} €</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="summary-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Aktuelle Periode</h3>
|
|
<p>{{ now.strftime('%B %Y') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="summary-card">
|
|
<div class="card-icon">
|
|
<i class="fas fa-tags"></i>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3>Kategorien</h3>
|
|
<p>{{ categories|length }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-charts">
|
|
<div class="chart-container">
|
|
<h2>Ausgaben nach Kategorie</h2>
|
|
<div id="category-chart"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recent-expenses">
|
|
<h2>Neueste Ausgaben</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Datum</th>
|
|
<th>Beschreibung</th>
|
|
<th>Kategorie</th>
|
|
<th>Betrag</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for expense in expenses %}
|
|
<tr>
|
|
<td>{{ expense.date.strftime('%d.%m.%Y') }}</td>
|
|
<td>{{ expense.description }}</td>
|
|
<td>{{ expense.category.name }}</td>
|
|
<td class="amount">{{ "%.2f"|format(expense.amount) }} €</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="4" class="no-data">Keine Ausgaben vorhanden</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<div class="action-button">
|
|
<a href="{{ url_for('expenses') }}" class="button">Alle Ausgaben anzeigen</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Category pie chart
|
|
const categoryNames = {{ category_names|safe }};
|
|
const categoryAmounts = {{ category_amounts|safe }};
|
|
|
|
if (categoryNames.length > 0) {
|
|
const data = [{
|
|
values: categoryAmounts,
|
|
labels: categoryNames,
|
|
type: 'pie',
|
|
marker: {
|
|
colors: [
|
|
'#4e79a7', '#f28e2c', '#e15759', '#76b7b2',
|
|
'#59a14f', '#edc949', '#af7aa1', '#ff9da7',
|
|
'#9c755f', '#bab0ab'
|
|
]
|
|
}
|
|
}];
|
|
|
|
const layout = {
|
|
height: 400,
|
|
margin: { t: 0, b: 0, l: 0, r: 0 },
|
|
showlegend: true
|
|
};
|
|
|
|
Plotly.newPlot('category-chart', data, layout);
|
|
} else {
|
|
document.getElementById('category-chart').innerHTML = '<p class="no-data">Keine Daten verfügbar</p>';
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|