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