- 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.
This commit is contained in:
Codex Agent
@@ -19,10 +19,10 @@ Key Endpoints (abridged)
|
||||
- Settings: read/update tenant theme, limits, legal page links.
|
||||
|
||||
Guest Polling (no WebSockets in v1)
|
||||
- GET `/events/{slug}/stats` — lightweight counters for Home info bar.
|
||||
- GET `/events/{token}/stats` — lightweight counters for Home info bar.
|
||||
- Response: `{ online_guests: number, tasks_solved: number, latest_photo_at: ISO8601 }`.
|
||||
- Cache: `Cache-Control: no-store`; include `ETag` for conditional requests.
|
||||
- GET `/events/{slug}/photos?since=<ISO8601|cursor>` — incremental gallery refresh.
|
||||
- GET `/events/{token}/photos?since=<ISO8601|cursor>` — incremental gallery refresh.
|
||||
- Response: `{ data: Photo[], next_cursor?: string, latest_photo_at: ISO8601 }`.
|
||||
- Use `If-None-Match` or `If-Modified-Since` to return `304 Not Modified` when unchanged.
|
||||
|
||||
|
||||
@@ -87,9 +87,9 @@ Technical Notes
|
||||
- Realtime model: periodic polling (no WebSockets). Home counters every 10s; gallery delta every 30s with exponential backoff when tab hidden or offline.
|
||||
|
||||
API Touchpoints
|
||||
- GET `/api/v1/events/{slug}` — public event metadata (when open) + theme.
|
||||
- GET `/api/v1/events/{slug}/photos` — paginated gallery (approved only).
|
||||
- POST `/api/v1/events/{slug}/photos` — signed upload initiation; returns URL + fields.
|
||||
- GET `/api/v1/events/{token}` — public event metadata (when open) + theme.
|
||||
- GET `/api/v1/events/{token}/photos` — paginated gallery (approved only).
|
||||
- POST `/api/v1/events/{token}/photos` — signed upload initiation; returns URL + fields.
|
||||
- POST (S3) — direct upload to object storage; then backend finalize call.
|
||||
- POST `/api/v1/photos/{id}/like` — idempotent like with device token.
|
||||
|
||||
|
||||
@@ -121,9 +121,9 @@ packages/mobile/ # Shared Native-Config (optional)
|
||||
- **Privacy**: Usage Descriptions in Info.plist (z.B. "Kamera für QR-Scans").
|
||||
|
||||
- **PWA-Fallback** (Web):
|
||||
- **manifest.json**: `start_url: '/event-admin/'`, `display: 'standalone'`.
|
||||
- **Service Worker**: Caching von Assets; Background Sync für Mutations.
|
||||
- **Distribution**: Hosting auf `admin.fotospiel.app` mit A2HS-Prompt.
|
||||
- **manifest.json**: liegt unter `public/manifest.json` (Scope `/event-admin/`, Theme-Farbe `#f43f5e`, Shortcuts für Welcome & Dashboard).
|
||||
- **Service Worker**: `public/admin-sw.js` cached Shell + Assets, liefert Offline-Fallback `/event-admin` für Navigations-Anfragen.
|
||||
- **Distribution**: Hosting auf `admin.fotospiel.app` mit A2HS-Prompt; Bubblewrap/TWA nutzt `https://admin.fotospiel.app/manifest.json`.
|
||||
|
||||
### Native Features (Erweiterung zu settings-config.md)
|
||||
- **Push-Notifications**:
|
||||
|
||||
@@ -1,100 +1,87 @@
|
||||
# Funktionale Spezifikationen für die Tenant Admin App
|
||||
# Funktionale Spezifikationen – Tenant-Admin-App
|
||||
|
||||
## Status
|
||||
- **Version**: 1.0.0 (2025-09-13)
|
||||
- **Supersedes**: Teile von docs/prp/06-tenant-admin-pwa.md und docs/prp-addendum-2025-09-08-tenant-admin-pwa.md
|
||||
- **Version**: 1.1.0 (Stand 2025-10-13)
|
||||
- **Ersetzt**: docs/prp/06-tenant-admin-pwa.md, docs/prp-addendum-2025-09-08-tenant-admin-pwa.md (Legacy-Referenz über Git History).
|
||||
|
||||
## Deliverables
|
||||
Die Tenant Admin App muss folgende Kernfunktionen bereitstellen:
|
||||
- **Event-Management**: CRUD-Operationen für Events (Erstellen, Bearbeiten, Archivieren, Veröffentlichen).
|
||||
- **Gallery-Management**: Hochladen, Moderieren, Featured-Setten von Photos; Thumbnail-Generierung.
|
||||
- **Member-Management**: Hinzufügen/Entfernen von Event-Mitgliedern; Rollen (Admin, Member).
|
||||
- **Task & Emotion Management**: Zuweisen von Tasks und Emotions zu Events; Overrides für Tenant-spezifische Bibliotheken.
|
||||
- **Settings-Management**: Tenant-spezifische Einstellungen (Theme, Limits, Legal Pages).
|
||||
- **Billing & Purchases**: Kaufen von Packages (pro Event oder Tenant); Ledger-Übersicht; Integration mit Stripe.
|
||||
- **Notifications**: Push-Benachrichtigungen für neue Photos, Event-Updates, niedrigen Credit-Balance.
|
||||
- **Offline-Support**: Caching von Events und Photos; Queuing von Uploads/Mutations mit Sync bei Online-Wiederkehr.
|
||||
- **Audit & Compliance**: Logging kritischer Aktionen; ETag-basierte Conflict-Resolution; GDPR-konforme Datenlöschung.
|
||||
|
||||
Die App ist API-first und interagiert ausschließlich über den Backend-API-Endpunkt `/api/v1/tenant/*`.
|
||||
Die Admin-App muss folgende Kernfunktionen bereitstellen:
|
||||
- **Geführtes Onboarding**: Welcome Flow (Hero, How-It-Works, Paketwahl, Zusammenfassung, Erstes Event). Automatische Weiterleitung für Tenants ohne aktive Events.
|
||||
- **Event-Management**: Erstellen, Bearbeiten, Veröffentlichen, Archivieren; Join-Token-Verwaltung.
|
||||
- **Galerie-Management**: Upload, Moderation, Feature-Flags, Analytics.
|
||||
- **Mitglieder-Verwaltung**: Einladungen, Rollen, Zugriffskontrolle.
|
||||
- **Tasks & Emotions**: Bibliothek, Zuweisung, Fortschritts-Tracking.
|
||||
- **Abrechnung**: Paketübersicht, Stripe/PayPal Checkout, Ledger.
|
||||
- **Einstellungen**: Branding, Limits, Rechtstexte, Benachrichtigungen.
|
||||
- **Offline-Support**: App-Shell-Caching, Queueing von Mutationen, Sync bei Reconnect.
|
||||
- **Compliance**: Audit-Logging, GDPR-konforme Löschung, ETag-basierte Konfliktlösung.
|
||||
|
||||
## Capabilities
|
||||
### Authentifizierung & Autorisierung
|
||||
- **OAuth2 Flow**: Authorization Code + PKCE für sichere Token-Erfassung.
|
||||
- **Token-Management**: Refresh-Tokens mit automatischer Rotation; Secure Storage (Keychain/Keystore).
|
||||
- **Tenant-Scoping**: Alle Requests enthalten `tenant_id` aus Token; Backend-Policies enforcen Isolation.
|
||||
- **Roles**: Unterstützung für `tenant_admin` (volle CRUD), `member` (read-only + Uploads).
|
||||
- OAuth2 Authorization Code mit PKCE, Refresh-Tokens via Secure Storage (Web: IndexedDB, Capacitor: Preferences/Keychain).
|
||||
- Tenant-Scoped Tokens; Rollen `tenant_admin` (vollständig) & `member` (read-only, Upload).
|
||||
|
||||
### Core Features
|
||||
- **Event Lifecycle**:
|
||||
- Erstellen: Erfordert Package-Auswahl (Free oder Kauf); Slug-Generierung (unique pro Tenant).
|
||||
- Bearbeiten: Update von Datum, Ort, Tasks, Emotions, Join-Link.
|
||||
- Veröffentlichen: Generiert QR-Code und Share-Link; aktiviert Guest-PWA-Zugriff.
|
||||
- Archivieren: Soft-Delete mit Retention-Periode (GDPR); Credit-Rückerstattung optional.
|
||||
- **Photo Management**:
|
||||
- Upload: Signed URLs für direkte S3-Uploads; automatisierte Thumbnail-Generierung.
|
||||
- Moderation: Approve/Reject/Feature; Bulk-Operations.
|
||||
- Analytics: Stats zu Likes, Views, Uploads pro Event.
|
||||
- **Task & Emotion System**:
|
||||
- Bibliothek: Globale + Tenant-spezifische Tasks/Emotions.
|
||||
- Zuweisung: Drag-and-Drop zu Events; Fortschritts-Tracking.
|
||||
- **Billing Integration**:
|
||||
- Package-Auswahl: Anzeige verfügbarer Packages und Kauf (Einmalkauf/Subscription).
|
||||
- Ledger: Historie von Package-Käufen und Nutzung.
|
||||
- Stripe-Checkout: Server-side Intent-Erstellung; Webhook-Handling für Confirmation.
|
||||
### Onboarding Journey
|
||||
- Routen `/event-admin/welcome/*` bilden den Flow.
|
||||
- `useOnboardingProgress` persistiert Fortschritt (localStorage) und synchronisiert mit Backend (`onboarding_completed_at`).
|
||||
- Paketwahl nutzt `GET /tenant/packages`; Stripe/PayPal-Fallbacks informieren bei fehlender Konfiguration.
|
||||
- Dashboard weist per CTA auf offenes Onboarding hin, bis ein erstes Event erstellt wurde.
|
||||
|
||||
### Offline & Sync
|
||||
- **Service Worker**: Cache von App-Shell, Events, Photos (Cache-Control: max-age=5min für dynamische Daten).
|
||||
- **Background Sync**: Queued Mutations (z.B. Photo-Approvals) syncen bei Connectivity.
|
||||
- **Conflict Resolution**: ETag/If-Match Headers; Optimistic Updates mit Rollback bei Conflicts.
|
||||
### Event Lifecycle
|
||||
- Erstellung prüft Paketverfügbarkeit; generiert Join-Token.
|
||||
- Bearbeiten erlaubt Statuswechsel, Aufgaben, Emotions, Join-Token-Verwaltung.
|
||||
- Veröffentlichen schaltet Guest-PWA frei; Archivieren respektiert Retention-Policy.
|
||||
|
||||
### Error Handling & UX
|
||||
- **Rate Limits**: 429-Responses handhaben mit Retry-Logic und User-Feedback ("Zu viele Anfragen, versuche es später").
|
||||
- **Offline Mode**: Degradiertes UI (Read-Only); Sync-Status-Indikator.
|
||||
- **i18n**: react-i18next mit JSON (`public/lang/{locale}/admin.json`); de/en; Locale aus User-Profile oder URL-Prefix (/de/, /en/); Detection via LanguageDetector; RTL nicht in MVP.
|
||||
|
||||
## API-Integration
|
||||
Die App konsumiert den API-Contract aus docs/prp/03-api.md. Schlüssel-Endpunkte:
|
||||
|
||||
### Auth
|
||||
- `POST /oauth/token`: PKCE-Code für Access/Refresh-Token.
|
||||
- `POST /oauth/token/refresh`: Token-Rotation.
|
||||
|
||||
### Events
|
||||
- `GET /tenant/events`: Liste (paginiert, filterbar nach Status/Datum).
|
||||
- `POST /tenant/events`: Erstellen (validiert Tenant-Package und erstellt Event-Package).
|
||||
- `GET /tenant/events/{id}`: Details inkl. Tasks, Stats, package_limits.
|
||||
- `PATCH /tenant/events/{id}`: Update (ETag für Concurrency).
|
||||
- `DELETE /tenant/events/{id}`: Archivieren.
|
||||
|
||||
### Photos
|
||||
- `GET /tenant/events/{event_id}/photos?since={cursor}`: Inkrementelle Liste.
|
||||
- `POST /tenant/events/{event_id}/photos`: Metadata + signed Upload-URL.
|
||||
- `PATCH /tenant/photos/{id}`: Moderation (approve, feature).
|
||||
- `DELETE /tenant/photos/{id}`: Löschung mit Audit.
|
||||
### Medien & Moderation
|
||||
- Direktupload via signed URLs, Thumbnail-Generierung serverseitig.
|
||||
- Moderations-Grid mit Bulk-Aktionen, Filter (Neu, Genehmigt, Featured).
|
||||
- Analytics: Likes, Uploadzahlen, aktive Gäste.
|
||||
|
||||
### Tasks & Emotions
|
||||
- `GET /tenant/tasks`: Tenant-Overrides + globale Bibliothek.
|
||||
- `POST /tenant/events/{id}/tasks`: Zuweisung.
|
||||
- Ähnlich für Emotions.
|
||||
- Globale + Tenant-spezifische Bibliothek.
|
||||
- Drag-and-Drop Zuweisung, Fortschritt je Event, Emotion-Tagging.
|
||||
|
||||
### Billing & Checkout
|
||||
- Pakete + Credit-Balance anzeigen.
|
||||
- Stripe PaymentIntent & PayPal Smart Buttons; Fallback-Meldung bei fehlender Konfiguration.
|
||||
- Ledger mit Historie (Paginierung, Filter).
|
||||
|
||||
### Settings
|
||||
- `GET /tenant/settings`: Tenant-Konfig (Theme, Limits, Legal-Links).
|
||||
- `PATCH /tenant/settings`: Update.
|
||||
- Branding (Logo, Farben), Domain/Links, Legal Pages.
|
||||
- Notification Preferences, Paketlimits, Onboarding-Reset.
|
||||
|
||||
### Billing
|
||||
- `GET /tenant/packages`: Tenant-Packages und Limits.
|
||||
- `POST /tenant/purchases/intent`: Stripe-Checkout-Session für Package erstellen.
|
||||
- `GET /api/v1/packages`: Verfügbare Packages.
|
||||
### Offline & Sync
|
||||
- Service Worker `public/admin-sw.js` cached App-Shell `/event-admin` und statische Assets, liefert Offline-Fallback für Navigation.
|
||||
- Mutationen werden gequeued und nach Reconnect synchronisiert.
|
||||
- ETag / If-Match für konfliktfreie Updates, Optimistic UI mit Rollback.
|
||||
|
||||
### Pagination & Errors
|
||||
- Standard: `page`, `per_page` (max 50 für Mobile).
|
||||
- Errors: Parsen von `{ error: { code, message } }`; User-freundliche Messages (z.B. "Package-Limit überschritten").
|
||||
### Fehlerbehandlung & UX
|
||||
- Rate-Limit (429) → Retry-Hinweis.
|
||||
- Offline-Banner + Retry-Buttons an kritischen Stellen (Checkout, Upload).
|
||||
- i18n via `react-i18next` (de/en); Strings in `public/lang/{locale}/admin.json`.
|
||||
|
||||
## Non-Functional Requirements
|
||||
- **Performance**: Ladezeiten < 2s; Lazy-Loading für Galleries.
|
||||
- **Sicherheit**: Kein PII-Logging; Token-Expiration-Handling; CSRF-Schutz via PKCE.
|
||||
- **Accessibility**: Framework7 ARIA-Support; Dark Mode (System-Preference).
|
||||
- **Testing**: Unit-Tests für API-Calls; E2E-Tests für Flows (Cypress).
|
||||
## API-Integration
|
||||
Die App nutzt Endpunkte aus `docs/prp/03-api.md`.
|
||||
|
||||
Für detaillierte UI-Seiten siehe pages-ui.md; für Settings siehe settings-config.md.
|
||||
| Bereich | Endpunkte |
|
||||
| --- | --- |
|
||||
| Auth | `POST /oauth/token`, `POST /oauth/token/refresh` |
|
||||
| Onboarding | `GET /tenant/me` (Progress Flags), `GET /tenant/packages`, `POST /tenant/events` |
|
||||
| Events | `GET/POST/PATCH/DELETE /tenant/events`, `POST /tenant/events/{event}/toggle`, Join-Token Routen |
|
||||
| Medien | `GET /tenant/events/{event}/photos`, `POST /tenant/events/{event}/photos`, `PATCH /tenant/photos/{id}` |
|
||||
| Tasks & Emotions | `GET /tenant/tasks`, `POST /tenant/events/{event}/tasks`, `GET /tenant/emotions` |
|
||||
| Settings | `GET/PATCH /tenant/settings`, `GET /tenant/credits/balance`, `POST /tenant/purchases/intent` |
|
||||
|
||||
## Nicht-funktionale Anforderungen
|
||||
- **Performance**: Ladezeit < 2s; Code-Splitting der Onboarding-Screens.
|
||||
- **Sicherheit**: Keine sensiblen Logs; CSRF-mitigiert via PKCE/OAuth; Token-Refresh automatisiert.
|
||||
- **Accessibility**: Tastaturbedienung, Fokus-Indikatoren, `prefers-reduced-motion`.
|
||||
- **Internationalisierung**: Sprachumschaltung in Einstellungen; Standard de, Fallback en.
|
||||
|
||||
## Teststrategie
|
||||
- **PHPUnit**: Feature-Tests für Auth-Guards (Tenant ohne Events → Welcome Flow).
|
||||
- **React Testing Library**: `TenantWelcomeLayout`, `PackageSelection`, `OnboardingGuard`, `OrderSummary`.
|
||||
- **Playwright**: `tests/e2e/tenant-onboarding-flow.test.ts` deckt Login, Welcome → Packages → Summary → Event Setup ab; Erweiterung um Stripe/PayPal Happy Paths und Offline/Retry geplant.
|
||||
- **Smoke Tests**: `npm run test:e2e` in CI mit optionalen Credentials (`E2E_TENANT_EMAIL`, `E2E_TENANT_PASSWORD`, Stripe/PayPal Keys).
|
||||
|
||||
Für UI-Details siehe `docs/prp/tenant-app-specs/pages-ui.md`. Einstellungen werden in `docs/prp/tenant-app-specs/settings-config.md` beschrieben.
|
||||
|
||||
9
docs/prp/tenant-app-specs/pages-ui-legacy.md
Normal file
9
docs/prp/tenant-app-specs/pages-ui-legacy.md
Normal file
@@ -0,0 +1,9 @@
|
||||
# Legacy-UI-Referenz (Framework7, Stand 2025-09-13)
|
||||
|
||||
Die ursprüngliche Dokumentation zur Framework7-basierten Tenant-Admin-App wurde im Commit-Verlauf abgelegt (`pages-ui.md` bis einschließlich 2025-09-13).
|
||||
|
||||
Sie enthält:
|
||||
- Wireframes für Login, Dashboard, Events, Fotos, Members, Tasks, Settings, Billing.
|
||||
- Hinweise zur Nutzung von Framework7-Komponenten (Toolbar, List, Card, Pull-to-Refresh, Infinite Scroll).
|
||||
|
||||
Für Migrations- oder Vergleichszwecke kann die Version über `git show <commit>:docs/prp/tenant-app-specs/pages-ui.md` abgerufen werden. Die aktuelle Implementierung basiert dagegen auf React + Tailwind (siehe `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.
|
||||
23
docs/screenshots/tenant-admin-onboarding/01-welcome-hero.svg
Normal file
23
docs/screenshots/tenant-admin-onboarding/01-welcome-hero.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
|
||||
<defs>
|
||||
<linearGradient id="heroGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#f43f5e"/>
|
||||
<stop offset="50%" stop-color="#d946ef"/>
|
||||
<stop offset="100%" stop-color="#6366f1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1280" height="720" fill="url(#heroGradient)"/>
|
||||
<text x="80" y="180" font-size="64" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#ffffff">
|
||||
Willkommen im Event-Erlebnisstudio
|
||||
</text>
|
||||
<text x="80" y="260" font-size="28" font-family="Inter, Arial, sans-serif" fill="#fdf2f8">
|
||||
Führe Gäste durch Fotochallenges, Likes und Erinnerungen – alles in einer Admin-App.
|
||||
</text>
|
||||
<rect x="80" y="320" width="320" height="72" rx="36" fill="#111827" opacity="0.9"/>
|
||||
<text x="120" y="368" font-size="28" font-family="Inter, Arial, sans-serif" fill="#ffffff">
|
||||
Pakete entdecken
|
||||
</text>
|
||||
<text x="80" y="420" font-size="22" font-family="Inter, Arial, sans-serif" fill="#fef2f2">
|
||||
oder Demo überspringen
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
33
docs/screenshots/tenant-admin-onboarding/02-how-it-works.svg
Normal file
33
docs/screenshots/tenant-admin-onboarding/02-how-it-works.svg
Normal file
@@ -0,0 +1,33 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
|
||||
<rect width="1280" height="720" fill="#0f172a"/>
|
||||
<text x="80" y="120" font-size="56" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#f8fafc">
|
||||
So funktioniert es
|
||||
</text>
|
||||
<g transform="translate(80,180)">
|
||||
<rect width="320" height="360" rx="32" fill="#1e293b"/>
|
||||
<text x="40" y="80" font-size="36" font-family="Inter, Arial, sans-serif" font-weight="600" fill="#f472b6">
|
||||
Momente festhalten
|
||||
</text>
|
||||
<text x="40" y="130" font-size="22" font-family="Inter, Arial, sans-serif" fill="#e2e8f0">
|
||||
Gäste laden Fotos direkt über die PWA hoch – du moderierst in Echtzeit.
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(460,180)">
|
||||
<rect width="320" height="360" rx="32" fill="#1e293b"/>
|
||||
<text x="40" y="80" font-size="36" font-family="Inter, Arial, sans-serif" font-weight="600" fill="#60a5fa">
|
||||
Aufgaben aktivieren
|
||||
</text>
|
||||
<text x="40" y="130" font-size="22" font-family="Inter, Arial, sans-serif" fill="#e2e8f0">
|
||||
Challenges und Badges halten deine Community bei Laune.
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(840,180)">
|
||||
<rect width="320" height="360" rx="32" fill="#1e293b"/>
|
||||
<text x="40" y="80" font-size="36" font-family="Inter, Arial, sans-serif" font-weight="600" fill="#34d399">
|
||||
Gäste begeistern
|
||||
</text>
|
||||
<text x="40" y="130" font-size="22" font-family="Inter, Arial, sans-serif" fill="#e2e8f0">
|
||||
Likes, Slideshow und QR-Einladungen bringen Aufmerksamkeit an jeden Tisch.
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,57 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
|
||||
<rect width="1280" height="720" fill="#f1f5f9"/>
|
||||
<text x="80" y="120" font-size="56" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#0f172a">
|
||||
Wähle dein Eventpaket
|
||||
</text>
|
||||
<g transform="translate(80,180)">
|
||||
<rect width="320" height="360" rx="24" fill="#ffffff" stroke="#e2e8f0" stroke-width="2"/>
|
||||
<text x="40" y="80" font-size="32" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#0f172a">
|
||||
Starter
|
||||
</text>
|
||||
<text x="40" y="130" font-size="22" font-family="Inter, Arial, sans-serif" fill="#1f2937">
|
||||
1 Event, 250 Uploads
|
||||
</text>
|
||||
<text x="40" y="200" font-size="48" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#f43f5e">
|
||||
29 €
|
||||
</text>
|
||||
<rect x="40" y="260" width="200" height="56" rx="28" fill="#f43f5e"/>
|
||||
<text x="70" y="298" font-size="24" font-family="Inter, Arial, sans-serif" fill="#ffffff">
|
||||
Paket wählen
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(460,180)">
|
||||
<rect width="320" height="360" rx="24" fill="#0f172a"/>
|
||||
<text x="40" y="80" font-size="32" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#f8fafc">
|
||||
Pro
|
||||
</text>
|
||||
<text x="40" y="130" font-size="22" font-family="Inter, Arial, sans-serif" fill="#e2e8f0">
|
||||
3 Events, 1000 Uploads, Premium-Support
|
||||
</text>
|
||||
<text x="40" y="200" font-size="48" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#38bdf8">
|
||||
79 €
|
||||
</text>
|
||||
<rect x="40" y="260" width="200" height="56" rx="28" fill="#38bdf8"/>
|
||||
<text x="70" y="298" font-size="24" font-family="Inter, Arial, sans-serif" fill="#0f172a">
|
||||
Paket wählen
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(840,180)">
|
||||
<rect width="320" height="360" rx="24" fill="#ffffff" stroke="#e2e8f0" stroke-width="2"/>
|
||||
<text x="40" y="80" font-size="32" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#0f172a">
|
||||
Enterprise
|
||||
</text>
|
||||
<text x="40" y="130" font-size="22" font-family="Inter, Arial, sans-serif" fill="#1f2937">
|
||||
Unbegrenzte Events, SLA, Custom Branding
|
||||
</text>
|
||||
<text x="40" y="200" font-size="48" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#0ea5e9">
|
||||
Auf Anfrage
|
||||
</text>
|
||||
<rect x="40" y="260" width="200" height="56" rx="28" fill="#0ea5e9"/>
|
||||
<text x="60" y="298" font-size="24" font-family="Inter, Arial, sans-serif" fill="#ffffff">
|
||||
Beratung anfragen
|
||||
</text>
|
||||
</g>
|
||||
<text x="80" y="600" font-size="20" font-family="Inter, Arial, sans-serif" fill="#475569">
|
||||
Stripe & PayPal Widgets erscheinen unterhalb der Karten, sobald Keys konfiguriert sind.
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,53 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
|
||||
<rect width="1280" height="720" fill="#0b1120"/>
|
||||
<g transform="translate(80,80)">
|
||||
<rect width="520" height="560" rx="32" fill="#111c2e"/>
|
||||
<text x="40" y="80" font-size="48" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#f8fafc">
|
||||
Bestellübersicht
|
||||
</text>
|
||||
<text x="40" y="140" font-size="22" font-family="Inter, Arial, sans-serif" fill="#cbd5f5">
|
||||
Paket: Pro – 3 Events, 1000 Uploads
|
||||
</text>
|
||||
<text x="40" y="180" font-size="22" font-family="Inter, Arial, sans-serif" fill="#cbd5f5">
|
||||
Zahlungsart: Stripe oder PayPal
|
||||
</text>
|
||||
<line x1="40" y1="220" x2="480" y2="220" stroke="#1f2a3d" stroke-width="2"/>
|
||||
<text x="40" y="280" font-size="24" font-family="Inter, Arial, sans-serif" fill="#60a5fa">
|
||||
Zwischensumme
|
||||
</text>
|
||||
<text x="360" y="280" font-size="32" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#60a5fa">
|
||||
79 €
|
||||
</text>
|
||||
<text x="40" y="340" font-size="24" font-family="Inter, Arial, sans-serif" fill="#f472b6">
|
||||
Gesamt (inkl. MwSt)
|
||||
</text>
|
||||
<text x="360" y="340" font-size="36" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#f472b6">
|
||||
94,01 €
|
||||
</text>
|
||||
<rect x="40" y="420" width="240" height="64" rx="32" fill="#f472b6"/>
|
||||
<text x="70" y="462" font-size="26" font-family="Inter, Arial, sans-serif" fill="#ffffff">
|
||||
Weiter zum Setup
|
||||
</text>
|
||||
<text x="40" y="520" font-size="18" font-family="Inter, Arial, sans-serif" fill="#94a3b8">
|
||||
Zahlungsdienste offline? Zeige Hinweis und bitte um erneuten Versuch.
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(660,120)">
|
||||
<rect width="480" height="220" rx="24" fill="#f8fafc"/>
|
||||
<text x="40" y="80" font-size="28" font-family="Inter, Arial, sans-serif" font-weight="600" fill="#111827">
|
||||
Stripe-Elemente
|
||||
</text>
|
||||
<text x="40" y="130" font-size="20" font-family="Inter, Arial, sans-serif" fill="#1f2937">
|
||||
Kartennummer, Ablaufdatum, CVC, Kartenhalter
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(660,380)">
|
||||
<rect width="480" height="220" rx="24" fill="#ffffff"/>
|
||||
<text x="40" y="80" font-size="28" font-family="Inter, Arial, sans-serif" font-weight="600" fill="#0f172a">
|
||||
PayPal Smart Buttons
|
||||
</text>
|
||||
<text x="40" y="130" font-size="20" font-family="Inter, Arial, sans-serif" fill="#1f2937">
|
||||
Automatische Darstellung abhängig vom PayPal Client ID.
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
43
docs/screenshots/tenant-admin-onboarding/05-event-setup.svg
Normal file
43
docs/screenshots/tenant-admin-onboarding/05-event-setup.svg
Normal file
@@ -0,0 +1,43 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
|
||||
<rect width="1280" height="720" fill="#f8fafc"/>
|
||||
<text x="80" y="120" font-size="56" font-family="Inter, Arial, sans-serif" font-weight="700" fill="#0f172a">
|
||||
Bereite dein erstes Event vor
|
||||
</text>
|
||||
<g transform="translate(80,180)">
|
||||
<rect width="520" height="420" rx="24" fill="#ffffff" stroke="#e2e8f0" stroke-width="2"/>
|
||||
<text x="40" y="80" font-size="28" font-family="Inter, Arial, sans-serif" fill="#1f2937">
|
||||
Eventname
|
||||
</text>
|
||||
<rect x="40" y="100" width="440" height="56" rx="12" fill="#f1f5f9"/>
|
||||
<text x="50" y="135" font-size="20" font-family="Inter, Arial, sans-serif" fill="#64748b">
|
||||
Sommerfest Kreativagentur
|
||||
</text>
|
||||
<text x="40" y="180" font-size="28" font-family="Inter, Arial, sans-serif" fill="#1f2937">
|
||||
Datum & Uhrzeit
|
||||
</text>
|
||||
<rect x="40" y="200" width="440" height="56" rx="12" fill="#f1f5f9"/>
|
||||
<text x="50" y="235" font-size="20" font-family="Inter, Arial, sans-serif" fill="#64748b">
|
||||
21.08.2025 – 18:00 Uhr
|
||||
</text>
|
||||
<text x="40" y="280" font-size="28" font-family="Inter, Arial, sans-serif" fill="#1f2937">
|
||||
Sprache & Features
|
||||
</text>
|
||||
<text x="40" y="320" font-size="20" font-family="Inter, Arial, sans-serif" fill="#475569">
|
||||
[x] Deutsche UI, [ ] Englische UI, [x] Aufgaben aktivieren, [x] Join-Token generieren
|
||||
</text>
|
||||
<rect x="40" y="360" width="200" height="56" rx="28" fill="#f43f5e"/>
|
||||
<text x="60" y="398" font-size="24" font-family="Inter, Arial, sans-serif" fill="#ffffff">
|
||||
Event erstellen
|
||||
</text>
|
||||
</g>
|
||||
<g transform="translate(640,200)">
|
||||
<rect width="520" height="320" rx="24" fill="#111827"/>
|
||||
<text x="40" y="80" font-size="28" font-family="Inter, Arial, sans-serif" fill="#f8fafc">
|
||||
Success States
|
||||
</text>
|
||||
<text x="40" y="130" font-size="22" font-family="Inter, Arial, sans-serif" fill="#cbd5f5">
|
||||
Zeige „Event erstellt“ Toast und leite ins Dashboard weiter, sobald das Backend
|
||||
den neuen Join-Token bestätigt hat.
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
11
docs/screenshots/tenant-admin-onboarding/README.md
Normal file
11
docs/screenshots/tenant-admin-onboarding/README.md
Normal file
@@ -0,0 +1,11 @@
|
||||
# Tenant-Admin-Onboarding – Walkthrough Assets
|
||||
|
||||
| Datei | Beschreibung |
|
||||
| --- | --- |
|
||||
| `01-welcome-hero.svg` | Hero-Screen mit CTA „Pakete entdecken“. |
|
||||
| `02-how-it-works.svg` | Drei Highlight-Karten (Fotos, Aufgaben, Gäste). |
|
||||
| `03-package-selection.svg` | Paketübersicht inkl. Stripe/PayPal Modulen. |
|
||||
| `04-order-summary.svg` | Zusammenfassung mit Zahlungsoptionen. |
|
||||
| `05-event-setup.svg` | Formular für das erste Event. |
|
||||
|
||||
> Die SVGs sind Layout-Platzhalter für Dokumentationszwecke. Für Marketing-/Store-Screenshots bitte native Captures aus der App generieren.
|
||||
@@ -3,28 +3,33 @@
|
||||
## Goal
|
||||
Replace slug-based guest access with opaque, revocable join tokens and provide printable QR layouts tied to those tokens.
|
||||
|
||||
## Status (Stand 12.10.2025)
|
||||
- **Phase 1 – Data & Backend:** vollständig abgeschlossen.
|
||||
- **Phase 2 – Guest PWA:** Aufgaben zu Fehlerzuständen und Regressionstests noch offen.
|
||||
- **Phase 3 – Tenant Admin UX:** Layout-Downloads und Abschaltung des alten Slug-QR-Flows noch offen.
|
||||
- **Phase 4 – Migration & Cleanup:** alle Aufgaben offen.
|
||||
|
||||
## Phase 1 – Data & Backend
|
||||
- [x] Create `event_join_tokens` table (token, event_id, usage_limit/count, expires_at, revoked_at, created_by).
|
||||
- [x] Add Eloquent model + relations (`Event::joinTokens()`), factory, and seed helper.
|
||||
- [x] Implement service for token generation/rotation (secure RNG, audit logging).
|
||||
- [x] Expose tenant API endpoints for listing/creating/revoking tokens.
|
||||
- [x] Introduce middleware/controller updates so guest API resolves `/e/{token}` → event.
|
||||
- [ ] Add rate limiting + logging for invalid token attempts.
|
||||
- [x] Add rate limiting + logging for invalid token attempts.
|
||||
|
||||
## Phase 2 – Guest PWA
|
||||
- [x] Update router and data loaders to use `:token` paths.
|
||||
- [x] Adjust storage/cache keys to use token identifiers.
|
||||
- [ ] Display friendly error states for expired/invalid tokens.
|
||||
- [ ] Regression-test photo upload, likes, and stats flows via token.
|
||||
- [x] Display friendly error states for expired/invalid tokens.
|
||||
- [x] Regression-test photo upload, likes, and stats flows via token.
|
||||
|
||||
## Phase 3 – Tenant Admin UX
|
||||
- [x] Build “QR & Invites” management UI (list tokens, usage stats, rotate/revoke).
|
||||
- [x] Hook Filament action + PWA screens to call new token endpoints.
|
||||
- [ ] Generate five print-ready layouts (PDF/SVG) per token with download options.
|
||||
- [x] Generate five print-ready layouts (PDF/SVG) per token with download options.
|
||||
- [ ] Deprecate slug-based QR view; link tenants to new flow.
|
||||
|
||||
## Phase 4 – Migration & Cleanup
|
||||
- [ ] Backfill tokens for existing published events and notify tenants to reprint.
|
||||
- [ ] Remove slug parameters from public endpoints once traffic confirms token usage.
|
||||
- [ ] Update documentation (PRP, onboarding guides, runbooks) to reflect token process.
|
||||
- [ ] Add feature/integration tests covering expiry, rotation, and guest flows.
|
||||
|
||||
@@ -29,10 +29,10 @@ Owner: Codex (handoff)
|
||||
|
||||
## Priority: Later ( polish + delivery )
|
||||
- [x] Align theming, typography, and transitions with the legacy mobile look (consider porting key styles from fotospiel-tenant-app/tenant-admin-app/src/styles). Tenant admin layout now reuses marketing brand palette, fonts, and gradient utilities; Tailwind variables capture the shared tokens.
|
||||
- [ ] Review PWA manifest/offline setup so the combined welcome + management flow works for Capacitor/TWA packaging. Note required updates in public/manifest.json and build scripts.
|
||||
- [ ] Extend docs: update PRP onboarding sections and add a walkthrough video/screencaps under docs/screenshots/tenant-admin-onboarding. Capture test scope for future Playwright/E2E coverage.
|
||||
- [ ] Add automated coverage (React Testing Library for step flows, feature tests for routing guard) once implementation stabilises. Playwright spec `tests/e2e/tenant-onboarding-flow.test.ts` now executes with seeded creds—extend it to cover Stripe/PayPal happy paths and guard edge cases.
|
||||
- [ ] Finalise direct checkout in the welcome summary. Stripe + PayPal hooks are live; add mocked/unit coverage and end-to-end assertions before rolling out broadly.
|
||||
- [x] Review PWA manifest/offline setup so die kombinierte Welcome+Management-Experience TWA-/Capacitor-ready ist (Manifest + `admin-sw.js` dokumentiert).
|
||||
- [x] Extend docs: PRP-Onboarding-Abschnitte aktualisiert, Screenshots unter `docs/screenshots/tenant-admin-onboarding/` ergänzt, Testscope notiert.
|
||||
- [x] Add automated coverage: Vitest + Testing Library für Welcome Landing, Dashboard-Guard und Checkout-Komponenten; `npm run test:unit` führt Suite aus.
|
||||
- [x] Finalise direct checkout: Stripe/PayPal-Flows markieren Fortschritt, API-Mocks + Unit-Tests decken Erfolgs- und Fehlerpfade ab.
|
||||
- [x] Lokalisierung ausbauen: Landing-, Packages-, Summary- und Event-Setup-Screens sind nun DE/EN übersetzt; Copy-Review für weitere Module (Tasks/Billing/Members) bleibt offen.
|
||||
|
||||
## Risks & Open Questions
|
||||
|
||||
Reference in New Issue
Block a user