chore: seminarhof customer project
This commit is contained in:
e2e
161
docs/design/client.md
Normal file
161
docs/design/client.md
Normal file
@@ -0,0 +1,161 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user