[FE-43] Visitor sign-in kiosk page (/kiosk) — touchscreen reception UI

[yusuftomilola]

Overview

The reception desk needs a dedicated touchscreen kiosk page for visitor sign-in. The current platform has no walk-up visitor flow — staff currently use manual sign-in books. A kiosk page eliminates paper logs and automatically notifies the host member.

Context

• Depends on BE-53 for visitor management endpoints
• This page must have a standalone layout (no sidebar, no dashboard shell) — it runs full-screen on a reception tablet
• Pattern: kiosk pages need large tap targets and high contrast for touch use

Tasks

• Create frontend/app/kiosk/layout.tsx — standalone layout with no sidebar, no top nav; full-screen white background with hub logo centered at top
• Create frontend/app/kiosk/page.tsx with two tabs:
  • Expected Visitor: Enter your name → system looks up by name against today's pre-registered visitors → shows host name + purpose → "Check In" button calls POST /visitors/:id/check-in
  • Walk-in: Full name input, host member name search (typeahead from GET /community/members?search=), purpose dropdown (Meeting, Interview, Delivery, Other) → "Check In" calls POST /visitors then POST /visitors/:id/check-in
• After successful check-in: show a large confirmation screen — "Welcome, [Name]! [Host] has been notified." — auto-resets to the home screen after 8 seconds
• Check-out flow: separate "Check Out" button on home screen → enter name → system shows matched checked-in visitors → confirm checkout calls POST /visitors/:id/check-out
• Add a link to /kiosk in the admin nav (Settings or a dedicated "Kiosk Mode" entry)

Files to Modify / Create

• New: frontend/app/kiosk/layout.tsx
• New: frontend/app/kiosk/page.tsx
• New: frontend/lib/react-query/hooks/visitors/useVisitorCheckIn.ts