- Reworked the tenant admin login page

- Updated the User model to implement Filament’s tenancy contracts - Seeded a ready-to-use demo tenant (user, tenant, active package, purchase) - Introduced a branded, translated 403 error page to replace the generic forbidden message for unauthorised admin hits - Removed the public “Register” links from the marketing header - hardened join event logic and improved error handling in the guest pwa.
2025-10-13 12:50:46 +02:00
parent 9394c3171e
commit 64a5411fb9
69 changed files with 5447 additions and 588 deletions
--- a/docs/prp/tenant-app-specs/pages-ui.md
+++ b/docs/prp/tenant-app-specs/pages-ui.md
@@ -1,186 +1,68 @@
-# Seiten und UI-Design für die Tenant Admin App
+# Seiten- und UI-Design für die Tenant-Admin-App

 ## Status
- **Version**: 1.0.0 (2025-09-13)
- **Fokus**: Mobile-First Design mit Framework7 v8+ für native iOS/Android-Look & Feel.
+- **Version**: 1.1.0 (Stand 2025-10-13)
+- **Technologie**: React 19, TailwindCSS (shadcn/ui), React Router 7, React Query 5.
+- **Hinweis**: Die Framework7-Wireframes aus 2025-09 bleiben als historische Referenz erhalten und sind im Anhang dokumentiert.

-## Allgemeines UI-Prinzipien
- **Framework7-Komponenten**: Toolbar (Navigation), List (Datenlisten), Card (Karten für Events/Photos), Modal (Details/Actions), Pull-to-Refresh (Sync), Infinite-Scroll (Pagination).
- **Theming**: System-Dark-Mode-Support; Tenant-spezifische Farben (Primary/Secondary aus Settings).
- **Navigation**: Tabbar unten (Dashboard, Events, Photos, Settings); Side-Menu für Profile/Logout.
- **Offline-Indikator**: Banner oben ("Offline-Modus: Änderungen werden synchronisiert").
- **Loading**: Spinner für API-Calls; Skeleton-Screens für Listen.
- **i18n**: LTR für de/en (react-i18next); alle Strings via `t('admin.key')`; Icons von Lucide React (aktuell, nicht Framework7).
+## Design-Grundlagen
+- **Design Tokens**: Farbverlauf `#f43f5e → #6366f1`, Slate-Neutrals für Typografie, Primärschrift `Clash Display`, Fließtext `Inter`.
+- **Komponentensystem**: shadcn/ui-Basis (Button, Card, Tabs, Sheet, Dialog). Erweiterungen unter `resources/js/admin/components`.
+- **Navigation**: Obere App-Bar mit Breadcrumb & Quick Actions, mobile Tabbar (Dashboard, Events, Tasks, Einstellungen).
+- **Responsiveness**: Breakpoints `sm` (375px), `md` (768px), `xl` (1280px). Onboarding-Screens nutzen Full-Height Layouts auf Mobile, Split-Grid auf Desktop.
+- **Accessibility**: `prefers-reduced-motion`, Fokus-Ringe (Tailwind Plugin), ARIA für Carousel, Tabs, Dialoge.
+- **Offline UX**: Banner oben rechts (`Offline – deine Änderungen werden synchronisiert, sobald du wieder online bist`) + Retry-CTA.

-## Benötigte Seiten und Komponenten
+## Geführtes Onboarding (Welcome Flow)
+| Schritt | Route | Komponenten | Besondere Elemente |
+| --- | --- | --- | --- |
+| Hero | `/event-admin/welcome` | `TenantWelcomeLayout`, `WelcomeStepCard`, `EmblaCarousel` | CTA „Pakete entdecken“, sekundärer Link „Später entscheiden“ |
+| How It Works | `/event-admin/welcome` (Carousel Slide) | Icon Cards, Animated Gradients | 3 Vorteile (Fotos festhalten, Aufgaben, Gäste aktivieren) |
+| Paketwahl | `/event-admin/welcome/packages` | `PackageCard`, `PricingToggle`, `QueryPackageList` | Stripe/PayPal Pricing, Feature-Badges, Auswahl persistiert im Onboarding-Context |
+| Zusammenfassung | `/event-admin/welcome/summary` | `OrderSummaryCard`, Stripe Elements, PayPal Buttons | Hinweise bei fehlender Zahlungs-Konfiguration, CTA „Weiter zum Setup“ |
+| Event Setup | `/event-admin/welcome/event` | `FirstEventForm`, `FormStepper`, Toasts | Formular (Name, Datum, Sprache, Feature-Toggles) + Abschluss CTA „Event erstellen“ |

-### 1. Auth-Seiten (OAuth-Flow)
-#### Login-Seite
- **Zweck**: OAuth-Authorization (PKCE-Challenge generieren, Redirect zu /oauth/authorize).
- **Layout**: 
-  - Zentrale Card mit Logo, App-Name, "Mit Google/Email anmelden"-Buttons.
-  - Footer: "Noch kein Account? Registrieren" (Redirect zu Register).
- **Framework7-Komponenten**:
-  - `f7-page` mit `f7-navbar` (Titel: "Willkommen zur Event Photo App").
-  - `f7-block` für Content; `f7-button` (large, filled) für OAuth-Start.
-  - `f7-preloader` während Redirect.
- **Wireframe-Beschreibung**:
-  ```
-  [Navbar: Logo | Willkommen]
-  [Block: App-Beschreibung]
-  [Button: Anmelden mit Google]
-  [Button: Anmelden mit Email]
-  [Footer: Registrieren-Link]
-  ```
- **API**: Kein direkter Call; Browser-Redirect zu Backend.
+### Guards & Fortschritt
+- `useOnboardingProgress` (Context + localStorage) speichert `activeStep`, ausgewähltes Paket und Event-Entwurf.
+- Auth-Guard leitet Tenant ohne Events auf `/event-admin/welcome` um; nach Abschluss setzt Backend `onboarding_completed_at`.
+- Dashboard hero banner zeigt CTA „Geführtes Setup fortsetzen“, solange `onboarding_completed_at` fehlt.
+- Offlinezustand: Payment-Sektion zeigt Fallback-Karte „Zahlungsdienste offline – bitte erneut versuchen“.

-#### Register-Seite (ähnlich Login)
- **Unterschiede**: Form für Email/Password + Terms-Checkbox; Submit zu `/oauth/register`.
+### Assets & PWA
+- Manifest: `public/manifest.json` (Scope `/event-admin/`, Theme-Farbe `#f43f5e`, Shortcuts für Welcome & Dashboard).
+- Service Worker: `public/admin-sw.js` cached Shell `/event-admin` + statische Assets; Navigation requests → Netzwerk-First mit Cache-Fallback.
+- Registrierung: erfolgt in `resources/js/admin/main.tsx` beim `window.load` Event.

-### 2. Dashboard (Home)
- **Zweck**: Übersicht über aktive Events, Stats, schnelle Actions.
- **Layout**: 
-  - Top: Willkommens-Banner mit Tenant-Name, Credit-Balance.
-  - Stats-Cards: Aktive Events, Ungeprüfte Photos, Tasks-Fortschritt.
-  - Quick-Actions: "Neues Event erstellen", "Photos moderieren".
- **Framework7-Komponenten**:
-  - `f7-toolbar` unten: Tabs (Home, Events, Photos, Settings).
-  - `f7-card` für Stats (mit `f7-icon` und Zahlen).
-  - `f7-list` für Quick-Actions (link mit Arrow).
-  - `f7-pull-to-refresh` für Sync.
- **Wireframe-Beschreibung**:
-  ```
-  [Toolbar: Home | Events | Photos | Settings]
-  [Banner: Hallo [Name]! 3 Credits übrig]
-  [Row: Card(Events: 2 aktiv) | Card(Photos: 15 neu) | Card(Tasks: 80%)]
-  [List: > Neues Event | > Moderieren | > Einstellungen]
-  ```
- **API**: `GET /tenant/dashboard` (Stats); `GET /tenant/credits/balance`.
+## Kernseiten nach dem Onboarding
+- **Dashboard**: Hero-CTA zum Welcome Flow, Statistik-Kacheln (Events aktiv, Uploads, Credits), Quick Actions (Event anlegen, Fotos moderieren, Tasks verwalten).
+- **Events**: Suchfeld + Filter Pills, Card-Layout mit Status-Badges (`Draft`, `Live`, `Archived`), Detail-Drawer mit Quick Stats.
+- **Fotos**: Moderationsgrid (Masonry), Filter (Neu, Genehmigt, Featured), Bulk-Aktionen in Sticky-Footer.
+- **Tasks**: Tabs (Bibliothek, Zuweisungen), Drag-and-Drop (React Beautiful DnD), Inline-Editor für Aufgaben.
+- **Einstellungen**: Accordion-Struktur (Branding, Legal Pages, Benachrichtigungen, Abrechnung). Preview-Panel für Farben und Logos.
+- **Abrechnung**: Kreditübersicht, Kauflog (infinite-scroll), Zahlungsoptionen (Stripe Karte, PayPal Checkout).

-### 3. Events-Übersicht
- **Zweck**: Liste aller Events mit Filter (aktiv/archiviert), Suche.
- **Layout**: 
-  - Navbar: Suche-Feld, Filter-Button (Dropdown: Status, Datum).
-  - Infinite-Scroll-Liste von Event-Cards (Titel, Datum, Status-Tag, Photo-Count).
-  - FAB: "+" für Neues Event.
- **Framework7-Komponenten**:
-  - `f7-searchbar` in Navbar.
-  - `f7-list` mit `f7-list-item` (Thumbnail, Title, Subtitle: Datum, Badge: Status).
-  - `f7-fab` (floating action button).
-  - `f7-segmented` für Filter-Tabs.
- **Wireframe-Beschreibung**:
-  ```
-  [Navbar: Suche | Filter ▼]
-  [Segmented: Alle | Aktiv | Archiviert]
-  [List-Item: [Thumb] Hochzeit Müller (15.09.) [Tag: Aktiv] 45 Photos]
-  [List-Item: ...]
-  [+ FAB unten rechts]
-  ```
- **API**: `GET /tenant/events?page=1&status=active` (paginiert).
+## Informationsarchitektur (aktuelle React-Router-Konfiguration)
+```
+/event-admin
+├── dashboard
+├── events
+│   ├── :slug (Detailseiten, Tabs: Overview, Tasks, Media, Members, Stats)
+│   └── :slug/edit
+├── tasks
+├── members
+├── settings
+├── billing
+└── welcome
+    ├── (index)            # Hero + How It Works Carousel
+    ├── packages
+    ├── summary
+    └── event
+```

-### 4. Event-Details-Seite
- **Zweck**: Vollständige Event-Info, Edit-Modus, zugehörige Tasks/Photos.
- **Layout**: 
-  - Tabs: Details, Tasks, Photos, Members, Stats.
-  - Edit-Button (öffnet Modal für Update).
-  - QR-Code-Section für Join-Link.
- **Framework7-Komponenten**:
-  - `f7-tabs` mit `f7-tab` für Subseiten.
-  - `f7-card` für Details (Datum, Ort, Beschreibung).
-  - `f7-qrcode` (via Plugin) für Share-Link.
-  - `f7-button` (edit-icon) → `f7-modal` mit Form.
- **Wireframe-Beschreibung**:
-  ```
-  [Navbar: Event-Titel | Edit-Icon]
-  [Tabs: Details | Tasks | Photos | Members | Stats]
-  [Details-Tab: Card(Datum: 15.09., Ort: Berlin) | QR-Code: Scan zum Beitreten]
-  [Tasks-Tab: Checklist (Drag-to-reorder)]
-  [Photos-Tab: Grid von Thumbs]
-  ```
- **API**: `GET /tenant/events/{id}`; `PATCH /tenant/events/{id}` (ETag).
+## Testabdeckung (UI)
+- **Jest/RTL**: `TenantWelcomeLayout`, `WelcomeStepCard`, `PackageSelection`, `OnboardingGuard`.
+- **Playwright**: `tests/e2e/tenant-onboarding-flow.test.ts` (Login Guard, Welcome → Packages → Summary → Event Setup). Erweiterbar um Stripe/PayPal-Happy-Path sowie Offline-/Retry-Szenarien.

-### 5. Photo-Gallery-Seite (pro Event)
- **Zweck**: Moderation von Photos; Grid-View mit Lightbox.
- **Layout**: 
-  - Filter: Neu/Ungeprüft/Featured; Sortierung (Datum, Likes).
-  - Masonry-Grid von Photo-Cards (Thumb, Timestamp, Like-Count).
-  - Long-Press: Multi-Select für Bulk-Actions (Approve/Delete).
- **Framework7-Komponenten**:
-  - `f7-photoset` oder custom Grid mit `f7-card` (small).
-  - `f7-lightbox` für Fullscreen-View.
-  - `f7-checkbox` für Multi-Select.
-  - `f7-popover` für Actions (Approve, Feature, Delete).
- **Wireframe-Beschreibung**:
-  ```
-  [Navbar: Photos (Event) | Filter ▼]
-  [Grid: 3xN Cards [Thumb | Zeit | Likes] [Checkbox]]
-  [Lightbox: Fullscreen Photo mit Zoom, Actions]
-  [Bottom-Bar (bei Select): Approve All | Delete Selected]
-  ```
- **API**: `GET /tenant/events/{id}/photos`; `PATCH /tenant/photos/{id}` (Batch).
+## Legacy-Referenz (Framework7 Entwurf 2025-09)
+Die ursprünglichen Wireframes für Framework7 (Toolbar, FAB, Infinite Scroll) sind weiterhin im Repo historisiert (`docs/prp/tenant-app-specs/pages-ui-legacy.md`). Für Vergleiche bei Regressionen oder Migrationen bitte dort nachsehen.

-### 6. Members-Seite
- **Zweck**: Verwalten von Event-Mitgliedern (Hinzufügen per Email, Rollen).
- **Layout**: Liste von User-Cards (Name, Rolle, Joined-At); Invite-Button.
- **Framework7-Komponenten**:
-  - `f7-list` mit `f7-list-item` (Avatar, Name, Badge: Rolle).
-  - `f7-modal` für Invite-Form (Email-Input, Send-Button).
- **Wireframe-Beschreibung**:
-  ```
-  [Navbar: Members | + Invite]
-  [List: Anna (Admin) | Ben (Member) | ...]
-  [Modal: Email eingeben | Rolle wählen | Senden]
-  ```
- **API**: `GET /tenant/events/{id}/members`; `POST /tenant/events/{id}/members`.
-
-### 7. Tasks-Seite
- **Zweck**: Bibliothek verwalten, zu Events zuweisen, Fortschritt tracken.
- **Layout**: Tabs: Meine Tasks, Bibliothek; Drag-and-Drop zwischen Listen.
- **Framework7-Komponenten**:
-  - `f7-tabs`; `f7-sortable-list` für Drag-and-Drop.
-  - `f7-checkbox` für Zuweisung.
- **Wireframe-Beschreibung**:
-  ```
-  [Tabs: Events | Bibliothek]
-  [Sortable List: Task1 [Checkbox] | Task2 ...]
-  [Drag: Von Bibliothek zu Event-Liste]
-  ```
- **API**: `GET /tenant/tasks`; `POST /tenant/events/{id}/tasks`.
-
-### 8. Settings-Seite
- **Zweck**: Tenant-Einstellungen bearbeiten (Theme, Limits, Legal).
- **Layout**: Accordion-Sections (Theme, Notifications, Legal, App).
- **Framework7-Komponenten**:
-  - `f7-accordion` für Sections.
-  - `f7-toggle`, `f7-select`, `f7-color-picker` für Optionen.
- **Wireframe-Beschreibung**:
-  ```
-  [Navbar: Einstellungen]
-  [Accordion: Theme ▼ [Color-Picker] | Notifications [Toggle Push]]
-  [Legal: Impressum-Link bearbeiten]
-  [App: Logout-Button]
-  ```
- **API**: `GET/PATCH /tenant/settings`. Details in settings-config.md.
-
-### 9. Billing-Seite
- **Zweck**: Credit-Balance anzeigen, Packs kaufen.
- **Layout**: Balance-Card; Liste von Purchase-Options; Ledger-Historie.
- **Framework7-Komponenten**:
-  - `f7-card` für Balance (mit Warning bei niedrig).
-  - `f7-list` für Packs (Preis, Events-Count, Buy-Button).
-  - `f7-infinite-scroll` für Ledger.
- **Wireframe-Beschreibung**:
-  ```
-  [Card: Balance: 3 Credits | [Warning: Niedrig!]]
-  [List: 5 Events (29€) [Buy] | 10 Events (49€) [Buy]]
-  [Ledger: Kauf 29.09. +5 | Event-Erstellung -1]
-  ```
- **API**: `GET /tenant/credits/balance`; `POST /tenant/purchases/intent`.
-
-## Zusätzliche UI-Elemente
- **Modals**: Confirm-Delete, Photo-Preview, Error-Alerts.
- **Notifications**: `f7-notification` für Sync-Erfolg, neue Photos.
- **Offline-Handling**: `f7-block` mit "Syncing..." Progress-Bar.
- **Accessibility**: ARIA-Labels für alle interaktiven Elemente; VoiceOver-Support.
-
-Für Capacitor-spezifische UI-Anpassungen siehe capacitor-setup.md.