feat(frontend): Dashboard-Seite mit Uebersichtskacheln #69

New issue

Closed

opened 2026-06-21 16:18:02 +00:00 by niboer · 0 comments

niboer commented

2026-06-21 16:18:02 +00:00

Owner

Beschreibung

Zentrale Einstiegsseite nach dem Login. Zeigt dem User eine Uebersicht der wichtigsten Informationen. Die Seite wird serverseitig geladen (load-Funktion im +page.server.ts).

Endpunkte (via BFF-Proxy)

GET /api/v1/events - Alle Events
GET /api/v1/persons - Alle Personen (Anzahl)
GET /api/v1/persons/{person_id}/invitations - Eigene Einladungen

load-Funktion (+page.server.ts)

s export async function load({ fetch, locals }) { const personId = locals.user?.personId; const [events, persons, invitations] = await Promise.all([ fetch('/api/v1/events').then(r => r.ok ? r.json() : []), fetch('/api/v1/persons').then(r => r.ok ? r.json() : []), personId ? fetch(/api/v1/persons//invitations).then(r => r.ok ? r.json() : []) : [], ]); return { events, personsCount: persons.length, invitations }; }

Seite (+page.svelte)

PageHeader "Dashboard"
Kacheln (Cards):
- Naechste Feier: Titel + Datum des naechsten Events (oder "Keine Feier geplant")
- Offene RSVPs: Anzahl Einladungen mit Status "invited" (oder Badge)
- Personen: Anzahl aller Personen im System
Letzte 5 Events als kompakte Liste (Titel + Datum)

Nutzt Komponenten aus #67

PageHeader, Card (shadcn), StatusBadge, EmptyState

Tests

dashboard.test.ts: Mock-API-Responses fuer events/persons/invitations
Testet: load-Funktion gibt korrekte Daten zurueck, Dashboard zeigt Kacheln, Empty-State bei keinen events
Analog dem Pattern in playground.test.ts

Akzeptanzkriterien

Dashboard zeigt die 3 Kacheln an
Bei keinen Events/Invitations wird EmptyState angezeigt
"Naechste Feier" zeigt das zeitlich naechste Event
"Offene RSVPs" zeigt die Anzahl offener Einladungen
Letzte Events-Liste ist vorhanden
Tests laufen gruen

Aktualisierter Plan (2026-06-21)

personId

locals.user?.personId wird durch den Fix in #68 (4a) korrekt aus preferred_username ermittelt.
Die Dashboard-Load-Funktion kann $env/dynamic/private via fetch nutzen.

Commits

5a eat(frontend): Dashboard-Seite mit Uebersichtskacheln (refs #69)

/app/dashboard/+page.server.ts (load: events, persons, invitations)
/app/dashboard/+page.svelte (PageHeader, Cards, letzte 5 Events)

5b est(frontend): Tests fuer Dashboard-Load-Funktion und -Seite (closes #69)

Load-Funktion: Erfolg, Fehler, leere Einladungen
Seite: Import-Prufung Komponenten

## Beschreibung Zentrale Einstiegsseite nach dem Login. Zeigt dem User eine Uebersicht der wichtigsten Informationen. Die Seite wird serverseitig geladen (load-Funktion im +page.server.ts). ## Endpunkte (via BFF-Proxy) - GET /api/v1/events - Alle Events - GET /api/v1/persons - Alle Personen (Anzahl) - GET /api/v1/persons/{person_id}/invitations - Eigene Einladungen ## load-Funktion (+page.server.ts) ` s export async function load({ fetch, locals }) { const personId = locals.user?.personId; const [events, persons, invitations] = await Promise.all([ fetch('/api/v1/events').then(r => r.ok ? r.json() : []), fetch('/api/v1/persons').then(r => r.ok ? r.json() : []), personId ? fetch(/api/v1/persons//invitations).then(r => r.ok ? r.json() : []) : [], ]); return { events, personsCount: persons.length, invitations }; } ` ## Seite (+page.svelte) - PageHeader "Dashboard" - Kacheln (Cards): - **Naechste Feier**: Titel + Datum des naechsten Events (oder "Keine Feier geplant") - **Offene RSVPs**: Anzahl Einladungen mit Status "invited" (oder Badge) - **Personen**: Anzahl aller Personen im System - Letzte 5 Events als kompakte Liste (Titel + Datum) ## Nutzt Komponenten aus #67 - PageHeader, Card (shadcn), StatusBadge, EmptyState ## Tests - dashboard.test.ts: Mock-API-Responses fuer events/persons/invitations - Testet: load-Funktion gibt korrekte Daten zurueck, Dashboard zeigt Kacheln, Empty-State bei keinen events - Analog dem Pattern in playground.test.ts ## Akzeptanzkriterien - [ ] Dashboard zeigt die 3 Kacheln an - [ ] Bei keinen Events/Invitations wird EmptyState angezeigt - [ ] "Naechste Feier" zeigt das zeitlich naechste Event - [ ] "Offene RSVPs" zeigt die Anzahl offener Einladungen - [ ] Letzte Events-Liste ist vorhanden - [ ] Tests laufen gruen ## Aktualisierter Plan (2026-06-21) ### personId locals.user?.personId wird durch den Fix in #68 (4a) korrekt aus preferred_username ermittelt. Die Dashboard-Load-Funktion kann $env/dynamic/private via fetch nutzen. ### Commits **5a** eat(frontend): Dashboard-Seite mit Uebersichtskacheln (refs #69) - /app/dashboard/+page.server.ts (load: events, persons, invitations) - /app/dashboard/+page.svelte (PageHeader, Cards, letzte 5 Events) **5b** est(frontend): Tests fuer Dashboard-Load-Funktion und -Seite (closes #69) - Load-Funktion: Erfolg, Fehler, leere Einladungen - Seite: Import-Prufung Komponenten

niboer added this to the MS10: Vollständige UI milestone

2026-06-21 16:18:02 +00:00

niboer added the

component/frontend

prio/high

type/feature

labels

2026-06-21 16:18:02 +00:00

niboer closed this issue

2026-06-22 14:14:45 +00:00

niboer referenced this issue from a commit

2026-06-22 14:26:31 +00:00