122 lines
4.3 KiB
Markdown
122 lines
4.3 KiB
Markdown
# design.md – Designsystem für das Buchungssystem
|
||
|
||
## Übersicht
|
||
|
||
Dieses Dokument beschreibt das aktuelle Designsystem von CalBook. Es dient als Referenz für Konsistenz bei Weiterentwicklungen.
|
||
|
||
---
|
||
|
||
## 1) Produktkontext
|
||
|
||
Zwei Bereiche:
|
||
|
||
1. **Kundenansicht** (`/buchen`) – Öffentliche Buchungsoberfläche
|
||
- Ablauf: Person wählen → Datum → Uhrzeit → Kontaktdaten → Bestätigung
|
||
- Auto-Scroll zum nächsten Schritt
|
||
- Framer-Motion-Animationen im Success-Screen
|
||
|
||
2. **Admin-Backend** (`/admin/*`) – Interne Verwaltungsoberfläche
|
||
- 9 Seiten: Dashboard, Termine, Kalender, E-Mails, Branding, Rechtliches, Instant Meeting, Backup, Einstellungen
|
||
- Seiten-Layout einheitlich: Sidebar (260px) + Content (`max-w-6xl`, zentriert)
|
||
- Framer-Motion `AnimatedPage`-Wrapper für konsistente Page-Transitions
|
||
|
||
---
|
||
|
||
## 2) Farbstimmung
|
||
|
||
- **Kundenansicht**: slate-50 Hintergrund, indigo-600 als Akzentfarbe
|
||
- **Admin**: slate-50 Hintergrund, slate-900 für Header/Aktionen, indigo-600 für aktive Elemente
|
||
- **Statusfarben**: emerald (bestätigt/aktiv), amber (ausstehend/no-show), red (Fehler/storniert)
|
||
- **Text**: slate-900 (primär), slate-500 (sekundär), slate-400 (deaktiviert)
|
||
|
||
---
|
||
|
||
## 3) Typografie
|
||
|
||
- **Schrift**: System-UI-Stack (`font-sans`) via Tailwind
|
||
- **Hierarchie**: `text-3xl font-black` (Seitentitel) → `text-lg font-bold` (Sektionsheader) → `text-sm font-medium` (Fließtext) → `text-xs` (Metadaten)
|
||
- **Labels**: `text-xs font-bold uppercase tracking-wider text-slate-500`
|
||
|
||
---
|
||
|
||
## 4) Komponenten
|
||
|
||
### Cards
|
||
```
|
||
rounded-2xl border border-slate-200 bg-white shadow-sm
|
||
```
|
||
|
||
### Buttons
|
||
- **Primär**: `bg-slate-900 text-white hover:bg-slate-800 rounded-xl`
|
||
- **Sekundär**: `border border-slate-200 bg-white hover:bg-slate-50 rounded-xl`
|
||
- **Destruktiv**: `bg-red-600 text-white hover:bg-red-700 rounded-xl`
|
||
|
||
### Inputs
|
||
```
|
||
h-11 rounded-xl border border-slate-200 bg-slate-50 px-4
|
||
focus:border-indigo-600 focus:ring-1 focus:ring-indigo-600
|
||
```
|
||
|
||
### Tabs
|
||
```
|
||
rounded-t-2xl border border-b-0 bg-slate-50/80
|
||
Aktiv: border-b-2 border-slate-900 bg-white text-slate-900
|
||
Inaktiv: text-slate-500 hover:bg-white/50
|
||
```
|
||
|
||
---
|
||
|
||
## 5) Admin-Layout
|
||
|
||
- **Desktop**: Fixierte Sidebar links (260px), Content rechts (`lg:pl-60`)
|
||
- **Mobile**: Topbar mit Burger-Menü, Slide-Over-Navigation
|
||
- **Animation**: `AnimatedPage`-Wrapper (framer-motion, key={pathname}) für Page-Transitions
|
||
- **Loading**: `loading.tsx` mit Skeleton-Karten, erscheint sofort bei Navigation
|
||
|
||
---
|
||
|
||
## 6) Navigation
|
||
|
||
- **Sidebar**: 8 Items mit Icons (Dashboard, Termine, Kalender, E-Mails, Branding, Rechtliches, Instant Meeting, Backup, Einstellungen)
|
||
- **Bottom**: Link zur öffentlichen Buchung + Logout
|
||
- **Aktiver Zustand**: `bg-indigo-50 text-indigo-600`
|
||
|
||
---
|
||
|
||
## 7) Interaktionsmuster
|
||
|
||
- **Modale/Dialoge**: `ConfirmDialog`-Komponente mit Backdrop, Danger/Default-Variante
|
||
- **Inline-Edit**: Kalender-Personen bearbeiten direkt in der Zeile statt Modal
|
||
- **Expand/Collapse**: Chevron-Icons für Detail-Panels (Dashboard-Buchungen, Kalender-Ressourcen)
|
||
- **Toast**: `sonner`-Bibliothek, Position `top-right`, `richColors`
|
||
|
||
---
|
||
|
||
## 8) Buchungs-Flow
|
||
|
||
- **Schritte**: 1. Person → 2. Datum → 3. Uhrzeit → 4. Kontaktdaten
|
||
- **Auto-Scroll**: Nach jeder Auswahl scrollt die Seite zum nächsten Schritt
|
||
- **Kalender**: Monatsraster mit Verfügbarkeits-Indikatoren
|
||
- **Slots**: Flexible Buttons, 15-Minuten-Raster
|
||
- **Formular**: Name, E-Mail, Telefon (optional), Thema (optional)
|
||
- **Success**: Framer-Motion animierte Bestätigungskarte, ICS-Download, "Weiteren Termin"-Button
|
||
|
||
---
|
||
|
||
## 9) Email-Templates
|
||
|
||
- **Event-Typen**: 10 Kategorien (Bestätigung, Benachrichtigung, Stornierung, Erinnerungen, Instant Meeting, SMTP-Test)
|
||
- **Sidebar**: Gruppierte Event-Typ-Auswahl (Buchung/Stornierung/Erinnerungen/Spezial)
|
||
- **Live-Vorschau**: Immer sichtbar, aktualisiert bei Template-Wechsel
|
||
- **Design-Styles**: 9 vordefinierte Farbschemas (Minimal, Corporate, Startup, Serif, Mono, Glass, Ink, Warm, Soft)
|
||
- **Editor**: Inline unter der Template-Liste, Name/Betreff/Inhalt-Felder
|
||
|
||
---
|
||
|
||
## 10) Backup
|
||
|
||
- **Export**: JSON-Download mit allen Daten (inkl. CalDAV-Key für Re-Encryption)
|
||
- **Import**: Upload mit Vorschau, Schritt-für-Schritt-Roadmap, Fehler pro Kategorie sichtbar
|
||
- **URL-Filter**: PUBLIC_URL, NEXTAUTH_URL, APP_BASE_URL werden nicht exportiert/importiert
|
||
- **Standalone-Script**: `scripts/export-backup.sh` für ältere Versionen ohne API
|