Teil I
Gästeseite
Öffentliche Präsentations- und Buchungsseite für vier Apartments in Wien. Verfügbar in drei Sprachen (Deutsch, Englisch, Polnisch) und mit fünf wählbaren Designvarianten.
1Startseite und Suche
Die Landingpage präsentiert ein Hero-Bild sowie eine Suchleiste mit vier Feldern: Zielort, Anreisedatum, Abreisedatum und Gästeanzahl.
1Datumsauswahl
Ein Klick auf das Feld „Anreise" öffnet den Kalender. Das Abreisedatum muss mindestens eine Nacht nach der Anreise liegen.
2Gästeanzahl
Stepper mit Buttons „−" und „+". Die maximale Gästezahl hängt vom gewählten Apartment ab.
3Button „Suchen"
Leitet zur Apartmentliste weiter, wobei die Filter (Daten + Gästezahl) per URL-Parameter übernommen werden.
Hinweis
Das Hero enthält eine dezente Ken-Burns-Animation. Sie respektiert die System-Einstellung prefers-reduced-motion — bewegungsempfindliche Nutzer sehen ein statisches Bild.
2Apartmentliste — Filter und Karte
Zweispaltige Ansicht: links Apartmentkarten, rechts eine interaktive Karte (MapLibre GL) von Wien mit Preispillen.
Filter
- Preis — Bereichs-Slider (€/Nacht)
- Schlafzimmer — 1, 2, 3 oder mehr
- Entfernung zum Stephansdom — in Minuten
- Vermietungsart — kurz / lang / hybrid
- Instant Book — nur Apartments mit Sofortbuchung
Smart Search
Das Textsuchfeld versteht natürliche Sprache in sechs Sprachen, z. B. „Wohnung nahe Stephansdom für 4 Personen", „ruhige Wohnung mit Balkon bis 200 Euro". Die Abfrage wird durch Musterabgleich analysiert und füllt die passenden Filter automatisch aus.
Karte
Jedes Apartment erscheint als Preispille. Hovern über eine Listenkarte hebt den zugehörigen Marker hervor und umgekehrt. Klick auf einen Marker öffnet das Detail.
Technischer Hinweis
Die Karte wird Lazy-Loaded — der erste Besuch zeigt einen grauen Placeholder, während MapLibre (~80 kB) nachgeladen wird. Das verkürzt den Seitenaufbau um ca. 50%.
3Apartment-Details
Ein Klick auf eine Apartmentkarte öffnet die Detailseite mit vollständigen Informationen, Galerie, Preisrechner und Buchungsformular.
Galerie
Das erste Bild (Hero) belegt zwei Spalten, die übrigen vier werden daneben angezeigt. Der Button „Alle Fotos anzeigen" öffnet die komplette Galerie im Fullscreen-Modus (Radix Dialog) mit Pfeilnavigation.
Preisrechner (BookingCard)
- Anreise- und Abreisedatum
- Gästeanzahl (Stepper mit Max-Validierung)
- Automatische Berechnung: Nächte × Basispreis + Wochenend-Zuschlag + Reinigung
- Gebühr für Zusatzgäste (über „inklusive" hinaus)
- Langzeit-Rabatt (ab 30 Nächten)
- Ortstaxe (Wien) + MwSt 10%
Teilen und Merken
- Teilen — öffnet den systemeigenen Teilen-Dialog (Web Share API mobil) oder kopiert die URL in die Zwischenablage
- Merken — markiert das Apartment als Favorit (Herz wird gefüllt); die Auswahl wird lokal im Browser gespeichert
Weitere Bereiche
- Beschreibung und Ausstattung (8 Gruppen)
- Stornierungs-Timeline — visuelle Darstellung
- Concierge Peek — Einladung zum AI-Concierge
- Gästebewertungen
- Host Card — Profil des Gastgebers
- Mini-Karte mit Lagemarkierung
4Buchungsablauf (3 Schritte)
Nach Klick auf „Jetzt buchen" folgt ein dreistufiger Checkout.
1Reise
Bestätigung von Daten, Gästeanzahl, Ankunftszeit (Standard 15:00) sowie einer optionalen Nachricht an den Gastgeber. Rechts zeigt das Panel die Preisdetails.
2Gast
Formular mit Gästedaten: Vorname, Nachname, E-Mail, Telefon. Die Felder werden mit Zod validiert — eine gültige E-Mail und Telefonnummer sind erforderlich.
3Zahlung
Kartenformular mit Demo-Platzhaltern. Im Live-Modus wird dies durch Stripe Connect Express ersetzt. Nach Klick auf „Bestätigen und bezahlen" wird die Buchung gespeichert und der Gast erhält einen Code im Format NR-{n}-{xxxxx}.
Demo-Modus
In der Demo-Version wird keine Karte tatsächlich belastet. Buchungen werden im Browser-Speicher (localStorage) abgelegt. Im Livebetrieb erhält der Gast eine Bestätigungs-E-Mail und eine PDF-Rechnung.
5Gäste-Portal
Jede Buchung hat eine eindeutige URL im Format /guest/NR-1-48312, die wie ein Magic Link funktioniert.
Portal-Elemente
- Header mit Buchungscode — kopierbarer Code, Status
- Countdown — dynamischer Timer zur Anreise
- Apartment-Details — Adresse, Schlüsselbox-Code, WLAN
- Anreise-Anleitung — Self-Check-in Schritt für Schritt
- Upsells — vier optionale Zusätze (Late Check-out, Flughafentransfer, Willkommenskorb, Mid-Stay-Reinigung). Die Auswahl wird pro Buchung gespeichert.
- AI Concierge Chat — Chat mit AI (im Live-Modus: Claude API)
- Nachricht an den Host — schneller Kontakt-Button
Fehlerrobustheit
Bei Eingabe eines ungültigen Codes erscheint die Seite „Buchung nicht gefunden" mit Rückkehr-Button. In früheren Versionen wurde eine fremde Buchung angezeigt — das wurde in Tier B korrigiert.
6Weitere Seiten
| Pfad | Inhalt |
|---|---|
/experiences | Erlebnis-Katalog — Wiener Melange, Oper, Schönbrunn |
/neighborhoods | Wiener Bezirke mit Beschreibungen |
/compare | Vergleichstabelle der 4 Apartments |
/contact | Kontaktformular (Zod-Validierung), Firmendaten |
/faq | Häufige Fragen (Accordion) |
/become-host | Landing für neue SaaS-Kunden (Hosts) |
/cleaner | Reinigungsansicht mit Aufgabenliste |
/impressum, /datenschutz, /agb | Rechtliche Seiten |
7Sprache und Design-Thema wechseln
Unten rechts auf jeder öffentlichen Seite befindet sich die DemoChrome-Pille mit zwei Buttons.
- Sprache — Deutsch (DE, Standard), Englisch (EN), Polnisch (PL)
- Design-Thema — fünf Varianten: Sonder, Linear, Aman, Hygge, Archive
Die Auswahl wird im Browser gespeichert. Die URL akzeptiert auch die Parameter ?lang=de und ?theme=linear — beim Kopieren des Links sieht der Empfänger dieselbe Ansicht.
Teil II
Verwaltungspanel (Host)
Das Panel ist unter /demo erreichbar. Es enthält CRM/ERP-Werkzeuge zur Verwaltung der Apartments, Buchungen, Gästekommunikation, Automatisierung und Abrechnungen.
1Anmeldung und Startseite (Dashboard)
In der Demo-Version ist das Panel ohne Anmeldung öffentlich zugänglich. Im Livebetrieb erfolgt die Anmeldung über Supabase Auth.
Sidebar
Permanente Navigation mit 10 Sektionen: Dashboard, Buchungen, Multi-Kalender, Residenzen, Gäste, Nachrichten, Automation, Berichte, Netzwerk, Einstellungen.
Dashboard
- KPI-Top-Reihe — Monatsumsatz, Buchungen, Auslastung (%), ADR
- Umsatzdiagramm — 12 Monate, Farbe pro Kanal
- Channel-Mix-Donut — prozentualer Kanalanteil
- Upcoming Check-ins — bevorstehende Anreisen
- Activity Feed — jüngste Ereignisse
2Firmenauswahl (Entity Switcher)
Oben links in der Topbar befindet sich der Firmenselektor. Die Plattform unterstützt mehrere Firmen pro Host — jede mit eigener UID, eigenem Stripe-Konto und fortlaufender Rechnungsnummerierung.
Die Demo definiert drei Firmen: Nobile Residence GmbH, Wien City Living e.U. und Hietzing Property Holding.
Unique Selling Point
Multi-Entity ist der entscheidende Vorteil gegenüber dem Wettbewerb. Jedes Apartment kann zu einer anderen juristischen Person gehören — mit separater Abrechnung und lückenloser österreichischer Rechnungsnummerierung.
3Suche in der Topbar
Die Suchleiste neben dem Firmenselektor funktioniert global. Ab zwei Zeichen öffnet sich ein Dropdown mit drei Ergebnistypen.
- Buchungen — nach Code, Gästename oder Apartment
- Residenzen — nach Name, Slug oder Stadt
- Gäste — nach Name (dedupliziert)
Klick auf ein Ergebnis führt direkt zur relevanten Seite. Die Suche arbeitet lokal, ohne Latenz.
4Multi-Kalender
/demo/calendar — Gitteransicht mit vier Zeilen (eine pro Apartment) und 42 Tagen im Header.
Klick in Tageszelle
ATag blockieren
„Tag blockieren" markiert den gewählten Tag als unverfügbar (Streifen-Muster). Ein erneuter Klick hebt die Blockierung auf.
BPreis für diesen Tag überschreiben
Das numerische Feld erlaubt einen abweichenden Preis. Nach dem Speichern erscheint ein kleines Tag €XXX in der Zelle. „Zurücksetzen auf Basispreis" stellt den Standardwert wieder her.
Statistik-Leisten
- iCal Sync — Status der Synchronisation mit Airbnb / Booking.com
- Overbooking Alerts — Anzahl erkannter Konflikte
- Ausgeblockte Nächte — gesperrte Nächte insgesamt
5Buchungen
/demo/bookings — Tabelle aller Buchungen. Spalten: Code, Apartment, Gast, Daten, Kanal, Status, Betrag.
Filter
- Apartment (Dropdown)
- Status (bestätigt / eingecheckt / ausgecheckt / storniert / ausstehend)
- Kanal (Direct / Airbnb / Booking.com)
- Zeitraum
Buchungsdetails
- Übersicht — alle Gästedaten, Zahlung, Historie
- Rechnung — österreichische Rechnung mit UID, fortlaufender Nummer, MwSt-Aufschlüsselung, Ortstaxe
- Kommunikation — Verlauf der E-Mail/SMS/WhatsApp-Nachrichten
Neue Buchung (manuell)
„Neue Buchung" in der Topbar öffnet ein Modal mit fünffeldigem Formular. Dient zur Eingabe von Buchungen außerhalb der Plattform.
6Residenzen und Editor
/demo/properties — Karten der Apartments mit Basiskennzahlen (Auslastung 90 Tage, Monatsumsatz, anstehende Buchungen).
Apartment hinzufügen
„Residenz hinzufügen" öffnet ein Modal mit 10-Feld-Formular. Neue Apartments werden lokal gespeichert und erscheinen im Panel und auf der öffentlichen Liste.
Editor (4-stufiger Wizard)
1Grunddaten
Name, Tagline, Beschreibung, Lage, Bezirk, Entfernung zum Stephansdom, U-Bahn-Station.
2Fotos
Drag-and-Drop oder Klick (JPG, PNG, WebP bis 20 MB). Fotos erscheinen sofort in der Galerie. Hover: „Als Hauptbild" / Papierkorb. Drag-Handle ermöglicht Umsortierung.
3Preise und Verfügbarkeit
Basispreis, Wochenend-Multiplikator, Reinigungsgebühr, Aufenthaltsdauer (min/max), Vermietungsart, Instant Book, Stornierungsrichtlinie, Kaution.
4Ausstattung
Gruppierte Liste der Ausstattungsmerkmale. Toggle je Element.
Jede Änderung wird automatisch lokal gespeichert. Der Chip „Zuletzt gespeichert HH:MM" zeigt den letzten Speicherzeitpunkt.
7Preiskalender
/demo/properties/[slug]/pricing — Kalenderansicht mit Tagespreisen. Wochenend-Tage sind hervorgehoben.
- Klick auf einen Tag ermöglicht einen individuellen Preis (Override)
- „Bulk Edit" — ein Preis für einen Datumsbereich gleichzeitig
- „Dirty" — solange Änderungen nicht gespeichert sind, ist Speichern aktiv
- Nach dem Speichern: „✓ Alle Preise gespeichert"
8Gäste (CRM)
/demo/guests — Liste eindeutiger Gäste. Spalten: Name, Land, Buchungen, Lebenszeit-Umsatz, letzter Besuch, Tags.
Klick auf einen Gast öffnet das Profil mit Aufenthaltshistorie, Präferenzen (z. B. „pet owner", „long-term") und Host-Notizen.
9Nachrichten
/demo/messages — vereinigte Inbox für drei Kanäle: E-Mail, SMS, WhatsApp.
Oberfläche
- Linke Spalte — Konversationsliste mit Kanalfilter, Textsuche, Ungelesen-Zähler
- Rechte Spalte — gewählter Thread, Antwort-Eingabe
Antworten
- Textarea mit kanalspezifischem Placeholder
- Button „Senden" — deaktiviert bei leerem Inhalt
- Shortcut
Strg+Enter(bzw.Cmd+Enter) sendet - Gesendete Nachricht wird angehängt und lokal gespeichert
- Badge zeigt den Ausgangskanal
AI Concierge Vorschlag
Für ungelesene Nachrichten schlägt das AI-Panel eine vorbereitete Antwort vor. „Einfügen & prüfen" übernimmt sie in die Eingabe.
10Automation (Regeln)
/demo/automation — Liste von Regeln „Trigger → Condition → Action". Jede Regel hat Name, Status, Ausführungszähler, Erfolgsquote.
Neue Regel erstellen
„Neue Regel" öffnet ein Modal mit vier Feldern: Name, Beschreibung, Wenn (Trigger), Dann (Aktion).
Nach Klick auf „Regel erstellen" erscheint die neue Regel oben in der Liste. Eigene Regeln haben zusätzlich einen „Löschen"-Button.
11Berichte
/demo/reports — Finanzanalytik.
- Umsatz pro Residenz (12-Monats-Trend)
- Channel Mix (Direkt vs. OTA)
- ADR, RevPAR, durchschnittliche Aufenthaltsdauer
- MwSt-Aufschlüsselung (für UStVA)
- Gesammelte Ortstaxe
- CSV-Export (im Livebetrieb)
12Partnernetzwerk
/demo/network — Cross-Listing: die Möglichkeit, Apartments von Partnern auf der eigenen Seite zu zeigen.
Zwei Tabs: „Mein Netzwerk" (wen zeige ich) und „Zeigt mich" (wer zeigt mich).
13Einstellungen
/demo/settings — fünf Tabs in der oberen Leiste.
Brand
Upload von Logo, Favicon, Auswahl eines der fünf Themen, Hero-Bild für die öffentliche Seite.
Firmen (Entities)
- Liste der registrierten Firmen mit UID, IBAN, Adresse, Stripe-Status
- Bearbeiten — Edit-Modal. Änderungen werden lokal als Override gespeichert; Badge „Bearbeitet" markiert geänderte Firmen
- „Neue Firma hinzufügen" — im Livebetrieb Stripe Connect Onboarding
Team
Liste der Teammitglieder mit Rollen (Owner, Manager, Cleaner, Accountant). „Team-Mitglied einladen" öffnet einen Einladungs-Modal.
Domains
Jede Firma kann eine eigene Subdomain oder Custom Domain haben. Liste mit Adressen, DNS-Status, SSL.
Integrations
Stripe Connect, Resend, Twilio, Anthropic Claude, Mapbox, iCal Sync.
14Reinigung (Cleaner View)
/cleaner — Ansicht für Reinigungskräfte.
Jede Aufgabe hat Buttons „Start" / „Done" / „Undo" und einen Fortschrittsbalken. Im Livebetrieb erhält die Rolle Zugriff über separate Einladung mit eingeschränkten Berechtigungen.