design installed

CLAUDE.md

@@ -0,0 +1,81 @@
+# Projektkonventionen
+
+## Architektur: Actions (Request-Command-Response)
+
+Jede fachliche Operation wird in eine eigene Action ausgelagert, die aus drei Klassen besteht.
+Pfad: `app/Domains/{Domain}/Actions/{ActionName}/`
+
+### Struktur
+{ActionName}Request.php → Eingabedaten (Konstruktor oder Factory-Methoden) {ActionName}Command.php → Logik, ruft execute(): {ActionName}Response auf {ActionName}Response.php → Rückgabedaten (public Properties)
+
+
+### Regeln
+- Der Controller enthält **keine** fachliche Logik – nur Absicherung, Action-Aufruf und HTTP-Response
+- Commands sind nicht statisch und werden immer instanziiert
+- Hat ein Request mehrere Varianten, werden **Factory-Methoden** (`forX()`) statt mehrerer Konstruktoren verwendet
+- Aufrufreihenfolge im Controller: `new Request → new Command(request) → command->execute() → Response verwenden`
+
+---
+
+## Controller
+
+- Alle Controller erben von `App\Scopes\CommonController`
+- `CommonController` stellt folgende Repositories bereit (keine eigene Instanziierung nötig):
+    - `$this->eventParticipants` → `EventParticipantRepository`
+    - `$this->events` → `EventRepository`
+    - `$this->invoices` → `InvoiceRepository`
+    - `$this->costUnits` → `CostUnitRepository`
+    - `$this->users` → `UserRepository`
+    - `$this->tenant` → aktueller `Tenant`
+
+- Die Controller besitzen ausschließlich eine __invoke() - Funktion
+- Für die Speichern-Actions werden separate Controller-Klassen erstellt (z. B. `StoreEventParticipantController`)
+---
+
+## Repositories
+
+- Datenbankzugriffe gehören **immer** ins Repository, nie direkt in Controller oder Actions
+- Sicherheitschecks (z. B. „gehört diese Teilnahme dem eingeloggten User?") werden als eigene Repository-Methoden gekapselt
+- Tenant-Filter: `app('tenant')->slug`
+- Eingeloggter User: `auth()->user()`
+
+---
+
+## Models / Ressourcen
+
+- Models erben von `App\Scopes\InstancedModel` (mit globalem `SiteScope`)
+- `$model->toResource()->toArray($request)` liefert das aufbereitete Array über die zugehörige Resource-Klasse
+- Resource-Klassen liegen in `app/Resources/{ModelName}Resource.php`
+
+---
+
+## Tenant
+
+- Der aktuelle Tenant ist per `app('tenant')` verfügbar (gesetzt durch `IdentifyTenant`-Middleware)
+- Tenant-Slug: `app('tenant')->slug`
+- Jede tenant-spezifische DB-Abfrage filtert auf `['tenant' => app('tenant')->slug]`
+
+---
+
+## Routing
+
+- API-Routen liegen in `app/Domains/{Domain}/Routes/api.php`
+- Alle Routen sind in `IdentifyTenant::class`-Middleware gewrappt
+- Authentifizierte Routen zusätzlich in `['auth']`-Middleware
+
+---
+
+## Mails
+
+- Mails erben von `Illuminate\Mail\Mailable`
+- Attachments werden über `Attachment::fromData(fn () => $content, $filename)->withMime(...)` angehängt
+- Werden Daten sowohl in `content()` als auch in `attachments()` benötigt, wird eine **private Hilfsmethode mit Lazy-Caching** verwendet (einmaliges Berechnen, Ergebnis in private Property speichern)
+- Blade-Templates referenzieren Mail-Attachments per `cid:`-Link: `<a href="cid:{{ $filename }}">...</a>`
+
+## Actions
+ - Die Actions sind in `app/Domains/{Domain}/Actions/{ActionName}/`-Verzeichnissen organisiert
+ - Jede Action besitzt einen Request, einen Command und einen Response 
+ - Der Request besitzt auschließlich einen Konstruktor, der die notwendigen Parameter annimmt
+ - Die Response-Klasse enthält ausschließlich die notwendigen Daten für die Antwort
+ - Die Action-Klasse enthält die Logik für die Verarbeitung der Anfrage und die Generierung der Antwort
+ - Die Logik wird in einer execute() - Funktion innerhalb des Commands impplementiert. Private Funktionen, für ausgelagerte Prozesse sind zulässig, wenn der Code damit lesbarer wird.

app/Domains/Dashboard/Views/Dashboard.vue

@@ -1,12 +1,478 @@
 <script setup>
 import AppLayout from '@/layouts/AppLayout.vue'
-import { ref } from 'vue'
 
-const message = ref('Hallo Welt')
+const documentTiles = [
+    {
+        label: 'Schulbefreiung erstellen',
+        description: 'Erstellt die notwendigen Schulbefreiungsformulare für Veranstaltungen.',
+        icon: 'graduation-cap',
+        color: '#e74c3c',
+        href: '/schulbefreiung',
+    },
+    {
+        label: 'Rechnung erstellen',
+        description: 'Erstellt eine Rechnung nach BdP-Vorlage.',
+        icon: 'file-invoice',
+        color: '#27ae60',
+        href: '/rechnung',
+    },
+    {
+        label: 'Spendenquittung erstellen',
+        description: 'Erstellt eine Spendenquittung für Einzelspenden.',
+        icon: 'heart',
+        color: '#c0397e',
+        href: '/spendenquittung',
+    },
+    {
+        label: 'Teilnahmebescheinigung erstellen',
+        description: 'Erstellt eine Teilnahmebescheinigung.',
+        icon: 'certificate',
+        color: '#e67e22',
+        href: '/teilnahmebescheinigung',
+    },
+]
+
+const externalApps = [
+    {
+        name: 'Mereba',
+        description: 'Mitgliederverwaltung des BdP Landesverbands.',
+        icon: 'arrow-up-right-from-square',
+        color: '#1d4899',
+        href: '#',
+    },
+    {
+        name: 'EFZ-Check',
+        description: 'Einrichtung und Prüfung des erweiterten Führungszeugnisses.',
+        icon: 'certificate',
+        color: '#27ae60',
+        href: '#',
+    },
+]
+
+const dummyTile = {
+    label: 'Dummy',
+    description: 'Platzhalter-Kachel für zukünftige Inhalte.',
+    icon: 'cube',
+    color: '#1d4899',
+    href: '/dummy',
+}
 </script>
 
 <template>
-    <AppLayout title="Dashboard">
+    <AppLayout title="Startseite">
-        <h2>{{ message }}</h2>
+        <div class="dashboard">
+
+            <!-- ── Hero Banner ── -->
+            <div class="hero">
+                <svg class="hero-svg" viewBox="0 0 1200 185"
+                     preserveAspectRatio="xMidYMid slice"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                        <linearGradient id="hero-sky" x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="0%"   stop-color="#9ccae0"/>
+                            <stop offset="100%" stop-color="#d8eef8"/>
+                        </linearGradient>
+                    </defs>
+
+                    <!-- Himmel -->
+                    <rect width="1200" height="185" fill="url(#hero-sky)"/>
+
+                    <!--
+                      Jeder Berg ist ein Polygon mit vielen Zwischenpunkten –
+                      leicht unregelmäßige Abstände erzeugen organische Hänge.
+                      Die Schneekappen folgen denselben Punkten entlang der Silhouette.
+                    -->
+
+                    <!-- Berg 1: hinten, hellster -->
+                    <polygon fill="#a8c8dc" points="
+                        150,185
+                        222,160  298,126  362,98   416,70   458,50   492,36   516,28   524,32
+                        542,27   558,34   594,50   638,72   692,102  750,136  808,164  860,185"/>
+                    <!-- Schnee 1: folgt Hangpunkten, Abschluss bei y≈68 -->
+                    <polygon fill="white" points="
+                        421,68
+                        458,50  492,36  516,28  524,32  542,27  558,34  594,50
+                        624,68"/>
+
+                    <!-- Berg 2: Mitte -->
+                    <polygon fill="#6090b8" points="
+                        340,185
+                        414,158  490,126  558,94   612,64   648,42   668,26   680,18
+                        690,16   702,20   722,34   758,56   802,86   858,118  915,150  968,170  1020,185"/>
+                    <!-- Schnee 2 -->
+                    <polygon fill="white" points="
+                        616,60
+                        648,42  668,26  680,18  690,16  702,20  722,34  758,56
+                        762,60"/>
+
+                    <!-- Berg 3: vorne, dunkelster -->
+                    <polygon fill="#3868a2" points="
+                        560,185
+                        638,153  708,118  766,86   816,56   852,32   870,16   880,6
+                        892,12   920,34   958,64  1002,98  1058,134  1115,163  1162,179  1200,185"/>
+                    <!-- Schnee 3 -->
+                    <polygon fill="white" points="
+                        818,53
+                        852,32  870,16  880,6  892,12  920,34  958,64
+                        962,64  942,53"/>
+
+                    <!-- Waldstreifen am Fuß (rechts) -->
+                    <rect x="655" y="170" width="545" height="15" fill="#1d3c22"/>
+
+                    <!-- Tannen: Wipfel + Schürze, leicht versetzt in Höhe -->
+                    <g fill="#182e1a">
+                        <polygon points="672,167 663,182 681,182"/>
+                        <polygon points="672,175 661,185 683,185"/>
+
+                        <polygon points="697,163 687,179 707,179"/>
+                        <polygon points="697,171 685,185 709,185"/>
+
+                        <polygon points="723,166 713,182 733,182"/>
+                        <polygon points="723,174 711,185 735,185"/>
+
+                        <polygon points="749,161 738,178 760,178"/>
+                        <polygon points="749,170 737,185 761,185"/>
+
+                        <polygon points="776,164 765,181 787,181"/>
+                        <polygon points="776,172 763,185 789,185"/>
+
+                        <polygon points="803,160 791,178 815,178"/>
+                        <polygon points="803,169 789,185 817,185"/>
+
+                        <polygon points="830,163 818,180 842,180"/>
+                        <polygon points="830,171 816,185 844,185"/>
+
+                        <polygon points="858,161 845,179 871,179"/>
+                        <polygon points="858,169 843,185 873,185"/>
+
+                        <polygon points="886,164 873,181 899,181"/>
+                        <polygon points="886,172 871,185 901,185"/>
+
+                        <polygon points="914,161 900,179 928,179"/>
+                        <polygon points="914,170 898,185 930,185"/>
+
+                        <polygon points="942,164 928,181 956,181"/>
+                        <polygon points="942,172 926,185 958,185"/>
+
+                        <polygon points="970,162 956,179 984,179"/>
+                        <polygon points="970,171 954,185 986,185"/>
+                    </g>
+                </svg>
+
+                <!-- Text overlay -->
+                <div class="hero-text">
+                    <h1 class="hero-title">Willkommen im NEXUS!</h1>
+                    <p class="hero-sub">Deine zentrale Plattform für Dokumente, Tools und Anwendungen.</p>
+                </div>
+            </div>
+
+            <!-- ── Dokumente erstellen ── -->
+            <section class="section">
+                <div class="section-header">
+                    <h2 class="section-title">Dokumente erstellen</h2>
+                    <a href="#" class="section-link">
+                        Alle anzeigen <font-awesome-icon icon="chevron-right" />
+                    </a>
+                </div>
+
+                <div class="doc-grid">
+                    <a v-for="tile in documentTiles" :key="tile.href" :href="tile.href" class="doc-tile">
+                        <div class="doc-tile-top">
+                            <div class="doc-icon-wrap" :style="{ background: tile.color + '18', color: tile.color }">
+                                <font-awesome-icon :icon="tile.icon" />
+                            </div>
+                        </div>
+                        <div class="doc-tile-body">
+                            <p class="doc-title">{{ tile.label }}</p>
+                            <p class="doc-desc">{{ tile.description }}</p>
+                        </div>
+                    </a>
+                </div>
+            </section>
+
+            <!-- ── Weitere Anwendungen ── -->
+            <section class="section">
+                <div class="section-header">
+                    <h2 class="section-title">Weitere Anwendungen</h2>
+                    <a href="#" class="section-link">
+                        Alle anzeigen <font-awesome-icon icon="chevron-right" />
+                    </a>
+                </div>
+
+                <div class="app-list">
+                    <div v-for="app in externalApps" :key="app.name" class="app-card">
+                        <div class="app-icon" :style="{ background: app.color + '18', color: app.color }">
+                            <font-awesome-icon :icon="app.icon" />
+                        </div>
+                        <div class="app-info">
+                            <p class="app-name">{{ app.name }}</p>
+                            <p class="app-desc">{{ app.description }}</p>
+                        </div>
+                        <a :href="app.href" target="_blank" rel="noopener" class="app-open-btn">
+                            <span class="status-dot"></span>
+                            Offen
+                            <font-awesome-icon icon="arrow-up-right-from-square" class="open-icon" />
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            <!-- ── Dummy ── -->
+            <section class="section">
+                <div class="section-header">
+                    <h2 class="section-title">Weitere Module</h2>
+                </div>
+
+                <div class="doc-grid">
+                    <a :href="dummyTile.href" class="doc-tile">
+                        <div class="doc-tile-top">
+                            <div class="doc-icon-wrap" :style="{ background: dummyTile.color + '18', color: dummyTile.color }">
+                                <font-awesome-icon :icon="dummyTile.icon" />
+                            </div>
+                        </div>
+                        <div class="doc-tile-body">
+                            <p class="doc-title">{{ dummyTile.label }}</p>
+                            <p class="doc-desc">{{ dummyTile.description }}</p>
+                        </div>
+                    </a>
+
+                </div>
+            </section>
+
+        </div>
     </AppLayout>
 </template>
+
+<style scoped>
+.dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+}
+
+/* ── Hero Banner ── */
+.hero {
+    position: relative;
+    width: 100%;
+    height: 190px;
+    border-radius: 14px;
+    overflow: hidden;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
+}
+
+.hero-svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.hero-text {
+    position: absolute;
+    left: 36px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    max-width: 420px;
+}
+
+.hero-title {
+    margin: 0 0 8px;
+    font-size: 1.8rem;
+    font-weight: 800;
+    color: #0f2d5e;
+    text-shadow: 0 1px 3px rgba(255,255,255,0.6);
+    line-height: 1.15;
+}
+
+.hero-sub {
+    margin: 0;
+    font-size: 0.9rem;
+    color: #1c3a6b;
+    font-weight: 500;
+    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
+}
+
+/* ── Section ── */
+.section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 14px;
+}
+
+.section-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #111827;
+}
+
+.section-link {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 0.83rem;
+    font-weight: 500;
+    color: #1d4899;
+    text-decoration: none;
+}
+
+.section-link:hover { text-decoration: underline; }
+
+/* ── Document tiles (white cards) ── */
+.doc-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 14px;
+}
+
+.doc-tile {
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid #f0f0f0;
+    transition: box-shadow 0.2s, transform 0.15s;
+}
+
+.doc-tile:hover {
+    box-shadow: 0 6px 20px rgba(0,0,0,0.11);
+    transform: translateY(-2px);
+}
+
+.doc-tile-top {
+    padding: 18px 16px 12px;
+}
+
+.doc-icon-wrap {
+    width: 54px;
+    height: 54px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.6rem;
+}
+
+.doc-tile-body {
+    padding: 6px 16px 18px;
+    flex: 1;
+}
+
+.doc-title {
+    margin: 0 0 5px;
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: #111827;
+    line-height: 1.35;
+}
+
+.doc-desc {
+    margin: 0;
+    font-size: 0.78rem;
+    color: #6b7280;
+    line-height: 1.5;
+}
+
+/* ── External app cards ── */
+.app-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.app-card {
+    background: #fff;
+    border-radius: 12px;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 16px 20px;
+    transition: box-shadow 0.2s;
+}
+
+.app-card:hover {
+    box-shadow: 0 4px 14px rgba(0,0,0,0.09);
+}
+
+.app-icon {
+    width: 46px;
+    height: 46px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    flex-shrink: 0;
+}
+
+.app-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.app-name {
+    margin: 0 0 3px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #111827;
+}
+
+.app-desc {
+    margin: 0;
+    font-size: 0.78rem;
+    color: #6b7280;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.app-open-btn {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding: 7px 16px;
+    background: #dcfce7;
+    color: #16a34a;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-decoration: none;
+    white-space: nowrap;
+    flex-shrink: 0;
+    transition: background 0.15s;
+}
+
+.app-open-btn:hover { background: #bbf7d0; }
+
+.status-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #22c55e;
+    flex-shrink: 0;
+}
+
+.open-icon { font-size: 0.72rem; }
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+    .hero { height: 160px; }
+    .hero-title { font-size: 1.4rem; }
+    .doc-grid { grid-template-columns: 1fr 1fr; }
+    .app-card { flex-wrap: wrap; }
+}
+
+@media (max-width: 480px) {
+    .hero { height: 140px; }
+    .hero-text { left: 20px; }
+    .hero-title { font-size: 1.2rem; }
+    .doc-grid { grid-template-columns: 1fr; }
+}
+</style>

app/Domains/Dummy/Controllers/DummyController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Domains\Dummy\Controllers;
+
+use App\Providers\InertiaProvider;
+use Inertia\Response;
+
+class DummyController
+{
+    public function __invoke(): Response
+    {
+        return (new InertiaProvider('Dummy/Dummy', []))->render();
+    }
+}

app/Domains/Dummy/Routes/web.php

@@ -0,0 +1,6 @@
+<?php
+
+use App\Domains\Dummy\Controllers\DummyController;
+use Illuminate\Support\Facades\Route;
+
+Route::get('/dummy', DummyController::class)->name('dummy');

app/Domains/Dummy/Views/Dummy.vue

@@ -0,0 +1,54 @@
+<script setup>
+import AppLayout from '@/layouts/AppLayout.vue'
+</script>
+
+<template>
+    <AppLayout title="Dummy">
+        <div class="placeholder">
+            <div class="placeholder-icon-wrap" style="background: #1d4899;">
+                <font-awesome-icon icon="cube" class="placeholder-icon" />
+            </div>
+            <h1 class="placeholder-title">Dummy</h1>
+            <p class="placeholder-text">Platzhalter-Seite für zukünftige Inhalte.</p>
+        </div>
+    </AppLayout>
+</template>
+
+<style scoped>
+.placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+    gap: 16px;
+    text-align: center;
+}
+
+.placeholder-icon-wrap {
+    width: 80px;
+    height: 80px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.placeholder-icon {
+    font-size: 2.2rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.placeholder-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #111827;
+}
+
+.placeholder-text {
+    margin: 0;
+    color: #6b7280;
+    font-size: 0.95rem;
+}
+</style>

app/Domains/Rechnung/Controllers/RechnungController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Domains\Rechnung\Controllers;
+
+use App\Providers\InertiaProvider;
+use Inertia\Response;
+
+class RechnungController
+{
+    public function __invoke(): Response
+    {
+        return (new InertiaProvider('Rechnung/Rechnung', []))->render();
+    }
+}

app/Domains/Rechnung/Routes/web.php

@@ -0,0 +1,6 @@
+<?php
+
+use App\Domains\Rechnung\Controllers\RechnungController;
+use Illuminate\Support\Facades\Route;
+
+Route::get('/rechnung', RechnungController::class)->name('rechnung');

app/Domains/Rechnung/Views/Rechnung.vue

@@ -0,0 +1,54 @@
+<script setup>
+import AppLayout from '@/layouts/AppLayout.vue'
+</script>
+
+<template>
+    <AppLayout title="Rechnung erstellen">
+        <div class="placeholder">
+            <div class="placeholder-icon-wrap" style="background: #27ae60;">
+                <font-awesome-icon icon="file-invoice" class="placeholder-icon" />
+            </div>
+            <h1 class="placeholder-title">Rechnung erstellen</h1>
+            <p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
+        </div>
+    </AppLayout>
+</template>
+
+<style scoped>
+.placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+    gap: 16px;
+    text-align: center;
+}
+
+.placeholder-icon-wrap {
+    width: 80px;
+    height: 80px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.placeholder-icon {
+    font-size: 2.2rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.placeholder-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #111827;
+}
+
+.placeholder-text {
+    margin: 0;
+    color: #6b7280;
+    font-size: 0.95rem;
+}
+</style>

app/Domains/Schulbefreiung/Controllers/SchulbefreiungController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Domains\Schulbefreiung\Controllers;
+
+use App\Providers\InertiaProvider;
+use Inertia\Response;
+
+class SchulbefreiungController
+{
+    public function __invoke(): Response
+    {
+        return (new InertiaProvider('Schulbefreiung/Schulbefreiung', []))->render();
+    }
+}

app/Domains/Schulbefreiung/Routes/web.php

@@ -0,0 +1,6 @@
+<?php
+
+use App\Domains\Schulbefreiung\Controllers\SchulbefreiungController;
+use Illuminate\Support\Facades\Route;
+
+Route::get('/schulbefreiung', SchulbefreiungController::class)->name('schulbefreiung');

app/Domains/Schulbefreiung/Views/Schulbefreiung.vue

@@ -0,0 +1,54 @@
+<script setup>
+import AppLayout from '@/layouts/AppLayout.vue'
+</script>
+
+<template>
+    <AppLayout title="Schulbefreiung erstellen">
+        <div class="placeholder">
+            <div class="placeholder-icon-wrap" style="background: #e74c3c;">
+                <font-awesome-icon icon="graduation-cap" class="placeholder-icon" />
+            </div>
+            <h1 class="placeholder-title">Schulbefreiung erstellen</h1>
+            <p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
+        </div>
+    </AppLayout>
+</template>
+
+<style scoped>
+.placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+    gap: 16px;
+    text-align: center;
+}
+
+.placeholder-icon-wrap {
+    width: 80px;
+    height: 80px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.placeholder-icon {
+    font-size: 2.2rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.placeholder-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #111827;
+}
+
+.placeholder-text {
+    margin: 0;
+    color: #6b7280;
+    font-size: 0.95rem;
+}
+</style>

app/Domains/Spendenquittung/Controllers/SpendenquittungController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Domains\Spendenquittung\Controllers;
+
+use App\Providers\InertiaProvider;
+use Inertia\Response;
+
+class SpendenquittungController
+{
+    public function __invoke(): Response
+    {
+        return (new InertiaProvider('Spendenquittung/Spendenquittung', []))->render();
+    }
+}

app/Domains/Spendenquittung/Routes/web.php

@@ -0,0 +1,6 @@
+<?php
+
+use App\Domains\Spendenquittung\Controllers\SpendenquittungController;
+use Illuminate\Support\Facades\Route;
+
+Route::get('/spendenquittung', SpendenquittungController::class)->name('spendenquittung');

app/Domains/Spendenquittung/Views/Spendenquittung.vue

@@ -0,0 +1,54 @@
+<script setup>
+import AppLayout from '@/layouts/AppLayout.vue'
+</script>
+
+<template>
+    <AppLayout title="Spendenquittung erstellen">
+        <div class="placeholder">
+            <div class="placeholder-icon-wrap" style="background: #c0397e;">
+                <font-awesome-icon icon="heart" class="placeholder-icon" />
+            </div>
+            <h1 class="placeholder-title">Spendenquittung erstellen</h1>
+            <p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
+        </div>
+    </AppLayout>
+</template>
+
+<style scoped>
+.placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+    gap: 16px;
+    text-align: center;
+}
+
+.placeholder-icon-wrap {
+    width: 80px;
+    height: 80px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.placeholder-icon {
+    font-size: 2.2rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.placeholder-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #111827;
+}
+
+.placeholder-text {
+    margin: 0;
+    color: #6b7280;
+    font-size: 0.95rem;
+}
+</style>

app/Domains/Teilnahmebescheinigung/Controllers/TeilnahmebescheinigungController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Domains\Teilnahmebescheinigung\Controllers;
+
+use App\Providers\InertiaProvider;
+use Inertia\Response;
+
+class TeilnahmebescheinigungController
+{
+    public function __invoke(): Response
+    {
+        return (new InertiaProvider('Teilnahmebescheinigung/Teilnahmebescheinigung', []))->render();
+    }
+}

app/Domains/Teilnahmebescheinigung/Routes/web.php

@@ -0,0 +1,6 @@
+<?php
+
+use App\Domains\Teilnahmebescheinigung\Controllers\TeilnahmebescheinigungController;
+use Illuminate\Support\Facades\Route;
+
+Route::get('/teilnahmebescheinigung', TeilnahmebescheinigungController::class)->name('teilnahmebescheinigung');

app/Domains/Teilnahmebescheinigung/Views/Teilnahmebescheinigung.vue

@@ -0,0 +1,54 @@
+<script setup>
+import AppLayout from '@/layouts/AppLayout.vue'
+</script>
+
+<template>
+    <AppLayout title="Teilnahmebescheinigung erstellen">
+        <div class="placeholder">
+            <div class="placeholder-icon-wrap" style="background: #e67e22;">
+                <font-awesome-icon icon="certificate" class="placeholder-icon" />
+            </div>
+            <h1 class="placeholder-title">Teilnahmebescheinigung erstellen</h1>
+            <p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
+        </div>
+    </AppLayout>
+</template>
+
+<style scoped>
+.placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+    gap: 16px;
+    text-align: center;
+}
+
+.placeholder-icon-wrap {
+    width: 80px;
+    height: 80px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.placeholder-icon {
+    font-size: 2.2rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.placeholder-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #111827;
+}
+
+.placeholder-text {
+    margin: 0;
+    color: #6b7280;
+    font-size: 0.95rem;
+}
+</style>

resources/js/app.js

@@ -8,9 +8,25 @@ import 'vue3-toastify/dist/index.css'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faUser, faTrash, faCheck, faGear, faHouse } from '@fortawesome/free-solid-svg-icons'
+import {
+    faUser, faTrash, faCheck, faGear, faHouse,
+    faMoneyBillWave, faFolder, faEnvelope, faArrowUpRightFromSquare,
+    faStar, faClock, faCircleQuestion, faSliders,
+    faBell, faMagnifyingGlass,
+    faGraduationCap, faFileInvoice, faHeart, faCertificate,
+    faChevronRight, faArrowRightFromBracket, faCube,
+    faTriangleExclamation,
+} from '@fortawesome/free-solid-svg-icons'
 
-library.add(faUser, faTrash, faCheck, faGear, faHouse)
+library.add(
+    faUser, faTrash, faCheck, faGear, faHouse,
+    faMoneyBillWave, faFolder, faEnvelope, faArrowUpRightFromSquare,
+    faStar, faClock, faCircleQuestion, faSliders,
+    faBell, faMagnifyingGlass,
+    faGraduationCap, faFileInvoice, faHeart, faCertificate,
+    faChevronRight, faArrowRightFromBracket, faCube,
+    faTriangleExclamation,
+)
 
 InertiaProgress.init()
 

resources/js/layouts/AppLayout.vue

@@ -1,129 +1,249 @@
 <script setup>
 import { ref } from 'vue'
 
-const props = defineProps({
+defineProps({
     title: { type: String, default: 'Nexus' },
 })
 
 const sidebarOpen = ref(false)
+const currentPath = typeof window !== 'undefined' ? window.location.pathname : '/'
 
-function toggleSidebar() {
+const mainNav = [
-    sidebarOpen.value = !sidebarOpen.value
+    { label: 'Startseite', icon: 'house', href: '/' },
-}
+    { label: 'Finanzen', icon: 'money-bill-wave', href: '/finanzen' },
+    { label: 'Dokumente', icon: 'folder', href: '/dokumente' },
+    { label: 'Verwaltung', icon: 'gear', href: '/verwaltung' },
+    { label: 'Kommunikation', icon: 'envelope', href: '/kommunikation' },
+    { label: 'Externe Anwendungen', icon: 'arrow-up-right-from-square', href: '/extern' },
+]
 
-function closeSidebar() {
+const secondaryNav = [
-    sidebarOpen.value = false
+    { label: 'Favoriten', icon: 'star', href: '/favoriten' },
+    { label: 'Hilfe & Support', icon: 'circle-question', href: '/hilfe' },
+    { label: 'Einstellungen', icon: 'sliders', href: '/einstellungen' },
+]
+
+function isActive(href) {
+    if (href === '/') return currentPath === '/'
+    return currentPath.startsWith(href)
 }
 </script>
 
 <template>
     <div class="app-layout">
-        <div class="sidebar-overlay" :class="{ active: sidebarOpen }" @click="closeSidebar"></div>
+        <div class="sidebar-overlay" :class="{ active: sidebarOpen }" @click="sidebarOpen = false"></div>
+
+        <aside class="sidebar" :class="{ open: sidebarOpen }">
+            <!-- BdP NEXUS Logo -->
+            <div class="logo">
+                <!-- BdP Badge: gelber Ring · blauer Kreis · weiße Lilie -->
+                <svg viewBox="0 0 100 100" width="42" height="42" class="logo-badge">
+                    <circle cx="50" cy="50" r="49" fill="#f5c400"/>
+                    <circle cx="50" cy="50" r="38" fill="#1a4799"/>
+                    <!-- Lilie: Mittelblatt -->
+                    <path d="M50,44 C47,36 44,24 47,16 C48.5,12 51.5,12 53,16 C56,24 53,36 50,44Z" fill="white"/>
+                    <!-- Lilie: linkes Blatt -->
+                    <path d="M49,44 C45,41 38,37 30,32 C25,28 25,22 29,20 C33,18 38,23 43,32 C46,37 48,41 49,44Z" fill="white"/>
+                    <!-- Lilie: rechtes Blatt -->
+                    <path d="M51,44 C55,41 62,37 70,32 C75,28 75,22 71,20 C67,18 62,23 57,32 C54,37 52,41 51,44Z" fill="white"/>
+                    <!-- Lilie: Ring -->
+                    <ellipse cx="50" cy="47" rx="8.5" ry="3.5" fill="white"/>
+                    <!-- Lilie: Stiel -->
+                    <rect x="48" y="50" width="4" height="13" rx="1.5" fill="white"/>
+                    <!-- Lilie: Querbalken -->
+                    <rect x="41" y="62" width="18" height="4" rx="2" fill="white"/>
+                </svg>
+                <div class="logo-text-group">
+                    <span class="logo-title">NEXUS</span>
+                    <span class="logo-sub">BdP Landesverband</span>
+                </div>
+            </div>
+
+            <nav class="nav">
+                <ul class="nav-list">
+                    <li v-for="item in mainNav" :key="item.href">
+                        <a :href="item.href" class="nav-item" :class="{ active: isActive(item.href) }"
+                           @click="sidebarOpen = false">
+                            <span class="nav-icon"><font-awesome-icon :icon="item.icon" /></span>
+                            <span class="nav-label">{{ item.label }}</span>
+                        </a>
+                    </li>
+                </ul>
+
+                <div class="nav-divider"></div>
+
+                <ul class="nav-list">
+                    <li v-for="item in secondaryNav" :key="item.href">
+                        <a :href="item.href" class="nav-item" :class="{ active: isActive(item.href) }"
+                           @click="sidebarOpen = false">
+                            <span class="nav-icon"><font-awesome-icon :icon="item.icon" /></span>
+                            <span class="nav-label">{{ item.label }}</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+
+            <div class="sidebar-footer">
+                <a href="/logout" class="logout-btn">
+                    <font-awesome-icon icon="arrow-right-from-bracket" />
+                    <span>Abmelden</span>
+                </a>
+            </div>
+        </aside>
 
         <div class="main">
-            <div class="header">
+            <header class="header">
-                <button class="hamburger-btn" @click="toggleSidebar" aria-label="Menü öffnen">
+                <button class="hamburger-btn" @click="sidebarOpen = !sidebarOpen" aria-label="Menü öffnen">
-                    <span></span>
+                    <span></span><span></span><span></span>
-                    <span></span>
-                    <span></span>
                 </button>
-
+                <div class="header-search">
-                <div class="left-side">
+                    <span class="search-icon"><font-awesome-icon icon="magnifying-glass" /></span>
-                    <h1>{{ props.title }}</h1>
+                    <input type="text" placeholder="Suche nach Funktionen, Dokumenten..." class="search-input" />
                 </div>
-
+                <div class="header-right">
-                <div class="header-actions">
+                    <button class="icon-btn" aria-label="Benachrichtigungen">
-                    <a href="/logout" class="header-link-logout" title="Abmelden">Abmelden</a>
+                        <font-awesome-icon icon="bell" />
-                </div>
+                    </button>
-            </div>
+                    <div class="user-avatar">
-
+                        <font-awesome-icon icon="user" />
-            <div class="flexbox">
-                <div class="sidebar" :class="{ 'sidebar-open': sidebarOpen }">
-                    <div class="logo">
-                        <span class="logo-text">Nexus</span>
-                    </div>
-                    <nav class="nav">
-                        <ul class="nav-links">
-                            <li><a href="/" @click="closeSidebar">Dashboard</a></li>
-                        </ul>
-                    </nav>
-                </div>
-
-                <div class="content-area">
-                    <div class="content">
-                        <slot />
                     </div>
                 </div>
-            </div>
+            </header>
 
-            <footer class="footer">
+            <main class="content">
-                <div class="footer-inner">
+                <slot />
-                    <span>Nexus</span>
+            </main>
-                    <span>&copy; {{ new Date().getFullYear() }}</span>
-                </div>
-            </footer>
         </div>
     </div>
 </template>
 
 <style scoped>
+*, *::before, *::after { box-sizing: border-box; }
+
 .app-layout {
     display: flex;
     height: 100vh;
     background: #f0f2f5;
-    font-family: sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     overflow: hidden;
 }
 
+/* ── Sidebar ── */
+.sidebar {
+    width: 260px;
+    flex-shrink: 0;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 2px 0 8px rgba(0,0,0,0.06);
+    z-index: 100;
+    transition: transform 0.3s ease;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 22px 20px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.logo-badge { flex-shrink: 0; }
+
+.logo-text-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+}
+
+.logo-title {
+    font-size: 1.35rem;
+    font-weight: 800;
+    color: #1d4899;
+    letter-spacing: 0.04em;
+    line-height: 1;
+}
+
+.logo-sub {
+    font-size: 0.62rem;
+    color: #9ca3af;
+    letter-spacing: 0.02em;
+    line-height: 1;
+}
+
+.nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 14px 0;
+}
+
+.nav-list {
+    list-style: none;
+    margin: 0;
+    padding: 0 10px;
+}
+
+.nav-list li { margin-bottom: 1px; }
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 11px;
+    padding: 9px 13px;
+    border-radius: 8px;
+    color: #6b7280;
+    text-decoration: none;
+    font-size: 0.86rem;
+    font-weight: 500;
+    transition: background 0.15s, color 0.15s;
+}
+
+.nav-item:hover { background: #f3f4f6; color: #111827; }
+.nav-item.active { background: #1d4899; color: #fff; }
+
+.nav-icon { width: 17px; text-align: center; flex-shrink: 0; font-size: 0.88rem; }
+
+.nav-divider { height: 1px; background: #f0f0f0; margin: 10px 10px; }
+
+.sidebar-footer {
+    padding: 14px 20px;
+    border-top: 1px solid #f0f0f0;
+}
+
+.logout-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: #9ca3af;
+    text-decoration: none;
+    font-size: 0.86rem;
+    font-weight: 500;
+    transition: color 0.15s;
+}
+
+.logout-btn:hover { color: #ef4444; }
+
+/* ── Main ── */
 .main {
     flex: 1;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    margin: 20px;
+    min-width: 0;
-    box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
-    border-radius: 0 10px 0 0;
 }
 
+/* ── Header ── */
 .header {
     display: flex;
     align-items: center;
-    height: 80px;
+    gap: 16px;
-    background: #ffffff;
+    height: 64px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    padding: 0 24px;
-    padding: 0;
+    background: #fff;
-    position: relative;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+    flex-shrink: 0;
     z-index: 50;
-    flex-shrink: 0;
-}
-
-.left-side {
-    flex: 1;
-    padding: 0 20px;
-}
-
-.left-side h1 {
-    margin: 0;
-    font-size: 1.4rem;
-}
-
-.header-actions {
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    flex-shrink: 0;
-}
-
-.header-link-logout {
-    color: #000;
-    font-weight: bold;
-    text-decoration: none;
-    padding: 10px 20px;
-}
-
-.header-link-logout:hover {
-    background-color: #ff0000;
-    color: #fff;
 }
 
 .hamburger-btn {
@@ -132,162 +252,117 @@ function closeSidebar() {
     justify-content: center;
     align-items: center;
     gap: 5px;
-    width: 50px;
+    width: 36px;
-    height: 80px;
+    height: 36px;
     border: none;
     background: transparent;
     cursor: pointer;
     flex-shrink: 0;
-    padding: 0 12px;
+    border-radius: 6px;
 }
 
-.hamburger-btn span {
+.hamburger-btn span { display: block; width: 20px; height: 2px; background: #374151; border-radius: 2px; }
-    display: block;
+.hamburger-btn:hover { background: #f3f4f6; }
-    width: 24px;
-    height: 3px;
-    background-color: #333;
-    border-radius: 2px;
-}
 
-.flexbox {
+.header-search {
-    display: flex;
     flex: 1;
-    background-color: #fafafb;
+    position: relative;
-    overflow: hidden;
+    max-width: 480px;
-    gap: 1px;
 }
 
-.sidebar {
+.search-icon {
-    flex-basis: 275px;
+    position: absolute;
-    flex-shrink: 0;
+    left: 12px;
-    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    font-size: 0.85rem;
+}
+
+.search-input {
+    width: 100%;
+    padding: 9px 14px 9px 36px;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    color: #374151;
+    background: #f9fafb;
+    outline: none;
+    transition: border-color 0.15s, background 0.15s;
+}
+
+.search-input:focus { border-color: #1d4899; background: #fff; }
+.search-input::placeholder { color: #9ca3af; }
+
+.header-right {
     display: flex;
-    flex-direction: column;
+    align-items: center;
-    background-color: #ffffff;
+    gap: 12px;
-    overflow-y: auto;
+    margin-left: auto;
-    transition: transform 0.3s ease;
 }
 
+.icon-btn {
+    width: 36px;
+    height: 36px;
+    border: none;
+    background: #f3f4f6;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #6b7280;
+    font-size: 0.95rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s, color 0.15s;
+}
+
+.icon-btn:hover { background: #e5e7eb; color: #374151; }
+
+.user-avatar {
+    width: 36px;
+    height: 36px;
+    background: #1d4899;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 0.9rem;
+    cursor: pointer;
+}
+
+/* ── Content ── */
+.content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 28px 28px;
+    background: #f5f6fa;
+}
+
+/* ── Mobile overlay ── */
 .sidebar-overlay {
     display: none;
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.4);
+    background: rgba(0,0,0,0.4);
     z-index: 99;
 }
 
-.logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 30px 0;
-    height: 120px;
-}
-
-.logo-text {
-    font-size: 2rem;
-    font-weight: bold;
-    color: #1d4899;
-}
-
-.nav {
-    flex: 1;
-}
-
-.nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    border-bottom: 1px solid #ddd;
-}
-
-.nav-links li a {
-    color: #b6b6b6;
-    background-color: #fff;
-    padding: 16px 25px;
-    display: block;
-    text-decoration: none;
-    font-weight: bold;
-}
-
-.nav-links li a:hover {
-    background-color: #1d4899;
-    color: #fff;
-}
-
-.content-area {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.content {
-    padding: 30px 20px;
-    flex: 1;
-}
-
-.footer {
-    background: #666666;
-    border-top: 1px solid #ddd;
-    color: #fff;
-    padding: 10px 15px;
-    font-size: 11pt;
-    font-weight: bold;
-    flex-shrink: 0;
-}
-
-.footer-inner {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px 20px;
-    justify-content: space-between;
-    align-items: center;
-}
-
 @media (max-width: 1023px) {
-    .main {
-        margin: 0;
-        border-radius: 0;
-        box-shadow: none;
-    }
-
-    .hamburger-btn {
-        display: flex;
-    }
-
     .sidebar {
         position: fixed;
-        left: 0;
+        top: 0; left: 0; bottom: 0;
-        top: 0;
-        bottom: 0;
-        z-index: 100;
         transform: translateX(-100%);
-        width: 260px;
-        flex-basis: 260px;
-    }
-
-    .sidebar.sidebar-open {
-        transform: translateX(0);
-    }
-
-    .sidebar-overlay.active {
-        display: block;
     }
+    .sidebar.open { transform: translateX(0); }
+    .sidebar-overlay.active { display: block; }
+    .hamburger-btn { display: flex; }
+    .content { padding: 20px 16px; }
 }
 
 @media (max-width: 639px) {
-    .header {
+    .header { padding: 0 12px; gap: 10px; }
-        height: 60px;
+    .header-search { max-width: none; }
-    }
+    .content { padding: 16px 12px; }
-
-    .hamburger-btn {
-        height: 60px;
-    }
-
-    .content {
-        padding: 15px 10px;
-    }
 }
 </style>

routes/web.php

@@ -3,3 +3,8 @@
 use Illuminate\Support\Facades\Route;
 
 require_once __DIR__.'/../app/Domains/Dashboard/Routes/web.php';
+require_once __DIR__.'/../app/Domains/Schulbefreiung/Routes/web.php';
+require_once __DIR__.'/../app/Domains/Rechnung/Routes/web.php';
+require_once __DIR__.'/../app/Domains/Spendenquittung/Routes/web.php';
+require_once __DIR__.'/../app/Domains/Teilnahmebescheinigung/Routes/web.php';
+require_once __DIR__.'/../app/Domains/Dummy/Routes/web.php';