186 lines
7.7 KiB
Markdown
186 lines
7.7 KiB
Markdown
# 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**: LTR für de/en (react-i18next); alle Strings via `t('admin.key')`; Icons von Lucide React (aktuell, nicht Framework7).
|
|
|
|
## 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. |