ProjectApp/finance/templates/finance/overview.html

{% extends "base.html" %}

{% block title %}
{{ project.name }} - Finanzen
{% endblock %}

{% block header_title %}
Finanzen
{% endblock %}

{% block header_description %}
Einnahmen & Ausgaben
{% endblock %}


{% block content %}
{% load django_tables2 %}

<div class="mb-8">
    <div class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
            <div>
                <h2 class="text-lg font-bold">Aktionen</h2>
                <p class="text-slate-400 text-sm mt-1">Einnahmen und Ausgaben tracken</p>
            </div>

            <div class="flex flex-col sm:flex-row gap-2">
                <a href="{% url 'finance:add_income' project.id %}" class="btn btn-action-start">+ Einnahme</a>
                <a href="{% url 'finance:add_expense' project.id %}" class="btn btn-action-stop">+ Ausgabe</a>
            </div>
            
        </div>
    </div>
</div>

<div class="space-y-2 mb-8">
    <!-- ===================== -->
    <!-- FILTER CARD -->
    <!-- ===================== -->
    <div class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">

        <div class="mb-6">
            <h2 class="text-lg font-bold">Filter</h2>
            <p class="text-slate-400 text-sm mt-1">Zeitraum für aktuelle Auswertung</p>
        </div>

        <form method="get" class="flex flex-wrap gap-4 items-end">

            <div>
                <label class="text-sm text-slate-400">Start</label>
                <input type="date" name="start"
                       value="{{ request.GET.start|default_if_none:'' }}"
                       class="border rounded px-3 py-2">
            </div>

            <div>
                <label class="text-sm text-slate-400">Ende</label>
                <input type="date" name="end"
                       value="{{ request.GET.end|default_if_none:'' }}"
                       class="border rounded px-3 py-2">
            </div>

            <button class="btn btn-save">
                Anwenden
            </button>

        </form>

    </div>


    <!-- ===================== -->
    <!-- KPI FLOATING CARDS -->
    <!-- ===================== -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">

    <!-- Einnahmen -->
    <div class="p-6 rounded-xl  border border-green-200 dark:border-green-900 bg-white dark:bg-slate-800 transition">

        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-slate-500 dark:text-slate-400">
                    Einnahmen
                </p>

                <p class="text-3xl font-bold text-green-600 mt-2">
                    {{ total_income }} €
                </p>
            </div>

            <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-green-100 dark:bg-green-900/40">
                <span class="text-2xl text-green-600">
                    ↑
                </span>
            </div>
        </div>

    </div>


    <!-- Ausgaben -->
    <div class="p-6 rounded-xl  border border-red-200 dark:border-red-900 bg-white dark:bg-slate-800 transition">

        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-slate-500 dark:text-slate-400">
                    Ausgaben
                </p>

                <p class="text-3xl font-bold text-red-600 mt-2">
                    {{ total_expense }} €
                </p>
            </div>

            <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-red-100 dark:bg-red-900/40">
                <span class="text-2xl text-red-600">
                    ↓
                </span>
            </div>
        </div>

    </div>


    <!-- Gewinn -->
    <div class="p-6 rounded-xl  border border-blue-200 dark:border-blue-900 bg-white dark:bg-slate-800 transition">

        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-slate-500 dark:text-slate-400">
                    Gewinn
                </p>

                <p class="text-3xl font-bold text-blue-600 mt-2">
                    {{ total_profit }} €
                </p>
            </div>

            <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900/40">
                <span class="text-2xl text-blue-600">
                    €
                </span>
            </div>
        </div>

    </div>

</div>


    <!-- ===================== -->
    <!-- LIST CARDS -->
    <!-- ===================== -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">

        <!-- INCOME -->
        <div class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">

            <div class="pb-4">
                <h3 class="font-semibold text-green-600">Einnahmen</h3>
            </div>

            <div class="flex flex-col gap-2 max-h-80 overflow-y-auto hide-scrollbar">

                {% for i in incomes %}
                <div class="p-4 flex justify-between bg-slate-100 dark:bg-slate-700 rounded-xl">
                    <div>
                        <p class="font-medium text-green-600">+{{ i.amount }} € {{ i.name }}</p>
                        <p class="text-slate-400 text-sm mt-1">{{ i.date|date:"d.m.Y" }} · {{ i.category }}</p>
                    </div>
                </div>
                {% empty %}
                <div class="bg-white dark:bg-slate-800 border border-slate-500 rounded-xl p-6 text-slate-500">Keine Einnahmen</div>
                {% endfor %}

            </div>

        </div>


        <!-- EXPENSE -->
        <div class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">

            <div class="pb-4">
                <h3 class="font-semibold text-red-600">Ausgaben</h3>
            </div>

            <div class="flex flex-col gap-2 max-h-80 overflow-y-auto hide-scrollbar">

                {% for e in expenses %}
                <div class="p-4 flex justify-between bg-slate-100 dark:bg-slate-700 rounded-xl">
                    <div>
                        <p class="font-medium text-red-600">-{{ e.amount }} € {{ e.name }}</p>
                        <p class="text-slate-400 text-sm mt-1">{{ e.date|date:"d.m.Y" }} · {{ e.category }}</p>
                    </div>
                </div>
                {% empty %}
                <div class="bg-white dark:bg-slate-800 border border-slate-500 rounded-xl p-6 text-slate-500">Keine Ausgaben</div>
                {% endfor %}

            </div>

        </div>

    </div>

</div>


<div class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">

    <div class="mb-6">
        <h2 class="text-lg font-bold">
            Zeitraum-Analyse
        </h2>

        <p class="text-slate-400 text-sm mt-1">
            Aggregierte Auswertung nach Zeitraum
        </p>
    </div>


    <div class="flex gap-2 mb-6">

        <a href="?period=year"
           class="px-3 py-1 rounded border {% if period == 'year' %}bg-slate-900 text-white{% endif %}">
            Jahr
        </a>

        <a href="?period=month"
           class="px-3 py-1 rounded border {% if period == 'month' %}bg-slate-900 text-white{% endif %}">
            Monat
        </a>

        <a href="?period=week"
           class="px-3 py-1 rounded border {% if period == 'week' %}bg-slate-900 text-white{% endif %}">
            Woche
        </a>

        <a href="?period=day"
           class="px-3 py-1 rounded border {% if period == 'day' %}bg-slate-900 text-white{% endif %}">
            Tag
        </a>

    </div>


    <div class="overflow-x-auto rounded-xl">

        {% render_table table %}

    </div>

</div>

{% endblock %}