first commit
This commit is contained in:
Matthias Hinrichs
@@ -0,0 +1,138 @@
|
||||
package views
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"whereismymoney/internal/models"
|
||||
)
|
||||
|
||||
templ Dashboard(data *models.DashboardData) {
|
||||
@Layout("WhereIsMyMoney") {
|
||||
@Navigation(data.UserName)
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
<div class="px-4 py-6 sm:px-0">
|
||||
<!-- Welcome Header -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p class="mt-2 text-gray-600">Willkommen zurück, { data.UserName }!</p>
|
||||
</div>
|
||||
|
||||
<!-- Vermögensübersicht -->
|
||||
<div class="mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Depots</h3>
|
||||
<p class="text-3xl font-bold text-blue-600">€{ fmt.Sprintf("%.2f", data.AssetOverview.TotalDepotValue) }</p>
|
||||
<p class="text-sm text-gray-500">{ fmt.Sprintf("%d Depots", len(data.AssetOverview.Depots)) }</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Gesamtvermögen</h3>
|
||||
<p class="text-3xl font-bold text-purple-600">€{ fmt.Sprintf("%.2f", data.AssetOverview.TotalAssets) }</p>
|
||||
<p class="text-sm text-gray-500">Bank + Depot</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts und Statistiken -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
||||
<!-- Monatliche Entwicklung -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">Monatliche Entwicklung</h3>
|
||||
<div class="h-64" id="monthly-chart">
|
||||
<canvas id="monthlyChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Einnahmen vs Ausgaben Vergleich -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">Einnahmen vs Ausgaben</h3>
|
||||
<div class="h-64">
|
||||
<canvas id="incomeExpenseChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Verlaufs-Chart -->
|
||||
<div class="bg-white rounded-lg shadow p-6 mb-8">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">12-Monats Vorausschau</h3>
|
||||
<div class="h-80">
|
||||
<canvas id="trendChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detaillierte Übersichten -->
|
||||
<div class="grid grid-cols-1 gap-8 mb-8">
|
||||
<!-- Depot-Details -->
|
||||
if len(data.AssetOverview.Depots) > 0 {
|
||||
<div class="bg-white rounded-lg shadow">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h3 class="text-lg font-medium text-gray-900">Depots</h3>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-200">
|
||||
for _, depot := range data.AssetOverview.Depots {
|
||||
<div class="px-6 py-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">{ depot.Name }</p>
|
||||
<p class="text-sm text-gray-500">{ depot.Broker }</p>
|
||||
</div>
|
||||
<p class="text-lg font-semibold text-gray-900">€{ fmt.Sprintf("%.2f", depot.TotalValue) }</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Aktuelle Transaktionen -->
|
||||
if len(data.RecentTransactions) > 0 {
|
||||
<div class="bg-white rounded-lg shadow">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h3 class="text-lg font-medium text-gray-900">Aktuelle Transaktionen</h3>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-200">
|
||||
for _, transaction := range data.RecentTransactions {
|
||||
<div class="px-6 py-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">{ transaction.Description }</p>
|
||||
<div class="flex items-center text-sm text-gray-500 space-x-2">
|
||||
<span>{ transaction.Date.Format("02.01.2006") }</span>
|
||||
if transaction.Category != nil {
|
||||
<span>•</span>
|
||||
<span>{ transaction.Category.Name }</span>
|
||||
}
|
||||
if transaction.BankAccount != nil {
|
||||
<span>•</span>
|
||||
<span>{ transaction.BankAccount.Name }</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
if transaction.Type == "income" {
|
||||
<p class="text-lg font-semibold text-green-600">+€{ fmt.Sprintf("%.2f", transaction.Amount) }</p>
|
||||
} else {
|
||||
<p class="text-lg font-semibold text-red-600">-€{ fmt.Sprintf("%.2f", transaction.Amount) }</p>
|
||||
}
|
||||
<p class="text-xs text-gray-400">{ transaction.Type }</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="px-6 py-3 bg-gray-50 text-center">
|
||||
<a href="/transactions" class="text-sm text-blue-600 hover:text-blue-500">Alle Transaktionen anzeigen →</a>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- JavaScript für Charts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="/static/js/dashboard-charts.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user