soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
Files
5fbb9cb2406bcbb3651ef9c810266dea000a8e3e
fotospiel-app/docs/prp/tenant-app-specs/pages-ui.md

7.6 KiB
Raw Blame History

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.

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: Rechts-nach-Links für de/en; Icons von Framework7-Icons (Material).

Benötigte Seiten und Komponenten

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.

Register-Seite (ähnlich Login)

  • Unterschiede: Form für Email/Password + Terms-Checkbox; Submit zu /oauth/register.

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.

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

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

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

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.

Reference in New Issue View Git Blame Copy Permalink