seminarhof-e2e-mrffdsce/docs/design/staff.md

Staff Portal — UI Design

Two sub-views: Kitchen and Cleaning. Same mobile-first shell, different content compositions.

Audience: kitchen cooks, housekeepers. Read-only. Mobile/tablet first (phones over the counter, tablets in the housekeeping cupboard). Polled refresh, no websockets in v1.

Theme: same Mantine tokens as admin/client (red primary on dark surface), but with a simpler layout — large touch targets, generous spacing, fewer columns.

Auth and routing

• Same js-auth flow as admin/client
• After login, role-based redirect: kitchen → /staff/kitchen, cleaning → /staff/cleaning
• A staff user can hold both roles (small team); UI offers a switcher in the header

Shell

• Top bar: venue name · current date · user avatar · role switcher (if applicable) · refresh button
• Body: list / detail
• No sidebar (mobile-first)

---

Kitchen view

1. Event list (landing)

• One card per upcoming event, chronological
• Card content: dates · group name · headcount · today's meal-count badge · "info missing" alert badge if any dietary / headcount fields are still pending
• Filter chips: Today · This week · Upcoming
• Tap a card → event detail

2. Event detail

The workhorse. Visual-heavy.

Sticky header

• Group name · course name · headcount · dates
• Meal times: Frühstück / Mittagessen / Abendessen (single line)

Dietary breakdown card (top of body)

• RingProgress or DonutChart showing % per dietary tag (vegan, vegetarian, gluten-free, lactose-free, etc.)
• Counts per slice
• Same colour tokens reused on the participant list below for visual continuity

Today's meals card

• Small KPI tiles per meal: Frühstück / Mittagessen / Abendessen
• Each tile shows: count for today, delta vs. headcount when participants arrive late or leave early ("26 (–2)")
• Cake tile shows yes/no for today + €3/person/day total when on

Allergies & specials card

• Flat list grouped by allergen (nuts, soy, strict gluten, dairy, etc.)
• Each row: icon · allergen · count · participant initials
• Severity tier:
  • ⚠ standard allergy (avoid in dishes)
  • ★ requires fully separate prep (the rare 1% that triggers the manual special-diet surcharge)

Cake days card

• Calendar strip (5 days for a 5-night booking)
• Cake-on days highlighted; €3/person/day shown

Notes card

• Per-booking admin notes filtered to kitchen-relevant only (notes.audience=kitchen). Personnel notes never appear here.

Daily plan (free-text)

• The free-text portion of the schedule the client submitted
• Read-only

Data sources

All read-side aggregations on existing tables — no new schema:

• Dietary breakdown: SUM(participants) GROUP BY dietary_tag for the booking
• Today's meals: participants WHERE booking_id = X AND kind IN (overnight, day_guest) AND arrival_date <= today AND departure_date > today
• Allergies: flat list from participant_allergies joined to allergen reference table
• Cake days, meal times: from bookings.extras and bookings.meal_times

---

Cleaning view

1. Event list (landing)

• One row per event sorted by changeover date (departure or arrival)
• Row content: changeover type icon (departure / arrival / flying) · date · group name · room count · flying-changeover badge
• Tap → cleaning detail

2. Cleaning detail

Spatial / temporal, not dietary.

Sticky header

• Group · dates · room count · flying-changeover badge if applicable ("Rooms cleared by 10:00, ready by 17:00")

Arrivals / departures card

• Arrival time and departure time
• Number of rooms in use
• Whether the previous group's departure overlaps (flying changeover)

Room status table (the workhorse)

Room	Type	Beds	Flags	Status
5	MBZ	3	quiet	clean for arrival 15:00
8	DZ	2	shared bath, quiet	clean for arrival 15:00
10	DZ	2	dogs allowed	extra deep clean

• Driven by the booking's room assignments
• Flags surfaced as icons (dogs, wheelchair, allergy-friendly, shared bath, double bed 140cm)
• "Extra deep clean" auto-shown for dogs_allowed rooms when occupied
• Per-room admin note shown inline if present

Notes card

• Per-booking admin notes filtered to cleaning-relevant only (notes.audience=cleaning)

Data sources

All on existing tables:

• Room assignments → which rooms are occupied
• Room flags → from rooms
• Flying changeover → derived from booking start_date == previous booking end_date

---

Shared shell components

• <StaffEventCard /> — card used in both kitchen and cleaning landing lists
• <StickyEventHeader /> — same shell, different content props
• <NotesCard audience="kitchen|cleaning" /> — filters notes by audience tag

Non-goals

• No editing anywhere in the staff view (read-only by definition)
• No real-time updates in v1 — manual refresh button + a "last fetched X minutes ago" indicator
• No WhatsApp integration in v1 — handover §6 explicit
• No HR features (cook rota assignment is admin-side)