138 lines
8.0 KiB
Markdown
138 lines
8.0 KiB
Markdown
# Phase 5: Dashboard & Calendar - Context
|
|
|
|
**Gathered:** 2026-06-23
|
|
**Status:** Ready for planning
|
|
|
|
<domain>
|
|
## Phase Boundary
|
|
|
|
Persoenliche, konfigurierbare Startseite mit Drag & Drop Widget-Grid (react-grid-layout), vier Kern-Widgets (Uhr, Suchleiste, Kalender, Notizen), externe Kalender-Quelleneinbindung (CalDAV, Exchange, ICS), und eine neue Einstellungen-Seite erreichbar ueber User-Avatar-Menu. Dashboard-Layout wird pro Benutzer in der Datenbank gespeichert. Keine Admin-Verwaltungs-Migration in die Einstellungen — das kommt in einer eigenen Phase.
|
|
|
|
</domain>
|
|
|
|
<decisions>
|
|
## Implementation Decisions
|
|
|
|
### Widget-Verwaltung
|
|
- **D-01:** Edit-Modus per Edit-Button (Pencil-Icon oben rechts). Klick aktiviert Bearbeitungsmodus: Grid sichtbar, Widgets verschiebbar/skalierbar, Widget-Hinzufuegen-Button erscheint. Zweiter Klick speichert und beendet Edit-Modus.
|
|
- **D-02:** Neue Benutzer starten mit leerem Grid + Empty State Hinweis. Kein vorkonfiguriertes Standard-Layout.
|
|
- **D-03:** Im Dashboard (Edit-Modus) nur Groesse und Position konfigurierbar. Alle anderen Widget-Einstellungen (Uhr-Stil, Kalenderquellen, Suchanbieter, Notiz-Titel, etc.) werden in Einstellungen > Dashboard konfiguriert.
|
|
- **D-04:** Widgets sind mehrfach platzierbar (z.B. 2 Uhren fuer verschiedene Zeitzonen, mehrere Notizen).
|
|
- **D-05:** Layout wird pro Benutzer in PostgreSQL gespeichert (DASH-07). Sync ueber Geraete.
|
|
- **D-06:** Jedes Widget hat eine sinnvolle Mindestgroesse pro Typ (z.B. Uhr min 2x2, Kalender min 3x3). Claude legt konkrete Werte fest.
|
|
- **D-07:** Kein Dashboard-Reset-Button. Benutzer loescht Widgets manuell.
|
|
|
|
### Kalender-Einrichtung
|
|
- **D-08:** Alle drei Quellentypen in v1: CalDAV (WebDAV), Exchange (EWS/Graph API), ICS-Link (.ics URL).
|
|
- **D-09:** Kalenderquellen werden pro Benutzer konfiguriert (nicht pro Mandant). Jeder Benutzer richtet eigene Quellen ein.
|
|
- **D-10:** Kalender-Widget ist read-only — zeigt kommende Termine an. Kein Erstellen/Bearbeiten von Terminen.
|
|
- **D-11:** Kalenderquellen-Verwaltung in Einstellungen > Dashboard > Kalender.
|
|
|
|
### Uhr-Widget
|
|
- **D-12:** Zeitzone pro Uhr-Instanz konfigurierbar in Einstellungen > Dashboard (z.B. Berlin, New York).
|
|
- **D-13:** Datum optional anzeigbar unter der Uhrzeit. Ein/ausschaltbar in Einstellungen > Dashboard.
|
|
|
|
### Suchleisten-Widget
|
|
- **D-14:** Layout von links nach rechts: Dropdown Suchanbieter-Auswahl, Suchfeld, Suchen-Button. Suche oeffnet neuen Browser-Tab.
|
|
- **D-15:** Drei Standard-Suchanbieter vorinstalliert: Google, Bing, DuckDuckGo. Weitere Custom-Anbieter in Einstellungen > Dashboard hinzufuegbar (URL mit {query} Platzhalter).
|
|
|
|
### Notiz-Widget
|
|
- **D-16:** Markdown-Editor mit kompakter Bearbeitungsleiste: Fett, Kursiv, Unterstrichen, Liste, Checkbox, Link, Code.
|
|
- **D-17:** Jede Notiz-Instanz hat eigenen editierbaren Titel (z.B. "Todo", "Ideen"). Konfiguration in Einstellungen > Dashboard.
|
|
- **D-18:** Autosave mit Debounce. Kein manueller Speichern-Button.
|
|
|
|
### Einstellungen-Seite
|
|
- **D-19:** Settings-Seite erreichbar ueber User-Avatar-Icon (rechts oben im Header, neben Logout). NICHT als Sidebar-Item.
|
|
- **D-20:** Settings-Seite hat eigene Sub-Sidebar fuer Einstellungskategorien. Phase 05 baut Dashboard-bezogene Kategorien. Weitere Kategorien (Sprache, Verwaltung) kommen in spaeterer Phase.
|
|
|
|
### Grid-Responsive
|
|
- **D-21:** Desktop/Laptop (auch kleine Bildschirme bis ~13"): Grid skaliert proportional runter. Layout bleibt gleich, wird kleiner dargestellt.
|
|
- **D-22:** Mobile Geraete: Widgets stapeln sich vertikal (1 Spalte). Reihenfolge konfigurierbar in Einstellungen > Dashboard.
|
|
|
|
### Claude's Discretion
|
|
- Widget-Hinzufuegen-UI: Modal-Katalog vs. Inline-Leiste vs. anderes Pattern — basierend auf Anzahl Widget-Typen und UX
|
|
- Widget-spezifische Config-Granularitaet: Welche Widgets brauchen welche Einstellungen — basierend auf Sinnhaftigkeit pro Typ
|
|
- Uhr-Widget Stil: Analog vs. digital vs. konfigurierbar — basierend auf Design-System
|
|
- Kalender-Konfiguration UX: Quellen-Liste + Formular vs. Wizard — basierend auf Komplexitaet
|
|
- Markdown-Editor Library-Wahl: basierend auf Bundle-Groesse, Tailwind-Kompatibilitaet, Maintenance-Status
|
|
- Settings Sub-Sidebar Kategorie-Struktur fuer Dashboard-Bereich
|
|
|
|
</decisions>
|
|
|
|
<canonical_refs>
|
|
## Canonical References
|
|
|
|
**Downstream agents MUST read these before planning or implementing.**
|
|
|
|
### Projekt-Kontext
|
|
- `.planning/PROJECT.md` — Gesamtprojekt, Core Value, Constraints
|
|
- `.planning/REQUIREMENTS.md` — Phase-5-Requirements: DASH-01..07, CAL-01..03
|
|
- `.planning/ROADMAP.md` — Phase-Ziel und Success Criteria
|
|
|
|
### Vorherige Phasen
|
|
- `.planning/phases/01-foundation-portal-shell/01-CONTEXT.md` — Design-Entscheidungen, OKLCH Tokens, Sidebar-Verhalten, Header-Layout, CSS Variable --current-sidebar-width
|
|
- `.planning/phases/02-authentication-multi-tenancy/02-CONTEXT.md` — Auth, Rollen (Super-Admin/Admin/User), Per-User Sessions, JWT mit Tenant-Kontext
|
|
- `.planning/phases/03-module-system-domaincheck/03-CONTEXT.md` — Module SDK, Registry, Kategorien, ModuleCard Pattern
|
|
- `.planning/phases/04-marketplace-portal-navigation/04-CONTEXT.md` — Marketplace Layout, Sidebar-Suche, Zustand Stores, Aktivierungs-Flow
|
|
|
|
### Research
|
|
- `.planning/research/STACK.md` — Technologie-Stack (react-grid-layout 2.2.x, NestJS 11, Prisma 7, Next.js 16, shadcn/ui)
|
|
- `.planning/research/ARCHITECTURE.md` — Architektur-Patterns
|
|
|
|
</canonical_refs>
|
|
|
|
<code_context>
|
|
## Existing Code Insights
|
|
|
|
### Reusable Assets
|
|
- `apps/web/src/app/(portal)/page.tsx` — Dashboard-Platzhalter mit Empty State. Wird zur echten Dashboard-Seite mit Grid.
|
|
- `apps/web/src/lib/stores/auth-store.ts` — Auth Store mit User-Info, noetig fuer per-User Layout-Speicherung
|
|
- `apps/web/src/lib/stores/sidebar-store.ts` — Sidebar Store, Pattern fuer neuen Dashboard-Store
|
|
- `apps/web/src/lib/stores/marketplace-store.ts` — Zustand Store Pattern mit API-Integration
|
|
- `apps/web/src/components/layout/header.tsx` — Header mit User-Avatar-Bereich, muss um Settings-Link erweitert werden
|
|
- `apps/api/prisma/schema.prisma` — Prisma Schema, muss um Dashboard/Widget/CalendarSource Models erweitert werden
|
|
- `apps/api/src/prisma/prisma.service.ts` — Prisma Client Service
|
|
|
|
### Established Patterns
|
|
- NestJS Module mit Controller + Service + DTOs
|
|
- Next.js App Router Route Groups: `(auth)` fuer Login, `(portal)` fuer Portal-Seiten
|
|
- Zustand Stores mit Persist-Middleware fuer Client-State
|
|
- next-intl fuer alle UI-Strings (t('key') Pattern)
|
|
- Fetch mit `credentials: 'include'` fuer API-Aufrufe
|
|
- OKLCH Farbsystem, Dark/Light Theme via next-themes
|
|
|
|
### Integration Points
|
|
- Dashboard-Grid braucht react-grid-layout (noch nicht installiert)
|
|
- Markdown-Editor braucht Editor-Library (noch nicht installiert)
|
|
- Kalender-Backend braucht CalDAV/ICS/Exchange Libraries (noch nicht installiert)
|
|
- Settings-Route `/settings` im `(portal)` Route Group mit eigenem Layout (Sub-Sidebar)
|
|
- Header User-Menu muss um Settings-Link erweitert werden
|
|
- Neue Prisma Models: DashboardLayout, WidgetInstance, CalendarSource, SearchProvider
|
|
- API Endpoints: Dashboard CRUD, Calendar Source CRUD, Widget Config CRUD
|
|
|
|
</code_context>
|
|
|
|
<specifics>
|
|
## Specific Ideas
|
|
|
|
- Suchleisten-Widget: Dropdown links, Suchfeld Mitte, Button rechts — wie klassische Browser-Startseite
|
|
- Notiz-Widget: Mini-Toolbar oben mit gaengigen Markdown-Aktionen, Inhalt darunter mit Live-Rendering
|
|
- Settings-Seite: Eigenes Layout mit Sub-Sidebar links, Content rechts. Erreichbar nur ueber User-Avatar-Menu
|
|
- Grid Responsive: Desktop skaliert proportional (kein Umbruch), Mobile stapelt vertikal
|
|
|
|
</specifics>
|
|
|
|
<deferred>
|
|
## Deferred Ideas
|
|
|
|
- **Verwaltungs-Migration in Einstellungen:** Komplette Admin-Verwaltung (Benutzer, Mandanten, LDAP, Module) soll aus der Hauptsidebar in die Einstellungen-Seite verschoben werden. Eigene Phase.
|
|
- **Sprach-Einstellung in Settings:** Sprachauswahl soll in Einstellungen-Seite integriert werden (aktuell evtl. anderswo). Teil der Verwaltungs-Migration.
|
|
- **Hauptfenster-Bereinigung:** Im Hauptfenster (mit Sidebar) sollen nur Dashboard und Module/Tools sichtbar sein. Alles andere in Settings.
|
|
|
|
</deferred>
|
|
|
|
---
|
|
|
|
*Phase: 5-Dashboard & Calendar*
|
|
*Context gathered: 2026-06-23*
|