seminarhof-e2e-mrfyultj/docs/design/client.md

# Client Portal — UI Design

Audience: retreat organisers (e.g. Yoga Retreat e.V.) and any colleagues
they invite (multi-user per org, locked earlier).

Theme: Mantine, dark surface, red primary — the warm, card-based tone
from the reference screenshot. Same tokens as admin/staff but
distinctly card-driven layouts (admin is denser).

## Sidebar

Two-group sidebar. The **MY EVENT** group is conditionally visible —
shown only when the user has selected an active event.

```
SEMINARHOF DRAWEHN
Client Portal
─────────────────
[org-switcher] Yoga Retreat e.V. ▾    ← visible if user is in >1 org

MY BOOKINGS
  Overview
  My bookings
  Invoices

MY EVENT — Summer Yoga 2026 ▾         ← only when active event set
  Participants
  Room plan
  Dietary info
  Schedule & extras
─────────────────
[avatar] User name (role on the org)
```

Active event is set by clicking a booking in Overview or My bookings.
The dropdown switches between events the user has access to.

## 1. Overview (landing)

Reference screenshot is canonical. Cards: upcoming bookings (with
completeness %), invoices preview, current event details snapshot.
Booking info-complete % drives prompts elsewhere in the portal.

## 2. My bookings

Three vertical sections:

- **Upcoming** — full card per booking, large dates, status pill,
  completeness %, primary CTA "Complete booking info →"
- **Past** — collapsed list, one compact row each. Tap to expand
  + download invoices
- **Cancelled** — only rendered if any exist; collapsed by default

No filters, no bulk actions, no search. Org clients have small lists.

## 3. Invoices

- Two tabs: **Deposit** · **Final**
- Per-row: booking name · invoice number · issue date · amount · status
  (paid / outstanding) · download PDF
- Implicitly grouped by booking (booking title as subheader)
- Empty state: "No invoices yet — your invoice will appear once Christina
  has issued it."

## 4. Participants (per event)

Where the team builds the participant list.

- Top: progress bar `17 / 28 added`
- Add row form: name (req) · email (optional) · age (req if child) ·
  kind (overnight | day_guest) · notes
- **Bulk paste from CSV/TSV** — common for organisers with a Google
  Sheet. Paste into modal, map columns, import.
- Per-row inline editing, dietary chip preview, allergy preview
- **"Send dietary self-form to all guests"** — sends each guest a
  tokenised link to fill in their own dietary preferences without
  needing an account. Organiser sees status per guest (pending / done).

## 5. Room plan (per event)

Split view, same model as admin's room-plan tab.

- **Left — assignment grid:** rows = overnight participants. Click a
  participant to select, click a room to assign. Capacity counter
  per room.
- **Right — floor-plan visualisation:** SVG overlay on `grundrisse.pdf`,
  hot-spotted with room rectangles. Room number, capacity dots filled
  per occupant, flag icons.
- **Top banner** explaining the click-select pattern (no DnD in v1).
- **Auto-suggest button** ("Suggest a layout") — assigns participants
  by priority: special-needs flags first, couples grouped if marked,
  fill smallest rooms last.
- **Flag legend** above the floor plan (wheelchair, dogs allowed, quiet,
  shared bath, ground floor, allergy-friendly bedding).
- **Validation inline:** can't assign over capacity; wheelchair-flagged
  participants only assignable to wheelchair-accessible rooms (1, 2).
- Implicit autosave, "Saved" indicator.

## 6. Dietary info (per event)

Aggregate view + per-participant editor. Reuses the kitchen view's
dietary breakdown component, but editable.

- **Top:** dietary breakdown donut + missing-info count
  ("3 participants haven't told us their diet yet")
- **Quick action:** "Mark everyone as default vegan" — bulk set
- **Allergies block** — flat list with "+ Add allergy" picker
- **Pending list** — participants without dietary info, with prompt
- **Self-form CTA** mirrored from Participants page

## 7. Schedule & extras (per event)

### Schedule card
- Three time pickers: Frühstück · Mittagessen · Abendessen —
  validated against venue's allowed-window config
- Free-text daily plan textarea
- Hint: "Kitchen needs your meal times to plan portions."

### Extras card
Toggle list with descriptions and gross (brutto) prices:
- Cake (€3 / person / day) → per-day calendar picker
- Second seminar room (€80 / day for the whole stay)
- Early arrival before lunch (€30 / person flat)
- Bedlinen & towel set (€14 / person) — toggle "provided by Seminarhof"
  vs "guests bring their own"
- Massage bench hire (€15 each + qty)
- Sauna note: "Logged on departure — €10 / person, min €50 total"
- Subtotal preview at bottom
- Special requests textarea — "Anything else we should know?"

## Cross-page UX

- **Completeness pill** in the corner of every page — same "Booking
  info complete %" indicator as the Overview, so the client always
  knows what's left
- **Implicit autosave** — no manual save button, "Saved" indicator
  next to the field after each change
- **Per-event switcher** at the top of the sidebar, lists upcoming
  events first, past events below
- **Empty states everywhere** — written empty state with a one-line
  "what should I do" prompt
- **Locale-aware** — German default, EN per user `locale` field
- **Mobile** — sidebar collapses to a bottom-nav-style icon strip; all
  pages stack to single column

## Accessibility

- Keyboard navigation across all interactive elements (no DnD means no
  keyboard fallback gap)
- ARIA-correct selects, dialogs, tabs (Mantine handles most by default)
- Sufficient contrast on the dark surface (verify with theme tokens
  before shipping)
- Floor-plan SVG has text labels per room, not just visual rectangles

## Components shared with admin/staff

- Dietary breakdown donut + counts (kitchen view also uses)
- Floor-plan SVG component (admin booking detail also uses)
- Status pill with venue-theme colour tokens
- Completeness pill / progress component
- Room-flag icons set