| {% extends "base.html" %} |
| {% block title %}Import - FireTracker{% endblock %} |
| {% block content %} |
| <div class="max-w-4xl space-y-6"> |
| <div> |
| <h1 class="text-2xl font-bold">Kontoauszug importieren</h1> |
| <p class="text-slate-400 mt-1">CSV hochladen — Sparkasse, ING, DKB, Comdirect, N26</p> |
| </div> |
|
|
| <div class="bg-slate-800 rounded-xl p-6 border border-slate-700"> |
| <form action="/api/import/csv" method="POST" enctype="multipart/form-data" class="space-y-4"> |
| <div> |
| <label class="block text-sm text-slate-400 mb-2">CSV-Datei</label> |
| <input type="file" name="file" accept=".csv" required |
| class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white file:mr-4 file:py-1 file:px-4 file:rounded-lg file:border-0 file:bg-green-600 file:text-white file:cursor-pointer"> |
| </div> |
| <div> |
| <label class="block text-sm text-slate-400 mb-2">Bank-Format</label> |
| <select name="bank_format" class="bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white focus:border-green-400 outline-none"> |
| <option value="auto">Automatisch erkennen</option> |
| <option value="sparkasse">Sparkasse</option> |
| <option value="ing">ING</option> |
| <option value="dkb">DKB</option> |
| <option value="comdirect">Comdirect</option> |
| <option value="n26">N26</option> |
| </select> |
| </div> |
| <button type="submit" class="bg-blue-600 hover:bg-blue-500 text-white font-medium px-6 py-2 rounded-lg transition"> |
| Analysieren |
| </button> |
| </form> |
| </div> |
|
|
| {% if transactions is defined and transactions %} |
| <div class="bg-slate-800 rounded-xl p-6 border border-green-500/30"> |
| <h2 class="text-lg font-semibold mb-4">Ergebnis: {{ count }} Transaktionen</h2> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> |
| <div class="bg-slate-700/50 rounded-lg p-4"> |
| <p class="text-xs text-slate-400">Einnahmen</p> |
| <p class="text-xl font-bold text-green-400">{{ "{:,.2f}".format(total_income) }} EUR</p> |
| </div> |
| <div class="bg-slate-700/50 rounded-lg p-4"> |
| <p class="text-xs text-slate-400">Ausgaben</p> |
| <p class="text-xl font-bold text-red-400">{{ "{:,.2f}".format(total_expenses) }} EUR</p> |
| </div> |
| <div class="bg-slate-700/50 rounded-lg p-4"> |
| <p class="text-xs text-slate-400">Netto</p> |
| <p class="text-xl font-bold {% if net >= 0 %}text-green-400{% else %}text-red-400{% endif %}">{{ "{:,.2f}".format(net) }} EUR</p> |
| </div> |
| <div class="bg-slate-700/50 rounded-lg p-4"> |
| <p class="text-xs text-slate-400">Geschaetzte mtl. Ausgaben</p> |
| <p class="text-xl font-bold text-yellow-400">{{ "{:,.0f}".format(monthly_estimate) }} EUR</p> |
| </div> |
| </div> |
|
|
| <details class="mt-4"> |
| <summary class="cursor-pointer text-sm text-slate-400 hover:text-slate-300">Alle Transaktionen anzeigen</summary> |
| <div class="mt-3 max-h-96 overflow-y-auto"> |
| <table class="w-full text-sm"> |
| <thead class="text-slate-400 border-b border-slate-600"> |
| <tr> |
| <th class="text-left py-2">Datum</th> |
| <th class="text-left py-2">Beschreibung</th> |
| <th class="text-right py-2">Betrag</th> |
| </tr> |
| </thead> |
| <tbody> |
| {% for t in transactions[:100] %} |
| <tr class="border-b border-slate-700/50"> |
| <td class="py-1.5 text-slate-400">{{ t.date }}</td> |
| <td class="py-1.5">{{ t.description[:50] }}</td> |
| <td class="py-1.5 text-right {% if t.amount >= 0 %}text-green-400{% else %}text-red-400{% endif %}"> |
| {{ "{:,.2f}".format(t.amount) }} EUR |
| </td> |
| </tr> |
| {% endfor %} |
| </tbody> |
| </table> |
| </div> |
| </details> |
| </div> |
| {% endif %} |
| </div> |
| {% endblock %} |
|
|
