Redesign Destinataer create/edit form to mirror detail page layout

User requested the create form to look exactly like the detail page.
Now uses the same two-column table-based card layout with matching
card headers, gradient header bar, and field organization as the
Stammdaten tab on the detail page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
SysAdmin Agent
2026-03-11 22:11:17 +00:00
parent 8ae7bff38c
commit 8c528308bd

View File

@@ -5,242 +5,256 @@
{% block title %}{{ title }} - Stiftungsverwaltung{% endblock %} {% block title %}{{ title }} - Stiftungsverwaltung{% endblock %}
{% block content %} {% block content %}
<div class="container-fluid py-4"> <div class="container-fluid px-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3"> {# ── Header (mirrors detail page style) ── #}
<i class="fas fa-user-plus text-primary me-2"></i>{{ title }} <div class="card shadow-sm mb-4 border-0" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
</h1> <div class="card-body py-3">
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary btn-sm"> <div class="row align-items-center">
<i class="fas fa-arrow-left me-1"></i>Zurueck <div class="col-auto">
</a> <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width:56px;height:56px;font-size:1.4rem;">
<i class="fas fa-user-plus"></i>
</div>
</div>
<div class="col">
<h4 class="mb-1">{{ title }}</h4>
<div class="text-muted small">Alle Felder ausfuellen und speichern</div>
</div>
<div class="col-auto">
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary btn-sm">
<i class="fas fa-arrow-left me-1"></i>Zurueck
</a>
</div>
</div>
</div>
</div> </div>
<div class="row"> <form method="post" novalidate>
<div class="col-lg-8"> {% csrf_token %}
<form method="post" novalidate>
{% csrf_token %}
{# ── Persoenliche Informationen ── #} {% if form.errors %}
<div class="card shadow-sm mb-4"> <div class="alert alert-danger alert-dismissible fade show mb-3" role="alert">
<div class="card-header bg-dark text-white py-2"> <i class="fas fa-exclamation-triangle me-2"></i>Bitte korrigieren Sie die markierten Felder.
<i class="fas fa-user me-2"></i>Persoenliche Informationen <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div> </div>
<div class="card-body"> {% endif %}
<div class="row">
<div class="col-md-6 mb-3"> <div class="row g-3">
<label for="{{ form.vorname.id_for_label }}" class="form-label">{{ form.vorname.label }} *</label> {# ── Left Column ── #}
{{ form.vorname }} <div class="col-lg-6">
{% if form.vorname.errors %}<div class="invalid-feedback d-block">{{ form.vorname.errors.0 }}</div>{% endif %} {# Personal Data #}
</div> <div class="card shadow-sm mb-3">
<div class="col-md-6 mb-3"> <div class="card-header py-2"><i class="fas fa-user me-2 text-primary"></i><strong>Persoenliche Daten</strong></div>
<label for="{{ form.nachname.id_for_label }}" class="form-label">{{ form.nachname.label }} *</label> <div class="card-body py-2">
{{ form.nachname }} <table class="table table-sm table-borderless mb-0">
{% if form.nachname.errors %}<div class="invalid-feedback d-block">{{ form.nachname.errors.0 }}</div>{% endif %} <tbody>
</div> <tr>
<div class="col-md-6 mb-3"> <td class="text-muted" style="width:140px;">Vorname *</td>
<label for="{{ form.geburtsdatum.id_for_label }}" class="form-label">{{ form.geburtsdatum.label }}</label> <td>
{{ form.geburtsdatum }} {{ form.vorname }}
{% if form.geburtsdatum.errors %}<div class="invalid-feedback d-block">{{ form.geburtsdatum.errors.0 }}</div>{% endif %} {% if form.vorname.errors %}<div class="invalid-feedback d-block">{{ form.vorname.errors.0 }}</div>{% endif %}
</div> </td>
<div class="col-md-6 mb-3"> </tr>
<label for="{{ form.familienzweig.id_for_label }}" class="form-label">{{ form.familienzweig.label }}</label> <tr>
{{ form.familienzweig }} <td class="text-muted">Nachname *</td>
{% if form.familienzweig.errors %}<div class="invalid-feedback d-block">{{ form.familienzweig.errors.0 }}</div>{% endif %} <td>
</div> {{ form.nachname }}
</div> {% if form.nachname.errors %}<div class="invalid-feedback d-block">{{ form.nachname.errors.0 }}</div>{% endif %}
</td>
</tr>
<tr>
<td class="text-muted">Geburtsdatum</td>
<td>
{{ form.geburtsdatum }}
{% if form.geburtsdatum.errors %}<div class="invalid-feedback d-block">{{ form.geburtsdatum.errors.0 }}</div>{% endif %}
</td>
</tr>
<tr>
<td class="text-muted">Familienzweig</td>
<td>
{{ form.familienzweig }}
{% if form.familienzweig.errors %}<div class="invalid-feedback d-block">{{ form.familienzweig.errors.0 }}</div>{% endif %}
</td>
</tr>
<tr>
<td class="text-muted">Berufsgruppe</td>
<td>
{{ form.berufsgruppe }}
{% if form.berufsgruppe.errors %}<div class="invalid-feedback d-block">{{ form.berufsgruppe.errors.0 }}</div>{% endif %}
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
{# ── Kontaktinformationen ── #} {# Contact & Address #}
<div class="card shadow-sm mb-4"> <div class="card shadow-sm mb-3">
<div class="card-header bg-dark text-white py-2"> <div class="card-header py-2"><i class="fas fa-address-book me-2 text-info"></i><strong>Kontakt & Adresse</strong></div>
<i class="fas fa-address-book me-2"></i>Kontaktinformationen <div class="card-body py-2">
<table class="table table-sm table-borderless mb-0">
<tbody>
<tr>
<td class="text-muted" style="width:140px;">E-Mail</td>
<td>
{{ form.email }}
{% if form.email.errors %}<div class="invalid-feedback d-block">{{ form.email.errors.0 }}</div>{% endif %}
</td>
</tr>
<tr>
<td class="text-muted">Telefon</td>
<td>
{{ form.telefon }}
{% if form.telefon.errors %}<div class="invalid-feedback d-block">{{ form.telefon.errors.0 }}</div>{% endif %}
</td>
</tr>
<tr>
<td class="text-muted">IBAN</td>
<td>
{{ form.iban }}
{% if form.iban.errors %}<div class="invalid-feedback d-block">{{ form.iban.errors.0 }}</div>{% endif %}
</td>
</tr>
<tr>
<td class="text-muted">Strasse</td>
<td>
{{ form.strasse }}
{% if form.strasse.errors %}<div class="invalid-feedback d-block">{{ form.strasse.errors.0 }}</div>{% endif %}
</td>
</tr>
<tr>
<td class="text-muted">PLZ / Ort</td>
<td>
<div class="row g-2">
<div class="col-4">{{ form.plz }}</div>
<div class="col-8">{{ form.ort }}</div>
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>
<div class="card-body"> </div>
<div class="row"> </div>
<div class="col-md-6 mb-3">
<label for="{{ form.email.id_for_label }}" class="form-label">{{ form.email.label }}</label> {# ── Right Column ── #}
{{ form.email }} <div class="col-lg-6">
{% if form.email.errors %}<div class="invalid-feedback d-block">{{ form.email.errors.0 }}</div>{% endif %} {# Financial #}
</div> <div class="card shadow-sm mb-3">
<div class="col-md-6 mb-3"> <div class="card-header py-2"><i class="fas fa-euro-sign me-2 text-warning"></i><strong>Finanzen & Foerderung</strong></div>
<label for="{{ form.telefon.id_for_label }}" class="form-label">{{ form.telefon.label }}</label> <div class="card-body py-2">
{{ form.telefon }} <table class="table table-sm table-borderless mb-0">
{% if form.telefon.errors %}<div class="invalid-feedback d-block">{{ form.telefon.errors.0 }}</div>{% endif %} <tbody>
</div> <tr>
<div class="col-md-6 mb-3"> <td class="text-muted" style="width:180px;">Quartalsbetrag</td>
<label for="{{ form.iban.id_for_label }}" class="form-label">{{ form.iban.label }}</label> <td>{{ form.vierteljaehrlicher_betrag }}</td>
{{ form.iban }} </tr>
{% if form.iban.errors %}<div class="invalid-feedback d-block">{{ form.iban.errors.0 }}</div>{% endif %} <tr>
</div> <td class="text-muted">Monatl. Bezuege</td>
<div class="col-12 mb-3"> <td>{{ form.monatliche_bezuege }}</td>
<label for="{{ form.adresse.id_for_label }}" class="form-label">{{ form.adresse.label }}</label> </tr>
{{ form.adresse }} <tr>
{% if form.adresse.errors %}<div class="invalid-feedback d-block">{{ form.adresse.errors.0 }}</div>{% endif %} <td class="text-muted">Jaehrl. Einkommen</td>
</div> <td>{{ form.jaehrliches_einkommen }}</td>
</div> </tr>
<tr>
<td class="text-muted">Vermoegen</td>
<td>{{ form.vermoegen }}</td>
</tr>
<tr>
<td class="text-muted">Haushaltsgroesse</td>
<td>{{ form.haushaltsgroesse }}</td>
</tr>
<tr>
<td class="text-muted">Standardkonto</td>
<td>{{ form.standard_konto }}</td>
</tr>
<tr>
<td class="text-muted">Finanz. Notlage</td>
<td>
<div class="form-check">{{ form.finanzielle_notlage }}<label class="form-check-label" for="{{ form.finanzielle_notlage.id_for_label }}">Ja</label></div>
</td>
</tr>
<tr>
<td class="text-muted">Unterstuetzung best.</td>
<td>
<div class="form-check">{{ form.unterstuetzung_bestaetigt }}<label class="form-check-label" for="{{ form.unterstuetzung_bestaetigt.id_for_label }}">Ja</label></div>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
{# ── Berufliche Informationen ── #} {# Study & Prerequisites #}
<div class="card shadow-sm mb-4"> <div class="card shadow-sm mb-3">
<div class="card-header bg-dark text-white py-2"> <div class="card-header py-2"><i class="fas fa-graduation-cap me-2 text-secondary"></i><strong>Studium & Voraussetzungen</strong></div>
<i class="fas fa-briefcase me-2"></i>Berufliche Informationen <div class="card-body py-2">
</div> <table class="table table-sm table-borderless mb-0">
<div class="card-body"> <tbody>
<div class="row"> <tr>
<div class="col-md-6 mb-3"> <td class="text-muted" style="width:180px;">Abkoemmling gem. Satzung</td>
<label for="{{ form.berufsgruppe.id_for_label }}" class="form-label">{{ form.berufsgruppe.label }}</label> <td>
{{ form.berufsgruppe }} <div class="form-check">{{ form.ist_abkoemmling }}<label class="form-check-label" for="{{ form.ist_abkoemmling.id_for_label }}">Ja</label></div>
{% if form.berufsgruppe.errors %}<div class="invalid-feedback d-block">{{ form.berufsgruppe.errors.0 }}</div>{% endif %} </td>
</div> </tr>
<div class="col-md-6 mb-3"> <tr>
<label for="{{ form.ausbildungsstand.id_for_label }}" class="form-label">{{ form.ausbildungsstand.label }}</label> <td class="text-muted">Ausbildungsstand</td>
{{ form.ausbildungsstand }} <td>{{ form.ausbildungsstand }}</td>
{% if form.ausbildungsstand.errors %}<div class="invalid-feedback d-block">{{ form.ausbildungsstand.errors.0 }}</div>{% endif %} </tr>
</div> <tr>
<div class="col-12 mb-3"> <td class="text-muted">Institution</td>
<label for="{{ form.institution.id_for_label }}" class="form-label">{{ form.institution.label }}</label> <td>{{ form.institution }}</td>
{{ form.institution }} </tr>
{% if form.institution.errors %}<div class="invalid-feedback d-block">{{ form.institution.errors.0 }}</div>{% endif %} <tr>
</div> <td class="text-muted">Studiennachweis erf.</td>
<div class="col-12 mb-3"> <td>
<label for="{{ form.projekt_beschreibung.id_for_label }}" class="form-label">{{ form.projekt_beschreibung.label }}</label> <div class="form-check">{{ form.studiennachweis_erforderlich }}<label class="form-check-label" for="{{ form.studiennachweis_erforderlich.id_for_label }}">Ja</label></div>
{{ form.projekt_beschreibung }} </td>
{% if form.projekt_beschreibung.errors %}<div class="invalid-feedback d-block">{{ form.projekt_beschreibung.errors.0 }}</div>{% endif %} </tr>
</div> <tr>
</div> <td class="text-muted">Letzter Nachweis</td>
<td>{{ form.letzter_studiennachweis }}</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
{# ── Finanzielle Informationen ── #} {# Description & Notes #}
<div class="card shadow-sm mb-4"> <div class="card shadow-sm mb-3">
<div class="card-header bg-dark text-white py-2"> <div class="card-header py-2"><i class="fas fa-sticky-note me-2 text-secondary"></i><strong>Beschreibung & Notizen</strong></div>
<i class="fas fa-euro-sign me-2"></i>Finanzielle Informationen <div class="card-body py-2">
</div> <div class="mb-2">
<div class="card-body"> <small class="text-muted">Projektbeschreibung</small>
<div class="row"> {{ form.projekt_beschreibung }}
<div class="col-md-6 mb-3"> </div>
<label for="{{ form.jaehrliches_einkommen.id_for_label }}" class="form-label">{{ form.jaehrliches_einkommen.label }}</label> <div class="mb-2">
{{ form.jaehrliches_einkommen }} <small class="text-muted">Notizen</small>
{% if form.jaehrliches_einkommen.errors %}<div class="invalid-feedback d-block">{{ form.jaehrliches_einkommen.errors.0 }}</div>{% endif %} {{ form.notizen }}
</div> </div>
<div class="col-md-6 mb-3"> <div class="form-check">
<label for="{{ form.vermoegen.id_for_label }}" class="form-label">{{ form.vermoegen.label }}</label> {{ form.aktiv }}
{{ form.vermoegen }} <label class="form-check-label" for="{{ form.aktiv.id_for_label }}">{{ form.aktiv.label }}</label>
{% if form.vermoegen.errors %}<div class="invalid-feedback d-block">{{ form.vermoegen.errors.0 }}</div>{% endif %}
</div>
<div class="col-12 mb-3">
<div class="form-check">
{{ form.finanzielle_notlage }}
<label class="form-check-label" for="{{ form.finanzielle_notlage.id_for_label }}">{{ form.finanzielle_notlage.label }}</label>
</div>
{% if form.finanzielle_notlage.errors %}<div class="invalid-feedback d-block">{{ form.finanzielle_notlage.errors.0 }}</div>{% endif %}
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
{# ── Unterstuetzung & Auszahlung ── #} {# ── Save bar ── #}
<div class="card shadow-sm mb-4"> <div class="card shadow-sm mt-2 mb-4 border-0" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
<div class="card-header bg-dark text-white py-2"> <div class="card-body py-3">
<i class="fas fa-check-circle me-2"></i>Unterstuetzung & Auszahlung <div class="d-flex justify-content-between align-items-center">
</div> <a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary btn-sm">
<div class="card-body"> <i class="fas fa-times me-1"></i>Abbrechen
<div class="row">
<div class="col-md-6 mb-3">
<div class="form-check">
{{ form.ist_abkoemmling }}
<label class="form-check-label" for="{{ form.ist_abkoemmling.id_for_label }}">{{ form.ist_abkoemmling.label }}</label>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-check">
{{ form.unterstuetzung_bestaetigt }}
<label class="form-check-label" for="{{ form.unterstuetzung_bestaetigt.id_for_label }}">{{ form.unterstuetzung_bestaetigt.label }}</label>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.haushaltsgroesse.id_for_label }}" class="form-label">{{ form.haushaltsgroesse.label }}</label>
{{ form.haushaltsgroesse }}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.monatliche_bezuege.id_for_label }}" class="form-label">{{ form.monatliche_bezuege.label }}</label>
{{ form.monatliche_bezuege }}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.vierteljaehrlicher_betrag.id_for_label }}" class="form-label">Vierteljaehrlicher Betrag (&euro;)</label>
{{ form.vierteljaehrlicher_betrag }}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.standard_konto.id_for_label }}" class="form-label">{{ form.standard_konto.label }}</label>
{{ form.standard_konto }}
<div class="form-text">Standardkonto fuer vierteljaehrliche Vorauszahlungen</div>
</div>
</div>
</div>
</div>
{# ── Studiennachweis ── #}
<div class="card shadow-sm mb-4">
<div class="card-header bg-dark text-white py-2">
<i class="fas fa-graduation-cap me-2"></i>Studiennachweis
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-3">
<div class="form-check">
{{ form.studiennachweis_erforderlich }}
<label class="form-check-label" for="{{ form.studiennachweis_erforderlich.id_for_label }}">{{ form.studiennachweis_erforderlich.label }}</label>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.letzter_studiennachweis.id_for_label }}" class="form-label">{{ form.letzter_studiennachweis.label }}</label>
{{ form.letzter_studiennachweis }}
<div class="form-text">Stichtage: 15.03 und 15.09</div>
</div>
</div>
</div>
</div>
{# ── Status & Notizen ── #}
<div class="card shadow-sm mb-4">
<div class="card-header bg-dark text-white py-2">
<i class="fas fa-cog me-2"></i>Status und Notizen
</div>
<div class="card-body">
<div class="row">
<div class="col-12 mb-3">
<div class="form-check">
{{ form.aktiv }}
<label class="form-check-label" for="{{ form.aktiv.id_for_label }}">{{ form.aktiv.label }}</label>
</div>
{% if form.aktiv.errors %}<div class="invalid-feedback d-block">{{ form.aktiv.errors.0 }}</div>{% endif %}
</div>
<div class="col-12 mb-3">
<label for="{{ form.notizen.id_for_label }}" class="form-label">{{ form.notizen.label }}</label>
{{ form.notizen }}
{% if form.notizen.errors %}<div class="invalid-feedback d-block">{{ form.notizen.errors.0 }}</div>{% endif %}
</div>
</div>
</div>
</div>
<hr>
<div class="d-flex justify-content-between">
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-secondary">
<i class="fas fa-times me-2"></i>Abbrechen
</a> </a>
<button type="submit" class="btn btn-success"> <button type="submit" class="btn btn-success">
<i class="fas fa-save me-2"></i>Speichern <i class="fas fa-save me-1"></i>Speichern
</button> </button>
</div> </div>
</form> </div>
</div> </div>
</form>
<div class="col-lg-4">
{% help_box 'destinataer_new' user %}
</div>
</div>
</div> </div>
{% endblock %} {% endblock %}