Seiten- und UI-Design für die Tenant-Admin-App

Status

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.

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.

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`	Paddle Pricing, Feature-Badges, Auswahl persistiert im Onboarding-Context
Zusammenfassung	`/event-admin/welcome/summary`	`OrderSummaryCard`, Stripe Elements, Paddle 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“

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“.

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.

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, Paddle Checkout).

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

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 Paddle-Happy-Path sowie Offline-/Retry-Szenarien.

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.

4.7 KiB Raw Blame History Unescape Escape