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

6.0 KiB Raw Permalink Blame History