Cleaner Web App

A mobile-first PWA for cleaners — alternative to the WhatsApp plán walkthrough. Same backend, same task model, but with native checklist UI, inline camera, multi-photo per item, voice notes, and an offline queue.

Open from the WA dispatch link: https://app.flatsbratislava.com/c/<token>.

This is Channel B — the WhatsApp plán walkthrough (Channel A) stays available indefinitely. Cleaners pick. They can start a cleaning in one channel and finish in the other; state is shared.

Sections

• Login (OTP via WhatsApp) — phone-based OTP, 30-day cookie, no email/password.
• Walkthrough scenes — the 6 scenes (checklist, item detail, bulk-mark, issue report, offline, summary).
• Offline mode — service-worker queue + sync indicator.
• Cleaner channel preference — which channel a cleaner uses; switching mid-flow.
• Issue & damage reporting — multi-photo + voice + category → routed via LLM to operator task templates.

Why a web app on top of WA

WhatsApp is good for nudges. It's awkward for:

• A long checklist (no native checkbox UI)
• Multiple photos per item (each photo is a separate message)
• Voice notes when reporting damage (cleaner has to record + send + label separately)
• Offline (WA fails entirely when the basement lift kills signal)

The web app fills those gaps. The cleaner gets a real app surface with one screen per concern, and the operator gets one digest at completion instead of N per-item messages.

What stays shared with WhatsApp

• Auth identity — the cleaner is the same teammates row, identified by phone number.
• Tasks — the same tasks rows, the same operation_tasks templates.
• State — the same cleaner_sessions row backs both channels. A cleaner can mark step 1 done via WA and step 2 done in the app; state is UNIQUE(taskId, teammateId) so there's no fork.
• Operator digest — one summary per task completion, regardless of channel.

What's app-only

• Inline camera with multi-photo per checklist item.
• Offline queue with service worker.
• Voice-note recording in the issue report flow.
• PWA install on the cleaner's home screen.

Implements: gh#524 (Cleaner Web App PWA — Slices 1-3: backend OTP auth + READ foundation, WRITE API + §9.1 cleaner-message LLM routing, React PWA 6 scenes). Related: gh#189 (Channel A — WA walkthrough redesign), gh#249 (cleaner vacation/unavailability tracking), gh#112 (mobile-native capability hooks — useShare/useHaptics/useCamera).