Initial commit

templates/index.html

@@ -0,0 +1,110 @@
+{% 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 %}