Matthias Hinrichs
266 lines
11 KiB
Plaintext
266 lines
11 KiB
Plaintext
package views
|
|
|
|
import (
|
|
"whereismymoney/internal/models"
|
|
"fmt"
|
|
)
|
|
|
|
templ Accounts(userName string, bankAccounts []models.BankAccount, depots []models.Depot) {
|
|
@Layout("Konten & Depots - WhereIsMyMoney") {
|
|
@Navigation(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">
|
|
<!-- Page Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900">Konten & Depots</h1>
|
|
<p class="mt-2 text-gray-600">Verwalte deine Bankkonten und Wertpapierdepots</p>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="mb-6 flex flex-wrap gap-4">
|
|
<button
|
|
onclick="showModal('bankAccountModal')"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
Bankkonto hinzufügen
|
|
</button>
|
|
<button
|
|
onclick="showModal('depotModal')"
|
|
class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
Depot hinzufügen
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Bankkonten Section -->
|
|
<div>
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-4">Bankkonten</h2>
|
|
if len(bankAccounts) == 0 {
|
|
<div class="bg-white rounded-lg shadow p-6 text-center">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
|
|
</svg>
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900">Keine Bankkonten</h3>
|
|
<p class="mt-2 text-gray-500">Füge dein erstes Bankkonto hinzu, um zu beginnen.</p>
|
|
</div>
|
|
} else {
|
|
<div class="space-y-4">
|
|
for _, account := range bankAccounts {
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h3 class="text-lg font-medium text-gray-900">{ account.Name }</h3>
|
|
<p class="text-sm text-gray-500">{ account.Bank }</p>
|
|
<p class="text-sm text-gray-500 capitalize">{ account.AccountType }</p>
|
|
if account.IBAN != "" {
|
|
<p class="text-sm text-gray-400 mt-1">{ account.IBAN }</p>
|
|
}
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-2xl font-bold text-gray-900">
|
|
{ fmt.Sprintf("%.2f", account.Balance) } €
|
|
</p>
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
Aktiv
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex justify-end space-x-2">
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
|
|
Bearbeiten
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-800 text-sm font-medium">
|
|
Löschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Depots Section -->
|
|
<div>
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-4">Depots</h2>
|
|
if len(depots) == 0 {
|
|
<div class="bg-white rounded-lg shadow p-6 text-center">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
|
</svg>
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900">Keine Depots</h3>
|
|
<p class="mt-2 text-gray-500">Füge dein erstes Depot hinzu, um zu beginnen.</p>
|
|
</div>
|
|
} else {
|
|
<div class="space-y-4">
|
|
for _, depot := range depots {
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h3 class="text-lg font-medium text-gray-900">{ depot.Name }</h3>
|
|
<p class="text-sm text-gray-500">{ depot.Broker }</p>
|
|
if depot.DepotNumber != "" {
|
|
<p class="text-sm text-gray-400 mt-1">Depot: { depot.DepotNumber }</p>
|
|
}
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-2xl font-bold text-gray-900">
|
|
{ fmt.Sprintf("%.2f", depot.TotalValue) } €
|
|
</p>
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
Aktiv
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex justify-end space-x-2">
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
|
|
Bearbeiten
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-800 text-sm font-medium">
|
|
Löschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bank Account Modal -->
|
|
<div id="bankAccountModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-medium text-gray-900">Bankkonto hinzufügen</h3>
|
|
</div>
|
|
<form action="/accounts/bank" method="POST" class="px-6 py-4">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="bank-name" class="block text-sm font-medium text-gray-700">Kontoname</label>
|
|
<input type="text" id="bank-name" name="name" required
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="z.B. Hauptkonto">
|
|
</div>
|
|
<div>
|
|
<label for="bank-bank-name" class="block text-sm font-medium text-gray-700">Bankname</label>
|
|
<input type="text" id="bank-bank-name" name="bank_name" required
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="z.B. Sparkasse">
|
|
</div>
|
|
<div>
|
|
<label for="bank-account-type" class="block text-sm font-medium text-gray-700">Kontotyp</label>
|
|
<select id="bank-account-type" name="account_type" required
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="">Wähle einen Typ</option>
|
|
<option value="checking">Girokonto</option>
|
|
<option value="savings">Sparkonto</option>
|
|
<option value="credit">Kreditkonto</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="bank-iban" class="block text-sm font-medium text-gray-700">IBAN (optional)</label>
|
|
<input type="text" id="bank-iban" name="iban"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="DE89 3704 0044 0532 0130 00">
|
|
</div>
|
|
<div>
|
|
<label for="bank-balance" class="block text-sm font-medium text-gray-700">Aktueller Kontostand</label>
|
|
<input type="number" id="bank-balance" name="balance" step="0.01"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="0.00">
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex justify-end space-x-3">
|
|
<button type="button" onclick="hideModal('bankAccountModal')"
|
|
class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-md">
|
|
Abbrechen
|
|
</button>
|
|
<button type="submit"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
|
|
Hinzufügen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Depot Modal -->
|
|
<div id="depotModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-medium text-gray-900">Depot hinzufügen</h3>
|
|
</div>
|
|
<form action="/accounts/depot" method="POST" class="px-6 py-4">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="depot-name" class="block text-sm font-medium text-gray-700">Depotname</label>
|
|
<input type="text" id="depot-name" name="name" required
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="z.B. Hauptdepot">
|
|
</div>
|
|
<div>
|
|
<label for="depot-broker-name" class="block text-sm font-medium text-gray-700">Broker</label>
|
|
<input type="text" id="depot-broker-name" name="broker_name" required
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="z.B. Trade Republic">
|
|
</div>
|
|
<div>
|
|
<label for="depot-number" class="block text-sm font-medium text-gray-700">Depotnummer (optional)</label>
|
|
<input type="text" id="depot-number" name="depot_number"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="123456789">
|
|
</div>
|
|
<div>
|
|
<label for="depot-value" class="block text-sm font-medium text-gray-700">Aktueller Gesamtwert</label>
|
|
<input type="number" id="depot-value" name="total_value" step="0.01"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="0.00">
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex justify-end space-x-3">
|
|
<button type="button" onclick="hideModal('depotModal')"
|
|
class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-md">
|
|
Abbrechen
|
|
</button>
|
|
<button type="submit"
|
|
class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md">
|
|
Hinzufügen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showModal(modalId) {
|
|
document.getElementById(modalId).classList.remove('hidden');
|
|
}
|
|
|
|
function hideModal(modalId) {
|
|
document.getElementById(modalId).classList.add('hidden');
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
if (event.target.classList.contains('bg-opacity-50')) {
|
|
event.target.classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
}
|
|
}
|