diff --git a/.planning/phases/05-dashboard-calendar/05-CONTEXT.md b/.planning/phases/05-dashboard-calendar/05-CONTEXT.md new file mode 100644 index 0000000..6879f25 --- /dev/null +++ b/.planning/phases/05-dashboard-calendar/05-CONTEXT.md @@ -0,0 +1,137 @@ +# Phase 5: Dashboard & Calendar - Context + +**Gathered:** 2026-06-23 +**Status:** Ready for planning + + +## 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. + + + + +## 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 + + + + +## 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 + + + + +## 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 + + + + +## 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 + + + + +## 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. + + + +--- + +*Phase: 5-Dashboard & Calendar* +*Context gathered: 2026-06-23* diff --git a/.planning/phases/05-dashboard-calendar/05-DISCUSSION-LOG.md b/.planning/phases/05-dashboard-calendar/05-DISCUSSION-LOG.md new file mode 100644 index 0000000..3805b03 --- /dev/null +++ b/.planning/phases/05-dashboard-calendar/05-DISCUSSION-LOG.md @@ -0,0 +1,213 @@ +# Phase 5: Dashboard & Calendar - Discussion Log + +> **Audit trail only.** Do not use as input to planning, research, or execution agents. +> Decisions are captured in CONTEXT.md — this log preserves the alternatives considered. + +**Date:** 2026-06-23 +**Phase:** 05-dashboard-calendar +**Areas discussed:** Widget-Verwaltung, Kalender-Einrichtung, Uhr-Widget Stil, Notiz-Widget Umfang, Suchleisten-Widget, Einstellungen-Seite, Grid-Responsive + +--- + +## Widget-Verwaltung + +### Edit-Modus + +| Option | Description | Selected | +|--------|-------------|----------| +| Edit-Button (Empfohlen) | Pencil/Edit-Icon oben rechts, aktiviert Bearbeitungsmodus | ✓ | +| Immer editierbar | Widgets staendig verschiebbar, kein Modus-Wechsel | | +| Du entscheidest | Claude waehlt basierend auf UX | | + +**User's choice:** Edit-Button +**Notes:** — + +### Widget-Hinzufuegen UI + +| Option | Description | Selected | +|--------|-------------|----------| +| Modal-Katalog | Grosses Modal mit Widget-Typen als Karten | | +| Inline-Leiste | Toolbar am oberen Rand mit Widget-Icons | | +| Du entscheidest | Claude waehlt basierend auf Widget-Anzahl | ✓ | + +**User's choice:** Du entscheidest + +### Default-Layout + +| Option | Description | Selected | +|--------|-------------|----------| +| Standard-Layout | Vorkonfiguriertes Dashboard fuer neue Benutzer | | +| Leeres Grid | Empty State mit Hinweis, komplette Freiheit | ✓ | +| Du entscheidest | Claude waehlt | | + +**User's choice:** Leeres Grid + +### Widget-Config Scope + +**User's choice (Freitext):** Widgets sind pro Widget konfigurierbar, aber nur Groesse und Position im Dashboard. Alle anderen Einstellungen im Einstellungs-Menu unter Dashboard. + +### Widget-Limit + +| Option | Description | Selected | +|--------|-------------|----------| +| Mehrfach erlaubt | Dasselbe Widget mehrfach platzierbar | ✓ | +| Einmal pro Typ | Jedes Widget nur einmal | | +| Du entscheidest | Claude entscheidet pro Typ | | + +**User's choice:** Mehrfach erlaubt + +### Speicherung + +| Option | Description | Selected | +|--------|-------------|----------| +| Backend/DB (Empfohlen) | PostgreSQL pro User, sync ueber Geraete | ✓ | +| LocalStorage + DB | Lokal + async Backend-Sync | | +| Du entscheidest | Claude waehlt | | + +**User's choice:** Backend/DB + +### Dashboard-Reset + +| Option | Description | Selected | +|--------|-------------|----------| +| Ja, in Einstellungen | Reset-Button unter Einstellungen > Dashboard | | +| Nicht noetig | Manuell loeschen reicht | ✓ | +| Du entscheidest | Claude entscheidet | | + +**User's choice:** Nicht noetig + +### Mindestgroesse + +| Option | Description | Selected | +|--------|-------------|----------| +| Mindestgroesse pro Typ | Sinnvolle Mindestgroesse pro Widget-Typ | ✓ | +| Komplett frei | Jede Groesse moeglich | | +| Du entscheidest | Claude legt Constraints fest | | + +**User's choice:** Mindestgroesse pro Typ + +--- + +## Kalender-Einrichtung + +### Quellentypen + +| Option | Description | Selected | +|--------|-------------|----------| +| Alle drei (Empfohlen) | CalDAV, Exchange, ICS-Link | ✓ | +| ICS + CalDAV zuerst | Exchange spaeter | | +| Nur ICS-Links | Einfachster Einstieg | | + +**User's choice:** Alle drei + +### Kalender-Scope + +| Option | Description | Selected | +|--------|-------------|----------| +| Pro Benutzer | Jeder richtet eigene Quellen ein | ✓ | +| Beides | Mandantenweite + persoenliche Kalender | | +| Du entscheidest | Claude waehlt | | + +**User's choice:** Pro Benutzer + +### Konfiguration UX + +| Option | Description | Selected | +|--------|-------------|----------| +| Quellen-Liste + Formular | Liste + Hinzufuegen-Formular mit Typ-Auswahl | | +| Wizard-Ansatz | Schritt-fuer-Schritt | | +| Du entscheidest | Claude waehlt | ✓ | + +**User's choice:** Du entscheidest + +### Widget Read/Write + +| Option | Description | Selected | +|--------|-------------|----------| +| Nur anzeigen (Empfohlen) | Read-only Terminvorschau | ✓ | +| Anzeigen + Erstellen | Auch Termine erstellen | | + +**User's choice:** Nur anzeigen + +--- + +## Uhr-Widget Stil + +### Stil + +| Option | Description | Selected | +|--------|-------------|----------| +| Digital | Grosse digitale Zeitanzeige | | +| Analog | Klassisches Zifferblatt | | +| Konfigurierbar | Benutzer waehlt in Einstellungen | | +| Du entscheidest | Claude waehlt basierend auf Design | ✓ | + +**User's choice:** Du entscheidest + +### Zeitzone + +| Option | Description | Selected | +|--------|-------------|----------| +| Ja, pro Instanz | Jede Uhr eigene Zeitzone, konfigurierbar in Einstellungen | ✓ | +| Nur lokale Zeit | Immer Browser-Zeitzone | | +| Du entscheidest | Claude entscheidet | | + +**User's choice:** Ja, pro Instanz + +### Datum + +| Option | Description | Selected | +|--------|-------------|----------| +| Ja, optional | Datum unter Uhrzeit, ein/ausschaltbar in Einstellungen | ✓ | +| Nein, nur Uhrzeit | Kein Datum | | +| Du entscheidest | Claude entscheidet | | + +**User's choice:** Ja, optional + +--- + +## Suchleisten-Widget + +**User's choice (Freitext):** Von links nach rechts: Dropdown Suchanbieter-Auswahl, Suchleiste, Suchen-Button. Suche wird in neuem Browser-Tab ausgefuehrt. Suchanbieter konfigurierbar in Einstellungen. + +**Standard-Suchanbieter (Freitext):** Google, Bing, DuckDuckGo. Custom-Anbieter hinzufuegbar. + +--- + +## Einstellungen-Seite + +**User's choice (Freitext):** Settings-Button ist aktuell ohne Funktion. Einstellungen sollen ueber User-Avatar-Icon (rechts oben) erreichbar sein, wo auch Logout ist. Oeffnet Settings-Seite mit eigener Sub-Sidebar fuer Kategorien. Hauptfenster soll ausser Dashboard und Tools nichts zeigen. Admin-Verwaltung soll komplett in Einstellungen. Sprache auch in Einstellungen konfigurierbar. + +### Navigation-Umbau Scope + +| Option | Description | Selected | +|--------|-------------|----------| +| Ja, Teil von Phase 05 | Navigation-Umbau gehoert zur Dashboard-Phase | | +| Nein, eigene Phase | Settings-Seite ja, Verwaltungs-Umbau separat | ✓ | +| Ja, aber minimal | Settings ins User-Menu, Verwaltung nur soweit noetig | | + +**User's choice:** Nein, eigene Phase +**Notes:** Phase 05 baut Settings-Seite + Sub-Sidebar mit Dashboard-Kategorien. Verwaltungs-Migration (Admin, Benutzer, LDAP, Module aus Sidebar raus) kommt in eigener Phase. + +--- + +## Grid-Responsive + +**User's choice (Freitext):** Unterscheidung Mobile vs. kleine Bildschirme. Desktop/Laptop (auch kleine Screens bis ~13"): Grid skaliert proportional runter, gleiches Layout nur kleiner. Mobile Geraete: Widgets stapeln sich vertikal, Reihenfolge konfigurierbar in Einstellungen. + +--- + +## Claude's Discretion + +- Widget-Hinzufuegen-UI (Modal vs. Inline vs. anderes) +- Uhr-Widget Stil (analog vs. digital vs. konfigurierbar) +- Kalender-Konfiguration UX (Formular vs. Wizard) +- Widget-spezifische Config-Granularitaet pro Typ +- Markdown-Editor Library +- Settings Sub-Sidebar Kategorie-Struktur + +## Deferred Ideas + +- **Verwaltungs-Migration:** Admin-Verwaltung (Benutzer, Mandanten, LDAP, Module) aus Hauptsidebar in Einstellungen verschieben — eigene Phase +- **Sprach-Einstellung:** Sprachauswahl in Settings-Seite integrieren — Teil der Verwaltungs-Migration +- **Hauptfenster-Bereinigung:** Nur Dashboard + Module/Tools im Hauptfenster sichtbar — abhaengig von Verwaltungs-Migration